/* CERTSYNC Anonymiser dashboard.
   Palette and type follow the implementation plan document, so the tool and its
   docs read as one system. Semantic colours (ok/warn/danger) are kept separate
   from the ochre accent so state reads at a glance rather than by reading text. */

:root {
  --ground:      #F4F6F8;
  --surface:     #FFFFFF;
  --surface-alt: #EDF0F4;
  --ink:         #16202C;
  --ink-soft:    #33404F;
  --muted:       #5C6875;
  --rule:        #DCE2E8;
  --rule-strong: #C3CCD6;
  --accent:      #9C5A11;
  --accent-soft: #F5EADB;
  --ok:          #2C6A4E;
  --ok-soft:     #E3F0E9;
  --warn:        #A85A0D;
  --warn-soft:   #FAEEDD;
  --danger:      #9E2F2F;
  --danger-soft: #F7E4E4;
  --code-bg:     #EEF1F5;

  /* System stacks only. This may run in an isolated CERT network where an
     external font request fails, and fetching one would also tell a third party
     that the tool is in use. IBM Plex is preferred where already installed. */
  --f-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
            Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo,
            Consolas, "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0F151C; --surface: #161E27; --surface-alt: #1C2530;
    --ink: #E3E9F0; --ink-soft: #C6D0DB; --muted: #91A0B0;
    --rule: #253039; --rule-strong: #35434F;
    --accent: #D9993F; --accent-soft: #2A2318;
    --ok: #64B98D; --ok-soft: #16281F;
    --warn: #D9993F; --warn-soft: #2A2318;
    --danger: #E08585; --danger-soft: #2C1B1B;
    --code-bg: #1B242E;
  }
}
:root[data-theme="dark"] {
  --ground: #0F151C; --surface: #161E27; --surface-alt: #1C2530;
  --ink: #E3E9F0; --ink-soft: #C6D0DB; --muted: #91A0B0;
  --rule: #253039; --rule-strong: #35434F;
  --accent: #D9993F; --accent-soft: #2A2318;
  --ok: #64B98D; --ok-soft: #16281F;
  --warn: #D9993F; --warn-soft: #2A2318;
  --danger: #E08585; --danger-soft: #2C1B1B;
  --code-bg: #1B242E;
}

* { box-sizing: border-box; }

/* Must outrank the display on .login-wrap / .view, or a hidden section still
   occupies space. This is the cascade collision to watch for here. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- shell ---------- */

