/* Battalions design system on the engine pages.

   Every page links two files after its own <style> (and after dashboards.css):
     tokens.css  Katlego's tokens, copied as they are from his design system.
     theme.css   this file: his fonts, the bridge from the pages' own variable
                 names to his tokens, and his top bar.
   The pages keep their markup and their scripts; only the look changes.
   His rule: flat. One plane, set apart by hairlines and space, no shadows.
   Checked by tests/test_design_system_theme.py and scripts/e2e_design_system.py. */

@font-face {
  font-family: "Inter";
  src: url("/static/ds/fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/static/ds/fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 800; font-style: normal; font-display: swap;
}

/* The pages follow the computer's dark mode until the person picks a theme.
   His tokens have no such block, so this is his [data-theme="dark"] block,
   word for word (the test fails if the two differ). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0c0e24;
    --field: #20244d;
    --line: #2a2e5c;
    --line-strong: #6d71a3;
    --ink: #f5f5fa;
    --ink-muted: #b9bbd3;
    --brand: #cb8029;
    --on-brand: #151839;
    --brand-ink: #e09a45;
    --brand-tint: #322525;
    --brand-line: #624126;
    --chrome: #151839;
    --on-chrome: #ffffff;
    --on-chrome-muted: #b9bbd3;
    --success: #4fd1b5;
    --danger: #ff8f80;
    --danger-tint: #332333;
    --logo-ground: #ffffff;
    --focus: #e09a45;
    --paper: #ffffff;
    --paper-ink: #0b0b0b;
    --paper-ink-muted: #52514e;
    --paper-line: #e1e0d9;
    --paper-rule: #c3c2b7;
    --paper-tile: #f1f1ed;
    --paper-island: #f1f3f9;
    --paper-accent: #c77d2a;
    --focus-ring: 0 0 0 2px #0c0e24, 0 0 0 4px #e09a45;
  }
}

/* The bridge. Two selectors so it wins in every state: ":root" against the
   pages' light :root, ":root:not([data-theme=light])" against their dark
   blocks. The values do not change per theme: his tokens do. */
:root, :root:not([data-theme="light"]) {
  --bg: var(--ground); --bg-card: var(--ground); --bg-input: var(--field);
  --text: var(--ink); --text-secondary: var(--ink-muted); --text-tertiary: var(--ink-muted);
  --border: var(--line); --border-focus: var(--focus);
  /* Orange is a fill. Text in orange is --brand-ink; a label ON orange is --on-brand. */
  --accent: var(--brand); --accent-hover: var(--brand); --accent-light: var(--brand-tint);
  --accent-ink: var(--brand-ink); --on-accent: var(--on-brand);
  --error: var(--danger); --error-ink: var(--danger); --ok-ink: var(--success);
  --warning: var(--brand); --panel-warning-ink: var(--brand-ink);
  --panel-muted: var(--ink-muted); --panel-error-ink: var(--danger);
  --red-ink: var(--danger); --red-bg: var(--danger-tint); --red-fill: var(--danger);
  --amber-ink: var(--brand-ink); --amber-bg: var(--brand-tint); --amber-fill: var(--brand);
  --green-ink: var(--success); --green-fill: var(--success);
  --green-bg: color-mix(in srgb, var(--success) 12%, var(--ground));
  --grey-ink: var(--ink-muted); --grey-bg: var(--field); --grey-fill: var(--line-strong);
  --blue-ink: var(--brand-ink);
  /* His badges are neutral: the file type is in the word, not the colour. */
  --badge-red-ink: var(--ink); --badge-blue-ink: var(--ink);
  --badge-green-ink: var(--ink); --badge-purple-ink: var(--ink);
  --shadow: none; --shadow-lg: none;
  --radius: var(--radius-lg); --radius-sm: var(--radius-md); --radius-xs: 6px;
  --font: var(--font-sans);
}

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.source-badge[class] { background: var(--field); }

/* ---------- top bar: his chrome bar, the same on every page ---------- */
.top-nav[class] {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--space-4); height: 56px; padding: 0 var(--space-4);
  background: var(--chrome); color: var(--on-chrome); border-bottom: 0; box-shadow: none;
}
.top-nav .brand { display: flex; align-items: center; gap: var(--space-3); min-width: 0; color: var(--on-chrome); text-decoration: none; }
.top-nav .brand-icon {
  width: 32px; height: 32px; flex: none; border-radius: var(--radius-md);
  background: var(--logo-ground) url("/static/ds/battalions-symbol.png") center / cover no-repeat;
  color: transparent; font-size: 0;
}
.top-nav .brand-name {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 600 17px/24px var(--font-sans); letter-spacing: 0; color: var(--on-chrome);
}
.top-nav .brand-name span { font-weight: 400; color: var(--on-chrome-muted); }
.top-nav .nav-center { display: flex; align-items: center; height: 56px; gap: var(--space-1); }
.top-nav .nav-center a {
  display: flex; align-items: center; text-decoration: none; height: 56px; padding: 0 var(--space-4); border-bottom: 2px solid transparent;
  color: var(--on-chrome-muted); font: 500 15px/22px var(--font-sans); white-space: nowrap;
}
.top-nav .nav-center a:hover { color: var(--on-chrome); }
.top-nav .nav-center a.active, .top-nav .nav-center a[aria-current="page"] {
  color: var(--brand); border-bottom-color: var(--brand);
}
.top-nav .nav-right { display: flex; align-items: center; grid-column: 3; justify-content: flex-end; gap: var(--space-1); min-width: 0; }
.top-nav .theme-toggle, .top-nav .icon-btn, .top-nav .logout-btn, .top-nav .hamburger {
  background: transparent; border: 1px solid transparent; border-radius: var(--radius-md);
  color: var(--on-chrome); box-shadow: none;
}
.top-nav .logout-btn { font: 600 14px/20px var(--font-sans); }
.top-nav .theme-toggle:hover, .top-nav .icon-btn:hover, .top-nav .logout-btn:hover, .top-nav .hamburger:hover {
  background: rgb(255 255 255 / 0.12); border-color: transparent; color: var(--on-chrome);
}
.top-nav a:focus-visible, .top-nav button:focus-visible {
  outline: 2px solid transparent; outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--chrome), 0 0 0 4px var(--brand);
}

