/* Netra Admin portal — same instrument-bench identity as the console
   (frontend-temp/styles.css), re-cut for an operator tool. The accent moves
   from teal to amber on purpose: this page destroys tenant projects, and it
   should never be mistaken for the product console sitting in the next tab.
   Palette: slate bench + amber accent · good #58D68A · bad #F27E6B · info #5EC8F2 */

:root {
  --bg: #0e141a;
  --panel: #141c24;
  --panel-2: #1a242d;
  --line: #24313c;
  --line-soft: #1d2831;
  --ink: #e8f0ee;
  --dim: #8ba0a0;
  --dimmer: #5f7377;
  --accent: #f2a65e;
  --teal: #35d0ba;
  --danger: #f27e6b;
  --good: #58d68a;
  --info: #5ec8f2;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --sans: "IBM Plex Sans", system-ui, sans-serif;
  --display: "Space Grotesk", var(--sans);
  --radius: 9px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: rgba(242, 166, 94, 0.25); }

.wordmark { font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; white-space: nowrap; }
.wordmark .tick { color: var(--accent); }
.dim { color: var(--dim); }

/* ---- buttons ---- */
.btn {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px 14px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, filter 0.12s;
}
.btn:hover { border-color: var(--dim); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #231204; font-weight: 600; }
.btn.primary:hover { filter: brightness(1.07); }
.btn.danger { color: var(--danger); border-color: rgba(242, 126, 107, 0.4); }
.btn.danger:hover { border-color: var(--danger); }
.btn.ghost { background: none; border: none; color: var(--dim); padding: 4px 6px; }
.btn.ghost:hover { color: var(--ink); }
.btn.block { width: 100%; }
.btn[disabled] { opacity: 0.5; cursor: default; filter: none; }

/* ---- top bar + tabs ---- */
.portal { min-height: 100vh; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; gap: 26px;
  padding: 12px 22px; border-bottom: 1px solid var(--line);
  background: var(--panel);
  position: sticky; top: 0; z-index: 20;
}
.tabs { display: flex; gap: 4px; flex: 1; }
.tab {
  background: none; border: none; border-radius: 7px;
  padding: 7px 14px; cursor: pointer; color: var(--dim);
  font-family: var(--display); font-weight: 600; font-size: 14px;
  display: inline-flex; align-items: center; gap: 7px;
}
.tab:hover { color: var(--ink); background: var(--panel-2); }
.tab.active { color: var(--ink); background: var(--panel-2); box-shadow: inset 0 -2px 0 var(--accent); }
.badge {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  background: var(--accent); color: #231204;
  border-radius: 20px; padding: 1px 6px; line-height: 1.4;
  /* A pill must never be broken across lines. Inside a report table the badge
     lands in a narrow column that the 100%-width layout squeezes to its
     minimum, and without these two a "false" verdict rendered as five stacked
     letters. */
  display: inline-block; white-space: nowrap;
}

/* Health pill: fed by the /api/health poll and nothing else. */
.api-pill {
  display: flex; align-items: center; gap: 7px;
  border: 1px solid var(--line); border-radius: 20px;
  padding: 4px 12px; font-family: var(--mono); font-size: 11px; color: var(--dim);
}
.pill-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dimmer); flex: none; }
.api-pill.online .pill-dot { background: var(--good); box-shadow: 0 0 8px rgba(88, 214, 138, 0.5); }
.api-pill.online { color: var(--ink); }
.api-pill.offline .pill-dot { background: var(--danger); box-shadow: 0 0 8px rgba(242, 126, 107, 0.5); }
.api-pill.offline { color: var(--danger); border-color: rgba(242, 126, 107, 0.4); }

/* ---- banners / errors / toast ---- */
.banner {
  padding: 10px 14px; border-radius: 8px;
  border: 1px solid rgba(242, 166, 94, 0.4); background: rgba(242, 166, 94, 0.08);
  color: var(--accent); font-size: 13.5px;
}
.banner.error { border-color: rgba(242, 126, 107, 0.45); background: rgba(242, 126, 107, 0.08); color: var(--danger); }
.banner.global { margin: 14px 22px 0; }

