/* ═══════════════════════════════════════════════════════════════════════
   KANSOROUTE — DESKTOP ENHANCEMENTS  @media (min-width: 1024px)
   ⚠  Zero mobile styles touched here. This file is purely additive.
═══════════════════════════════════════════════════════════════════════ */

@media (min-width: 1024px) {

  /* ══════════════════════════════════════════════════════════════════
     1. FULL-BLEED LAYOUT
        Remove the stone outer frame — app fills the viewport edge to
        edge on every monitor width. No max-width cap.
  ══════════════════════════════════════════════════════════════════ */

  /* Eliminate the warm-gray outer background set at ≥900px */
  body { background: white; }

  #main-app {
    max-width: none;
    margin: 0;
    box-shadow: none;
  }


  /* ══════════════════════════════════════════════════════════════════
     2. DARK SIDEBAR
        Transforms the most mobile-looking element — a white nav bar —
        into a proper dark application sidebar. Uses the brand forest
        green at deep saturation.
  ══════════════════════════════════════════════════════════════════ */

  .bottom-nav {
    background: #192e27;
    border-right: none;
    width: 240px;
  }

  /* Widen the grid column to match */
  #main-app { grid-template-columns: 240px 1fr; }

  /* ── Brand area: lock to same height as tab-header so they form
     a continuous horizontal band across the full viewport ── */
  .nav-brand {
    height: 64px;          /* matches tab-header min-height exactly */
    padding: 0 20px;
    margin-bottom: 0;
    gap: 10px;
    /* More visible separator so the 64px band reads as one line */
    border-bottom: 1px solid rgba(255,255,255,0.14);
  }

  /* Icon mark only (favicon.svg = square mark, no text) */
  .nav-logo {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    filter: brightness(0) invert(1);
    opacity: 0.82;
  }

  /* Wordmark text beside the icon */
  .nav-brand-name {
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.82);
    white-space: nowrap;
  }

  /* Nav items: dim by default, white when active */
  .nav-item {
    color: rgba(255,255,255,0.48);
    margin: 2px 10px;
  }
  .nav-icon svg { width: 17px; height: 17px; }
  .nav-label { font-size: 13px; }

  .nav-item.active {
    background: rgba(255,255,255,0.1);
    color: #fff;
  }
  /* Active left-edge bar: softer white */
  .nav-item.active::before { background: rgba(255,255,255,0.6); }

  .nav-item:not(.active):hover {
    background: rgba(255,255,255,0.07);
    color: rgba(255,255,255,0.82);
  }

  /* Bottom-sheet offset for wider sidebar */
  .bottom-sheet { left: 240px; }


  /* ══════════════════════════════════════════════════════════════════
     3. FLOATING ACTION BUTTON → INLINE HEADER BUTTONS
        The FAB is the clearest mobile pattern. Hide it; actions move
        into the page header as contextual text buttons.
  ══════════════════════════════════════════════════════════════════ */

  #fab { display: none !important; }

  /* Desktop-only action button wrapper (hidden on mobile via base rule) */
  .dk-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }


  /* ══════════════════════════════════════════════════════════════════
     4. UNDERLINE TAB NAVIGATION
        Replace pill-buttons with a desktop tab bar.
        The 2px accent underline on the active tab is the indicator.
  ══════════════════════════════════════════════════════════════════ */

  #tab-expenses .tab-header,
  #tab-plan .tab-header {
    height: 64px;
    min-height: 64px;
    align-items: stretch;
    padding: 0 clamp(32px, 4vw, 52px);
    gap: 0;
  }

  .plan-tabs {
    flex: 1;
    height: 100%;
    align-items: stretch;
    overflow-x: visible;
    gap: 0;
  }

  .plan-tab {
    height: 100%;
    padding: 0 20px;
    border-radius: 0;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--ink-3);
    background: transparent;
    border-bottom: 2px solid transparent;
    /* Overlap the header border for seamless flush indicator */
    position: relative;
    top: 1px;
    transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
  }

  .plan-tab.active {
    color: var(--accent);
    background: transparent;
    border-bottom: 2px solid var(--accent);
  }

  .plan-tab:not(.active):hover {
    color: var(--ink);
    background: var(--sand);
  }

  /* Spacer so dk-actions aligns right inside the tab header */
  #tab-expenses .tab-header .dk-actions,
  #tab-plan .tab-header .dk-actions {
    margin-left: auto;
    border-left: 1px solid var(--border);
    padding-left: 20px;
  }

  /* Home + Pack tab headers */
  #tab-home .tab-header,
  #tab-pack .tab-header {
    padding: 0 clamp(32px, 4vw, 52px);
    gap: 10px;
    min-height: 64px;
  }

  /* Push dk-actions to far right on all tab headers */
  #tab-home .tab-header .dk-actions,
  #tab-pack .tab-header .dk-actions {
    margin-left: auto;
  }


  /* ══════════════════════════════════════════════════════════════════
     5. EXPENSE LOG — DATA TABLE
        The biggest "mobile" signal in the app: a stacked list.
        Transform it into a real table with column headers.
  ══════════════════════════════════════════════════════════════════ */

  /* Column header row — hidden on mobile via base rule (display:none) */
  .expense-table-head {
    display: grid;
    grid-template-columns: 28px 1fr 120px;
    gap: 0 16px;
    padding: 0 0 8px;
    border-bottom: 1.5px solid var(--border-strong);
    margin-bottom: 2px;
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-4);
    align-items: end;
  }

  .expense-table-head .exp-th-right { text-align: right; }

  /* Expense rows: match the header column grid exactly */
  #expenses-content .expense-item {
    display: grid;
    grid-template-columns: 28px 1fr 120px;
    gap: 0 16px;
    align-items: center;
    padding: 9px 0;
    border-radius: 0;
    /* Override the mobile bleed hover effect */
    margin: 0;
  }

  /* Undo the mobile bleed hover on desktop */
  #expenses-content .expense-item:hover {
    margin: 0;
    padding: 9px 6px;
    border-radius: var(--radius-sm);
    border-bottom-color: transparent;
  }

  #expenses-content .expense-cat-icon {
    width: 28px;
    height: 28px;
    font-size: 13px;
    border-radius: 5px;
    flex-shrink: 0;
    /* Occupies col 1 */
  }

  /* Info: two-col sub-grid → description left, meta right */
  #expenses-content .expense-info {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0 24px;
    align-items: center;
    min-width: 0;
  }

  #expenses-content .expense-desc {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #expenses-content .expense-meta {
    margin-top: 0;
    white-space: nowrap;
    font-size: 12px;
    color: var(--ink-4);
    text-align: right;
  }

  /* Amount: right-aligned, no original currency clutter */
  #expenses-content .expense-right {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }

  #expenses-content .expense-amount { font-size: 14px; }

  /* Filter chips: wrap on desktop, no horizontal scroll */
  #expenses-content .filter-bar {
    flex-wrap: wrap;
    overflow-x: visible;
    padding-bottom: 0;
    gap: 6px;
    margin-bottom: 12px;
  }

  /* Section labels in expense list: subtle column group header */
  #expenses-content > .section-label {
    margin-top: 20px;
    padding-bottom: 0;
  }


  /* ══════════════════════════════════════════════════════════════════
     6. EXPENSE SUMMARY — 2-COLUMN
  ══════════════════════════════════════════════════════════════════ */

  .summary-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
  }
  .summary-col > .section-label { margin-top: 0; }


  /* ══════════════════════════════════════════════════════════════════
     7. BALANCES — 2-COLUMN
  ══════════════════════════════════════════════════════════════════ */

  .balances-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
  }
  .balances-col > .section-label { margin-top: 0; }
  .balances-col .settle-box { margin-bottom: 16px; }


  /* ══════════════════════════════════════════════════════════════════
     8. ITINERARY — MULTI-COLUMN STOP CARDS
  ══════════════════════════════════════════════════════════════════ */

  .itinerary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 20px;
    align-items: start;
  }

  .itinerary-grid .itinerary-stop { margin-bottom: 0; }

  .itinerary-grid .itinerary-stop-header {
    background: var(--accent);
    border: 1px solid var(--accent);
    border-bottom: none;
    border-radius: var(--radius) var(--radius) 0 0;
    padding: 14px 16px;
  }
  .itinerary-grid .itinerary-stop-name  { color: white; font-size: 15px; }
  .itinerary-grid .itinerary-stop-emoji { font-size: 17px; }
  .itinerary-grid .itinerary-stop-dates { font-size: 12px; color: rgba(255,255,255,0.72); }

  .itinerary-grid .itinerary-day {
    background: white;
    border: 1px solid var(--border);
    border-top: none;
    padding: 0 14px;
    margin-bottom: 0;
  }
  .itinerary-grid .itinerary-day:last-child {
    border-radius: 0 0 var(--radius) var(--radius);
    padding-bottom: 8px;
  }
  .itinerary-grid .activity-item  { padding: 7px 0; min-height: 36px; }
  .itinerary-grid .add-activity-btn { min-height: 36px; }


  /* ══════════════════════════════════════════════════════════════════
     9. BOOKINGS CARD GRID — POLISH
  ══════════════════════════════════════════════════════════════════ */

  .bookings-list { margin-top: 8px; }

  .bookings-list > .section-label {
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0;
  }

  .bookings-list .booking-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: rgba(45,90,78,0.2);
    /* ensure bleed effect doesn't apply */
    margin: 0;
    padding: 14px 16px;
    border-radius: var(--radius);
    background: white;
  }

  .bookings-total { margin-bottom: 16px; }


  /* ══════════════════════════════════════════════════════════════════
     10. PACKING GRID — POLISH
  ══════════════════════════════════════════════════════════════════ */

  .pack-overall { margin-bottom: 8px; }


  /* ══════════════════════════════════════════════════════════════════
     11. HOME — DASHBOARD REFINEMENTS
  ══════════════════════════════════════════════════════════════════ */

  .hero-card       { padding: 28px 32px; }
  .hero-countdown  { top: 24px; right: 28px; }
  .stat-value      { font-size: 25px; }

  /* Stops: wrap instead of horizontal scroll */
  .stop-strip {
    flex-wrap: wrap;
    overflow-x: visible;
  }


  /* ══════════════════════════════════════════════════════════════════
     12. GLOBAL DENSITY
        Desktop users read at smaller sizes and process more info.
        Reduce the padding and spacing calibrated for touch targets.
  ══════════════════════════════════════════════════════════════════ */

  .section-label {
    font-size: 11px;
    letter-spacing: 0.14em;
    margin-top: 24px;
    margin-bottom: 8px;
  }

  .card           { padding: 16px 20px; }
  .checklist-item { padding: 9px 0; }
  .notes-editor   { min-height: 200px; }
  .traveller-row  { padding: 9px 0; }
  .balance-row    { padding: 9px 0; }
  .booking-item   { padding: 10px 0; }
  .member-row     { padding: 8px 0; }


  /* ══════════════════════════════════════════════════════════════════
     13. LANGUAGE SWITCHER — inside nav-user-area on dark sidebar
  ══════════════════════════════════════════════════════════════════ */

  /* Reveal the lang-switcher that's nested inside nav-user-area */
  .nav-user-area .lang-switcher {
    display: flex;
    padding: 0;
    gap: 4px;
  }

  .lang-btn {
    border-color: rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.42);
    background: transparent;
    font-size: 10px;
    padding: 3px 8px;
  }

  .lang-btn:hover {
    border-color: rgba(255,255,255,0.45);
    color: rgba(255,255,255,0.8);
    background: rgba(255,255,255,0.06);
  }

  .lang-btn.active {
    background: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.9);
    border-color: rgba(255,255,255,0.3);
  }


  /* ══════════════════════════════════════════════════════════════════
     14. NAV USER AREA (desktop sidebar footer)
        Shown at the bottom of the sidebar — user email + sign-out.
  ══════════════════════════════════════════════════════════════════ */

  .nav-user-area {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px;
    margin-top: auto;          /* pushes to bottom of sidebar */
    border-top: 1px solid rgba(255,255,255,0.1);
  }

  .nav-user-email {
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 11px;
    color: rgba(255,255,255,0.45);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
  }

  .nav-signout {
    color: rgba(255,255,255,0.45) !important;
    font-size: 11px !important;
    padding: 0 !important;
    height: auto !important;
    text-align: left;
    justify-content: flex-start;
    letter-spacing: 0;
  }
  .nav-signout:hover { color: rgba(255,255,255,0.8) !important; }
}