/* Operations HQ — shared design system.
   Tokens and components lifted from goflow-dashboard-mockup.html and
   production-daily.html, which were ~90% identical. Both screens now inherit
   from here so they stay visually consistent. */

:root {
  color-scheme: light;
  --page: #f9f9f7;
  --surface: #fcfcfb;
  --ink: #0b0b0b;
  --ink-2: #52514e;
  --muted: #898781;
  --grid: #e1e0d9;
  --axis: #c3c2b7;
  --border: rgba(11, 11, 11, 0.1);
  --s1: #2a78d6;
  --s2: #eb6834;
  --s3: #1baf7a;
  --s4: #eda100;
  --s5: #e87ba4;
  --good: #0ca30c;
  --good-ink: #006300;
  --warning: #fab219;
  --serious: #ec835a;
  --critical: #d03b3b;
  --seq-1: #cde2fb;
  --seq-2: #9ec5f4;
  --seq-3: #5598e7;
  --seq-4: #2a78d6;
  --seq-5: #184f95;
}

html[data-theme='dark'] {
  color-scheme: dark;
  --page: #0d0d0d;
  --surface: #1a1a19;
  --ink: #ffffff;
  --ink-2: #c3c2b7;
  --muted: #898781;
  --grid: #2c2c2a;
  --axis: #383835;
  --border: rgba(255, 255, 255, 0.1);
  --s1: #3987e5;
  --s2: #d95926;
  --s3: #199e70;
  --s4: #c98500;
  --s5: #d55181;
  --good: #0ca30c;
  --good-ink: #0ca30c;
  --warning: #fab219;
  --serious: #ec835a;
  --critical: #d03b3b;
  --seq-1: #104281;
  --seq-2: #184f95;
  --seq-3: #256abf;
  --seq-4: #3987e5;
  --seq-5: #86b6ef;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: var(--page);
  color: var(--ink);
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: 1.45;
  padding: 20px;
  max-width: 1440px;
  margin: 0 auto;
}

body.narrow {
  max-width: 1240px;
}

/* --- header --- */
header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

h1 {
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.sub {
  color: var(--ink-2);
  font-size: 13px;
  margin-top: 3px;
}

.head-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.pill {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: 6px;
}

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--good);
  flex: none;
}
.dot.stale { background: var(--warning); }
.dot.down { background: var(--critical); }
.dot.off { background: var(--muted); }

.seg {
  display: flex;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.seg button {
  border: 0;
  background: transparent;
  color: var(--ink-2);
  padding: 6px 11px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
}

.seg button.active {
  background: var(--s1);
  color: #fff;
}

/* Paula's portrait on the floating planning button. */
.p-face {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 22%;
  vertical-align: middle;
  margin-right: 2px;
}

/* Link into the team room, with the unread count from the AI employees. */
.team-link {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--ink-2);
  text-decoration: none;
}
.team-link:hover { border-color: var(--s1); color: var(--s1); }
.team-link.has-unread { border-color: var(--s1); color: var(--ink); }

.team-count {
  background: var(--s1);
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  padding: 0 6px;
  line-height: 16px;
}
.team-count.urgent { background: var(--critical); }
.team-count[hidden] { display: none; }

/* Hand-picked date window, shown only when the range is set to custom. */
.daterange {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 9px;
  font-size: 12px;
  color: var(--ink-2);
}

.daterange input[type="date"] {
  font-family: inherit;
  font-size: 12px;
  color: var(--ink);
  background: var(--page);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 6px;
  /* No color-scheme here on purpose: it's inherited from html[data-theme],
     so the native picker follows the app's toggle rather than the OS. */
}

/* The hidden attribute loses to display:flex above without this. */
.daterange[hidden] { display: none; }

.daterange input[type="date"]:focus {
  outline: 2px solid var(--s1);
  outline-offset: 1px;
}

.icon-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 34px;
  height: 32px;
  cursor: pointer;
  color: var(--ink-2);
  font-size: 15px;
}

/* --- layout --- */
.grid { display: grid; gap: 14px; }

.kpis {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(6, 1fr);
  margin-bottom: 14px;
}
@media (max-width: 1100px) { .kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px)  { .kpis { grid-template-columns: repeat(2, 1fr); } }

