/* ============================================================
   STATUS PAGE — status.css
   Component styles for .st-* (public status page + admin view).
   Tokens (--rui-*, --st-*) come from raids-ui.css.
   Mount page inside: <div class="st-page rui">
   ============================================================ */

/* ===== .st-* status components ===== */
.st-page{min-height:100%;background:var(--rui-page);padding:14px 14px 40px;container-type:inline-size}
.st-wrap{max-width:1120px;margin:0 auto}
/* status is de enige pagina die nog de legacy .container container-content opent;
   neutraliseer die zodat de marge gelijk is aan de moderne pagina's (vgl. .cb-page) */
.st-container{max-width:none !important;padding:0 !important}
.st-crumb{font-size:12px;color:var(--rui-muted);margin:0 2px 16px;display:flex;gap:7px;align-items:center}
.st-crumb .sep{color:var(--rui-faint)}

/* hero */
.st-hero{position:relative;overflow:hidden;border-radius:var(--rui-r-4);border:1px solid var(--rui-line);background:var(--rui-card);box-shadow:var(--rui-sh-1);padding:22px 24px;display:flex;gap:18px;align-items:center}
.st-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 160% at 0% 0%, var(--glow,var(--rui-ok-soft)) 0%, transparent 55%);pointer-events:none}
.st-hero .ico{position:relative;flex:0 0 auto;width:62px;height:62px;border-radius:18px;display:grid;place-items:center;background:var(--tone-soft,var(--rui-ok-soft));color:var(--tone,var(--rui-ok))}
.st-hero .ico svg{width:32px;height:32px}
.st-hero .body{position:relative;min-width:0;flex:1}
.st-hero .eyebrow{margin-bottom:3px}
.st-hero h1{margin:0;font-size:var(--rui-fs-2xl);font-weight:700;line-height:1.15;color:var(--tone-text,var(--rui-text))}
.st-hero .sub{margin-top:5px;color:var(--rui-muted);font-size:var(--rui-fs-md);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.st-hero .sub .live{display:inline-flex;gap:6px;align-items:center;color:var(--rui-ok)}
.st-hero .sub .live i{width:7px;height:7px;border-radius:99px;background:currentColor;box-shadow:0 0 0 0 currentColor;animation:st-pulse 1.8s infinite}
@keyframes st-pulse{0%{box-shadow:0 0 0 0 rgba(31,157,99,.45)}100%{box-shadow:0 0 0 7px rgba(31,157,99,0)}}
.st-hero .acts{position:relative;flex:0 0 auto;display:flex;gap:8px}
@container(max-width:560px){.st-hero{flex-wrap:wrap}.st-hero .acts{width:100%}.st-hero .acts .rui-btn{flex:1}}

/* state tone helpers */
.tone-ok{--tone:var(--rui-ok);--tone-soft:var(--rui-ok-soft);--glow:var(--rui-ok-soft);--tone-text:var(--rui-text)}
.tone-warn{--tone:var(--rui-warn);--tone-soft:var(--rui-warn-soft);--glow:var(--rui-warn-soft)}
.tone-partial{--tone:var(--st-partial);--tone-soft:var(--st-partial-soft);--glow:var(--st-partial-soft)}
.tone-major{--tone:var(--rui-danger);--tone-soft:var(--rui-danger-soft);--glow:var(--rui-danger-soft)}
.tone-maint{--tone:var(--st-maint);--tone-soft:var(--st-maint-soft);--glow:var(--st-maint-soft)}

/* section title */
.st-sec{margin:26px 2px 12px;display:flex;align-items:center;gap:10px}
.st-sec h2{margin:0;font-size:var(--rui-fs-xl);font-weight:700}
.st-sec .meta{margin-left:auto;font-size:var(--rui-fs-md);color:var(--rui-muted)}

/* status pill */
.st-pill{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 12px;border-radius:var(--rui-r-pill);font-family:var(--rui-font);font-weight:600;font-size:var(--rui-fs-md);border:1px solid transparent}
.st-pill svg{width:14px;height:14px}
.st-pill.s-ok{color:var(--rui-ok);background:var(--rui-ok-soft)}
.st-pill.s-warn{color:var(--rui-warn);background:var(--rui-warn-soft)}
.st-pill.s-partial{color:var(--st-partial);background:var(--st-partial-soft)}
.st-pill.s-major{color:var(--rui-danger);background:var(--rui-danger-soft)}
.st-pill.s-maint{color:var(--st-maint);background:var(--st-maint-soft)}

/* component board */
.st-board{border:1px solid var(--rui-line);border-radius:var(--rui-r-4);background:var(--rui-card);box-shadow:var(--rui-sh-1);overflow:hidden}
.st-comp{display:grid;grid-template-columns:1fr auto;gap:6px 16px;padding:16px 18px;border-top:1px solid var(--rui-line-faint)}
.st-comp:first-child{border-top:0}
.st-comp .cname{display:flex;align-items:center;gap:10px;min-width:0}
.st-comp .cname .ci{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--rui-accent-soft);color:var(--rui-accent-strong);flex:0 0 auto}
.st-comp .cname .ci svg{width:18px;height:18px}
.st-comp .cname .t{font-weight:600}
.st-comp .cname .d{font-size:var(--rui-fs-md);color:var(--rui-muted)}
.st-comp .cstate{justify-self:end;align-self:center}
.st-comp .cbars{grid-column:1/-1;margin-top:6px}
.st-bars{display:flex;gap:2px;align-items:flex-end;height:34px}
.st-bars .b{flex:1 1 0;height:100%;border-radius:3px;background:var(--rui-ok);opacity:.9}
.st-bars .b.warn{background:var(--rui-warn)}
.st-bars .b.partial{background:var(--st-partial)}
.st-bars .b.major{background:var(--rui-danger)}
.st-bars .b.maint{background:var(--st-maint)}
.st-bars .b.none{background:var(--rui-line-2);opacity:.5}
.st-barlegend{display:flex;justify-content:space-between;margin-top:6px;font-size:var(--rui-fs-sm);color:var(--rui-faint)}
.st-barlegend b{color:var(--rui-ok);font-weight:600}

