/* Superadmin pages (admin/*, stats, network, system info, inferences): the superadmin
   shell (admin/layout.html) and the layout pieces those pages share. Built on
   primitives.css (.page-head, .kpis, .table, .tabs, .filter, .state, .rail …). */

/* ---- Shell: "Superadmin" switcher in the top bar's context slot ---- */
.sa-switch .hdr-picker-btn { gap: 8px; }
.sa-switch-icon { width: 14px; height: 14px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.6; color: var(--label-2); }
.sa-switch .hdr-picker-value { font-size: 13.5px; font-weight: 500; color: var(--label-1); }
.sa-staff { font-family: var(--font-mono); }
.sa-switch .hdr-picker-menu { min-width: 260px; max-height: min(640px, calc(100vh - 80px)); overflow-y: auto; }
.sa-switch-group { display: block; padding: 10px 10px 4px; font: 500 11px var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--label-3); }
.sa-switch-item-icon { width: 14px; height: 14px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.6; color: var(--label-3); }
/* The switcher hides the group labels while a search filters the items. */
.sa-switch:has(.hdr-picker-search:not(:placeholder-shown)) .sa-switch-group { display: none; }

/* The header "Superadmin" menu button is the switcher's job here (desktop); phones keep it. */
@media (min-width: 769px) {
    .page-superadmin .top-nav .superadmin-anchor { display: none; }
}

/* ---- Shell: sidebar ---- */
.sa-side .sidebar-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.sa-side .sidebar-nav .sidebar-group-label:first-child { padding-top: 4px; }
.sa-back { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-top: 8px; padding: 10px 8px 0; border-top: 1px solid var(--hairline); color: var(--label-2); font-size: 13px; text-decoration: none; }
.sa-back:hover { color: var(--label-1); }
.sa-back svg { width: 14px; height: 14px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.6; color: var(--label-3); }

/* ---- Page column ---- */
.sa-main { display: flex; flex-direction: column; gap: var(--gap); }
.sa-main > * { flex-shrink: 0; margin-block: 0; }
.sa-main.narrow > * { width: 100%; max-width: 1080px; margin-inline: auto; }

/* Section label between card groups: mono caps + an optional plain note. */
.sa-section { display: flex; align-items: baseline; gap: 8px; margin: 6px 0 -6px; font: 500 11.5px var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--label-3); }
.sa-section .note { font: 400 12.5px var(--font); letter-spacing: 0; text-transform: none; }

/* Card: an .overview-card laid out as a column. */
.sa-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; margin: 0; }
.sa-card.flush { gap: 0; }
.sa-card > .card-head .takeaway { margin-left: auto; }
.sa-head-note { font-size: 12.5px; color: var(--label-3); }
.sa-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; border-top: 1px solid var(--hairline); font-size: 12.5px; color: var(--label-3); }
.sa-card-foot[hidden] { display: none; }
.sa-note { margin: 0; font-size: 12.5px; color: var(--label-3); }
.sa-note b { color: var(--label-1); font-weight: 500; }

/* Grids */
.sa-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.sa-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); align-items: stretch; }