.cols {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.cols.wide { grid-template-columns: 1.5fr 1fr; }
/* A grid item defaults to min-width: auto, so a wide table inside a card
   stretches the card — and the page — instead of scrolling within its own
   .table-scroll. Zero lets the column shrink and the table scroll. */
.cols > * { min-width: 0; }
.cols-2, .split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
@media (max-width: 900px) {
  .cols, .cols.wide, .cols-2 { grid-template-columns: 1fr; }
}
@media (max-width: 700px) { .split { grid-template-columns: 1fr; } }

/* --- cards --- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
}

.card h2, h2 {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.kpi .label { font-size: 12px; color: var(--muted); font-weight: 500; }
.kpi .value {
  font-size: 26px;
  font-weight: 650;
  letter-spacing: -0.02em;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.kpi .cap { font-size: 11px; color: var(--muted); margin-top: 4px; }
.kpi .delta {
  font-size: 12px;
  margin-top: 5px;
  font-weight: 550;
  display: flex;
  align-items: center;
  gap: 4px;
}
.kpi.hero .value { color: var(--s1); }
.kpi.alert .value { color: var(--critical); }
.kpi .flag { font-size: 11px; color: var(--critical); font-weight: 600; }
.kpi.empty .value { color: var(--muted); }
.up { color: var(--good-ink); }
.down { color: var(--critical); }

/* --- tables --- */
table { width: 100%; border-collapse: collapse; font-size: 13px; }

/* Wide tables scroll inside their own card rather than squeezing columns
   until the content is unreadable, or pushing the page sideways. */
.table-scroll { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
.table-scroll > table { min-width: 680px; }

th {
  text-align: left;
  color: var(--muted);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 6px 8px;
  border-bottom: 1px solid var(--grid);
}

td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--grid);
  font-variant-numeric: tabular-nums;
}

tr:last-child td { border-bottom: 0; }
.num { text-align: right; }
.name { font-weight: 600; }
.size { color: var(--ink-2); font-size: 12px; }
.mono-sku { font-weight: 600; }

.totrow td {
  border-top: 2px solid var(--axis);
  font-weight: 700;
  border-bottom: 0;
  padding-top: 8px;
}

.row-flag { background: color-mix(in srgb, var(--critical) 5%, transparent); }
.strike { text-decoration: line-through; color: var(--muted); }
.dash { color: var(--muted); }

/* --- badges --- */
.badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.b-crit { background: color-mix(in srgb, var(--critical) 15%, transparent); color: var(--critical); }
.b-warn { background: color-mix(in srgb, var(--serious) 18%, transparent); color: var(--serious); }
.b-good { background: color-mix(in srgb, var(--good) 15%, transparent); color: var(--good-ink); }
.b-info { background: color-mix(in srgb, var(--s1) 14%, transparent); color: var(--s1); }
.b-muted { background: color-mix(in srgb, var(--muted) 15%, transparent); color: var(--muted); }

/* --- flags list --- */
.flags li {
  list-style: none;
  padding: 9px 0;
  border-bottom: 1px solid var(--grid);
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 13px;
}
.flags li:last-child { border-bottom: 0; }
.flags b { font-weight: 650; }
.fi { font-size: 15px; line-height: 1.2; }

/* --- bars --- */
.bar-wrap { display: flex; align-items: center; gap: 8px; }
.bar-track {
  background: var(--grid);
  border-radius: 4px;
  height: 14px;
  flex: 1;
  min-width: 60px;
}
.bar-fill { background: var(--s1); height: 14px; border-radius: 4px; }

.barrow {
  display: grid;
  grid-template-columns: 120px 1fr 66px 74px;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--grid);
}
.barrow:last-child { border-bottom: 0; }
.bartrack { background: var(--grid); border-radius: 5px; height: 16px; position: relative; }
.barfill { background: var(--s1); height: 16px; border-radius: 5px; }
.barrow .num { font-variant-numeric: tabular-nums; color: var(--ink-2); }

/* --- misc --- */
.legend {
  display: flex;
  gap: 14px;
  font-size: 12px;
  color: var(--ink-2);
  margin-top: 8px;
  flex-wrap: wrap;
}
.legend span { display: flex; align-items: center; gap: 5px; }
.swatch { width: 10px; height: 10px; border-radius: 3px; }

