/* ------------------------------------------------------------------------------------------
   IoT ELF Catalog — dark SOC-style theme.
   Tailwind (vendored v2 build) is used ONLY for layout / spacing / typography utilities.
   Every colour lives here, as tokens, and is applied at element level so that no control can
   ever fall back to the browser's white defaults. Contrast of every token pair is asserted by
   tests/test_theme.py (WCAG AA ≥ 4.5:1 for text, ≥ 3:1 for UI borders).
   ------------------------------------------------------------------------------------------ */
:root {
  color-scheme: dark;                 /* native selects, date pickers, scrollbars render dark */

  --bg:            #0b1017;           /* page */
  --panel:         #121a27;           /* cards, nav, table head */
  --panel-2:       #0d131d;           /* inputs, code blocks, hover rows */
  --border:        #253145;
  --border-strong: #55688a;

  --text:          #e6edf3;
  --muted:         #a3b3c7;
  --faint:         #7f90a6;

  --accent:        #22d3ee;           /* cyan — primary actions, active tab */
  --accent-hover:  #67e8f9;
  --on-accent:     #06121a;           /* text on accent backgrounds */
  --link:          #7dd3fc;

  --ok-text:       #6ee7b7;  --ok-bg:     #0f2a22;  --ok-border:     #1f6b52;
  --danger-text:   #fca5a5;  --danger-bg: #2c1416;  --danger-border: #8a3a3f;
  --warn-text:     #fcd34d;  --warn-bg:   #2a2210;  --warn-border:   #8a6d1a;

  --focus:         #22d3ee;

  /* coverage table: subtle row tints (hue carries the meaning) + a bright edge stripe (≥3:1) */
  --row-missing-bg:    #2a1519;  --row-missing-hover: #351a1f;  --row-missing-edge: #e06c75;
  --row-present-bg:    #10231d;  --row-present-hover: #13291f;  --row-present-edge: #34d399;
}

/* ---------- base ---------- */
/* 17px base: every rem below (Tailwind utilities included) scales from here. Body copy, table
   cells, form controls and buttons are all ≥ 1rem; only labels/badges/hints go below. */
html { background: var(--bg); font-size: 17px; }
body { background: var(--bg); color: var(--text); line-height: 1.5; }
/* Page container: centered, capped at 1480px, with a FIXED horizontal gutter (2rem = 34px) on
   every viewport so nav / filters / table never touch the browser edge. */
.wrap { width: 100%; max-width: 1480px; margin-left: auto; margin-right: auto; padding-left: 2rem; padding-right: 2rem; }
@media (max-width: 640px) { .wrap { padding-left: 1rem; padding-right: 1rem; } }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
code, pre, kbd, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

/* ---------- form controls: styled at element level, no class needed ---------- */
input, select, textarea {
  display: block; width: 100%;
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 4px;
  padding: 0.55rem 0.75rem; font: inherit; font-size: 1rem; line-height: 1.35;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.35); }
input::placeholder, textarea::placeholder { color: var(--faint); opacity: 1; }
select option, select optgroup { background: var(--panel-2); color: var(--text); }
textarea { resize: vertical; min-height: 5rem; }
input[type="checkbox"], input[type="radio"] { width: auto; display: inline-block; accent-color: var(--accent); }
input[type="file"] { padding: 0.3rem; cursor: pointer; }
input[type="file"]::file-selector-button {
  background: var(--border-strong); color: var(--text); border: 0; border-radius: 3px;
  padding: 0.3rem 0.7rem; margin-right: 0.75rem; font: inherit; cursor: pointer;
}
input[type="file"]::file-selector-button:hover { background: #6a7f9f; }
input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.75); cursor: pointer; }
/* Chrome autofill would paint a pale yellow/white field with dark text */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--panel-2) inset;
  -webkit-text-fill-color: var(--text);
  caret-color: var(--text);
  border-color: var(--border-strong);
}
input:disabled, select:disabled, textarea:disabled { opacity: 0.55; cursor: not-allowed; }
label.field { display: block; font-size: 1rem; }
label.field > span, .field > span { display: block; color: var(--muted); margin-bottom: 0.35rem; font-size: 0.92rem; }
.hint { font-size: 0.88rem; color: var(--faint); }

/* ---------- buttons ---------- */
button { font: inherit; cursor: pointer; color: inherit; background: none; border: 0; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  border-radius: 4px; padding: 0.6rem 1.1rem; font-weight: 600; font-size: 1rem;
  line-height: 1.2; border: 1px solid transparent; white-space: nowrap;
}
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); text-decoration: none; }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border-strong); }
.btn-ghost:hover { background: var(--panel-2); text-decoration: none; }
.btn-danger { background: transparent; color: var(--danger-text); border-color: var(--danger-border); }
.btn-danger:hover { background: var(--danger-bg); text-decoration: none; }
.btn-sm { padding: 0.4rem 0.8rem; font-size: 0.9rem; }
.btn-block { width: 100%; }

