:root {
  --bg: #0f1720; --panel: #182430; --ink: #e7edf3; --muted: #90a2b4;
  --green: #2ecc71; --amber: #f1c40f; --red: #e74c3c; --grey: #7f8c8d;
  --line: #24384a; --accent: #3aa0ff;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: "Segoe UI", system-ui, sans-serif; background: var(--bg); color: var(--ink); }
a { color: var(--accent); text-decoration: none; }

.page { min-height: 100vh; display: flex; flex-direction: column; }
.site-header { background: var(--panel); border-bottom: 1px solid var(--line); }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: .6rem 1.2rem; }
.brand { display: flex; align-items: center; gap: .5rem; font-weight: 600; }
.brand-mark, .brand-mark-lg { color: var(--accent); }
.brand-mark-lg { font-size: 2rem; }
.brand-product { color: var(--muted); font-weight: 400; }
.header-nav { display: flex; align-items: center; gap: 1rem; }
.nav-link { color: var(--ink); }
.btn-logout { background: none; border: none; color: var(--muted); cursor: pointer; font: inherit; }
.main-content { flex: 1; padding: 1.2rem; max-width: 1200px; width: 100%; margin: 0 auto; }
.site-footer { padding: .6rem 1.2rem; color: var(--muted); border-top: 1px solid var(--line); font-size: .85rem; }

.content-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.content-head-actions { display: flex; align-items: center; gap: .8rem; }
h1 { font-size: 1.4rem; margin: 0; }
h2 { font-size: 1.1rem; }
.muted { color: var(--muted); }
.ok { color: var(--green); }
.bad { color: var(--red); }
.warn { color: var(--amber); }

.summary-bar { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.pill { background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: .25rem .7rem; font-size: .85rem; }
.pill-green { border-color: var(--green); } .pill-amber { border-color: var(--amber); }
.pill-red { border-color: var(--red); } .pill-grey { border-color: var(--grey); }
/* WAVE 2: "ready to pull" is neither a success nor a warning — it is an armed, waiting state. */
.pill-blue { border-color: var(--accent); }
.form-control-sm { padding: .25rem .4rem; font-size: .85rem; width: auto; display: inline-block; }

.tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.tile { background: var(--panel); border: 1px solid var(--line); border-left: 5px solid var(--grey); border-radius: 8px; padding: .8rem; }
.tile-green { border-left-color: var(--green); } .tile-amber { border-left-color: var(--amber); }
.tile-red { border-left-color: var(--red); } .tile-grey { border-left-color: var(--grey); }
.tile-head { display: flex; align-items: center; justify-content: space-between; }
.tile-title { font-weight: 600; }
.tile-client { color: var(--muted); font-size: .85rem; margin-bottom: .5rem; }
.tile-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.dot-green { background: var(--green); } .dot-amber { background: var(--amber); }
.dot-red { background: var(--red); } .dot-grey { background: var(--grey); }
.tile-facts { list-style: none; padding: 0; margin: 0; font-size: .85rem; line-height: 1.6; }
.tile-note { color: var(--muted); font-size: .85rem; }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 1rem; margin-bottom: 1rem; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .8rem; margin-bottom: .8rem; }
.form-group { display: flex; flex-direction: column; gap: .3rem; }
.form-group-wide { grid-column: 1 / -1; }
.form-control { background: var(--bg); border: 1px solid var(--line); color: var(--ink); border-radius: 6px; padding: .5rem; }
label { font-size: .8rem; color: var(--muted); }

.grid { width: 100%; border-collapse: collapse; font-size: .85rem; }
.grid th, .grid td { text-align: left; padding: .4rem .6rem; border-bottom: 1px solid var(--line); }

.btn { border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 6px; padding: .5rem .9rem; cursor: pointer; font: inherit; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #06121f; font-weight: 600; }
.btn-secondary { background: var(--panel); }
.btn-danger { border-color: var(--red); color: var(--red); }
.btn-sm { padding: .25rem .6rem; font-size: .8rem; }
.btn-full { width: 100%; }

.login-container { display: flex; justify-content: center; align-items: center; min-height: 70vh; }
.login-card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 2rem; width: 340px; }
.login-logo { text-align: center; margin-bottom: 1.2rem; }
.login-subtitle { color: var(--muted); }

