/* Same palette as the Up System on purpose: a manager moving between the two
   apps during a shift should not feel like they changed companies. */
:root {
  --bg: #f4f6f9; --card: #ffffff; --ink: #12202f; --muted: #5c6b7a;
  --line: #e2e8f0; --brand: #0b5cab; --brand-ink: #ffffff;
  --good: #12915a; --good-bg: #e6f6ee;
  --warn: #b5651d; --warn-bg: #fbeee0;
  --danger: #b3261e; --danger-bg: #fbeaea;
  --pill: #eef2f7;
  --shadow: 0 1px 3px rgba(16,32,48,.08), 0 4px 16px rgba(16,32,48,.05);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1622; --card: #12202f; --ink: #e7eef5; --muted: #93a4b5;
    --line: #21354a; --brand: #2e8be0; --brand-ink: #05121f;
    --good: #35d68a; --good-bg: #12352a;
    --warn: #e6a15c; --warn-bg: #34281a;
    --danger: #ff6b61; --danger-bg: #3a1d1c;
    --pill: #1b2c3e;
    --shadow: 0 1px 3px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.25);
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg); color: var(--ink); -webkit-text-size-adjust: 100%;
}
h1, h2, h3 { margin: 0 0 .5rem; line-height: 1.2; }
h2 { font-size: 1.05rem; }
h3 { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.muted { color: var(--muted); }
.small { font-size: .82rem; }
.err { color: var(--danger); font-size: .9rem; margin: .4rem 0 0; }

.screen { max-width: 900px; margin: 0 auto; padding: 1rem 1rem 3rem; }
.center { min-height: 100dvh; display: grid; place-items: center; padding: 1rem; }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 1rem; margin: 0 0 1rem; box-shadow: var(--shadow);
}

/* login */
.login { width: min(92vw, 380px); display: grid; gap: .85rem; }
.brand { font-size: 1.5rem; letter-spacing: -.02em; font-weight: 700; }
.brand span { display: block; font-size: .8rem; font-weight: 600; color: var(--muted); letter-spacing: .12em; text-transform: uppercase; }
label { display: grid; gap: .35rem; font-weight: 600; font-size: .9rem; }
input, select, button { font: inherit; }
input, select {
  padding: .7rem .8rem; border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg); color: var(--ink); width: 100%;
}
button { cursor: pointer; border: 0; border-radius: 10px; padding: .7rem 1rem; font-weight: 700; }
button.primary { background: var(--brand); color: var(--brand-ink); }
button.primary:hover { filter: brightness(1.06); }
button.ghost { background: transparent; border: 1px solid var(--line); color: var(--ink); font-weight: 600; }
button.sm { padding: .3rem .6rem; font-size: .8rem; }
button:disabled { opacity: .5; cursor: default; }

/* header */
.topbar {
  display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap;
  margin: 0 0 1rem;
}
.topbar .brand { font-size: 1.15rem; }
.topbar .spacer { flex: 1 1 auto; }

/* the verdict — the one thing on the page a manager must read */
.verdict { border-left: 5px solid var(--muted); }
.verdict.leak { border-left-color: var(--danger); }
.verdict.on_plan { border-left-color: var(--good); }
.verdict.unknown { border-left-color: var(--warn); }
.verdict h2 { font-size: 1.25rem; letter-spacing: -.01em; }
.verdict .detail { margin: .3rem 0 0; }
.verdict .note {
  margin: .6rem 0 0; padding: .5rem .7rem; border-radius: 8px;
  background: var(--pill); font-size: .88rem;
}

/* stages */
table.stages { width: 100%; border-collapse: collapse; }
table.stages th, table.stages td { padding: .5rem .4rem; text-align: right; border-bottom: 1px solid var(--line); }
table.stages th { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 600; }
table.stages th:first-child, table.stages td:first-child { text-align: left; }
table.stages tr:last-child td { border-bottom: 0; }
td.actual { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 1.05rem; }
td.num { font-variant-numeric: tabular-nums; color: var(--muted); }
tr.unmeasured td.actual { color: var(--warn); font-weight: 600; }
tr.unmeasured .why { display: block; font-size: .78rem; color: var(--muted); font-weight: 400; }

.tag { display: inline-block; padding: .1rem .45rem; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .02em; }
.tag.above_both { background: var(--good-bg); color: var(--good); }
.tag.below_both { background: var(--danger-bg); color: var(--danger); }
.tag.split      { background: var(--warn-bg); color: var(--warn); }
.tag.unmeasured { background: var(--pill); color: var(--muted); }
.tag.floor      { background: var(--pill); color: var(--muted); }

