/* ── Hamburger button (hidden on desktop) ── */
.nav-hamburger {
  display: none;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.25rem;
  cursor: pointer;
  padding: .25rem .4rem;
  line-height: 1;
  margin-left: auto;
  transition: color .15s;
}
.nav-hamburger:hover { color: var(--text-2); }

/* ── Nav links wrapper — desktop: transparent, items flow into nav flex ── */
.nav-links {
  display: contents;
}

/* ── Mobile breakpoint ── */
@media (max-width: 768px) {
  /* Prevent page-level horizontal scroll */
  html, body { overflow-x: hidden; max-width: 100vw; }

  /* flex items default to min-width:auto (= their content size), which causes
     blowout when content is wider than the container. Force shrinkability. */
  * { min-width: 0; }

  /* Nav becomes a wrapping flex container.
     !important needed because in-page <style> has same specificity and appears later. */
  nav {
    position: relative !important;
    flex-wrap: wrap !important;
    height: auto !important;
    padding: 0 1rem !important;
    gap: 0 !important;
    z-index: 200 !important;
  }

  nav .brand {
    height: 52px;
    display: flex;
    align-items: center;
  }

  .nav-hamburger {
    display: flex;
    align-items: center;
    height: 52px;
    margin-left: auto;
  }

  /* ── Dropdown: slide-down animation via max-height ──
     display:none → display:flex can't animate; max-height:0 → max-height can. */
  .nav-links {
    display: flex;           /* always in flow so transition works */
    flex-direction: column;
    width: 100%;
    background: #000000;     /* fully opaque, same as nav bar */
    border-top: 1px solid var(--border);

    /* Collapsed state */
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;

    transition:
      max-height 0.32s cubic-bezier(0.4, 0, 0.2, 1),
      opacity    0.22s ease;
  }

  .nav-links.open {
    max-height: 420px;       /* larger than menu content */
    opacity: 1;
    pointer-events: auto;
    padding-bottom: .5rem;
  }

  .nav-links a {
    display: block;
    padding: .7rem 1rem;
    font-size: .78rem;
    color: var(--muted);
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    transition: background .12s, color .12s;
  }
  .nav-links a:last-of-type { border-bottom: none; }
  .nav-links a:active       { background: var(--surface-alt); }
  .nav-links a.active       { color: var(--text); background: var(--surface-alt); }

  .btn-logout {
    display: block;
    margin: .5rem 1rem .25rem;
    width: calc(100% - 2rem);
    text-align: center;
    padding: .55rem;
  }

  /* ── Layout ── */
  .container { padding: 1rem .75rem !important; overflow-x: hidden !important; }

  .kpis      { grid-template-columns: 1fr 1fr !important; }
  .two-col   { grid-template-columns: 1fr !important; }
  .layout    { grid-template-columns: 1fr !important; }

  .chart-wrap { height: 200px !important; }
  .dist-wrap  { height: 180px !important; }

  /* ── Tables: card = horizontal scroll container ──
     body overflow-x:hidden stops page scroll;
     card overflow-x:auto + -webkit-overflow-scrolling gives iOS momentum. */
  .card {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 1rem .75rem !important;   /* override in-page 1.25rem 1.5rem */
  }

  /* Card-header: wrap so title + controls/legend don't force card wide */
  .card-header { flex-wrap: wrap !important; gap: .5rem !important; }

  /* Allow th text to wrap — two selectors to beat .proj-table th specificity */
  th, .proj-table th { white-space: normal !important; min-width: 2.5rem; }

  .btn-sm { padding: .2rem .45rem; font-size: .6rem; }

  /* ── Projection page ── */

  /* Milestone legend: hide on mobile (chart lines still visible) */
  .milestones { display: none !important; }

  /* Page-header: stack title and controls */
  .page-header { flex-wrap: wrap; gap: .5rem; }

  /* Controls wrapper must be full-width so child width:100% rules work */
  .proj-controls { width: 100% !important; gap: .5rem !important; }

  /* Force each control group onto its own line */
  .scenario-bar { width: 100%; gap: .4rem; }
  .horizon-bar  { width: 100%; gap: .3rem; }
  .display-toggle { width: 100%; }
  .display-toggle select { flex: 1; min-width: 0; max-width: 100%; }

  /* Scenario/horizon buttons: slightly smaller */
  .scenario-pill, .horizon-btn {
    padding: .22rem .65rem !important;
    font-size: .62rem !important;
  }

  /* Param inputs: slightly narrower */
  .param-input { width: 68px !important; }

  /* Life-events row: 4 columns (toggle hidden), no extra margin */
  .event-row {
    grid-template-columns: 1fr auto auto auto !important;
    gap: .25rem !important;
    padding: .45rem .5rem !important;
    margin-left: 0 !important;
  }
  .event-row .event-toggle { display: none !important; }

  /* Asset/liability growth table: compact */
  .asset-growth-table input { width: 50px !important; }
  .asset-growth-table th,
  .asset-growth-table td { padding: .35rem .3rem !important; font-size: .72rem; }

  /* Snapshot: raise max-height cap so full asset list isn't clipped on mobile */
  #snapshot-panel.open { max-height: 2000px !important; }
  #snapshot-panel table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ── Values page ── */
  /* header-right (filters + button) wraps on narrow screens */
  .header-right { flex-wrap: wrap !important; gap: .4rem !important; }
  .header-right select { min-width: 0 !important; flex: 1 1 120px !important; }

  /* ── Income page ── */
  .section-header { flex-wrap: wrap !important; gap: .5rem !important; }

  /* ── Dashboard allocation rows ── */
  .alloc-row { grid-template-columns: 1fr 1fr !important; }
  .alloc-meta { display: none; }

  /* Modals: full-width */
  .modal { max-width: 100% !important; margin: 0 1rem; }
}

@media (max-width: 480px) {
  .field-row { grid-template-columns: 1fr !important; }
}