.alert { border-radius: 6px; padding: .6rem .8rem; margin-bottom: .8rem; font-size: .9rem; }
.alert-error { background: #3a1c1c; border: 1px solid var(--red); }
.alert-ok { background: #143024; border: 1px solid var(--green); }
/* PI-2088: neither a pass nor a failure — "this gate does not apply, and here is who said so, and when". */
.alert-warn { background: #33290f; border: 1px solid var(--amber); }
.attest-row { display: flex; align-items: center; gap: .5rem; }
.empty-state { background: var(--panel); border: 1px dashed var(--line); border-radius: 8px; padding: 2rem; text-align: center; }

/* ── Phase 2: drill-in page, confirm modal, log tail ─────────────────────────── */
.small { font-size: .8rem; }
.fact-row { display: flex; flex-wrap: wrap; gap: 1.2rem; margin: .3rem 0; font-size: .9rem; }
.action-cell { display: flex; gap: .35rem; flex-wrap: wrap; }

.state-green { color: var(--green); }
.state-amber { color: var(--amber); }
.state-red { color: var(--red); }
.state-grey { color: var(--grey); }

.tile-link { color: var(--ink); text-decoration: none; }
.tile-link:hover { text-decoration: underline; }
.tile-manage { float: right; color: var(--accent); text-decoration: none; font-size: .8rem; }

.log-toolbar { display: flex; gap: .6rem; align-items: center; margin-bottom: .6rem; }
.log-toolbar .form-control { width: auto; min-width: 220px; }
.log-view { background: #0a0f16; border: 1px solid var(--line); border-radius: 6px; padding: .6rem .8rem;
    max-height: 360px; overflow-y: auto; font-family: Consolas, "Courier New", monospace; font-size: .8rem; }
.log-line { white-space: pre-wrap; word-break: break-all; line-height: 1.35; }

.rig-block { margin: .5rem 0; }
.viewer-list { list-style: none; padding-left: 0; }
.viewer-list li { display: flex; gap: .5rem; align-items: center; padding: .25rem 0; flex-wrap: wrap; }

.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex;
    justify-content: center; align-items: center; z-index: 100; }
.modal-card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
    padding: 1.4rem 1.6rem; width: 420px; max-width: 92vw; }
.modal-title { margin: 0 0 .6rem; }
.modal-body { margin: 0 0 .6rem; }
.modal-warn { color: var(--amber); font-size: .88rem; margin: 0 0 .8rem; }
.modal-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: .4rem; }

/* ── Wave 3: per-box staleness badges (one poller + shared snapshot cache) ───── */
.age-badge { font-size: .72rem; border: 1px solid var(--line); border-radius: 999px;
    padding: .05rem .5rem; color: var(--muted); white-space: nowrap; }
.age-fresh { border-color: var(--line); }
.age-stale { border-color: var(--amber); color: var(--amber); }
.age-verystale { border-color: var(--red); color: var(--red); }
/* A stale tile keeps its last-known facts visible (dimmed) rather than blanking them — knowing WHAT we last
   saw and HOW LONG AGO beats an empty tile. */
.tile-stale .tile-facts { opacity: .6; }
.tile-agerow { display: flex; align-items: center; gap: .4rem; margin-top: .4rem; flex-wrap: wrap; }

/* Phase 3 — provisioning wizard */
.copy-block { background: #0f172a; color: #e2e8f0; border-radius: 6px; padding: .55rem .7rem;
    font-family: ui-monospace, Consolas, monospace; font-size: .82rem; white-space: pre-wrap;
    word-break: break-word; margin: .5rem 0 0; overflow-x: auto; }
.phase-head { margin: 1.1rem 0 .4rem; font-size: 1rem; color: var(--muted); border-bottom: 1px solid #e5e7eb; padding-bottom: .2rem; }
.row-done { opacity: .55; }
.row-done td b { text-decoration: line-through; }

/* ── 2026-08-05 — Enroll page: assignment row + superseded enrollment records ──────────────────
   The native <select> popup is drawn at the width of its LONGEST OPTION, so a short auto-sized control
   opened a list that covered the Assign button sitting beside it. Pinning a min-width keeps the popup no
   wider than the control it drops from, and the flex row keeps the button clear of the band it drops into
   (wrapping instead of colliding on a narrow cell). */
.assign-row { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-top: .25rem; }
.assign-row .form-control-sm { min-width: 11rem; max-width: 100%; }
/* Buttons and the reason a button is unavailable, stacked — the note belongs beside the control it explains. */
.action-stack { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; }
.action-row { display: flex; gap: .35rem; flex-wrap: wrap; }
/* A superseded record is dimmed and struck at its identifiers, never hidden and never deleted: each approval
   minted a real per-box key, so these rows are audit evidence (there is deliberately no purge path). */
.row-superseded { opacity: .62; }
.row-superseded td { border-left: 3px solid var(--grey); }

/* WAVE 6 — the data-driven fleet-command panel: one inline label+input per advertised argument. */
.inline-arg { display: inline-flex; flex-direction: column; gap: .15rem; margin-right: .6rem; vertical-align: top; }
.inline-arg .form-control { min-width: 9rem; padding: .2rem .4rem; font-size: .85rem; }