/* NWPS Engine dashboard — palette matched to nwprosource.com
   Three themes: Daylight (light), Summit Night (dark), Night Shift (shop dark).
   The backdrop scene in base.html is colored entirely by these variables. */

:root {
  --bg: hsl(150 20% 96%);
  --surface: hsl(0 0% 100% / 0.7);
  --tile-bg: hsl(150 22% 94% / 0.65);
  --chip-bg: hsl(150 18% 93%);
  --hover-bg: hsl(150 18% 93%);
  --input-bg: #ffffff;
  --border: hsl(150 20% 86%);
  --ink: hsl(222 47% 11%);        /* site charcoal */
  --ink-2: hsl(150 10% 32%);      /* site slate */
  --ink-3: hsl(150 8% 44%);
  --accent: hsl(152 60% 32%);     /* site primary green */
  --accent-strong: hsl(152 60% 26%);
  --btn-ink: #ffffff;
  --good-bg: hsl(152 45% 93%);  --good-ink: hsl(152 60% 24%);
  --warn-bg: #fdf1dc;  --warn-ink: #7c4a03;
  --bad-bg: #fdeaea;   --bad-ink: #8f1d1d;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Plus Jakarta Sans", "Inter", -apple-system, sans-serif;

  /* Backdrop scene — Daylight: morning fog over the Cascades */
  --sky: linear-gradient(180deg, hsl(202 48% 89%) 0%, hsl(170 32% 89%) 45%, hsl(150 26% 92%) 100%);
  --peak: hsl(210 26% 76%);
  --peak-line: hsl(210 24% 62%);
  --snow: hsl(0 0% 100% / 0.85);
  --ridge-far: hsl(172 22% 72%);
  --ridge-near: hsl(160 24% 58%);
  --trees: hsl(160 30% 40%);
  --contour: hsl(152 28% 70%);
  --contour-o: 0.55;
  --star: hsl(180 30% 85%);
  --stars-o: 0;
  --grid: hsl(210 25% 60%);
  --grid-o: 0;
  --datum: hsl(207 30% 45%);
  --datum-o: 0;
  --aurora: transparent;
  --aurora2: transparent;
  --moon: transparent;
  --moon-glow: transparent;
  --moon-o: 0;
  --fog: hsl(150 32% 97% / 0.92);
  --shadow: 0 1px 3px hsl(160 20% 40% / 0.08);
}

/* Summit Night — moonlit twilight above the tree line: aurora, moon, teal ridges */
[data-theme="night"] {
  --bg: hsl(215 45% 10%);
  --surface: hsl(212 42% 14% / 0.68);
  --tile-bg: hsl(208 38% 19% / 0.6);
  --chip-bg: hsl(208 34% 21%);
  --hover-bg: hsl(208 34% 21%);
  --input-bg: hsl(210 36% 17%);
  --border: hsl(204 32% 29%);
  --ink: hsl(180 25% 94%);
  --ink-2: hsl(185 15% 75%);
  --ink-3: hsl(190 10% 61%);
  --accent: hsl(152 60% 48%);
  --accent-strong: hsl(152 60% 40%);
  --good-bg: hsl(152 45% 18%);  --good-ink: hsl(152 55% 70%);
  --warn-bg: hsl(38 45% 17%);   --warn-ink: hsl(40 72% 70%);
  --bad-bg: hsl(0 42% 19%);     --bad-ink: hsl(0 72% 76%);

  --sky: linear-gradient(180deg, hsl(232 46% 13%) 0%, hsl(208 50% 17%) 48%, hsl(172 45% 15%) 100%);
  --peak: hsl(213 40% 22%);
  --peak-line: hsl(184 45% 42%);
  --snow: hsl(190 40% 85% / 0.35);
  --ridge-far: hsl(196 42% 18%);
  --ridge-near: hsl(176 38% 13%);
  --trees: hsl(160 42% 8%);
  --contour: hsl(172 35% 34%);
  --contour-o: 0.7;
  --star: hsl(50 40% 92%);
  --stars-o: 1;
  --grid-o: 0;
  --datum-o: 0;
  --aurora: hsl(155 90% 45% / 0.28);
  --aurora2: hsl(190 90% 50% / 0.18);
  --moon: hsl(45 55% 88%);
  --moon-glow: hsl(45 80% 80% / 0.18);
  --moon-o: 1;
  --fog: hsl(206 48% 11% / 0.5);
  --shadow: 0 1px 4px hsl(220 60% 4% / 0.5);
}

