:root {
    --color-bg: #f4f6f9;
    --color-surface: #ffffff;
    --color-primary: #1a73e8;
    --color-primary-dark: #1557b0;
    --color-danger: #dc3545;
    /* WCAG AA fix: warning amber darkened from #f0ad4e to #b36a00 on light bg
       (contrast ratio 4.6:1 against white; original #f0ad4e was ~2.8:1) */
    --color-warning: #b36a00;
    --color-warning-bg: #fff3cd;
    --color-success: #28a745;
    --color-text: #212529;
    --color-text-muted: #6c757d;
    --color-border: #dee2e6;
    --color-offline: #6c757d;
    /* WCAG AA: #dc3545 gives 4.5:1 on white — compliant */
    --color-error: #dc3545;
    --color-healthy: #28a745;
    --color-toner-low: #c75000;   /* darkened from #fd7e14 for AA contrast */
    --radius: 8px;
    --shadow: 0 1px 3px rgba(0,0,0,0.1);
    --shadow-lg: 0 4px 12px rgba(0,0,0,0.15);
    /* Hover shadow — slightly deeper for the scale lift effect */
    --shadow-hover: 0 8px 24px rgba(0,0,0,0.14);
    /* Glow colours for status badges — semi-transparent versions of each status */
    --glow-healthy: rgba(40,167,69,0.35);
    --glow-warning: rgba(179,106,0,0.3);
    --glow-error:   rgba(220,53,69,0.35);
    --glow-offline: rgba(108,117,125,0.3);
    --glow-toner-low: rgba(199,80,0,0.3);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-bg: #1a1d21;
        --color-surface: #25282c;
        --color-primary: #5b9cf5;
        --color-primary-dark: #3a7bd4;
        --color-text: #e4e6eb;
        --color-text-muted: #b0b3b8;
        --color-border: #3e4248;
        --shadow: 0 1px 3px rgba(0,0,0,0.3);
        --shadow-lg: 0 4px 12px rgba(0,0,0,0.4);
        --shadow-hover: 0 8px 28px rgba(0,0,0,0.45);
        /* Dark-mode warning: lighten to #ffc347 for AA on dark surface #25282c
           (contrast ratio 7.1:1 — AAA) */
        --color-warning: #ffc347;
        --color-warning-bg: #4a3f1f;
        --color-toner-low: #ff8c38;
        --glow-healthy: rgba(40,167,69,0.5);
        --glow-warning: rgba(255,195,71,0.4);
        --glow-error:   rgba(220,53,69,0.5);
        --glow-offline: rgba(176,179,184,0.3);
        --glow-toner-low: rgba(255,140,56,0.45);
    }
    :root:not([data-theme="light"]) .toner-track { background: #3e4248; }
    :root:not([data-theme="light"]) .toner-black { background: #b0b3b8; }
    :root:not([data-theme="light"]) tbody tr:hover { background: #2d3035; }
}

html[data-theme="dark"] {
    --color-bg: #1a1d21;
    --color-surface: #25282c;
    --color-primary: #5b9cf5;
    --color-primary-dark: #3a7bd4;
    --color-text: #e4e6eb;
    --color-text-muted: #b0b3b8;
    --color-border: #3e4248;
    --shadow: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-lg: 0 4px 12px rgba(0,0,0,0.4);
    --shadow-hover: 0 8px 28px rgba(0,0,0,0.45);
    --color-warning: #ffc347;
    --color-warning-bg: #4a3f1f;
    --color-toner-low: #ff8c38;
    --glow-healthy: rgba(40,167,69,0.5);
    --glow-warning: rgba(255,195,71,0.4);
    --glow-error:   rgba(220,53,69,0.5);
    --glow-offline: rgba(176,179,184,0.3);
    --glow-toner-low: rgba(255,140,56,0.45);
}
html[data-theme="dark"] .toner-track { background: #3e4248; }
html[data-theme="dark"] tbody tr:hover { background: #2d3035; }
html[data-theme="dark"] .alert-error { background: #4a2024; color: #f5c6cb; border-color: #5c282d; }
html[data-theme="dark"] .alert-warning { background: var(--color-warning-bg); color: var(--color-warning); border-color: #5c4d24; }
html[data-theme="dark"] .alert-success { background: #1e3a24; color: #c3e6cb; border-color: #2d4a32; }
html[data-theme="dark"] .form-control:focus { box-shadow: 0 0 0 3px rgba(91,156,245,0.25); }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Global focus-visible ring ───────────────────────────────────────────────
   Provides a high-contrast 3px offset ring for all keyboard-navigable elements.
   :focus-visible only fires for keyboard / assistive-tech — mouse clicks are
   unaffected, so sighted mouse users don't see spurious outlines.           */
:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 3px;
    border-radius: 2px;
}
/* Remove default outline only when we're supplying :focus-visible instead */
:focus:not(:focus-visible) { outline: none; }

.skip-link {
    position: absolute;
    top: -100px;
    left: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--color-primary);
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    border-radius: var(--radius);
    z-index: 1001;
    transition: top 0.2s;
}
.skip-link:focus { top: 0.5rem; outline: 2px solid var(--color-primary-dark); outline-offset: 2px; }

/* Screen-reader-only heading (e.g. dialog accessible name) */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@keyframes pageFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.page-transition {
    animation: pageFadeIn 0.25s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .skip-link { transition: none; }
    .page-transition { animation: none; }
    /* Tile hover: keep shadow change but suppress scale/transform */
    .printer-tile:hover { transform: none !important; }
    /* Toner pulse: static colour only, no animation */
    .toner-fill--pulse { animation: none !important; }
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Navbar */
.navbar {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: 0.75rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--shadow);
    position: sticky;
    top: 0;
    z-index: 100;
}
.nav-brand a {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
}
.nav-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    cursor: pointer;
}
.nav-burger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--color-text);
    margin: 0 auto;
    transition: transform 0.2s, opacity 0.2s;
}
@media (max-width: 768px) {
    .nav-burger { display: flex; }
    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        background: var(--color-surface);
        border-bottom: 1px solid var(--color-border);
        padding: 1rem;
        gap: 0.75rem;
        box-shadow: var(--shadow-lg);
    }
    .nav-links.nav-open { display: flex; }
    .navbar { flex-wrap: wrap; position: relative; }
}
.nav-links { display: flex; align-items: center; gap: 1rem; }
.nav-link {
    color: var(--color-text);
    text-decoration: none;
    font-weight: 500;
    padding: 0.3rem 0.5rem;
    border-radius: 4px;
}
.nav-link:hover { background: var(--color-bg); }
.nav-link:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }
.nav-user { color: var(--color-text-muted); font-size: 0.9rem; }
.nav-logout-form { display: inline; }

