/* ============================================================
   desktop.css — Tour Tracker Desktop Layout
   3-Pane CSS Grid for viewports >= 1024px
   Preserves all mobile styles below 1024px (no overrides)
   ============================================================ */

/* ─── DESKTOP GRID (>= 1024px) ──────────────────────────── */
@media (min-width: 1024px) {

  /* Remove mobile body overflow lock */
  html, body, #root {
    overflow: visible !important;
    height: 100vh;
  }

  /* ── Root container: full-viewport 3-column grid ── */
  .tt-desktop-root {
    display: grid;
    grid-template-columns: 320px 1fr 420px;
    grid-template-rows: 60px 0px 1fr 60px; /* Hidden syncbar, merged into header/sidebar */
    grid-template-areas:
      "header   header  header"
      "sidebar  main    detail"
      "sidebar  main    detail"
      "nav      nav     nav";
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    background: #0b0f1a;
    max-width: 100% !important;
    margin: 0 !important;
  }

  /* ─────────────────── HEADER ─────────────────────────── */
  .tt-header-desktop {
    grid-area: header;
    background: linear-gradient(135deg, #1e3a5f 0%, #0f2744 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    z-index: 50;
  }

  .tt-header-desktop h1 {
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    margin: 0;
  }

  .tt-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  /* Session code badge in header */
  .tt-session-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    padding: 4px 10px;
    font-size: 11px;
    color: #94a3b8;
    font-family: 'SF Mono', 'Fira Code', monospace;
    letter-spacing: 0.05em;
  }

  .tt-session-badge .session-code {
    color: #60a5fa;
    font-weight: 700;
    font-size: 12px;
  }

  /* ─────────────────── SYNC STATUS BAR ───────────────── */
  .tt-syncbar {
    grid-area: syncbar;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 20px;
    background: rgba(15, 23, 42, 0.95);
    border-bottom: 1px solid rgba(255,255,255,0.04);
    font-size: 10px;
    color: #475569;
  }

  .sync-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: background-color 0.3s ease;
  }

  .sync-dot.synced  { background: #34C759; box-shadow: 0 0 6px rgba(52,199,89,0.5); }
  .sync-dot.pending { background: #f59e0b; box-shadow: 0 0 6px rgba(245,158,11,0.5); animation: pulse 1.5s infinite; }
  .sync-dot.offline { background: #64748b; }
  .sync-dot.error   { background: #FF3B30; box-shadow: 0 0 6px rgba(255,59,48,0.5); }

  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.4; }
  }

  .sync-label { color: #64748b; }
  .sync-label.synced  { color: #34C759; }
  .sync-label.pending { color: #f59e0b; }

  /* ─────────────────── LEFT SIDEBAR (Passengers) ──────── */
  .tt-sidebar {
    grid-area: sidebar;
    overflow-y: auto;
    border-right: 1px solid rgba(255,255,255,0.06);
    background: rgba(15, 23, 42, 0.6);
    display: flex;
    flex-direction: column;
  }

  /* Sticky search bar at top of sidebar */
  .tt-sidebar-search {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(15, 23, 42, 0.98);
    padding: 12px 12px 8px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    backdrop-filter: blur(8px);
  }

  .tt-sidebar-label {
    font-size: 9px;
    color: #475569;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 10px 12px 4px;
  }

  /* ─────────────────── CENTER MAIN (Tab Content) ──────── */
  .tt-main {
    grid-area: main;
    overflow-y: auto;
    padding: 0;
    background: #111827; /* Slightly lighter than sidebar */
    border-right: 1px solid rgba(255,255,255,0.08);
  }

  /* Push tab content padding on desktop */
  .tt-main > * {
    max-width: 680px;
    margin: 0 auto;
    padding-top: 4px;
  }

  /* ─────────────────── RIGHT DETAIL (Passenger) ────────── */
  .tt-detail {
    grid-area: detail;
    overflow-y: auto;
    background: #0f172a;
    display: flex;
    flex-direction: column;
  }

  /* Placeholder shown when no passenger is selected */
  .tt-detail-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 12px;
    color: #1e293b;
  }

  .tt-detail-empty-icon {
    width: 56px;
    height: 56px;
    background: rgba(255,255,255,0.03);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.06);
  }

  .tt-detail-empty p {
    font-size: 12px;
    color: #334155;
    text-align: center;
    line-height: 1.5;
    max-width: 200px;
  }

  /* ─────────────────── BOTTOM NAV ─────────────────────── */
  .tt-nav-desktop {
    grid-area: nav;
    display: flex;
    justify-content: center;
    gap: 0;
    background: rgba(10, 15, 30, 0.98);
    border-top: 1px solid rgba(255,255,255,0.06);
    backdrop-filter: blur(12px);
    z-index: 50;
    padding: 0 20px;
  }

  .tt-nav-desktop button {
    flex: 0 1 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 6px 16px;
    background: none;
    border: none;
    cursor: pointer;
    transition: background 0.15s;
    border-radius: 8px;
    margin-top: 4px;
  }

  .tt-nav-desktop button:hover {
    background: rgba(255,255,255,0.04);
  }

  /* ─────────────────── HIDE MOBILE-ONLY ELEMENTS ──────── */
  /* Back button: not needed when list is always visible */
  .tt-back-btn {
    display: none !important;
  }

  /* Mobile padding-bottom spacer (bottom nav is now in grid) */
  .tt-mobile-scroll-pad {
    display: none;
  }

  /* Passenger detail header padding on desktop */
  .tt-detail .passenger-detail-wrap {
    padding: 16px;
  }

  /* ─────────────────── SCROLLBAR STYLING ─────────────── */
  .tt-sidebar::-webkit-scrollbar,
  .tt-main::-webkit-scrollbar,
  .tt-detail::-webkit-scrollbar {
    width: 4px;
  }

  .tt-sidebar::-webkit-scrollbar-track,
  .tt-main::-webkit-scrollbar-track,
  .tt-detail::-webkit-scrollbar-track {
    background: transparent;
  }

  .tt-sidebar::-webkit-scrollbar-thumb,
  .tt-main::-webkit-scrollbar-thumb,
  .tt-detail::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.08);
    border-radius: 2px;
  }

  /* ─────────────────── CARD SIZING ADJUSTMENTS ────────── */
  /* Widen cards slightly on desktop center pane */
  .tt-main .card-wide {
    padding: 16px;
  }
}

/* ─── MOBILE ONLY (below 1024px) ───────────────────────── */
@media (max-width: 1023px) {
  /* Desktop-specific elements are invisible on mobile */
  .tt-desktop-root,
  .tt-syncbar,
  .tt-session-badge,
  .tt-detail-empty,
  .tt-detail-empty-icon {
    /* These classes are only applied by the isDesktop branch in app.js */
    /* No need to hide — they simply won't be rendered */
  }

  /* Mobile: compact sync status in header */
  .tt-sync-mobile-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #34C759;
  }
}

/* ─── SAFE AREA SUPPORT (desktop with notches / macOS) ─── */
@media (min-width: 1024px) {
  .tt-desktop-root {
    padding-left:   env(safe-area-inset-left);
    padding-right:  env(safe-area-inset-right);
  }
}