/* ============================================================================
   IT BY DESIGN — Design System (web)
   Derived from "ITBD New Brand Guideline 2026". Dark-first by brand mandate:
   black / dark-gray foundation, white + ITBD Blue highlights, generous space.
   Primary typeface: Inter. Green + Orange are EMERGENCY-ONLY accents.
   Import on every page:  <link rel="stylesheet" href="/assets/itbd.css">
   ============================================================================ */

/* ---- Fonts (Inter, the brand primary typeface) ---- */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

:root {
  /* Brand palette (exact hex from the guideline, page 21) */
  --itbd-black:        #000000; /* primary background            */
  --itbd-white:        #ffffff; /* primary text                  */
  --itbd-light-gray:   #bfbfbf; /* secondary text                */
  --itbd-blue:         #00adda; /* ACCENT — the one brand accent */
  --itbd-gray:         #252525; /* neutral surface               */
  --itbd-green:        #bed62f; /* EMERGENCY ONLY — use sparingly */
  --itbd-orange:       #ff8b17; /* EMERGENCY ONLY — use sparingly */

  /* Semantic surfaces (dark foundation) */
  --bg:        var(--itbd-black);
  --surface:   #0c0d0f;   /* raised panel just off pure black    */
  --surface-2: #16181c;   /* cards                               */
  --surface-3: var(--itbd-gray); /* inputs / hover                */
  --line:      #262a30;   /* hairline borders                    */
  --line-soft: #1b1e23;

  /* Text roles */
  --ink:   var(--itbd-white);
  --muted: var(--itbd-light-gray);
  --faint: #7f8792;

  /* Accent (ITBD Blue) + tints */
  --accent:        var(--itbd-blue);
  --accent-hover:  #22b9e4;
  --accent-press:  #0091ba;
  --accent-ink:    #04222b;                 /* text ON a blue fill  */
  --accent-wash:   rgba(0, 173, 218, 0.12);
  --accent-line:   rgba(0, 173, 218, 0.35);

  /* Emphasis (emergency-only brand colors — reserved for rare signal) */
  --emphasis-green:  var(--itbd-green);
  --emphasis-orange: var(--itbd-orange);

  /* Type scale (Inter) */
  --font-sans: "Inter", ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
  --fs-eyebrow: 12px;
  --fs-sm: 13px;
  --fs-body: 15px;
  --fs-lead: 18px;
  --fs-h3: 20px;
  --fs-h2: 28px;
  --fs-h1: clamp(32px, 5vw, 48px);

  /* Space, radius, shadow, motion */
  --space: 8px;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 18px;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 34px rgba(0,0,0,.45);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --ease: cubic-bezier(.4, 0, .2, 1);
  --sidebar-w: 260px;
  --maxw: 1240px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Brand gradient hairline — the one sanctioned "light accent" (blue-led) */
.itbd-rule { height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--itbd-blue), #2ec5e8 60%, rgba(0,173,218,0)); }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { color: var(--ink); font-weight: 700; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
h1 { font-size: var(--fs-h1); line-height: 1.04; font-weight: 800; }
h2 { font-size: var(--fs-h2); line-height: 1.12; }
h3 { font-size: var(--fs-h3); line-height: 1.2; font-weight: 650; }
p  { margin: 0 0 12px; }
a  { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
.lead  { font-size: var(--fs-lead); color: var(--muted); }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.mono  { font-family: var(--font-mono); }
.tnum  { font-variant-numeric: tabular-nums; }

/* Eyebrow — uppercase blue label (a brand signature) */
.eyebrow {
  font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent);
}

/* Section header with a hairline that fills the row */
.section-title {
  display: flex; align-items: center; gap: 12px;
  font-size: var(--fs-eyebrow); letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); font-weight: 600; margin: 0 0 16px;
}
.section-title::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ---------- App shell: sidebar + content ---------- */
.app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }
.sidebar {
  background: var(--surface); border-right: 1px solid var(--line);
  padding: 22px 14px; display: flex; flex-direction: column; gap: 5px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
/* The logo stays centered; everything below is LEFT-aligned so the menu has a clean scan line. */
.sidebar .brand { display: flex; align-items: center; justify-content: center; gap: 11px; padding: 8px 8px 20px; }
.sidebar .brand img { height: 44px; width: auto; display: block; }
.sidebar .brand .wordmark { font-weight: 800; letter-spacing: -.01em; font-size: 15px; line-height: 1.1; }
.sidebar .navlabel { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; text-align: left;
  color: var(--faint); padding: 10px 12px 8px; }
.navlink {
  display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding: 9px 12px; border-radius: var(--radius-sm);
  color: var(--muted); font-weight: 500; font-size: 14px;
  background: var(--surface-2); box-shadow: var(--shadow-sm);
  transition: background .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease);
}
.navlink:hover { background: var(--surface-3); color: var(--ink); box-shadow: var(--shadow); }
.navlink.active { background: var(--accent-wash); color: var(--ink); box-shadow: inset 2px 0 0 var(--accent), var(--shadow-sm); }
.navlink .ico { width: 18px; height: 18px; flex: 0 0 auto; color: var(--accent); }
.sidebar .spacer { flex: 1; }
.sidebar .who { border-top: 1px solid var(--line); padding: 14px 12px 0; margin-top: 8px;
  font-size: 12.5px; color: var(--faint); display: flex; flex-direction: column; align-items: flex-start;
  text-align: left; gap: 10px; }

