/* Design tokens + light/dark theme on top of Pico.css */
:root, [data-theme="light"] {
  --rmm-accent: #2f6fdb;
  --rmm-accent-soft: #eaf1fc;
  --rmm-surface: #ffffff;
  --rmm-surface-2: #f6f8fc;
  --rmm-border: #e2e6ef;
  --rmm-text: #1a2233;
  --rmm-muted: #5b6470;
  --rmm-ok-bg: #dcfce7; --rmm-ok-fg: #166534;
  --rmm-warn-bg: #fef9c3; --rmm-warn-fg: #854d0e;
  --rmm-crit-bg: #fee2e2; --rmm-crit-fg: #991b1b;
  --rmm-off-bg: #eef0f5; --rmm-off-fg: #6b7280;
  --rmm-info-bg: #dbeafe; --rmm-info-fg: #1e40af;
  --pico-primary: var(--rmm-accent);
}
[data-theme="dark"] {
  /* NOC×dense dark palette (gekozen referentie artifact 0ae771aa) */
  --rmm-accent: #3b9eff;
  --rmm-accent-soft: #16233a;
  --rmm-surface: #0e131c;
  --rmm-surface-2: #0a0e14;
  --rmm-border: #1c2634;
  --rmm-text: #e8eef6;
  --rmm-muted: #7e8aa8;
  --rmm-ok-bg: #10271f; --rmm-ok-fg: #34d399;
  --rmm-warn-bg: #2f2713; --rmm-warn-fg: #f5b942;
  --rmm-crit-bg: #311a20; --rmm-crit-fg: #f15b5b;
  --rmm-off-bg: #161f2b; --rmm-off-fg: #55657a;
  --rmm-info-bg: #16233a; --rmm-info-fg: #7fc0ff;
  --pico-primary: var(--rmm-accent);
  background: var(--rmm-surface-2);
  color: var(--rmm-text);
}

/* ===================================================================
   NOC × dense shell — matches rmm-noc-agent1.html.
   Token-driven: dark theme paints the NOC look, light theme stays readable.
   Mono for data/values, sans for labels/chrome.
   =================================================================== */
:root { --rmm-mono: "SFMono-Regular", ui-monospace, "Cascadia Mono", "Consolas", "Liberation Mono", Menlo, monospace; }

