:root {
  --bg: #f8fafc;
  --panel: #ffffff;
  --ink: #0f172a;
  --ink-soft: #475569;
  --line: #e2e8f0;
  --line-strong: #cbd5e1;
  --accent: #1e40af;
  --accent-strong: #1e3a8a;
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.06);
  --crit: #7f1d1d;
  --high: #b91c1c;
  --med: #b45309;
  --low: #1d4ed8;
  --info: #334155;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 28px;
  background: var(--ink);
  color: #fff;
  box-shadow: var(--shadow);
}
.topbar h1 {
  margin: 0;
  font-size: 18px;
  /* Tight, explicit line-height so the title's bounding box matches its
     visual height -- otherwise flex 'align-items: center' picks up the
     inherited 1.45 line-height and the title looks lifted vs the logo. */
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.2px;
}
.topbar .tag {
  margin: 2px 0 0;
  font-size: 12px;
  color: #cbd5e1;
}
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
}
.brand-logo {
  height: 32px;
  width: 32px;
  /* Square mark with a transparent background -- give it a small light
     pillow so the black "E" remains legible on the dark topbar in both
     themes. Symmetric padding keeps the glyph visually centred. */
  display: block;
  background: #fff;
  padding: 4px;
  border-radius: 6px;
  object-fit: contain;
}
.brand-divider {
  width: 1px;
  height: 22px;
  background: #334155;
}
.topbar-meta {
  font-size: 12px;
  color: #94a3b8;
}
.topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.auth-user {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: #cbd5e1;
}
.auth-user-label b {
  color: #fff;
  font-weight: 600;
}
.auth-signout {
  color: #e2e8f0 !important;
  border-color: #475569 !important;
}
/* ------------------------- Sign-in (auth gate) -------------------------
 * Full-bleed centered card shown when the user isn't authenticated.
 * The .topbar stays visible (brand chrome), but the rest of the app
 * (#app-shell) is hidden, so this card is what the user sees.
 *
 * HTML's `hidden` attribute must win over `display: flex` below. Without
 * `!important` here the auth-gate would stay visible alongside the app
 * shell whenever JS toggled `hidden`.
 */
[hidden] { display: none !important; }

.auth-gate {
  min-height: calc(100vh - 160px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background:
    radial-gradient(900px 500px at 12% -10%, rgba(34, 197, 94, 0.10), transparent 60%),
    radial-gradient(900px 500px at 100% 110%, rgba(37, 99, 235, 0.10), transparent 60%);
}
[data-theme="dark"] .auth-gate {
  background:
    radial-gradient(900px 500px at 12% -10%, rgba(34, 197, 94, 0.16), transparent 60%),
    radial-gradient(900px 500px at 100% 110%, rgba(37, 99, 235, 0.16), transparent 60%);
}
.auth-card {
  width: 100%;
  max-width: 440px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.10),
              0 2px 8px rgba(15, 23, 42, 0.05);
  padding: 44px 40px 32px;
  text-align: center;
}
[data-theme="dark"] .auth-card {
  box-shadow: 0 28px 64px rgba(0, 0, 0, 0.55),
              0 4px 14px rgba(0, 0, 0, 0.35);
}
.auth-card-logo {
  width: 68px;
  height: 68px;
  display: block;
  margin: 0 auto 22px;
  background: #fff;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid var(--line);
  object-fit: contain;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}
.auth-card-title {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.auth-card-sub {
  margin: 0 0 24px;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.55;
}
.auth-card-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 8px 0 12px;
  text-align: left;
}
.auth-card-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.auth-card-input {
  width: 100%;
  padding: 12px 14px;
  font-size: 15px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.auth-card-input:focus {
  border-color: var(--accent, #2563eb);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}
.auth-card-input[aria-invalid="true"] {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}
.auth-card-error {
  margin: -2px 0 2px;
  font-size: 13px;
  color: #b91c1c;
  min-height: 1em;
}
.auth-card-btn[disabled] {
  opacity: 0.65;
  cursor: progress;
}

.auth-card-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 12px 20px;
  background: #2f2f2f;
  color: #fff !important;
  border: 1px solid #2f2f2f;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  margin-top: 6px;
  transition: background 120ms ease, transform 120ms ease,
              box-shadow 120ms ease, border-color 120ms ease;
}
.auth-card-btn:hover {
  background: #1f1f1f;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.12);
}
.auth-card-btn:active {
  transform: translateY(0);
}
.auth-card-btn .ms-logo,
.auth-card-btn .google-logo {
  flex-shrink: 0;
}
/* Google-branded button. Override the white text from .auth-card-btn so the
 * label is readable on the light Google surface. */
.auth-card-btn-google {
  background: #fff;
  color: #1f2937 !important;
  border-color: #dadce0;
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.05);
}
.auth-card-btn-google:hover {
  background: #f8f9fa;
  border-color: #cbd1d6;
  box-shadow: 0 3px 10px rgba(60, 64, 67, 0.10);
}
[data-theme="dark"] .auth-card-btn-google {
  background: #fff;
  color: #1f2937 !important;
  border-color: #e5e7eb;
}
[data-theme="dark"] .auth-card-btn-google:hover {
  background: #f1f5f9;
}

.auth-card-banner {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  text-align: left;
  margin: 0 0 20px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #7f1d1d;
}
[data-theme="dark"] .auth-card-banner {
  background: rgba(239, 68, 68, 0.10);
  border-color: rgba(239, 68, 68, 0.35);
  color: #fecaca;
}
.auth-card-banner-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #fee2e2;
  color: #b91c1c;
}
[data-theme="dark"] .auth-card-banner-icon {
  background: rgba(239, 68, 68, 0.20);
  color: #fecaca;
}
.auth-card-banner-body { min-width: 0; flex: 1; }
.auth-card-banner-title {
  margin: 0 0 4px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.auth-card-banner-msg {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}
.auth-card-banner-msg a {
  color: inherit;
  text-decoration: underline;
  font-weight: 600;
}

.auth-card-divider {
  position: relative;
  margin: 22px 0 16px;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.auth-card-divider::before,
.auth-card-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: calc(50% - 80px);
  height: 1px;
  background: var(--line);
}
.auth-card-divider::before { left: 0; }
.auth-card-divider::after  { right: 0; }
.auth-card-divider span {
  padding: 0 10px;
}

.auth-card-foot {
  margin: 8px 0 0;
  color: var(--ink-soft);
  font-size: 12.5px;
  line-height: 1.55;
}
.auth-card-foot a {
  color: var(--accent, #2563eb);
  text-decoration: none;
}
.auth-card-foot a:hover {
  text-decoration: underline;
}

.tabs {
  display: flex;
  gap: 4px;
  /* Match the wider main shell so the tab strip aligns with the panels. */
  max-width: min(1680px, calc(100vw - 32px));
  margin: 18px auto 0;
  padding: 0 24px;
  border-bottom: 1px solid var(--line);
}
.tab {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  padding: 10px 16px;
  margin-bottom: -1px;
  font: 600 13px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--ink-soft);
  cursor: pointer;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 10px 10px 0 0;
}
.tab:hover { color: var(--ink); background: rgba(15, 23, 42, 0.04); }
.tab.active {
  background: var(--panel);
  color: var(--ink);
  border-color: var(--line);
  border-bottom-color: var(--panel);
}
.tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--accent);
}
.tab-badge {
  background: var(--crit);
  color: #fff;
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 999px;
  font-weight: 700;
}

.tab-panel { display: none; }
.tab-panel.active { display: grid; gap: 18px; }