.inline-error { color: var(--danger); font-size: 13px; margin: 10px 0; }

.toast {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 9px;
  padding: 10px 16px; font-size: 13.5px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  z-index: 60; animation: rise 0.16s ease-out;
}
.toast.error { border-color: rgba(242, 126, 107, 0.5); color: var(--danger); }
@keyframes rise { from { opacity: 0; transform: translate(-50%, 4px); } }

/* ---- panels ---- */
.content { flex: 1; padding: 20px 22px 40px; max-width: 1080px; width: 100%; margin: 0 auto; }
.tab-panel { animation: fade 0.14s ease-out; }
@keyframes fade { from { opacity: 0; } }
.panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.panel-title { font-family: var(--display); font-size: 21px; font-weight: 600; margin: 0; }
.panel-sub { font-size: 13.5px; margin: 4px 0 0; max-width: 64ch; }

.card-list { display: flex; flex-direction: column; gap: 12px; }

/* ---- fields ---- */
.field-label { display: block; font-size: 12px; color: var(--dim); margin-bottom: 6px; }
.field-input, .field-select, .json-textarea {
  width: 100%; background: var(--bg); border: 1px solid var(--line);
  border-radius: 7px; padding: 9px 11px;
}
.field-input:focus, .field-select:focus, .json-textarea:focus { border-color: rgba(242, 166, 94, 0.5); outline: none; }
.field-select { cursor: pointer; }
.field-check { accent-color: var(--accent); margin-right: 8px; }
.check-label { display: flex; align-items: center; cursor: pointer; }

.lookup-row { display: flex; gap: 10px; margin: 0 0 14px; max-width: 520px; }
.lookup-row .field-input { flex: 1; font-family: var(--mono); font-size: 13px; }

/* ---- tenants ---- */
.tenant-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 11px;
  padding: 14px 16px; animation: rise-in 0.16s ease-out;
}
@keyframes rise-in { from { opacity: 0; transform: translateY(4px); } }
.tenant-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.tenant-title { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.tenant-id { font-family: var(--mono); font-size: 14px; color: var(--info); }
.tenant-name { font-size: 12.5px; }
.tenant-actions { display: flex; gap: 8px; }
.tenant-meta { margin-top: 10px; border-top: 1px solid var(--line-soft); padding-top: 10px; font-size: 13px; }
.tenant-report { margin-top: 10px; }
.tenant-report:empty { display: none; }

/* ---- create wizard ---- */
.create-grid { display: grid; grid-template-columns: 1fr 240px; gap: 18px; align-items: start; }
@media (max-width: 860px) { .create-grid { grid-template-columns: 1fr; } }

.tenant-form {
  background: var(--panel); border: 1px solid var(--line); border-radius: 11px;
  padding: 16px; display: flex; flex-direction: column; gap: 14px; margin-bottom: 14px;
}
.form-field { min-width: 0; }
.field-desc { font-size: 12px; margin: -2px 0 6px; }
.form-fieldset {
  border: 1px solid var(--line-soft); border-radius: 8px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 12px; margin: 0;
}
.form-fieldset legend { font-family: var(--mono); font-size: 12px; color: var(--accent); padding: 0 6px; }
.field-lines { font-family: var(--mono); font-size: 12.5px; resize: vertical; }

.ref-details { margin-bottom: 14px; }
.ref-details summary { cursor: pointer; color: var(--dim); font-size: 13px; }
.ref-details summary:hover { color: var(--ink); }
.ref-pre {
  margin: 10px 0 0; background: var(--panel); border: 1px solid var(--line);
  border-radius: 8px; padding: 12px 14px; overflow-x: auto;
  font-family: var(--mono); font-size: 12px; line-height: 1.55; color: var(--dim);
}

.json-editor-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.json-textarea { font-family: var(--mono); font-size: 12.5px; line-height: 1.55; resize: vertical; min-height: 140px; }
.json-note { font-size: 12px; margin: 6px 0 0; color: var(--accent); }

.action-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 11px;
  padding: 16px; display: flex; flex-direction: column; gap: 10px;
  position: sticky; top: 76px;
}
.action-title { font-family: var(--display); font-size: 14px; font-weight: 600; margin: 0; }
.action-sub { font-size: 12px; margin: 0 0 4px; }

