/* ESSI Field Ops — design tokens
 *
 * Single visual system across both product surfaces (Field Ops + Expense).
 * Inter (UI) + JetBrains Mono (IDs / IPs / serials / amounts), Datadog teal
 * accent, Field Ops status pills, hairline borders, one elevation token.
 *
 * Fonts vendored locally for air-gap discipline. Inter variable font from
 * rsms.me/inter (SIL OFL 1.1). JetBrains Mono variable font from JetBrains
 * (SIL OFL 1.1). Both shipped as WOFF2 under app/static/fonts/.
 */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/InterVariable.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/InterVariable-Italic.woff2") format("woff2-variations");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("fonts/JetBrainsMono-Variable.woff2") format("woff2-variations");
}

:root,
[data-theme="light"] {
  /* Neutrals */
  --bg: #ffffff;
  --bg-sunken: #f6f7f8;
  --bg-raised: #ffffff;
  --bg-hover: #f1f3f5;
  --bg-active: #e9ecef;

  --line: #e4e7ec;
  --line-strong: #cdd3da;
  --line-soft: #eef0f3;

  --fg: #0f1419;
  --fg-muted: #4a5260;
  --fg-subtle: #6b7280;
  --fg-faint: #95a0ad;

  /* Datadog teal accent — single accent across both surfaces */
  --accent: #0f766e;
  --accent-hover: #0d6660;
  --accent-active: #0a4f4a;
  --accent-bg: #e6f4f2;
  --accent-fg: #ffffff;

  /* Destructive */
  --danger: #b42318;
  --danger-bg: #fef3f2;
  --danger-fg: #ffffff;

  /* Status pills — INVIOLATE across the whole app */
  --st-planned-fg: #475467;   --st-planned-bg: #eef0f3;   --st-planned-bd: #d0d5dd;
  --st-delivered-fg: #1849a9; --st-delivered-bg: #eff4ff; --st-delivered-bd: #b2ccff;
  --st-installed-fg: #5925dc; --st-installed-bg: #f4f3ff; --st-installed-bd: #d9d6fe;
  --st-tested-fg: #0e7090;    --st-tested-bg: #ecfdff;    --st-tested-bd: #a5f0fc;
  --st-live-fg: #067647;      --st-live-bg: #ecfdf3;      --st-live-bd: #abefc6;
  --st-faulty-fg: #b54708;    --st-faulty-bg: #fffaeb;    --st-faulty-bd: #fedf89;
  --st-decom-fg: #475467;     --st-decom-bg: #f2f4f7;     --st-decom-bd: #cdd3da;

  /* Severity (P1-P4 for helpdesk / SLA) */
  --sev-p1-fg: #b42318; --sev-p1-bg: #fef3f2; --sev-p1-bd: #fda29b; --sev-p1-solid: #d92d20;
  --sev-p2-fg: #b54708; --sev-p2-bg: #fffaeb; --sev-p2-bd: #fedf89; --sev-p2-solid: #f79009;
  --sev-p3-fg: #854a0e; --sev-p3-bg: #fefbe8; --sev-p3-bd: #fde68a; --sev-p3-solid: #eab308;
  --sev-p4-fg: #475467; --sev-p4-bg: #f2f4f7; --sev-p4-bd: #cdd3da; --sev-p4-solid: #98a2b3;

  /* Expense status (mapped to operational pill colours) */
  --ex-draft-fg: var(--st-planned-fg);     --ex-draft-bg: var(--st-planned-bg);
  --ex-pending-check-fg: var(--st-delivered-fg); --ex-pending-check-bg: var(--st-delivered-bg);
  --ex-pending-pay-fg: var(--st-installed-fg);   --ex-pending-pay-bg: var(--st-installed-bg);
  --ex-paid-fg: var(--st-live-fg);         --ex-paid-bg: var(--st-live-bg);
  --ex-rejected-fg: var(--st-faulty-fg);   --ex-rejected-bg: var(--st-faulty-bg);

  /* Warning banner (GPS mismatch, etc.) */
  --warn-bg: #fffaeb; --warn-fg: #92400e; --warn-bd: #fde68a;

  /* Elevation — exactly one token. Use only for sheets / modals / menus. */
  --shadow-elev: 0 1px 2px rgba(15, 20, 25, 0.04), 0 12px 32px rgba(15, 20, 25, 0.08);

  /* Radii + tap targets */
  --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px;
  --tap-min: 44px;
  --tap-critical: 56px;

  /* Type */
  --font-ui: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --t-12: 12px; --t-14: 14px; --t-16: 16px; --t-20: 20px; --t-24: 24px; --t-32: 32px;
}