.topbar {
  display: flex; align-items: center; gap: 20px;
  padding: 0 22px; height: 56px;
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; z-index: 20;
  flex-wrap: wrap;
}
.brand { font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.brand span { color: var(--accent); }

nav.tabs { display: flex; gap: 2px; margin-left: 8px; }
nav.tabs button {
  background: none; border: 0; cursor: pointer;
  padding: 8px 13px; border-radius: 4px;
  color: var(--muted); font-weight: 500;
}
nav.tabs button:hover { background: var(--surface-alt); color: var(--ink); }
nav.tabs button[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }

.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.conn { font-family: var(--f-mono); font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.conn .led { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.conn.live .led { background: var(--ok); }
.conn.down .led { background: var(--danger); }

main { padding: 24px 22px 64px; max-width: 1280px; margin: 0 auto; }
.view[hidden] { display: none; }

/* ---------- primitives ---------- */

.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 18px 20px;
}
.card + .card { margin-top: 16px; }
.card h2 {
  margin: 0 0 14px; font-size: 12px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.row { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.grow { flex: 1 1 320px; min-width: 0; }

.btn {
  border: 1px solid var(--rule-strong); background: var(--surface);
  border-radius: 4px; padding: 7px 14px; cursor: pointer; font-weight: 500;
}
.btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--primary:hover:not(:disabled) { filter: brightness(1.08); color: #fff; }
.btn--danger:hover:not(:disabled) { border-color: var(--danger); color: var(--danger); }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 3px; border: 1px solid var(--rule-strong); color: var(--muted);
  white-space: nowrap;
}
.pill--ok       { color: var(--ok);     border-color: var(--ok);     background: var(--ok-soft); }
.pill--warn     { color: var(--warn);   border-color: var(--warn);   background: var(--warn-soft); }
.pill--danger   { color: var(--danger); border-color: var(--danger); background: var(--danger-soft); }
.pill--accent   { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

.banner {
  border: 1px solid var(--warn); background: var(--warn-soft); color: var(--warn);
  border-radius: 5px; padding: 12px 16px; margin-bottom: 16px;
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
}
.banner--danger { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); }
.banner .btn { margin-left: auto; }

code, .mono { font-family: var(--f-mono); font-size: .88em; }
.muted { color: var(--muted); }

/* ---------- stat tiles ---------- */

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; }
.tile { background: var(--surface); padding: 14px 16px; }
.tile .label { font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.tile .value { font-family: var(--f-mono); font-size: 25px; font-variant-numeric: tabular-nums; margin-top: 5px; letter-spacing: -.02em; }
.tile .sub { font-size: 11px; color: var(--muted); font-family: var(--f-mono); }
.tile--warn .value { color: var(--warn); }
.tile--danger .value { color: var(--danger); }

/* ---------- key/value ---------- */

dl.kv { display: grid; grid-template-columns: auto 1fr; gap: 7px 18px; margin: 0; }
dl.kv dt { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
dl.kv dd { margin: 0; font-family: var(--f-mono); font-size: 12.5px; word-break: break-word; }

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

.table-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: 6px; background: var(--surface); }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th {
  text-align: left; font-size: 10.5px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted); padding: 10px 14px;
  border-bottom: 1px solid var(--rule-strong); background: var(--surface-alt); white-space: nowrap;
}
td { padding: 9px 14px; border-bottom: 1px solid var(--rule); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr.clickable { cursor: pointer; }
tbody tr.clickable:hover { background: var(--surface-alt); }
td.num, td.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.empty { padding: 34px; text-align: center; color: var(--muted); }

/* ---------- forms ---------- */

.field { display: grid; gap: 5px; margin-bottom: 14px; }
.field label { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.field input[type=text], .field input[type=password], .field input[type=number], .field select, .field textarea {
  background: var(--surface); border: 1px solid var(--rule-strong);
  border-radius: 4px; padding: 8px 11px; width: 100%; font-family: var(--f-mono); font-size: 13px;
}
.field textarea { min-height: 220px; resize: vertical; line-height: 1.5; }
.field .hint { font-size: 11.5px; color: var(--muted); }
.field .prov {
  font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: 1px 6px; border-radius: 3px; border: 1px solid var(--rule-strong); color: var(--muted);
}
.field .prov[data-p="ui"]  { color: var(--accent); border-color: var(--accent); }
.field .prov[data-p="env"] { color: var(--ok); border-color: var(--ok); }
.field-head { display: flex; align-items: center; gap: 8px; }
.checkbox { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.checkbox input { width: 15px; height: 15px; accent-color: var(--accent); }
.form-actions { display: flex; gap: 10px; align-items: center; margin-top: 6px; flex-wrap: wrap; }

/* ---------- logs, code ---------- */

pre.code {
  font-family: var(--f-mono); font-size: 12px; line-height: 1.55;
  background: var(--code-bg); border: 1px solid var(--rule); border-radius: 5px;
  padding: 14px 16px; overflow: auto; max-height: 460px; margin: 0; color: var(--ink-soft);
}
.logstream { font-family: var(--f-mono); font-size: 12px; max-height: 340px; overflow-y: auto; }
.logline { display: grid; grid-template-columns: 74px 62px 1fr; gap: 10px; padding: 3px 0; border-bottom: 1px solid var(--rule); }
.logline .lvl { font-weight: 600; }
.logline .lvl[data-l="ERROR"], .logline .lvl[data-l="CRITICAL"] { color: var(--danger); }
.logline .lvl[data-l="WARNING"] { color: var(--warn); }
.logline .lvl[data-l="INFO"] { color: var(--ok); }
.logline .ts { color: var(--muted); }
.logline .msg { white-space: pre-wrap; word-break: break-word; }

/* ---------- chart ---------- */

.chart { width: 100%; height: 96px; display: block; }
.chart .grid { stroke: var(--rule); stroke-width: 1; }
.chart .area { fill: var(--accent); opacity: .13; }
.chart .line { fill: none; stroke: var(--accent); stroke-width: 1.6; }
.chart .dot  { fill: var(--accent); }
.chart-legend { display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: 10.5px; color: var(--muted); margin-top: 4px; }

/* ---------- modal ---------- */

.modal-backdrop {
  position: fixed; inset: 0; background: rgba(10,16,22,.55);
  display: grid; place-items: center; padding: 24px; z-index: 60;
}
.modal {
  background: var(--surface); border: 1px solid var(--rule-strong); border-radius: 8px;
  max-width: 860px; width: 100%; max-height: 84vh; overflow: auto; padding: 22px 24px;
}
.modal h3 { margin: 0 0 4px; font-size: 16px; }
.modal-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.modal-head .btn { margin-left: auto; }

/* ---------- diff / review ---------- */

.modal--wide { max-width: 1100px; }
.modal nav.tabs button[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }
.modal nav.tabs button:disabled { opacity: .4; cursor: not-allowed; }

table.difftable { table-layout: fixed; }
table.difftable td.path { width: 26%; color: var(--muted); font-size: 11.5px; word-break: break-all; }
table.difftable td.val { width: 37%; white-space: pre-wrap; word-break: break-word; font-size: 12px; }
/* Unchanged rows recede; the point of the view is what moved. */
table.difftable tbody tr td { color: var(--muted); }
/* A replaced value is the thing being reviewed; everything else recedes. */
table.difftable tbody tr.k-changed td { color: var(--ink); }
table.difftable tbody tr.k-changed td.val--from {
  background: var(--danger-soft);
  box-shadow: inset 2px 0 0 var(--danger);
}
table.difftable tbody tr.k-changed td.val--to {
  background: var(--ok-soft);
  box-shadow: inset 2px 0 0 var(--ok);
}
/* The scroll box has to be an inner element: display:block on a td drops it out
   of the table layout and the columns stack instead of sitting side by side. */
table.difftable td.val > .valbox { max-height: 190px; overflow: auto; display: block; }
table.difftable td.path .kind {
  display: inline-block; margin-left: 7px; padding: 0 5px;
  font-size: 9.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid var(--rule-strong); border-radius: 3px; color: var(--muted);
}

/* ---------- login ---------- */

.login-wrap { display: grid; place-items: center; min-height: 78vh; padding: 24px; }
.login { width: 100%; max-width: 360px; }
.login h1 { font-size: 19px; margin: 0 0 4px; }
.login p.sub { margin: 0 0 22px; color: var(--muted); font-size: 13px; }
.login .error { color: var(--danger); font-size: 12.5px; min-height: 18px; margin-top: 4px; }

/* ---------- detection chips ---------- */

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font-family: var(--f-mono); font-size: 11px;
  border: 1px solid var(--rule-strong); border-radius: 3px; padding: 2px 7px; color: var(--ink-soft);
  background: var(--surface-alt); white-space: nowrap;
}
.chip b { color: var(--accent); }