.report-slot { margin-top: 18px; }
.report-slot:empty { display: none; }

/* ---- reports (structured JSON views) ---- */
.report-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 11px;
  padding: 14px 16px; animation: rise-in 0.16s ease-out;
}
.report-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.report-title { font-family: var(--display); font-size: 14px; font-weight: 600; margin: 0; }
.report-body { font-size: 13px; overflow-x: auto; }
.raw-json {
  margin: 0; background: var(--bg); border: 1px solid var(--line-soft); border-radius: 8px;
  padding: 12px 14px; overflow-x: auto; max-height: 60vh;
  font-family: var(--mono); font-size: 12px; line-height: 1.55;
}

.kv { display: grid; grid-template-columns: minmax(110px, max-content) 1fr; gap: 6px 16px; margin: 0; }
.kv dt { font-family: var(--mono); font-size: 12px; color: var(--dim); overflow-wrap: anywhere; }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.kv .kv { border-left: 2px solid var(--line-soft); padding-left: 12px; }

.val-list { margin: 0; padding-left: 18px; }
.val-list li { margin: 1px 0; }
.val-list li::marker { color: var(--dimmer); }
.val-stack { display: flex; flex-direction: column; gap: 8px; }
.val-pre {
  margin: 0; font-family: var(--mono); font-size: 12px; line-height: 1.5;
  white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink);
}
.num { font-family: var(--mono); font-size: 12.5px; }

.chip {
  display: inline-block; font-family: var(--mono); font-size: 11px;
  border: 1px solid var(--line); border-radius: 20px; padding: 1px 8px; color: var(--dim);
  /* A verdict is a pill and must occupy one line. Report tables render every
     boolean as a chip in a column the 100%-width layout squeezes to its
     minimum, and without this a `false` came out as five stacked letters —
     which is how the checks column looked in the first live doctor run. */
  white-space: nowrap;
}
.chip.good { color: var(--good); border-color: rgba(88, 214, 138, 0.4); }
.chip.bad { color: var(--danger); border-color: rgba(242, 126, 107, 0.4); }
.chip.warn { color: var(--accent); border-color: rgba(242, 166, 94, 0.4); }

.table-wrap { overflow-x: auto; }
.report-table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.report-table th {
  text-align: left; font-family: var(--mono); font-size: 11px; font-weight: 500;
  color: var(--dim); border-bottom: 1px solid var(--line); padding: 6px 10px 6px 0;
  white-space: nowrap;
}
.report-table td { border-bottom: 1px solid var(--line-soft); padding: 6px 10px 6px 0; vertical-align: top; }
/* Separate adjacent columns from the left as well as the right. A cell whose
   content reaches its own right edge — a nested table of chips is the usual
   case — otherwise sits one padding-width from the next column's wrapped text,
   which reads as though the two are one run of words. Not applied to the first
   column, which stays flush with the table's left edge. */
.report-table td + td, .report-table th + th { padding-left: 14px; }
/* The first column of every report table is an identifier — a check name, a
   step name, a field. It is the column the 100% width squeezes first, and a
   check called `project_active` came out as one letter per line. The long
   `detail` and `error` columns still wrap; only the identifier is pinned, and
   `.table-wrap` scrolls if the total no longer fits. */
.report-table td:first-child { white-space: nowrap; }
.report-table tr:last-child td { border-bottom: none; }

/* ---- jobs ---- */
.job-card {
  background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--dimmer);
  border-radius: 11px; padding: 14px 16px; animation: rise-in 0.16s ease-out;
}
.job-card.running, .job-card.pending { border-left-color: var(--accent); }
.job-card.succeeded { border-left-color: var(--good); }
.job-card.failed, .job-card.gone { border-left-color: var(--danger); }
/* interrupted is neither success nor a reported failure: the worker stopped
   answering and a reader concluded it. Given its own accent so it cannot be
   skimmed as either. */