/* Container */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: clamp(0.75rem, 2vw, 1.5rem);
    flex: 1;
    width: 100%;
}
.container--full-width {
    max-width: none;
    width: 100%;
    padding: clamp(0.75rem, 3vw, 1.5rem);
}

/* Footer */
.footer { text-align: center; padding: 1rem; color: var(--color-text-muted); font-size: 0.85rem; border-top: 1px solid var(--color-border); }
.footer-credit { margin-top: 0.35rem; font-size: 0.75rem; opacity: 0.85; }

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.5rem 1rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s;
}
.btn:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 3px;
}
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-dark); }
.btn-danger { background: var(--color-danger); color: #fff; }
.btn-danger:hover { opacity: 0.9; }
.btn-warning { background: var(--color-warning); color: #fff; }
.btn-outline { background: transparent; border-color: var(--color-border); color: var(--color-text); }
.btn-outline:hover { background: var(--color-bg); }
.btn-sm { padding: 0.25rem 0.6rem; font-size: 0.8rem; }
.btn-block { width: 100%; justify-content: center; }

/* Forms */
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; font-weight: 500; margin-bottom: 0.3rem; font-size: 0.9rem; }
.form-control {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 0.95rem;
    transition: border-color 0.15s;
}
.form-control:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(26,115,232,0.15); }
.form-control:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.form-control-sm { padding: 0.25rem 0.5rem; font-size: 0.8rem; width: auto; }
.form-actions { display: flex; gap: 0.75rem; margin-top: 1.5rem; }
.checkbox-label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }

.form-group-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.35rem; }
.form-group-header label.inline { margin-bottom: 0; }
.school-check-actions { display: flex; gap: 0.35rem; }
.school-check-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-height: 220px;
    overflow-y: auto;
    padding: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
    margin-bottom: 0.35rem;
}
.school-check-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.35rem 0.5rem;
    border-radius: var(--radius);
}
.school-check-item:hover { background: var(--color-surface); }
.school-check-item input.school-checkbox { flex-shrink: 0; margin: 0; }
.school-check-item span { flex: 1; font-size: 0.95rem; }

/* Alerts */
.alert { padding: 0.75rem 1rem; border-radius: var(--radius); margin-bottom: 1rem; font-size: 0.9rem; }
.alert-error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
/* Warning text uses --color-warning (WCAG AA-safe darkened token) */
.alert-warning { background: var(--color-warning-bg); color: var(--color-warning); border: 1px solid #ffeaa7; }
.alert-success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }

/* Auth */
.auth-container { display: flex; justify-content: center; align-items: center; min-height: 70vh; }
.auth-card {
    background: var(--color-surface);
    padding: 2.5rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 420px;
}
.auth-card h1 { text-align: center; color: var(--color-primary); margin-bottom: 0.25rem; font-size: 1.4rem; }
.auth-card h2 { text-align: center; margin-bottom: 1.5rem; font-weight: 400; color: var(--color-text-muted); }

/* Dashboard */
.dashboard-header { margin-bottom: 1.5rem; }
.dashboard-header h1 { font-size: 1.6rem; margin-bottom: 1rem; }
.dashboard-toolbar { margin-bottom: 1rem; display: flex; flex-wrap: wrap; gap: 1rem 1.25rem; align-items: flex-end; }
.dashboard-toolbar-section { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.dashboard-toolbar-section--actions { margin-left: auto; align-self: flex-end; }
.dashboard-toolbar-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
}
.dashboard-search { max-width: 320px; }
.stats-bar--fleet { margin-bottom: 1rem; }
.stat-card--lead {
    box-shadow: var(--shadow-lg);
    border: 1px solid color-mix(in srgb, var(--color-danger) 28%, var(--color-border));
}
.status-filter-btn--emphasize:not(.active) {
    border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border));
    font-weight: 600;
}
.dashboard-refresh-wrap {
    position: relative;
    min-height: 12rem;
}
.dashboard-skeleton-layer {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: 0;
    background: var(--color-bg);
    overflow: auto;
}
.dashboard-skeleton-layer.dashboard-skeleton-layer--visible {
    display: block;
}
.dashboard-skeleton-header { margin-bottom: 1rem; }
.status-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.status-filter-btn.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.stats-bar { display: flex; gap: 1rem; flex-wrap: wrap; }
.stat-card {
    background: var(--color-surface);
    padding: 1rem 1.5rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    min-width: 120px;
}
.stat-value { font-size: 2rem; font-weight: 700; line-height: 1.2; }
.stat-label { font-size: 0.8rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.stat-online .stat-value { color: var(--color-success); }
.stat-error .stat-value { color: var(--color-danger); }

.dashboard-layout { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }

/* School Groups */
.school-group { margin-bottom: 1.5rem; }
.school-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 0.75rem 1rem;
    background: var(--color-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    user-select: none;
}
.school-header h2 { font-size: 1.1rem; display: flex; align-items: center; gap: 0.5rem; }
.school-header small { font-weight: 400; }
.collapse-icon { font-size: 0.8rem; transition: transform 0.2s; display: inline-block; }
.collapse-icon.collapsed { transform: rotate(-90deg); }
.printer-count { font-size: 0.85rem; color: var(--color-text-muted); }
.school-view-btn { margin-left: 0.5rem; flex-shrink: 0; }
.school-printers { padding-top: 0.75rem; }
.school-dashboard-header .school-dashboard-back { margin-bottom: 0.5rem; }
.school-dashboard-header h1 { margin-bottom: 0.5rem; }
.school-printers.hidden { display: none; }

/* Printer Grid */
.printer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }

/* Printer Tile */
.printer-tile {
    background: var(--color-surface);
    border-radius: var(--radius);
    padding: 1rem;
    box-shadow: var(--shadow);
    border-left: 4px solid var(--color-border);
    text-decoration: none;
    color: var(--color-text);
    /* 200ms ease-out for transform + shadow as specified */
    transition: box-shadow 0.2s ease-out, transform 0.2s ease-out;
    display: block;
    will-change: transform;   /* promote to compositor layer for smooth 60fps */
}
.printer-tile:hover {
    box-shadow: var(--shadow-hover);
    transform: scale(1.02);
}
/* Keyboard focus: same lift as hover, plus the global focus-visible ring */
.printer-tile:focus-visible {
    box-shadow: var(--shadow-hover);
    transform: scale(1.02);
    outline: 3px solid var(--color-primary);
    outline-offset: 3px;
}
.printer-tile.status-healthy { border-left-color: var(--color-healthy); }
.printer-tile.status-warning { border-left-color: var(--color-warning); }
.printer-tile.status-offline { border-left-color: var(--color-offline); }
.printer-tile.status-down { border-left-color: var(--color-error); }
.printer-tile.status-error { border-left-color: var(--color-error); }
.printer-tile.status-toner_low { border-left-color: var(--color-toner-low); }
.printer-tile.status-maintenance { border-left-color: #e65100; }
.printer-tile.status-unknown { border-left-color: var(--color-border); }

.tile-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.25rem; flex-wrap: wrap; gap: 0.35rem; }
.tile-header strong { font-size: 0.95rem; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.tile-type-badge { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.03em; padding: 0.15rem 0.4rem; border-radius: 999px; background: var(--color-primary); color: var(--color-bg); }
.tile-type-mono { background: var(--color-text-muted); }
.tile-type-network { }
.tile-type-corp { background: var(--color-text-muted); color: var(--color-bg); }
.tile-type-edu { background: var(--color-primary); color: var(--color-bg); }
.status-healthy .status-dot { background: var(--color-healthy); }
.status-warning .status-dot { background: var(--color-warning); }
.status-offline .status-dot { background: var(--color-offline); }
.status-down .status-dot { background: var(--color-error); }
.status-error .status-dot { background: var(--color-error); }
.status-toner_low .status-dot { background: var(--color-toner-low); }
.status-maintenance .status-dot { background: #e65100; }
.status-unknown .status-dot { background: var(--color-border); }

.tile-model { font-size: 0.75rem; color: var(--color-text-muted); margin-bottom: 0.15rem; }
.tile-errors { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.35rem; }
.badge-connection-lost { background: var(--color-offline); color: #fff; font-size: 0.65rem; }
.tile-snmp-error { display: block; font-size: 0.7rem; color: var(--color-text-muted); font-style: italic; margin-top: 0.15rem; word-break: break-word; }
.badge-error-state { background: var(--color-error); color: #fff; font-size: 0.65rem; }
.tile-last-poll { font-style: italic; }

.tile-ip { font-size: 0.8rem; color: var(--color-text-muted); }
.tile-status { font-size: 0.8rem; font-weight: 600; margin: 0.4rem 0; text-transform: uppercase; letter-spacing: 0.3px; }
.tile-updated { font-size: 0.75rem; color: var(--color-text-muted); margin-top: 0.5rem; }

/* Toner Bars */
.toner-bars { display: flex; flex-direction: column; gap: 4px; margin-top: 0.5rem; }
.toner-row { display: flex; align-items: center; gap: 4px; }
.toner-label { width: 14px; font-size: 0.7rem; font-weight: 700; text-align: center; }
.toner-track { flex: 1; height: 8px; background: #e9ecef; border-radius: 4px; overflow: hidden; }
.toner-fill { height: 100%; border-radius: 4px; transition: width 0.3s; }
/* Very low % can collapse to invisibility on narrow tiles; keep a sliver (e.g. 1% yellow). */
.toner-fill--trace { min-width: 3px; }
.toner-black { background: #333; }
html[data-theme="dark"] .toner-black { background: #b0b3b8; }
.toner-cyan { background: #00bcd4; }
.toner-magenta { background: #e91e63; }
.toner-yellow { background: #ffc107; }
.toner-fuser { background: #ff5722; }
.toner-feeder { background: #607d8b; }
.toner-pct { width: 32px; font-size: 0.7rem; text-align: right; color: var(--color-text-muted); }
.toner-belt { background: #9c27b0; }
.toner-row--critical .toner-label { color: #e65100; font-weight: 600; }
.toner-row--critical .toner-pct { color: #e65100; font-weight: 600; }
.toner-warn-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #e65100;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    flex-shrink: 0;
    margin-left: 2px;
}
.tile-maint-warning { margin-top: 0.35rem; }

/* ── Toner bar low-level pulse (≤ warning threshold, 15%) ───────────────────
   A gentle opacity pulse draws attention to nearly-empty cartridges without
   being distracting at full toner. Applied via JS (see app.js) by adding the
   class "toner-fill--pulse" to the .toner-fill element.
   prefers-reduced-motion suppresses the animation (static red tint only).   */
@keyframes toner-pulse {
    0%   { opacity: 1; }
    50%  { opacity: 0.55; }
    100% { opacity: 1; }
}
.toner-fill--pulse {
    animation: toner-pulse 2s ease-in-out infinite;
    /* Shift hue toward warning-red regardless of original toner colour */
    filter: saturate(1.4) hue-rotate(-15deg);
}

/* Leaderboard */
.leaderboard-card {
    background: var(--color-surface);
    border-radius: var(--radius);
    padding: 1.25rem;
    box-shadow: var(--shadow);
}
.leaderboard-card h3 { font-size: 1rem; margin-bottom: 0.75rem; }
.leaderboard-list { list-style: none; counter-reset: lb; }
.leaderboard-item {
    counter-increment: lb;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}
.leaderboard-item::before {
    content: counter(lb) ".";
    font-weight: 700;
    color: var(--color-text-muted);
    min-width: 1.5rem;
}
.leaderboard-item a { color: var(--color-primary); text-decoration: none; }
.leaderboard-school { font-size: 0.75rem; color: var(--color-text-muted); margin-left: auto; }

/* Badges — with subtle glow using CSS variable tokens */
.badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
/* Glow is a box-shadow blur using the per-status glow variable.
   Intentionally subtle (spread 0, blur 6px) so it reads as a soft halo
   rather than a distracting bright ring.                                   */
.badge-healthy {
    background: #d4edda;
    color: #155724;
    box-shadow: 0 0 6px 0 var(--glow-healthy);
}
.badge-warning {
    background: var(--color-warning-bg);
    /* WCAG AA: uses darkened --color-warning token (4.6:1 on light, 7.1:1 on dark) */
    color: var(--color-warning);
    box-shadow: 0 0 6px 0 var(--glow-warning);
}
.badge-offline {
    background: #e2e3e5;
    color: #383d41;
    box-shadow: 0 0 6px 0 var(--glow-offline);
}
.badge-error {
    background: #f8d7da;
    color: #721c24;
    box-shadow: 0 0 6px 0 var(--glow-error);
}
.badge-toner_low {
    background: #fde8d0;
    color: #8a4b08;
    box-shadow: 0 0 6px 0 var(--glow-toner-low);
}
.badge-maintenance { background: #fff3e0; color: #e65100; }
.badge-unknown { background: #e2e3e5; color: #383d41; }
.badge-admin { background: #cce5ff; color: #004085; }
.badge-school_admin { background: #d1ecf1; color: #0c5460; }
.badge-viewer { background: #e2e3e5; color: #383d41; }

/* Dark-mode badge overrides to maintain legibility */
html[data-theme="dark"] .badge-healthy { background: #1e3a24; color: #6fcf87; }
html[data-theme="dark"] .badge-warning { background: var(--color-warning-bg); color: var(--color-warning); }
html[data-theme="dark"] .badge-offline { background: #3a3d42; color: #b0b3b8; }
html[data-theme="dark"] .badge-error   { background: #4a2024; color: #f5c6cb; }
html[data-theme="dark"] .badge-toner_low { background: #3d2200; color: var(--color-toner-low); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .badge-healthy { background: #1e3a24; color: #6fcf87; }
    :root:not([data-theme="light"]) .badge-warning { background: var(--color-warning-bg); color: var(--color-warning); }
    :root:not([data-theme="light"]) .badge-offline { background: #3a3d42; color: #b0b3b8; }
    :root:not([data-theme="light"]) .badge-error   { background: #4a2024; color: #f5c6cb; }
    :root:not([data-theme="light"]) .badge-toner_low { background: #3d2200; color: var(--color-toner-low); }
}

/* Detail Page */
.detail-header { margin-bottom: 1.5rem; }
.detail-header h1 { font-size: 1.5rem; margin: 0.5rem 0; }
.back-link { color: var(--color-primary); text-decoration: none; font-size: 0.9rem; }

.detail-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr));
    gap: clamp(0.5rem, 1.5vw, 1rem);
    margin-top: 1rem;
    padding: clamp(0.75rem, 2vw, 1rem);
    background: var(--color-surface);
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
}
@media (max-width: 500px) { .detail-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.detail-stat { display: flex; flex-direction: column; gap: 0.25rem; }
.detail-stat-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-text-muted); }
.detail-stat-value { font-size: 0.95rem; color: var(--color-text); display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.detail-stat-actions .detail-stat-value { flex-wrap: wrap; }

.hp-usage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr));
    gap: clamp(0.5rem, 1.5vw, 1rem);
    margin-bottom: 1rem;
    padding: clamp(0.75rem, 2vw, 1rem);
    background: var(--color-surface);
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
}

.chart-range-toolbar { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.charts-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(0.75rem, 1.5vw, 1rem);
    margin-bottom: 1.5rem;
}
@media (max-width: 1100px) { .charts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .charts-grid { grid-template-columns: minmax(0, 1fr); } }
.chart-card {
    background: var(--color-surface);
    border-radius: var(--radius);
    padding: clamp(0.75rem, 1.5vw, 1.25rem);
    box-shadow: var(--shadow);
    min-width: 0;
    position: relative;
    min-height: clamp(200px, 28vw, 320px);
}
.chart-card h3 { font-size: 1rem; margin-bottom: 0.75rem; }

.detail-tables {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
}
@media (max-width: 900px) { .detail-tables { grid-template-columns: minmax(0, 1fr); } }
.table-card {
    background: var(--color-surface);
    border-radius: var(--radius);
    padding: clamp(0.75rem, 1.5vw, 1.25rem);
    box-shadow: var(--shadow);
    min-width: 0;
    overflow: hidden;
}
.table-card h3 { font-size: 1rem; margin-bottom: 0.75rem; }

/* Tables */
.table-scroll { overflow-x: auto; }
.table-card-scroll { max-height: 400px; overflow-y: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
thead th {
    text-align: left;
    padding: 0.6rem 0.75rem;
    border-bottom: 2px solid var(--color-border);
    font-weight: 600;
    color: var(--color-text-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
tbody td { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--color-border); }
tbody tr:hover { background: #f8f9fa; }

/* Debug panel (printer detail, admin only) */
.debug-panel-wrap {
    margin-top: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: var(--shadow);
}
.debug-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.9rem;
}
.debug-panel-close {
    padding: 0.2rem 0.5rem;
    font-size: 1.25rem;
    line-height: 1;
}
.debug-panel-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
}
.debug-poll-status {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}
.debug-panel-live {
    border-top: 1px solid var(--color-border);
    margin-top: 0;
}
.debug-panel-content {
    margin: 0;
    padding: 0.75rem 1rem;
    max-height: 320px;
    overflow: auto;
    font-family: ui-monospace, monospace;
    font-size: 0.8rem;
    white-space: pre-wrap;
    word-break: break-all;
    color: var(--color-text);
}

/* Admin */
.admin-header { margin-bottom: 1rem; }
.admin-header h1 { font-size: 1.5rem; }
.admin-intro { margin-top: 0.25rem; font-size: 0.9rem; }
.admin-tabs { display: flex; gap: 0; margin-bottom: 1.5rem; border-bottom: 2px solid var(--color-border); }
.tab-btn {
    padding: 0.6rem 1.25rem;
    border: none;
    background: none;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    color: var(--color-text-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s;
}
.tab-btn.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.tab-btn:hover { color: var(--color-text); }
.panel-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.panel-toolbar h2 { font-size: 1.2rem; }
.panel-toolbar-actions { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.action-cell { display: flex; gap: 0.5rem; align-items: center; }
.inline-form { display: flex; gap: 0.3rem; align-items: center; }

/* Form Container */
.form-container {
    max-width: 600px;
    margin: 0 auto;
    background: var(--color-surface);
    padding: 2rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.form-container h2 { margin-bottom: 1.5rem; }

/* Empty State */
.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--color-text-muted);
}
.empty-state h2 { color: var(--color-text); margin-bottom: 0.5rem; }
.empty-state a { color: var(--color-primary); }
.empty-state-actions { display: flex; gap: 0.75rem; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 1rem; }
.empty-state-inline-form { display: inline; }

/* ── Toast notification system ───────────────────────────────────────────────
   Glassmorphism style: blur backdrop + semi-transparent surface.
   Toasts stack in a fixed container in the top-right corner.
   Each toast slides in from the right and fades out on dismiss.            */

#toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    z-index: 2000;
    pointer-events: none;   /* let clicks pass through the container */
    max-width: min(380px, calc(100vw - 2rem));
}

.toast {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.85rem 1rem;
    border-radius: calc(var(--radius) + 2px);
    /* Glassmorphism core: blur + semi-transparent bg */
    backdrop-filter: blur(12px) saturate(1.5);
    -webkit-backdrop-filter: blur(12px) saturate(1.5);
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: 0 4px 24px rgba(0,0,0,0.14), 0 1px 4px rgba(0,0,0,0.08);
    color: var(--color-text);
    font-size: 0.875rem;
    line-height: 1.45;
    pointer-events: auto;
    animation: toast-slide-in 0.22s ease-out both;
    will-change: transform, opacity;
    /* Ensure text is readable over any background */
    text-shadow: none;
    min-width: 240px;
}

html[data-theme="dark"] .toast {
    background: rgba(30, 33, 38, 0.82);
    border-color: rgba(255,255,255,0.1);
    box-shadow: 0 4px 24px rgba(0,0,0,0.4), 0 1px 4px rgba(0,0,0,0.3);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .toast {
        background: rgba(30, 33, 38, 0.82);
        border-color: rgba(255,255,255,0.1);
        box-shadow: 0 4px 24px rgba(0,0,0,0.4), 0 1px 4px rgba(0,0,0,0.3);
    }
}

.toast-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 0.05rem;
    line-height: 1;
}

.toast-body { flex: 1; min-width: 0; }
.toast-title {
    font-weight: 700;
    font-size: 0.85rem;
    margin-bottom: 0.15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.toast-message {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    word-break: break-word;
}

.toast-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-muted);
    font-size: 1rem;
    line-height: 1;
    padding: 0.1rem;
    flex-shrink: 0;
    opacity: 0.7;
    transition: opacity 0.15s;
    align-self: flex-start;
}
.toast-close:hover { opacity: 1; }

/* Severity colour-coding via left accent border */
.toast--critical {
    border-left: 4px solid var(--color-error);
}
.toast--critical .toast-icon { color: var(--color-error); }
.toast--warning {
    border-left: 4px solid var(--color-warning);
}
.toast--warning .toast-icon { color: var(--color-warning); }
.toast--success {
    border-left: 4px solid var(--color-success);
}
.toast--success .toast-icon { color: var(--color-success); }
.toast--info {
    border-left: 4px solid var(--color-primary);
}
.toast--info .toast-icon { color: var(--color-primary); }

@keyframes toast-slide-in {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes toast-slide-out {
    from { opacity: 1; transform: translateX(0);    max-height: 120px; margin-bottom: 0; }
    to   { opacity: 0; transform: translateX(20px); max-height: 0;   margin-bottom: -0.6rem; }
}
.toast--dismissing {
    animation: toast-slide-out 0.22s ease-in forwards;
    pointer-events: none;
    overflow: hidden;
}

/* Legacy single-toast class kept for any existing code that creates a .toast directly */
.toast-success { background: var(--color-success); color: #fff; }
.toast-hide { animation: toast-slide-out 0.22s ease-in forwards; }

/* HTMX loading indicator */
.htmx-indicator { display: none; }
.htmx-indicator.htmx-request { display: block; }
.htmx-progress-bar {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--color-primary);
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}
.htmx-progress-bar.htmx-request { opacity: 1; }

/* Utilities */
.text-muted { color: var(--color-text-muted); }

/* Print */
@media print {
    .skip-link, .navbar, .footer, .nav-burger, .nav-links,
    .theme-toggle, .btn, .form-actions, .action-cell,
    .toast, .htmx-progress-bar, .dashboard-toolbar, .chart-range-toolbar,
    form[action*="logout"], form[action*="delete"], form[action*="poll"] {
        display: none !important;
    }
    body { background: #fff; color: #000; }
    .container { max-width: none; }
    .printer-tile, .stat-card, .chart-card, .table-card, .leaderboard-card,
    .school-header, .form-container, .auth-card {
        box-shadow: none;
        border: 1px solid #ddd;
    }
    .printer-tile { break-inside: avoid; }
    a[href] { color: #000; }
}

/* ── Range (time-frame) filter buttons ──────────────────────────────────────── */
.range-filters { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.range-filter-btn.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

/* ── Tile trend badge (shown in 24h / 7d range modes) ───────────────────────── */
.tile-trend {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.4rem;
    flex-wrap: wrap;
    align-items: center;
}
.tile-trend-toner {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}
.tile-trend-toner.trend-down { color: var(--color-danger); }
.tile-trend-toner.trend-up   { color: var(--color-success); }
.tile-trend-toner.trend-flat { color: var(--color-text-muted); }
.tile-trend-pages {
    font-size: 0.72rem;
    color: var(--color-text-muted);
}

/* ── School summary table (shown in 24h / 7d range modes) ───────────────────── */
.school-summary-wrap {
    background: var(--color-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}
.school-summary-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.school-summary-range-label {
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--color-text-muted);
}
.school-summary-table .toner-critical { color: var(--color-danger); font-weight: 600; }
.school-summary-table .toner-warning  { color: var(--color-warning); font-weight: 600; }

/* ── Skeleton loaders ────────────────────────────────────────────────────────── */
@keyframes skeleton-shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position:  400px 0; }
}
.skeleton {
    background: linear-gradient(90deg, var(--color-border) 25%, var(--color-bg) 50%, var(--color-border) 75%);
    background-size: 800px 100%;
    animation: skeleton-shimmer 1.4s infinite linear;
    border-radius: 4px;
    display: inline-block;
}
@media (prefers-reduced-motion: reduce) {
    .skeleton { animation: none; background: var(--color-border); }
}
.printer-tile.skeleton-tile {
    pointer-events: none;
    cursor: default;
}
.printer-tile.skeleton-tile .skeleton-line {
    height: 0.85rem;
    margin: 0.35rem 0;
    border-radius: 4px;
}
.printer-tile.skeleton-tile .skeleton-line.short  { width: 45%; }
.printer-tile.skeleton-tile .skeleton-line.medium { width: 70%; }
.printer-tile.skeleton-tile .skeleton-line.full   { width: 92%; }
.printer-tile.skeleton-tile .skeleton-bar {
    height: 8px;
    margin: 0.25rem 0;
    border-radius: 4px;
}

/* ── Command Palette ──────────────────────────────────────────────────────────── */
.cmd-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(2px);
    align-items: flex-start;
    justify-content: center;
    padding-top: 12vh;
}
.cmd-overlay.cmd-open {
    display: flex;
}
.cmd-box {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) + 4px);
    box-shadow: var(--shadow-lg);
    width: min(640px, 94vw);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.cmd-search-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-border);
}
.cmd-icon {
    color: var(--color-text-muted);
    font-size: 1rem;
    flex-shrink: 0;
}
.cmd-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 1rem;
    color: var(--color-text);
    outline: none;
    min-width: 0;
}
.cmd-input::placeholder { color: var(--color-text-muted); }
.cmd-esc-hint {
    font-size: 0.7rem;
    color: var(--color-text-muted);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 0.1rem 0.35rem;
    white-space: nowrap;
}
.cmd-results {
    list-style: none;
    margin: 0;
    padding: 0.25rem 0;
    max-height: 360px;
    overflow-y: auto;
}
.cmd-results:empty { display: none; }
.cmd-section {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    padding: 0.5rem 1rem 0.2rem;
}
.cmd-result-item {
    display: flex;
    flex-direction: column;
    padding: 0.55rem 1rem;
    cursor: pointer;
    gap: 0.1rem;
    border-radius: 6px;
    margin: 0 0.25rem;
    transition: background 0.1s;
}
.cmd-result-item:hover,
.cmd-result-item.cmd-selected {
    background: var(--color-primary);
    color: #fff;
}
.cmd-result-item.cmd-selected .cmd-result-sub { color: rgba(255,255,255,0.75); }
.cmd-result-label { font-size: 0.9rem; font-weight: 500; }
.cmd-result-sub   { font-size: 0.75rem; color: var(--color-text-muted); }
.cmd-empty {
    text-align: center;
    color: var(--color-text-muted);
    padding: 1rem;
    font-size: 0.9rem;
}
.cmd-footer {
    display: flex;
    gap: 1rem;
    padding: 0.4rem 1rem;
    border-top: 1px solid var(--color-border);
    font-size: 0.7rem;
    color: var(--color-text-muted);
    background: var(--color-bg);
}
.cmd-footer kbd {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 3px;
    padding: 0.05rem 0.3rem;
    font-size: 0.68rem;
}

/* ==========================================================================
   NERVE CENTER — System Health Dashboard
   ========================================================================== */

/* Layout */
.nerve-center {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
}

.nerve-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.nerve-header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.nerve-header-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.nerve-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.nerve-refresh-label {
    font-size: 0.82rem;
    color: var(--color-text-muted);
}

/* Summary cards */
.nerve-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.nerve-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    text-align: center;
    transition: border-color 0.2s;
}

.nerve-card.nerve-card-alert {
    border-color: var(--color-error);
    background: color-mix(in srgb, var(--color-error) 6%, var(--color-surface));
}

.nerve-card-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-text);
}

.nerve-card.nerve-card-alert .nerve-card-value {
    color: var(--color-error);
}

.nerve-card-label {
    font-size: 0.73rem;
    color: var(--color-text-muted);
    margin-top: 0.25rem;
    line-height: 1.3;
}

/* Section headers */
.nerve-section {
    margin-bottom: 2.5rem;
}

.nerve-section-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.75rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
}

/* Sparklines */
.sparkline-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}

.sparkline-panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
}

.sparkline-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text-muted);
    margin-bottom: 0.4rem;
}

.sparkline-svg {
    width: 100%;
    height: 60px;
    display: block;
    overflow: visible;
}

/* Circuit breaker state badges */
.cb-badge {
    display: inline-block;
    padding: 0.2em 0.55em;
    border-radius: 999px;
    font-size: 0.73rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
}

.cb-closed {
    background: color-mix(in srgb, var(--color-success) 15%, var(--color-surface));
    color: #155724;
    border: 1px solid color-mix(in srgb, var(--color-success) 35%, var(--color-border));
}

[data-theme="dark"] .cb-closed {
    background: color-mix(in srgb, var(--color-success) 22%, transparent);
    color: #6fcf87;
    border-color: color-mix(in srgb, var(--color-success) 45%, var(--color-border));
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .cb-closed {
        background: color-mix(in srgb, var(--color-success) 22%, transparent);
        color: #6fcf87;
        border-color: color-mix(in srgb, var(--color-success) 45%, var(--color-border));
    }
}

.cb-open {
    background: color-mix(in srgb, var(--color-error) 12%, var(--color-surface));
    color: #721c24;
    border: 1px solid color-mix(in srgb, var(--color-error) 40%, var(--color-border));
}

[data-theme="dark"] .cb-open {
    background: color-mix(in srgb, var(--color-error) 22%, transparent);
    color: #fca5a5;
    border-color: color-mix(in srgb, var(--color-error) 40%, var(--color-border));
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .cb-open {
        background: color-mix(in srgb, var(--color-error) 22%, transparent);
        color: #fca5a5;
        border-color: color-mix(in srgb, var(--color-error) 40%, var(--color-border));
    }
}

.cb-half-open {
    background: var(--color-warning-bg);
    color: var(--color-warning);
    border: 1px solid color-mix(in srgb, var(--color-warning) 40%, var(--color-border));
}

[data-theme="dark"] .cb-half-open {
    background: var(--color-warning-bg);
    color: var(--color-warning);
    border-color: color-mix(in srgb, var(--color-warning) 40%, var(--color-border));
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .cb-half-open {
        background: var(--color-warning-bg);
        color: var(--color-warning);
        border-color: color-mix(in srgb, var(--color-warning) 40%, var(--color-border));
    }
}

.cb-unknown {
    background: var(--color-bg);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
}

/* Nerve Center table helpers */
.nerve-loading,
.nerve-empty {
    text-align: center;
    color: var(--color-text-muted);
    padding: 1.5rem;
    font-size: 0.9rem;
}

.nerve-fetch-error {
    margin-top: 1rem;
    max-width: 100%;
}

.mono {
    font-family: var(--font-mono, monospace);
    font-size: 0.82rem;
}

.text-success { color: var(--color-success); }
.text-danger  { color: var(--color-danger); }

/* Admin panel header row (for System Health link placement) */
.admin-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.admin-health-link {
    font-size: 0.82rem;
}

/* SSE live dot in Nerve Center title */
.sse-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-success);
    vertical-align: middle;
    flex-shrink: 0;
}

@keyframes sse-pulse-anim {
    0%   { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.55); }
    70%  { box-shadow: 0 0 0 8px rgba(40, 167, 69, 0); }
    100% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0); }
}

.sse-dot.sse-pulse {
    animation: sse-pulse-anim 0.6s ease-out;
}

/* Report download button group */
.report-download-group {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.report-download-btn {
    white-space: nowrap;
    font-size: 0.78rem;
}

/* =========================================================================
   Diagnostic Panel (slide-over drawer)
   ========================================================================= */
.diagnostic-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(0, 0, 0, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.diagnostic-overlay--open {
    opacity: 1;
    pointer-events: auto;
}

.diagnostic-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(420px, 90vw);
    background: var(--color-surface);
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform 0.25s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.diagnostic-overlay--open .diagnostic-panel {
    transform: translateX(0);
}

.diagnostic-panel-body {
    padding: 1.25rem;
}

.diag-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.diag-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0;
    color: var(--color-text);
}

.diag-model {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.diag-ip {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.diag-close-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: var(--color-text-muted);
    padding: 0.25rem;
    border-radius: var(--radius);
}

.diag-close-btn:hover {
    color: var(--color-text);
    background: var(--color-border);
}

.diag-status-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius);
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: #fff;
}

.diag-status-badge.status-healthy { background: var(--color-healthy); }
.diag-status-badge.status-warning { background: var(--color-warning); color: #fff; }
.diag-status-badge.status-error,
.diag-status-badge.status-down { background: var(--color-error); }
.diag-status-badge.status-offline { background: var(--color-offline); }
.diag-status-badge.status-toner_low { background: var(--color-toner-low); }

.diag-summary {
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius);
    background: var(--color-warning-bg);
    color: var(--color-warning);
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 0.75rem;
    border-left: 3px solid var(--color-warning);
}

.diag-summary--critical {
    background: rgba(220, 53, 69, 0.1);
    color: var(--color-error);
    border-left-color: var(--color-error);
}

.diag-section {
    margin-bottom: 1rem;
}

.diag-section-title {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    margin: 0 0 0.5rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--color-border);
}

.diag-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.diag-loading {
    text-align: center;
    color: var(--color-text-muted);
    padding: 2rem 0;
}

/* =========================================================================
   Paper Tray Bars
   ========================================================================= */
.tray-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.tray-info {
    min-width: 80px;
    flex-shrink: 0;
}

.tray-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-text);
    display: block;
}

