/* =============================================================================
   Falcon nav-shell bundle for ISO27kSuite (Compliance Hub).

   Purpose: bring this Django MPA to structural + visual parity with the React
   platform shell (AppShell / TopBar / Sidebar / Breadcrumb / PageTabs) WITHOUT
   React. This bundle is purely ADDITIVE: it does not redefine the app's brand
   colour values (those stay in base.html: --bg / --surface / --text / --accent,
   flipping light/dark via the existing no-flash resolver). Here we only:
     1. alias the React --c-* token namespace onto the app's existing vars so the
        ported .fds-* classes resolve and still flip with the theme;
     2. define the scale tokens (space / radius / type / motion) the ported
        classes consume;
     3. carry the ported .fds-side sidebar, .fds-topbar top bar, .fds-page-tabs
        in-page tabs and .fds-breadcrumb classes;
     4. add the density axis (compact 14 / comfortable 16 / spacious 17) and the
        nav-layout axis (data-nav topbar|sidebar) as CSS, so switching either is
        instant with no server round-trip.

   CHROME PARITY DECISION: the global chrome (left sidebar AND top bar) is NAVY
   in BOTH themes, matching the React shell's always-navy chrome (--c-sidebar
   #1d1934). The app body/content keeps flipping light/dark as before; only the
   chrome is theme-independent navy. The active accent on the navy chrome is the
   React copper (#9f6a43 light ramp / #c58e5a dark ramp), reproduced here as
   --c-accent-* so the copper underline and active rail marker match the React
   PageTabs and Sidebar exactly.

   Australian English, no em dashes.
   ========================================================================== */

:root {
  /* ---- Brand ramp aliases (React --c-* namespace).
     Navy #1d1934 and copper #9f6a43 are the Netstrata brand values used by the
     React shell; reproduced here as fixed values for the always-navy chrome.
     These do NOT change the app's own --bg/--surface/--text/--accent vars. ---- */
  --c-brand-700: #3a3560; --c-brand-800: #2b2748; --c-brand-900: #1d1934; --c-brand-950: #0e0c1a;
  --c-accent-400: #c29a7d; --c-accent-500: #b07f5b; --c-accent-600: #9f6a43; --c-accent-700: #855838;

  /* Surface / text / border aliases -> the app's existing (theme-aware) vars,
     so content-area .fds-* classes flip light/dark with the rest of the app. */
  --c-bg-app: var(--bg);
  --c-bg-elevated: var(--surface-2);
  --c-surface-1: var(--surface);
  --c-surface-2: var(--surface-2);
  --c-surface-hover: var(--accent-soft);
  --c-text-primary: var(--text-strong);
  --c-text-secondary: var(--text);
  --c-text-muted: var(--text-muted);
  --c-border-subtle: var(--border);
  --c-border-default: var(--border);
  --c-border-strong: var(--border-strong);

  /* Navy chrome tokens (theme-independent), matching the React shell. */
  --c-sidebar: #1d1934;
  --c-sidebar-active: rgba(159, 106, 67, 0.16);   /* copper tint */
  --c-header: #1d1934;
  --c-header-text: #ffffff;
  --c-header-nav-hover: rgba(255, 255, 255, 0.10);
  --c-header-nav-active: rgba(255, 255, 255, 0.15);

  /* Copper accent ON the navy chrome (light ramp), and the in-content tab
     accent. The PageTabs active underline uses --c-accent-600. */
  --c-chrome-accent: #c29a7d;   /* lighter copper, reads on navy */

  /* Gold/copper rgb triplets so tint expressions (count chip) work, light ramp. */
  --gold-300-rgb: 176 127 91; --gold-400-rgb: 159 106 67; --gold-500-rgb: 133 88 56; --gold-600-rgb: 107 69 44;

  /* ---- Scale tokens consumed by the ported classes ---- */
  /* Spacing (4px base), density-aware via --ds-density-space (set per data-density). */
  --space-0_5: calc(0.125rem * var(--ds-density-space, 1));
  --space-1:   calc(0.25rem  * var(--ds-density-space, 1));
  --space-1_5: calc(0.375rem * var(--ds-density-space, 1));
  --space-2:   calc(0.5rem   * var(--ds-density-space, 1));
  --space-3:   calc(0.75rem  * var(--ds-density-space, 1));
  --space-4:   calc(1rem     * var(--ds-density-space, 1));
  --space-5:   calc(1.25rem  * var(--ds-density-space, 1));
  --space-6:   calc(1.5rem   * var(--ds-density-space, 1));
  --space-8:   calc(2rem     * var(--ds-density-space, 1));
  /* Radii */
  --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-pill: 999px;
  /* Type */
  --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-lg: 1.125rem;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
  --tracking-wide: 0.02em;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* Motion */
  --t-fast: 120ms; --t-base: 200ms;
  --ease-standard: cubic-bezier(0.2,0,0,1); --ease-emphasised: cubic-bezier(0.2,0,0.1,1);
}