/* Dense KPI tiles (rows of 5–6 small numbers). */
.kpis.sa-kpis { gap: 12px; }
.kpis.sa-kpis .kpi { padding: 13px 14px 14px; gap: 4px; }
.kpis.sa-kpis .kpi-value { font-size: 22px; letter-spacing: -0.01em; white-space: nowrap; }
.kpis.sa-kpis .kpi-sub { font-size: 12.5px; color: var(--label-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-value.is-good { color: var(--green); }
.kpi-value.is-warn { color: var(--amber); }
.kpi-value.is-bad { color: var(--red); }

/* Toolbar / filters row */
.sa-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sa-range { font-size: 12.5px; color: var(--label-3); white-space: nowrap; }
.sa-agent { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: var(--r-sm); background: var(--fill-1); font: 500 12px var(--font-mono); color: var(--label-2); white-space: nowrap; }
.sa-code { font: 500 12px var(--font-mono); color: var(--label-2); background: var(--fill-1); padding: 1px 5px; border-radius: var(--r-xs); }
.sa-mono { font-family: var(--font-mono); }

/* tables.css's bare-table fallback (.overview-card table td …) outranks primitives' .table:
   same specificity again, later in the cascade, so the v6 table wins inside our cards. */
:where(.sa-card, .sa-main .overview-card, .sa-main .content-card) table.table { font-size: 13.5px; color: var(--label-body); }
:where(.sa-card, .sa-main .overview-card, .sa-main .content-card) table.table th { padding: 8px 10px 8px 0; border-bottom: 0; font: 500 11px var(--font-mono); color: var(--label-3); }
:where(.sa-card, .sa-main .overview-card, .sa-main .content-card) table.table td { padding: 9px 10px 9px 0; border-bottom: 0; }

/* Table cell variants on top of primitives .table */
/* Fills the card, grows to its content and scrolls (min-width: max-content on a 100%-wide
   table inflates every column in Chrome). */
:where(.sa-main, .sa-card) .table-scroll > .table { width: max-content; min-width: 100%; }
.table.nowrap :is(td, th) { white-space: nowrap; }
.table td.is-mono { font: 400 12.5px var(--font-mono); color: var(--label-2); }
.table td.is-muted { color: var(--label-2); }
.table td.is-faint { color: var(--label-3); }
:where(.sa-main, .sa-card) .table .sub { display: block; margin-top: 2px; font-size: 12px; color: var(--label-3); }
.table td.is-empty { padding: 18px 0; color: var(--label-3); text-align: center; }
.table tr.is-link { cursor: pointer; }

/* Small meter (share of a limit) */
.sa-meter { display: inline-block; width: 64px; height: 4px; margin-right: 8px; border-radius: 2px; background: var(--fill-2); vertical-align: middle; overflow: hidden; }
.sa-meter > i { display: block; height: 100%; background: var(--label-2); }
.sa-meter.is-warn > i { background: var(--amber); }
.sa-meter.is-bad > i { background: var(--red); }

/* Feed lists (feedback, false positives) */
.sa-feed-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--hairline); }
.sa-feed-head { display: flex; align-items: baseline; gap: 10px; padding: 14px 0 4px; }
.sa-feed-head h3 { margin: 0; font-size: 15px; font-weight: 600; color: var(--label-1); }
.sa-live { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--label-3); }

/* Chart.js canvases inside an .sa-card */
.sa-chart { position: relative; height: var(--chart-h, 180px); min-width: 0; }
.sa-chart > canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }

/* Forms (settings cards, editors, dialogs): labelled fields, switch rows, an actions row */
.sa-form { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.sa-field { display: flex; flex-direction: column; gap: 5px; margin: 0; min-width: 0; }
.sa-field > .sa-field-label { font-size: 13px; font-weight: 500; color: var(--label-2); }
.sa-field :is(input, select, textarea) { width: 100%; margin: 0; }
.sa-hint { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--label-3); }
.sa-hint b { color: var(--label-2); font-weight: 500; }
.sa-switch-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--hairline); }
.sa-switch-row b { display: block; color: var(--label-1); font-size: 13.5px; font-weight: 500; }
.sa-switch-row small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: var(--label-3); }
.sa-switch-row .toggle-switch { flex-shrink: 0; }
.sa-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sa-form-actions > form { display: contents; }

