@import "/fluency-theme.css";
/* ^ Fluency shared theme — the single source of brand/neutral/status token VALUES.
   The deploy workflow copies packages/theme/theme.css -> web/fluency-theme.css.
   Local dev:  cp ../../../packages/theme/theme.css web/fluency-theme.css  */

/* Executive Ledger design system (Stitch redesign, 2026-07), branded to
   fusionsite.com (warm black #241f21 + orange #ff6d02 family + the "Now"
   display face, all extracted from the site's own theme tokens).
   Tokens + shared components + an override layer that reskins the two
   artifact-generated dashboards without touching their DOM or JS.
   Self-hosted fonts only — the SWA CSP blocks external hosts. */

/* ---------- fonts ---------- */
@font-face { font-family: Now; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/fonts/now-500.woff2) format("woff2"); }
@font-face { font-family: Now; font-style: normal; font-weight: 600 800; font-display: swap;
  src: url(/fonts/now-700.woff2) format("woff2"); }
@font-face { font-family: Manrope; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/fonts/manrope-600.woff2) format("woff2"); }
@font-face { font-family: Manrope; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/fonts/manrope-700.woff2) format("woff2"); }
@font-face { font-family: Inter; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fonts/inter-400.woff2) format("woff2"); }
@font-face { font-family: Inter; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/fonts/inter-500.woff2) format("woff2"); }
@font-face { font-family: Inter; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/fonts/inter-600.woff2) format("woff2"); }
@font-face { font-family: Inter; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/fonts/inter-700.woff2) format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/fonts/jetbrainsmono-500.woff2) format("woff2"); }

/* ---------- tokens — remapped to the Fluency shared theme ----------
   The app keeps its --el-* names so the Stitch component CSS and the two
   artifact dashboards render unchanged, but the brand/neutral/status VALUES
   are now single-sourced from /fluency-theme.css. Typography stays the app's
   own self-hosted faces (fonts are the app's to choose; the size scale is
   shared). No raw brand/neutral hex lives in :root anymore. */
:root {
  /* app typography flavor (families only; scale comes from the shared theme) */
  --font-display: Now, Manrope, Inter, system-ui, -apple-system, sans-serif;
  --font-sans:    Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --el-font-head: var(--font-display);
  --el-font-body: var(--font-sans);
  --el-font-mono: var(--font-mono);

  --el-surface: var(--bg);
  --el-card: var(--surface);
  --el-card-low: var(--surface-2);
  --el-zebra: var(--surface-2);
  --el-ink: var(--ink);
  --el-ink-2: var(--ink-2);
  --el-muted: var(--muted);
  --el-line: var(--line);
  --el-line-strong: var(--line-strong);

  /* FusionSite brand — from the shared theme */
  --el-brand: var(--brand);
  --el-brand-strong: var(--brand-strong);
  --el-brand-soft: var(--brand-soft);
  --el-brand-tint: var(--brand-tint);
  --el-primary: var(--brand-strong);
  --el-primary-deep: var(--ink-inverse);
  --el-nav: var(--ink-inverse);
  --el-info: var(--info);
  --el-err: var(--danger);
  --el-err-bg: color-mix(in srgb, var(--danger) 12%, transparent);
  --el-warn: var(--warn);
  --el-warn-bg: color-mix(in srgb, var(--warn) 13%, transparent);
  --el-ok: var(--ok);
  --el-ok-text: var(--ok);
  --el-ok-bg: color-mix(in srgb, var(--ok) 13%, transparent);
  --el-info-bg: color-mix(in srgb, var(--info) 12%, transparent);

  --el-shadow-1: var(--shadow-sm);
  --el-shadow-2: var(--shadow);
  --el-shadow-3: var(--shadow-lg);
  --el-r-sm: var(--radius-sm);
  --el-r-lg: var(--radius);
}