/* Dark theme: shift the chrome copper to the dark copper ramp + tint, matching
   the React dark chrome (agent navy/copper). The navy itself stays. */
[data-theme="dark"] {
  --c-sidebar-active: rgba(197, 142, 90, 0.20);
  --c-chrome-accent: #c58e5a;
  --gold-300-rgb: 214 162 113; --gold-400-rgb: 197 142 90; --gold-500-rgb: 168 120 74; --gold-600-rgb: 138 98 60;
}

/* =============================================================================
   DENSITY AXIS (data-density on <html>): compact 14 / comfortable 16 / spacious 17.
   The --ds-density-space multiplier additionally tightens/loosens spacing so
   compact reads as a denser layout, not just smaller text. Comfortable is the
   default and matches the historical 16px look.
   ========================================================================== */
html { font-size: 16px; --ds-density-space: 1; }
html[data-density="comfortable"] { font-size: 16px; --ds-density-space: 1; }
html[data-density="compact"]     { font-size: 14px; --ds-density-space: 0.86; }
html[data-density="spacious"]    { font-size: 17px; --ds-density-space: 1.12; }

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-base: 0ms; }
}

/* =============================================================================
   SHADOW SCALE (matches the React brand tokens). Light ramp uses navy-tinted
   shadows; dark ramp uses black. Consumed by the card polish below (Part 4).
   ========================================================================== */
:root {
  --shadow-flat: 0 0 0 1px var(--border);
  --shadow-low:  0 1px 2px rgba(29,25,52,0.05);
  --shadow-mid:  0 8px 24px -8px rgba(29,25,52,0.14);
  --shadow-high: 0 20px 60px -20px rgba(29,25,52,0.24);
  --radius-xl: 14px;
}
[data-theme="dark"] {
  --shadow-low:  0 1px 2px rgba(0,0,0,0.40);
  --shadow-mid:  0 8px 24px -8px rgba(0,0,0,0.55);
  --shadow-high: 0 20px 60px -20px rgba(0,0,0,0.70);
}

/* =============================================================================
   scrollbar-none (shell-fix Part 2.1 + Part 6): hide the scrollbar but keep the
   element scrollable. Used by the top-bar nav and the in-page tabs row so they
   never show a stray horizontal scrollbar at any width. Ported from the React
   index.css .scrollbar-none.
   ========================================================================== */
.scrollbar-none { scrollbar-width: none; -ms-overflow-style: none; }
.scrollbar-none::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* =============================================================================
   GLOBAL TOP BAR (.fds-topbar) — always-navy, sticky. The single primary nav
   surface in top-bar layout; a slim utility bar in sidebar layout. Holds the
   logo ONLY in top-bar mode (the sidebar owns the logo in sidebar mode).
   ========================================================================== */