.tray-media {
    font-size: 0.72rem;
    color: var(--color-text-muted);
}

.tray-bar-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.tray-track {
    flex: 1;
    height: 8px;
    background: var(--color-border);
    border-radius: 4px;
    overflow: hidden;
}

.tray-fill {
    height: 100%;
    border-radius: 4px;
    background: var(--color-primary);
    transition: width 0.3s ease;
}

.tray-fill--low {
    background: var(--color-warning);
}

.tray-fill--empty {
    background: var(--color-error);
    width: 2px !important;
    min-width: 2px;
}

.tray-fill--unknown {
    background: var(--color-text-muted);
    opacity: 0.3;
}

.tray-pct {
    font-size: 0.75rem;
    font-weight: 600;
    min-width: 2.2rem;
    text-align: right;
    color: var(--color-text);
}

/* =========================================================================
   Subunit / Maintenance Kit Bars
   ========================================================================= */
.subunit-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.subunit-info {
    min-width: 100px;
    flex-shrink: 0;
}

.subunit-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-text);
    display: block;
}

.subunit-type {
    font-size: 0.7rem;
    color: var(--color-text-muted);
    text-transform: capitalize;
}

.subunit-bar-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.subunit-track {
    flex: 1;
    height: 8px;
    background: var(--color-border);
    border-radius: 4px;
    overflow: hidden;
}