.content { min-width: 0; }
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 32px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(8px); z-index: 5;
}
.topbar .crumb { font-size: 13px; color: var(--faint); }
.main { max-width: var(--maxw); margin: 0 auto; padding: 40px 32px 80px; }

/* ---------- Buttons (CTA = blue & white, per brand) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 600; font-size: 14px; line-height: 1;
  padding: 12px 20px; border-radius: var(--radius-sm); border: 1px solid transparent;
  cursor: pointer; transition: background .15s var(--ease), border-color .15s var(--ease), transform .05s var(--ease);
  text-decoration: none;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: #ffffff; }
.btn-primary:hover { background: var(--accent-hover); color: #fff; }
.btn-primary:active { background: var(--accent-press); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-block { width: 100%; }
.btn:focus-visible, a:focus-visible, .navlink:focus-visible, .input:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* ---------- Cards / KPIs / pills ---------- */
.card { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 22px; box-shadow: var(--shadow-sm); }
.grid { display: grid; gap: 14px; }
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

.kpi { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.kpi .n { font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1; color: var(--accent); }
.kpi .l { font-size: 12.5px; color: var(--muted); margin-top: 8px; }

.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700;
  letter-spacing: .02em; padding: 3px 9px; border-radius: 999px;
  background: var(--accent-wash); color: var(--accent); border: 1px solid var(--accent-line); }
.pill.neutral { background: var(--surface-3); color: var(--muted); border-color: var(--line); }
.pill.green  { background: rgba(190,214,47,.12);  color: var(--emphasis-green);  border-color: rgba(190,214,47,.35); }
.pill.orange { background: rgba(255,139,23,.12);   color: var(--emphasis-orange); border-color: rgba(255,139,23,.35); }

code.k { font-family: var(--font-mono); font-size: 12px; background: var(--surface-3);
  color: var(--accent); padding: 1.5px 6px; border-radius: 5px; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
table.data { border-collapse: collapse; width: 100%; min-width: 520px; background: var(--surface-2); }
table.data th, table.data td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 13.5px; vertical-align: top; }
table.data th { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); font-weight: 600; background: var(--surface); }
table.data tbody tr:last-child td { border-bottom: 0; }

/* ---------- Auth (login) ---------- */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background: radial-gradient(1200px 600px at 50% -10%, rgba(0,173,218,.10), transparent 60%), var(--bg); }
.auth-card { width: 100%; max-width: 400px; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 34px 32px; box-shadow: var(--shadow); }
.auth-card .brand { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 22px; }
.auth-card .brand img { height: 40px; }
.field { display: block; margin: 0 0 14px; }
.field label { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 6px; font-weight: 500; }
.input { width: 100%; background: var(--surface-3); border: 1px solid var(--line); border-radius: var(--radius-sm);
  color: var(--ink); font: inherit; font-size: 14px; padding: 11px 13px; }