/* numbers */
.grid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.stat { background: var(--pill); border-radius: 10px; padding: .6rem .7rem; }
.stat b { display: block; font-size: 1.5rem; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.stat span { font-size: .78rem; color: var(--muted); }
.stat i { font-style: normal; font-size: .74rem; color: var(--muted); display: block; margin-top: .15rem; }

/* what you owe */
ul.attention, ul.gaps { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
ul.attention li { display: flex; gap: .6rem; align-items: baseline; padding: .55rem .7rem; border-radius: 10px; background: var(--pill); }
ul.attention li.urgent { background: var(--danger-bg); }
ul.attention li.today  { background: var(--warn-bg); }
ul.attention li b { font-variant-numeric: tabular-nums; }
ul.gaps li { font-size: .88rem; color: var(--muted); padding-left: 1rem; position: relative; }
ul.gaps li::before { content: "!"; position: absolute; left: 0; color: var(--warn); font-weight: 700; }

.source { font-size: .78rem; color: var(--muted); margin-top: .35rem; }

/* ---- navigation ---------------------------------------------------------- */
nav.views { display: flex; gap: .35rem; }
button.on { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }

.tabs { display: flex; gap: .4rem; flex-wrap: wrap; margin: 0 0 1rem; }
.tabs .tab b { font-variant-numeric: tabular-nums; opacity: .75; margin-left: .15rem; }

/* The attention rows on the synopsis are links into the list that fixes them. */
ul.attention li[data-link] { cursor: pointer; }
ul.attention li[data-link]:hover { filter: brightness(1.04); }
ul.attention li .go { margin-left: auto; font-size: .78rem; font-weight: 700; color: var(--brand); white-space: nowrap; }

/* ---- the worklist -------------------------------------------------------- */
.bucket { margin: 0 0 1.5rem; }
.bucket > h3 { display: flex; align-items: center; gap: .5rem; }
.bucket > h3 .count {
  background: var(--pill); color: var(--ink); border-radius: 999px;
  padding: .05rem .5rem; font-size: .8rem; letter-spacing: 0;
}
.bucket > .source { margin: -.2rem 0 .6rem; }

article.work {
  background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--line);
  border-radius: 12px; padding: .8rem .9rem; margin: 0 0 .6rem; box-shadow: var(--shadow);
}
article.work.overdue   { border-left-color: var(--danger); }
article.work.due_today { border-left-color: var(--warn); }
article.work.unowned   { border-left-color: var(--muted); }
article.work.scheduled { border-left-color: var(--good); }
article.work.closed    { opacity: .72; }
article.work.saving    { opacity: .6; }
article.work.failed    { border-color: var(--danger); }

article.work header { display: grid; gap: .15rem; margin-bottom: .6rem; }
article.work header > div:first-child { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
article.work header b { font-size: 1.05rem; }
article.work .who a { color: var(--brand); text-decoration: none; font-weight: 600; }

/* One tap is a save, so the controls have to be big enough to tap once. */
.fields { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); }
.fields label { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
.fields label.wide { grid-column: 1 / -1; }
/* 44px minimum. These are tapped with a thumb, on a phone, standing on a
   showroom floor — and every one of them commits a write, so a mis-tap is a
   real change to a real customer's record. */
.fields select, .fields input { padding: .62rem .55rem; font-size: .95rem; min-height: 44px; }

p.needs { margin: .6rem 0 0; color: var(--warn); font-weight: 600; }
p.needs span { background: var(--warn-bg); border-radius: 999px; padding: .05rem .45rem; }
p.rowmsg { margin: .5rem 0 0; }
p.rowmsg.err { color: var(--danger); font-weight: 600; }
article.work .source { margin: .5rem 0 0; }

/* A wide table must scroll inside its own box; the page never scrolls sideways. */
.scroll { overflow-x: auto; }
.scroll table { min-width: 520px; }
td.num.soft { opacity: .55; }
td.num.bad  { color: var(--danger); font-weight: 700; }
.stages .tag { margin-left: .35rem; }

/* ============================================================================
   BRAND
   The logo is the same JPEG Command Center already ships, so the internal apps
   look like one suite. It has a white background baked in, so it sits on an
   explicit white plate rather than floating on the card — otherwise the dark
   theme renders a white rectangle that reads as a broken image.
   ========================================================================= */
.brandmark { display: grid; justify-items: center; gap: .5rem; margin: .25rem 0 .5rem; }
.brandmark img {
  width: min(100%, 260px); height: auto; display: block;
  background: #fff; padding: .5rem .7rem; border-radius: 10px;
}
.brandmark span {
  font-size: .74rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}
.topbar .brand { display: flex; align-items: center; gap: .6rem; font-size: 1rem; }
.topbar .brand span { display: inline; font-size: .74rem; letter-spacing: .1em; }
img.topmark {
  height: 30px; width: auto; background: #fff;
  padding: .2rem .35rem; border-radius: 7px;
}

/* ============================================================================
   PASSWORD EYE
   ========================================================================= */
.pw { position: relative; display: block; }
/* Room for the button so the text never runs underneath it. */
.pw input { padding-right: 3rem; }
.peek {
  position: absolute; top: 50%; right: .35rem; transform: translateY(-50%);
  background: transparent; border: 0; padding: .45rem; border-radius: 8px;
  color: var(--muted); cursor: pointer; display: grid; place-items: center;
  min-height: 0;
}
.peek:hover { color: var(--ink); background: var(--pill); }
.peek .eye-shut { opacity: 0; transition: opacity .12s; }
.peek.on { color: var(--brand); }
.peek.on .eye-shut { opacity: 1; }

/* ============================================================================
   USE THE SCREEN
   900px was a phone-first default. On the monitors these are actually read on
   it left two thirds of the display empty and turned 40 recovery cards into 40
   scrolls.
   ========================================================================= */
.screen { max-width: min(1680px, 96vw); }
.login { width: min(94vw, 420px); }

/* Above this width the worklists stop being a single column. The heading and
   its blurb still span, so a bucket reads as one group rather than a card that
   happens to sit first. */
@media (min-width: 1080px) {
  .bucket {
    display: grid; gap: .6rem; align-items: start;
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  }
  .bucket > h3, .bucket > .source { grid-column: 1 / -1; }
  article.work { margin: 0; }
}
/* The synopsis reads as a column of statements, so it stays narrower than the
   worklists even on a wide screen — a 1600px-wide sentence is unreadable. */
.screen .verdict, .screen table.stages { max-width: 1100px; }

/* ============================================================================
   DRILLDOWNS
   ========================================================================= */
.drillable { cursor: pointer; position: relative; }
.drillable:hover { filter: brightness(1.05); }
.drillable:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.stat.drillable::after {
  content: "›"; position: absolute; top: .4rem; right: .55rem;
  color: var(--muted); font-size: 1.1rem; line-height: 1; opacity: .6;
}
.stat i[data-drill] { text-decoration: underline dotted; cursor: pointer; }
tr.drillrow { cursor: pointer; }
tr.drillrow:hover td { background: var(--pill); }
h2[data-drill] { cursor: pointer; }
td[data-drill] { cursor: pointer; text-decoration: underline dotted; }
b[data-drill] { cursor: pointer; text-decoration: underline dotted; }

dialog.drill {
  width: min(760px, 94vw); max-height: 86vh; padding: 0; border: 0;
  border-radius: 14px; background: var(--card); color: var(--ink);
  box-shadow: 0 12px 48px rgba(0,0,0,.35); overflow: hidden;
}
dialog.drill::backdrop { background: rgba(6, 14, 22, .55); }
dialog.drill header {
  display: flex; align-items: flex-start; gap: 1rem; padding: 1rem 1.1rem .6rem;
  border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--card);
}
dialog.drill header h3 { font-size: .95rem; letter-spacing: .04em; color: var(--ink); margin: 0; }
dialog.drill header .count { margin: .25rem 0 0; font-size: .82rem; color: var(--muted); }
dialog.drill header .count b { font-variant-numeric: tabular-nums; color: var(--ink); font-size: 1rem; }
dialog.drill header button { margin-left: auto; }
/* The denominator is not a footnote. It is the thing that stops a list of 77
   names from meaning four different quantities. */
dialog.drill .denominator {
  margin: 0; padding: .7rem 1.1rem; background: var(--pill);
  font-size: .85rem; color: var(--ink);
}
dialog.drill .err { padding: 1rem 1.1rem; }
ol.drill-rows { list-style: none; margin: 0; padding: .4rem 0 1rem; overflow-y: auto; max-height: 58vh; }
ol.drill-rows li { padding: .55rem 1.1rem; border-bottom: 1px solid var(--line); }
ol.drill-rows li:last-child { border-bottom: 0; }
.d-main { display: flex; align-items: baseline; gap: .6rem; }
.d-main b { font-size: .96rem; }
.d-value { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--muted); font-size: .84rem; white-space: nowrap; }
.d-sub { font-size: .82rem; color: var(--muted); margin-top: .1rem; }
.d-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .3rem; }
.d-tags span {
  font-size: .72rem; background: var(--pill); color: var(--muted);
  border-radius: 999px; padding: .05rem .45rem;
}