/* incident / maintenance card */
.st-incident{border:1px solid var(--rui-line);border-left:4px solid var(--tone,var(--rui-danger));border-radius:var(--rui-r-4);background:var(--rui-card);box-shadow:var(--rui-sh-1);padding:18px 20px;margin-bottom:14px}
.st-incident .ih{display:flex;align-items:flex-start;gap:12px}
.st-incident .ih .it{flex:1;min-width:0}
.st-incident .ih h3{margin:0 0 4px;font-size:var(--rui-fs-lg);font-weight:700}
.st-incident .ih .affected{font-size:var(--rui-fs-md);color:var(--rui-muted)}
.st-tl{margin-top:16px;padding-left:6px}
.st-tl-item{position:relative;padding:0 0 16px 22px;border-left:2px solid var(--rui-line)}
.st-tl-item:last-child{border-left-color:transparent;padding-bottom:0}
.st-tl-item::before{content:"";position:absolute;left:-7px;top:2px;width:12px;height:12px;border-radius:99px;background:var(--rui-card);border:2px solid var(--dot,var(--rui-muted))}
.st-tl-item.now::before{background:var(--dot,var(--rui-danger));border-color:var(--dot,var(--rui-danger))}
.st-tl-item .ts{font-size:var(--rui-fs-sm);color:var(--rui-faint);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.st-tl-item .st{font-weight:700;margin:1px 0 2px}
.st-tl-item .bd{font-size:var(--rui-fs-md);color:var(--rui-muted)}
.st-tl-item.s-investigating{--dot:var(--rui-danger)}
.st-tl-item.s-identified{--dot:var(--st-partial)}
.st-tl-item.s-monitoring{--dot:var(--rui-warn)}
.st-tl-item.s-resolved{--dot:var(--rui-ok)}

/* maintenance row */
.st-maint-row{display:flex;gap:12px;align-items:center;padding:14px 16px;border:1px solid var(--rui-line);border-radius:var(--rui-r-3);background:var(--rui-card);box-shadow:var(--rui-sh-1);margin-bottom:10px}
.st-maint-row .when{flex:0 0 auto;text-align:center;background:var(--st-maint-soft);color:var(--st-maint);border-radius:var(--rui-r-2);padding:8px 12px;font-weight:700;min-width:74px}
.st-maint-row .when small{display:block;font-weight:600;font-size:11px;opacity:.85}
.st-maint-row .mt{flex:1;min-width:0}
.st-maint-row .mt .h{font-weight:600}
.st-maint-row .mt .s{font-size:var(--rui-fs-md);color:var(--rui-muted)}

/* history disclosure */
.st-hist{border:1px solid var(--rui-line);border-radius:var(--rui-r-3);background:var(--rui-card);box-shadow:var(--rui-sh-1);overflow:hidden;margin-bottom:10px}
.st-hist summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:14px 16px}
.st-hist summary::-webkit-details-marker{display:none}
.st-hist summary .dot{width:9px;height:9px;border-radius:99px;background:var(--rui-ok);flex:0 0 auto}
.st-hist summary .dot.major{background:var(--rui-danger)}
.st-hist summary .h{font-weight:600;flex:1;min-width:0}
.st-hist summary .dur{font-size:var(--rui-fs-md);color:var(--rui-muted)}
.st-hist .body{padding:0 16px 16px 40px;font-size:var(--rui-fs-md);color:var(--rui-muted)}

