/* =====================================================================
 * lnb-mobile.css — global mobile-first responsive layer.
 *
 * Loaded on every public + admin page. Designed to be additive: doesn't
 * break existing desktop styles, only kicks in at small viewports OR
 * when touch is detected. Provides:
 *
 *   - 44px+ tap targets on every interactive element
 *   - Smooth-scroll containers + momentum scrolling on iOS
 *   - Tables that horizontal-scroll instead of overflowing
 *   - Modals that go full-screen on mobile
 *   - Sidebar that collapses behind a hamburger drawer
 *   - Sticky bottom action bars for primary CTAs on mobile
 *   - Fluid typography (clamp scaling between mobile and desktop)
 *   - Larger form inputs (16px font prevents iOS auto-zoom)
 *   - Safe-area inset padding for iPhone notches
 *   - Active-state highlighting that works with touch
 *
 * The breakpoint we standardize on is 760px. Below = mobile, above = desktop.
 * ===================================================================== */

/* ----- Universal touch + scrolling baseline ----- */
@media (hover: none) and (pointer: coarse) {
  /* Ensure every clickable element is at least 44x44 (Apple HIG) */
  button, a.btn, .btn, [role="button"], input[type="button"], input[type="submit"], .filter-btn, .nav-btn {
    min-height: 44px;
    touch-action: manipulation;
  }
  /* Kill the 300ms tap delay + double-tap zoom on interactive elements */
  a, button, input, select, textarea { touch-action: manipulation; }
  /* iOS momentum scroll for any overflow container */
  .scroll, .scroll-x, [class*="overflow"] { -webkit-overflow-scrolling: touch; }
}