/* ---- Setup presets (admin/setup_presets/list.html, edit.html) ---- */
.sp-note { margin-left: 0 !important; }
.sp-list { display: flex; flex-direction: column; }
.sp-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--hairline); }
.sp-row.is-hidden :is(.sp-icon, .sp-text) { opacity: 0.55; }
.sp-order { display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; }
.sp-order form { margin: 0; }
.sp-order button { display: grid; place-items: center; width: 22px; height: 18px; margin: 0; padding: 0; border: 0; border-radius: var(--r-xs); background: none; color: var(--label-3); font-size: 12px; line-height: 1; cursor: pointer; }
.sp-order button:hover:not(:disabled) { background: var(--fill-1); color: var(--label-1); }
.sp-order button:disabled { opacity: 0.35; cursor: default; }
.sp-icon { display: grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0; border-radius: var(--r-md); background: var(--fill-2); color: var(--label-2); }
.sp-icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.sp-text { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; }
.sp-text b { color: var(--label-1); font-size: 14px; font-weight: 500; }
.sp-text span { color: var(--label-3); font-size: 13px; }
.sp-text .sa-mono { font-size: 12px; }
.sp-state { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 104px; flex-shrink: 0; }
.sp-actions { display: flex; gap: 6px; flex-shrink: 0; }
.sp-actions form { margin: 0; }
.sp-empty { padding: 12px 0; border-top: 1px solid var(--hairline); }
.spe-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.spe-grid .spe-wide { grid-column: 1 / -1; }
.spe-hint { margin-left: 4px; font-weight: 400; color: var(--label-3); }
.spe-icons { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.spe-icons legend { margin-bottom: 6px; padding: 0; }
.spe-icon-opt { display: inline-flex; align-items: center; gap: 8px; height: 32px; margin: 0; padding: 0 12px; border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--fill-1); color: var(--label-2); font-size: 13px; cursor: pointer; }
.spe-icon-opt:hover { color: var(--label-1); }
.spe-icon-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-tint); color: var(--label-1); }
.spe-icon-opt input { position: absolute; opacity: 0; pointer-events: none; }
.spe-icon-opt svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.spe-form textarea { min-height: 360px; font: 400 12.5px var(--font-mono); }
.spe-actions { justify-content: flex-end; padding-top: 12px; border-top: 1px solid var(--hairline); }
@media (max-width: 768px) {
    .sp-row { flex-wrap: wrap; }
    .sp-state { width: auto; }
    .sp-actions { width: 100%; justify-content: flex-end; }
    .spe-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Feedback admin (admin/feedback/index.html): rail + feed of <details> rows ---- */
.fb-rail-icon { width: 14px; height: 14px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.6; color: var(--label-3); }
.fb-kind { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--label-2); }
.fb-kind i { width: 6px; height: 6px; border-radius: 50%; background: var(--label-3); }
.fb-kind.k-problem i { background: var(--red); }
.fb-kind.k-question i { background: var(--amber); }
.fb-menu { max-height: 360px; overflow-y: auto; }
.fb-feed .sa-feed-tools .link { margin-left: 4px; }
.feedback-item + .feedback-item { border-top: 1px solid var(--hairline); }
.feedback-row { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; list-style: none; cursor: pointer; }
.feedback-row::-webkit-details-marker { display: none; }
.feedback-row > .avatar { margin-top: 1px; }
.fb-main { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; flex: 1 1 auto; min-width: 0; }
.fb-top { display: flex; align-items: baseline; flex-wrap: wrap; }
.fb-name { margin-right: 8px; font-size: 14px; font-weight: 600; color: var(--label-1); }
.fb-src { display: inline-flex; align-items: center; gap: 4px; }
.fb-src svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; color: var(--label-3); }
.fb-src.is-ai svg { color: var(--ai); }
.feedback-msg { color: var(--label-1); font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.feedback-row-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; white-space: nowrap; }
.feedback-row-actions .btn { margin: 0; }
.fb-toggle { width: 28px; padding: 0; justify-content: center; }
.fb-chev { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; color: var(--label-3); transition: transform var(--dur-base) var(--ease-out); }
.feedback-item[open] .fb-toggle .fb-chev { transform: rotate(180deg); }
.feedback-body { margin: -6px 0 14px 36px; }
.fb-detail { display: grid; grid-template-columns: 90px minmax(0, 1fr); margin: 0; border: 1px solid var(--hairline); border-bottom: 0; border-radius: var(--r-md) var(--r-md) 0 0; background: var(--fill-1); font-size: 13px; }
.fb-detail > :is(dt, dd) { margin: 0; padding: 9px 12px; color: var(--label-1); }
.fb-detail > dt { padding-top: 11px; color: var(--label-3); }
.fb-detail > :is(dt, dd):nth-child(n+3) { border-top: 1px solid var(--hairline); }
.fb-detail:last-child { border-bottom: 1px solid var(--hairline); border-radius: var(--r-md); }
.fb-detail-foot { display: flex; flex-wrap: wrap; gap: 6px; padding: 9px 12px; border: 1px solid var(--hairline); border-radius: 0 0 var(--r-md) var(--r-md); background: var(--fill-1); }
.fb-detail-foot .btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.fb-empty { padding: 18px 0; }
@media (max-width: 900px) {
    .feedback-row { flex-wrap: wrap; }
    .feedback-row-actions { width: 100%; justify-content: flex-end; }
    .feedback-body { margin-left: 0; }
}

@media (max-width: 1100px) {
    .sa-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    .sa-grid-2, .sa-grid-3 { grid-template-columns: minmax(0, 1fr); }
    .kpis.sa-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}