/* ---------- site nav (markup built by nav.js) ---------- */
#sitenav {
  position: sticky; top: 0; z-index: 900;
  display: flex; align-items: stretch; gap: 4px;
  height: 64px; padding: 0 40px;
  background: var(--el-nav);
  font-family: var(--el-font-body); font-size: 14px;
}
#sitenav .brand {
  align-self: center; margin-right: 28px; display: flex; align-items: center; gap: 10px;
  font-family: var(--el-font-head); font-weight: 500; font-size: 16px;
  color: #ffffff; letter-spacing: .02em; white-space: nowrap;
}
#sitenav .brand img { height: 30px; display: block; }
#sitenav a {
  display: flex; align-items: center; padding: 0 16px;
  color: #cbd5e1; text-decoration: none; font-weight: 500; white-space: nowrap;
  border-bottom: 3px solid transparent; border-top: 3px solid transparent;
}
#sitenav a[hidden] { display: none; } /* display:flex above beats the UA [hidden] rule */
#sitenav a:hover { color: #ffffff; background: rgba(255, 255, 255, .06); }
#sitenav a.on { color: #ffffff; font-weight: 600; border-bottom-color: var(--el-brand); }
#sitenav a:focus-visible { outline: 2px solid var(--el-brand); outline-offset: -2px; }
#sitenav .sp { flex: 1; }
@media (max-width: 640px) {
  #sitenav { overflow-x: auto; padding: 0 16px; height: 56px; }
  #sitenav .brand { display: none; }
}

/* =====================================================================
   Artifact-page override layer.
   adapt_html.py stamps data-app="dash" | "vend" on each generated body;
   variables are remapped on <body> so they beat the pages' own :root
   definitions (including their dark-mode blocks) by inheritance.
   ===================================================================== */

body[data-app] {
  color-scheme: light;
  font-family: var(--el-font-body);
}
body[data-app] h1, body[data-app] h2, body[data-app] h3 {
  font-family: var(--el-font-head);
}
body[data-app] h1 { letter-spacing: -0.02em; }

/* focus visibility (missing in the artifacts) */
body[data-app] :focus-visible,
body[data-page] :focus-visible {
  outline: 2px solid var(--el-primary); outline-offset: 1px;
}

/* executive dashboard */
body[data-app="dash"] {
  --page: var(--el-surface); --surface: var(--el-card);
  --ink: var(--el-ink); --ink-2: var(--el-ink-2); --muted: var(--el-muted);
  --grid: var(--el-line); --baseline: var(--el-line-strong);
  --border: var(--el-line);
  --accent: var(--el-info); --accent-deep: var(--el-primary);
  --accent-soft: #93b4e8; --accent-faint: #dbe7fb;
  --good: var(--el-ok); --good-text: var(--el-ok-text);
  --warning: #eab308; --serious: #f97316; --critical: var(--el-err);
  --chip-bg: var(--el-zebra); --overlay: rgba(2, 36, 72, .6);
}

/* vendor spend explorer (orange stays the data color) */
body[data-app="vend"] {
  --page: var(--el-surface); --surface: var(--el-card);
  --ink: var(--el-ink); --ink-2: var(--el-ink-2); --ink-3: var(--el-muted);
  --grid: var(--el-line); --baseline: var(--el-line-strong);
  --ring: rgba(30, 58, 95, .14);
  --spend-bar: #f97316; --brand-strong: #c2410c; --spend-track: #ffedd5;
  --dom: var(--el-ok); --other: var(--el-line-strong); --undef: var(--el-err);
  --critical: var(--el-err); --critical-ink: var(--el-err);
  --wash: rgba(249, 115, 22, .07); --pos: var(--el-ok-text);
}

/* cards: soft shadow instead of hard borders */
body[data-app] .card {
  border-radius: var(--el-r-lg);
  border: 1px solid var(--el-line);
  box-shadow: var(--el-shadow-1);
}

/* KPI tiles */
body[data-app] .kpi { border-radius: var(--el-r-lg); box-shadow: var(--el-shadow-1); }
body[data-app] .kpi .l { font-family: var(--el-font-body); font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em; font-size: 11px; color: var(--el-muted); }
body[data-app] .kpi .v { font-family: var(--el-font-head); font-weight: 700; }
/* clickable KPI tile (Not yet submitted -> chase list); arrow supplied by adapt_html */
body[data-app] .kpi.clk { cursor: pointer; position: relative; transition: box-shadow .12s, background .12s; }
body[data-app] .kpi.clk:hover { background: var(--el-zebra); box-shadow: var(--el-shadow-2); }
body[data-app] .kpi.clk::after {
  content: "→"; position: absolute; top: 10px; right: 12px;
  color: var(--el-muted); font-size: 15px;
}

/* tables: zebra striping + tabular figures */
body[data-app] table { font-variant-numeric: tabular-nums; }
body[data-app] .statlist tbody tr:nth-child(even) td,
body[data-app] #empTable tbody tr:nth-child(even) td,
body[data-app] .dtbl tbody tr:nth-child(even) td { background: rgba(241, 245, 249, .55); }
body[data-app] th { font-family: var(--el-font-body); font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em; }

/* modals */
body[data-app] .modal { border-radius: var(--el-r-lg); box-shadow: var(--el-shadow-3); }