/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   THE BOARD SHELL — the top bar and the left icon rail, for pages that are not the board.
   C:\Users\Rossi\Desktop\tracketing-dashboard\assets\css\board-shell.css

   WHAT THIS IS FOR
   The insights feed and a study page are their own pages, but they belong to a board, and on a
   big screen they should look like it: same rail, same top bar, same light palette, same green.
   Rossi, 2026-08-28: "On Desktop, keep the top navigation bar & left hand panel as on the board
   page", and "on desktop keep the same theme as the boards page".

   ON A PHONE THIS FILE DOES ALMOST NOTHING. Every rule below 1024px is a hide. The insights feed
   on a phone stays exactly what it was — a dark, full-screen, swipeable feed with the shared
   bottom bar. Two experiences, one page, and the line between them is the SCREEN, never who is
   asking: the same bytes go to everybody and the browser picks.

   WHY 1024px. Below it the board itself gives up its rail (mobile-nav.js hides #nav at 768px and
   draws the bottom bar instead), and between 768 and 1024 a 60px rail plus a readable feed column
   leaves nothing for the chart. One line, wide enough that anything above it is a real desktop.

   THE CLASS NAMES ARE THE BOARD'S, DELIBERATELY. #nav, .nav-item, .nav-label, #nav-billing,
   #trk-session, #topbar-user. Two shared modules already know those names and wire themselves to
   them for free: assets/auth-nav.js swaps the footer's "Log in" for a real "Log out" and mounts
   the avatar menu, and assets/mobile-nav.js hides #nav on a phone. Rename them here and both go
   quietly dead.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── below the line: the shell is not there at all ─────────────────────────────────────────────
   Not "collapsed", not "off-screen" — display:none, so nothing in it is tabbable, readable by a
   screen reader, or able to catch a swipe meant for the feed behind it. */
@media (max-width: 1023.98px) {
  #nav, #topbar { display: none !important; }
}