.fds-topbar {
  position: sticky; top: 0; z-index: 1060; display: flex; align-items: center; gap: var(--space-4);
  height: 3.5rem; padding: 0 var(--space-5); background: var(--c-header); color: var(--c-header-text);
  /* No white hairline against the content (shell-fix 2.2): use a soft drop shadow
     instead of a 1px rgba(255,255,255,...) border, which read as a stray seam in
     light mode. The shadow sits the chrome above the content cleanly. */
  box-shadow: 0 4px 16px -6px rgba(0,0,0,0.34);
}
.fds-topbar__brand { display: flex; align-items: center; gap: var(--space-2); text-decoration: none; color: #fff; flex: 0 1 auto; min-width: 0; overflow: hidden; }
.fds-topbar__brand img { height: 26px; width: auto; max-width: 100%; display: block; }
.fds-topbar__product {
  font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: 0.14em; text-transform: uppercase;
  opacity: .72; padding-left: var(--space-3); margin-left: var(--space-1); border-left: 1px solid rgba(255,255,255,0.18);
}
.fds-topbar__nav {
  display: flex; align-items: center; gap: var(--space-1); margin-left: var(--space-3);
  min-width: 0; overflow-x: auto;
  /* scrollbar-none baked in so the nav strip never shows a horizontal scrollbar
     at any width (shell-fix 2.1). */
  scrollbar-width: none; -ms-overflow-style: none;
}
.fds-topbar__nav::-webkit-scrollbar { display: none; width: 0; height: 0; }
/* The flexible spacer must be allowed to shrink so the nav + utilities never
   force the bar wider than the viewport (no horizontal scrollbar on the bar). */
.fds-topbar__spacer { flex: 1 1 auto; min-width: 0; }
.fds-topbar__link {
  display: inline-flex; align-items: center; gap: var(--space-2); color: var(--c-header-text); opacity: .82;
  text-decoration: none; font-size: var(--fs-sm); font-weight: var(--fw-medium); white-space: nowrap;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
  border-bottom: 2px solid transparent; margin-bottom: -1px; transition: opacity var(--t-fast) var(--ease-standard), background-color var(--t-fast) var(--ease-standard);
}
.fds-topbar__link i { font-size: 0.95rem; }
.fds-topbar__link:hover { opacity: 1; background: var(--c-header-nav-hover); color: #fff; }
.fds-topbar__link.active { opacity: 1; background: rgba(255,255,255,0.06); border-bottom-color: var(--c-chrome-accent); }
.fds-topbar__link.active i { color: var(--c-chrome-accent); }
.fds-topbar__right { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }

/* Hamburger (mobile) + sidebar rail toggle live in the topbar. */
.fds-topbar__icbtn {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  background: none; border: none; color: rgba(255,255,255,0.8); cursor: pointer; border-radius: var(--radius-md);
  font-size: 1.2rem; line-height: 1;
}
.fds-topbar__icbtn:hover { color: #fff; background: var(--c-header-nav-hover); }

/* User menu (account button + dropdown with the 3 segmented controls). */
.fds-usermenu { position: relative; }
.fds-usermenu__btn {
  display: inline-flex; align-items: center; gap: var(--space-2); background: none; border: none; cursor: pointer;
  color: #fff; font-size: var(--fs-sm); padding: var(--space-1) var(--space-2); border-radius: var(--radius-md);
}
.fds-usermenu__btn:hover { background: var(--c-header-nav-hover); }
.fds-usermenu__avatar {
  width: 26px; height: 26px; border-radius: var(--radius-pill); display: inline-flex; align-items: center; justify-content: center;
  background: rgba(194,154,125,0.20); border: 1px solid rgba(194,154,125,0.35); color: var(--c-chrome-accent);
}
.fds-usermenu__panel {
  position: absolute; top: 100%; right: 0; margin-top: 6px; width: 264px; z-index: 1100;
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px -20px rgba(0,0,0,0.45); padding: var(--space-1) 0;
}
.fds-usermenu__panel[hidden] { display: none; }
.fds-usermenu__head { padding: var(--space-3) var(--space-3) var(--space-2); border-bottom: 1px solid var(--border); }
.fds-usermenu__name { font-weight: var(--fw-semibold); color: var(--text-strong); font-size: var(--fs-sm); }
.fds-usermenu__sub { font-size: var(--fs-xs); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; }
.fds-usermenu__item {
  display: flex; align-items: center; gap: var(--space-2); width: 100%; text-align: left;
  padding: var(--space-2) var(--space-3); background: none; border: none; cursor: pointer;
  color: var(--text); text-decoration: none; font-size: var(--fs-sm);
}
.fds-usermenu__item:hover { background: var(--accent-soft); color: var(--text-strong); }
.fds-usermenu__sep { height: 1px; background: var(--border); margin: var(--space-1) 0; }

/* Segmented control (Theme / Density / Navigation) inside the user menu. */
.fds-seg { padding: var(--space-1) var(--space-3); }
.fds-seg__label { font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: var(--space-1); }
.fds-seg__row { display: flex; gap: 2px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 2px; }
.fds-seg__btn {
  flex: 1; font-size: var(--fs-xs); padding: 4px 6px; border-radius: var(--radius-sm); border: none; cursor: pointer;
  background: transparent; color: var(--text); font-weight: var(--fw-regular);
}
.fds-seg__btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-on); font-weight: var(--fw-semibold); }

/* =============================================================================
   LEFT SIDEBAR (.fds-side) — always-navy. The one primary nav surface in
   sidebar layout. Holds the single logo (sidebar head), the 12 modules, and a
   bottom-pinned collapse toggle. Collapses to a 64px icon rail (persisted).
   Ported from the React fds-components.css, adapted for fixed positioning under
   the sticky topbar.
   ========================================================================== */
.fds-side {
  position: fixed; top: 0; left: 0; bottom: 0; width: 240px; z-index: 1070;
  display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3) var(--space-2);
  background: var(--c-sidebar); color: #fff;
  /* No white hairline seam against the content (shell-fix 2.2): a soft shadow on
     the right edge instead of a 1px rgba(255,255,255,...) border. */
  box-shadow: 1px 0 12px -4px rgba(0,0,0,0.30);
  transition: width var(--t-base) var(--ease-emphasised), transform var(--t-base) var(--ease-emphasised);
  overflow-y: auto; overflow-x: hidden;
}
.fds-side__brand {
  display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-2) var(--space-3);
  margin-bottom: var(--space-2); border-bottom: 1px solid rgba(255,255,255,0.08); text-decoration: none; color: #fff;
}
.fds-side__brand img { height: 24px; width: auto; display: block; }
.fds-side__brand-text { font-weight: var(--fw-semibold); font-size: var(--fs-sm); white-space: nowrap; letter-spacing: 0.01em; }
.fds-side__group { display: flex; flex-direction: column; gap: var(--space-0_5); }
.fds-side__item {
  position: relative; display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
  color: rgba(255,255,255,0.66); text-decoration: none; font-size: var(--fs-sm); font-weight: var(--fw-medium);
  white-space: nowrap; border-left: 3px solid transparent;
  transition: background-color var(--t-fast) var(--ease-standard), color var(--t-fast) var(--ease-standard), border-color var(--t-fast) var(--ease-standard);
}
.fds-side__item:hover { background: rgba(255,255,255,0.10); color: #fff; }
.fds-side__item:hover .fds-side__icon { color: rgba(255,255,255,0.9); }
.fds-side__item.active {
  background: var(--c-sidebar-active); color: #fff; border-left-color: var(--c-chrome-accent); font-weight: var(--fw-semibold);
}
.fds-side__item.active .fds-side__icon { color: var(--c-chrome-accent); }
.fds-side__icon { display: inline-flex; flex-shrink: 0; color: rgba(255,255,255,0.7); width: 20px; text-align: center; transition: color var(--t-fast) var(--ease-standard); }
.fds-side__icon i { font-size: 1.05rem; }
.fds-side__label { white-space: nowrap; }
.fds-side__collapse {
  margin-top: auto; display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
  color: rgba(255,255,255,0.6); background: transparent; border: none; cursor: pointer;
  font-size: var(--fs-sm); font-weight: var(--fw-medium); white-space: nowrap; width: 100%; text-align: left;
}
.fds-side__collapse:hover { background: rgba(255,255,255,0.10); color: #fff; }
.fds-side__collapse:focus-visible { outline: 2px solid var(--c-chrome-accent); outline-offset: -2px; }

/* Collapsed (64px icon rail), persisted via data-collapsed on the nav. */
.fds-side[data-collapsed="true"] { width: 64px; }
.fds-side[data-collapsed="true"] .fds-side__label,
.fds-side[data-collapsed="true"] .fds-side__brand-text { display: none; }
.fds-side[data-collapsed="true"] .fds-side__item { justify-content: center; padding-left: var(--space-1); padding-right: var(--space-1); }
.fds-side[data-collapsed="true"] .fds-side__brand { justify-content: center; padding-left: 0; padding-right: 0; }
.fds-side[data-collapsed="true"] .fds-side__collapse { justify-content: center; padding-left: var(--space-1); padding-right: var(--space-1); }

/* =============================================================================
   NAV-LAYOUT AXIS (data-nav on <html>) — instant CSS switch, no server call.
   topbar: sidebar hidden, content full width, topbar shows the primary nav.
   sidebar: sidebar shown (desktop), content shifted right by the rail width,
            topbar shows only the rail toggle + utilities (no primary nav).
   ========================================================================== */
.fds-shell-main {
  min-height: calc(100vh - 3.5rem);
  padding: var(--space-5) var(--space-6);
  transition: margin-left var(--t-base) var(--ease-emphasised);
}

/* topbar mode (default): no sidebar offset. The inline primary nav is shown only
   from 1200px up, where the 12 modules + utility cluster genuinely fit; below
   that it collapses to the hamburger drawer (shell-fix 2.1) so the bar never has
   to scroll horizontally. */
html[data-nav="topbar"] .fds-side { display: none; }
html[data-nav="topbar"] .fds-topbar__nav { display: none; }
html[data-nav="topbar"] .fds-shell-main { margin-left: 0; }
@media (min-width: 1200px) {
  html[data-nav="topbar"] .fds-topbar__nav { display: flex; }
}

/* sidebar mode: hide the inline topbar nav (the sidebar owns the primary nav). */
html[data-nav="sidebar"] .fds-topbar__nav { display: none; }

@media (min-width: 993px) {
  html[data-nav="sidebar"] .fds-side { display: flex; transform: translateX(0); }
  html[data-nav="sidebar"] .fds-shell-main { margin-left: 240px; }
  html[data-nav="sidebar"] .fds-side[data-collapsed="true"] ~ .fds-shell-main,
  html[data-nav="sidebar"].nav-collapsed .fds-shell-main { margin-left: 64px; }

  /* shell-fix 2.2: in sidebar mode the sidebar is full-height (top:0) and owns
     the brand at its head, so the topbar must be offset to the RIGHT of the
     sidebar. This removes the dead full-width navy bar that used to sit above
     the sidebar head, and turns the topbar into a slim utility row aligned with
     the content column (matching the React AppShell). */
  html[data-nav="sidebar"] .fds-topbar { margin-left: 240px; }
  html[data-nav="sidebar"].nav-collapsed .fds-topbar { margin-left: 64px; }

  /* The rail toggle in the topbar only matters in sidebar mode; in topbar mode
     it is hidden. (The canonical collapse control is the sidebar-foot button.) */
  html[data-nav="topbar"] .fds-topbar__railtoggle { display: none; }
  /* No stray rail toggle in the top strip: the sidebar foot owns collapse, so
     the topbar rail toggle is removed in sidebar mode too (shell-fix 2.2). */
  html[data-nav="sidebar"] .fds-topbar__railtoggle { display: none; }
}

/* Hamburger visibility: shown whenever the inline nav is NOT (i.e. on mobile in
   either layout, and in topbar mode below 1200px). The button itself is
   d-lg-none in markup for the sidebar-drawer case; this rule re-enables it in
   topbar mode in the 993-1199px band where the inline nav is collapsed. */
@media (min-width: 993px) and (max-width: 1199px) {
  html[data-nav="topbar"] .fds-topbar__hamburger { display: inline-flex !important; }
}

/* Mobile (<=992px): both layouts collapse the rail to an off-canvas drawer
   opened by the topbar hamburger; content is never offset. The drawer sits
   BELOW the full-width topbar (top:3.5rem) so the hamburger stays usable; the
   topbar is never offset on mobile. */
@media (max-width: 992px) {
  .fds-side { top: 3.5rem; transform: translateX(-100%); width: 240px; box-shadow: 4px 0 20px rgba(0,0,0,0.5); display: flex; }
  .fds-side.open { transform: translateX(0); }
  .fds-shell-main { margin-left: 0; padding: var(--space-4) var(--space-3); }
  html[data-nav="sidebar"] .fds-shell-main { margin-left: 0; }
  html[data-nav="sidebar"] .fds-topbar { margin-left: 0; }
  .fds-topbar__railtoggle { display: none; }
  /* The brand belongs in the drawer head on mobile; keep it in the topbar too so
     there is always one visible logo (the sidebar is off-canvas). */
  html[data-nav="sidebar"] .fds-topbar__brand { display: flex; }
}

/* Off-canvas overlay (mobile drawer backdrop). Sits below the drawer (z 1070)
   and below the topbar (z 1060)? No: above the topbar so the whole viewport
   under the bar dims. It starts at top:3.5rem so the topbar stays interactive. */
.fds-side-overlay { display: none; position: fixed; inset: 0; top: 3.5rem; background: rgba(0,0,0,0.5); z-index: 1065; }
.fds-side-overlay.show { display: block; }
@media (min-width: 993px) { .fds-side-overlay { display: none !important; } }

/* =============================================================================
   MOBILE POLISH (shell-fix Part 6). scrollbar-none is applied to the scrolling
   strips above; here we guarantee comfortable tap targets, single-column card
   stacking and ZERO horizontal overflow at phone/tablet widths.
   ========================================================================== */
@media (max-width: 992px) {
  /* No page-level horizontal scroll: the body already has overflow-x:hidden;
     belt-and-braces here for the shell column. Wide content (tables) scrolls
     inside its own .table-responsive-stack container, not the page. */
  .fds-shell-main { max-width: 100%; overflow-x: hidden; }

  /* Tap targets >= 44px for the chrome interactive elements. */
  .fds-topbar__icbtn { width: 44px; height: 44px; }
  .fds-usermenu__btn { min-height: 44px; }
  .fds-side__item, .fds-side__collapse { min-height: 44px; }
  .fds-page-tab { min-height: 44px; }
}

/* Phones: keep the page-tabs row scrolling (scrollbar-none above) and tighten
   the stat cards. The dashboard KPI grid uses Bootstrap col-6 on phones (2-up),
   which stacks cleanly and never overflows; the larger chart/list cards
   (col-lg-*) already collapse to full width on mobile via Bootstrap. */
@media (max-width: 480px) {
  .card-stat { padding: var(--space-4); }
  .card-stat .value { font-size: 1.5rem; }
}

/* =============================================================================
   IN-PAGE TABS (.fds-page-tabs) — the section navigation that belongs to the
   SCREEN, not the chrome. Matches the React PageTabs: horizontal scroll row,
   2px copper active underline, accent-tinted active icon, muted mono count chip.
   Each tab is an <a> (link-style); active is set server-side via .active.
   ========================================================================== */
.fds-page-tabs {
  display: flex; align-items: center; gap: var(--space-0_5);
  overflow-x: auto; border-bottom: 1px solid var(--border); margin-bottom: var(--space-4);
  scrollbar-width: none; -ms-overflow-style: none;
}
.fds-page-tabs::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* ---- Framed panel variant (shell-fix Part 3) ----------------------------------
   The section-nav rendered as a bordered surface card with an uppercase group
   header and copper-accent active tab, matching the platform's Voice-Config card.
   Wraps the tabs row so every section group (AWS, Risks) reads as a panel rather
   than a bare underline strip. The tab row scrolls inside the frame on mobile
   (scrollbar-none), so the page never overflows horizontally. */
.fds-panel-tabs {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-low); margin-bottom: var(--space-4); overflow: hidden;
}
.fds-panel-tabs__head {
  font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--text-muted);
  padding: var(--space-3) var(--space-4) var(--space-2);
}
.fds-panel-tabs .fds-page-tabs {
  margin-bottom: 0; padding: 0 var(--space-2); border-bottom: none;
}
.fds-page-tab {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3); white-space: nowrap; text-decoration: none;
  font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color var(--t-fast) var(--ease-standard), border-color var(--t-fast) var(--ease-standard);
}
.fds-page-tab:hover { color: var(--text-strong); border-bottom-color: var(--border-strong); }
.fds-page-tab i { font-size: 0.95rem; color: var(--text-muted); }
.fds-page-tab.active { color: var(--text-strong); font-weight: var(--fw-semibold); border-bottom-color: var(--accent); }
.fds-page-tab.active i { color: var(--accent); }
.fds-page-tab__count {
  margin-left: 2px; font-size: 11px; font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  line-height: 1; padding: 3px 6px; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text-muted);
}
.fds-page-tab.active .fds-page-tab__count { background: var(--accent-soft); color: var(--accent); }

