/* Emonics Onboarding — STAFF CONSOLE.
   ===========================================================================
   Internal ops surface. Clean and correct over flashy: the design effort in
   this service belongs to the recipient flow (static/flow.css), and this is the
   worksurface people who already know the domain use every day.

   Same brand tokens as the flow, so the two never look like different products
   to someone who sees both.
   =========================================================================== */

:root {
  --navy: #1E2A5E;
  --navy-deep: #16204a;
  --orange: #E65F3C;
  --orange-soft: #fdeee9;

  --ink: #12161f;
  --ink-2: #3a4157;
  --ink-3: #5f6780;
  --line: #dfe3ec;
  --line-soft: #eef0f6;
  --bg: #f6f7fb;
  --card: #ffffff;
  --ok: #1f7a4d;
  --ok-soft: #e7f4ed;
  --warn: #8a5a00;
  --warn-soft: #fdf3e0;
  --stale: #b8391a;

  --r-sm: 7px;
  --r-md: 11px;
  --r-lg: 16px;
}

* { box-sizing: border-box; }

/* [hidden] must win over display.
   ===========================================================================
   `display: grid` on .sheet / .drawer / .flow-actions overrides the `hidden`
   attribute's UA `display: none`, so a "closed" overlay stays laid out at
   inset:0 and silently swallows every tap on the page underneath. Nothing looks
   wrong in a screenshot — the overlay is transparent and empty — which is
   precisely why this was found by driving the real UI and not by reading it.
   =========================================================================== */
[hidden] { display: none !important; }


body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- top bar -------------------------------------------------------------- */

.topbar {
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 0 24px;
  height: 62px;
  background: var(--navy);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 10;
}

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }

/* The canonical lockup lives in a white chip. The lockup is drawn for light
   backgrounds; putting it straight on the navy is what makes it look wrong. */
.brand-chip {
  display: grid; place-items: center;
  background: #fff;
  border-radius: var(--r-sm);
  padding: 5px 10px;
  height: 36px;
}
.brand-chip img { height: 24px; width: auto; display: block; }
.brand-title { font-size: 15px; font-weight: 650; letter-spacing: 0.01em; }