.note {
  font-size: 12px;
  color: var(--muted);
  margin-top: 10px;
  padding: 9px 11px;
  background: color-mix(in srgb, var(--s1) 7%, transparent);
  border-left: 3px solid var(--s1);
  border-radius: 4px;
}

.tt {
  position: fixed;
  pointer-events: none;
  background: var(--ink);
  color: var(--page);
  padding: 6px 9px;
  border-radius: 6px;
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.1s;
  z-index: 9;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

svg text { fill: var(--muted); font-size: 10px; }

.footer {
  color: var(--muted);
  font-size: 12px;
  text-align: center;
  margin-top: 6px;
  padding: 12px;
}

.empty-state {
  color: var(--muted);
  font-size: 13px;
  text-align: center;
  padding: 28px 12px;
}

/* --- HQ navigation cards --- */
.navcards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 14px;
}
@media (max-width: 1100px) { .navcards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .navcards { grid-template-columns: 1fr; } }

.navcard {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.12s, transform 0.12s;
}
.navcard:hover { border-color: var(--s1); transform: translateY(-1px); }
.navcard .nav-title {
  font-size: 15px;
  font-weight: 650;
  display: flex;
  align-items: center;
  gap: 8px;
}
.navcard .nav-desc { color: var(--ink-2); font-size: 12.5px; margin-top: 5px; }
.navcard .nav-meta { color: var(--muted); font-size: 11.5px; margin-top: 9px; }

/* --- links --- */
a { color: var(--s1); }
.crumb {
  font-size: 12.5px;
  color: var(--ink-2);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 8px;
}
.crumb:hover { color: var(--s1); }

/* --- signed-in account control --- */
.account-pill {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 5px 10px; font-size: 12px; color: var(--ink-2);
}
.account-pill.floating { position: fixed; top: 16px; right: 16px; z-index: 30; }
.account-pill .acct-who { font-weight: 600; color: var(--ink); }
.account-pill .acct-admin {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good-ink);
  border-radius: 20px; padding: 1px 6px; margin-left: 3px;
}
.account-pill .acct-out {
  color: var(--ink-2); text-decoration: none; border-left: 1px solid var(--border);
  padding-left: 8px;
}
.account-pill .acct-out:hover { color: var(--critical); }

/* --- loading: see public/js/loading.js --- */

/* A thin bar for refreshes, where the page already has readable content. */
.hq-loadbar {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 9999;
  background: color-mix(in srgb, var(--s1) 22%, transparent);
  overflow: hidden;
}
.hq-loadbar::after {
  content: ''; position: absolute; inset: 0;
  background: var(--s1);
  transform-origin: left;
  animation: hq-slide 1.1s ease-in-out infinite;
}
@keyframes hq-slide {
  0%   { transform: translateX(-100%) scaleX(.4); }
  50%  { transform: translateX(20%)   scaleX(.6); }
  100% { transform: translateX(100%)  scaleX(.4); }
}

/* First load: nothing is on screen yet, so say so plainly. */
/* `display: flex` beats the hidden attribute, so the panel would stay painted
   after the code hid it — the same trap as .daterange[hidden] elsewhere here. */
.hq-loadscreen[hidden], .hq-loadbar[hidden] { display: none !important; }

.hq-loadscreen {
  position: fixed; inset: 0; z-index: 9998;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--page) 88%, transparent);
  backdrop-filter: blur(1px);
}
.hq-loadbox {
  display: flex; align-items: center; gap: 11px;
  font-size: 14px; color: var(--ink-2); font-weight: 550;
  max-width: min(92vw, 460px); text-align: left;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 13px 18px; box-shadow: 0 6px 20px rgba(0,0,0,.08);
}
.hq-loadmsg { animation: hq-fade .35s ease-out; }
@keyframes hq-fade { from { opacity: 0; } to { opacity: 1; } }

.hq-spinner {
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--s1) 25%, transparent);
  border-top-color: var(--s1);
  animation: hq-spin .7s linear infinite;
}
@keyframes hq-spin { to { transform: rotate(360deg); } }

/* Motion is the point of a loading indicator, so keep something moving —
   but a pulse rather than a sweep for anyone who asked for less. */
@media (prefers-reduced-motion: reduce) {
  .hq-loadbar::after { animation: hq-pulse 1.6s ease-in-out infinite; transform: none; }
  .hq-spinner { animation-duration: 1.6s; }
  @keyframes hq-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
}