/* App shell: sidebar + content (used by base.html) */
.rmm-shell { display: grid; grid-template-columns: 216px 1fr; min-height: 100vh; }
.rmm-sidebar {
  background: var(--rmm-surface); border-right: 1px solid var(--rmm-border);
  padding: 0; display: flex; flex-direction: column; gap: 0;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
/* dark theme: the demo's subtle top-to-bottom gradient on the rail */
[data-theme="dark"] .rmm-sidebar { background: linear-gradient(180deg, #0c1119, var(--rmm-surface-2)); }

/* Brand: a small logo tile + wordmark. The leading ● in the markup becomes the tile glyph. */
.rmm-sidebar .brand {
  display: flex; align-items: center; gap: 10px;
  color: var(--rmm-text); text-decoration: none; margin: 0; padding: 13px 16px 12px;
  border-bottom: 1px solid var(--rmm-border);
}
.rmm-sidebar .brand .brand-logo {
  width: 30px; height: 30px; border-radius: 8px; flex: 0 0 auto;
  display: grid; place-items: center; color: var(--rmm-accent);
  /* Light theme: soft accent tile on white. Dark theme overrides below with deep-blue gradient. */
  background: var(--rmm-accent-soft); border: 1px solid var(--rmm-border);
  box-shadow: 0 0 0 1px var(--rmm-accent-soft) inset;
  transition: border-color .12s, box-shadow .12s;
}
[data-theme="dark"] .rmm-sidebar .brand .brand-logo {
  background: linear-gradient(135deg, #1c3a5e, #0f2238);
  border-color: #25456b;
  box-shadow: 0 0 0 1px rgba(59, 158, 255, .06) inset;
}
.rmm-sidebar .brand:hover .brand-logo {
  border-color: var(--rmm-accent);
  box-shadow: 0 0 0 1px var(--rmm-accent) inset;
}
.rmm-sidebar .brand .brand-wordmark { display: flex; flex-direction: column; min-width: 0; }
.rmm-sidebar .brand .brand-name {
  font-weight: 700; letter-spacing: .3px; font-size: 14px; color: var(--rmm-text); line-height: 1.15;
}
.rmm-sidebar .brand .brand-sub {
  font-size: 10px; text-transform: uppercase; letter-spacing: 1.4px;
  color: var(--rmm-muted); margin-top: 1px; line-height: 1.2;
}

.rmm-sidebar nav { padding: 10px; display: flex; flex-direction: column; gap: 1px; }
.rmm-sidebar a.navlink {
  display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 7px;
  color: var(--rmm-muted); font-size: 13px; font-weight: 500; text-decoration: none;
  border: 1px solid transparent; transition: background .12s, color .12s;
}
.rmm-sidebar a.navlink:hover { background: var(--rmm-surface-2); color: var(--rmm-text); }
[data-theme="dark"] .rmm-sidebar a.navlink:hover { background: var(--rmm-off-bg); }
.rmm-sidebar a.navlink[aria-current="page"] {
  background: var(--rmm-accent-soft); color: var(--rmm-accent); font-weight: 600;
  border-color: var(--rmm-accent-soft);
}
[data-theme="dark"] .rmm-sidebar a.navlink[aria-current="page"] { color: #cfe6ff; }
.rmm-sidebar a.navlink .navico { flex: 0 0 auto; opacity: .78; }
.rmm-sidebar a.navlink[aria-current="page"] .navico { opacity: 1; color: var(--rmm-accent); }
/* mark = the per-link count pill (pending / status problems) */
.rmm-sidebar a.navlink mark {
  margin-left: auto; font-family: var(--rmm-mono); font-size: 10.5px; font-weight: 600;
  background: var(--rmm-off-bg); color: var(--rmm-muted);
  padding: 1px 6px; border-radius: 20px; border: 1px solid var(--rmm-border);
}
.rmm-sidebar a.navlink[aria-current="page"] mark { background: var(--rmm-accent-soft); color: var(--rmm-accent); border-color: transparent; }
.rmm-sidebar .navgrp { margin: 12px 2px 5px; padding: 0 8px; font-size: 9.5px; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--rmm-off-fg); font-weight: 600; }
.rmm-sidebar nav .navgrp:first-child { margin-top: 2px; }
.rmm-sidebar .spacer { flex: 1; }
.rmm-sidebar .who { color: var(--rmm-muted); font-size: .8rem; font-weight: 600; }

.rmm-content { padding: 14px 18px 20px; min-width: 0; }

/* Footer: user (name + abbreviated role) sits on one row beside the Log out button. */
.rmm-footer-user { display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  flex-wrap: wrap; padding: 12px 14px 4px; margin-top: auto; border-top: 1px solid var(--rmm-border); }
.rmm-footer-user .rmm-footer-btn { margin-top: 0; }
/* MFA link in the footer is a navlink but should not stretch full width */
.rmm-footer-user a.navlink { padding: 4px 8px; font-size: 12px; }

/* ---------- KPI tiles (.rmm-stat) — NOC tile: icon+label on top, big mono value, muted sub-line.
   Accent rail on the left edge; status variants tint the icon/value. ---------- */
.rmm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 11px; margin-bottom: 13px; }
.rmm-stat {
  background: var(--rmm-surface); border: 1px solid var(--rmm-border); border-radius: 11px;
  padding: 10px 13px; min-width: 0; position: relative; overflow: hidden;
}
[data-theme="dark"] .rmm-stat { background: linear-gradient(180deg, var(--rmm-surface), #0c121b); }
.rmm-stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--rmm-accent); opacity: 0; transition: opacity .12s; }
.rmm-stat .l { display: flex; align-items: center; gap: 6px; order: -1;
  font-size: .64rem; letter-spacing: .6px; text-transform: uppercase; color: var(--rmm-muted); margin: 0 0 4px; }
.rmm-stat .l .rmm-stat-ic { flex: 0 0 auto; opacity: .85; }
.rmm-stat .n { font-family: var(--rmm-mono); font-size: 1.55rem; font-weight: 600; line-height: 1;
  letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.rmm-stat .s { font-size: .66rem; color: var(--rmm-muted); margin-top: 3px; }
/* status-tinted icons so the strip reads at a glance */
.rmm-stat[data-kind="ok"] .l .rmm-stat-ic { color: var(--rmm-ok-fg); }
.rmm-stat[data-kind="warn"] .l .rmm-stat-ic { color: var(--rmm-warn-fg); }
.rmm-stat[data-kind="crit"] .l .rmm-stat-ic { color: var(--rmm-crit-fg); }
.rmm-stat[data-kind="neutral"] .l .rmm-stat-ic { color: var(--rmm-muted); }
/* Informative tiles also tint the big value to match the icon (status tiles set it inline). */
.rmm-stat[data-kind="ok"] .n { color: var(--rmm-ok-fg); }
.rmm-stat[data-kind="warn"] .n { color: var(--rmm-warn-fg); }
.rmm-stat[data-kind="crit"] .n { color: var(--rmm-crit-fg); }
.rmm-stat[data-kind="neutral"] .n { color: var(--rmm-muted); }
a.rmm-stat { text-decoration: none; color: inherit; cursor: pointer; }
a.rmm-stat:hover { border-color: var(--rmm-accent); }
a.rmm-stat:hover::before { opacity: .5; }
.rmm-stat-active { border-color: var(--rmm-accent); }
.rmm-stat-active::before { opacity: 1; }
/* auto-fit + minmax(150px) handles wrapping across widths; keep a 2-col floor on very narrow
   screens so tiles don't get squeezed below readability. */
@media (max-width: 560px) { .rmm-stats { grid-template-columns: repeat(2, 1fr); } }

/* ---------- NOC layout: device-table panel (1fr) + overview rail (312px) ----------
   Collapses to a single column under ~1000px so on mobile the rail stacks BELOW the table. */
/* Startpagina: tabbladen op volle breedte (de rechterkolom met meldingen/SNMP is per 0.214.0 een tabblad). */
.rmm-grid-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }

/* Panel — the shared card used by both the table and the rail blocks. */
.rmm-panel { background: var(--rmm-surface); border: 1px solid var(--rmm-border); border-radius: 12px;
  overflow: hidden; min-width: 0; }
[data-theme="dark"] .rmm-panel { background: linear-gradient(180deg, var(--rmm-surface), #0c121b); }
.rmm-panel-head { display: flex; align-items: center; gap: 10px; padding: 9px 14px;
  border-bottom: 1px solid var(--rmm-border); }
.rmm-panel-head h2 { font-size: 13.5px; font-weight: 700; margin: 0; letter-spacing: .2px; }
.rmm-panel-count { font-family: var(--rmm-mono); font-size: 11px; color: var(--rmm-muted);
  background: var(--rmm-surface-2); border: 1px solid var(--rmm-border); border-radius: 6px; padding: 1px 7px; }
.rmm-panel-actions { margin: 0 0 0 auto; padding: 0; }
/* This actions row carries both .rmm-filters and .rmm-panel-actions; .rmm-filters (later in this
   file) sets flex-wrap:wrap + align-items:end, which would wrap the Kolommen button below the
   search box. Combined-class selector (higher specificity) keeps them on one row, vertically centred. */
.rmm-panel-actions.rmm-filters { flex-wrap: nowrap; align-items: center; }
.rmm-panel-actions input[type="search"] { margin: 0; max-width: 16rem; }
/* The table panel hosts the scrolling table directly; drop the wrap's own border (panel owns it). */
.rmm-panel > .rmm-table-wrap { border: 0; border-radius: 0; background: transparent; }
.rmm-panel-foot { padding: 10px 14px; border-top: 1px solid var(--rmm-border); text-align: center; }
.rmm-panel-foot a { font-size: 11.5px; color: var(--rmm-accent); font-weight: 600; text-decoration: none; }
.rmm-panel-foot a:hover { text-decoration: underline; }

/* Infra · SNMP compact list */
.rmm-infra-list { padding: 6px; display: flex; flex-direction: column; }
.rmm-infra-item { display: flex; align-items: center; gap: 11px; padding: 6px 9px; border-radius: 8px;
  color: inherit; text-decoration: none; }
.rmm-infra-item:hover { background: var(--rmm-surface-2); }
[data-theme="dark"] .rmm-infra-item:hover { background: var(--rmm-off-bg); }
.rmm-infra-ico { width: 30px; height: 30px; border-radius: 7px; flex: 0 0 auto; display: grid; place-items: center;
  background: var(--rmm-surface-2); border: 1px solid var(--rmm-border); color: var(--rmm-muted); }
.rmm-infra-meta { min-width: 0; flex: 1 1 auto; }
.rmm-infra-meta .nm { font-family: var(--rmm-mono); font-size: 12px; font-weight: 600;
  display: flex; align-items: center; gap: 7px; }
.rmm-infra-meta .ds { font-size: 10.5px; color: var(--rmm-muted); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rmm-infra-val { font-family: var(--rmm-mono); font-size: 12px; font-weight: 600; text-align: right; white-space: nowrap; }
.rmm-infra-val.ok { color: var(--rmm-ok-fg); }
.rmm-infra-val.warn { color: var(--rmm-warn-fg); }
.rmm-infra-val.critical { color: var(--rmm-crit-fg); }
.rmm-infra-val.muted { color: var(--rmm-muted); }
.rmm-infra-empty { padding: 10px 12px; font-size: 12px; color: var(--rmm-muted); }
.rmm-mini-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.rmm-mini-dot.ok { background: var(--rmm-ok-fg); box-shadow: 0 0 5px var(--rmm-ok-fg); }
.rmm-mini-dot.warn { background: var(--rmm-warn-fg); }
.rmm-mini-dot.critical { background: var(--rmm-crit-fg); }
.rmm-mini-dot.offline { background: var(--rmm-off-fg); }

/* Recente meldingen feed */
.rmm-feed { padding: 6px; display: flex; flex-direction: column; }
.rmm-feed-item { display: flex; gap: 11px; padding: 6px 9px; border-radius: 8px; }
.rmm-feed-item:hover { background: var(--rmm-surface-2); }
[data-theme="dark"] .rmm-feed-item:hover { background: var(--rmm-off-bg); }
.rmm-fdot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex: 0 0 auto; }
.rmm-fdot.ok { background: var(--rmm-ok-fg); }
.rmm-fdot.warn { background: var(--rmm-warn-fg); }
.rmm-fdot.crit { background: var(--rmm-crit-fg); }
.rmm-fdot.info { background: var(--rmm-info-fg); }
.rmm-fdot.off { background: var(--rmm-off-fg); }
.rmm-feed-item .ftxt { font-size: 12px; color: var(--rmm-muted); line-height: 1.4; }
.rmm-feed-item .ftxt b { color: var(--rmm-text); font-weight: 600; }
.rmm-feed-item .ftime { font-size: 10px; color: var(--rmm-off-fg); margin-top: 2px; font-family: var(--rmm-mono); }
.rmm-feed-empty { padding: 10px 12px; font-size: 12px; color: var(--rmm-muted); }

/* ---------- Inline CPU%/Mem% meter bar (dense data table) — small track that fills + colours by load.
   Right-aligned in its numeric cell; mono tabular value next to a fixed-width bar. ---------- */
.rmm-num, td.rmm-num, th.rmm-num { text-align: right; }
/* Numeric HEADER cells must right-align too: the base `table[role="grid"] thead th` rule
   (text-align:left) outranks `th.rmm-num` on specificity, so without this more-specific
   override the header sat left while its value sat right -> the value drifted out from under
   the column header (CPU%/Mem%/Uptime/Vrije schijf). */
table[role="grid"] thead th.rmm-num { text-align: right; }

/* ---------- Device-list column chooser ---------- */
.rmm-col-hidden { display: none; }
.rmm-colpick { position: relative; display: inline-block; }
.rmm-colpick > summary { list-style: none; cursor: pointer; margin: 0; }
.rmm-colpick > summary::-webkit-details-marker { display: none; }
/* Pico forces summary[role=button] to width:100% + text-align:left with a float:right chevron
   (::after). In this tight actions row that drops the chevron onto a second line and inflates the
   button height so it no longer lines up with the search box. Override with enough specificity to
   beat Pico (.rmm-colpick > summary[role=button] = 0,2,1 > Pico's 0,1,2): shrink to content and lay
   the label + chevron out inline-flex so the button matches the search-box height. */
.rmm-colpick > summary[role=button] { width: auto; display: inline-flex; align-items: center; white-space: nowrap; }
.rmm-colpick > summary[role=button]::after { float: none; margin: 0 0 0 6px; }
.rmm-colpick-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
  background: var(--rmm-surface-2); border: 1px solid var(--rmm-border); border-radius: 10px;
  padding: 8px 10px; min-width: 168px; box-shadow: 0 8px 24px rgba(0,0,0,.45);
  display: grid; gap: 5px; max-height: 60vh; overflow: auto;
}
.rmm-colpick-menu label { display: flex; align-items: center; gap: 8px; font-size: 12px; white-space: nowrap; cursor: pointer; }
.rmm-colpick-menu input { margin: 0; }

.rmm-meter { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; }
.rmm-meter .mv { font-family: var(--rmm-mono); font-size: 11.5px; min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; }
.rmm-meter .bar { width: 46px; height: 5px; border-radius: 3px; background: var(--rmm-off-bg); overflow: hidden; flex: 0 0 auto; }
.rmm-meter .bar i { display: block; height: 100%; border-radius: 3px; background: var(--rmm-accent); transition: width .2s; }
.rmm-meter.hi .bar i { background: var(--rmm-warn-fg); }
.rmm-meter.crit .bar i { background: var(--rmm-crit-fg); }
.rmm-meter.off .mv { color: var(--rmm-off-fg); }
.rmm-meter.off .bar i { background: transparent; }

/* ---------- Status dot (devices list) — crisp, glow on ok/warn like the demo ---------- */
.rmm-dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; flex: 0 0 auto; vertical-align: middle; }
.rmm-dot.ok { background: var(--rmm-ok-fg); box-shadow: 0 0 7px var(--rmm-ok-fg); }
.rmm-dot.warning { background: var(--rmm-warn-fg); box-shadow: 0 0 6px var(--rmm-warn-fg); }
.rmm-dot.critical { background: var(--rmm-crit-fg); box-shadow: 0 0 6px var(--rmm-crit-fg); }
.rmm-dot.offline { background: var(--rmm-off-fg); box-shadow: none; }

/* ---------- Dense dark data table ---------- */
/* Wide tables scroll inside their own container so the body never scrolls horizontally. */
.rmm-table-wrap { overflow-x: auto; border: 1px solid var(--rmm-border); border-radius: 12px; background: var(--rmm-surface); }
.rmm-table-wrap > table[role="grid"] { margin: 0; border: 0; border-radius: 0; }

table[role="grid"] { background: var(--rmm-surface); border-collapse: collapse; }
table[role="grid"] td:first-child { white-space: nowrap; }
table[role="grid"] thead th {
  position: sticky; top: 0; z-index: 1; background: var(--rmm-surface-2);
  text-align: left; font-size: 10px; letter-spacing: .7px; text-transform: uppercase;
  color: var(--rmm-muted); font-weight: 600;
  padding: 7px 12px; border-bottom: 1px solid var(--rmm-border); white-space: nowrap; vertical-align: top;
}
[data-statusbar="on"] table[role="grid"] thead th { top: 32px; }
/* Panel data tables (devices, infra, meldingen, …): give the table its OWN bounded vertical scroll
   so the sticky header sticks relative to THIS container (top:0), not the window. Without this the
   table scrolls with the page and the topmost body row ends up hidden under the sticky header (the
   "RMM-rij valt weg" / "rij half onder de kop" bug). Short tables simply size to content (no inner
   scrollbar) and scroll away with the page normally — no overlap either way. */
.rmm-scroll-table { max-height: calc(100vh - 230px); overflow: auto; }
.rmm-scroll-table table[role="grid"] thead th,
[data-statusbar="on"] .rmm-scroll-table table[role="grid"] thead th { top: 0; }
/* Same overlap, second cause: .rmm-table-wrap is itself a scrollport (overflow-x:auto makes
   overflow-y compute to auto per spec), so a header inside it sticks to the WRAP and the fixed
   status bar can never reach it. The 32px offset above then only shoves the header down INTO the
   table, where it lands on top of the first body row and leaves a blank 32px band above it. That
   hit every table on the device page (alerts, disks, firmware, software, patches, drivers), which
   are wrapped but deliberately not .rmm-scroll-table (they must size to content, no inner scroll).
   Only a table that scrolls with the PAGE needs the offset. */
[data-statusbar="on"] .rmm-table-wrap table[role="grid"] thead th { top: 0; }
table[role="grid"] tbody td {
  padding: 5px 12px; border-bottom: 1px solid var(--rmm-border);
  font-size: 12.5px; vertical-align: middle;
}
table[role="grid"] tbody tr { transition: background .1s; }
table[role="grid"] tbody tr:hover { background: var(--rmm-surface-2); }
[data-theme="dark"] table[role="grid"] tbody tr:hover { background: var(--rmm-off-bg); }
table[role="grid"] tbody tr:last-child td { border-bottom: 0; }
/* Mono tabular numerics on data-bearing cells: hostname, last-seen, agent version, user, updates. */
#devices tbody td:nth-child(2),
#devices tbody td:nth-child(7),
#devices tbody td:nth-child(8),
#devices tbody td:nth-child(9),
#devices tbody td:nth-child(10) { font-family: var(--rmm-mono); font-variant-numeric: tabular-nums; font-size: 12px; }
#devices tbody td:nth-child(2) a { font-weight: 600; letter-spacing: .2px; }

/* ---------- Status page: Container-security CVE drill-down panel ----------
   The Trivy per-container <details> list + acknowledge form, hosted in a panel body. */
.rmm-cve-panel .rmm-panel-sub { color: var(--rmm-muted); margin-left: .15rem; }
.rmm-cve-body { padding: 8px 14px 12px; display: flex; flex-direction: column; gap: 2px; }
.rmm-cve { margin: 0; }
.rmm-cve > summary { cursor: pointer; padding: 4px 0; font-size: 12.5px; display: flex; align-items: center;
  gap: 6px; flex-wrap: wrap; }
.rmm-cve > summary:hover { color: var(--rmm-accent); }
.rmm-cve-list { margin: .15rem 0 .5rem 1.1rem; padding: 0; font-size: .8rem; list-style: disc; color: var(--rmm-muted); }
.rmm-cve-list li { margin: .12rem 0; }
.rmm-cve-list li.rmm-cve-acc { opacity: .55; }
.rmm-cve-list a { color: var(--rmm-accent); }
.rmm-cve-clean { padding: 2px 0; color: var(--rmm-muted); }
.rmm-cve-ack { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--rmm-border);
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.rmm-cve-ack small { color: var(--rmm-muted); }

/* ---------- Meldingen page: dim resolved alert rows so active ones stand out ---------- */
tr.rmm-alert-resolved td { color: var(--rmm-muted); }
tr.rmm-alert-resolved td a { color: var(--rmm-muted); }
.rmm-alert-actions { white-space: nowrap; }
.rmm-alert-actions form { display: inline; margin-right: 4px; }

/* Shell-less pages (login / change password) */
.rmm-plain { max-width: 24rem; margin: 3rem auto; }

@media (max-width: 640px) {
  .rmm-shell { grid-template-columns: 1fr; }
  /* sidebar collapses to a top strip; let it grow with its content instead of pinning 100vh */
  .rmm-sidebar { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center;
    border-right: none; border-bottom: 1px solid var(--rmm-border); padding: 6px 10px; }
  .rmm-sidebar .brand { border-bottom: none; padding: 6px 8px; }
  .rmm-sidebar nav { flex-direction: row; flex-wrap: wrap; padding: 0; }
  .rmm-sidebar .navgrp { display: none; }
  .rmm-sidebar .spacer, .rmm-sidebar .who { display: none; }
  .rmm-footer-user { margin-top: 0; border-top: none; padding: 4px 8px; }
}

/* Devices filter bar */
.rmm-filters { display: flex; flex-wrap: wrap; gap: .75rem; align-items: end; margin-bottom: 1rem; }
.rmm-filters input[type="search"] { max-width: 22rem; margin: 0; }
.rmm-filters label { font-size: .8rem; color: var(--rmm-muted); margin: 0; }
.rmm-filters select { margin: 0; }

/* CIDR chips (users page) */
.rmm-chip { display: inline-flex; align-items: center; gap: .3rem; background: var(--rmm-accent-soft);
  color: var(--rmm-accent); border-radius: 12px; padding: .1rem .55rem; margin: .1rem; font-size: .8rem; }
.rmm-chip-x { background: none; border: none; color: inherit; cursor: pointer; padding: 0; font-size: 1rem; line-height: 1; }
.rmm-chip-editor { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .2rem; }
.rmm-chip-add { width: 9rem; margin: 0 !important; padding: .15rem .4rem !important; }
.rmm-chip-err { color: var(--rmm-crit-fg); font-size: .75rem; }

/* Version / status badge — mono, compact, hairline-bordered chip (demo's .ver feel). */
.rmm-badge { display: inline-block; padding: 2px 7px; border-radius: 5px; font-family: var(--rmm-mono);
  font-size: 11px; font-weight: 600; letter-spacing: .2px; line-height: 1.4; vertical-align: middle; border: 1px solid transparent; }
.rmm-badge.ok { background: var(--rmm-ok-bg); color: var(--rmm-ok-fg); border-color: var(--rmm-ok-bg); }
.rmm-badge.warn { background: var(--rmm-warn-bg); color: var(--rmm-warn-fg); border-color: var(--rmm-warn-bg); }
.rmm-badge.info { background: var(--rmm-info-bg); color: var(--rmm-info-fg); border-color: var(--rmm-info-bg); }
.rmm-badge.muted { background: var(--rmm-off-bg); color: var(--rmm-off-fg); border-color: var(--rmm-off-bg); }
.rmm-badge.critical { background: var(--rmm-crit-bg); color: var(--rmm-crit-fg); border-color: var(--rmm-crit-bg); }
/* Self-hosted country flag in reports (Windows browsers don't render emoji flags). */
.rmm-flag { height: .8em; width: auto; vertical-align: baseline; margin-right: .15em; border: 1px solid rgba(0,0,0,.2); }

.rmm-card-list { display: flex; flex-direction: column; gap: .75rem; max-width: 640px; }
.rmm-card { display: block; padding: 1rem 1.25rem; border: 1px solid var(--rmm-border); border-radius: 10px; background: var(--rmm-surface); text-decoration: none; color: inherit; transition: border-color .12s, background .12s; }
.rmm-card:hover { border-color: var(--rmm-accent); background: var(--rmm-accent-soft); }
.rmm-card-title { font-weight: 600; color: var(--rmm-accent); }
.rmm-card-desc { color: var(--rmm-muted); font-size: .9rem; margin-top: .15rem; }

.rmm-report-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.rmm-report-head .rmm-report-headl { min-width: 0; }
.rmm-report-head h2 { margin-bottom: .15rem; }
.rmm-report-actions { display: flex; gap: .5rem; }
.rmm-report-actions a[role="button"] { font-size: .85rem; padding: .3rem .8rem; margin: 0; }

/* ===== Reports landing — responsive card grid + category-chip card head ===== */
.rmm-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .75rem; }
.rmm-report-card { display: flex; flex-direction: column; gap: .15rem; }
.rmm-card-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.rmm-card-head .rmm-card-title { min-width: 0; }
.rmm-panel-headlink { margin-left: auto; font-size: .8rem; font-weight: 600; color: var(--rmm-accent); text-decoration: none; }
.rmm-panel-headlink:hover { text-decoration: underline; }
.rmm-backlink { margin-bottom: .5rem; }

/* ===== Report view — actions bar, filter bar, pagination ===== */
.rmm-report-actionbar { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.rmm-report-actionbar form { margin: 0; display: inline-flex; gap: .4rem; }
.rmm-report-filter { display: flex; gap: .5rem; flex-wrap: wrap; align-items: flex-end; margin: 0; }
.rmm-report-filter label { display: flex; flex-direction: column; gap: .15rem; margin: 0; font-size: .85em; }
.rmm-report-filter input, .rmm-report-filter select { margin: 0; }
.rmm-report-filter .rmm-filter-actions { display: flex; gap: .4rem; align-items: flex-end; }
.rmm-report-filter .rmm-filter-actions > * { margin: 0; width: auto; }
.rmm-pagination { display: flex; gap: .75rem; align-items: center; justify-content: center; margin: 1rem 0; }
.rmm-pagination-info { font-size: .9em; color: var(--rmm-muted); }

/* Small inline action button — one consistent size for the many per-row form
   actions (pending approve/reject, users, snmp host delete, status ack). */
.rmm-btn-sm { font-size: .8rem; padding: .2rem .6rem; margin: 0; width: auto; }

.rmm-banner { background: var(--rmm-warn-bg); color: var(--rmm-warn-fg); border: 1px solid var(--rmm-warn-fg);
  border-radius: 8px; padding: .5rem .9rem; margin-bottom: 1rem; font-size: .9rem; }
.rmm-banner a { color: inherit; }
.rmm-banner.success { background: var(--rmm-ok-bg); color: var(--rmm-ok-fg); border-color: var(--rmm-ok-fg); }
.rmm-banner.error { background: var(--rmm-crit-bg); color: var(--rmm-crit-fg); border-color: var(--rmm-crit-fg); }
.rmm-flash { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.rmm-flash-x { background: none; border: 0; color: inherit; font-size: 1.2rem; line-height: 1;
  cursor: pointer; padding: 0 .25rem; margin: 0; width: auto; opacity: .7; }
.rmm-flash-x:hover { opacity: 1; }
.rmm-selfstatus { display: inline-block; text-decoration: none; font-size: .85rem; padding: .25rem .7rem;
  border-radius: 1rem; margin-bottom: .75rem; }
.rmm-selfstatus.ok { background: var(--rmm-ok-bg); color: var(--rmm-ok-fg); }
.rmm-selfstatus.warn { background: var(--rmm-warn-bg); color: var(--rmm-warn-fg); }
.rmm-build { margin-top: .5rem; font-size: .7rem; color: var(--rmm-muted); line-height: 1.3; }
/* System-health dot: sits inline right after the build line; breathes (glows in/out). */
.rmm-health { display: inline; margin-left: .4rem; font-size: .85rem; line-height: 1; text-decoration: none; vertical-align: baseline; color: var(--rmm-off-fg); }
.rmm-health.ok   { color: var(--rmm-ok-fg);   animation: rmm-glow-ok 2.4s ease-in-out infinite; }
.rmm-health.warn { color: var(--rmm-warn-fg); animation: rmm-glow-warn 2.4s ease-in-out infinite; }
.rmm-health.crit { color: var(--rmm-crit-fg); animation: rmm-glow-crit 2.4s ease-in-out infinite; }
@keyframes rmm-glow-ok   { 0%, 100% { text-shadow: 0 0 1px var(--rmm-ok-fg);   opacity: .55; }
                           50%       { text-shadow: 0 0 9px var(--rmm-ok-fg);   opacity: 1; } }
@keyframes rmm-glow-warn { 0%, 100% { text-shadow: 0 0 1px var(--rmm-warn-fg); opacity: .55; }
                           50%       { text-shadow: 0 0 9px var(--rmm-warn-fg); opacity: 1; } }
@keyframes rmm-glow-crit { 0%, 100% { text-shadow: 0 0 1px var(--rmm-crit-fg); opacity: .55; }
                           50%       { text-shadow: 0 0 9px var(--rmm-crit-fg); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .rmm-health, .rmm-statusbar .sb-dot { animation: none !important; } }

/* Compact, less-dominant sidebar footer buttons (theme toggle + logout). */
.rmm-footer-btn { width: auto; font-size: .78rem; padding: .25rem .7rem; margin-top: .4rem; }

/* ===== UX styles (data-style) — palette + a couple of layout variants ===== */
/* Palettes: override the accent; works in light and dark (dark accent-soft tweaked). */
[data-style="ocean"]   { --rmm-accent: #0ea5e9; --rmm-accent-soft: #e0f2fe; }
[data-style="forest"]  { --rmm-accent: #16a34a; --rmm-accent-soft: #dcfce7; }
[data-style="slate"]   { --rmm-accent: #475569; --rmm-accent-soft: #e9eef4; }
[data-style="amber"]   { --rmm-accent: #d97706; --rmm-accent-soft: #fef3c7; }
[data-style="crimson"] { --rmm-accent: #dc2626; --rmm-accent-soft: #fee2e2; }
[data-style="violet"]  { --rmm-accent: #7c3aed; --rmm-accent-soft: #ede9fe; }
[data-style="teal"]    { --rmm-accent: #0d9488; --rmm-accent-soft: #ccfbf1; }
[data-style="rose"]    { --rmm-accent: #e11d48; --rmm-accent-soft: #ffe4e6; }
[data-style="ocean"][data-theme="dark"]   { --rmm-accent-soft: #0c2a3a; }
[data-style="forest"][data-theme="dark"]  { --rmm-accent-soft: #0f2e1c; }
[data-style="slate"][data-theme="dark"]   { --rmm-accent-soft: #1a2433; }
[data-style="amber"][data-theme="dark"]   { --rmm-accent-soft: #3a2a08; }
[data-style="crimson"][data-theme="dark"] { --rmm-accent-soft: #3a1414; }
[data-style="violet"][data-theme="dark"]  { --rmm-accent-soft: #241a40; }
[data-style="teal"][data-theme="dark"]    { --rmm-accent-soft: #0c2e2a; }
[data-style="rose"][data-theme="dark"]    { --rmm-accent-soft: #3a1420; }

/* Compact: denser layout (info closer together). */
[data-style="compact"] .rmm-content { padding: .9rem 1.1rem; }
[data-style="compact"] .rmm-sidebar { padding: .6rem .5rem; gap: .1rem; }
[data-style="compact"] .rmm-sidebar a.navlink { padding: .3rem .5rem; }
[data-style="compact"] .rmm-stats { gap: .5rem; }
[data-style="compact"] .rmm-stat { padding: .5rem .75rem; }
[data-style="compact"] td, [data-style="compact"] th { padding: .3rem .5rem; }
[data-style="compact"] h2 { margin: .1rem 0 .6rem; }
[data-style="compact"] h3 { margin: .8rem 0 .4rem; }

/* Status bar: an INDEPENDENT toggle (data-statusbar) that works with ANY style — a slim fixed
   TOP bar. Two layouts (data-sb-style on <html>): "segmented" console and "pills". Both show
   build · system health · online · attention · pending updates · refresh countdown · clock. */
.rmm-statusbar { display: none; }
[data-statusbar="on"] .rmm-statusbar {
  display: flex; align-items: stretch;
  position: fixed; left: 0; right: 0; top: 0; height: 32px;
  background: var(--rmm-surface); border-bottom: 1px solid var(--rmm-border);
  color: var(--rmm-muted); font-size: .72rem; z-index: 60; overflow: hidden;
}
[data-statusbar="on"] .rmm-shell { margin-top: 32px; min-height: calc(100vh - 32px); }
/* The sticky sidebar is height:100vh; with the shell pushed down 32px by the fixed status bar it
   would extend 32px past the viewport and give the whole page a spurious scrollbar. Shrink it to the
   space below the bar and stick it below the bar (not under it). Desktop only: on mobile (max-width
   640px) the sidebar is static/auto-height and must stay that way. */
@media (min-width: 641px) {
  [data-statusbar="on"] .rmm-sidebar { top: 32px; height: calc(100vh - 32px); }
}
[data-statusbar="on"] .rmm-build { display: none; }   /* build shown in the bar instead */
/* Any programmatic scroll-to-top / anchor jump should stop below the fixed status bar, not under it. */
[data-statusbar="on"] { scroll-padding-top: 40px; }
[data-statusbar="on"] #rmm-content { scroll-margin-top: 40px; }
.rmm-statusbar .mono { font-variant-numeric: tabular-nums; }
.rmm-statusbar .rmm-health { margin-left: 0; }

/* pick the active layout */
.sb-variant { display: none; flex: 1; align-items: center; gap: .7rem; padding: 0 .9rem; min-width: 0; }
[data-sb-style="pills"] .sb-pills { display: flex; }
[data-sb-style="segmented"] .sb-segmented,
:not([data-sb-style="pills"]) .sb-segmented { display: flex; }   /* segmented = default */
[data-sb-style="pills"] .sb-segmented { display: none; }

/* --- segmented console --- */
.sb-segmented { gap: 0; padding: 0; }
.sb-seg { display: flex; flex-direction: column; justify-content: center; padding: 0 .85rem; white-space: nowrap; }
.sb-seg + .sb-seg { border-left: 1px solid var(--rmm-border); }
.sb-seg .sb-k { text-transform: uppercase; letter-spacing: .07em; font-size: .56rem; color: var(--rmm-off-fg); line-height: 1.15; }
.sb-seg .sb-v { color: var(--rmm-text); font-weight: 600; font-size: .72rem; line-height: 1.2; }
a.sb-seg { text-decoration: none; }
a.sb-seg:hover { background: var(--rmm-accent-soft); }
.sb-push { margin-left: auto; }

/* --- status pills --- */
.sb-pills { align-items: center; }
.sb-brand { color: var(--rmm-accent); font-weight: 700; letter-spacing: .02em; }
.sb-spacer { margin-left: auto; }
.sb-pill { display: inline-flex; align-items: center; gap: .3rem; border-radius: 999px;
  padding: .12rem .55rem; font-weight: 600; font-size: .68rem; text-decoration: none; white-space: nowrap; }
.sb-pill.ok { background: var(--rmm-ok-bg); color: var(--rmm-ok-fg); }
.sb-pill.warn { background: var(--rmm-warn-bg); color: var(--rmm-warn-fg); }
.sb-pill.accent { background: var(--rmm-accent-soft); color: var(--rmm-accent); }
.sb-pill.ghost { border: 1px solid var(--rmm-border); color: var(--rmm-text); }
.sb-pills .sb-clock { color: var(--rmm-text); }
.sb-pill .rmm-health { font-size: .8rem; }
.rmm-sbstyle.selected { border-color: var(--rmm-accent); color: var(--rmm-accent); font-weight: 600; }

/* ===== Settings page ===== */
.rmm-style-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .6rem; max-width: 720px; }
.rmm-style-card { display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; border: 1px solid var(--rmm-border);
  border-radius: 8px; background: var(--rmm-surface); cursor: pointer; text-decoration: none; color: var(--rmm-text); font-size: .85rem; }
.rmm-style-card:hover { border-color: var(--rmm-accent); }
.rmm-style-card.selected { border-color: var(--rmm-accent); box-shadow: 0 0 0 1px var(--rmm-accent); font-weight: 600; }
.rmm-style-label { min-width: 0; }

/* Per-card preview thumbnail: a mini app mock rendered with that style's own tokens
   (data-style on the thumb sets --rmm-accent for its children; inherits the live theme). */
.rmm-thumb { display: inline-grid; grid-template-columns: 14px 1fr; width: 60px; height: 38px; flex: none;
  border: 1px solid var(--rmm-border); border-radius: 5px; overflow: hidden; background: var(--rmm-surface); }
.rmm-thumb .t-side { background: var(--rmm-accent-soft); border-right: 1px solid var(--rmm-border); }
.rmm-thumb .t-main { padding: 3px; display: flex; flex-direction: column; gap: 3px; }
.rmm-thumb .t-bar { height: 6px; border-radius: 2px; background: var(--rmm-accent); }
.rmm-thumb .t-row { height: 4px; border-radius: 2px; background: var(--rmm-border); }
.rmm-thumb.compact .t-main { gap: 1.5px; padding: 2px; }   /* hint the denser layout */
.rmm-thumb.compact .t-main::after { content: ""; height: 4px; border-radius: 2px; background: var(--rmm-border); }

.rmm-set-row { margin: 1rem 0; }
/* Settings panels: a label/control two-column grid that collapses on narrow viewports. */
.rmm-set-body { display: flex; flex-direction: column; gap: 1.1rem; }
.rmm-set-field { display: grid; grid-template-columns: 140px 1fr; gap: .5rem 1rem; align-items: start; }
.rmm-set-label { font-weight: 600; color: var(--rmm-text); padding-top: .25rem; }
.rmm-set-control { min-width: 0; }
.rmm-set-check { display: block; font-weight: 400; }
.rmm-set-form { margin: 0; max-width: 520px; }
.rmm-set-form .rmm-set-inline { display: block; margin: 0 0 .6rem; }
.rmm-set-form button { width: auto; }
@media (max-width: 640px) { .rmm-set-field { grid-template-columns: 1fr; gap: .35rem; }
                            .rmm-set-label { padding-top: 0; } }
/* Settings "app": a left section sub-nav + right active pane (mockup #1). Collapses to a single
   column on narrow viewports, where the nav stacks above the pane as a horizontal row of items. */
.rmm-settings-app { display: grid; grid-template-columns: 200px 1fr; gap: 1.1rem; align-items: start;
  margin-top: 1rem; }
.rmm-settings-nav { display: flex; flex-direction: column; gap: 3px;
  border-right: 1px solid var(--rmm-border); padding-right: .9rem; }
.rmm-settings-navitem { display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  text-align: left; width: 100%; background: none; cursor: pointer; font: inherit; }
/* The scope label (acct = your account / admin = super_admin only) sits flush-right in each item. */
.rmm-settings-navitem .rmm-badge { flex: 0 0 auto; font-size: 10px; padding: 1px 6px; }
.rmm-settings-pane { min-width: 0; }
@media (max-width: 760px) {
  .rmm-settings-app { grid-template-columns: 1fr; }
  .rmm-settings-nav { flex-direction: row; flex-wrap: wrap; border-right: 0; padding-right: 0;
    border-bottom: 1px solid var(--rmm-border); padding-bottom: .6rem; }
  .rmm-settings-navitem { width: auto; }
}
#font-slider { width: 260px; vertical-align: middle; }
.rmm-th-filter { display: block; width: 100%; margin-top: .3rem; font-size: .75rem; font-weight: 400;
  padding: .15rem .3rem; }
/* Sortable column headers: a sort-direction indicator in the top-right corner (rmm-table-sort.js
   sets aria-sort). Absolutely positioned so it sits beside the label and never pushes the optional
   per-column filter <select> onto a new line. */
th[data-sort] { position: relative; padding-right: 1.1rem; }
th[data-sort]::after { position: absolute; right: .35rem; top: .45rem; content: "\2195"; opacity: .35; font-weight: 400; }
th[data-sort][aria-sort="ascending"]::after { content: "\2191"; opacity: 1; }
th[data-sort][aria-sort="descending"]::after { content: "\2193"; opacity: 1; }
.rmm-roles-legend { color: var(--rmm-muted); margin: -.3rem 0 1rem; }
/* Device-detail Patches: pending update titles shown inline (capped + scrollable); installed
   patches are tucked behind a <details> toggle so they don't dominate the view. */
.rmm-pending-list { max-height: 13rem; overflow: auto; margin: .2rem 0 .8rem; padding-left: 1.2rem; }
.rmm-installed-patches > summary { cursor: pointer; color: var(--rmm-muted); }
/* uPlot trend chart: keep the legend readable in dark mode. */
.u-legend, .u-legend * { color: var(--rmm-text); }

/* ===== About version timeline ===== */
.tl-controls { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; justify-content: space-between; margin: .4rem 0 .3rem; }
.tl-filters { display: flex; flex-wrap: wrap; gap: .4rem; }
.tl-fil { cursor: pointer; border: 1.5px solid var(--rmm-border); background: var(--rmm-surface); color: var(--rmm-text);
  border-radius: 999px; padding: .2rem .7rem; font-size: .8rem; font-weight: 600; display: inline-flex; align-items: center; gap: .35rem; }
.tl-fil:hover { border-color: var(--rmm-accent); }
.tl-fil.active { background: var(--rmm-accent); color: #fff; border-color: transparent; }
.tl-fdot { width: 9px; height: 9px; border-radius: 50%; }
.tl-verhead { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin: .2rem 0 .5rem; }
.tl-ver { font-family: ui-monospace, monospace; font-weight: 700; color: var(--rmm-accent); font-size: 1.1rem; }
.tl-ver-sub { color: var(--rmm-muted); font-size: .8rem; }
.tl-gran { display: inline-flex; border: 1.5px solid var(--rmm-border); border-radius: 999px; overflow: hidden; }
.tl-gran-opt { border: none; background: var(--rmm-surface); color: var(--rmm-text); padding: .2rem .75rem; font-size: .8rem; font-weight: 600; cursor: pointer; }
.tl-gran-opt + .tl-gran-opt { border-left: 1px solid var(--rmm-border); }
.tl-gran-opt.on { background: var(--rmm-accent); color: #fff; }
.tl-count { color: var(--rmm-muted); font-size: .8rem; margin: .2rem 0 .8rem; }
.tl { position: relative; padding-left: 1.5rem; max-width: 680px; }
.tl::before { content: ''; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: var(--rmm-border); }
.tl-row { position: relative; margin-bottom: 1rem; }
.tl-row.tl-hide { display: none; }
.tl-dot { position: absolute; left: -1.5rem; top: 3px; width: 13px; height: 13px; border-radius: 50%; }
.tl-top { display: flex; align-items: center; gap: .5rem; }
.tl-v { font-weight: 700; font-family: ui-monospace, monospace; }
.tl-date { color: var(--rmm-muted); font-size: .78rem; }
.tl-badge { padding: .06rem .45rem; border-radius: 6px; font-size: .66rem; font-weight: 700; color: #fff; }
.tl-title { margin-top: .15rem; }
.tl-details { margin: .25rem 0 0; padding-left: 1.1rem; color: var(--rmm-muted); font-size: .85rem; }
.tl-group-hd { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: .9rem 0 .45rem -1.5rem; padding-left: 0; }
.tl-group-hd:first-child { margin-top: .2rem; }
.tl-gh-label { font-weight: 700; color: var(--rmm-accent); font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; }
.tl-gh-count { background: var(--rmm-surface-2); color: var(--rmm-muted); border-radius: 9px; padding: 0 .45rem; font-size: .72rem; font-weight: 700; }
.tl-gh-chips { display: flex; gap: .25rem; flex-wrap: wrap; margin-left: auto; }
.tl-cc { font-size: .64rem; font-weight: 700; color: #fff; border-radius: 5px; padding: .05rem .34rem; font-family: ui-monospace, monospace; }
.tl.grouped .tl-date { display: none; }

/* --- About timeline: new views (patch grouping + compact period lines) --- */

/* Small badge variant used inside patch lines and compact rows */
.tl-badge-sm { display: inline-block; padding: .03rem .35rem; border-radius: 5px; font-size: .6rem; font-weight: 700; color: #fff; vertical-align: middle; white-space: nowrap; }

/* Patch header item inside the details list */
.tl-patch { list-style: none; margin-top: .4rem; display: flex; align-items: baseline; flex-wrap: wrap; gap: .25rem; }
.tl-patch-ver { font-family: ui-monospace, monospace; font-weight: 700; font-size: .82rem; color: var(--rmm-text); white-space: nowrap; }
.tl-patch-title { color: var(--rmm-text); font-size: .85rem; }

/* Sub-bullets for patch details (indented, muted) */
.tl-patch-detail { margin: .15rem 0 .1rem 1.2rem; padding-left: .9rem; color: var(--rmm-muted); font-size: .8rem; }

/* Compact single-line row for period views */
.tl-compact { display: flex; align-items: baseline; gap: .45rem; flex-wrap: wrap; padding: .18rem 0; margin-bottom: .1rem; }
.tl-compact .tl-v { font-size: .82rem; flex-shrink: 0; }
.tl-compact-title { color: var(--rmm-text); font-size: .84rem; flex: 1 1 0; min-width: 0; }

/* --- About facelift: host the timeline inside the shared NOC .rmm-panel --- */
/* Panel head wraps onto a second line on narrow screens so the live-version chip + count stay legible. */
.rmm-tl-head { flex-wrap: wrap; }
/* Live build chip (.tl-verhead) sits between the title and the count; the count is pushed to the
   right edge. .tl-verhead keeps its base flex layout — only its block margins are zeroed here now
   that it lives inline inside the panel head. */
.rmm-tl-head .tl-verhead { margin: 0; align-items: baseline; gap: .4rem; }
.rmm-tl-head .tl-verhead .tl-ver { font-size: .95rem; }
.rmm-tl-head .rmm-panel-count { margin-left: auto; }
/* Body padding (the shared panel-body has none of its own) + give the timeline room to breathe. */
.rmm-tl-body { padding: 12px 14px 14px; }
/* The controls bar already had top/bottom margins; trim the leading one now that the panel head sits above it. */
.rmm-tl-body .tl-controls { margin-top: 0; }
/* Timeline can use the full panel width rather than the old 680px column cap. */
.rmm-tl-body .tl { max-width: none; }

/* ===================================================================
   Device-detail (concept 9, docs/design/device-page-mockups.html #c9x):
   single pane of glass. Ultra-dense: compacte 1-regel-kop + 4-koloms grid
   met micro-panelen in kleine (10-11px) typografie; ALLES tegelijk
   zichtbaar, geen tabs/ticker/accordions. Hergebruikt .rmm-panel/
   .rmm-badge/.rmm-meter/table[role=grid]/.rmm-kv.
   =================================================================== */
/* Alpine x-cloak (bundel laadt nog in base.html; momenteel geen componenten). */
[x-cloak] { display: none !important; }

/* Compacte 1-regel-kop: naam + host + badges + kern-kv (mono) + hoofdknoppen rechts. */
.rmm-sp-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 7px 12px;
  border: 1px solid var(--rmm-border); border-radius: 10px; background: var(--rmm-surface); margin-bottom: 8px; }
[data-theme="dark"] .rmm-sp-head { background: linear-gradient(180deg, var(--rmm-surface), #0c121b); }
.rmm-sp-head h2 { margin: 0; font-size: 14px; line-height: 1.3; }
.rmm-sp-head .host { font-family: var(--rmm-mono); font-size: 10.5px; color: var(--rmm-muted); }
.rmm-sp-head .kv { font-family: var(--rmm-mono); font-size: 10.5px; color: var(--rmm-muted);
  min-width: 0; flex: 1 1 260px; overflow-wrap: anywhere; line-height: 1.5; }
.rmm-sp-head .rmm-sp-alink { text-decoration: none; }
.rmm-sp-head .acts { margin-left: auto; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.rmm-sp-head .acts form { margin: 0; }
.rmm-sp-head .acts button, .rmm-sp-head .acts a[role="button"] {
  width: auto; margin: 0; padding: .15rem .55rem; font-size: .72rem; }

/* Single-pane grid: 4 smalle kolommen, dense flow; micro-panelen in micro-typografie. */
.rmm-spane { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-flow: dense;
  gap: 8px; font-size: 11px; }
.rmm-spane > * { min-width: 0; }
.rmm-spane .rmm-panel { display: flex; flex-direction: column; margin: 0; border-radius: 8px; }
.rmm-spane .rmm-panel-head { padding: 5px 9px; gap: 8px; }
.rmm-spane .rmm-panel-head h2 { font-size: 10.5px; text-transform: uppercase; letter-spacing: .8px; }
.rmm-spane .rmm-panel-count { font-size: 10px; }
.rmm-spane .pb { padding: 7px 9px; flex: 1; min-width: 0; font-size: 11px; }
.rmm-spane .pb > :last-child { margin-bottom: 0; }
.rmm-spane .pb p { margin: 0 0 6px; }
.rmm-spane .pb h4 { margin: 8px 0 4px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .7px; }
.rmm-spane .pb small { font-size: 10px; }
.rmm-spane table td, .rmm-spane table th { padding: 3px 6px; font-size: 10.5px; }
.rmm-spane .rmm-kv { font-size: 10.5px; }
.rmm-spane .rmm-kv dd { font-size: 10.5px; padding: 3px 0; }
.rmm-spane .rmm-kv dt { padding: 3px 0; font-size: 9.5px; }
.rmm-spane .pb input, .rmm-spane .pb select { padding: .15rem .45rem; font-size: .72rem;
  height: auto; margin-bottom: 6px; }
.rmm-spane .pb button { font-size: .72rem; }
.rmm-spane .pb details > summary { cursor: pointer; font-size: 10.5px; }
/* Lange tabellen scrollen BINNEN hun paneel (x en y), zodat het scherm 1 pane blijft. */
.rmm-spane .rmm-table-wrap { max-height: 300px; overflow: auto; }
.sp2 { grid-column: span 2; }
@media (max-width: 1100px) { .rmm-spane { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  .rmm-spane { grid-template-columns: 1fr; }
  .sp2 { grid-column: span 1; }
}

/* HEALTH-micro-paneel: meters over de volle kolombreedte. */
.rmm-sp-meters .rmm-meter { width: 100%; justify-content: flex-start; }
.rmm-sp-meters .rmm-meter .bar { width: auto; flex: 1 1 auto; }
.rmm-sp-meters .rmm-kv dd small { display: block; color: var(--rmm-muted); }

/* Kern-kv (micro-panelen; zelfde idioom als de oude rail-kv). */
.rmm-kv { display: grid; grid-template-columns: minmax(82px, 38%) 1fr; gap: 0; font-size: 12px; margin: 0; }
.rmm-kv dt { color: var(--rmm-off-fg); font-size: 10px; text-transform: uppercase; letter-spacing: .7px;
  padding: 4px 0; align-self: center; font-weight: 600; border-bottom: 1px solid var(--rmm-border); }
.rmm-kv dd { margin: 0; padding: 4px 0; font-family: var(--rmm-mono); font-size: 11.5px;
  border-bottom: 1px solid var(--rmm-border); overflow-wrap: anywhere; }
.rmm-kv dt:last-of-type, .rmm-kv dd:last-of-type { border-bottom: 0; }

/* Gebeurtenissen-micro-paneel: compacte mono-regels + native details voor de volledige
   lazy geladen tijdlijn (geen sticky ticker meer in concept 9). */
.rmm-sp-events { font-family: var(--rmm-mono); font-size: 10.5px; color: var(--rmm-muted); }
.rmm-sp-events .it { display: block; padding: 1px 0; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.rmm-sp-events b { color: var(--rmm-text); font-weight: 600; }
.rmm-sp-events .it.warn, .rmm-sp-events .it.warn b { color: var(--rmm-warn-fg); }
.rmm-sp-events .it.crit, .rmm-sp-events .it.crit b { color: var(--rmm-crit-fg); }
.rmm-sp-evfull { margin-top: 5px; }
.rmm-sp-evfull > summary { list-style: none; cursor: pointer; user-select: none;
  font-size: 11px; font-weight: 600; color: var(--rmm-accent); }
.rmm-sp-evfull > summary::-webkit-details-marker { display: none; }
.rmm-sp-evfull > summary::marker { content: ""; }
.rmm-sp-evfull > summary::after { content: " \25BE"; }
.rmm-sp-evfull[open] > summary::after { content: " \25B4"; }
.rmm-sp-evpane { margin-top: 6px; border-top: 1px solid var(--rmm-border); padding-top: 6px;
  max-height: 45vh; overflow: auto; }

/* Gebeurtenis-feed (mockup .feed/.ev/.fday/.evt, verdicht concept 7). */
.rmm-feed { position: relative; padding-left: 18px; }
.rmm-feed::before { content: ""; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 2px; background: var(--rmm-border); }
.rmm-ev { position: relative; padding: 0 0 12px; }
.rmm-ev .nd { position: absolute; left: -18px; top: 4px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--rmm-surface); border: 2px solid var(--rmm-accent); }
.rmm-ev.warn .nd { border-color: var(--rmm-warn-fg); }
.rmm-ev.ok .nd { border-color: var(--rmm-ok-fg); }
.rmm-ev.crit .nd { border-color: var(--rmm-crit-fg); }
.rmm-ev.mut .nd { border-color: var(--rmm-off-fg); }
.rmm-ev .tm { font-family: var(--rmm-mono); font-size: 10px; color: var(--rmm-off-fg); }
.rmm-ev .tt { font-size: 12px; font-weight: 600; margin: 1px 0; }
.rmm-ev .ds { font-size: 11px; color: var(--rmm-muted); }
.rmm-fday { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--rmm-off-fg);
  margin: 8px 0 10px; font-weight: 700; }
.rmm-fday:first-child { margin-top: 0; }
.rmm-evt { display: inline-block; font-family: var(--rmm-mono); font-size: 9px; font-weight: 700; letter-spacing: .5px;
  border-radius: 4px; padding: 0 4px; vertical-align: 1px; }
.rmm-evt.alert { background: var(--rmm-warn-bg); color: var(--rmm-warn-fg); }
.rmm-evt.taak { background: var(--rmm-info-bg); color: var(--rmm-info-fg); }
.rmm-evt.update { background: var(--rmm-accent-soft); color: var(--rmm-accent); }
.rmm-evt.logon { background: var(--rmm-off-bg); color: var(--rmm-muted); }
.rmm-evt.boot { background: var(--rmm-ok-bg); color: var(--rmm-ok-fg); }
.rmm-evt.sys { background: var(--rmm-off-bg); color: var(--rmm-off-fg); }

/* Filterchips boven de feed (mockup .chip, als echte buttons voor de hx-get). */
.rmm-evchips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.rmm-evchips button { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--rmm-muted);
  border: 1px solid var(--rmm-border); background: var(--rmm-surface); border-radius: 20px; padding: 2px 9px;
  font-family: var(--rmm-mono); width: auto; margin: 0; cursor: pointer; box-shadow: none; line-height: 1.5; }
.rmm-evchips button:hover { border-color: var(--rmm-muted); color: var(--rmm-text); }
.rmm-evchips button.act { border-color: var(--rmm-accent); color: var(--rmm-accent); }
.rmm-evchips button .n { font-size: 9.5px; background: var(--rmm-off-bg); border-radius: 8px; padding: 0 5px; }

/* ===================================================================
   Device-detail concept-6 "health dashboard" (hd6-*): KPI-tegels,
   trend-grafieken, update-donut, event-heatmap en de drill-down-drawer.
   Token-driven (dark = NOC-look, light blijft leesbaar). Alles wat klikbaar
   is (.hd6-clk) opent een HTMX-partial in #drawer-slot; rmm-drawer.js doet
   open/sluit, rmm-health-dash.js rendert de grafieken/sparklines.
   =================================================================== */
.rmm-hd6 { margin-bottom: 14px; }
.hd6-hint { font-size: 11.5px; color: var(--rmm-muted); margin: 2px 0 12px; display: flex; align-items: center; gap: 8px; }
.hd6-hint svg { width: 14px; height: 14px; stroke: var(--rmm-accent); fill: none; stroke-width: 1.8; flex: 0 0 auto; }
.hd6-hint b { color: var(--rmm-text); font-weight: 600; }

/* clickable affordance */
.hd6-clk { cursor: pointer; position: relative; transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease; }
.hd6-clk:hover { transform: translateY(-2px); border-color: var(--rmm-accent); box-shadow: 0 8px 22px rgba(0,0,0,.25); }
.hd6-clk:focus-visible { outline: 2px solid var(--rmm-accent); outline-offset: 2px; }
.hd6-more { position: absolute; top: 8px; right: 10px; font-size: 10px; color: var(--rmm-muted);
  display: inline-flex; align-items: center; gap: 3px; opacity: .7; transition: color .12s, opacity .12s;
  background: none; border: 0; padding: 0; margin: 0; width: auto; cursor: pointer; box-shadow: none; line-height: 1.4; }
.hd6-clk:hover .hd6-more, .hd6-clk:focus-visible .hd6-more, button.hd6-more:hover, button.hd6-more:focus-visible { color: var(--rmm-accent); opacity: 1; }
.hd6-more svg { width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 2; }

/* KPI tiles */
.hd6-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-bottom: 10px; }
.hd6-kpi { background: var(--rmm-surface); border: 1px solid var(--rmm-border); border-radius: 10px; padding: 11px 13px 9px; min-width: 0; }
[data-theme="dark"] .hd6-kpi { background: linear-gradient(180deg, var(--rmm-surface), #0c121b); }
.hd6-kpi.warn { border-color: var(--rmm-warn-fg); box-shadow: inset 3px 0 0 var(--rmm-warn-fg); }
.hd6-kpi.crit { border-color: var(--rmm-crit-fg); box-shadow: inset 3px 0 0 var(--rmm-crit-fg); }
.hd6-kpi .k { font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--rmm-muted); margin-bottom: 3px; }
.hd6-kpi .v { font-size: 25px; font-weight: 650; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--rmm-text); }
.hd6-kpi .v small { font-size: 12.5px; font-weight: 500; color: var(--rmm-muted); }
.hd6-kpi .s { font-size: 11px; color: var(--rmm-muted); margin-top: 2px; }
.hd6-kpi .hd6-spark { display: block; width: 100%; height: 26px; margin-top: 7px; color: var(--rmm-accent); }
.hd6-kpi.warn .hd6-spark, .hd6-kpi.crit .hd6-spark { color: var(--rmm-warn-fg); }
.hd6-spark polyline { fill: none; stroke: currentColor; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.hd6-spark path { fill: currentColor; opacity: .13; stroke: none; }

/* dashboard grid + panels */
.hd6-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; }
.hd6-grid2 { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; margin-top: 10px; }
.hd6-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
@media (max-width: 920px) { .hd6-grid, .hd6-grid2 { grid-template-columns: 1fr; } }
.hd6-panel { background: var(--rmm-surface); border: 1px solid var(--rmm-border); border-radius: 10px; padding: 12px 14px; min-width: 0; }
[data-theme="dark"] .hd6-panel { background: linear-gradient(180deg, var(--rmm-surface), #0c121b); }
.hd6-ph { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.hd6-ph h2 { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--rmm-muted); margin: 0; }
.hd6-ph .meta { font-size: 10.5px; color: var(--rmm-muted); }
.hd6-range { margin-left: auto; display: flex; gap: 4px; }
.hd6-range button, .hd6-rangebtn { font-weight: 500; font-size: 10px; padding: 1px 8px; border-radius: 6px; color: var(--rmm-muted);
  border: 1px solid transparent; background: none; width: auto; margin: 0; cursor: pointer; box-shadow: none; line-height: 1.6; }
.hd6-range button.on, .hd6-rangebtn.on { color: var(--rmm-accent); border-color: var(--rmm-accent); background: var(--rmm-accent-soft); }
.hd6-chart { min-width: 0; }
/* Tabbladen boven de devicetabel (0.213.0): Toestellen / Infra - SNMP */
.rmm-tabs { display: flex; gap: 4px; align-items: center; }
.rmm-tab { font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 7px; color: var(--rmm-muted);
  border: 1px solid transparent; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.rmm-tab:hover { color: var(--rmm-text); }
.rmm-tab.on { color: var(--rmm-accent); border-color: var(--rmm-accent); background: var(--rmm-accent-soft); }
.rmm-tab .rmm-panel-count { font-weight: 500; }
.hd6-chartgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 920px) { .hd6-chartgrid { grid-template-columns: 1fr; } }

.hd6-chartnote { font-size: 11px; color: var(--rmm-muted); margin-top: 4px; }

/* update-compliance donut */
.hd6-donutwrap { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hd6-donut { width: 116px; height: 116px; flex: 0 0 auto; }
.hd6-donut .tr { fill: none; stroke: var(--rmm-off-bg); stroke-width: 14; }
.hd6-donut .okc { fill: none; stroke: var(--rmm-ok-fg); stroke-width: 14; }
.hd6-donut .wac { fill: none; stroke: var(--rmm-warn-fg); stroke-width: 14; }
.hd6-donut .big { fill: var(--rmm-text); font-size: 24px; font-weight: 650; text-anchor: middle; }
.hd6-donut .sm { fill: var(--rmm-muted); font-size: 9.5px; text-anchor: middle; letter-spacing: .06em; text-transform: uppercase; }
.hd6-leg { font-size: 11.5px; color: var(--rmm-muted); display: flex; flex-direction: column; gap: 6px; min-width: 140px; }
.hd6-leg .d { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 7px; vertical-align: -1px; }
.hd6-leg b { color: var(--rmm-text); font-weight: 600; }

/* event-frequency heatmap (numbered, clickable day cells) */
.hd6-hm { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.hd6-hm-days { display: grid; grid-template-rows: repeat(7, 28px); gap: 4px; font-size: 10px; color: var(--rmm-muted); flex: 0 0 auto; padding-top: 20px; }
.hd6-hm-days i { font-style: normal; line-height: 28px; }
.hd6-hm-months { position: relative; height: 16px; margin-bottom: 4px; font-size: 10px; color: var(--rmm-muted); min-width: 380px; }
.hd6-hm-months i { position: absolute; top: 0; font-style: normal; letter-spacing: .02em; }
.hd6-hm-grid { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 28px); grid-auto-columns: 28px; gap: 4px; }
.hd6-hm-grid i { border-radius: 4px; background: var(--rmm-off-bg); display: flex; align-items: center; justify-content: center;
  font-family: var(--rmm-mono); font-size: 10.5px; color: var(--rmm-muted); cursor: default; user-select: none; font-style: normal; }
.hd6-hm-grid i.clkday { cursor: pointer; }
.hd6-hm-grid i.clkday:hover, .hd6-hm-grid i.clkday:focus-visible { outline: 2px solid var(--rmm-accent); outline-offset: 0; }
.hd6-hm-grid i.future { opacity: .25; }
.hd6-hm-grid i.today { box-shadow: inset 0 0 0 1px var(--rmm-accent); }
.hd6-hm-grid .h1 { background: color-mix(in srgb, var(--rmm-accent) 22%, var(--rmm-surface)); color: var(--rmm-text); }
.hd6-hm-grid .h2 { background: color-mix(in srgb, var(--rmm-accent) 42%, var(--rmm-surface)); color: var(--rmm-text); }
.hd6-hm-grid .h3 { background: color-mix(in srgb, var(--rmm-accent) 68%, var(--rmm-surface)); color: #06121f; }
.hd6-hm-grid .h4 { background: var(--rmm-accent); color: #06121f; font-weight: 600; }
.hd6-hm-leg { display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--rmm-muted); margin-top: 10px; }
.hd6-hm-leg i { width: 11px; height: 11px; border-radius: 2.5px; background: var(--rmm-off-bg); font-style: normal; }
.hd6-hm-leg i.h1 { background: color-mix(in srgb, var(--rmm-accent) 22%, var(--rmm-surface)); }
.hd6-hm-leg i.h2 { background: color-mix(in srgb, var(--rmm-accent) 42%, var(--rmm-surface)); }
.hd6-hm-leg i.h3 { background: color-mix(in srgb, var(--rmm-accent) 68%, var(--rmm-surface)); }
.hd6-hm-leg i.h4 { background: var(--rmm-accent); }

/* recent events list */
.hd6-ev { list-style: none; margin: 0; padding: 0; font-size: 12px; }
.hd6-ev li { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--rmm-border); align-items: flex-start; }
.hd6-ev li:last-child { border-bottom: 0; }
.hd6-ev .t { font-family: var(--rmm-mono); font-size: 10.5px; color: var(--rmm-muted); flex: 0 0 84px; padding-top: 1px; }
.hd6-ev .d { width: 8px; height: 8px; border-radius: 50%; background: var(--rmm-info-fg); flex: 0 0 auto; margin-top: 4px; }
.hd6-ev .d.ok { background: var(--rmm-ok-fg); }
.hd6-ev .d.wa { background: var(--rmm-warn-fg); }
.hd6-ev .d.cr { background: var(--rmm-crit-fg); }
.hd6-ev .x { color: var(--rmm-muted); min-width: 0; }
.hd6-ev .x b { color: var(--rmm-text); font-weight: 550; }

/* ---------- drill-down drawer ---------- */
.hd6-backdrop { position: fixed; inset: 0; background: rgba(4,7,11,.55); opacity: 0; visibility: hidden;
  transition: opacity .22s ease, visibility .22s ease; z-index: 40; }
.hd6-backdrop.open { opacity: 1; visibility: visible; }
.hd6-drawer { position: fixed; top: 0; right: 0; height: 100%; width: min(480px, 94vw); background: var(--rmm-surface);
  border-left: 1px solid var(--rmm-border); box-shadow: -18px 0 50px rgba(0,0,0,.5); transform: translateX(100%);
  transition: transform .26s cubic-bezier(.22,.61,.36,1); z-index: 41; display: flex; flex-direction: column; overflow: hidden; }
.hd6-drawer.open { transform: translateX(0); }
.hd6-drawer:focus { outline: none; }
.hd6-drawer #drawer-slot { display: flex; flex-direction: column; overflow: hidden; flex: 1; min-height: 0; }
.hd6-dr-head { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px 12px; border-bottom: 1px solid var(--rmm-border); }
.hd6-dr-head .ic { width: 36px; height: 36px; flex: 0 0 auto; border-radius: 10px; background: var(--rmm-surface-2);
  border: 1px solid var(--rmm-border); display: flex; align-items: center; justify-content: center; }
.hd6-dr-head .ic svg { width: 19px; height: 19px; stroke: var(--rmm-accent); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hd6-dr-head.wa .ic { border-color: var(--rmm-warn-fg); }
.hd6-dr-head.wa .ic svg { stroke: var(--rmm-warn-fg); }
.hd6-dr-head h2 { font-size: 15px; font-weight: 650; margin: 0; color: var(--rmm-text); }
.hd6-dr-head p { margin: 2px 0 0; font-size: 11px; color: var(--rmm-muted); }
.hd6-dr-x { margin-left: auto; width: 32px; height: 32px; flex: 0 0 auto; border-radius: 9px; border: 1px solid var(--rmm-border);
  background: var(--rmm-surface-2); color: var(--rmm-muted); cursor: pointer; font-size: 17px; line-height: 1;
  display: flex; align-items: center; justify-content: center; padding: 0; margin-bottom: 0; box-shadow: none; }
.hd6-dr-x:hover { color: var(--rmm-text); border-color: var(--rmm-accent); }
.hd6-dr-x:focus-visible { outline: 2px solid var(--rmm-accent); outline-offset: 2px; }
.hd6-dr-body { padding: 14px 16px 24px; overflow-y: auto; flex: 1; font-size: 12.5px; }
.hd6-dr-hero { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.hd6-dr-hero .n { font-size: 32px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: var(--rmm-text); }
.hd6-dr-hero .n small { font-size: 14px; font-weight: 500; color: var(--rmm-muted); }
.hd6-tag { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 2px 8px; border-radius: 5px; }
.hd6-tag.ok { background: var(--rmm-ok-bg); color: var(--rmm-ok-fg); }
.hd6-tag.wa { background: var(--rmm-warn-bg); color: var(--rmm-warn-fg); }
.hd6-tag.cr { background: var(--rmm-crit-bg); color: var(--rmm-crit-fg); }
.hd6-dr-sub { font-size: 11.5px; color: var(--rmm-muted); margin: 0 0 14px; }
.hd6-dr-sub b { color: var(--rmm-text); }
.hd6-dr-sec { margin-top: 16px; }
.hd6-dr-sec h3 { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--rmm-muted); margin: 0 0 8px;
  font-weight: 600; display: flex; align-items: baseline; gap: 8px; }
.hd6-dr-sec h3 .rt { margin-left: auto; font-weight: 400; letter-spacing: 0; text-transform: none; font-size: 11px; color: var(--rmm-muted); display: flex; gap: 4px; }
.hd6-capbar { height: 24px; border-radius: 7px; background: var(--rmm-surface-2); border: 1px solid var(--rmm-border); display: flex; overflow: hidden; }
.hd6-capbar i { display: block; height: 100%; font-style: normal; }
.hd6-capbar .used { background: linear-gradient(90deg, var(--rmm-accent), color-mix(in srgb, var(--rmm-accent) 70%, #000)); }
.hd6-caplabels { display: flex; justify-content: space-between; font-size: 10px; color: var(--rmm-muted); margin-top: 5px; font-family: var(--rmm-mono); }
.hd6-slots { display: flex; flex-direction: column; gap: 8px; }
.hd6-slot { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 9px; border: 1px solid var(--rmm-border); background: var(--rmm-surface-2); }
.hd6-slot.empty { border-style: dashed; background: transparent; }
.hd6-slot .si { flex: 1; min-width: 0; }
.hd6-slot .si .l1 { font-size: 12.5px; font-weight: 600; color: var(--rmm-text); }
.hd6-slot .si .l2 { font-size: 10.5px; color: var(--rmm-muted); font-family: var(--rmm-mono); margin-top: 2px; overflow-wrap: anywhere; }
.hd6-slot .st { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 5px; flex: 0 0 auto; }
.hd6-slot .st.on { background: var(--rmm-ok-bg); color: var(--rmm-ok-fg); }
.hd6-slot .st.off { background: var(--rmm-off-bg); color: var(--rmm-off-fg); }
.hd6-callout { margin-top: 14px; border-radius: 9px; padding: 11px 13px; font-size: 12px; line-height: 1.55; display: flex; gap: 10px; align-items: flex-start; }
.hd6-callout.ok { background: var(--rmm-ok-bg); border: 1px solid var(--rmm-ok-fg); color: var(--rmm-text); }
.hd6-callout.wa { background: var(--rmm-warn-bg); border: 1px solid var(--rmm-warn-fg); color: var(--rmm-text); }
.hd6-callout b { color: var(--rmm-text); }
table.hd6-dt { width: 100%; border-collapse: collapse; font-size: 11.5px; }
table.hd6-dt th { text-align: left; font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--rmm-muted);
  font-weight: 600; padding: 0 8px 6px 0; border-bottom: 1px solid var(--rmm-border); }
table.hd6-dt td { padding: 6px 8px 6px 0; border-bottom: 1px solid var(--rmm-border); vertical-align: middle; }
table.hd6-dt tr:last-child td { border-bottom: 0; }
table.hd6-dt td.mono, table.hd6-dt td.num, table.hd6-dt th.num { font-family: var(--rmm-mono); font-size: 11px; }
table.hd6-dt td.num, table.hd6-dt th.num { text-align: right; font-variant-numeric: tabular-nums; }
.hd6-stat3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.hd6-stat3 > div { background: var(--rmm-surface-2); border: 1px solid var(--rmm-border); border-radius: 8px; padding: 8px 10px; text-align: center; }
.hd6-stat3 .sv { font-size: 18px; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--rmm-text); }
.hd6-stat3 .sk { font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--rmm-muted); margin-top: 2px; }
.hd6-kbrow { display: flex; align-items: flex-start; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--rmm-border); font-size: 12px; }
.hd6-kbrow:last-of-type { border-bottom: 0; }
.hd6-boothist { list-style: none; margin: 0; padding: 0; position: relative; }
.hd6-boothist::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: var(--rmm-border); }
.hd6-boothist li { position: relative; padding: 0 0 13px 24px; font-size: 12px; color: var(--rmm-muted); }
.hd6-boothist li:last-child { padding-bottom: 0; }
.hd6-boothist li .dot { position: absolute; left: 0; top: 3px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--rmm-surface); border: 2px solid var(--rmm-ok-fg); }
.hd6-boothist li .dot.wa { border-color: var(--rmm-warn-fg); }
.hd6-boothist li .dot.cr { border-color: var(--rmm-crit-fg); }
.hd6-boothist li b { color: var(--rmm-text); font-weight: 600; }
.hd6-boothist li .mt { font-family: var(--rmm-mono); font-size: 10px; color: var(--rmm-muted); display: block; margin-top: 1px; }
.hd6-drbtn { width: 100%; min-height: 40px; margin-top: 12px; border-radius: 10px; border: 1px solid var(--rmm-accent);
  background: var(--rmm-accent-soft); color: var(--rmm-accent); font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: none; }
.hd6-drbtn:hover { filter: brightness(1.1); }
.hd6-drbtn:focus-visible { outline: 2px solid var(--rmm-accent); outline-offset: 2px; }

@media (max-width: 560px) {
  .hd6-drawer { width: 100%; height: 88%; top: auto; bottom: 0; border-left: 0; border-top: 1px solid var(--rmm-border);
    border-radius: 18px 18px 0 0; transform: translateY(100%); }
  .hd6-drawer.open { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hd6-drawer, .hd6-backdrop, .hd6-clk { transition: none; }
}