@media (min-width: 1024px) {
  /* ── the board's own palette ───────────────────────────────────────────────────────────────
     Straight from dashboard.html's :root. These override the feed's dark tokens for desktop
     only, which is what turns the whole page light: every surface on the insights pages is
     mixed from these rather than hard-coded, so redefining the tokens redresses the page.

     --accent is the board's green here. On a phone the feed overwrites --accent per card with
     that card's trend colour; the desktop feed does not, because a page showing six cards at
     once would be six different greens and reds with no meaning attached. */
  :root {
    --bg-primary:   #f5f5f5;
    --bg-card:      #ffffff;
    --bg-nav:       #ffffff;
    --bg:           #ffffff;
    --bg-deep:      #f5f5f5;
    --surface:      #ffffff;
    --surface2:     #f5f5f5;
    --border:       #e5e5e5;
    --border2:      #d8d8d8;
    --text-primary: #1a1a1a;
    --text-secondary: #4a4a4a;
    --text-muted:   #767676;   /* 4.6:1 on #f5f5f5 — the board's #888 is 3.5:1 and fails */
    --accent:       #1D9E75;
    --brand:        #1D9E75;
    --on-accent:    #ffffff;
    --shadow:       rgba(15, 23, 41, .10);
    /* "Something went up" and "something went down", as TEXT. The feed's mint and coral are drawn
       for a near-black screen and measure 1.7:1 and 2.5:1 on white — the key-figure strip prints
       its numbers in them, so this is reader-facing, not decoration. */
    --positive:     #147A57;
    --negative:     #B02A25;
    --amber:        #A87200;

    /* The chart engine reads these off :root the first time it draws (assets/js/insights/charts.js
       → readCssVars). On white, the dark feed's mint and coral are too light to read, so the
       desktop set is the board's own green and red. */
    --chart-up:      #1D9E75;
    --chart-down:    #C4302B;
    /* #E0A100 measures 2.3:1 on white — the feed's amber is drawn for a near-black screen, and
       the headline figure on a "flat" card is printed IN this colour. Darkened to clear the
       3:1 floor for large text with room to spare (4.1:1). */
    --chart-flat:    #A87200;
    --chart-neutral: #7A8290;
    --chart-track:   rgba(15, 23, 41, .08);
    --chart-muted:   rgba(15, 23, 41, .22);

    --nav-collapsed: 60px;
    --nav-expanded:  200px;
    --topbar-h:      48px;
    --ease: 0.3s ease;
  }

  /* ── the top bar ──────────────────────────────────────────────────────────────────────────── */
  #topbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--topbar-h);
    background: var(--bg-nav);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 16px 0 0;
    z-index: 100;
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  }
  .topbar-spacer { flex-shrink: 0; width: var(--nav-collapsed); height: 100%; transition: width var(--ease); }
  body.nav-open .topbar-spacer { width: var(--nav-expanded); }

  .board-title { display: flex; align-items: baseline; gap: 7px; padding-left: 20px; white-space: nowrap; flex-shrink: 0; }
  .board-title-main { font-size: 19px; font-weight: 700; color: #17AE42; letter-spacing: -0.015em; }
  .board-title-count { font-size: 13px; font-weight: 500; color: #777; }
  /* The amber bullet between the counts — the same mark the board's own masthead and /coverage
     use, so the three bars read as one product rather than three pages. */
  .board-title-count .sep {
    display: inline-block; width: 5px; height: 5px; border-radius: 50%;
    background: #FFB83B; margin: 0 8px; vertical-align: middle;
  }
  .topbar-fill { flex: 1 1 auto; }
  /* auth-nav.js mounts the avatar menu here. Empty and harmless when logged out. */
  #topbar-user { flex-shrink: 0; display: flex; align-items: center; }

  /* ── the rail ─────────────────────────────────────────────────────────────────────────────── */
  #nav {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--nav-collapsed);
    background: var(--bg-nav);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    padding: 0 0 8px;
    z-index: 101;
    overflow: visible;
    transition: width var(--ease);
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  }
  body.nav-open #nav { width: var(--nav-expanded); }

  .nav-logo {
    display: flex; align-items: center; justify-content: center;
    height: var(--topbar-h); flex-shrink: 0; overflow: hidden;
    border-bottom: 1px solid var(--border);
  }
  body.nav-open #nav .nav-logo { justify-content: flex-start; padding-left: 14px; }
  .nav-logo img { height: 26px; object-fit: contain; }
  .nav-logo .lg-small { display: block; }
  .nav-logo .lg-big { display: none; max-width: 140px; }
  body.nav-open #nav .nav-logo .lg-small { display: none; }
  body.nav-open #nav .nav-logo .lg-big { display: block; }

  .nav-list { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 3px; padding: 0 8px; overflow-y: auto; overflow-x: hidden; }
  .nav-group {
    font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--text-muted); white-space: nowrap; overflow: hidden;
    max-height: 0; padding: 0 12px; opacity: 0;
    transition: opacity .2s ease, max-height .3s ease, padding .3s ease;
  }
  body.nav-open #nav .nav-group { max-height: 34px; padding: 10px 12px 4px; opacity: .6; }

  .nav-item {
    display: flex; align-items: center; gap: 10px;
    padding: 13px 10px; border-radius: 8px; cursor: pointer;
    color: var(--text-muted); text-decoration: none;
    transition: background .12s, color .12s;
    white-space: nowrap; overflow: hidden;
  }
  .nav-item:hover { background: #f0f0f0; color: var(--text-primary); }
  .nav-item.active { background: #f0f0f0; color: var(--accent); }
  .nav-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  .nav-item svg { flex-shrink: 0; }
  .nav-label { font-size: 13px; font-weight: 500; opacity: 0; max-width: 0; overflow: hidden; white-space: nowrap; transition: opacity .2s ease, max-width .3s ease; }
  body.nav-open #nav .nav-label { opacity: 1; max-width: 160px; }

  .nav-sep { height: 1px; background: var(--border); margin: 6px 8px; flex-shrink: 0; }
  .nav-foot { padding: 0 8px; flex-shrink: 0; }

  .nav-knob {
    position: absolute; right: -12px; top: 50%; transform: translateY(-50%);
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--bg-card); border: 1px solid var(--border);
    box-shadow: 0 1px 4px rgba(0,0,0,.09);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--text-muted); z-index: 102;
    transition: color .12s, box-shadow .12s;
  }
  .nav-knob:hover { color: var(--text-primary); box-shadow: 0 2px 8px rgba(0,0,0,.14); }
  .nav-knob svg { transition: transform var(--ease); }
  body.nav-open .nav-knob svg { transform: rotate(180deg); }

  .nav-item.disabled { pointer-events: none; opacity: .45; }
  .nav-soon {
    display: none; background: #e8e8e8; color: #999;
    font-size: 9px; font-weight: 600; padding: 1px 5px; border-radius: 20px;
    margin-left: 6px; letter-spacing: .03em; text-transform: uppercase;
  }
  body.nav-open #nav .nav-soon { display: inline; }

  /* ── what the shell does to the page it wraps ──────────────────────────────────────────────
     The rail and bar are both position:fixed, so the page underneath has to be pushed out of
     their way itself. `trk-shell` is put on <body> by board-shell.js only once it has actually
     drawn — a page that fails to load the script keeps its full width rather than a 60px hole
     down the left where nothing is. */
  body.trk-shell {
    padding-left: var(--nav-collapsed);
    padding-top: var(--topbar-h);
    transition: padding-left var(--ease);
  }
  body.trk-shell.nav-open { padding-left: var(--nav-expanded); }
}

/* Somebody who has asked their system for less movement gets the layout, not the sliding. */
@media (prefers-reduced-motion: reduce) {
  #nav, .nav-label, .nav-group, .topbar-spacer, body.trk-shell, .nav-knob svg { transition: none !important; }
}