.job-card.interrupted { border-left-color: var(--info); }
.job-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.job-title { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.job-kind { font-family: var(--display); font-weight: 600; font-size: 14px; }
.job-id { font-family: var(--mono); font-size: 11px; color: var(--dimmer); overflow-wrap: anywhere; }
.job-right { display: flex; align-items: center; gap: 8px; }
.job-times { font-family: var(--mono); font-size: 11px; margin-top: 6px; }
.job-log {
  margin: 10px 0 0; background: var(--bg); border: 1px solid var(--line-soft); border-radius: 8px;
  padding: 10px 12px; max-height: 260px; overflow: auto;
  font-family: var(--mono); font-size: 11.5px; line-height: 1.5; color: var(--dim);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.job-card .report-card { margin-top: 10px; background: var(--panel-2); }

/* ---- audit ---- */
.subtabs { display: flex; gap: 4px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.subtab {
  background: none; border: none; cursor: pointer; color: var(--dim);
  font-family: var(--mono); font-size: 12.5px; padding: 7px 12px;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.subtab:hover { color: var(--ink); }
.subtab.active { color: var(--ink); border-bottom-color: var(--accent); }

/* ---- destroy dialog ---- */
.dialog-scrim {
  position: fixed; inset: 0; background: rgba(4, 8, 10, 0.6);
  display: grid; place-items: center; z-index: 50; animation: fade 0.12s ease-out;
}
.dialog {
  width: min(460px, 92vw); background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 24px; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
}
.dialog-title { font-family: var(--display); font-size: 19px; font-weight: 600; margin: 0 0 4px; }
.danger-title { color: var(--danger); }
.dialog-sub { font-size: 13px; margin: 0 0 18px; line-height: 1.6; }
.destroy-target {
  font-family: var(--mono); font-size: 12.5px; color: var(--danger);
  background: rgba(242, 126, 107, 0.08); border: 1px solid rgba(242, 126, 107, 0.35);
  border-radius: 5px; padding: 1px 7px;
}
.destroy-input { font-family: var(--mono); font-size: 13px; }
.destroy-input.match { border-color: rgba(88, 214, 138, 0.55); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

/* ---- boot refusal + sign-in gate ----
   Two full-screen states that precede the portal. The gate exists because the
   admin slice sits behind the gateway's session; the fatal card exists because
   config.js is generated at deploy time and its absence must be legible on the
   page rather than only in the devtools console. */
.fatal-view, .auth-view {
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
}
.fatal-card, .auth-card {
  width: min(560px, 94vw); background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; padding: 30px 30px 26px; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
}
.fatal-card { border-color: rgba(242, 126, 107, 0.45); }
.fatal-title { font-family: var(--display); font-size: 19px; font-weight: 600; margin: 16px 0 12px; color: var(--danger); }
.fatal-body p { font-size: 13.5px; line-height: 1.65; margin: 0 0 10px; color: var(--dim); }
.fatal-body p:last-child { font-family: var(--mono); font-size: 12px; color: var(--dimmer); margin-bottom: 0; }
.auth-sub { font-size: 13.5px; line-height: 1.65; color: var(--dim); margin: 16px 0 20px; }
.auth-sub em { color: var(--ink); font-style: normal; font-weight: 600; }
.auth-actions { margin-bottom: 12px; }
.auth-note { font-size: 12.5px; line-height: 1.6; margin: 0 0 12px; }
.auth-error { color: var(--danger); font-size: 13px; min-height: 18px; margin: 4px 0 0; }

/* ---- operator strip ----
   Who the page acts as, and whether the delegated Google grant behind that
   identity is still stored. Both are read from the API, never asserted here. */
.operator { display: flex; align-items: center; gap: 8px; min-width: 0; }
.operator-email { font-family: var(--mono); font-size: 11.5px; color: var(--dim); max-width: 24ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.job-note { font-size: 12.5px; line-height: 1.6; color: var(--dim); margin: 10px 0 0; }
.job-note .btn { margin-left: 6px; }

@media (prefers-reduced-motion: reduce) {
  .tab-panel, .toast, .tenant-card, .report-card, .job-card, .dialog-scrim { animation: none; }
}