/* Between a phone and a wide screen the tabs need the middle: drop the
   product name first, then the name next to "Log out". */
@media (max-width: 1240px) {
  .top-nav .brand-name span { display: none; }
}

/* The Settings tab waits for nav.js to see an admin. The pages set
   display: flex on their tabs, which would beat the plain hidden attribute. */
[data-ds-admin][hidden] { display: none !important; }

/* The "B" square on the sign-in boxes becomes his symbol, like the top bar. */
.login-icon[class] {
  background: var(--logo-ground) url("/static/ds/battalions-symbol.png") center / cover no-repeat;
  color: transparent; font-size: 0; border-radius: var(--radius-md);
}

/* The phone menu. Most pages carry these rules already; Settings (advanced.html)
   gets its top bar from here, so the full set lives here too. */
.mobile-nav {
  display: none; position: fixed; top: 56px; left: 0; right: 0; z-index: 50;
  flex-direction: column; gap: 2px; padding: var(--space-2) var(--space-4);
  background: var(--ground); border-bottom: 1px solid var(--line); box-shadow: none;
}
.mobile-nav.open { display: flex; }
.mobile-nav a {
  display: block; padding: 10px 12px; border-radius: var(--radius-md);
  color: var(--ink-muted); font: 500 15px/22px var(--font-sans); text-decoration: none;
}
.mobile-nav a:hover { background: var(--field); color: var(--ink); }
.mobile-nav a.active, .mobile-nav a[aria-current="page"] { color: var(--ink); background: var(--brand-tint); }
.top-nav .hamburger { display: none; width: 36px; height: 36px; align-items: center; justify-content: center; cursor: pointer; }
.top-nav .hamburger svg { width: 20px; height: 20px; }
@media (max-width: 768px) {
  .top-nav .nav-center { display: none; }
  .top-nav .hamburger { display: flex; }
}

/* Reports: one tab in the top bar, its three boards as tabs under it (his tabs). */
.ds-subnav {
  display: flex; align-items: stretch; gap: var(--space-1); overflow-x: auto;
  padding: 0 var(--space-4); border-bottom: 1px solid var(--line); background: var(--ground);
}
.ds-subnav a {
  position: relative; display: inline-flex; align-items: center; height: 44px; padding: 0 var(--space-4);
  color: var(--ink-muted); font: 500 15px/22px var(--font-sans); text-decoration: none; white-space: nowrap;
}
.ds-subnav a:hover, .ds-subnav a[aria-current="page"] { color: var(--ink); }
.ds-subnav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--brand);
}
.ds-subnav a:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }

/* Settings keeps its own side menu; the top bar stays on screen above it. */
.top-nav.ds-sticky { position: sticky; top: 0; z-index: 20; }
.top-nav.ds-sticky ~ .wrap { min-height: calc(100vh - 56px); }
.top-nav.ds-sticky ~ .wrap nav.side { top: 56px; height: calc(100vh - 56px); }

/* Fields: his are white with a strong hairline, and get his focus ring. */
:root :is(input[type="text"], input[type="search"], input[type="password"], input[type="email"],
input[type="number"], input[type="url"], input:not([type]), textarea, select),
#input-row textarea {
  background-color: var(--ground); border-color: var(--line-strong); color: var(--ink);
}
:root :is(input[type="text"], input[type="search"], input[type="password"], input[type="email"],
input[type="number"], input[type="url"], input:not([type]), textarea, select):focus,
#input-row textarea:focus {
  border-color: var(--focus);
}
input::placeholder, textarea::placeholder { color: var(--ink-muted); opacity: 1; }

/* The big "B" on the empty Estimation screen becomes his symbol. */
.welcome-inner .welcome-icon {
  background: var(--logo-ground) url("/static/ds/battalions-symbol.png") center / cover no-repeat;
  color: transparent; font-size: 0; border-radius: var(--radius-lg); box-shadow: 0 0 0 1px var(--line);
}