/* AJL Ops UI — app.css (T3.1 shell + S1 Dashboard)
 * Law: specs/DESIGN.md. Tokens below are copied VERBATIM from DESIGN.md
 * (never re-derived); the spec's `::root` selector is an obvious typo —
 * a double-colon selector is invalid and would drop every token — so the
 * declarations ride on :root unchanged. Badge washes for ok/warn derive
 * from their text tokens via color-mix (DESIGN.md prescribes "tinted wash +
 * matching text color" but ships text-grade tokens only for those hues).
 * Fonts: self-hosted from the ajl-site build (no CDN) — families/weights
 * mirror ~/ajl-site site.css. */

@font-face { font-family: "Barlow"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/Barlow-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/Barlow-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/Barlow-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/BarlowCondensed-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/BarlowCondensed-700.woff2") format("woff2"); }

:root {
  --ink: oklch(0.25 0.02 250);          /* asphalt — headings, table headers */
  --body: oklch(0.37 0.02 250);
  --muted: oklch(0.51 0.02 250);        /* secondary text, empty states */
  --line: oklch(0.90 0.01 250);         /* hairlines, table borders */
  --paper: oklch(0.975 0.005 250);      /* page background */
  --panel: oklch(0.945 0.008 250);      /* cards, KPI tiles */
  --accent: oklch(0.795 0.163 82);      /* AJL brand yellow #EFAF00 — surfaces only, never text on light */
  --accent-ink: oklch(0.52 0.115 80);   /* text-safe amber on light bg */
  --accent-hover: oklch(0.70 0.15 85);
  --accent-deep: oklch(0.42 0.10 80);
  --accent-wash: oklch(0.955 0.055 90); /* pale amber wash — selected rows, callouts */
  --warn: oklch(0.55 0.12 60);
  --ok: oklch(0.52 0.11 150);
  --font-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Barlow", system-ui, -apple-system, sans-serif;
  --radius: 10px;
  --shadow: 0 1px 2px oklch(0.25 0.02 250 / 0.08), 0 8px 24px -12px oklch(0.25 0.02 250 / 0.18);
}


/* ---- LAW FILE (unlayered — beats Tailwind layers) ----
   Fonts self-hosted (no CDN), DESIGN.md tokens verbatim, nav toggle
   mechanics, table-wrap mobile scroll law. Everything visual moves to
   app/assets/tailwind/components.css (railsui + Tailwind v4). */

.table-wrap { overflow-x: auto; }
.table-wrap table { width: 100%; }
@media (max-width: 768px) {
  .table-wrap { -webkit-overflow-scrolling: touch; }
  .table-wrap table { width: max-content; min-width: 100%; }
  .table-wrap td, .table-wrap th { white-space: nowrap; }
}

/* ---- desktop shell: sidebar + main side-by-side (flex) ---- */
body:has(.app-nav) { display: flex; min-height: 100vh; }

/* ---- mobile nav law: static bar stacked above content; collapsed hides
   links, brand bar stays; toggle viewport-fixed and never moves ---- */
@media (max-width: 768px) {
  body:has(.app-nav) { display: block; }
  .app-nav { position: static; width: 100%; height: auto; min-height: 0; border-right: 0; border-bottom: 1px solid oklch(0.35 0.02 250); padding: 14px 0 10px; }
  .app-nav.is-collapsed { width: 100%; }
  .app-nav.is-collapsed .app-nav-link, .app-nav.is-collapsed .app-nav-section, .app-nav.is-collapsed .app-nav-foot { display: none; }
  .app-nav.is-collapsed .app-nav-head .app-nav-brand { display: block; }
  .app-main { padding: 14px 16px 22px; }
}

/* toggle: MOBILE ONLY (Michael, Oct 8 2026) — desktop keeps permanent sidebar */
.app-nav-toggle { position: fixed; top: 10px; right: 10px; z-index: 46; flex: 0 0 auto; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; background: var(--ink); border: 1px solid oklch(0.42 0.02 250); border-radius: 6px; cursor: pointer; color: oklch(0.85 0.01 250); transition: border-color .15s, background .15s; }
@media (min-width: 769px) { .app-nav-toggle { display: none; } }
.app-nav-toggle:hover { border-color: oklch(0.55 0.02 250); background: oklch(0.31 0.02 250); }
.app-nav-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.app-nav-toggle-chev { display: block; transition: transform .18s ease; }
.app-nav.is-collapsed .app-nav-toggle-chev { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
  .app-nav, .app-nav-toggle-chev, .topbar { transition: none; }
}

/* global focus ring (amber) — applies everywhere, wins over layers */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: 2px;
}
.app-nav a:focus-visible, .app-nav button:focus-visible { outline-color: var(--accent); }