/* =============================================================================
   BREADCRUMB (.fds-breadcrumb) — Back button + Home + trail; last = current.
   Sits at the top of the content area on the light/flipping surface (correct
   contrast). Hidden on the dashboard by the partial.
   ========================================================================== */
.fds-breadcrumb { display: flex; align-items: center; gap: var(--space-1_5); font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--space-4); flex-wrap: wrap; }
.fds-breadcrumb__back {
  display: inline-flex; align-items: center; gap: var(--space-1); background: none; border: none; cursor: pointer;
  color: var(--text); text-decoration: none; padding: 2px var(--space-1_5); border-radius: var(--radius-sm); font-size: var(--fs-xs); font-weight: var(--fw-medium);
}
.fds-breadcrumb__back:hover { color: var(--text-strong); background: var(--accent-soft); }
.fds-breadcrumb__pipe { color: var(--text-muted); opacity: 0.5; }
.fds-breadcrumb a { color: var(--text); text-decoration: none; display: inline-flex; align-items: center; }
.fds-breadcrumb a:hover { color: var(--text-strong); }
.fds-breadcrumb__sep { color: var(--text-muted); font-size: 0.8em; }
.fds-breadcrumb__current { color: var(--text-strong); font-weight: var(--fw-semibold); max-width: 32ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* =============================================================================
   CARD / PANEL POLISH (shell-fix Part 4) — lift the app's stat cards and content
   panels to a single polished standard matching the platform's fds-card: surface
   background, 1px subtle border, rounded-xl, breathing padding, and a subtle
   raised shadow on the KPI / primary cards. The navy/copper palette is preserved
   (these rules only touch surface, border, radius, shadow and spacing, all from
   the existing theme tokens). Loaded after base.html so it refines the inline
   .card-stat / .card-custom definitions.
   ========================================================================== */

/* KPI / stat cards: raised, rounded-xl, breathing padding, accent-led value. */
.card-stat {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl);
  padding: var(--space-5); box-shadow: var(--shadow-low);
  transition: box-shadow var(--t-base) var(--ease-standard), transform var(--t-base) var(--ease-standard), border-color var(--t-base) var(--ease-standard);
}
.card-stat:hover { border-color: var(--border-strong); box-shadow: var(--shadow-mid); transform: translateY(-2px); }
.card-stat .value { font-size: 1.9rem; font-weight: var(--fw-bold); color: var(--accent); line-height: 1.1; font-variant-numeric: tabular-nums; }
.card-stat .label { color: var(--text-muted); font-size: var(--fs-xs); margin-top: var(--space-1); text-transform: uppercase; letter-spacing: var(--tracking-wide); }

