/* ==========================================================================
   HyperIQ customer portal - light theme (Hypertree palette, hypertreetc.com)
   Change colors in the tokens below; every component reads from them.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Surfaces */
  --bg: #f3f6f5;            /* page canvas */
  --surface: #ffffff;       /* panels, sidebar, topbar */
  --surface-sunken: #f6f9f8;/* table hover, notices */
  --border: #e0e7e4;
  --border-strong: #cdd9d4;

  /* Ink (Hypertree navy) */
  --ink: #081825;
  --ink-hover: #192230;
  --text: #1d2b36;
  --muted: #5b6b76;

  /* Hypertree greens */
  --brand: #b5c77f;          /* logo green, for fills on dark */
  --brand-mid: #47816b;      /* Hypertree teal: borders, focus, active states */
  --brand-ink: #36624f;      /* green text and links on white */
  --brand-soft: #e7f0ec;     /* active nav, soft fills */
  --cta: #47816b;            /* call-to-action buttons (white text), as on hypertreetc.com */
  --cta-hover: #3a6b59;

  /* Charts and icons: livelier than the text colors, which keep their contrast on white */
  --viz: #0faa73;            /* Hypertree mint, deepened for white backgrounds */
  --viz-icon: #0f9f6c;
  --viz-crit: #c2133a;  --viz-high: #f0443a;  --viz-med: #f59e0b;  --viz-low: #3b82f6;

  /* Status */
  --critical: #b42318;  --critical-soft: #fdecea;
  --high: #b93815;      --high-soft: #fff0e8;
  --warning: #93580b;   --warning-soft: #fdf3e1;
  --ok: #36624f;        --ok-soft: #e7f0ec;
  --info: #4f8ea3;      --info-soft: #e8f1f5;  --info-ink: #24556a;
  --neutral: #475a66;   --neutral-soft: #eef2f5;

  /* Charts */
  --chart-a: #c3d2da;
  --chart-b: var(--viz);

  /* Shape and type */
  /* Theme-specific details */
  --icon: #8795a0;
  --border-hover: #b6c7c0;
  --placeholder: #7b8a94;
  --on-ink: #ffffff;
  --info-border: #cfe0e8;
  --info-ink-2: #3d6a7d;
  --ai-bg: #081825;
  --ai-border: #081825;
  --avatar-bg: #081825;
  --notice-bg: #fff5dc;
  --notice-border: #efd49a;
  --notice-ink: #5e4108;
  --notice-strong: #d4901a;
  --notice-ring: #f4c86a55;
  --notice-stripe: #f7dea066;

  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  --font: Geist, system-ui, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, Consolas, monospace;

  font-family: var(--font);
  font-size: 16px;
}

/* Base ------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); caret-color: var(--brand-ink); -webkit-font-smoothing: antialiased; }
button, select, input { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
::selection { background: #47816b55; color: var(--ink); }
html { scrollbar-color: var(--border-strong) transparent; }

button:focus-visible, select:focus-visible, input:focus-visible,
a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--brand-ink);
  outline-offset: 2px;
}

.icon {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

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

.shell { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
/* The menu collapses to an icon bar from the button at its foot; the choice is remembered per browser (theme.js). */
.logo .logo-mark { display: none; width: 36px; height: 36px; }
@media (min-width: 761px) {
  :root[data-sidebar="compact"] .shell { grid-template-columns: 72px 1fr; }
  :root[data-sidebar="compact"] .sidebar { padding: 26px 12px 20px; }
  :root[data-sidebar="compact"] .logo { display: flex; justify-content: center; margin: 0 0 34px; }
  :root[data-sidebar="compact"] .logo img:not(.logo-mark) { display: none; }
  :root[data-sidebar="compact"]:not([data-theme="dark"]) .logo-mark.logo-light, :root[data-sidebar="compact"][data-theme="dark"] .logo-mark.logo-dark { display: block; }
  :root[data-sidebar="compact"] .nav { position: relative; justify-content: center; gap: 0; padding: 9px 0; }
  /* Collapsed: the label stays for screen readers; the name shows in .nav-tip beside the icon (theme.js), outside the
     menu, which scrolls and would clip anything that sticks out of it. */
  :root[data-sidebar="compact"] .nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  /* The HyperIQ AI pages, the posture index and the customer card return with the full menu. */
  :root[data-sidebar="compact"] :is(.nav-toggle, .nav-sub, .tenant-card) { display: none; }
  :root[data-sidebar="compact"] .sidebar-score { justify-content: center; padding: 9px 0; border-color: transparent; background: none; }
  :root[data-sidebar="compact"] .sidebar-score :is(.sidebar-score-name, .sidebar-score-number) { display: none; }
  :root[data-sidebar="compact"] .sidebar-score .score-grade { position: absolute; width: 9px; height: 9px; padding: 0; overflow: hidden; translate: 9px -9px; border-radius: 50%; background: currentColor; font-size: 0; }
  :root[data-sidebar="compact"] .sidebar-score { position: relative; }
  :root[data-sidebar-anim] .shell { transition: grid-template-columns .3s ease-out; }
  :root[data-sidebar-anim]:not([data-sidebar="compact"]) :is(.nav-label, .tenant-card) { animation: sidebar-fade .3s ease-in .2s both; }
  .nav-tip { position: fixed; z-index: 1000; padding: 6px 10px; border-radius: var(--radius-sm); background: var(--ink); color: var(--on-ink); font-size: .8rem; font-weight: 500; white-space: nowrap; box-shadow: 0 8px 24px #08182533; pointer-events: none; translate: 0 -50%; animation: nav-tip .18s ease-out; }
  .nav-tip[hidden] { display: none; }
  .sidebar-toggle .icon { transition: transform .3s ease-out; }
  :root[data-sidebar="compact"] .sidebar-toggle .icon { transform: scaleX(-1); }
  :root[data-sidebar="compact"] .sidebar-toggle { margin: auto auto 0; }
}
@media (max-width: 760px) { .sidebar-toggle { display: none; } }
@keyframes sidebar-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .shell, .nav-label, .tenant-card, .sidebar-score, .sidebar-toggle .icon { transition: none !important; animation: none !important; } }
.sidebar-toggle { display: grid; flex: none; place-items: center; width: 34px; height: 34px; margin: 14px 0 0 12px; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--muted); cursor: pointer; }
.sidebar-toggle:hover { color: var(--ink); border-color: var(--border-hover); }
.main-col { min-width: 0; }

.sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 26px 16px 20px;
  background: var(--surface);
  border-right: 1px solid var(--border);
}
.logo { display: block; margin: 0 10px 34px; }
.logo img { display: block; width: 152px; height: auto; }
/* HyperIQ lockup: cube mark and wordmark in the theme text color. */
.brand-lockup { display: flex; align-items: center; gap: 10px; color: var(--ink); font-size: 1.55rem; font-weight: 700; letter-spacing: -.03em; text-decoration: none; }
.brand-lockup img { width: 36px; height: 36px; }

.sidebar nav { display: grid; gap: 2px; }
.nav {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 42px;
  padding: 9px 12px;
  border-radius: var(--radius);
  color: var(--muted);
  font-size: .925rem;
  font-weight: 500;
  text-decoration: none;
}
.nav .icon { color: var(--icon); }
.nav:hover { background: var(--surface-sunken); color: var(--ink); }
.nav.active { background: var(--brand-soft); color: var(--ink); font-weight: 600; }
.nav.active .icon { color: var(--viz-icon); }
/* A page with pages under it (HyperIQ AI): the chevron opens the list. */
.nav-row { display: flex; align-items: center; gap: 2px; }
.nav-row .nav { flex: 1; min-width: 0; }
.nav-toggle { display: grid; place-items: center; width: 32px; height: 42px; padding: 0; border: 0; border-radius: var(--radius); background: none; color: var(--icon); cursor: pointer; }
.nav-toggle:hover { background: var(--surface-sunken); color: var(--ink); }
.nav-toggle .icon { width: 16px; height: 16px; transition: transform .15s; }
.nav-group.open .nav-toggle .icon { transform: rotate(90deg); }
.nav-sub { display: none; gap: 2px; margin: 2px 0 4px 21px; padding-left: 10px; border-left: 1px solid var(--border); }
.nav-group.open .nav-sub { display: grid; }
.nav-sub .nav { min-height: 34px; padding: 6px 12px; font-size: .875rem; }

.sidebar-score { display: flex; align-items: center; gap: 8px; margin: 18px 0 0; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--ink); text-decoration: none; }
.sidebar-score .icon { flex: none; width: 18px; height: 18px; color: var(--viz-icon, var(--brand-mid)); }
.sidebar-score-name { flex: 1; min-width: 0; overflow: hidden; color: var(--muted); font-size: .8rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-score-number { font-size: .9rem; font-variant-numeric: tabular-nums; }
.sidebar-score .score-grade { padding: 0 7px; font-size: .72rem; }
/* The full indicator, floating beside the menu (live.js places it). */
.sidebar-score-pop { position: fixed; z-index: 1000; display: grid; gap: 6px; width: 250px; padding: 14px 14px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--surface); color: var(--ink); box-shadow: 0 16px 40px #08182533; pointer-events: none; animation: score-pop .18s ease-out; }
.sidebar-score-pop[hidden] { display: none; }
.sidebar-score-hint { color: var(--muted); font-size: .72rem; }
.sidebar-score:hover, .sidebar-score:focus-visible { border-color: var(--brand-mid); outline: none; }
.sidebar-score[hidden] { display: none; }
.sidebar-score-label { color: var(--muted); font-size: .75rem; font-weight: 600; letter-spacing: .02em; }
.sidebar-score-bar { position: relative; display: block; height: 30px; }
.sidebar-score-bar svg { display: block; width: 100%; height: 100%; }
.sidebar-score-bar .sb-on { fill: currentColor; }
.sidebar-score-bar .sb-off { fill: var(--border-strong); }
.sidebar-score-value { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink); font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.sidebar-score-value > span { padding: 1px 9px; border: 1px solid currentColor; border-radius: 999px; background: var(--surface); line-height: 1.4; }
.sidebar-score-bar .sidebar-score-value > span { border-color: color-mix(in srgb, currentColor 60%, transparent); }
.sidebar-score-meta { color: var(--muted); font-size: .75rem; }
.tenant-card { margin-top: auto; padding: 16px 12px 0; border-top: 1px solid var(--border); font-size: .875rem; }
.tenant-card strong { display: block; margin-bottom: 3px; color: var(--ink); }
.tenant-card p { margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.5; }

/* The top bar stays in view while the page scrolls (below the toast). */
.topbar {
  position: sticky;
  top: 0;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 64px;
  padding: 0 40px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.location { color: var(--muted); font-size: .875rem; }
.location span { margin: 0 4px; color: var(--border-strong); }
.location strong { color: var(--ink); font-weight: 600; }
.user { display: flex; align-items: center; gap: 14px; font-size: .875rem; }
#customer-switcher { display: flex; align-items: center; gap: 10px; color: var(--muted); }
#customer-name { color: var(--ink); font-size: .9rem; font-weight: 600; }
.avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--avatar-bg);
  color: var(--brand);
  font-size: .8rem;
  font-weight: 600;
}
.avatar.has-logo { overflow: hidden; background: none; box-shadow: 0 0 0 1px var(--border); }
.avatar.has-logo img { display: block; width: 100%; height: 100%; object-fit: cover; }