.input::placeholder { color: var(--faint); }
.input:focus { border-color: var(--accent); outline: none; }
.divider { display: flex; align-items: center; gap: 12px; color: var(--faint); font-size: 12px; margin: 18px 0; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.alert { font-size: 13px; border-radius: var(--radius-sm); padding: 10px 13px; margin-bottom: 14px; display: none; }
.alert.err { display: block; background: rgba(255,139,23,.10); color: #ffcf9b; border: 1px solid rgba(255,139,23,.3); }

/* ---------- Utility ---------- */
.stack { display: flex; flex-direction: column; }
.row   { display: flex; align-items: center; gap: 10px; }
.between { justify-content: space-between; }
.wrap-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.hide { display: none !important; }

/* Auth cloak: protected pages hide their body until the guard confirms a signed-in user,
   so protected content never flashes before the redirect to /login. */
html.cloak body { visibility: hidden; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; flex-direction: row; flex-wrap: wrap;
    align-items: center; gap: 4px; overflow-x: auto; }
  .sidebar .brand { padding: 4px 8px; }
  .sidebar .navlabel, .sidebar .spacer, .sidebar .who { display: none; }
  .navlink { padding: 8px 12px; }
  .main, .topbar { padding-left: 20px; padding-right: 20px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ============================================================================
   Theming — shared dark (default) + light, per viewer, site-wide.
   The brand foundation is dark. A viewer can switch to a light reading mode with
   the topbar toggle; the choice is remembered (localStorage) and re-applied on
   EVERY page by app.js, which sets html[data-theme="light"]. In light mode we
   override the design tokens ON THE CONTENT PANE ONLY (.content), so the sidebar
   keeps the dark brand foundation. New pages get BOTH themes for free just by
   using the token-based classes (.card, .kpi, .section-title, table.data, etc.)
   and never hard-coding a hex — do not add per-page theme CSS.
   ============================================================================ */
html[data-theme="light"] .content {
  --bg:        #f5f8fa;
  --surface:   #ffffff;
  --surface-2: #ffffff;
  --surface-3: #eef2f6;
  --line:      #e3e8ee;
  --line-soft: #eef2f6;
  --ink:       #15202b;
  --muted:     #55636f;
  --faint:     #8794a0;
  --accent-wash: rgba(0,173,218,.10);
  --accent-line: rgba(0,173,218,.32);
  --shadow:    0 1px 2px rgba(16,32,45,.06), 0 14px 32px rgba(16,32,45,.10);
  --shadow-sm: 0 1px 2px rgba(16,32,45,.07);
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
}
/* table header stays subtly tinted (not near-black) in light mode */
html[data-theme="light"] .content table.data th { background: #f0f3f6; }

/* Topbar theme toggle (app.js renders one into every page's topbar) */
.theme-toggle { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; background: transparent;
  border: 0; padding: 6px 4px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.theme-toggle:hover { color: var(--ink); }
.theme-toggle .track { position: relative; width: 40px; height: 22px; border-radius: 999px; flex: 0 0 auto;
  background: var(--surface-3); border: 1px solid var(--line); transition: background .18s var(--ease), border-color .18s var(--ease); }
.theme-toggle .thumb { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent); transition: transform .18s var(--ease); }
.theme-toggle[aria-pressed="true"] .track { background: var(--accent-wash); border-color: var(--accent-line); }
.theme-toggle[aria-pressed="true"] .thumb { transform: translateX(18px); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* ---------- Mermaid diagram frame ----------
   Always a dark figure panel in BOTH themes: mermaid renders with a dark theme,
   so keeping the panel dark reads as a framed figure and needs no re-render on
   theme switch. Fixed colors on purpose (not tokens). */
.mermaid-wrap { overflow-x: auto; border: 1px solid #262a30; border-radius: var(--radius);
  background: #0c0d0f; padding: 20px; margin: 8px 0 6px; }
.mermaid-wrap pre.mermaid { margin: 0; background: transparent; border: 0; display: flex; justify-content: center; }
.mermaid-wrap pre.mermaid svg { max-width: 100%; height: auto; }
.diagram-cap { font-size: 12px; color: var(--faint); margin: 4px 0 26px; }

/* ---- Pilot audit dashboard (super-admin only) — tokens only, blue is the one accent ------ */
.dash-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 22px 0 12px; }
.dash-tab { border: 1px solid var(--line); background: transparent; color: var(--muted);
  border-radius: var(--radius-sm); padding: 7px 15px; font: inherit; font-size: 13px; cursor: pointer;
  transition: border-color .15s var(--ease), color .15s var(--ease); }
.dash-tab:hover { border-color: var(--accent); color: var(--ink); }
.dash-tab.active { background: var(--accent-wash); color: var(--ink); border-color: var(--accent-line); }
.dash-toolbar { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.dash-txt { max-width: 560px; overflow-wrap: anywhere; }
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: var(--accent-wash); }
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
  margin-right: 8px; vertical-align: middle; box-shadow: 0 0 0 0 var(--accent-line); animation: dashpulse 2.4s infinite; }
@keyframes dashpulse {
  0%   { box-shadow: 0 0 0 0 var(--accent-line); }
  70%  { box-shadow: 0 0 0 7px rgba(0,173,218,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,173,218,0); }
}