/* uptime summary */
.st-summary{display:flex;gap:18px;align-items:center;padding:18px 20px;border:1px solid var(--rui-line);border-radius:var(--rui-r-4);background:var(--rui-card);box-shadow:var(--rui-sh-1)}
.st-summary .big{font-size:2.2rem;font-weight:700;color:var(--rui-ok);line-height:1}
.st-summary .lg{flex:1;font-size:var(--rui-fs-md);color:var(--rui-muted)}
.st-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:var(--rui-fs-sm);color:var(--rui-muted)}
.st-legend span{display:inline-flex;align-items:center;gap:6px}
.st-legend i{width:10px;height:10px;border-radius:3px;display:inline-block}

.st-foot{margin-top:26px;text-align:center;font-size:var(--rui-fs-md);color:var(--rui-muted)}
.st-foot a{color:var(--rui-accent-strong);text-decoration:none}

/* Houd de footer (Telegram/Discord · uitleg-link) vrij van het zwevende dock.
   Het dock (.nav-beta-dock) is position:fixed op ÁLLE breedtes (desktop + mobiel), dus de
   clearance moet óók op desktop — niet enkel in een mobiele media-query (bug-646/647).
   --rds-dock-clearance is echter alléén in nav-beta.css @media(max-width:767px) gedefinieerd
   (=94px: dock-gap+safe+64+10, dock is echter ~68px → krap); op desktop valt-ie terug op
   120px (gemeten desktop-dock-footprint ~101px, net als map-filters/community die 100-104px
   fallback gebruiken). --rds-dock-clearance bevat --rds-safe al → NIET nogmaals env(safe-area)
   optellen (was dubbeltelling). +22px marge. Gemeten: desktop overlap -60px, mobiel 6px →
   met deze fix ~41px (desktop) resp. ~28px (mobiel) vrij. */
.st-page{padding-bottom:calc(var(--rds-dock-clearance, 120px) + 22px)}