/* Night Shift — graphite machine shop: blueprint grid, steel toolpaths, amber work lights */
[data-theme="shop"] {
  --bg: hsl(220 8% 7%);
  --surface: hsl(216 9% 11% / 0.7);
  --tile-bg: hsl(214 9% 15% / 0.62);
  --chip-bg: hsl(214 8% 16%);
  --hover-bg: hsl(214 8% 16%);
  --input-bg: hsl(216 9% 13%);
  --border: hsl(212 10% 24%);
  --ink: hsl(40 10% 92%);
  --ink-2: hsl(40 6% 70%);
  --ink-3: hsl(40 4% 55%);
  --accent: hsl(38 85% 52%);          /* machinist amber, this theme only */
  --accent-strong: hsl(34 85% 45%);
  --btn-ink: hsl(30 30% 8%);
  --good-bg: hsl(152 40% 15%);  --good-ink: hsl(152 48% 66%);
  --warn-bg: hsl(38 42% 15%);   --warn-ink: hsl(40 68% 66%);
  --bad-bg: hsl(0 40% 16%);     --bad-ink: hsl(0 68% 72%);

  --sky: linear-gradient(180deg, hsl(222 10% 7%) 0%, hsl(217 9% 9%) 55%, hsl(212 8% 11%) 100%);
  --peak: hsl(216 10% 13%);
  --peak-line: hsl(207 65% 48%);      /* steel-blue toolpath passes */
  --snow: hsl(210 15% 60% / 0.15);
  --ridge-far: hsl(214 9% 11%);
  --ridge-near: hsl(212 9% 9%);
  --trees: hsl(214 10% 6%);
  --contour: hsl(207 45% 40%);
  --contour-o: 0.9;
  --star: hsl(40 30% 80%);
  --stars-o: 0.25;
  --grid: hsl(207 40% 34%);
  --grid-o: 0.45;
  --datum: hsl(38 80% 55%);           /* amber datum crosshairs */
  --datum-o: 0.9;
  --aurora: hsl(38 90% 45% / 0.07);   /* faint warm work-light glow */
  --aurora2: transparent;
  --moon-o: 0;
  --fog: hsl(218 10% 7% / 0.5);
  --shadow: 0 1px 4px hsl(220 30% 3% / 0.5);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0;
  font-family: var(--font-body);
  background: transparent;
  color: var(--ink);
  line-height: 1.55;
  font-size: 15px;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Backdrop scene — fixed behind everything */
.backdrop {
  position: fixed; inset: 0; z-index: -1;
  background: var(--sky);
  overflow: hidden;
  pointer-events: none;
}
.backdrop svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.backdrop-aurora {
  position: absolute; inset: 0;
  background:
    radial-gradient(70% 45% at 68% 12%, var(--aurora), transparent 70%),
    radial-gradient(55% 38% at 24% 10%, var(--aurora2), transparent 70%);
}
.backdrop-fog {
  position: absolute; inset: 0;
  background: linear-gradient(to top, var(--fog) 0%, transparent 42%);
}
.bd-stars { opacity: var(--stars-o); fill: var(--star); }
.bd-orbit { opacity: var(--stars-o); stroke: var(--star); fill: none; }
.bd-sat { opacity: var(--stars-o); fill: var(--star); }
.bd-grid { opacity: var(--grid-o); }
.bd-contour { stroke: var(--contour); fill: none; opacity: var(--contour-o); }
.bd-peak { fill: var(--peak); }
.bd-peak-line { stroke: var(--peak-line); fill: none; opacity: 0.75; }
.bd-snow { fill: var(--snow); }
.bd-ridge-far { fill: var(--ridge-far); }
.bd-ridge-near { fill: var(--ridge-near); }
.bd-trees { fill: var(--trees); }
.bd-datum { stroke: var(--datum); fill: none; opacity: var(--datum-o); }
.bd-moon { opacity: var(--moon-o); }
.bd-moon-core { fill: var(--moon); }
.bd-moon-glow { fill: var(--moon-glow); }

/* Top bar */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 8px 20px;
  background: var(--surface);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-top: 3px solid var(--accent);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10;
}
.brand a { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); }
.brand a:hover { text-decoration: none; }
.brand-logo { height: 30px; width: auto; display: block; }
[data-theme="night"] .brand-logo, [data-theme="shop"] .brand-logo {
  filter: brightness(0) invert(1) opacity(0.92);
}
.brand-engine {
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  color: var(--accent); text-transform: uppercase; letter-spacing: 0.08em;
  border-left: 1px solid var(--border); padding-left: 10px;
}
.freshness { color: var(--ink-3); font-size: 12.5px; margin-left: 10px; }
.actions { display: flex; align-items: center; gap: 10px; }
.navlink { font-size: 14px; }
button {
  font: inherit; font-size: 14px;
  padding: 6px 14px;
  border: 1px solid var(--accent);
  background: var(--accent); color: var(--btn-ink);
  border-radius: 6px; cursor: pointer;
}
button:hover:not(:disabled) { background: var(--accent-strong); border-color: var(--accent-strong); }
button.quiet:hover:not(:disabled) { background: var(--hover-bg); color: var(--ink); }
button:disabled { opacity: 0.55; cursor: default; }
button.quiet {
  background: transparent; color: var(--ink-2); border-color: var(--border);
}
.theme-btn { white-space: nowrap; }

