/* ══════════════════════════════════════════════════════════════════
   app.css — shared design layer for every data-nav="app" page.

   Instead of rewriting each page's component CSS, this remaps the local
   --color-* / --font-* tokens those rules already consume onto the brand
   tokens defined in tokens.css. Result: one consistent brand look (warm
   cream + green + Satoshi/Clash Display) across every app page, in light
   AND dark, because the brand tokens themselves flip under [data-theme].

   Scoped to `body[data-nav="app"]` so it outranks each page's own :root
   block (and the per-page dark overrides) for the whole body subtree.
   Load alongside tokens.css + chrome.css + sidebar.css.
   ══════════════════════════════════════════════════════════════════ */

body[data-nav="app"] {
  /* surfaces */
  --color-background: var(--bone);
  --color-bg: var(--bone);
  --color-surface: var(--paper);
  --color-secondary-bg: var(--bone-2);
  --color-tertiary-bg: var(--bone-2);
  --color-sidebar: var(--bone-2);

  /* text */
  --color-text: var(--ink);
  --color-text-secondary: var(--text-muted);
  --color-text-light: var(--text-soft);
  --color-text-dark: var(--ink);

  /* lines + accents */
  --color-border: var(--line);
  --color-primary: var(--green);
  --color-primary-hover: var(--green-3);
  --color-teal-primary: var(--green);
  --color-teal-hover: var(--green-3);
  --color-orange-accent: var(--yellow);

  /* type */
  --font-family: var(--font-sans);

  /* match the Risk Management page's sidebar width everywhere */
  --sidebar-width: 290px;

  background: var(--bone);
  color: var(--ink);
  font-family: var(--font-sans);
  /* normalize scale to 100% everywhere so the shared header/sidebar/footer are
     the same size on every page (tool pages previously set zoom:0.8). */
  zoom: 1;
  /* single offset mechanism (same as the Risk Management page): push ALL page
     content below the fixed header with one body padding, instead of per-page
     margins/paddings that behaved differently. */
  padding-top: var(--header-h);
}

/* ── AUTHORITATIVE APP SHELL ─────────────────────────────────────────────────
   All 23 app pages share the identical structure:
     .app-container > .page-wrapper > (aside#app-sidebar + .main-content)
   Each page also ships its own inline CSS for these containers, which is why
   they behaved differently. These `body[data-nav="app"]` selectors outrank
   every page's plain-class rule, so the shell (scroll model, offsets, sizing)
   is now identical on every page. Window-scroll model = sticky sidebar stays
   pinned + footer reachable. Layout-only; does not touch chart/widget code. */
body[data-nav="app"] .app-container {
  display: flex; flex-direction: column;
  min-height: 100vh; height: auto; overflow: visible;
}
body[data-nav="app"] .page-wrapper {
  display: flex; align-items: stretch; flex: 1 1 auto;
  overflow: visible; min-height: 0;
  margin: 0;  /* header offset comes from body padding-top; kill any page's own margin-top */
  /* draw the sidebar divider here (full content height → down to the footer)
     instead of on the sticky sidebar, whose fixed height would "chop" it */
  background: linear-gradient(to right,
    transparent 0,
    transparent calc(var(--sidebar-width) - 1px),
    var(--color-border) calc(var(--sidebar-width) - 1px),
    var(--color-border) var(--sidebar-width),
    transparent var(--sidebar-width));
}
body[data-nav="app"] .main-content {
  flex: 1 1 auto; min-width: 0; overflow: visible;
  margin: 0;
  /* header offset now comes from body padding-top, so just content spacing */
  padding: 1.5rem clamp(20px, 4vw, 52px) 3rem;
}

/* ── SIDEBAR COLLAPSE TOGGLE ──────────────────────────────────────────────── */
/* the sidebar glides open/closed (keep overflow-y:auto from sidebar.css so it
   still scrolls; only the horizontal is clipped during the width animation) */
/* id-level specificity so it beats any page's inline `.sidebar { margin-top }`
   (some legacy pages add their own top margin, which double-offset the sidebar
   below the header and left a big gap at the top) */
body[data-nav="app"] #app-sidebar { transition: width .28s ease, opacity .2s ease; overflow-x: hidden; margin: 0 !important; }

#sidebar-toggle {
  position: fixed;
  top: calc(var(--header-h) + 12px);
  left: calc(var(--sidebar-width) - 46px);   /* sidebar's top-right corner */
  z-index: 950;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px;
  cursor: pointer;
  transition: left .28s ease, background .15s;
}
#sidebar-toggle svg { width: 17px; height: 17px; }
#sidebar-toggle:hover { background: color-mix(in srgb, var(--green) 14%, transparent); }

/* collapsed: sidebar slides to zero width, toggle glides to the left edge, and
   the content gets clearance so it never crowds the icon */
body.sidebar-collapsed #app-sidebar {
  width: 0 !important; min-width: 0;
  opacity: 0; padding-left: 0; padding-right: 0; border: none; pointer-events: none;
}
body.sidebar-collapsed .page-wrapper { background: none; }
body.sidebar-collapsed #sidebar-toggle { left: 16px; }
body.sidebar-collapsed .main-content { padding-left: 4.5rem; padding-top: 3.6rem; }
body.sidebar-collapsed .main-column   { padding-left: 3rem; }
body.sidebar-collapsed .main-column .rm-hero,
body.sidebar-collapsed .main-column .page-header { margin-top: 2.4rem; }

/* Uniform, medium-weight headings across all app pages (matches the Risk
   Management page's feel — Clash Display, not heavy). */
/* main page title — medium size, semibold */
body[data-nav="app"] .page-title,
body[data-nav="app"] .page-header h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  letter-spacing: -.02em;
}
/* subsection titles — a bit smaller, also not heavy */
body[data-nav="app"] .section-title,
body[data-nav="app"] .section-header h2,
body[data-nav="app"] .card-title,
body[data-nav="app"] .panel-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: -.01em;
}