/* ----- Safe-area padding for iPhone notch / Android nav-bar ----- */
@supports (padding: env(safe-area-inset-top)) {
  body { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
  .top-nav, .lnb-nav, nav.lnb-nav { padding-top: max(14px, env(safe-area-inset-top)); }
}

/* ----- Form inputs that don't trigger iOS auto-zoom ----- */
input[type="text"], input[type="email"], input[type="tel"], input[type="search"],
input[type="number"], input[type="password"], input[type="url"], input[type="date"],
textarea, select {
  font-size: max(16px, 1rem); /* below 16px iOS auto-zooms; this prevents that */
}

/* ----- Mobile breakpoint kicks in below 760px ----- */
@media (max-width: 760px) {

  /* Reduce wrap padding on tight screens */
  .wrap, .container, body > div.wrap {
    padding-left: max(16px, env(safe-area-inset-left)) !important;
    padding-right: max(16px, env(safe-area-inset-right)) !important;
  }

  /* ----- ADMIN SIDEBAR → MOBILE DRAWER -----
     The lnb-admin-shell.js sidebar is anchored left + always visible at
     desktop width. On mobile we hide it off-canvas and add a hamburger
     trigger that flips a body class to slide it in. */
  .lnb-admin-sidebar, .sidebar, nav.lnb-admin-sidebar {
    position: fixed !important;
    top: 0; bottom: 0; left: 0;
    width: 80vw; max-width: 320px;
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.16,1,.3,1);
    z-index: 60;
    box-shadow: 8px 0 32px rgba(0,0,0,.6);
    overflow-y: auto;
  }
  body.lnb-drawer-open .lnb-admin-sidebar,
  body.lnb-drawer-open .sidebar,
  body.lnb-drawer-open nav.lnb-admin-sidebar { transform: translateX(0); }
  body.lnb-drawer-open::after {
    content: '';
    position: fixed; inset: 0;
    background: rgba(0,0,0,.6);
    z-index: 55;
    backdrop-filter: blur(2px);
  }

  /* Hamburger trigger — auto-injected by lnb-admin-shell.js. CSS lives
     here so any page that uses the admin shell picks it up. */
  .lnb-mobile-hamburger {
    position: fixed;
    top: max(14px, env(safe-area-inset-top));
    left: 14px;
    z-index: 70;
    width: 44px; height: 44px;
    background: rgba(13,22,18,.92);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(240,195,90,.32);
    border-radius: 10px;
    color: #f0c35a;
    font-size: 20px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0,0,0,.4);
  }
  .lnb-mobile-hamburger:active { transform: scale(.94); }

  /* Push admin page content right of where the sidebar would be. We undo
     the desktop margin-left that the shell sets. */
  .lnb-admin-main, .main, body > .wrap { margin-left: 0 !important; }

  /* Page heads stack on mobile */
  .page-head { flex-direction: column !important; align-items: stretch !important; }
  .page-head .head-actions { flex-wrap: wrap; gap: 8px; }
  .page-head h1 { font-size: clamp(1.45rem, 5.5vw, 2rem) !important; }
  .page-head p  { font-size: .88rem !important; }

  /* KPI grids → single column on tight screens */
  .kpis, .grid, .dept-grid, .lnb-cards, .room-grid, .team-row {
    grid-template-columns: 1fr !important;
  }

  /* Tabs → horizontal scroll on overflow instead of wrapping */
  .tabs {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 4px;
    margin-left: -4px; padding-left: 4px;
    margin-right: -16px; padding-right: 16px;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs button { white-space: nowrap; flex-shrink: 0; }

  /* Tables — horizontal scroll wrapper */
  .tbl, .scrollx, table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .tbl table { min-width: 640px; }

  /* Modals — full screen on mobile */
  .modal-bg.open .modal {
    max-width: none !important;
    width: 100% !important;
    min-height: 100vh;
    border-radius: 0 !important;
    padding: 24px 18px !important;
    margin-bottom: 0;
  }
  .modal-bg { padding: 0 !important; align-items: stretch !important; }
  /* Modal action row — sticky at bottom on mobile so primary CTA is always
     thumb-reachable */
  .modal-actions {
    position: sticky;
    bottom: max(0px, env(safe-area-inset-bottom));
    background: linear-gradient(180deg, transparent 0, #0d1612 30%);
    padding-top: 24px !important;
    margin: 0 -18px -24px;
    padding: 18px 18px max(18px, env(safe-area-inset-bottom)) !important;
    z-index: 1;
  }

  /* Modal row2 → single column on mobile */
  .modal .row2 { grid-template-columns: 1fr !important; gap: 0 !important; }

  /* CRM specific — list/detail two-pane → stacked, detail toggleable */
  .layout, #listLayout {
    grid-template-columns: 1fr !important;
  }
  /* When a contact is selected on mobile, the detail pane slides up over
     the list. lnb-admin-shell or page JS adds .crm-detail-open. */
  body.crm-detail-open .contacts-panel { display: none !important; }

  /* Contact list cards — bigger tap targets */
  .contact { padding: 14px 12px !important; gap: 12px !important; }
  .contact .avatar { width: 44px !important; height: 44px !important; flex: none !important; }

  /* Kanban → horizontal scroll instead of wrapping */
  #kanbanLayout > div:first-child {
    grid-template-columns: repeat(4, 280px) !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    margin: 0 -16px;
    padding: 0 16px;
  }
  #kanbanLayout > div:first-child > div { scroll-snap-align: start; }

  /* Forecast grid — keep horizontal scroll, ensure first col is sticky */
  .fc-grid table { font-size: .72rem; }
  .fc-grid th, .fc-grid td { padding: 6px 8px !important; }

  /* Hero adjustments on public pages */
  .hero h1, .lnb-v2-h1 { font-size: clamp(1.8rem, 7vw, 2.6rem) !important; line-height: 1.1 !important; }
  .lnb-v2-tracks, .three-track { grid-template-columns: 1fr !important; }
  .invest-metrics { grid-template-columns: repeat(2, 1fr) !important; }

  /* Remove desktop-only ::before/::after decorations that get expensive */
  .fx-cursor-spotlight-el { display: none !important; }

  /* Stack any 2-col grid */
  .lnb-cards, .footer-grid, .thesis, .thesis > div, .proof-grid,
  .lnb-cta-row, .cta-row, .access-row, .cards { grid-template-columns: 1fr !important; }

  /* Buttons full width on mobile by default if inside a stack */
  .modal-actions .btn, .form-wrap .cta-row .btn, .btn-cta {
    width: 100%;
    justify-content: center;
  }

  /* Sticky bottom CTA bar for any page that opts in via .lnb-bottom-cta */
  .lnb-bottom-cta {
    position: fixed;
    left: 0; right: 0;
    bottom: 0;
    z-index: 30;
    background: linear-gradient(180deg, rgba(5,10,7,0) 0%, rgba(5,10,7,.96) 30%);
    padding: 14px 16px max(14px, env(safe-area-inset-bottom));
    border-top: 1px solid rgba(240,195,90,.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    gap: 10px;
  }
  .lnb-bottom-cta .btn, .lnb-bottom-cta .btn-cta { flex: 1; }

  /* Make sure search inputs are big enough to comfortably tap */
  input.search, .toolbar .search { font-size: 16px !important; padding: 11px 14px !important; }

  /* Hero video / 3D scene — disable on mobile to save battery + bandwidth */
  .lnb-hero3d, .fx-mesh-bg { display: none !important; }
  .lnb-v2-hero-video { opacity: .35 !important; }
}

/* ----- Tablet refinements ----- */
@media (min-width: 761px) and (max-width: 1024px) {
  .kpis, .grid { grid-template-columns: repeat(2, 1fr) !important; }
  .dept-grid, .room-grid, .team-row { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ----- Print styles (CFO-friendly) ----- */
@media print {
  .lnb-admin-sidebar, .sidebar, .top-nav, .head-actions, .modal-bg, .lnb-mobile-hamburger,
  .lnb-bottom-cta, .tabs { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  .wrap { max-width: 100% !important; padding: 0 !important; }
  .kpi, .tbl, .chart-host { box-shadow: none !important; border: 1px solid #ccc !important; }
}