/* Layout */
main { max-width: 1180px; margin: 0 auto; padding: 18px 20px 60px; }
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}
@media (max-width: 820px) {
  .grid { grid-template-columns: 1fr; }
  main { padding: 12px 12px 60px; }
}

/* Panels */
.panel {
  background: var(--surface);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
  box-shadow: var(--shadow);
}
.panel-wide { grid-column: 1 / -1; }
.panel-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-bottom: 8px;
}
.panel h2 {
  margin: 0; font-size: 13px; font-weight: 650;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2);
}
.panel h3 {
  margin: 14px 0 4px; font-size: 12.5px; font-weight: 600; color: var(--ink-3);
}
.stamp { color: var(--ink-3); font-size: 12.5px; }
.empty { color: var(--ink-3); }

/* Brief */
.brief-panel { margin-top: 2px; }
.brief-body h2 { font-family: var(--font-display); font-size: 17px; margin: 14px 0 6px;
  color: var(--ink); text-transform: none; letter-spacing: 0; font-weight: 700; }
.brief-body h2:first-child { margin-top: 4px; }
.brief-body p { margin: 8px 0; max-width: 75ch; }
.brief-body ul { margin: 6px 0; padding-left: 22px; }
.brief-body li { margin: 4px 0; }

/* Stat tiles */
.tiles { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.tile {
  flex: 1 1 130px;
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px;
  background: var(--tile-bg);
  border-radius: 8px;
}
.tile-label { font-size: 12px; color: var(--ink-3); }
.tile-value { font-family: var(--font-display); font-size: 26px; font-weight: 700; }
.tile-of { font-size: 15px; font-weight: 400; color: var(--ink-2); }
.tile-delta { font-size: 12px; color: var(--ink-2); }

/* Tables */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  text-align: left; font-weight: 600; font-size: 12px;
  color: var(--ink-3); padding: 4px 8px 4px 0;
  border-bottom: 1px solid var(--border);
}
td { padding: 5px 8px 5px 0; border-bottom: 1px solid var(--border); }
tr:last-child td { border-bottom: none; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
th.num { text-align: right; }
.delta { color: var(--ink-3); font-size: 12.5px; }

/* Needs attention */
.attention { list-style: none; margin: 0; padding: 0; }
.attention li {
  display: flex; align-items: baseline; gap: 8px;
  padding: 7px 0; border-bottom: 1px solid var(--border);
}
.attention li:last-child { border-bottom: none; }
.attn-text { flex: 1; }
.attn-source { color: var(--ink-3); font-size: 12px; white-space: nowrap; }
.sev {
  font-size: 11px; font-weight: 650; letter-spacing: 0.04em;
  padding: 1px 8px; border-radius: 999px; white-space: nowrap;
}
.sev-high { background: var(--bad-bg); color: var(--bad-ink); }
.sev-medium { background: var(--warn-bg); color: var(--warn-ink); }
.sev-low { background: var(--chip-bg); color: var(--ink-2); border: 1px solid var(--border); }

/* Inbox triage */
.triage { list-style: none; margin: 0; padding: 0; }
.triage li { padding: 7px 0; border-bottom: 1px solid var(--border); }
.triage li:last-child { border-bottom: none; }
.triage-top { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.triage-from { white-space: nowrap; }
.triage-from.unread { font-weight: 650; }
.triage-subject {
  flex: 1; color: var(--ink-2); font-size: 14px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.triage-age { color: var(--ink-3); font-size: 12px; white-space: nowrap; }
.triage-reason { color: var(--ink-3); font-size: 12.5px; margin-top: 1px; }
.triage-hidden { color: var(--ink-3); font-size: 12.5px; margin: 8px 0 0; }
.triage-footer {
  color: var(--ink-3); font-size: 12px; margin: 10px 0 0;
  padding-top: 8px; border-top: 1px solid var(--border);
}

/* PO sweep */
.posweep { list-style: none; margin: 0; padding: 0; }
.posweep li { padding: 7px 0; border-bottom: 1px solid var(--border); }
.posweep li:last-child { border-bottom: none; }
.po-top { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.dot {
  width: 10px; height: 10px; border-radius: 50%;
  display: inline-block; flex: none; align-self: center;
}
.dot-red { background: var(--bad-ink); box-shadow: 0 0 0 3px var(--bad-bg); }
.dot-green { background: var(--good-ink); box-shadow: 0 0 0 3px var(--good-bg); }
.dot-cleared { background: var(--ink-3); box-shadow: 0 0 0 3px var(--chip-bg); }
.po-number { font-weight: 650; white-space: nowrap; }
.po-customer {
  flex: 1; color: var(--ink-2); font-size: 14px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.po-age { color: var(--ink-3); font-size: 12px; white-space: nowrap; margin-left: auto; }
.po-clear { margin: 0; }
.po-clear-btn {
  background: transparent; color: var(--ink-2); border-color: var(--border);
  font-size: 12px; padding: 2px 10px;
}
.po-clear-btn:hover { border-color: var(--bad-ink); color: var(--bad-ink); }
.po-detail { color: var(--ink-3); font-size: 12.5px; margin: 1px 0 0 18px; }

/* Badges */
.badge-sandbox {
  font-size: 11px; font-weight: 700; letter-spacing: 0.05em;
  background: var(--warn-bg); color: var(--warn-ink);
  padding: 2px 8px; border-radius: 4px;
}

/* Plain lists */
ul.plain { list-style: none; margin: 0; padding: 0; }
ul.plain li { padding: 4px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
ul.plain li:last-child { border-bottom: none; }
ul.plain li.current a { font-weight: 650; }

/* Health strip */
.healthstrip {
  max-width: 1180px; margin: 0 auto; padding: 10px 20px 30px;
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  color: var(--ink-3); font-size: 12px;
}
.health-bad { color: var(--bad-ink); font-weight: 600; }

/* Login */
.login-wrap {
  min-height: 88vh; display: flex; align-items: center; justify-content: center;
}
.login-card {
  background: var(--surface);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: 12px; padding: 32px 36px; width: 340px; max-width: 92vw;
  border-top: 3px solid var(--accent);
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / .25), 0 8px 10px -6px rgb(0 0 0 / .25);
  text-align: center;
}
.login-logo { height: 88px; width: auto; margin-bottom: 8px; }
[data-theme="night"] .login-logo, [data-theme="shop"] .login-logo {
  filter: brightness(0) invert(1) opacity(0.92);
}
.login-card h1 { margin: 0 0 2px; font-size: 20px; font-family: var(--font-display); font-weight: 700; }
.login-card form { text-align: left; }
.login-sub { margin: 0 0 18px; color: var(--ink-3); font-size: 14px; }
.login-error {
  background: var(--bad-bg); color: var(--bad-ink);
  padding: 8px 12px; border-radius: 6px; font-size: 14px;
}
.login-card label { display: block; font-size: 13px; color: var(--ink-2); margin: 12px 0 4px; }
.login-card input {
  width: 100%; padding: 8px 10px; font: inherit;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--input-bg); color: var(--ink);
}
.login-card button { width: 100%; margin-top: 18px; padding: 9px; }

/* Briefs page */
.briefs-layout {
  display: grid; grid-template-columns: 280px 1fr; gap: 16px; align-items: start;
}
@media (max-width: 820px) { .briefs-layout { grid-template-columns: 1fr; } }
.briefs-list a { display: flex; justify-content: space-between; color: var(--ink); }

/* Legal pages (public: /eula, /privacy) */
.legal-wrap { max-width: 760px; margin: 28px auto; padding: 0 16px; }
.legal-body h1 { font-size: 24px; margin-bottom: 2px; }
.legal-body h2 { font-size: 16px; margin-top: 22px; }
.legal-body p, .legal-body li { color: var(--ink-2); }
.legal-meta { color: var(--ink-3); font-size: 13px; margin-bottom: 18px; }
.login-legal { margin-top: 16px; font-size: 12.5px; color: var(--ink-3); text-align: center; }

/* Order lookup (/orders + dashboard active-orders panel) */
.order-search { display: flex; gap: 10px; align-items: center; }
.order-search input {
  flex: 1; padding: 9px 12px; font: inherit;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--input-bg); color: var(--ink);
}
.order-search input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.order-search-clear { white-space: nowrap; }
.order-result-count { color: var(--ink-3); font-size: 13px; margin: 14px 2px 0; }
.order-list { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.order-card { padding: 14px 18px; }
.order-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
}
.order-id { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.order-po { font-family: var(--font-display); font-weight: 700; font-size: 16px; }
.order-customer { color: var(--ink-2); font-size: 14px; }
.order-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.order-meta {
  display: flex; gap: 14px; flex-wrap: wrap;
  color: var(--ink-2); font-size: 13.5px; margin-top: 4px;
}
.order-lines { list-style: none; margin: 10px 0 0; padding: 0; font-size: 13.5px; }
.order-lines li {
  display: flex; align-items: baseline; gap: 10px;
  padding: 4px 0; border-bottom: 1px solid var(--border);
}
.order-lines li:last-child { border-bottom: none; }
.line-part { font-variant-numeric: tabular-nums; white-space: nowrap; }
.line-desc {
  flex: 1; color: var(--ink-3); font-size: 12.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.line-qty { color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.order-actions { margin-top: 10px; }

/* Phase pills — good = moving, warn-ish neutrality for the rest */
.phase-pill {
  font-size: 11px; font-weight: 650; letter-spacing: 0.04em;
  padding: 1px 8px; border-radius: 999px; white-space: nowrap;
  background: var(--chip-bg); color: var(--ink-2); border: 1px solid var(--border);
}
.phase-production, .phase-preparing-to-ship, .phase-transit {
  background: var(--good-bg); color: var(--good-ink); border-color: transparent;
}
.phase-received, .phase-acceptance {
  background: var(--tile-bg); color: var(--ink-2);
}
.status-pill { background: var(--tile-bg); }
.past-due {
  font-size: 11px; font-weight: 650; letter-spacing: 0.04em;
  padding: 1px 8px; border-radius: 999px; white-space: nowrap;
  background: var(--bad-bg); color: var(--bad-ink);
}

/* Dashboard active-orders list (mirrors .posweep rhythm) */
.active-orders { list-style: none; margin: 0; padding: 0; }
.active-orders li { padding: 7px 0; border-bottom: 1px solid var(--border); }
.active-orders li:last-child { border-bottom: none; }
.active-orders .po-detail { margin-left: 0; }
.active-orders .po-number a { color: var(--ink); }
.active-orders .po-number a:hover { color: var(--accent); }