.subunit-fill {
    height: 100%;
    border-radius: 4px;
    background: var(--color-success);
    transition: width 0.3s ease;
}

.subunit-fill--low {
    background: var(--color-warning);
}

.subunit-fill--critical {
    background: var(--color-error);
}

.subunit-fill--unknown {
    background: var(--color-text-muted);
    opacity: 0.3;
}

.subunit-pct {
    font-size: 0.75rem;
    font-weight: 600;
    min-width: 2.2rem;
    text-align: right;
    color: var(--color-text);
}

/* =========================================================================
   Health Ribbon (24-hour uptime strip on tiles)
   ========================================================================= */
.health-ribbon {
    display: flex;
    gap: 1px;
    height: 6px;
    margin: 0.3rem 0;
    border-radius: 3px;
    overflow: hidden;
}

.ribbon-cell {
    flex: 1;
    min-width: 2px;
    border-radius: 1px;
}

.ribbon-cell--healthy { background: var(--color-healthy); }
.ribbon-cell--warning { background: var(--color-warning); }
.ribbon-cell--error,
.ribbon-cell--down,
.ribbon-cell--toner_low { background: var(--color-error); }
.ribbon-cell--offline { background: var(--color-offline); }
.ribbon-cell--empty { background: var(--color-border); }

/* =========================================================================
   Tile Diagnostic Summary
   ========================================================================= */