/* ===== admin ===== */
.st-adminbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:14px 16px;border:1px solid var(--rui-accent-line);border-radius:var(--rui-r-4);background:var(--rui-accent-soft);margin-bottom:8px}
.st-adminbar .eyebrow{color:var(--rui-accent-strong)}
.st-adminbar .grow{flex:1}
.st-switch{display:inline-flex;align-items:center;gap:8px;font-size:var(--rui-fs-md);font-weight:600}
.st-switch .tg{width:40px;height:23px;border-radius:99px;background:var(--rui-ok);position:relative;transition:.16s}
.st-switch .tg::after{content:"";position:absolute;top:2px;left:19px;width:19px;height:19px;border-radius:99px;background:#fff;transition:.16s}
.st-panels{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
@container(max-width:560px){.st-panels{grid-template-columns:1fr}}
.st-panel{border:1px solid var(--rui-line);border-radius:var(--rui-r-4);background:var(--rui-card);box-shadow:var(--rui-sh-1);padding:16px 18px}
.st-panel .ph{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.st-panel .ph .pi{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:var(--rui-accent-soft);color:var(--rui-accent-strong)}
.st-panel .ph .pi svg{width:17px;height:17px}
.st-panel .ph h3{margin:0;font-size:var(--rui-fs-lg);font-weight:700}
.st-panel .ph .meta{margin-left:auto;font-size:var(--rui-fs-sm);color:var(--rui-faint)}
.st-chart{height:180px}
.st-kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.st-kpi .k{background:var(--rui-card-2);border:1px solid var(--rui-line-faint);border-radius:var(--rui-r-2);padding:10px 12px}
.st-kpi .k .v{font-size:var(--rui-fs-xl);font-weight:700}
.st-kpi .k .l{font-size:var(--rui-fs-sm);color:var(--rui-muted)}
.st-kpi .k .dl{font-size:var(--rui-fs-sm);font-weight:600;color:var(--rui-ok)}
.st-kpi .k .dl.dn{color:var(--rui-danger)}
.st-tbl{width:100%;border-collapse:collapse;font-size:var(--rui-fs-md)}
.st-tbl th{text-align:left;color:var(--rui-faint);font-weight:600;font-size:var(--rui-fs-sm);padding:6px 8px;border-bottom:1px solid var(--rui-line)}
.st-tbl td{padding:8px;border-bottom:1px solid var(--rui-line-faint)}
.st-tbl tr:last-child td{border-bottom:0}
.st-tbl .good{color:var(--rui-ok);font-weight:600}
.st-tbl .bad{color:var(--rui-danger);font-weight:600}
.st-chip{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:99px;font-size:var(--rui-fs-sm);font-weight:600}
.st-chip.done{color:var(--rui-ok);background:var(--rui-ok-soft)}
.st-chip.empty{color:var(--rui-warn);background:var(--rui-warn-soft)}
.st-chip.refund{color:var(--rui-faint);background:var(--rui-line-faint)}
.st-chip.scanning{color:var(--rui-accent-strong);background:var(--rui-accent-soft)}
.st-meter{height:8px;border-radius:99px;background:var(--rui-line-faint);overflow:hidden;margin-top:4px}
.st-meter i{display:block;height:100%;background:var(--rui-accent)}
.st-row2{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.st-stat{flex:1 1 90px;background:var(--rui-card-2);border:1px solid var(--rui-line-faint);border-radius:var(--rui-r-2);padding:9px 11px}
.st-stat .v{font-weight:700}.st-stat .v.ok{color:var(--rui-ok)} .st-stat .v.warn{color:var(--rui-warn)}
.st-stat .l{font-size:var(--rui-fs-sm);color:var(--rui-muted)}

/* modal */
.st-modal{border:1px solid var(--rui-line);border-radius:var(--rui-r-4);background:var(--rui-elev);box-shadow:var(--rui-sh-3);overflow:hidden}
.st-modal .mh{display:flex;align-items:center;padding:16px 18px;border-bottom:1px solid var(--rui-line)}
.st-modal .mh h3{margin:0;font-size:var(--rui-fs-lg);font-weight:700}
.st-modal .mh .x{margin-left:auto;color:var(--rui-faint);font-size:20px}
.st-modal .mb{padding:18px}
.st-field{margin-bottom:14px}
.st-field label{display:block;font-size:var(--rui-fs-md);font-weight:600;margin-bottom:6px}
.st-field input,.st-field select,.st-field textarea{width:100%;background:var(--rui-input);border:1px solid var(--rui-line-2);border-radius:var(--rui-r-2);padding:9px 11px;color:var(--rui-text);font-family:inherit;font-size:var(--rui-fs-base)}
.st-field .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.st-segs{display:flex;gap:8px;flex-wrap:wrap}
.st-segs .sg{flex:1;text-align:center;border:1px solid var(--rui-line-2);border-radius:var(--rui-r-2);padding:8px;font-weight:600;font-size:var(--rui-fs-md);cursor:pointer}
.st-segs .sg.on{border-color:transparent;background:var(--rui-danger-soft);color:var(--rui-danger)}
.st-modal .mf{display:flex;gap:8px;justify-content:flex-end;padding:14px 18px;border-top:1px solid var(--rui-line)}

/* help-modal: statussen-uitleg met kleur-legenda.
   LET OP: eigen (.shl-*) klassenamen — géén generieke .row/.t/.d/.sw, want die botsen
   met Bootstrap's grid (.row>*{width:100%;padding:...}) → zou de swatch tot brede pil
   opblazen en de tekst eronder laten wrappen. Zie buglog bug-643. */
.st-help-intro{margin:0 0 6px;color:var(--rui-muted);font-size:var(--rui-fs-md);line-height:1.55}
.st-help-note{margin:14px 0 0;padding-top:14px;border-top:1px solid var(--rui-line-faint);color:var(--rui-muted);font-size:var(--rui-fs-md);line-height:1.55}
.st-help-legend{display:flex;flex-direction:column}
.st-help-legend .shl-row{display:flex;flex-wrap:nowrap;gap:12px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--rui-line-faint)}
.st-help-legend .shl-row:last-child{border-bottom:0}
.st-help-legend .shl-sw{flex:0 0 auto;width:13px;height:13px;padding:0;border-radius:4px;margin-top:4px;box-shadow:0 0 0 4px var(--sw-soft)}
.st-help-legend .shl-txt{min-width:0}
.st-help-legend .shl-t{font-weight:700;color:var(--rui-text);font-size:var(--rui-fs-base);line-height:1.35}
.st-help-legend .shl-d{color:var(--rui-muted);font-size:var(--rui-fs-md);line-height:1.5;margin-top:1px}
.st-help-legend .shl-sw.s-ok{background:var(--rui-ok);--sw-soft:var(--rui-ok-soft)}
.st-help-legend .shl-sw.s-warn{background:var(--rui-warn);--sw-soft:var(--rui-warn-soft)}
.st-help-legend .shl-sw.s-partial{background:var(--st-partial);--sw-soft:var(--st-partial-soft)}
.st-help-legend .shl-sw.s-major{background:var(--rui-danger);--sw-soft:var(--rui-danger-soft)}
.st-help-legend .shl-sw.s-maint{background:var(--st-maint);--sw-soft:var(--st-maint-soft)}

/* De statussen-uitleg draait op de gedeelde CBOV-overlay, maar als generieke INFO-modal —
   dus zonder de community-accent (paarse kop-streep + getinte gradient, ook op de mobiele
   grab-handle). Accent-afgeleiden (focus/hover-ring) volgen de status-teal i.p.v. indigo.
   Er is geen voet-knop (× in de kop + backdrop/Esc/swipe sluiten), dus de body krijgt op
   mobiel z'n eigen safe-area-bodempadding. Alles #cbovStatusHelp-gescopet → raakt andere
   CBOV-overlays niet. */
#cbovStatusHelp .cbov{--ov-accent:var(--rui-accent)}
#cbovStatusHelp .cbov-head{background:none}
#cbovStatusHelp .cbov-head::before,
#cbovStatusHelp .cbov-grab::before{display:none}
#cbovStatusHelp .cbov-grab{background:none}
@media (max-width:767px){
  #cbovStatusHelp .cbov-body{padding-bottom:max(16px, env(safe-area-inset-bottom, 0px))}
}

/* ───── v2: gezondheidsbanner, badges, bereik-pills, sparklines, detail-modal ───── */
.st-health-banner{display:flex;align-items:center;gap:12px;grid-column:1/-1;border:1px solid var(--rui-line);border-radius:var(--rui-r-4);background:var(--rui-card);box-shadow:var(--rui-sh-1);padding:10px 16px}
.st-health-banner .st-hb-label{font-weight:700;font-size:var(--rui-fs-md)}
.st-health-banner .st-hb-dots{margin-left:auto;display:flex;gap:8px}
.st-hb-dot{width:12px;height:12px;border-radius:99px;cursor:pointer;background:var(--rui-faint)}
.st-hb-dot.ok{background:var(--rui-ok)}
.st-hb-dot.warn{background:var(--rui-warn)}
.st-hb-dot.crit{background:var(--rui-danger)}
.st-hb-dot.none{background:var(--rui-line)}
.st-health-banner.ok{border-color:color-mix(in srgb,var(--rui-ok) 40%,var(--rui-line))}
.st-health-banner.warn{border-color:color-mix(in srgb,var(--rui-warn) 50%,var(--rui-line));background:color-mix(in srgb,var(--rui-warn) 8%,var(--rui-card))}
.st-health-banner.warn .st-hb-label{color:var(--rui-warn)}
.st-health-banner.crit{border-color:color-mix(in srgb,var(--rui-danger) 55%,var(--rui-line));background:color-mix(in srgb,var(--rui-danger) 9%,var(--rui-card))}
.st-health-banner.crit .st-hb-label{color:var(--rui-danger)}

/* per-paneel badge */
.st-pbadge{width:10px;height:10px;border-radius:99px;background:var(--rui-line);flex:0 0 auto}
.st-pbadge.ok{background:var(--rui-ok)}
.st-pbadge.warn{background:var(--rui-warn)}
.st-pbadge.crit{background:var(--rui-danger)}
.st-pbadge.none{background:var(--rui-line)}

/* bereik-pills + Details */
.st-range-pills{display:inline-flex;gap:3px;margin-left:auto;background:var(--rui-card-2);border:1px solid var(--rui-line-faint);border-radius:99px;padding:2px}
.st-range-pills button{border:0;background:transparent;color:var(--rui-muted);font:inherit;font-size:var(--rui-fs-sm);font-weight:600;padding:3px 10px;border-radius:99px;cursor:pointer;line-height:1.4}
.st-range-pills button.on{background:var(--rui-accent-soft);color:var(--rui-accent-strong)}
.st-details-btn{border:1px solid var(--rui-line);background:var(--rui-card-2);color:var(--rui-muted);font:inherit;font-size:var(--rui-fs-sm);font-weight:600;padding:4px 10px;border-radius:var(--rui-r-2);cursor:pointer}
.st-details-btn:hover{color:var(--rui-accent-strong);border-color:var(--rui-accent-strong)}
#stPanelScan .ph .meta{margin-left:0}

/* legenda-chips (schoon recept: aparte legenda i.p.v. ingebouwde) */
.st-legend-chips{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px;font-size:var(--rui-fs-sm);color:var(--rui-muted)}
.st-legchip{display:inline-flex;align-items:center;gap:6px}
.st-legchip i{width:10px;height:10px;border-radius:3px;display:inline-block;flex:0 0 auto}

/* sparkline-strip op accounts/scout/infra */
.st-spark{height:34px;margin:-2px 0 10px}

/* detail-modal (metric-explorer) */
.st-modal-ranges{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:12px}
.st-modal-ranges button{border:1px solid var(--rui-line);background:var(--rui-card-2);color:var(--rui-muted);font:inherit;font-size:var(--rui-fs-sm);font-weight:600;padding:5px 12px;border-radius:99px;cursor:pointer}
.st-modal-ranges button.on{background:var(--rui-accent-soft);color:var(--rui-accent-strong);border-color:var(--rui-accent-strong)}
.st-modal-chart{height:300px}
.st-modal-metrics{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.st-mchip{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:99px;font-size:var(--rui-fs-sm);font-weight:600;background:var(--rui-accent-soft);color:var(--rui-accent-strong);border:1px solid transparent;cursor:pointer;user-select:none}
.st-mchip.off{background:var(--rui-card-2);color:var(--rui-faint);border-color:var(--rui-line-faint)}

/* canvas-veiligheid: grafiek/sparkline nooit buiten de kaart */
.st-chart canvas,.st-spark canvas,.st-modal-chart canvas{max-width:100% !important}

/* inklapbaar component-beheer (pin/auto-modus) — standaard dicht */
.st-collapse{margin-bottom:8px}
.st-collapse>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:12px 16px;border:1px solid var(--rui-line);border-radius:var(--rui-r-3);background:var(--rui-card);box-shadow:var(--rui-sh-1);font-weight:600}
.st-collapse>summary::-webkit-details-marker{display:none}
.st-collapse>summary .hint{color:var(--rui-faint);font-weight:500;font-size:var(--rui-fs-sm)}
.st-collapse>summary .chev{margin-left:auto;display:inline-flex;color:var(--rui-faint);transition:transform .18s}
.st-collapse>summary .chev svg{width:18px;height:18px}
.st-collapse[open]>summary .chev{transform:rotate(180deg)}
.st-collapse[open]>summary{border-bottom-left-radius:0;border-bottom-right-radius:0}
.st-collapse #stPinBoard{border-top-left-radius:0;border-top-right-radius:0;border-top:0;margin:0}

/* panelen 1-koloms zodra de container smal is (desktop split-view e.d.) */
@container(max-width:640px){.st-panels{grid-template-columns:1fr}}

/* ── mobiel (≤767px): minder padding + geen horizontale overflow ── */
@media(max-width:767px){
  .st-page{padding-left:8px;padding-right:8px;padding-top:12px}
  /* uptime-samenvatting: getal/tekst/legenda stapelen i.p.v. legenda buiten beeld */
  .st-summary{flex-direction:column;align-items:flex-start;gap:12px}
  .st-summary .st-legend{width:100%}
  .st-panels{grid-template-columns:1fr;gap:12px}
  .st-panel{padding:14px}
  .st-range-pills{margin-left:0}
  /* pin/auto-rijen: naam boven, controls eronder (i.p.v. krap naast elkaar → overflow) */
  .st-comp{grid-template-columns:1fr;gap:10px}
  .st-comp .cstate{justify-self:stretch}
  .st-comp .cstate .st-pin-state{flex:1;min-width:0;max-width:100%}
  /* modals: kleinere overlay-marge + footer mag wrappen */
  .st-modal-overlay{padding:12px !important}
  .st-modal .mf{flex-wrap:wrap}
  .st-modal .mf .rui-btn{flex:1}
  .st-adminbar{padding:12px 14px}
}