/* Design tokens + light/dark theme on top of Pico.css */
:root, [data-theme="light"] {
  --rmm-accent: #4f46e5;
  --rmm-accent-soft: #eef2ff;
  --rmm-surface: #ffffff;
  --rmm-surface-2: #f7f8fb;
  --rmm-border: #e3e6ee;
  --rmm-text: #1c2230;
  --rmm-muted: #6b7280;
  --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"] {
  --rmm-accent: #818cf8;
  --rmm-accent-soft: #1e2540;
  --rmm-surface: #10151f;
  --rmm-surface-2: #0b0f17;
  --rmm-border: #1e2533;
  --rmm-text: #e5e9f0;
  --rmm-muted: #9aa3b2;
  --rmm-ok-bg: #14331f; --rmm-ok-fg: #4ade80;
  --rmm-warn-bg: #3a2e0a; --rmm-warn-fg: #fbbf24;
  --rmm-crit-bg: #3a1414; --rmm-crit-fg: #f87171;
  --rmm-off-bg: #1e2533; --rmm-off-fg: #9aa3b2;
  --rmm-info-bg: #16263f; --rmm-info-fg: #93c5fd;
  --pico-primary: var(--rmm-accent);
  background: var(--rmm-surface-2);
  color: var(--rmm-text);
}

/* App shell: sidebar + content (used by base.html in Task 2) */
.rmm-shell { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
.rmm-sidebar {
  background: var(--rmm-surface); border-right: 1px solid var(--rmm-border);
  padding: 1rem .75rem; display: flex; flex-direction: column; gap: .25rem;
}
.rmm-sidebar .brand { color: var(--rmm-accent); font-weight: 700; text-decoration: none; margin-bottom: 1rem; display: block; }
.rmm-sidebar a.navlink { display: flex; align-items: center; gap: .5rem; padding: .5rem .6rem; border-radius: 7px; color: var(--rmm-text); text-decoration: none; }
.rmm-sidebar a.navlink:hover { background: var(--rmm-surface-2); }
.rmm-sidebar a.navlink[aria-current="page"] { background: var(--rmm-accent-soft); color: var(--rmm-accent); font-weight: 600; box-shadow: inset 3px 0 0 var(--rmm-accent); }
.rmm-sidebar a.navlink .navico { flex: 0 0 auto; opacity: .85; }
.rmm-sidebar .navgrp { margin: .7rem .2rem .15rem; padding: 0 .55rem; font-size: .62rem; letter-spacing: .07em;
  text-transform: uppercase; color: var(--rmm-accent); font-weight: 600; }
.rmm-sidebar .navgrp:first-of-type { margin-top: .1rem; }
.rmm-sidebar .spacer { flex: 1; }
.rmm-sidebar .who { color: var(--rmm-muted); font-size: .8rem; }
.rmm-content { padding: 1.5rem 2rem; 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: .3rem .6rem 0; }
.rmm-footer-user .rmm-footer-btn { margin-top: 0; }

/* Stat cards */
.rmm-stats { display: flex; gap: .75rem; margin-bottom: 1rem; flex-wrap: wrap; }
.rmm-stat { background: var(--rmm-surface); border: 1px solid var(--rmm-border); border-radius: 10px; padding: .7rem 1rem; min-width: 6.5rem; }
.rmm-stat .n { font-size: 1.5rem; font-weight: 700; line-height: 1; }
.rmm-stat .l { font-size: .75rem; color: var(--rmm-muted); margin-top: .25rem; }

/* Status dot (devices list) */
.rmm-dot { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; }
.rmm-dot.ok { background: var(--rmm-ok-fg); }
.rmm-dot.warning { background: var(--rmm-warn-fg); }
.rmm-dot.critical { background: var(--rmm-crit-fg); }
.rmm-dot.offline { background: var(--rmm-off-fg); }

table[role="grid"] td:first-child { white-space: nowrap; }

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

@media (max-width: 640px) {
  .rmm-shell { grid-template-columns: 1fr; }
  .rmm-sidebar { flex-direction: row; flex-wrap: wrap; align-items: center; border-right: none; border-bottom: 1px solid var(--rmm-border); }
  .rmm-sidebar .spacer, .rmm-sidebar .who { display: none; }
}

/* 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; }

.rmm-badge { display: inline-block; padding: .1rem .45rem; border-radius: 1rem; font-size: .75rem; line-height: 1.4; vertical-align: middle; }
.rmm-badge.ok { background: var(--rmm-ok-bg); color: var(--rmm-ok-fg); }
.rmm-badge.warn { background: var(--rmm-warn-bg); color: var(--rmm-warn-fg); }
.rmm-badge.info { background: var(--rmm-info-bg); color: var(--rmm-info-fg); }
.rmm-badge.muted { background: var(--rmm-off-bg); color: var(--rmm-off-fg); }
.rmm-badge.critical { background: var(--rmm-crit-bg); color: var(--rmm-crit-fg); }
/* 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-actions { display: flex; gap: .5rem; }
.rmm-report-actions a[role="button"] { font-size: .85rem; padding: .3rem .8rem; margin: 0; }

.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; }
@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; } }
@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); }
[data-statusbar="on"] .rmm-build { display: none; }   /* build shown in the bar instead */
.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; }
#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 { margin-left: auto; 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; }