.tile-diagnostic {
    font-size: 0.72rem;
    padding: 0.15rem 0.4rem;
    margin: 0.15rem 0;
    border-radius: 3px;
    background: var(--color-warning-bg);
    color: var(--color-warning);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tile-diagnostic--critical {
    background: rgba(220, 53, 69, 0.1);
    color: var(--color-error);
}

.tile-diagnostic--warning {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

/* =========================================================================
   Tile Diagnostic Button
   ========================================================================= */
.tile-diag-btn {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    width: 24px;
    height: 24px;
    font-size: 0.75rem;
    cursor: pointer;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 2;
}

.printer-tile {
    position: relative;
}

.printer-tile:hover .tile-diag-btn,
.printer-tile:focus-within .tile-diag-btn {
    opacity: 1;
}

.tile-diag-btn:hover {
    background: var(--color-border);
    color: var(--color-text);
}

/* =========================================================================
   Alert List in Diagnostic Panel
   ========================================================================= */
.diag-alert-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.diag-alert-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    border-radius: var(--radius);
    font-size: 0.8rem;
    background: var(--color-bg);
    border-left: 3px solid var(--color-border);
}

.diag-alert--critical {
    border-left-color: var(--color-error);
}

.diag-alert--warning {
    border-left-color: var(--color-warning);
}

.diag-alert-severity {
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    min-width: 4rem;
}

.diag-alert-group {
    font-size: 0.72rem;
    color: var(--color-text-muted);
}

.diag-alert-desc {
    flex: 1;
    color: var(--color-text);
}

.diag-toner-bars {
    padding: 0;
}

/* =========================================================================
   Smart Filter Button Accents
   ========================================================================= */
.status-filter-btn--jam.active {
    border-color: var(--color-error);
    color: var(--color-error);
}

.status-filter-btn--paper.active {
    border-color: var(--color-warning);
    color: var(--color-warning);
}

/* =========================================================================
   Dark Mode Overrides for New Components
   ========================================================================= */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        .diagnostic-overlay { background: rgba(0, 0, 0, 0.55); }
        .diag-summary { background: rgba(255, 195, 71, 0.12); }
        .diag-summary--critical { background: rgba(220, 53, 69, 0.15); }
        .tile-diagnostic { background: rgba(255, 195, 71, 0.12); }
        .tile-diagnostic--critical { background: rgba(220, 53, 69, 0.15); }
        .diag-alert-item { background: var(--color-surface); }
        .tray-fill--unknown,
        .subunit-fill--unknown { opacity: 0.4; }
    }
}

html[data-theme="dark"] {
    .diagnostic-overlay { background: rgba(0, 0, 0, 0.55); }
    .diag-summary { background: rgba(255, 195, 71, 0.12); }
    .diag-summary--critical { background: rgba(220, 53, 69, 0.15); }
    .tile-diagnostic { background: rgba(255, 195, 71, 0.12); }
    .tile-diagnostic--critical { background: rgba(220, 53, 69, 0.15); }
    .diag-alert-item { background: var(--color-surface); }
    .tray-fill--unknown,
    .subunit-fill--unknown { opacity: 0.4; }
}

/* =========================================================================
   Reduced Motion
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
    .diagnostic-panel { transition: none; }
    .diagnostic-overlay { transition: none; }
    .tray-fill,
    .subunit-fill { transition: none; }
}