/* ---------- surfaces ---------- */
.panel { background: var(--panel); border: 1px solid var(--border); border-radius: 6px; }
.panel-title { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.codebox { background: var(--panel-2); border: 1px solid var(--border); border-radius: 4px; padding: 0.5rem 0.75rem; color: var(--text); }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.accent { color: var(--accent); }
.divider { border-top: 1px solid var(--border); }

/* ---------- nav ---------- */
.nav { background: var(--panel); border-bottom: 1px solid var(--border); }
.brand { color: var(--text); font-weight: 700; letter-spacing: -0.01em; }
.brand em { color: var(--accent); font-style: normal; }
.navlink { color: var(--muted); font-size: 1.05rem; }
.navlink:hover, .navlink[aria-current="page"] { color: var(--text); text-decoration: none; }
.role { background: var(--panel-2); border: 1px solid var(--border); color: var(--muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.1rem 0.4rem; border-radius: 3px; }

/* ---------- badges / chips / tabs ---------- */
.badge { display: inline-block; border-radius: 3px; padding: 0.15rem 0.6rem; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.03em; border: 1px solid; line-height: 1.5; }
.badge-malicious { color: var(--danger-text); background: var(--danger-bg); border-color: var(--danger-border); }
.badge-benign    { color: var(--ok-text);     background: var(--ok-bg);     border-color: var(--ok-border); }
.badge-unknown   { color: var(--muted);       background: var(--panel-2);   border-color: var(--border-strong); }
.chip { display: inline-block; background: var(--panel-2); border: 1px solid var(--border); color: var(--text); font-size: 0.88rem; padding: 0.15rem 0.6rem; border-radius: 3px; }
.count { display: inline-block; background: var(--bg); color: var(--muted); font-size: 0.82rem; padding: 0 0.45rem; border-radius: 3px; border: 1px solid var(--border); margin-left: 0.35rem; }
.tabs { display: flex; flex-wrap: wrap; gap: 0.25rem; border-bottom: 1px solid var(--border); }
.tab { padding: 0.6rem 1rem; color: var(--muted); font-size: 1.05rem; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab:hover { color: var(--text); text-decoration: none; }
.tab-active { color: var(--text); border-bottom-color: var(--accent); }

/* ---------- alerts ---------- */
.alert { border-radius: 4px; padding: 0.7rem 1rem; font-size: 1rem; border: 1px solid; }
.alert-ok    { background: var(--ok-bg);     border-color: var(--ok-border);     color: var(--ok-text); }
.alert-error { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger-text); }
.alert-warn  { background: var(--warn-bg);   border-color: var(--warn-border);   color: var(--warn-text); }

/* ---------- tables / key-value lists ---------- */
.table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.table th { text-align: left; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); background: var(--panel); padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
.table td { padding: 0.65rem 0.9rem; border-bottom: 1px solid var(--border); vertical-align: top; color: var(--text); }
.table tbody tr:hover td { background: var(--panel-2); }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table td.center, .table th.center { text-align: center; }
.kv { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--border); font-size: 1rem; }
.kv:last-child { border-bottom: 0; }
.kv dt { color: var(--muted); white-space: nowrap; }
.kv dd { text-align: right; word-break: break-all; color: var(--text); }

/* ---------- collapsible sections ---------- */
details.panel > summary { padding: 0.9rem 1.1rem; cursor: pointer; list-style: none; display: flex; align-items: center; gap: 0.5rem; }
details.panel > summary::-webkit-details-marker { display: none; }
details.panel > summary::before { content: "▸"; color: var(--muted); font-size: 0.9rem; }
details.panel[open] > summary::before { content: "▾"; }
details.panel > summary:hover { background: var(--panel-2); border-radius: 6px 6px 0 0; }
details.panel > .body { border-top: 1px solid var(--border); }

/* ---------- coverage table ---------- */
.table tbody tr.row-missing td { background: var(--row-missing-bg); }
.table tbody tr.row-present td { background: var(--row-present-bg); }
.table tbody tr.row-missing:hover td { background: var(--row-missing-hover); }
.table tbody tr.row-present:hover td { background: var(--row-present-hover); }
.table tbody tr.row-missing td:first-child { box-shadow: inset 3px 0 0 var(--row-missing-edge); }
.table tbody tr.row-present td:first-child { box-shadow: inset 3px 0 0 var(--row-present-edge); }
.count-zero { color: var(--danger-text); font-weight: 600; }
.chip-ok { color: var(--ok-text); border-color: var(--ok-border); background: var(--ok-bg); }
.chip-missing { color: var(--danger-text); border-color: var(--danger-border); background: var(--danger-bg); }
.legend-swatch { display: inline-block; width: 0.85rem; height: 0.85rem; border-radius: 2px; vertical-align: -0.1rem; margin-right: 0.35rem; }
.legend-swatch.missing { background: var(--row-missing-bg); box-shadow: inset 3px 0 0 var(--row-missing-edge); }
.legend-swatch.present { background: var(--row-present-bg); box-shadow: inset 3px 0 0 var(--row-present-edge); }

/* ---------- misc ---------- */
.list-plain { list-style: none; padding: 0; margin: 0; }
.scroll-y { max-height: 20rem; overflow: auto; }