.topnav { display: flex; gap: 4px; margin-left: 12px; }
.navlink {
  background: none; border: none; color: rgba(255, 255, 255, 0.76);
  font: inherit; font-weight: 600; font-size: 13.5px;
  padding: 7px 13px; border-radius: 99px; cursor: pointer;
}
.navlink:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
.navlink.is-active { color: var(--navy); background: #fff; }

.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.who { font-size: 13px; color: rgba(255, 255, 255, 0.78); }
.ghost {
  background: none; border: 1px solid rgba(255, 255, 255, 0.3); color: #fff;
  font: inherit; font-size: 13px; padding: 6px 12px; border-radius: var(--r-sm); cursor: pointer;
}
.ghost:hover { background: rgba(255, 255, 255, 0.12); }

/* --- layout --------------------------------------------------------------- */

.wrap { max-width: 1280px; margin: 0 auto; padding: 26px 24px 64px; }
.viewhead { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 6px; }
h1 { font-size: 22px; margin: 0 0 4px; color: var(--navy); letter-spacing: -0.01em; }
.lede { color: var(--ink-3); margin: 0 0 18px; font-size: 13.5px; max-width: 76ch; }
.filters { display: flex; gap: 10px; }
.filters select {
  font: inherit; font-size: 13px; padding: 7px 11px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; color: var(--ink);
}

.skeleton { padding: 40px; text-align: center; color: var(--ink-3); background: var(--card);
            border: 1px solid var(--line); border-radius: var(--r-lg); }

.empty {
  padding: 48px 24px; text-align: center; background: var(--card);
  border: 1px dashed var(--line); border-radius: var(--r-lg);
}
.empty h2 { margin: 0 0 6px; font-size: 16px; color: var(--ink-2); }
.empty p { margin: 0; color: var(--ink-3); font-size: 13.5px; }

/* --- tables --------------------------------------------------------------- */

.tablewrap { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }

/* THE VARIANTS MATRIX GROWS A COLUMN PER VARIANT. At five it fitted; at seven
   the last column was cut off mid-word by the card edge — unreadable, and with
   no scrollbar to reach it. The page-level overflow check passed throughout,
   because the PAGE never overflowed; only the table did. It was caught by
   looking at the screenshot.

   The width was going into the headers: `employee-usa-consultant` set as one
   unbreakable mono run is a ~200px column on its own. Letting the headers wrap
   on their hyphens narrows every column enough for all seven to fit, while the
   body cells stay on one line because they are short pills. `.tablewrap` keeps
   `overflow-x: auto` as the backstop for the eighth variant. */
table.matrix th { white-space: normal; overflow-wrap: anywhere; max-width: 7.5rem;
                  vertical-align: bottom; line-height: 1.25; }

/* CELLS WRAP. They used to be `nowrap`, which was fine when a cell held one
   pill and clipped the last column the moment cells started holding four —
   "Employment + Covenant + packet + Training Application (held)" on one
   unbreakable line pushes the table past the card, and a full-page screenshot
   shows a truncated column rather than a scrollbar.
   Bounding the column and letting the pills stack is what makes the width
   survive content growth instead of needing another fix next time. */
table.matrix td { white-space: normal; max-width: 15rem; vertical-align: top; }
table.matrix td .pill { display: inline-block; margin: 1px 2px 1px 0; }
thead th {
  text-align: left; font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ink-3); padding: 11px 14px; border-bottom: 1px solid var(--line); background: #fbfcfe;
  white-space: nowrap;
}
tbody td { padding: 12px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr.clickable { cursor: pointer; }
tbody tr.clickable:hover { background: #fafbfe; }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }

/* --- pills ---------------------------------------------------------------- */

.pill {
  display: inline-block; font-size: 11.5px; font-weight: 650; letter-spacing: 0.01em;
  padding: 3px 9px; border-radius: 99px; white-space: nowrap;
}
.pill-neutral { background: var(--line-soft); color: var(--ink-3); }
.pill-live    { background: #e8edfa; color: var(--navy); }
.pill-ok      { background: var(--ok-soft); color: var(--ok); }
.pill-warn    { background: var(--warn-soft); color: var(--warn); }
.pill-hold    { background: var(--orange-soft); color: var(--orange); }

.days { font-variant-numeric: tabular-nums; font-weight: 650; }
.days.stale { color: var(--stale); }

.progress-mini { display: flex; align-items: center; gap: 8px; }
.progress-mini .bar { width: 62px; height: 5px; border-radius: 99px; background: var(--line-soft); overflow: hidden; }
.progress-mini .bar span { display: block; height: 100%; background: var(--navy); border-radius: 99px; }

/* --- drawer (case detail) -------------------------------------------------- */

.drawer { position: fixed; inset: 0; z-index: 40; background: rgba(18, 22, 31, 0.4); display: flex; justify-content: flex-end; }
.drawer-panel { background: var(--bg); width: min(720px, 100%); height: 100%; display: grid; grid-template-rows: auto 1fr; box-shadow: -14px 0 40px rgba(18, 22, 31, 0.14); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 22px; background: var(--navy); color: #fff; }
.drawer-head h2 { margin: 0; font-size: 16px; }
.drawer-body { overflow-y: auto; padding: 20px 22px 60px; display: grid; gap: 16px; }

.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px 18px; }
.panel h3 { margin: 0 0 10px; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }

.kv { display: grid; grid-template-columns: minmax(150px, 34%) 1fr; gap: 7px 16px; font-size: 13.5px; }
.kv dt { color: var(--ink-3); }
.kv dd { margin: 0; color: var(--ink); word-break: break-word; }

.steps { display: flex; flex-wrap: wrap; gap: 6px; }
.step-chip { font-size: 12px; padding: 4px 9px; border-radius: 99px; background: var(--line-soft); color: var(--ink-3); }
.step-chip.done { background: var(--ok-soft); color: var(--ok); }

.captures { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.capture-card { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: #fff; }
.capture-card img { width: 100%; height: 96px; object-fit: cover; display: block; background: var(--line-soft); }
.capture-card .meta { padding: 8px 10px; display: grid; gap: 3px; }
.capture-card strong { font-size: 12.5px; }

.trail { display: grid; gap: 0; font-size: 13px; }
.trail-row { display: grid; grid-template-columns: 150px 1fr; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line-soft); }
.trail-row:last-child { border-bottom: none; }
.trail-when { color: var(--ink-3); font-variant-numeric: tabular-nums; font-size: 12.5px; }
.trail-what strong { font-weight: 650; }
.trail-who { color: var(--ink-3); font-size: 12.5px; }

.actions-row { display: flex; gap: 10px; flex-wrap: wrap; }
.btn {
  font: inherit; font-size: 13.5px; font-weight: 650;
  padding: 9px 15px; border-radius: var(--r-sm); cursor: pointer; border: 1px solid transparent;
}
.btn-primary { background: var(--navy); color: #fff; }
.btn-outline { background: #fff; color: var(--navy); border-color: var(--line); }
.btn:disabled { background: var(--line-soft); color: var(--ink-3); border-color: var(--line); cursor: not-allowed; }

.gate-note {
  background: var(--warn-soft); color: var(--warn);
  padding: 11px 13px; border-radius: var(--r-sm); font-size: 13px; margin: 0 0 12px;
}
.gate-note strong { font-weight: 700; }

.linkbox {
  background: var(--line-soft); border-radius: var(--r-sm); padding: 10px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
  word-break: break-all; color: var(--ink-2); margin: 10px 0 0;
}

/* --- login (shared shell from the fleet) ---------------------------------- */

.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--bg); }
.login-card { width: min(400px, 100%); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 32px 28px; text-align: center; }
.login-card .logo { height: 30px; margin-bottom: 18px; }
.login-card h1 { font-size: 19px; margin: 0 0 5px; }
.login-card .sub { color: var(--ink-3); font-size: 13.5px; margin: 0 0 22px; }
.login-card .row { text-align: left; display: grid; gap: 6px; margin-bottom: 14px; }
.login-card label { font-size: 12.5px; font-weight: 650; color: var(--ink-2); }
.login-card input {
  width: 100%; padding: 11px 13px; font: inherit; font-size: 16px;
  border: 1.5px solid var(--line); border-radius: var(--r-sm);
}
.login-card input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(30, 42, 94, 0.12); }
.login-card button[type="submit"] {
  width: 100%; padding: 12px; font: inherit; font-weight: 700; font-size: 15px;
  background: var(--navy); color: #fff; border: none; border-radius: var(--r-sm); cursor: pointer;
}
.login-card .link-btn { background: none; border: none; color: var(--ink-3); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; margin-top: 12px; }
.login-card .msg { font-size: 13px; color: var(--ink-2); margin: 14px 0 0; }
.login-card .foot { font-size: 11.5px; color: var(--ink-3); margin: 22px 0 0; letter-spacing: 0.05em; text-transform: uppercase; }

/* --- dead link page -------------------------------------------------------- */

.dead-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--bg); }
.dead-card { width: min(420px, 100%); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 34px 28px; text-align: center; }
.dead-card .logo { height: 28px; margin-bottom: 20px; }
.dead-card h1 { font-size: 19px; margin: 0 0 10px; }
.dead-card p { color: var(--ink-2); font-size: 14.5px; margin: 0; line-height: 1.6; }

@media (max-width: 720px) {
  .topbar { gap: 12px; padding: 0 14px; }
  .brand-title, .who { display: none; }
  .wrap { padding: 18px 14px 48px; }
  .kv { grid-template-columns: 1fr; gap: 2px 0; }
  .kv dt { margin-top: 8px; }
  .trail-row { grid-template-columns: 1fr; gap: 2px; }
}