.content { max-width: 1440px; margin: 0 auto; padding: 28px 40px 48px; }

/* Notice: dashed amber callout, reads as "not real data" without a heavy fill. */
.demo {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 26px;
  padding: 14px 16px;
  border: 1.5px dashed var(--notice-strong);
  border-radius: 10px;
  color: var(--text);
  font-size: .9rem;
}
.demo-icon { display: grid; flex: none; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--notice-strong); color: #fff; }
.demo-icon .icon { width: 18px; height: 18px; }
.demo-text { flex: 1; margin: 0; }
.demo-text strong { display: block; color: var(--ink); font-weight: 600; }
.demo-text span { color: var(--muted); }
.demo-close { display: grid; flex: none; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); }
.demo-close:hover { background: var(--surface-sunken); color: var(--ink); }

.heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 28px; }
.subtitle { margin: 0; color: var(--muted); font-size: .95rem; }

.bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--border); color: var(--muted); font-size: .75rem; }

/* Type ------------------------------------------------------------------- */

h1 { margin: 0 0 6px; color: var(--ink); font-size: 2.4rem; font-weight: 600; line-height: 1.1; letter-spacing: -.035em; text-wrap: balance; }
h2 { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--ink); font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; }
h2 > .icon { color: var(--muted); }
.with-icon { display: inline-flex; align-items: center; gap: 8px; }
.with-icon .icon { width: 16px; height: 16px; color: var(--muted); }
h3 { margin: 0 0 8px; color: var(--ink); font-size: 1rem; }
.muted { color: var(--muted); font-size: .825rem; }
.strong { color: var(--ink); font-weight: 500; }
.positive { color: var(--brand-ink); }
.danger { color: var(--critical); }

/* Controls --------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-size: .875rem;
  font-weight: 600;
}
.btn .icon { width: 16px; height: 16px; }
.btn:hover:not(:disabled) { background: var(--surface-sunken); border-color: var(--border-hover); }
.btn.primary { background: var(--cta); border-color: var(--cta); color: #ffffff; }
.btn.primary:hover:not(:disabled) { background: var(--cta-hover); border-color: var(--cta-hover); color: #ffffff; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.link { padding: 4px 0; border: 0; background: none; color: var(--brand-ink); font-size: .825rem; font-weight: 600; }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }

select, .inventory-toolbar input {
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-size: .9rem;
  accent-color: var(--brand-ink);
}
.inventory-toolbar input { min-width: 0; }
.input-wrap { position: relative; display: block; }
.input-wrap .icon { position: absolute; top: 50%; left: 12px; width: 16px; height: 16px; color: var(--muted); transform: translateY(-50%); pointer-events: none; }
.input-wrap input { width: 100%; padding-left: 38px; }
select:hover, .inventory-toolbar input:hover { border-color: var(--border-hover); }
::placeholder { color: var(--placeholder); }

/* Segmented filter (alerts page) */
.tabs { display: inline-flex; gap: 2px; margin-bottom: 18px; padding: 3px; border-radius: var(--radius); background: var(--neutral-soft); }
.tabs .btn { min-height: 34px; padding: 6px 14px; border: 0; background: transparent; color: var(--muted); }
.tabs .btn:hover:not(:disabled) { background: var(--surface-sunken); color: var(--ink); }
.tabs .btn.active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px #0c1e2b1f; }

.inventory-toolbar { display: flex; align-items: flex-end; gap: 16px; margin: 4px 0 18px; }
.inventory-toolbar label { display: grid; flex: 1; gap: 6px; color: var(--muted); font-size: .8rem; font-weight: 500; }
/* Rows per page, at the right end of the Previous / Next bar. */
.inventory-toolbar .page-size { display: flex; flex: none; align-items: center; gap: 8px; margin-left: auto; white-space: nowrap; }
.inventory-toolbar .page-size select { width: auto; }

/* Panels ----------------------------------------------------------------- */

.panel { min-width: 0; padding: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; }
.grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 20px; margin-bottom: 20px; }
.full { margin-bottom: 20px; }

.notice {
  margin: 16px 0 0;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: .875rem;
  line-height: 1.6;
}
.panel .notice { margin-top: 0; }

/* Stats: one strip divided by hairlines, not separate cards */
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-bottom: 20px;
  overflow: hidden;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.stat { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px; background: var(--surface); --tone: var(--ink); }
.stat.info { --tone: var(--info); }
.stat.danger { --tone: var(--critical); }
.stat.warn { --tone: var(--warning); }
.stat.positive { --tone: var(--brand-ink); }