main {
  /* Use ~1680px on big screens but always leave a 16px gutter on each side,
     so the wide misconfig table (7 columns + long GCP resource URLs) has
     room to breathe without becoming a full-bleed strip on ultrawide
     monitors. The narrower scan tab still looks fine because its inner
     content is constrained to readable widths. */
  max-width: min(1680px, calc(100vw - 32px));
  margin: 18px auto;
  padding: 0 24px;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px 22px;
  box-shadow: var(--shadow);
}
.panel h2 {
  margin: 0 0 14px;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}

.form-grid {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 12px 18px;
  align-items: center;
}
.form-grid label { font-size: 13px; color: var(--ink-soft); }
.form-grid select,
.form-grid input[type="text"] {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #fff;
  font: inherit;
}

/* ---------- "Run a scan" header + account picker ---------- */
.run-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.run-head h2 { margin: 0; }
.run-actions { display: flex; gap: 8px; }

.run-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.run-row .opt { margin-right: auto; }

.field-label {
  display: block;
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 8px;
}

/* Searchable combobox for target account */
.combobox {
  position: relative;
  max-width: 640px;
}
.combobox-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.combobox-trigger:hover { border-color: var(--accent); }
.combobox.open .combobox-trigger {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.12);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.trigger-text {
  display: grid;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.trigger-name {
  font-weight: 600;
  color: var(--ink);
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.trigger-scope {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.trigger-scope:empty { display: none; }
.trigger-chevron {
  color: var(--ink-soft);
  font-size: 12px;
  flex-shrink: 0;
}
.combobox.open .trigger-chevron { transform: rotate(180deg); }

.combobox-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 50;
  background: #fff;
  border: 1px solid var(--accent);
  border-top: none;
  border-radius: 0 0 10px 10px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.combobox-search-wrap {
  position: relative;
  border-bottom: 1px solid var(--line);
  background: #f8fafc;
}
.combobox-search-wrap input[type="search"] {
  width: 100%;
  padding: 10px 88px 10px 12px;
  border: none;
  background: transparent;
  font: inherit;
  outline: none;
}
.combobox-count {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: var(--ink-soft);
  pointer-events: none;
}
.combobox-options {
  max-height: 280px;
  overflow-y: auto;
}
.combobox-group-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  background: #f8fafc;
  padding: 7px 12px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 1;
}
.combobox-option {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.combobox-option:last-child { border-bottom: none; }
.combobox-option:hover,
.combobox-option.focused { background: #f8fafc; }
.combobox-option.selected {
  background: #eef2ff;
  box-shadow: inset 3px 0 0 var(--accent);
}
.combobox-option .name {
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
}
.combobox-option .pid {
  margin-top: 2px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11.5px;
  color: var(--ink-soft);
}
.combobox-option .tag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: 999px;
}
.combobox-option .tag.manual { background: #eef2ff; color: #3730a3; }
.combobox-option .tag.auto   { background: #ecfeff; color: #0e7490; }
.combobox-empty {
  padding: 14px;
  text-align: center;
  color: var(--ink-soft);
  font-size: 13px;
}
.opts {
  display: flex; flex-wrap: wrap; gap: 14px;
}
.opt {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--ink);
}
.btn {
  display: inline-block;
  padding: 9px 14px;
  border-radius: 8px;
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  text-align: center;
}
.btn:hover { background: #f1f5f9; }
.btn.primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent-strong);
}
.btn.primary:hover { background: var(--accent-strong); }
.btn.ghost { background: transparent; }
.btn[disabled] { opacity: 0.5; pointer-events: none; }
.hint {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--ink-soft);
}

.status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.kv {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 8px;
  padding: 3px 0;
  font-size: 13px;
}
.kv span { color: var(--ink-soft); }
.kv b { font-weight: 600; word-break: break-all; }

.spinner {
  width: 26px; height: 26px;
  border: 3px solid #cbd5e1;
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
  padding: 10px 12px;
  border-radius: 8px;
  margin-top: 12px;
  font-size: 13px;
  white-space: pre-wrap;
}

.notice {
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
  padding: 10px 12px;
  border-radius: 8px;
  margin: 0 0 14px;
  font-size: 13px;
}
.notice b { color: #78350f; }

/* Project discovery coverage panel ---------------------------------------- */
.discovery-stats {
  margin: 0 0 14px;
  padding: 12px 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  font-size: 13px;
  color: #334155;
}
.discovery-stats-head {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline;
  margin-bottom: 8px;
}
.discovery-stats-head b { color: #0f172a; }
.discovery-stats .muted { color: #64748b; font-weight: 400; }
.discovery-row {
  padding: 8px 0;
  border-top: 1px solid #e2e8f0;
}
.discovery-row:first-of-type { border-top: 0; padding-top: 4px; }
.discovery-row-head {
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 4px;
}
.discovery-badges {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid transparent;
}
.badge-neutral {
  background: #e2e8f0; color: #0f172a; border-color: #cbd5e1;
}
.badge-source {
  background: #ecfeff; color: #0e7490; border-color: #a5f3fc;
}
.badge-warn {
  background: #fef3c7; color: #92400e; border-color: #fde68a;
}
.discovery-errors-inline {
  margin-top: 6px;
  color: #b91c1c;
}
.discovery-errors-inline .error-line {
  padding: 4px 8px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
  margin-top: 4px;
}
.discovery-warnings-inline {
  margin-top: 6px;
  color: #92400e;
}
.discovery-warnings-inline .warn-line {
  padding: 4px 8px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 6px;
  margin-top: 4px;
  font-size: 12px;
}

.summary-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
  gap: 16px;
}
.summary-head h2 { margin: 0; }
.dl-buttons { display: flex; gap: 8px; flex-wrap: wrap; }

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.stat {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
}
.stat .label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.stat .value {
  font-size: 22px;
  font-weight: 700;
  margin-top: 2px;
}
.stat.crit .value { color: var(--crit); }
.stat.high .value { color: var(--high); }
.stat.med .value { color: var(--med); }
.stat.low .value { color: var(--low); }

.filters {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.filters input[type="search"],
.filters select {
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  font: inherit;
}
.filters input[type="search"] { min-width: 260px; }
.counter {
  margin-left: auto;
  color: var(--ink-soft);
  font-size: 12px;
}

.table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
th, td {
  text-align: left;
  vertical-align: top;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
}
th {
  position: sticky;
  top: 0;
  background: #0f172a;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
th[data-sort]:hover { background: #1e293b; }
tr:last-child td { border-bottom: none; }
tbody tr:nth-child(even) { background: #f8fafc; }
td.resource, td.recommendation { word-break: break-word; }

/* Misconfig table column hints. We don't pin every column to a fixed pixel
   value (the browser does a good job once Resource/Recommendation have
   room to wrap); we just nudge the narrow ones smaller so the wide ones
   get the leftover space on the now-wider 1680px canvas. */
#m-issues th:nth-child(1) { width: 88px; }     /* Severity   */
#m-issues th:nth-child(2) { width: 200px; }    /* Account    */
#m-issues th:nth-child(5) { width: 200px; }    /* Check id   */
#m-issues th:nth-child(7) { width: 220px; }    /* User Review */
#m-issues td.resource,
#m-issues td.recommendation { min-width: 240px; }
td .check-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--ink-soft); }

.sev-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.sev-CRITICAL { background: var(--crit); }
.sev-HIGH { background: var(--high); }
.sev-MEDIUM { background: var(--med); }
.sev-LOW { background: var(--low); }
.sev-INFO { background: var(--info); }

/* ====================== User Review (triage) ============================
   Three-decision triage model.
   - Acknowledged  -> slate/blue (neutral, "seen, will revisit")
   - Not a Risk    -> green      (genuinely safe / false positive)
   - Risk Accepted -> amber      (still risk, business-owned)
   No strikethrough -- reviewed findings are still real, just owned.
   Severity badge keeps its colour so CRITICAL still reads CRITICAL.
*/

/* --- decision palette tokens --- */
:root {
  --dec-ack-bg: #e0e7ff;      /* indigo-100 */
  --dec-ack-fg: #3730a3;      /* indigo-800 */
  --dec-ack-bd: #6366f1;      /* indigo-500 */
  --dec-nar-bg: #dcfce7;      /* green-100 */
  --dec-nar-fg: #166534;      /* green-800 */
  --dec-nar-bd: #16a34a;      /* green-600 */
  --dec-ra-bg:  #fef3c7;      /* amber-100 */
  --dec-ra-fg:  #78350f;      /* amber-900 */
  --dec-ra-bd:  #d97706;      /* amber-600 */
}

/* --- User Review column ------------------------------------------------ */
.col-review {
  width: 220px;
  vertical-align: middle;
}
th.col-review { cursor: default; }

/* CTA pill shown when no review exists yet. */
.btn-pill.review-cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 92px;
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px dashed var(--line-strong);
  background: #fff;
  color: var(--accent);
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.btn-pill.review-cta:hover {
  background: #eff6ff;
  border-color: var(--accent);
  border-style: solid;
}

/* When a review exists, the column shows a chip + note preview.
   The whole thing is a button so click-anywhere edits the review. */
.review-chip-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  width: 100%;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.review-chip-btn:hover { background: rgba(15,23,42,0.04); border-color: var(--line); }

.review-note-preview {
  font-size: 11.5px;
  color: var(--ink-soft);
  line-height: 1.35;
  font-style: italic;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The decision badge -- reused inside the table cell and in the modal. */
.decision-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.5;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.decision-badge.dec-acknowledged  { background: var(--dec-ack-bg); color: var(--dec-ack-fg); border-color: var(--dec-ack-bd); }
.decision-badge.dec-not_a_risk    { background: var(--dec-nar-bg); color: var(--dec-nar-fg); border-color: var(--dec-nar-bd); }
.decision-badge.dec-risk_accepted { background: var(--dec-ra-bg);  color: var(--dec-ra-fg);  border-color: var(--dec-ra-bd); }

/* --- row tinting per decision ----------------------------------------- */
tbody tr.row-reviewed td       { color: var(--ink); }
tbody tr.row-acknowledged td   { background: #eef2ff !important; }   /* indigo-50 */
tbody tr.row-not_a_risk td     { background: #f0fdf4 !important; }   /* green-50  */
tbody tr.row-risk_accepted td  { background: #fffbeb !important; }   /* amber-50  */

tbody tr.row-acknowledged   td:first-child { box-shadow: inset 4px 0 0 var(--dec-ack-bd); }
tbody tr.row-not_a_risk     td:first-child { box-shadow: inset 4px 0 0 var(--dec-nar-bd); }
tbody tr.row-risk_accepted  td:first-child { box-shadow: inset 4px 0 0 var(--dec-ra-bd); }

tbody tr.row-reviewed .check-id { opacity: 0.85; }
tbody tr.row-reviewed .sev-badge { outline: 1px dashed currentColor; outline-offset: 1px; opacity: 0.92; }

/* --- summary tiles for each decision --------------------------------- */
.stat-tile.dec-ack { border-left-color: var(--dec-ack-bd); background: #eef2ff; }
.stat-tile.dec-ack .label, .stat-tile.dec-ack .value { color: var(--dec-ack-fg); }
.stat-tile.dec-nar { border-left-color: var(--dec-nar-bd); background: #f0fdf4; }
.stat-tile.dec-nar .label, .stat-tile.dec-nar .value { color: var(--dec-nar-fg); }
.stat-tile.dec-ra  { border-left-color: var(--dec-ra-bd);  background: #fffbeb; }
.stat-tile.dec-ra  .label, .stat-tile.dec-ra  .value { color: var(--dec-ra-fg); }

/* ============================ Pagination =============================
   Shared by the Misconfigurations and Assets tables. The bar sits below
   the table so it doesn't compete with the filter row for the eye, but
   stays visible at all reasonable viewport heights without scrolling. */
.pagination {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 13px;
}
.pag-size {
  display: flex; align-items: center; gap: 8px;
  color: var(--muted);
}
.pag-size select {
  padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px;
  background: #fff; font: inherit;
}
.pag-controls {
  display: flex; align-items: center; gap: 6px;
}
.pag-info {
  min-width: 140px; text-align: center;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.btn.btn-sm {
  padding: 4px 10px; min-width: 28px; font-size: 14px; line-height: 1;
}
.btn.btn-sm:disabled {
  opacity: 0.4; cursor: not-allowed;
}

/* ====================== Assets tab on-demand scan ===================== */

#a-scan-panel .run-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  margin-top: 12px;
}

/* Scan-all banner: visually distinct so the bulk action is obvious. */
.scan-all-row {
  background: linear-gradient(135deg, #eef2ff 0%, #eff6ff 100%);
  border: 1px solid #c7d2fe;
  border-radius: 8px;
  padding: 12px 14px;
  margin-top: 14px;
}
.scan-all-text { display: flex; flex-direction: column; flex: 1; gap: 2px; }
.scan-all-text b { color: #312e81; font-size: 14px; }
.scan-all-text .dim { color: #4338ca; font-size: 12.5px; }

/* "or pick one account" divider with horizontal rule on each side. */
.divider-or {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0 10px;
  color: var(--muted); font-size: 12px; text-transform: uppercase;
  letter-spacing: 0.06em;
}
.divider-or::before, .divider-or::after {
  content: ""; flex: 1; height: 1px; background: var(--border);
}

.reload-stamp {
  color: var(--muted); font-size: 12px; font-weight: 500;
  margin-left: 4px;
}

/* Per-job mini list rendered while a bulk scan is in flight. Compact
   table-like layout so the user can spot stragglers. */
.bulk-mini-list {
  margin-top: 10px;
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fafbfc;
}
.bulk-mini-row {
  display: grid;
  grid-template-columns: 1fr 1.2fr 60px;
  gap: 10px;
  padding: 6px 10px;
  font-size: 12.5px;
  border-bottom: 1px solid var(--border);
  align-items: baseline;
}
.bulk-mini-row:last-child { border-bottom: none; }
.bulk-mini-row .bmr-name {
  font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bulk-mini-row .bmr-phase {
  color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bulk-mini-row .bmr-pct {
  text-align: right; font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.bulk-mini-row[data-status="succeeded"] { background: #f0fdf4; }
.bulk-mini-row[data-status="succeeded"] .bmr-pct { color: #166534; }
.bulk-mini-row[data-status="failed"] { background: #fef2f2; }
.bulk-mini-row[data-status="failed"] .bmr-pct { color: #b91c1c; }
.bulk-mini-row[data-status="running"] .bmr-name { color: #1d4ed8; }
.scan-progress { margin-top: 14px; }
.scan-progress-head,
.scan-progress-foot {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: 13px;
}
.scan-progress-foot { margin-top: 6px; color: var(--muted); }
.scan-phase { font-weight: 600; color: var(--ink); }
.scan-elapsed,
.scan-progress-foot .dim { color: var(--muted); font-variant-numeric: tabular-nums; }

.progress-bar {
  position: relative;
  height: 10px;
  margin-top: 6px;
  border-radius: 999px;
  background: #e2e8f0;        /* slate-200 */
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), #4f46e5);
  transition: width 0.4s ease-out;
  /* Subtle moving stripes hint that work is in progress even while a
     phase holds at the same percentage (e.g. listing 10k assets). */
  background-image:
    linear-gradient(90deg, var(--accent), #4f46e5),
    repeating-linear-gradient(45deg,
      rgba(255,255,255,0.18) 0 8px,
      rgba(255,255,255,0) 8px 16px);
  background-blend-mode: overlay;
}
.progress-bar-fill[data-status="succeeded"] {
  background: #16a34a; background-image: none;
}
.progress-bar-fill[data-status="failed"] {
  background: #dc2626; background-image: none;
}

.notice.success {
  background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534;
  padding: 10px 12px; border-radius: 8px; margin-top: 12px;
}

/* ============================== Assets tab ============================ */
.stat-tile.asset-accounts {
  border-left-color: #0ea5e9;             /* sky-500 */
  background: #f0f9ff;                    /* sky-50  */
}
.stat-tile.asset-accounts .label,
.stat-tile.asset-accounts .value { color: #075985; }   /* sky-800 */

.stat-tile.asset-vm     { border-left-color: var(--accent); }
.stat-tile.asset-sql    { border-left-color: #7c3aed; }       /* violet-600 */
.stat-tile.asset-bucket { border-left-color: #f59e0b; }       /* amber-500 */
.stat-tile.asset-gke    { border-left-color: #0ea5e9; }       /* sky-500 */
.stat-tile.asset-on   { border-left-color: #16a34a; background: #f0fdf4; }
.stat-tile.asset-on   .label, .stat-tile.asset-on .value { color: #166534; }
.stat-tile.asset-off  { border-left-color: #94a3b8; background: #f1f5f9; }
.stat-tile.asset-off  .label, .stat-tile.asset-off .value { color: #475569; }

/* Asset Report compute tiles. The three "totals" tiles use a distinct
   palette so they don't visually duplicate the VM/SQL counts above. */
.stat-tile.compute-cpu  { border-left-color: #2563eb; background: #eff6ff; }
.stat-tile.compute-cpu  .label, .stat-tile.compute-cpu .value { color: #1e3a8a; }
.stat-tile.compute-mem  { border-left-color: #d97706; background: #fffbeb; }
.stat-tile.compute-mem  .label, .stat-tile.compute-mem .value { color: #92400e; }
.stat-tile.compute-disk { border-left-color: #0d9488; background: #ecfdf5; }
.stat-tile.compute-disk .label, .stat-tile.compute-disk .value { color: #115e59; }

/* Generic helpers (used by Asset Report and elsewhere). */
.muted { color: var(--ink-soft); }
.small { font-size: 11px; }

/* ============================== Asset Report ========================== */
.panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.panel-head h2 { margin: 0 0 4px; }
.panel-head .muted { margin: 0; }

.report-scope {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: flex-end;
}
.report-scope-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.report-scope label { font-size: 12px; color: var(--ink-soft); }
.report-scope select {
  padding: 7px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #fff;
  min-width: 220px;
  font: inherit;
}
#r-account { min-width: 280px; }

.report-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 1200px) {
  .report-grid { grid-template-columns: 1fr; }
}

.report-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Region x Family table is wider than the others -- give it the full row
   inside the 2-column .report-grid so columns don't get squashed. */
.report-card-wide { grid-column: 1 / -1; }
.report-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.report-card-head h3 {
  margin: 0;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.report-card .table-wrap { max-height: 420px; }

.report-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.report-table th,
.report-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}
.report-table th {
  background: #f8fafc;
  font-weight: 600;
  color: var(--ink-soft);
  position: sticky;
  top: 0;
  z-index: 1;
  cursor: default;
  white-space: nowrap;
}
.report-table td.num,
.report-table th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.report-table tbody tr:hover { background: #f8fafc; }
.report-table .small { font-size: 11px; }

/* Region x Family grouping. The first row of each new region group gets a
   thicker divider above it, and continuation rows show a centred bullet
   marker so the eye reads them as part of the previous region rather than
   as a missing value. */
.report-table tr.region-row.region-group-start td {
  border-top: 1.5px solid var(--line-strong);
}
.report-table tr.region-row:first-child.region-group-start td {
  border-top: none;
}
.report-table td.region-cell {
  white-space: nowrap;
  color: var(--ink-soft);
}
.report-table tr.region-row.region-group-start td.region-cell {
  color: var(--ink);
  font-weight: 600;
}
.report-table .region-repeat {
  display: inline-block;
  width: 100%;
  text-align: center;
  color: #cbd5e1;          /* slate-300 */
  letter-spacing: 0.2em;
}
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* Status pills strip for the Asset Report "By status" card. */
.status-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  padding: 4px 0;
}
.status-pills .status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
}
.status-pills .status-pill b {
  font-variant-numeric: tabular-nums;
}

/* Kind cell badge -- distinguishes a Compute VM from a Cloud SQL row at
   a glance. We deliberately don't use severity colors here so it doesn't
   blur with the misconfig table palette. */
.kind-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em;
}
.kind-badge.kind-vm  { background: #dbeafe; color: #1e3a8a; }   /* blue */
.kind-badge.kind-sql { background: #ede9fe; color: #5b21b6; }   /* violet */

/* Status pill in the Assets table. Three buckets so RUNNING/RUNNABLE,
   TERMINATED/STOPPED and everything-else each get a distinct colour. */
.status-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em;
}
.status-pill.stat-ok    { background: #dcfce7; color: #166534; }
.status-pill.stat-off   { background: #f1f5f9; color: #475569; }
.status-pill.stat-other { background: #fef3c7; color: #78350f; }
.status-pill.stat-bad   { background: #fee2e2; color: #991b1b; }

/* ============================ Assets sub-tabs ============================
 * Compact secondary navigation that sits INSIDE the Assets tab to switch
 * between Compute & Database / GCS Buckets / GKE Clusters. The visual
 * idiom is a row of pill-shaped buttons with the active one filled. */
.subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px;
  margin: 0 0 14px 0;
  background: var(--panel-soft, #f8fafc);
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 10px;
  width: fit-content;
}
.subtab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink-soft, #64748b);
  font: inherit;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 7px;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.subtab:hover {
  background: var(--panel, #fff);
  color: var(--ink, #0f172a);
}
.subtab.active {
  background: var(--panel, #fff);
  color: var(--ink, #0f172a);
  border-color: var(--line, #e2e8f0);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
}
.subtab-icon {
  font-size: 14px;
  opacity: .8;
}
.subtab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  padding: 0 6px;
  height: 18px;
  margin-left: 2px;
  border-radius: 9px;
  background: var(--line, #e2e8f0);
  color: var(--ink, #0f172a);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}
.subtab.active .subtab-count {
  background: var(--accent, #2563eb);
  color: #fff;
}
.subtab-count:empty { display: none; }

.sub-panel { display: none; }
.sub-panel.active { display: block; }

/* Inline checkmark / cross used in the Buckets table for boolean columns
 * (UBLA, versioning). Small but big enough to scan visually. */
.check-yes { color: #16a34a; font-weight: 700; }   /* green-600 */
.check-no  { color: #cbd5e1; font-weight: 700; }   /* slate-300 */
td.center, th.center { text-align: center; }

/* ============================ Sortable tables ============================
 * Every table that opts in by adding ``.sortable-table`` plus
 * ``data-sort="<field>"`` to its <th>s becomes click-to-sort. We reserve
 * a 14px gutter on the right of each header so the arrow indicator never
 * pushes the label off-center. */
.sortable-table th.sortable {
  cursor: pointer;
  position: relative;
  padding-right: 22px;            /* room for the arrow */
  user-select: none;
}
.sortable-table th.sortable:hover {
  background: var(--panel-soft, #f1f5f9);
  color: var(--ink, #0f172a);
}
.sortable-table th.sortable:focus-visible {
  outline: 2px solid var(--accent, #2563eb);
  outline-offset: -2px;
}
.sortable-table th.sortable::after {
  /* Inactive arrows: faint up-down chevron so the user knows the column
   * is sortable. ``opacity: .35`` keeps them in the visual background. */
  content: "\2195";               /* UP DOWN ARROW */
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  opacity: .35;
  color: var(--ink-soft, #64748b);
  transition: opacity 120ms ease, color 120ms ease, transform 120ms ease;
}
.sortable-table th.sort-asc::after {
  content: "\25B2";               /* BLACK UP-POINTING TRIANGLE */
  opacity: 1;
  color: var(--accent, #2563eb);
}
.sortable-table th.sort-desc::after {
  content: "\25BC";               /* BLACK DOWN-POINTING TRIANGLE */
  opacity: 1;
  color: var(--accent, #2563eb);
}

:root[data-theme="dark"] .sortable-table th.sortable:hover {
  background: #182238;
  color: #e2e8f0;
}

/* Monospace for project ids / machine types -- aligns the columns and
   makes long ids easier to scan. */
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; }

/* Family badge -- coloured pill so the eye can spot e2/n2/c2 at a glance.
   Unknown / unmatched families just fall through to a neutral grey. */
.family-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  background: #e5e7eb; color: #1f2937;
}
.family-badge.fam-e2   { background: #dbeafe; color: #1e3a8a; }   /* blue */
.family-badge.fam-n1   { background: #fef9c3; color: #713f12; }   /* amber */
.family-badge.fam-n2   { background: #d1fae5; color: #065f46; }   /* emerald */
.family-badge.fam-n2d  { background: #ccfbf1; color: #134e4a; }   /* teal */
.family-badge.fam-c2,
.family-badge.fam-c2d  { background: #ffe4e6; color: #9f1239; }   /* rose */
.family-badge.fam-t2a,
.family-badge.fam-t2d  { background: #ede9fe; color: #4c1d95; }   /* violet */
.family-badge.fam-m1,
.family-badge.fam-m2   { background: #fae8ff; color: #6b21a8; }
.family-badge.fam-a2,
.family-badge.fam-g2   { background: #fff1f2; color: #9f1239; }
.family-badge.fam-custom    { background: #fee2e2; color: #991b1b; }
.family-badge.fam-legacy    { background: #f1f5f9; color: #475569; }
.family-badge.fam-db-custom { background: #fce7f3; color: #831843; }
.family-badge.fam-db-n1,
.family-badge.fam-db-n2     { background: #fef3c7; color: #78350f; }

/* Right-align numeric columns (vCPU, memory, disk). Columns 8/9/10 are
   numeric after we split Region/Zone and added a Family column. */
#a-assets td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
#a-assets th:nth-child(8),
#a-assets th:nth-child(9),
#a-assets th:nth-child(10) { text-align: right; }

/* Column width hints for the new 11-column layout:
   1 Kind | 2 Project | 3 Name | 4 Region | 5 Zone | 6 Family
   | 7 Machine | 8 vCPU | 9 Memory | 10 Disk | 11 Status                 */
#a-assets th:nth-child(1)  { width: 92px; }   /* Kind */
#a-assets th:nth-child(2)  { width: 240px; }  /* Project (name + id) */
#a-assets th:nth-child(4)  { width: 130px; }  /* Region */
#a-assets th:nth-child(5)  { width: 130px; }  /* Zone */
#a-assets th:nth-child(6)  { width: 96px; }   /* Family */
#a-assets th:nth-child(8),
#a-assets th:nth-child(9),
#a-assets th:nth-child(10) { width: 84px; }   /* numeric */
#a-assets th:nth-child(11) { width: 116px; }  /* Status */

/* ============================ Review modal ============================ */
body.modal-open { overflow: hidden; }

.modal {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
}
.modal[hidden] { display: none; }
.modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
}
.modal-card {
  position: relative;
  width: min(640px, 92vw);
  max-height: 90vh;
  display: flex; flex-direction: column;
  background: var(--panel);
  border-radius: 14px;
  box-shadow: 0 24px 48px rgba(15,23,42,0.32);
  overflow: hidden;
  animation: modalIn .12s ease-out;
}
@keyframes modalIn {
  from { transform: translateY(8px) scale(.985); opacity: 0; }
  to   { transform: none;                          opacity: 1; }
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
}
.modal-head h2 { margin: 0; font-size: 16px; font-weight: 700; }
.modal-x {
  appearance: none; background: none; border: 0;
  font-size: 24px; line-height: 1;
  color: var(--ink-soft); cursor: pointer;
  padding: 0 4px;
}
.modal-x:hover { color: var(--ink); }
.modal-body {
  padding: 16px 20px 8px;
  overflow-y: auto;
}
.modal-foot .btn-clear-review {
  color: #b91c1c;              /* red-700 */
  border-color: #fca5a5;       /* red-300 */
  background: #fff;
}
.modal-foot .btn-clear-review:hover {
  background: #fef2f2;          /* red-50 */
  border-color: #f87171;       /* red-400 */
}
:root[data-theme="dark"] .modal-foot .btn-clear-review {
  color: #fca5a5;
  border-color: #7f1d1d;
  background: transparent;
}
:root[data-theme="dark"] .modal-foot .btn-clear-review:hover {
  background: #450a0a;
  border-color: #b91c1c;
}

.modal-foot {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--line);
  background: #f8fafc;
}
.modal-foot-spacer { flex: 1; }

/* Read-only finding context block at the top of the modal. */
.review-context {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.review-context-row { display: flex; align-items: center; gap: 10px; }
.review-target { font-size: 12px; color: var(--ink-soft); font-weight: 500; }
.review-title { margin: 8px 0 6px; font-size: 14.5px; font-weight: 600; }
.review-meta {
  display: grid; grid-template-columns: 90px 1fr; gap: 2px 12px;
  margin: 0; font-size: 12px;
}
.review-meta div { display: contents; }
.review-meta dt { color: var(--ink-soft); font-weight: 500; }
.review-meta dd { margin: 0; word-break: break-all; }
.review-existing {
  margin: 10px 0 0;
  padding: 6px 10px;
  font-size: 12px;
  background: #fff7ed; color: #9a3412;
  border: 1px solid #fed7aa; border-radius: 6px;
}

/* Decision picker -- three large radio cards. */
.decision-group {
  border: 0; padding: 0; margin: 0 0 14px;
  display: grid; grid-template-columns: 1fr; gap: 8px;
}
.decision-group legend {
  font-size: 12px; font-weight: 600; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 6px;
}
.decision-card {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 12px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  background: #fff;
  transition: border-color .12s, background .12s;
}
.decision-card:hover { border-color: var(--line-strong); }
.decision-card input[type="radio"] {
  margin-top: 2px;
  accent-color: var(--accent);
  cursor: pointer;
}
.decision-meta { display: flex; flex-direction: column; gap: 3px; }
.decision-hint { font-size: 12.5px; color: var(--ink-soft); }
.decision-card.selected { background: #f8fafc; }
.decision-card[data-decision="acknowledged"].selected  { border-color: var(--dec-ack-bd); background: #eef2ff; }
.decision-card[data-decision="not_a_risk"].selected    { border-color: var(--dec-nar-bd); background: #f0fdf4; }
.decision-card[data-decision="risk_accepted"].selected { border-color: var(--dec-ra-bd);  background: #fffbeb; }

/* "Clear review" pseudo-decision -- visually offset from the three real
   decisions with a dashed border and a muted destructive badge, since it
   undoes the previous review rather than recording a new one. */
.decision-card.decision-clear {
  border-style: dashed;
  margin-top: 4px;
}
.decision-card.decision-clear::before {
  content: "or";
  position: absolute;
  transform: translate(-22px, -22px);
  font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
  background: var(--panel);
  padding: 0 6px;
}
.decision-card.decision-clear { position: relative; }
.decision-card.decision-clear.selected {
  border-color: #94a3b8;       /* slate-400 */
  border-style: solid;
  background: #f1f5f9;          /* slate-100 */
}
.decision-badge.dec-clear {
  background: #f1f5f9;          /* slate-100 */
  color:      #475569;          /* slate-600 */
  border-color: #94a3b8;        /* slate-400 */
}

/* Notes textarea looks visibly inert when 'Clear' is selected since the
   field doesn't apply to that action. */
#rv-note:disabled,
#rv-note.disabled {
  background: #f8fafc;
  color: var(--ink-soft);
  cursor: not-allowed;
}

/* Notes input. */
.review-note-label {
  display: block;
  font-size: 12px; font-weight: 600; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 6px;
}
.review-note-label .required { color: #b91c1c; text-transform: none; font-weight: 500; letter-spacing: 0; margin-left: 4px; }
#rv-note {
  width: 100%;
  padding: 8px 10px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  font: inherit;
  resize: vertical;
  min-height: 84px;
}
#rv-note:focus { outline: none; border-color: var(--accent); }
.review-note-help { margin: 6px 0 4px; font-size: 11.5px; color: var(--ink-soft); }
.review-error {
  margin: 8px 0 0;
  padding: 6px 10px;
  font-size: 12.5px;
  background: #fef2f2; color: #991b1b;
  border: 1px solid #fecaca; border-radius: 6px;
}

footer {
  text-align: center;
  padding: 24px;
  color: var(--ink-soft);
  font-size: 12px;
  display: flex; gap: 8px; justify-content: center; align-items: center;
  flex-wrap: wrap;
}
footer .footer-sep { opacity: 0.6; }
footer .footer-confidential {
  font-style: italic;
  letter-spacing: 0.01em;
}

/* -------------------- Misconfigurations tab styling -------------------- */
.summary-strip .strip-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 14px; flex-wrap: wrap;
}
.strip-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0;
}
.strip-sub {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--ink-soft);
}
.strip-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.stat-strip {
  display: grid;
  /* auto-fit lets the grid adapt to either 7 (Assets) or 9 (Misconfig)
     tiles without separate per-tab rules; each tile keeps a usable
     minimum width and the row fills the panel. */
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
/* auto-fit handles down-sizing automatically; explicit breakpoints kept
   only for very narrow screens to guarantee a sensible minimum. */
.stat-tile {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-left: 3px solid var(--info);
  border-radius: 10px;
  padding: 10px 14px;
}
.stat-tile.total    { border-left-color: var(--accent); }
.stat-tile.crit     { border-left-color: var(--crit); }
.stat-tile.high     { border-left-color: var(--high); }
.stat-tile.med      { border-left-color: var(--med); }
.stat-tile.low      { border-left-color: var(--low); }
.stat-tile .label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}
.stat-tile .value {
  font-size: 22px;
  font-weight: 700;
  margin-top: 2px;
  letter-spacing: -0.01em;
}
.stat-tile.total .value { color: var(--ink); }
.stat-tile.crit  .value { color: var(--crit); }
.stat-tile.high  .value { color: var(--high); }
.stat-tile.med   .value { color: var(--med); }
.stat-tile.low   .value { color: var(--low); }
.stat-tile.info  .value { color: var(--info); }

/* Security / posture tile colours (used by the GCS + GKE report sections).
 * stat-good highlights "the secure thing is happening" (UBLA on, PAP
 * enforced, private endpoint, regional cluster). stat-public is reserved
 * for the public-bucket count -- low contrast green/red on purpose so the
 * eye lands on it. */
.stat-tile.stat-good   { border-left-color: #16a34a; background: #f0fdf4; }
.stat-tile.stat-good   .label,
.stat-tile.stat-good   .value { color: #166534; }
.stat-tile.stat-public { border-left-color: #dc2626; background: #fef2f2; }
.stat-tile.stat-public .label,
.stat-tile.stat-public .value { color: #991b1b; }
[data-theme="dark"] .stat-tile.stat-good   { background: rgba(34, 197, 94, 0.10); }
[data-theme="dark"] .stat-tile.stat-good   .label,
[data-theme="dark"] .stat-tile.stat-good   .value { color: #86efac; }
[data-theme="dark"] .stat-tile.stat-public { background: rgba(239, 68, 68, 0.10); }
[data-theme="dark"] .stat-tile.stat-public .label,
[data-theme="dark"] .stat-tile.stat-public .value { color: #fca5a5; }

/* Region/zone placement badge (GKE report) */
.placement-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.placement-badge.place-regional { background: #dcfce7; color: #166534; }
.placement-badge.place-zonal    { background: #f1f5f9; color: #475569; }
[data-theme="dark"] .placement-badge.place-regional { background: rgba(34,197,94,0.18); color: #86efac; }
[data-theme="dark"] .placement-badge.place-zonal    { background: rgba(148,163,184,0.18); color: #cbd5e1; }

/* GKE release channel badge */
.channel-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: #f1f5f9;
  color: #475569;
}
.channel-badge.channel-rapid   { background: #ffe4e6; color: #9f1239; }
.channel-badge.channel-regular { background: #dbeafe; color: #1e3a8a; }
.channel-badge.channel-stable  { background: #dcfce7; color: #166534; }
.channel-badge.channel-none    { background: #f1f5f9; color: #475569; }
[data-theme="dark"] .channel-badge.channel-rapid   { background: rgba(239,68,68,0.18); color: #fca5a5; }
[data-theme="dark"] .channel-badge.channel-regular { background: rgba(59,130,246,0.18); color: #93c5fd; }
[data-theme="dark"] .channel-badge.channel-stable  { background: rgba(34,197,94,0.18); color: #86efac; }
[data-theme="dark"] .channel-badge.channel-none    { background: rgba(148,163,184,0.18); color: #cbd5e1; }

/* GCS storage-class badge */
.storage-class {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: #f1f5f9;
  color: #475569;
}
.storage-class.storage-standard { background: #dbeafe; color: #1e3a8a; }
.storage-class.storage-nearline { background: #dcfce7; color: #166534; }
.storage-class.storage-coldline { background: #ccfbf1; color: #134e4a; }
.storage-class.storage-archive  { background: #ede9fe; color: #5b21b6; }
[data-theme="dark"] .storage-class.storage-standard { background: rgba(59,130,246,0.18); color: #93c5fd; }
[data-theme="dark"] .storage-class.storage-nearline { background: rgba(34,197,94,0.18); color: #86efac; }
[data-theme="dark"] .storage-class.storage-coldline { background: rgba(20,184,166,0.18); color: #5eead4; }
[data-theme="dark"] .storage-class.storage-archive  { background: rgba(139,92,246,0.18); color: #c4b5fd; }

.scheduler-line {
  margin: 14px 0 0;
  background: #f8fafc;
  border-color: var(--line);
  color: var(--ink-soft);
  font-size: 12.5px;
}
.scheduler-line.warn {
  background: #fffbeb;
  border-color: #fde68a;
  color: #92400e;
}
.scheduler-line b { color: var(--ink); }
.scheduler-line.warn b { color: #78350f; }

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  align-items: center;
  margin-bottom: 14px;
}
.filter-bar select,
.filter-bar input[type="search"] {
  padding: 9px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  font: inherit;
  background: #fff;
}
.filter-bar select  { appearance: auto; flex: 1 1 180px; min-width: 160px; max-width: 280px; }
.filter-bar input[type="search"] {
  flex: 2 1 280px;
  min-width: 220px;
}
.filter-bar .counter {
  margin-left: auto;
  color: var(--ink-soft);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding: 0 6px;
  /* Match the height of the inputs so the baseline sits visually centred
     instead of floating mid-row. */
  display: inline-flex;
  align-items: center;
  min-height: 38px;
}

@media (max-width: 900px) {
  .stat-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  /* On phones, every filter and the counter line up vertically. */
  .filter-bar select,
  .filter-bar input[type="search"] { flex: 1 1 100%; max-width: none; }
  .filter-bar .counter { margin-left: 0; }
  .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================== Theme toggle ============================ */
.topbar-right {
  display: flex;
  align-items: center;
  gap: 14px;
}
.theme-toggle {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.theme-toggle:hover {
  background: rgba(255, 255, 255, 0.14);
  transform: translateY(-1px);
}
.theme-toggle:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.theme-icon { display: none; }
/* In light mode we show the moon (click to go dark); in dark mode we show
   the sun (click to go light). Toggles based on <html data-theme>. */
:root[data-theme="light"] .theme-icon-dark  { display: inline; }
:root[data-theme="dark"]  .theme-icon-light { display: inline; }

/* ============================== Dark theme ============================== */
:root[data-theme="dark"] {
  --bg:           #0b1220;
  --panel:        #111a2e;
  --ink:          #e2e8f0;
  --ink-soft:     #94a3b8;
  --line:         #1f2a44;
  --line-strong:  #334155;
  --accent:       #60a5fa;
  --accent-strong:#93c5fd;
  --shadow: 0 1px 2px rgba(0,0,0,0.35), 0 4px 14px rgba(0,0,0,0.45);
  --crit:  #f87171;
  --high:  #fb923c;
  --med:   #facc15;
  --low:   #60a5fa;
  --info:  #cbd5e1;
  color-scheme: dark;
}

/* Surfaces: anywhere we hard-coded #fff or off-white slate tints, repaint
   for the dark palette so the panels read as flat dark cards. */
:root[data-theme="dark"] body { background: var(--bg); color: var(--ink); }

:root[data-theme="dark"] .topbar { background: #060b18; }
:root[data-theme="dark"] .brand-logo { background: #e2e8f0; }
:root[data-theme="dark"] .brand-divider { background: #1f2a44; }
:root[data-theme="dark"] .topbar .tag,
:root[data-theme="dark"] .topbar-meta { color: #94a3b8; }

:root[data-theme="dark"] .tab:hover { background: rgba(226, 232, 240, 0.06); }
:root[data-theme="dark"] .tab.active {
  background: var(--panel);
  color: var(--ink);
  border-color: var(--line);
  border-bottom-color: var(--panel);
}

:root[data-theme="dark"] .panel { background: var(--panel); border-color: var(--line); }
:root[data-theme="dark"] .form-grid select,
:root[data-theme="dark"] .form-grid input[type="text"],
:root[data-theme="dark"] .combobox-trigger,
:root[data-theme="dark"] .combobox-panel,
:root[data-theme="dark"] .btn,
:root[data-theme="dark"] .filter-bar select,
:root[data-theme="dark"] .filter-bar input[type="search"],
:root[data-theme="dark"] .report-scope select,
:root[data-theme="dark"] .pag-size select {
  background: #1a253f;
  color: var(--ink);
  border-color: var(--line-strong);
}
:root[data-theme="dark"] .btn:hover { background: #25334f; }
:root[data-theme="dark"] .combobox-search-wrap { background: #182238; border-bottom-color: var(--line); }
:root[data-theme="dark"] .combobox-search-wrap input[type="search"] { color: var(--ink); }
:root[data-theme="dark"] .combobox-option { color: var(--ink); border-bottom-color: var(--line); }
:root[data-theme="dark"] .combobox-option:hover,
:root[data-theme="dark"] .combobox-option.focused { background: #1a253f; }
:root[data-theme="dark"] .combobox-option.selected { background: #1e2b4a; }
:root[data-theme="dark"] .combobox-option .tag.manual { background: #1e293b; color: #c7d2fe; }
:root[data-theme="dark"] .combobox-option .tag.auto   { background: #0e2535; color: #67e8f9; }

/* Tables: the global dark navy header from light mode would clash with
   the panel; pin it to a slightly lighter slate so column headers remain
   distinguishable from data rows. */
:root[data-theme="dark"] th {
  background: #182238;
  color: var(--ink);
}
:root[data-theme="dark"] th[data-sort]:hover { background: #1f2c4a; }
:root[data-theme="dark"] tr:last-child td { border-bottom: none; }
:root[data-theme="dark"] tbody tr:nth-child(even) { background: rgba(226, 232, 240, 0.025); }
:root[data-theme="dark"] th, :root[data-theme="dark"] td { border-bottom-color: var(--line); }
:root[data-theme="dark"] .table-wrap { border-color: var(--line); }

/* Review modal + decision cards. */
:root[data-theme="dark"] .modal-card,
:root[data-theme="dark"] .review-context,
:root[data-theme="dark"] .decision-card,
:root[data-theme="dark"] textarea {
  background: #1a253f;
  color: var(--ink);
  border-color: var(--line-strong);
}
:root[data-theme="dark"] .decision-card.selected { background: #1f2b46; }
:root[data-theme="dark"] .decision-card[data-decision="acknowledged"].selected  { background: #1e2147; }
:root[data-theme="dark"] .decision-card[data-decision="not_a_risk"].selected    { background: #0f2a1f; }
:root[data-theme="dark"] .decision-card[data-decision="risk_accepted"].selected { background: #2a1f0a; }
:root[data-theme="dark"] .decision-card.decision-clear {
  background: #1a253f;
  color: var(--ink-soft);
  border-color: var(--line-strong);
}
:root[data-theme="dark"] .review-error,
:root[data-theme="dark"] .error { background: #2a0e0e; color: #fca5a5; border-color: #7f1d1d; }
:root[data-theme="dark"] .notice { background: #2a200a; color: #fde68a; border-color: #92400e; }
:root[data-theme="dark"] .notice b { color: #fde68a; }

/* Stat tiles: invert pastel light backgrounds to deep tinted darks while
   preserving the accent border. Text is brightened so it stays legible. */
:root[data-theme="dark"] .stat-tile { background: #182238; }
:root[data-theme="dark"] .stat-tile .label,
:root[data-theme="dark"] .stat-tile .value { color: var(--ink); }
:root[data-theme="dark"] .stat-tile.asset-accounts { background: #0c2233; }
:root[data-theme="dark"] .stat-tile.asset-accounts .label,
:root[data-theme="dark"] .stat-tile.asset-accounts .value { color: #7dd3fc; }
:root[data-theme="dark"] .stat-tile.asset-on { background: #0f2a1f; }
:root[data-theme="dark"] .stat-tile.asset-on .label,
:root[data-theme="dark"] .stat-tile.asset-on .value { color: #86efac; }
:root[data-theme="dark"] .stat-tile.asset-off { background: #1c2333; }
:root[data-theme="dark"] .stat-tile.asset-off .label,
:root[data-theme="dark"] .stat-tile.asset-off .value { color: #cbd5e1; }
:root[data-theme="dark"] .stat-tile.compute-cpu  { background: #11203e; }
:root[data-theme="dark"] .stat-tile.compute-cpu  .label,
:root[data-theme="dark"] .stat-tile.compute-cpu  .value { color: #93c5fd; }
:root[data-theme="dark"] .stat-tile.compute-mem  { background: #2a1f0a; }
:root[data-theme="dark"] .stat-tile.compute-mem  .label,
:root[data-theme="dark"] .stat-tile.compute-mem  .value { color: #fcd34d; }
:root[data-theme="dark"] .stat-tile.compute-disk { background: #0f2a25; }
:root[data-theme="dark"] .stat-tile.compute-disk .label,
:root[data-theme="dark"] .stat-tile.compute-disk .value { color: #5eead4; }
:root[data-theme="dark"] .stat-tile.dec-ack { background: #1e2147; }
:root[data-theme="dark"] .stat-tile.dec-nar { background: #0f2a1f; }
:root[data-theme="dark"] .stat-tile.dec-ra  { background: #2a1f0a; }

/* Severity values keep their colour role via --crit/--high/etc, which
   were brightened in the dark palette block above; no override needed. */
:root[data-theme="dark"] .discovery-stats { background: #182238; color: var(--ink); }
:root[data-theme="dark"] .discovery-stats-head b { color: var(--ink); }

/* Misconfig row tints. The light-mode tints use !important; replicate
   that here so dark rows stay tinted but readable. */
:root[data-theme="dark"] tbody tr.row-acknowledged td   { background: #1e2147 !important; }
:root[data-theme="dark"] tbody tr.row-not_a_risk td     { background: #0f2a1f !important; }
:root[data-theme="dark"] tbody tr.row-risk_accepted td  { background: #2a1f0a !important; }

/* Kind / family / status badges. We darken the light pastel fills and
   brighten the text so they remain legible without losing their colour
   identity. */
:root[data-theme="dark"] .kind-badge.kind-vm  { background: #1e293b; color: #93c5fd; }
:root[data-theme="dark"] .kind-badge.kind-sql { background: #281c3c; color: #c4b5fd; }
:root[data-theme="dark"] .status-pill.stat-ok    { background: #0f2a1f; color: #86efac; }
:root[data-theme="dark"] .status-pill.stat-off   { background: #1c2333; color: #cbd5e1; }
:root[data-theme="dark"] .status-pill.stat-other { background: #2a1f0a; color: #fcd34d; }
:root[data-theme="dark"] .status-pill.stat-bad   { background: #2c1414; color: #fca5a5; }

/* Sub-tab nav in dark mode. */
:root[data-theme="dark"] .subtabs {
  background: #0f1729;
  border-color: #1e293b;
}
:root[data-theme="dark"] .subtab        { color: #94a3b8; }
:root[data-theme="dark"] .subtab:hover,
:root[data-theme="dark"] .subtab.active {
  background: #182238;
  color: #e2e8f0;
  border-color: #1e293b;
}
:root[data-theme="dark"] .subtab-count  { background: #1e293b; color: #e2e8f0; }
:root[data-theme="dark"] .check-no      { color: #475569; }
:root[data-theme="dark"] .family-badge { background: #1f2a44; color: #cbd5e1; }
:root[data-theme="dark"] .family-badge.fam-e2   { background: #11203e; color: #93c5fd; }
:root[data-theme="dark"] .family-badge.fam-n1   { background: #2a1f0a; color: #fde68a; }
:root[data-theme="dark"] .family-badge.fam-n2   { background: #0f2a1f; color: #86efac; }
:root[data-theme="dark"] .family-badge.fam-n2d  { background: #0f2a25; color: #5eead4; }
:root[data-theme="dark"] .family-badge.fam-c2d  { background: #2a1217; color: #fda4af; }
:root[data-theme="dark"] .family-badge.fam-t2d  { background: #281c3c; color: #c4b5fd; }
:root[data-theme="dark"] .family-badge.fam-m2   { background: #2a1232; color: #d8b4fe; }
:root[data-theme="dark"] .family-badge.fam-g2   { background: #2a1217; color: #fda4af; }
:root[data-theme="dark"] .family-badge.fam-custom    { background: #2a0e0e; color: #fca5a5; }
:root[data-theme="dark"] .family-badge.fam-legacy    { background: #1c2333; color: #cbd5e1; }
:root[data-theme="dark"] .family-badge.fam-db-custom { background: #2a0f24; color: #f9a8d4; }
:root[data-theme="dark"] .family-badge.fam-db-n2     { background: #2a1f0a; color: #fcd34d; }

/* Asset Report cards + tables sit on the dark panel by default. */
:root[data-theme="dark"] .report-card { background: #142036; border-color: var(--line); }
:root[data-theme="dark"] .report-table th { background: #182238; color: var(--ink-soft); }
:root[data-theme="dark"] .report-table tbody tr:hover { background: rgba(226, 232, 240, 0.04); }
:root[data-theme="dark"] .report-table tr.region-row.region-group-start td {
  border-top-color: var(--line-strong);
}
:root[data-theme="dark"] .report-table .region-repeat { color: #475569; }

/* Scheduler line + scan-all banner. */
:root[data-theme="dark"] .scheduler-line { background: #182238; color: var(--ink-soft); }
:root[data-theme="dark"] .scheduler-line.warn { background: #2a200a; color: #fde68a; border-color: #92400e; }
:root[data-theme="dark"] .scheduler-line.warn b { color: #fcd34d; }
:root[data-theme="dark"] .scan-all-row { background: #11203e; border-color: #1e3a8a; }
:root[data-theme="dark"] .scan-all-text b { color: #c7d2fe; }
:root[data-theme="dark"] .scan-all-text .dim { color: #93c5fd; }
:root[data-theme="dark"] .divider-or { color: var(--ink-soft); }
:root[data-theme="dark"] .reload-stamp { color: var(--ink-soft); }

/* Bulk mini list rows. */
:root[data-theme="dark"] .bulk-mini-row { background: #182238; border-color: var(--line); }
:root[data-theme="dark"] .bulk-mini-row[data-status="succeeded"] { background: #0f2a1f; }
:root[data-theme="dark"] .bulk-mini-row[data-status="succeeded"] .bmr-pct { color: #86efac; }
:root[data-theme="dark"] .bulk-mini-row[data-status="failed"] { background: #2a0e0e; }
:root[data-theme="dark"] .bulk-mini-row[data-status="failed"] .bmr-pct { color: #fca5a5; }
:root[data-theme="dark"] .bulk-mini-row[data-status="running"] .bmr-name { color: #93c5fd; }

/* Progress bar track. */
:root[data-theme="dark"] .progress-track { background: #1f2a44; }

/* Empty / muted bits. */
:root[data-theme="dark"] .empty,
:root[data-theme="dark"] .muted { color: var(--ink-soft); }

/* Pagination bar. */
:root[data-theme="dark"] .pagination { background: #182238; border-color: var(--line); }

/* Theme toggle button -- lighten in dark mode so it remains visible. */
:root[data-theme="dark"] .theme-toggle {
  border-color: rgba(226, 232, 240, 0.25);
  background: rgba(226, 232, 240, 0.08);
}
:root[data-theme="dark"] .theme-toggle:hover { background: rgba(226, 232, 240, 0.18); }