/* Content panels (chart / list cards): surface, subtle border, rounded-xl, low
   shadow; the header keeps a 1px divider in the theme border colour. */
.card-custom {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-low); overflow: hidden;
}
.card-custom .card-header {
  background: transparent; border-bottom: 1px solid var(--border);
  color: var(--text-strong); font-weight: var(--fw-semibold);
  padding: var(--space-4) var(--space-5); font-size: var(--fs-sm);
}
.card-custom .card-body { padding: var(--space-5); }

/* =============================================================================
   CHART.JS LEGIBILITY (shell-fix Part 4) — the per-page chart scripts read
   --chart-* / --accent / --text-muted from these tokens and set Chart.js tooltip
   styling below. Define a legible tooltip surface + Netstrata palette helpers in
   BOTH themes so tooltips read clearly on the flipping surface.
   ========================================================================== */
:root {
  /* Tooltip surface (light ramp): white card, navy text, copper title accent. */
  --chart-tip-bg: #ffffff;
  --chart-tip-fg: #2a3550;
  --chart-tip-title: #14213d;
  --chart-tip-border: #d6ddec;
}
[data-theme="dark"] {
  /* Tooltip surface (dark ramp): deep navy card, light text. */
  --chart-tip-bg: #0d1f3c;
  --chart-tip-fg: #cbd5e1;
  --chart-tip-title: #f1f5f9;
  --chart-tip-border: #1a3260;
}

/* ONE logo at a time: keep theme-aware logo swap working for both chrome logos.
   (base.html ships .brand-logo-dark / .brand-logo-light img pairs; the swap
   rules live in base.html. Here we only ensure chrome logos size correctly.) */