/* Overview headline numbers: open on the page, no box, one shared pattern */
.stats-open { gap: 0; overflow: visible; padding: 6px 0 4px; background: none; border: 0; border-radius: 0; margin-bottom: 30px; }
.stats-open .stat { gap: 14px; padding: 4px 28px; background: none; border-left: 1px solid var(--border-strong); }
.stats-open .stat:first-child { padding-left: 0; border-left: 0; }
.stat-main { display: flex; align-items: center; gap: 16px; }
.stat-icon-svg { flex: none; width: 44px; height: 44px; color: var(--viz-icon); }
.stats-open .stat-value { font-size: 2.75rem; }
.stat-label { margin: 0; color: var(--muted); font-size: .875rem; font-weight: 500; }
.stat-graph { position: relative; display: flex; align-items: flex-end; height: 40px; }
.stat-graphic { display: block; width: 100%; height: 40px; }
.stat-graphic.strip { height: 22px; }
.s-on { fill: var(--viz); }
.s-off { fill: var(--border-strong); }
.stat-value-row { display: flex; align-items: center; gap: 14px; }
.donut { flex: none; width: 44px; height: 44px; }
.stat-sev { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.sev-list { display: grid; gap: 2px; color: var(--muted); font-size: .75rem; line-height: 1.3; }
.sev-list span { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.sev-list i { width: 8px; height: 8px; border-radius: 2px; }
.sev-list b { color: var(--ink); font-weight: 600; }
.sev-list .d-high { background: var(--viz-high); }
.sev-list .d-med { background: var(--viz-med); }
.sev-list .d-low { background: var(--viz-low); }
.donut circle { fill: none; stroke-width: 7; }
.donut .d-track { stroke: var(--neutral-soft); }
.donut .d-high { stroke: var(--viz-high); }
.donut .d-med { stroke: var(--viz-med); }
.donut .d-low { stroke: var(--viz-low); }
/* Live mode: vulnerability inventory adds Critical and a proportional severity bar. */
.stat-sev, .stack { --crit: var(--viz-crit); }
.sev-list .d-crit { background: var(--crit); }
.donut .d-crit { stroke: var(--crit); }
/* Live cards carry large compact numbers: the donut rings the icon, and the row wraps instead of overflowing. */
.stats-live .stat { min-width: 0; }
.stats-live .stat-main { flex-wrap: wrap; gap: 8px 14px; }
.stats-live .stat-value { font-size: 2.3rem; }
.stats-live .stat-sev { margin-left: 0; }
.stats-live .stat-graph { margin-top: auto; }
.stat-ring { position: relative; flex: none; display: grid; place-items: center; width: 54px; height: 54px; }
.stat-ring .donut { position: absolute; inset: 0; width: 100%; height: 100%; }
.stat-ring .stat-icon-svg { width: 26px; height: 26px; }
.stack .d-crit { fill: var(--crit); }
.stack .d-high { fill: var(--viz-high); }
.stack .d-med { fill: var(--viz-med); }
.stack .d-low { fill: var(--viz-low); }
.t-band { fill: #e1e7eb; }
:root[data-theme="dark"] .t-band { fill: #ffffff12; }
.t-line { fill: none; stroke: var(--viz); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.t-dot { position: absolute; top: var(--y); right: -4px; width: 8px; height: 8px; border-radius: 50%; transform: translateY(-50%); box-shadow: 0 0 0 2px var(--bg); }
.t-normal { background: var(--viz); }
.t-above { background: var(--viz-high); }
.t-below { background: var(--ok); }
.stat-footer .urgent { color: var(--critical); font-weight: 700; }

/* Stat tooltip: details on hover or keyboard focus */
.stats-open .stat { position: relative; outline: none; }
.stat[data-page] { cursor: pointer; }
.stat-graph[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  z-index: 5;
  width: max-content;
  max-width: 240px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--on-ink);
  font-size: .78rem;
  line-height: 1.4;
  box-shadow: 0 8px 24px #0c1e2b33;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -3px);
  pointer-events: none;
}
.stat-graph[data-tip]:hover::after, .stat:focus-visible .stat-graph[data-tip]::after { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: no-preference) { .stat-graph[data-tip]::after { transition: opacity .12s, transform .12s, visibility .12s; } }
.stat-value { margin-bottom: 0; color: var(--ink); font-size: 2.6rem; font-weight: 600; line-height: 1; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.stat-value.danger { color: var(--critical); }
.stat-value.positive { color: var(--brand-ink); }
.stat-footer { color: var(--muted); font-size: .8rem; }
.stat-main .stat-value { font-size: 2.5rem; }

/* Next steps */
.steps { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
.steps li, .finding { display: flex; gap: 14px; }
.steps strong, .finding strong { color: var(--ink); font-size: .9rem; font-weight: 600; }
.steps p, .finding p { margin: 3px 0 2px; color: var(--muted); font-size: .85rem; line-height: 1.5; }
.finding-number {
  display: grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-ink);
  font-size: .8rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* HyperIQ AI: the one dark surface, echoing the logo */
.ai-panel { position: relative; overflow: hidden; background: var(--ai-bg); border-color: var(--ai-border); color: #dfe7eb; }
.ai-panel h2 { margin: 14px 0 10px; color: #fff; font-size: 1.35rem; line-height: 1.3; letter-spacing: -.02em; text-wrap: balance; }
.ai-panel p { margin: 0 0 14px; color: #b8c6ce; font-size: .925rem; line-height: 1.65; }
.ai-panel .panel-head { margin-bottom: 0; }
.ai-panel .btn { margin-top: 6px; background: var(--cta); border-color: var(--cta); color: #ffffff; }
.ai-panel .btn:hover:not(:disabled) { background: var(--cta-hover); border-color: var(--cta-hover); }
.ai-panel .badge.neutral { background: #ffffff14; color: #d6e2c0; }
.ai-mark { display: block; width: 40px; height: 40px; }
/* Same size as the sidebar logo (.brand-lockup) */
.ai-brand { display: flex; align-items: center; gap: 10px; color: #fff; font-size: 1.55rem; font-weight: 700; letter-spacing: -.03em; }
.ai-brand .ai-mark { width: 36px; height: 36px; }

.facts { display: grid; gap: 18px; margin: 0; }
.facts div { padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.facts div:last-child { padding-bottom: 0; border: 0; }
.facts dt { color: var(--ink); font-size: .9rem; font-weight: 600; }
.facts dd { margin: 4px 0 0; color: var(--muted); font-size: .875rem; }

/* Reports: a list, not identical cards */
.report-list { padding: 8px 24px; }
.report-list ul { margin: 0; padding: 0; list-style: none; }
.report { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--border); }
.report:last-child { border: 0; }
.report-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius); background: var(--brand-soft); color: var(--brand-ink); }
.report-icon .icon { width: 20px; height: 20px; }
.report-text h2 { font-size: 1rem; }
.report-text p { margin: 3px 0 0; color: var(--muted); font-size: .875rem; }

/* Tables and badges ------------------------------------------------------ */

.table-wrap { overflow: auto; margin: 0 -24px; padding: 0 24px; }
table { width: 100%; border-collapse: collapse; text-align: left; font-size: .875rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
th { padding: 10px 12px; border-bottom: 1px solid var(--border); color: var(--muted); font-size: .775rem; font-weight: 500; }
td { padding: 14px 12px; border-bottom: 1px solid var(--border); }
/* Sortable column header: the whole label is the button; the arrow shows the current order. */
.th-sort { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; white-space: nowrap; cursor: pointer; }
.th-sort:hover, .th-sort:focus-visible, .th-sort.on { color: var(--ink); }
.th-sort:focus-visible { outline: 2px solid var(--brand-mid); outline-offset: 2px; }
.th-arrow { font-size: .7rem; opacity: .45; }
.th-sort.on .th-arrow { opacity: 1; }
th:first-child, td:first-child { padding-left: 0; }
th:last-child, td:last-child { padding-right: 0; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--surface-sunken); }
td.empty { padding: 28px 0; color: var(--muted); white-space: normal; }
.endpoint { color: var(--ink); font-family: var(--mono); font-size: .8rem; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px 3px 8px;
  border-radius: var(--radius-sm);
  background: var(--critical-soft);
  color: var(--critical);
  font-size: .75rem;
  font-weight: 600;
  white-space: nowrap;
}
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.lab-source { margin: 4px 0 0; font-size: .8rem; }
/* Device list and single-device view (live mode). */
.device-row { position: relative; cursor: pointer; }
.device-row:hover td, .device-row:focus-within td { background: var(--neutral-soft); }
.device-link { color: var(--ink); font-weight: 600; text-decoration: none; }
.device-link::after { content: ''; position: absolute; inset: 0; }
.device-link:focus-visible { outline: 2px solid var(--brand-mid); outline-offset: 2px; }
.device-back { display: inline-block; margin-bottom: 14px; text-decoration: none; }
.device-head { margin-bottom: 24px; }
.device-title { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.device-title h2 { margin: 0; }
.device-title p { margin: 2px 0 0; }
.device-title .badge { margin-left: auto; }
.device-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px 24px; margin: 0; }
.device-facts dt { color: var(--muted); font-size: .75rem; }
.device-facts dd { margin: 2px 0 0; color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
/* Security alerts: MITRE ATT&CK tiles, ranked lists and hunting filters. */
.tactic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin: 14px 0 22px; }
.tactic-tile { display: flex; flex-direction: column; justify-content: space-between; gap: 10px; min-height: 76px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--critical) calc(var(--heat, 0) * 45%), var(--surface)); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.tactic-tile:hover, .tactic-tile:focus-visible { border-color: var(--brand-mid); outline: none; }
.tactic-tile span { font-size: .78rem; line-height: 1.25; }
.tactic-tile strong { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.tactic-tile.empty { cursor: default; color: var(--muted); background: none; border-style: dashed; }
.panel h3 { margin: 18px 0 8px; font-size: .85rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.alerts-stack { display: grid; gap: 20px; }
.hunt-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.hunt-cols.two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-top: 6px; }
.hunt-card { padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); }
.hunt-card h3:first-child { margin-top: 0; }
@media (max-width: 1100px) { .hunt-cols { grid-template-columns: minmax(0, 1fr); } .hunt-cols.two { grid-template-columns: minmax(0, 1fr); gap: 0; } }
.rank-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.rank-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: .85rem; }
.rank-row > span, .rank-row > a, .rank-row > .hunt-link { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-list > li, .hunt-cols > div { min-width: 0; }
.rank-row > :first-child { flex: 1 1 auto; min-width: 0; }
.rank-row strong { flex: none; font-variant-numeric: tabular-nums; }
.rank-row > span { display: flex; align-items: center; gap: 6px; }
.rank-row > span > .badge { flex: none; }
.rank-row > span > .hunt-link { display: block; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-list .lab-track { margin-top: 4px; height: 5px; }
.hunt-link { padding: 0; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.hunt-link:hover, .hunt-link:focus-visible { color: var(--brand-mid); text-decoration: underline; outline: none; }
.device-link-plain { color: var(--ink); text-decoration: none; }
.device-link-plain:hover { color: var(--brand-mid); text-decoration: underline; }
.hunt-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0; }
.hunt-chips .hunt-link, .chip { padding: 4px 10px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--neutral-soft); color: var(--ink); font: inherit; font-size: .78rem; cursor: pointer; }
.chip:hover, .hunt-chips .hunt-link:hover { border-color: var(--brand-mid); }
.mini-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mini-stats div { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.mini-stats span { display: block; color: var(--muted); font-size: .78rem; }
.mini-stats strong { font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.mini-stats .danger { color: var(--critical); }
.summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 12px; }
.summary-grid > div { min-width: 0; }
.status-block { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.status-ring { position: relative; width: 132px; height: 132px; }
.status-ring .donut { width: 100%; height: 100%; }
.status-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.status-center strong { font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.status-center span { color: var(--muted); font-size: .75rem; }
.status-legend { display: grid; width: 100%; gap: 4px; }
.status-filter { display: flex; align-items: center; gap: 8px; width: 100%; padding: 4px 6px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--ink); font: inherit; font-size: .85rem; cursor: pointer; }
.status-filter:hover, .status-filter:focus-visible { background: var(--neutral-soft); outline: none; }
.status-filter i { width: 9px; height: 9px; border-radius: 2px; }
.status-filter strong { margin-left: auto; font-variant-numeric: tabular-nums; }
.donut .st-active { stroke: var(--viz); } .status-filter .st-active { background: var(--viz); }
.donut .st-disc { stroke: var(--viz-high); } .status-filter .st-disc { background: var(--viz-high); }
.donut .st-pending { stroke: var(--warning); } .status-filter .st-pending { background: var(--warning); }
.donut .st-never { stroke: #7f95a3; } .status-filter .st-never { background: #7f95a3; }
.summary-details { display: grid; gap: 12px; margin: 0; }
.summary-details dt { color: var(--muted); font-size: .75rem; }
.summary-details dd { margin: 2px 0 0; font-size: .88rem; overflow-wrap: anywhere; }
@media (max-width: 1200px) { .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .summary-grid { grid-template-columns: minmax(0, 1fr); } }
.mini-stats.three { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 16px; }
.mini-stats.five { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 8px; }
.chip.static { cursor: default; }
.rank-note { margin: 2px 0 0; font-size: .75rem; }
.rank-row .path { font-family: var(--mono); font-size: .78rem; direction: rtl; text-align: left; }
.rank-row .badge + .hunt-link, .rank-row .badge { margin-right: 6px; }
.rank-row strong.danger { color: var(--critical); }
@media (max-width: 900px) { .mini-stats.three, .mini-stats.five { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sca-track { width: 120px; margin-top: 4px; height: 5px; }
.cve-link { color: var(--info); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
/* Threat report titles are sentences, not identifiers: they wrap inside their column instead of running past it. */
.report-link { white-space: normal; overflow-wrap: anywhere; }
.action-evidence li { min-width: 0; }
.cve-link:hover, .cve-link:focus-visible { color: var(--brand-mid); }
.rank-row > span > .cve-link, .rank-row > span > .icon-button { flex: none; }
.rank-row > span > .muted { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icon-button { display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 1px solid transparent; border-radius: var(--radius-sm); background: none; color: var(--muted); cursor: pointer; }
.icon-button:hover, .icon-button:focus-visible { border-color: var(--border-strong); color: var(--brand-mid); outline: none; }
.icon-button .icon { width: 14px; height: 14px; }
.score-wrap { margin-bottom: 28px; }
/* Administrator: the posture index of all customers is one wide card to the right of the page title, as tall as
   the title and the "All customers" lines; the four totals follow in a row. */
.fleet-top { display: grid; grid-template-columns: minmax(280px, 440px) minmax(0, 1fr); gap: 40px; margin-bottom: 26px; }
.fleet-title h2 { margin: 0 0 4px; font-size: 1.1rem; }
.fleet-title p { margin: 0; font-size: .825rem; }
.fleet-stats .stat { cursor: default; }
.fleet-score { display: flex; align-items: center; gap: 24px; min-width: 0; margin-top: -98px; padding: 14px 24px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.fleet-score .score-dial { flex: none; width: 112px; height: 112px; }
.fleet-score .score-center strong { font-size: 1.6rem; }
.fleet-score .score-grade { padding: 0 9px; font-size: .78rem; }
.fleet-score-body { flex: 1; min-width: 0; }
.fleet-score-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-bottom: 8px; }
.fleet-score-head h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1rem; }
/* The scope line is centered in the space between the title and the changes. */
.fleet-score-head > .muted { flex: 1 1 auto; font-size: .78rem; text-align: center; white-space: nowrap; }
.fleet-score-head .score-deltas { flex-wrap: nowrap; justify-content: flex-end; margin: 0 0 0 auto; font-size: .8rem; white-space: nowrap; }
.fleet-trend { display: block; width: 100%; height: 56px; overflow: visible; }
.fleet-score .lab-axis { margin-top: 4px; }
.fleet-score .score-note, .fleet-score .notice { margin: 8px 0 0; }
@media (max-width: 1180px) {
  .fleet-top { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .fleet-score { margin-top: 0; }
}
@media (max-width: 760px) { .fleet-score-head .score-deltas { flex-wrap: wrap; white-space: normal; } .fleet-score { flex-direction: column; align-items: stretch; } .fleet-score .score-dial { align-self: center; } }
.score-layout { display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); gap: 32px; }
.score-summary { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.score-summary h3, .score-summary .score-note, .score-summary .notice { align-self: stretch; }
.score-dial { position: relative; width: 190px; height: 190px; }
.score-gauge { width: 100%; height: 100%; }
.score-gauge circle { fill: none; stroke-width: 11; }
.score-gauge .g-track { stroke: var(--neutral-soft); }
.score-gauge .g-value { stroke: currentColor; stroke-linecap: round; }
.score-center { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 2px; }
.score-center strong { font-size: 2.6rem; line-height: 1; font-variant-numeric: tabular-nums; }
.score-grade { padding: 2px 12px; border-radius: 999px; background: color-mix(in srgb, currentColor 15%, transparent); font-weight: 700; }
.grade-a, .grade-b { color: var(--viz); }
.grade-c { color: var(--warning); }
.grade-d, .grade-f { color: var(--critical); }
.grade-none { color: var(--muted); }
.score-deltas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 10px 0 4px; font-size: .85rem; }
.score-delta.up { color: var(--viz); } .score-delta.down { color: var(--critical); }
.score-trend { display: block; width: 100%; height: 90px; }
.trend-dot { fill: currentColor; }
.score-note { font-size: .78rem; }
.pillars { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.pillar { padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); }
.pillar-head { display: flex; align-items: baseline; gap: 10px; }
.pillar-head strong { margin-left: auto; font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.pillar-track { margin: 8px 0; height: 6px; }
.pillar-track > div { background: currentColor !important; }
.pillar-metrics { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; font-size: .8rem; }
.pillar-metrics .met > span:first-child { color: var(--viz); font-weight: 700; }
.pillar-metrics .missed > span:first-child { color: var(--critical); font-weight: 700; }
@media (max-width: 1000px) { .score-layout { grid-template-columns: minmax(0, 1fr); } }
.planner-stats { margin: 14px 0 8px; }
.planner-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 18px 0 12px; }
.planner-toolbar .hunt-chips { margin: 0; }
.planner-toolbar { scroll-margin-top: 84px; }
.chip.active { border-color: var(--brand-mid); background: color-mix(in srgb, var(--brand-mid) 18%, transparent); }
#plan-list { display: grid; gap: 10px; }
.action-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); }
.action-card[data-priority="P1"] { border-left: 3px solid var(--critical); }
.action-card[data-priority="P2"] { border-left: 3px solid var(--warning); }
.action-card[data-priority="P3"] { border-left: 3px solid #7f95a3; }
.action-card summary { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; list-style: none; }
.action-card summary::-webkit-details-marker { display: none; }
.action-card summary:hover .action-title { color: var(--brand-mid); }
.action-category { color: var(--muted); font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.action-title { min-width: 0; color: var(--ink); font-weight: 600; }
.action-facts { color: var(--muted); font-size: .8rem; white-space: nowrap; }
.action-body { padding: 0 16px 16px 16px; border-top: 1px solid var(--border); }
.action-body > p:first-child { margin-top: 14px; }
.action-steps { display: grid; gap: 6px; margin: 0; padding-left: 20px; }
.action-evidence { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: .85rem; }
.action-evidence .badge { margin-right: 4px; }
.detection-list { display: grid; gap: 6px; margin: 6px 0 8px; padding-left: 18px; list-style: none; }
.detection-file { margin-right: 6px; color: var(--ink); font-family: var(--mono); font-size: .8rem; overflow-wrap: anywhere; }
@media (max-width: 900px) { .action-card summary { grid-template-columns: auto minmax(0, 1fr); } .action-category, .action-facts { grid-column: 2; } }
.nav-admin[hidden] { display: none; }
.customer-list { display: grid; gap: 16px; }
.customer-card { display: grid; grid-template-columns: minmax(200px, 1.3fr) minmax(210px, 1.5fr) repeat(4, minmax(110px, 1fr)) auto; align-items: center; gap: 24px; padding: 20px 24px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.customer-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.customer-id img, .customer-avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; }
.customer-avatar { display: grid; place-items: center; background: var(--neutral-soft); color: var(--ink); font-weight: 700; }
.customer-id h2 { margin: 0; font-size: 1.15rem; }
.customer-id p { margin: 2px 0 0; font-size: .8rem; }
.customer-cell { display: grid; gap: 6px; min-width: 0; padding-left: 20px; border-left: 1px solid var(--border-strong); }
.customer-label { color: var(--muted); font-size: .75rem; font-weight: 600; }
.customer-cell > strong { font-size: 1.6rem; line-height: 1; font-variant-numeric: tabular-nums; }
.customer-meta { color: var(--muted); font-size: .78rem; }
.customer-meta .urgent { color: var(--critical); }
.customer-cell .stat-graphic.strip { height: 12px; }
@media (max-width: 1300px) { .customer-card { grid-template-columns: repeat(3, minmax(0, 1fr)); } .customer-id { grid-column: 1 / -1; } .customer-open { justify-self: start; } }
@media (max-width: 700px) { .customer-card { grid-template-columns: minmax(0, 1fr); } .customer-cell { padding-left: 0; border-left: 0; } }
.command { position: relative; margin: 8px 0 12px; }
.command pre { margin: 0; padding: 14px 90px 14px 16px; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); font-family: var(--mono); font-size: .8rem; line-height: 1.5; white-space: pre-wrap; word-break: break-all; }
.command-copy { position: absolute; top: 8px; right: 8px; }
.deploy-os { margin-top: 12px; }
.deploy-os[hidden] { display: none; }
.deploy-os .action-steps .btn { margin-left: 6px; padding: 4px 10px; }
/* Deploy a new agent: numbered steps joined by a line; the automatic values use .form-output. */
.deploy-steps { display: grid; gap: 28px; margin: 0; padding: 0; list-style: none; }
.deploy-step { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 16px; }
.deploy-step:not(:last-child)::before { content: ""; position: absolute; top: 34px; bottom: -22px; left: 13px; width: 1px; background: var(--border-strong); }
.deploy-step-body { min-width: 0; }
.deploy-step-body h3 { margin: 3px 0 12px; }
.deploy-step-body > p:first-of-type { margin-top: 0; }
.deploy-packages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.deploy-package { min-width: 0; margin: 0; padding: 14px 18px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); }
.deploy-package:has(input:checked) { border-color: var(--brand-mid); }
.deploy-package legend { display: flex; align-items: center; gap: 8px; padding: 0 8px; color: var(--ink); font-weight: 700; }
.os-mark { width: 22px; height: 22px; fill: currentColor; }
.deploy-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
.deploy-option { display: flex; align-items: center; gap: 8px; font-size: .875rem; cursor: pointer; }
.deploy-option input { accent-color: var(--brand-mid); }
.deploy-wizard .form-grid { margin-bottom: 4px; }
.deploy-wizard .form-output { color: var(--ink); font-family: var(--mono); }
.deploy-wizard #deploy-file { margin-left: 8px; font-family: var(--mono); font-size: .8rem; }
.deploy-run[hidden], #deploy-ready[hidden], #deploy-pending[hidden] { display: none; }
.deploy-does { display: grid; gap: 4px; margin: 12px 0; padding-left: 20px; font-size: .875rem; }
@media (max-width: 900px) { .deploy-packages { grid-template-columns: minmax(0, 1fr); } }
.login-page { display: grid; min-height: 100vh; place-items: center; padding: 24px; background: var(--bg); }
.login-card { width: min(420px, 100%); padding: 36px 32px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.login-brand { margin-bottom: 26px; }
.login-card h1 { margin: 0; font-size: 1.6rem; }
.login-card form { display: grid; gap: 8px; margin-top: 22px; }
.login-card label, .form-field > span { color: var(--muted); font-size: .8rem; font-weight: 600; }
.login-card input, .form-field input, .form-field select { width: 100%; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg); color: var(--ink); font: inherit; }
.login-card input:focus, .form-field input:focus, .form-field select:focus { outline: 2px solid var(--brand-mid); outline-offset: 1px; }
.login-card .btn.primary { margin-top: 10px; justify-content: center; }
.login-error { margin: 6px 0 0; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--critical-soft); color: var(--critical); font-size: .85rem; }
.login-error[hidden] { display: none; }
.login-foot { margin: 20px 0 0; font-size: .78rem; }
.user-name { color: var(--muted); font-size: .85rem; }
.user-name[hidden], .sign-out[hidden] { display: none; }
.sign-out { padding: 6px 12px; }
#add-customer-panel { margin-bottom: 20px; }
#add-customer-panel[hidden], #add-customer-result[hidden], #add-customer-form[hidden] { display: none; }
/* Add customer: one table-like form. Section titles in a fixed left column, fields in the same three columns in every
   section, each field aligned to the top so labels and inputs line up whatever hints follow them. */
.add-customer .form-section { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 32px; padding: 22px 0; border-top: 1px solid var(--border); }
.add-customer .form-section-title h3 { margin: 0 0 6px; color: var(--ink); font-size: .95rem; letter-spacing: 0; text-transform: none; }
.add-customer .form-section-title p { margin: 0; font-size: .8rem; line-height: 1.45; }
.form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 20px; align-items: start; }
.form-field { display: grid; gap: 6px; align-content: start; min-width: 0; }
.form-field input, .form-field select, .form-output { box-sizing: border-box; height: 42px; }
.form-field small { font-size: .75rem; line-height: 1.35; }
.form-output { display: flex; align-items: center; min-width: 0; padding: 0 12px; overflow: hidden; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); color: var(--brand-mid); font-size: .85rem; white-space: nowrap; text-overflow: ellipsis; }
.form-contents { display: contents; }
.form-contents[hidden] { display: none; }
.form-break { grid-column: 1 / -1; height: 0; }
.form-actions { display: flex; justify-content: flex-end; padding-top: 18px; border-top: 1px solid var(--border); }
@media (max-width: 1100px) { .add-customer .form-section { grid-template-columns: minmax(0, 1fr); gap: 14px; } }
@media (max-width: 800px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }
.customer-site { color: var(--brand-mid); font-size: .82rem; text-decoration: none; overflow-wrap: anywhere; }
.customer-site:hover { text-decoration: underline; }
.customer-id p { margin: 2px 0 0; }
code.once { padding: 2px 6px; border-radius: 4px; background: var(--neutral-soft); font-family: var(--mono); user-select: all; }
td.clip { max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge.critical { background: var(--critical); color: var(--surface); }
.badge.high { background: var(--high-soft); color: var(--high); }
.badge.medium { background: var(--warning-soft); color: var(--warning); }
.badge.low { background: var(--ok-soft); color: var(--ok); }
.badge.neutral { background: var(--neutral-soft); color: var(--neutral); }
.badge.neutral::before { display: none; }

/* Sample activity chart (demo mode) -------------------------------------- */

.activity-chart { display: block; width: 100%; height: auto; margin-top: 8px; }
.ac-grid { stroke: var(--border); }
.ac-ax { fill: var(--muted); font-size: 11px; }
.ac-area { fill: url(#ac-fill); }
.ac-line { fill: none; stroke: var(--viz); stroke-width: 3; stroke-linejoin: round; }
.ac-stop-top { stop-color: var(--viz); stop-opacity: .45; }
.ac-stop-bottom { stop-color: var(--viz); stop-opacity: 0; }
.ac-hit { fill: transparent; }
.ac-hit:hover { fill: var(--viz); fill-opacity: .08; }

.legend { display: flex; gap: 18px; color: var(--muted); font-size: .8rem; }
.legend i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 2px; background: var(--viz); }
.legend i.blue { background: var(--chart-a); }
.chart {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 200px;
  margin: 22px 0 12px;
  border-bottom: 1px solid var(--border-strong);
  background: repeating-linear-gradient(to top, transparent 0 49px, var(--border) 49px 50px);
}
.bar { flex: 1; min-width: 6px; border-radius: 4px 4px 0 0; background: var(--chart-a); }
.bar:nth-child(3n) { background: var(--chart-b); }
.bar:hover { background: var(--ink); }
.chart-axis { display: flex; justify-content: space-between; color: var(--muted); font-size: .75rem; }

/* Analytics (live mode) -------------------------------------------------- */

.lab-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 0 0 22px; padding: 0 0 22px; border-bottom: 1px solid var(--border); }
.lab-context h2 { margin: 0 0 6px; }
.lab-context p { margin: 0; color: var(--muted); font-size: .825rem; }
.lab-controls { display: flex; align-items: center; gap: 12px; }
.lab-controls label { color: var(--muted); font-size: .825rem; }
.lab-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.lab-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
.lab-wide { grid-column: 1 / -1; }
.lab-timeline { display: flex; align-items: stretch; gap: 4px; height: 220px; margin-top: 15px; padding-top: 20px; border-bottom: 1px solid var(--border-strong); }
.lab-column { display: flex; flex: 1; align-items: flex-end; min-width: 0; }
.lab-column > div { width: 100%; min-height: 0; border-radius: 3px 3px 0 0; background: var(--chart-b); }
.lab-column:hover > div { background: var(--ink); }
.lab-axis { display: flex; justify-content: space-between; gap: 15px; margin-top: 10px; color: var(--muted); font-size: 12px; }
.lab-bars { display: grid; gap: 16px; margin-top: 20px; }
.lab-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; font-size: .875rem; }
.lab-track { grid-column: 1 / -1; height: 8px; overflow: hidden; border-radius: 4px; background: var(--neutral-soft); }
.lab-track > div { height: 100%; border-radius: 4px; background: var(--chart-b); }
.lab-grid .panel:last-child .lab-track > div { background: var(--info); }
.lab-data { margin-top: 18px; }
.lab-data summary { color: var(--muted); font-size: .825rem; cursor: pointer; }
.lab-echart { width: 100%; height: 340px; margin-top: 12px; }
.lab-exports { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.lab-exports .btn { min-height: 34px; padding: 6px 12px; font-size: .775rem; }
.lab-exports [role=status] { color: var(--muted); font-size: .775rem; }

/* Toast ------------------------------------------------------------------ */

#toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 10;
  padding: 12px 18px;
  border-radius: var(--radius);
  background: var(--ink);
  box-shadow: 0 10px 30px #0c1e2b33;
  color: var(--on-ink);
  font-size: .875rem;
}

/* Responsive ------------------------------------------------------------- */

@media (max-width: 1180px) {
  .shell { grid-template-columns: 220px 1fr; }
  .content { padding: 24px 28px 40px; }
  .topbar { padding: 0 28px; }
  .grid { grid-template-columns: minmax(0, 1fr); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-open { row-gap: 26px; }
  .stats-open .stat:nth-child(3) { padding-left: 0; border-left: 0; }
}

@media (max-width: 760px) {
  .shell { display: block; }
  .sidebar { position: static; height: auto; padding: 16px 16px 0; border-right: 0; border-bottom: 1px solid var(--border); }
  .logo { margin: 0 0 14px; }
  .logo img { width: 128px; }
  .brand-lockup img { width: 30px; height: 30px; }
  .brand-lockup { font-size: 1.3rem; }
  .tenant-card, .nav .icon, .user > .avatar { display: none; }
  .sidebar nav { display: flex; gap: 4px; margin: 0 -16px; padding: 0 16px 12px; overflow-x: auto; scrollbar-width: none; }
  .nav { min-height: 38px; padding: 8px 12px; white-space: nowrap; }
  /* In the horizontal menu the pages under HyperIQ AI follow it while one of them is open. */
  .nav-group, .nav-row, .nav-group.open .nav-sub { display: contents; }
  .nav-toggle { display: none; }
  .nav-sub .nav { min-height: 38px; padding: 8px 12px; font-size: .925rem; }
  .topbar { position: static; flex-wrap: wrap; height: auto; padding: 12px 16px; }
  .location { font-size: .8rem; }
  .content { padding: 20px 16px 32px; }
  .demo { align-items: flex-start; }
  .stat-icon-svg { width: 36px; height: 36px; }
  .stats-open .stat { padding: 0 16px; }
  .stats-open .stat:nth-child(odd) { padding-left: 0; border-left: 0; }
  .stats-open .stat-value { font-size: 2.2rem; }
  .heading { flex-direction: column; align-items: flex-start; gap: 16px; }
  h1 { font-size: 1.9rem; }
  .stat { padding: 18px; }
  .stat-value { font-size: 2.1rem; }
  .panel { padding: 18px; }
  .table-wrap { margin: 0 -18px; padding: 0 18px; }
  .panel-head { flex-wrap: wrap; }
  .inventory-toolbar { flex-direction: column; align-items: stretch; }
  .report-list { padding: 4px 18px; }
  .report { grid-template-columns: auto 1fr; }
  .report .badge { display: none; }
  .report .btn { grid-column: 1 / -1; }
  .chart { gap: 4px; height: 160px; }
  .bar { min-width: 0; }
  .bottom { flex-direction: column; gap: 6px; }
  .lab-toolbar { flex-direction: column; align-items: flex-start; gap: 16px; }
  .lab-controls { flex-wrap: wrap; width: 100%; }
  .lab-controls label { flex-basis: 100%; }
  .lab-controls select { flex: 1; }
  .lab-stats, .lab-grid { grid-template-columns: minmax(0, 1fr); }
  .lab-wide { grid-column: auto; }
  .lab-timeline { gap: 2px; height: 170px; }
  .lab-echart { height: 300px; }
}

@media (prefers-reduced-motion: no-preference) {
  .bar, .nav, .btn, .lab-column > div { transition: background-color .15s, color .15s, border-color .15s; }
}

/* Dark theme --------------------------------------------------------------
   Set by the switch in the top bar (theme.js). Only tokens change here. */

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #081825;
  --surface: #101f2c;
  --surface-sunken: #192230;
  --border: #213345;
  --border-strong: #2e4458;
  --border-hover: #45606f;
  --ink: #eef3f5;
  --ink-hover: #ffffff;
  --text: #d3dde3;
  --muted: #9fb1bd;
  --icon: #7f95a3;
  --placeholder: #7f95a3;
  --on-ink: #081825;
  --brand-mid: #6fa58c;
  --brand-ink: #b5c77f;
  --brand-soft: #47816b26;
  --cta: #47816b;
  --cta-hover: #57937b;
  --viz: #14e193;            /* Hypertree mint */
  --viz-icon: #14e193;
  --viz-crit: #ff4d6d;  --viz-high: #ff6b5b;  --viz-med: #fbbf24;  --viz-low: #60a5fa;
  --critical: #f4a29a;  --critical-soft: #f4a29a1c;
  --high: #f7b27a;      --high-soft: #f7b27a1c;
  --warning: #eac48a;   --warning-soft: #eac48a1c;
  --ok: #b5c77f;        --ok-soft: #47816b26;
  --info: #8cbac8;      --info-soft: #8cbac814;  --info-ink: #b9d6e0;
  --info-border: #8cbac833;
  --info-ink-2: #9fbfcb;
  --neutral: #b4c3cc;   --neutral-soft: #ffffff0f;
  --chart-a: #2e4458;
  --ai-bg: #0f2a24;
  --ai-border: #22463c;
  --avatar-bg: #47816b26;
  --notice-bg: #251e0f;
  --notice-border: #4a3a17;
  --notice-ink: #f1d39a;
  --notice-strong: #d99a2b;
  --notice-ring: #d99a2b33;
  --notice-stripe: #ffffff07;
}
:root[data-theme="dark"] .tabs .btn.active { box-shadow: none; background: var(--surface-sunken); }
:root[data-theme="dark"] .logo-light, :root:not([data-theme="dark"]) .logo-dark { display: none; }

/* Theme switch (same pattern as hyperiq.io) */
.theme-switch { position: relative; display: inline-flex; margin-left: 4px; padding-left: 18px; border-left: 1px solid var(--border); cursor: pointer; }
.theme-switch input { position: absolute; width: 0; height: 0; opacity: 0; }
.switch-track {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 56px;
  height: 28px;
  padding: 0 6px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface-sunken);
}
.switch-track .icon { position: relative; z-index: 0; width: 14px; height: 14px; color: var(--muted); stroke-width: 2; }
.switch-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  z-index: 1;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand-mid);
  box-shadow: 0 1px 3px #0c1e2b40;
}
.theme-switch input:checked + .switch-track .switch-knob { transform: translateX(28px); }
.theme-switch:hover .switch-track { border-color: var(--border-hover); }
.theme-switch input:focus-visible + .switch-track { outline: 2px solid var(--brand-ink); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .switch-knob { transition: transform .25s cubic-bezier(.2, .7, .3, 1); }
  body, .panel, .sidebar, .topbar, .stat { transition: background-color .2s, border-color .2s; }
}

/* Discover ---------------------------------------------------------------- */

.discover { display: grid; gap: 20px; }
.discover-bar { display: grid; gap: 12px; padding: 18px 24px; }
.d-bar-row { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 14px; }
.d-bar-row label { display: grid; gap: 6px; color: var(--muted); font-size: .8rem; font-weight: 500; }
.d-bar-row .d-bar-query { flex: 1 1 320px; min-width: 0; }
.discover-bar input, .d-field-search input {
  width: 100%; min-height: 40px; padding: 8px 12px;
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: var(--surface); color: var(--ink); font-size: .9rem;
}
.discover-bar .input-wrap input { padding-left: 38px; font-family: var(--mono); font-size: .85rem; }
.discover-bar input:hover, .d-field-search input:hover { border-color: var(--border-hover); }
.discover-bar .btn { min-height: 40px; }
.d-custom { align-items: center; }
.d-custom > .muted { align-self: flex-end; padding-bottom: 10px; }
.d-help { color: var(--muted); font-size: .8rem; }
.d-help summary { width: fit-content; cursor: pointer; font-weight: 500; }
.d-help ul { display: grid; gap: 6px; margin: 10px 0 0; padding-left: 18px; }
.d-help code { padding: 1px 5px; border-radius: 4px; background: var(--neutral-soft); color: var(--ink); font-family: var(--mono); font-size: .78rem; }
.discover-bar .hunt-chips { margin: 0; }
.d-chip { font-family: var(--mono); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-chip.negated { border-color: var(--critical); background: var(--critical-soft); color: var(--critical); }
#discover-results { display: grid; gap: 20px; min-width: 0; }
#discover-results.is-loading { opacity: .55; pointer-events: none; }
.discover-summary .panel-head { flex-wrap: wrap; margin-bottom: 4px; }
.discover-summary h2 { margin: 0; font-weight: 500; }
.discover-summary h2 strong { font-weight: 700; font-variant-numeric: tabular-nums; }
.d-histogram { max-height: 190px; }
.d-bar { fill: var(--brand-mid); }
.d-zoom { cursor: zoom-in; }
.discover-body { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 20px; align-items: start; }
.discover-fields { position: sticky; top: 80px; max-height: calc(100vh - 96px); padding: 18px; overflow: auto; }
.discover-fields h3 { margin: 16px 0 6px; }
.d-field-search { display: grid; gap: 6px; color: var(--muted); font-size: .8rem; font-weight: 500; }
.d-field { border-bottom: 1px solid var(--border); }
.d-field summary { display: flex; align-items: center; gap: 8px; padding: 5px 0; cursor: pointer; list-style: none; }
.d-field summary::-webkit-details-marker { display: none; }
.d-field summary:hover .d-field-name { color: var(--brand-ink); }
.d-field-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-family: var(--mono); font-size: .78rem; }
.d-field > p { margin: 4px 0 8px; font-size: .75rem; }
.d-field > .link { margin-bottom: 8px; font-size: .78rem; }
.d-top { display: grid; gap: 8px; margin: 0 0 6px; padding: 0; list-style: none; }
.d-top .rank-row { gap: 4px; font-size: .78rem; }
.d-top .rank-row > span { display: block; font-family: var(--mono); }
.d-top .rank-row strong { margin-right: 2px; color: var(--muted); font-weight: 500; }
.d-top .lab-track { height: 4px; margin-top: 3px; }
.discover-docs .panel-head { flex-wrap: wrap; }
.d-table td { padding-top: 9px; padding-bottom: 9px; vertical-align: top; }
.d-table td.d-toggle { width: 28px; padding-right: 4px; }
.d-table .icon-button .icon { transition: none; }
.d-row.open .d-toggle .icon { transform: rotate(90deg); }
.d-row.open td { border-bottom-color: transparent; }
.d-th { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); }
.d-th .icon-button { visibility: hidden; }
th:hover .d-th .icon-button, .d-th .icon-button:focus-visible { visibility: visible; }
.d-record { white-space: normal; font-size: .8rem; line-height: 1.5; }
.d-record > div { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; overflow-wrap: anywhere; }
.d-record b { color: var(--muted); font-family: var(--mono); font-size: .75rem; font-weight: 500; }
.d-detail > td, .d-detail:hover > td { padding: 0 0 16px; background: none; white-space: normal; }
.d-detail-box { padding: 12px 16px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-sunken); }
.d-detail-box .hunt-chips { margin: 0 0 10px; }
.d-kv { white-space: normal; font-size: .8rem; }
.d-kv td { padding: 5px 10px; vertical-align: top; }
.d-kv tr:hover td { background: var(--surface); }
.d-kv .d-kv-actions { width: 84px; white-space: nowrap; text-align: right; }
.d-kv .endpoint { width: 1%; white-space: nowrap; }
.d-kv-value > div { max-height: 168px; overflow: auto; color: var(--ink); overflow-wrap: anywhere; white-space: pre-wrap; }
.d-json { max-height: 480px; margin: 0; padding: 12px 14px; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-family: var(--mono); font-size: .78rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 1180px) {
  .discover-body { grid-template-columns: minmax(0, 1fr); }
  .discover-fields { position: static; max-height: 320px; }
}
@media (max-width: 760px) { .d-bar-row label, .d-bar-row .btn { flex: 1 1 100%; } }

/* Threat intelligence ------------------------------------------------------ */

.ti-wrap, .ti-wrap a, .ti-wrap li { white-space: normal; overflow-wrap: anywhere; }
.ti-wrap { min-width: 240px; max-width: 460px; }
.ti-note { margin-top: 4px; font-size: .78rem; overflow-wrap: anywhere; }
.ti-reports { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: .825rem; }
.ti-credit { margin-top: 14px; }

/* Remediation planner summary (HyperIQ AI) --------------------------------- */

/* The blocks of the summary are cards like the actions below them. */
.workload, .planner-kpis > div, .planner-insights > div { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); }
.planner-summary { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 10px; }
.workload { display: flex; flex-direction: column; padding: 16px 10px 14px; }
/* Links to the other HyperIQ AI pages, at the foot of the chart card. */
.workload-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: auto 0 0; padding: 14px 10px 0; }
.workload-links .muted { margin-right: 4px; font-size: .8rem; }
.workload-links .btn { display: inline-flex; align-items: center; gap: 8px; }
.workload-links .btn .icon { width: 16px; height: 16px; }
.workload-head, .workload-row { display: grid; grid-template-columns: minmax(100px, 150px) minmax(0, 1fr) 3.2rem 5.4rem; align-items: center; gap: 14px; padding: 9px 10px; }
.workload.with-gain .workload-head, .workload.with-gain .workload-row { grid-template-columns: minmax(100px, 150px) minmax(0, 1fr) 3.2rem 5.4rem 3.4rem; }
.workload-head { padding-top: 0; padding-bottom: 4px; font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.workload-head span:nth-child(n+3) { text-align: right; }
.workload-rows { display: grid; gap: 2px; }
.workload-row { width: 100%; border: 0; border-radius: var(--radius-sm); background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.workload-row:hover { background: var(--surface-sunken); }
.workload-row.active { background: var(--brand-soft); }
.workload-name { font-size: .9rem; font-weight: 600; }
.workload-row strong { font-size: 1.05rem; font-variant-numeric: tabular-nums; text-align: right; }
.workload-count { font-size: .8rem; text-align: right; white-space: nowrap; }
.workload-gain { color: var(--brand-mid); font-size: .9rem; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.workload-bar { display: flex; gap: 2px; height: 12px; overflow: hidden; border-radius: 6px; background: var(--neutral-soft); }
.workload-bar i { min-width: 3px; height: 100%; }
.planner .w-p1 { background: var(--critical); }
.planner .w-p2 { background: var(--warning); }
.planner .w-p3 { background: #7f95a3; }
.workload-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 0; padding: 0 10px; font-size: .8rem; }
.workload-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 3px; }
.planner-kpis { display: grid; gap: 10px; }
.planner-kpis > div { padding: 12px 16px; }
.planner-kpis > div > span { display: block; color: var(--muted); font-size: .78rem; }
.planner-kpis strong { display: block; font-size: 1.6rem; font-variant-numeric: tabular-nums; line-height: 1.3; }
.planner-kpis small { display: block; color: var(--muted); font-size: .78rem; }
.planner-kpis small b { color: var(--ink); }
.planner-kpis small b.urgent, .planner-devices b.urgent { color: var(--critical); }
.workload-trend { display: block; width: 100%; height: 40px; margin-top: 8px; }
.kpi-note { margin: 6px 0 0; font-size: .8rem; }
.planner-insights { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-top: 10px; }
.planner-insights > div { padding: 14px 16px; }
.planner-insights h3 { margin-top: 0; }
.planner-insights.single { grid-template-columns: minmax(0, 1fr); }
.planner-insights > div > p { margin: 10px 0 0; font-size: .8rem; }
.planner-devices, .planner-reports { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: .875rem; }
.planner-devices li > div { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 5px; }
.planner-devices li > div > span:last-child { font-size: .8rem; white-space: nowrap; }
.planner-devices .workload-bar { height: 6px; }
.planner-reports li { display: grid; gap: 2px; min-width: 0; }
.planner-reports .muted { font-size: .8rem; }
.planner-note { margin: 16px 0 0; font-size: .8rem; }
@media (max-width: 1100px) { .planner-summary { grid-template-columns: minmax(0, 1fr); } .planner-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .planner-kpis, .planner-insights { grid-template-columns: minmax(0, 1fr); }
  .workload-head { display: none; }
  .workload-row, .workload.with-gain .workload-row { grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px 10px; }
  .workload-bar { grid-column: 1 / -1; grid-row: 2; }
  .workload-count { display: none; }
}

/* Dashboards (Overview) ----------------------------------------------------- */

.dash-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 14px; }
.dash-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dash-pick label { color: var(--muted); font-size: .8rem; font-weight: 600; }
.dash-pick select, .dash-filters select, .dash-filters input, .dash-form input, .dash-form select, .dash-controls select { padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font: inherit; font-size: .875rem; }
.dash-pick select { min-width: 190px; font-weight: 600; }
.dash-live { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .8rem; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-mid); }
.dash-filters, .dash-form { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 16px; margin-bottom: 20px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.dash-filters label, .dash-form label { display: grid; gap: 4px; color: var(--muted); font-size: .75rem; font-weight: 600; }
.dash-filters select, .dash-filters input { min-width: 170px; background: var(--bg); }
.dash-filters .link { padding-bottom: 9px; }
.dash-form { margin-bottom: 14px; border-color: var(--brand-mid); }
.dash-form input { min-width: 240px; background: var(--bg); }
.dash-form > span { align-self: center; font-size: .9rem; }
.dash-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; margin-bottom: 20px; }
.dash-widget { display: flex; flex-direction: column; min-width: 0; grid-column: span 6; }
.dash-widget.size-s { grid-column: span 3; }
.dash-widget.size-l, .dash-empty { grid-column: span 12; }
.dash-widget.panel { padding: 18px 20px; }
.dash-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.dash-head h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1rem; }
/* The figure of a KPI widget carries its own label. */
.dash-widget[data-widget^="kpi-"]:not(.editing) .dash-head { display: none; }
.dash-body { flex: 1; min-width: 0; }
.dash-body > .notice:only-child, .dash-body > p.muted:only-child { margin: 0; }
.dash-kpi, .dash-kpi .stat { height: 100%; }
.dash-kpi .stat { padding: 0; border: 0; background: none; }
.dash-sub { margin: 0 0 10px; font-size: .8rem; }
.dash-alerts { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.dash-alert { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.dash-alert:hover, .dash-alert:focus-visible { border-color: var(--brand-mid); outline: none; }
.dash-alert-text { display: grid; min-width: 0; }
.dash-alert-text b { overflow: hidden; font-size: .875rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.dash-alert-text .muted { font-size: .78rem; }
.dash-alerts .fresh .dash-alert { border-color: var(--critical); background: var(--critical-soft); }
.dash-rank { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.dash-rank button { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; width: 100%; padding: 6px 8px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--ink); font: inherit; font-size: .875rem; text-align: left; cursor: pointer; }
.dash-rank button:hover, .dash-rank button:focus-visible { background: var(--surface-sunken); outline: none; }
.dash-rank .lab-track { display: block; grid-column: 1 / -1; height: 5px; }
.dash-rank .lab-track > span { display: block; height: 100%; border-radius: 4px; background: var(--chart-b); }
.dash-rules { display: grid; gap: 8px; margin: 0 0 8px; padding: 0; list-style: none; font-size: .875rem; }
.dash-rules li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.dash-rule-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-identity { display: grid; gap: 6px; font-size: .85rem; }
.dash-identity strong { font-size: 2.3rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.dash-identity .danger { color: var(--critical); }
.dash-identity .workload-bar { margin: 4px 0; }
.dash-identity .w-p1 { background: var(--critical); }
.dash-identity .w-ok { background: var(--brand-mid); }
.dash-posture { display: flex; flex-direction: column; align-items: center; }
.dash-posture .score-dial { width: 150px; height: 150px; }
.dash-posture .score-center strong { font-size: 2.1rem; }
.dash-controls { display: flex; align-items: center; gap: 8px; font-size: .8rem; }
.dash-controls select { padding: 4px 6px; font-size: .8rem; }
.dash-handle { color: var(--icon); font-size: 1.1rem; cursor: grab; }
.dash-widget.editing { outline: 1px dashed var(--border-strong); outline-offset: 5px; cursor: grab; }
.dash-widget.bare.editing .dash-head { margin-bottom: 8px; }
.dash-widget.dragging { opacity: .45; }
.dash-widget.drop-target { outline: 2px solid var(--brand-mid); }
/* Event details: a panel over the page, from the right. */
.dash-event { position: fixed; inset: 0; z-index: 30; display: grid; justify-items: end; background: #0c1e2b99; }
.dash-event-box { width: min(760px, 100%); height: 100vh; overflow: auto; border-width: 0 0 0 1px; border-radius: 0; }
.dash-event-box .dash-event-title { margin: 6px 0 14px; color: var(--ink); font-size: 1.15rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.dash-fields { margin: 16px 0; }
@media (max-width: 1180px) {
  .dash-widget { grid-column: span 12; }
  .dash-widget.size-s { grid-column: span 6; }
}
@media (max-width: 760px) { .dash-widget.size-s { grid-column: span 12; } .dash-filters select, .dash-filters input, .dash-form input { min-width: 0; width: 100%; } .dash-filters label, .dash-form label { flex: 1 1 100%; } }
.dash-event-box .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 14px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.dash-event-box .facts div { padding: 0; border: 0; }
.dash-event-box .facts dt { color: var(--muted); font-size: .75rem; font-weight: 600; }
.dash-event-box .facts dd { margin: 2px 0 0; }
/* Edit layout: the cross at the top right corner of a widget removes it. */
.dash-widget { position: relative; }
.dash-x { position: absolute; top: -10px; right: -10px; z-index: 2; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid var(--border-strong); border-radius: 50%; background: var(--surface); color: var(--muted); cursor: pointer; }
.dash-x .icon { width: 14px; height: 14px; }
.dash-x:hover, .dash-x:focus-visible { border-color: var(--critical); background: var(--critical); color: var(--surface); outline: none; }

/* Authentication analysis ---------------------------------------------------- */

#id-clusters { display: grid; gap: 10px; margin-bottom: 12px; }
.id-cluster[data-level="high"] { border-left: 3px solid var(--critical); }
.id-cluster[data-level="medium"] { border-left: 3px solid var(--warning); }
.id-cluster[data-level="low"] { border-left: 3px solid #7f95a3; }
.id-factors { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: .875rem; }
.id-factors b { display: inline-block; min-width: 2.6rem; font-variant-numeric: tabular-nums; }
.id-factors .plus { color: var(--critical); }
.id-factors .minus { color: var(--brand-mid); }
.id-benign { display: grid; gap: 14px; margin: 0 0 12px; padding: 0; list-style: none; }
.id-benign li > div { display: flex; justify-content: space-between; gap: 12px; }
.id-benign .hunt-chips { margin: 6px 0 0; }
.id-events { margin-top: 10px; }
.id-event-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.id-timeline { display: flex; align-items: flex-end; gap: 3px; height: 150px; }
.id-column { display: flex; flex: 1; flex-direction: column-reverse; justify-content: flex-start; gap: 1px; height: 100%; min-width: 0; }
.id-column i { display: block; min-height: 0; border-radius: 2px; }
.id-failed { background: var(--critical); }
.id-ok { background: var(--brand-mid); }
.id-key { display: inline-block; width: 10px; height: 10px; margin: 0 5px 0 12px; border-radius: 3px; }
.id-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); margin-bottom: 0; }
@media (max-width: 1100px) { .id-grid { grid-template-columns: minmax(0, 1fr); } }

/* Executive risk report ------------------------------------------------------ */

.exec-figures { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.exec-figures > div { padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.exec-figures span { display: block; color: var(--muted); font-size: .78rem; font-weight: 600; }
.exec-figures strong { display: block; margin: 4px 0 2px; font-size: 2rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.exec-figures small { display: block; color: var(--muted); font-size: .78rem; }
.exec-figures .danger, .exec-frameworks .danger { color: var(--critical); }
.exec-posture-grid { display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: 36px; align-items: center; }
.exec-pillars { gap: 14px; }
.exec-heat { width: 100%; border-collapse: separate; border-spacing: 3px; }
.exec-heat th, .exec-heat td { padding: 8px 10px; border: 0; font-size: .85rem; }
.exec-heat thead th { color: var(--muted); font-size: .72rem; font-weight: 600; text-align: center; }
.exec-heat thead th:first-child, .exec-heat tbody th { text-align: left; font-weight: 500; white-space: nowrap; }
.exec-heat td { min-width: 96px; border-radius: 4px; color: var(--ink); font-variant-numeric: tabular-nums; text-align: center; }
/* One hue, darker for more; the number is always in the cell. */
.heat-0 { background: var(--neutral-soft); }
.heat-1 { background: color-mix(in srgb, var(--critical) 14%, var(--surface)); }
.heat-2 { background: color-mix(in srgb, var(--critical) 30%, var(--surface)); }
.heat-3 { background: color-mix(in srgb, var(--critical) 50%, var(--surface)); }
.heat-4 { background: color-mix(in srgb, var(--critical) 74%, var(--surface)); font-weight: 700; }
.exec-heat td.heat-0 { color: var(--muted); }
.exec-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 12px 0 0; font-size: .78rem; }
.exec-legend i { display: inline-block; width: 22px; height: 12px; border-radius: 3px; }
.exec-frameworks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.exec-frameworks article { padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); }
.exec-frameworks h3 { margin: 0 0 6px; color: var(--ink); font-size: 1rem; letter-spacing: 0; text-transform: none; }
.exec-frameworks p { margin: 0 0 10px; font-size: .85rem; }
.exec-frameworks ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: .8rem; }
.exec-frameworks li { display: flex; justify-content: space-between; gap: 10px; }
.exec-foot { margin-top: 16px; font-size: .8rem; }
.report a.btn { text-decoration: none; }
@media (max-width: 1180px) { .exec-figures { grid-template-columns: repeat(3, minmax(0, 1fr)); } .exec-frameworks { grid-template-columns: repeat(2, minmax(0, 1fr)); } .exec-posture-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .exec-figures, .exec-frameworks { grid-template-columns: minmax(0, 1fr); } }
/* Printed, the report is the page: navigation and controls are left out and panels do not break across pages. */
@media print {
  .sidebar, .topbar, .heading, .bottom, .demo, .no-print, #toast { display: none !important; }
  .shell { display: block; }
  .content { max-width: none; padding: 0; }
  .panel, .exec-figures > div, .exec-frameworks article { break-inside: avoid; }
  .exec-heat td, .exec-legend i, .lab-track > div, .score-gauge, .badge { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* The menu scrolls inside the sidebar when the window is shorter than its items. */
@media (min-width: 761px) { .sidebar { overflow-y: auto; scrollbar-width: thin; } }

/* My account, Users and the Audit log ---------------------------------------- */

.acct-form { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin: 12px 0; }
.acct-form label { display: grid; gap: 4px; color: var(--muted); font-size: .75rem; font-weight: 600; }
.acct-form input, .acct-add input, .acct-add select { min-width: 220px; padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg); color: var(--ink); font: inherit; font-size: .9rem; }
.acct-form input:focus, .acct-add input:focus { outline: 2px solid var(--brand-mid); outline-offset: 1px; }
.acct-search { margin: 0; }
/* Dark modules on white in both themes: authenticator apps read a QR code reliably only that way round. */
.acct-qr { width: 184px; margin: 8px 0 4px; padding: 0; border-radius: var(--radius-sm); background: #fff; line-height: 0; }
.acct-qr svg { display: block; width: 100%; height: auto; }
.acct-secret { display: inline-block; margin: 6px 0; padding: 8px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg); color: var(--ink); font-family: var(--mono); font-size: 1rem; letter-spacing: .06em; user-select: all; overflow-wrap: anywhere; }
.acct-codes { display: grid; grid-template-columns: repeat(4, max-content); gap: 8px 24px; margin: 12px 0 16px; padding: 0; list-style: none; font-family: var(--mono); font-size: 1rem; }
.acct-steps { margin-top: 6px; }
.acct-error { margin: 12px 0 0; }
.acct-result { margin-bottom: 14px; }
.acct-result p { margin: 6px 0 0; }
.acct-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.acct-facts div { padding: 0; border: 0; }
.acct-facts dt { color: var(--muted); font-size: .75rem; font-weight: 600; }
.acct-facts dd { margin: 2px 0 0; }
.acct-actions { white-space: nowrap; }
.acct-actions .link { margin-right: 10px; }
.acct-disabled td:first-child { text-decoration: line-through; color: var(--muted); }
a.user-name { color: var(--ink); text-decoration: none; }
a.user-name:hover { text-decoration: underline; text-underline-offset: 3px; }
#login-code-row { display: grid; gap: 8px; }
#login-code-row[hidden] { display: none; }
@media (max-width: 760px) { .acct-codes { grid-template-columns: repeat(2, max-content); } .acct-facts { grid-template-columns: minmax(0, 1fr); } .acct-form input { min-width: 0; width: 100%; } .acct-form label { flex: 1 1 100%; } }

/* Removing offline devices (HyperIQ staff). */
.btn-remove { border-color: var(--critical); color: var(--critical); background: transparent; }
.btn-remove:disabled { opacity: .5; }
.device-title .btn-remove { margin-left: auto; }
.device-remove-bar { align-items: center; }
th.pick, td.pick { width: 36px; text-align: center; }
/* Above the row's stretched device link (.device-link::after), so the checkbox gets the click instead of opening the device. */
.device-row td.pick { position: relative; z-index: 1; cursor: default; }
td.pick input, th.pick input { width: 18px; height: 18px; cursor: pointer; }
.remove-warning { max-width: 560px; width: calc(100% - 32px); border: 1px solid var(--critical); border-radius: 12px; background: var(--panel, var(--surface)); color: inherit; padding: 22px; }
.remove-warning::backdrop { background: rgba(0, 0, 0, .55); }
.remove-warning h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; color: var(--critical); }
.remove-list { max-height: 200px; overflow: auto; margin: 10px 0; padding-left: 18px; }
.remove-ack { display: flex; align-items: center; gap: 8px; margin: 14px 0; font-weight: 600; }
.remove-actions { display: flex; justify-content: flex-end; gap: 10px; }

/* Discover: field suggestions under the query box. */
.d-suggest { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30; max-height: 320px; margin: 0; padding: 4px; overflow-y: auto; list-style: none; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); box-shadow: 0 12px 32px #08182529; }
.d-suggest li { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: var(--radius-sm); cursor: pointer; font-family: var(--mono); font-size: .82rem; }
.d-suggest li.active, .d-suggest li:hover { background: var(--brand-soft); }
.d-suggest-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.d-suggest mark { background: none; color: var(--brand-ink); font-weight: 700; }
.d-suggest-seen { color: var(--viz, var(--brand-mid)); font-size: .6rem; }
.d-suggest-type { flex: none; padding: 1px 7px; border-radius: 999px; background: var(--neutral-soft); color: var(--muted); font-family: var(--font); font-size: .72rem; }

/* VirusTotal lookups and the triage of the files it does not know. */
.vt-summary { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-sunken); color: var(--text); }
.vt-summary .icon { flex: none; color: var(--icon); }
.vt-summary span { flex: 1 1 320px; }
.triage-table .file-cell { max-width: 420px; }
.triage-table .file-cell .clip { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: .82rem; }
.triage-table .file-cell small { display: block; margin-top: 2px; }
.triage-select { min-height: 32px; padding: 2px 8px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); }
.badge.triage-pending { background: var(--neutral-soft); color: var(--neutral); }
.badge.triage-trusted { background: var(--ok-soft); color: var(--ok); }
.badge.triage-suspicious { background: var(--critical-soft); color: var(--critical); }
.sandbox-cell { white-space: nowrap; }
.sandbox-cell .btn { min-height: 30px; padding: 4px 12px; }
@keyframes score-pop { from { opacity: 0; translate: -6px 0; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { .sidebar-score-pop { animation: none; } }
@keyframes nav-tip { from { opacity: 0; translate: -6px -50%; } to { opacity: 1; translate: 0 -50%; } }
@media (prefers-reduced-motion: reduce) { .nav-tip { animation: none; } }

/* Posture index: where the points come from, and how each pillar is calculated. */
.score-split { display: grid; gap: 8px; align-self: stretch; margin-top: 14px; }
.score-split h3 { margin: 0; }
.split-bar { display: flex; gap: 2px; height: 10px; overflow: hidden; border-radius: 5px; background: var(--neutral-soft); }
.split-seg { height: 100%; }
.split-0 { background: var(--viz); }
.split-1 { background: color-mix(in srgb, var(--viz) 78%, var(--surface)); }
.split-2 { background: color-mix(in srgb, var(--viz) 58%, var(--surface)); }
.split-3 { background: color-mix(in srgb, var(--viz) 40%, var(--surface)); }
.split-4 { background: color-mix(in srgb, var(--viz) 25%, var(--surface)); }
.split-missing { background: var(--neutral-soft); border: 1px solid var(--border-strong); }
.split-rows { display: grid; gap: 7px; margin: 2px 0 0; padding: 0; list-style: none; font-size: .8rem; }
.split-rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 3px 8px; }
.split-name { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.split-name i { flex: none; width: 9px; height: 9px; border-radius: 2px; }
.split-points { font-variant-numeric: tabular-nums; white-space: nowrap; }
.split-points b { color: var(--ink); }
.split-track { grid-column: 1 / -1; height: 4px; overflow: hidden; border-radius: 2px; background: var(--neutral-soft); }
.split-track > span { display: block; height: 100%; border-radius: 2px; }
.split-missing-row { padding-top: 6px; border-top: 1px solid var(--border); }
.pillar-how { margin-top: 8px; font-size: .82rem; }
.pillar-how summary { width: max-content; color: var(--brand-ink); font-weight: 600; cursor: pointer; }
.pillar-how-body { display: grid; gap: 8px; margin-top: 8px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface); }
.pillar-how-body p { margin: 0; line-height: 1.45; }
.pillar-how-body h4 { margin: 6px 0 0; font-size: .8rem; }
.pillar-worst { font-size: .8rem; }
.pillar-worst .num { text-align: right; font-variant-numeric: tabular-nums; }
.pillar-whatif { display: grid; gap: 4px; margin: 0; padding-left: 18px; }
.pillar-worst-wrap { overflow-x: auto; }
.fleet-how { margin: 0 0 18px; }
.fleet-how summary { cursor: pointer; }
.fleet-how > p { margin: 10px 0; font-size: .85rem; }
.fleet-how-table .num { text-align: right; }
.fleet-how-table tfoot td { font-weight: 700; border-top: 1px solid var(--border-strong); }
.exec-how { display: grid; gap: 2px; margin-top: 6px; color: var(--muted); font-size: .78rem; line-height: 1.4; }
.exec-how p { margin: 0; }
.trend-change { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 3 3; }
.trend-change-key { display: inline-block; width: 0; height: 10px; margin-right: 6px; border-left: 2px dashed var(--muted); vertical-align: middle; }
.pillar-worst thead tr:first-child th[colspan] { text-align: center; }
.pillar-sections { font-size: .8rem; }
.pillar-sections .num { text-align: right; font-variant-numeric: tabular-nums; }
.pillar-settings summary { color: var(--brand-ink); cursor: pointer; }
.pillar-settings ul { display: grid; gap: 3px; max-height: 280px; margin: 6px 0 0; padding-left: 18px; overflow-y: auto; }
.pillar-settings p { margin: 4px 0 0; }
/* Dashboard custom period. */
.dash-custom { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.dash-custom[hidden] { display: none; }
.dash-custom label { display: grid; gap: 4px; color: var(--muted); font-size: .8rem; font-weight: 600; }
.dash-custom input { min-height: 38px; padding: 6px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); }
#dash-range-note { align-self: center; font-size: .8rem; }

/* Security activity by severity (dashboard). */
.sev-chart .sev-critical { fill: var(--viz-crit); }
.sev-chart .sev-high { fill: var(--viz-high); }
.sev-chart .sev-medium { fill: var(--viz-med); }
.sev-chart .sev-low { fill: var(--viz-low); }
.sev-chart .sev-bar.partial { opacity: .45; }
.sev-chart .sev-hit { fill: transparent; }
.sev-chart .sev-bar:hover .sev-hit { fill: var(--ink); fill-opacity: .06; }
.sev-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 4px 0 10px; font-size: .8rem; color: var(--muted); }
.sev-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sev-legend b { color: var(--ink); }
.sev-legend i { width: 10px; height: 10px; border-radius: 2px; }
.sev-legend i.sev-critical { background: var(--viz-crit); }
.sev-legend i.sev-high { background: var(--viz-high); }
.sev-legend i.sev-medium { background: var(--viz-med); }
.sev-legend i.sev-low { background: var(--viz-low); }