[data-theme="dark"] {
  --bg: #0b1015;
  --bg-sunken: #070a0e;
  --bg-raised: #11171e;
  --bg-hover: #161d25;
  --bg-active: #1d252e;

  --line: #1f2832;
  --line-strong: #2a3340;
  --line-soft: #161d25;

  --fg: #e6ecf2;
  --fg-muted: #98a4b3;
  --fg-subtle: #7a8696;
  --fg-faint: #565f6d;

  --accent: #14b8a6;
  --accent-hover: #2dd4bf;
  --accent-active: #0f9488;
  --accent-bg: #042f2e;
  --accent-fg: #001815;

  --danger: #f87171;
  --danger-bg: #2a0e0c;
  --danger-fg: #ffffff;

  --shadow-elev: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.6);
}

/* Reset + base */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-ui);
  font-feature-settings: "tnum" 1, "ss01" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.mono { font-family: var(--font-mono); letter-spacing: -0.01em; }

/* Status + severity pills */
.pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.2px;
  border: 1px solid var(--line);
  background: var(--bg-sunken);
  color: var(--fg-subtle);
  text-transform: capitalize;
}
.pill--planned    { color: var(--st-planned-fg);   background: var(--st-planned-bg);   border-color: var(--st-planned-bd); }
.pill--delivered  { color: var(--st-delivered-fg); background: var(--st-delivered-bg); border-color: var(--st-delivered-bd); }
.pill--installed  { color: var(--st-installed-fg); background: var(--st-installed-bg); border-color: var(--st-installed-bd); }
.pill--tested     { color: var(--st-tested-fg);    background: var(--st-tested-bg);    border-color: var(--st-tested-bd); }
.pill--live       { color: var(--st-live-fg);      background: var(--st-live-bg);      border-color: var(--st-live-bd); }
.pill--faulty     { color: var(--st-faulty-fg);    background: var(--st-faulty-bg);    border-color: var(--st-faulty-bd); }
.pill--decom      { color: var(--st-decom-fg);     background: var(--st-decom-bg);     border-color: var(--st-decom-bd); }

.pill--p1 { color: var(--sev-p1-fg); background: var(--sev-p1-bg); border-color: var(--sev-p1-bd); }
.pill--p2 { color: var(--sev-p2-fg); background: var(--sev-p2-bg); border-color: var(--sev-p2-bd); }
.pill--p3 { color: var(--sev-p3-fg); background: var(--sev-p3-bg); border-color: var(--sev-p3-bd); }
.pill--p4 { color: var(--sev-p4-fg); background: var(--sev-p4-bg); border-color: var(--sev-p4-bd); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap-min); padding: 0 16px;
  border-radius: var(--r-md); border: 1px solid var(--line-strong);
  background: var(--bg-raised); color: var(--fg);
  font-family: var(--font-ui); font-size: 14px; font-weight: 500;
  cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--bg-hover); }
.btn:active { background: var(--bg-active); }
.btn--primary {
  background: var(--accent); color: var(--accent-fg); border-color: var(--accent);
}
.btn--primary:hover  { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn--primary:active { background: var(--accent-active); border-color: var(--accent-active); }
.btn--critical { min-height: var(--tap-critical); padding: 0 24px; font-weight: 600; }
.btn--destructive { background: var(--danger); border-color: var(--danger); color: var(--danger-fg); }

/* Inputs */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field > label { font-size: 12px; font-weight: 600; color: var(--fg-muted); }
.field > input, .field > select, .field > textarea {
  min-height: var(--tap-min); padding: 8px 12px;
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background: var(--bg-raised); color: var(--fg);
  font-family: var(--font-ui); font-size: 14px;
}
.field > input:focus, .field > select:focus, .field > textarea:focus {
  outline: 2px solid var(--accent); outline-offset: -1px;
  border-color: var(--accent);
}
.field .hint { font-size: 11px; color: var(--fg-subtle); }
.field .err  { font-size: 11px; color: var(--danger); }

/* Banner */
.banner {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--bg-sunken);
  font-size: 13px;
}
.banner--warn { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-bd); }
.banner--info { background: var(--accent-bg); color: var(--accent); border-color: var(--accent); }

/* Layout */
.page { max-width: 100%; padding: 16px; }
.card {
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 16px;
}