/* ============================================================
   VM STUDIO — final visual layer for admin/back-side
   Scope: body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"])
   Loaded LAST — wins the cascade decisively.
   Goal: refined, dark, studio-grade look (Portum-inspired)
   ============================================================ */

/* B7e (2026-05-12): admin-token-redundans raderad.
   vm_tokens.css :root + body[data-path^="/admin"]-block är SSOT för:
     --vm-bg / -elevated / -hover / -subtle / -soft
     --vm-panel / -2 / -head
     --vm-border / -soft / -strong
     --vm-text / -soft / -muted / -faint
     --vm-accent / -hover / -soft / -glow
     --vm-success / -warning / -danger / -info (+ -soft varianter)
     --vm-radius / -sm / -xs / -pill
     Legacy aliases (--bg, --panel, --text, --accent, --shadow, etc)
   Kvar HÄR: studio-specifika tokens som inte finns i vm_tokens.css
   (--vm-shadow / -soft / -elev studio-naming, --vm-font studio-naming,
    --vm-premium-* gradient-system) + final body-declarations.        */
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) {
    /* Studio shadow-naming (vm_tokens.css använder -1/-2/-3, dessa namn
       används fortfarande av vm_compact_admin.css, vm_design_system.css) */
    --vm-shadow:        0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px rgba(0,0,0,0.32);
    --vm-shadow-soft:   0 1px 0 rgba(255,255,255,0.03) inset, 0 4px 14px rgba(0,0,0,0.24);
    --vm-shadow-elev:   0 1px 0 rgba(255,255,255,0.05) inset, 0 16px 40px rgba(0,0,0,0.40);

    /* Studio font-naming (vm_tokens.css använder --vm-font-stack/-display/-body).
       Fas 3b (2026-06-10): Geist-först (atelier-kanoniskt), Inter fallback. */
    --vm-font:        "Geist", "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    --vm-font-mono:   "JetBrains Mono", "DM Mono", ui-monospace, monospace;

    /* Premium-token overrides — annars syns ljus toolbar/panel-gradient
       på dark bg (det var den "vita baren" mellan tabs och innehåll). */
    --vm-premium-divider:        rgba(255,255,255,0.06);
    --vm-premium-panel-gradient: var(--vm-panel);   /* Etapp 2: platt, var gradient */
    --vm-premium-header-gradient: var(--vm-panel-head); /* Etapp 2: platt */
    --vm-premium-surface-top:    rgba(255,255,255,0.04);
    --vm-premium-table-row-stripe: rgba(255,255,255,0.02);

    /* Legacy --shadow alias (admin-scope) — :root i vm_tokens.css mappar dessa
       till -1/-2/-3 men studio-namnen krävs här eftersom --vm-shadow lever lokalt */
    --shadow:       var(--vm-shadow);
    --shadow-soft:  var(--vm-shadow-soft);

    background: var(--vm-bg) !important;
    color: var(--vm-text);
    font-family: var(--vm-font);
    font-feature-settings: "ss01", "cv11";
    -webkit-font-smoothing: antialiased;
}

/* base body / app shell */
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]).app-shell {
    background:
        radial-gradient(1200px 600px at 0% 0%, rgba(var(--vm-accent-rgb), 0.04), transparent 60%),
        radial-gradient(800px 500px at 100% 100%, rgba(106,169,214,0.03), transparent 60%),
        var(--vm-bg) !important;
}

body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .app-layout {
    background: transparent !important;
}

body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .page-shell,
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .app-content,
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .app-main {
    background: transparent !important;
    color: var(--vm-text) !important;
}

/* ============================================================
   SIDEBAR — fix text-disappearing bug + studio styling
   ============================================================ */
/* FAS O (2026-05-16): sidebar pekar nu på dedikerad sidebar-token (neutralt #0a1019). */
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .app-sidebar {
    background: var(--vm-bg-sidebar) !important;
    border-right: 1px solid var(--vm-border) !important;
    color: var(--vm-text-soft) !important;
}

body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .brand-sidebar {
    color: var(--vm-text) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .brand-sidebar strong {
    color: var(--vm-text) !important;
    font-weight: 700;
    letter-spacing: -0.01em;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .brand-sidebar img.brand-logo {
    filter: brightness(1.1) contrast(1.05);
}

body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .sidebar-system-entry {
    background: transparent;
    border: 1px solid var(--vm-brand-primary);
    color: var(--vm-brand-primary);
    letter-spacing: 0.18em;
    font-weight: 700;
    border-radius: var(--vm-radius-md);
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .sidebar-system-entry:hover,
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .sidebar-system-entry.is-active {
    background: rgba(var(--vm-accent-rgb), 0.10);
    color: var(--vm-brand-primary);
}

body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .sidebar-back-link {
    background: rgba(255,255,255,0.03) !important;
    color: var(--vm-text-soft) !important;
    border: 1px solid var(--vm-border) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .sidebar-back-link:hover {
    background: rgba(255,255,255,0.06) !important;
    color: var(--vm-text) !important;
    border-color: var(--vm-border-strong) !important;
}

/* sidebar-link — KEY FIX for the disappearing text */
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .sidebar-link,
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) a.sidebar-link {
    background: transparent !important;
    color: var(--vm-text-soft) !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .sidebar-link .sidebar-link-copy,
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .sidebar-link .sidebar-link-copy strong {
    color: var(--vm-text-soft) !important;
}

body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .sidebar-link:hover,
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) a.sidebar-link:hover {
    background: rgba(255,255,255,0.04) !important;
    color: var(--vm-text) !important;
    border-color: var(--vm-border) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .sidebar-link:hover .sidebar-link-copy,
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .sidebar-link:hover .sidebar-link-copy strong {
    color: var(--vm-text) !important;
}

body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .sidebar-link.active,
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) a.sidebar-link.active {
    background: rgba(var(--vm-accent-rgb), 0.10) !important;   /* Etapp 2: platt, var gradient */
    border-color: rgba(var(--vm-accent-rgb), 0.30) !important;
    color: var(--vm-accent) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .sidebar-link.active .sidebar-link-copy,
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .sidebar-link.active .sidebar-link-copy strong {
    color: var(--vm-accent) !important;
}

body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .sidebar-link-icon {
    background: rgba(255,255,255,0.04) !important;
    color: var(--vm-text-muted) !important;
    border-radius: 9px !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .sidebar-link:hover .sidebar-link-icon {
    background: rgba(255,255,255,0.06) !important;
    color: var(--vm-text-soft) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .sidebar-link.active .sidebar-link-icon {
    background: rgba(var(--vm-accent-rgb), 0.18) !important;
    color: var(--vm-accent) !important;
}

body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .sidebar-label {
    display: block !important;
    padding: 16px 4px 6px !important;
    font-size: var(--vm-text-xs) !important;  /* E5: 10px → 12px-golv */
    font-weight: 700 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: var(--vm-text-faint) !important;
}

body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .sidebar-logout-link {
    background: rgba(255,255,255,0.03) !important;
    color: var(--vm-text-soft) !important;
    border: 1px solid var(--vm-border) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .sidebar-logout-link:hover {
    background: rgba(224,133,133,0.10) !important;
    color: var(--vm-danger) !important;
    border-color: rgba(224,133,133,0.30) !important;
}

/* ============================================================
   TOPBAR
   ============================================================ */
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .topbar-app {
    /* Etapp 2 (2026-05-30): glas borttaget — solid topbar-yta (var rgba+blur(16px)). */
    background: var(--vm-bg-surface) !important;
    border-bottom: 1px solid var(--vm-border) !important;
}
/* r9: topbar-bg hårdkodad mörk (rgba(14,18,23,0.72)) flippade ej → topbar-title
   mörk-på-mörk i ljust (/health-modulen m.fl.). Ljust = ljus yt-token, frostad.
   Mörkt oförändrat (D5). Specificitet (html[data-theme] + body:is + .topbar-app)
   slår originalet. */
html[data-theme="light"] body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .topbar-app {
    background: var(--vm-bg-surface) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .topbar-title {
    color: var(--vm-text) !important;
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* ============================================================
   CARDS / PANELS — universal lift to studio
   ============================================================ */
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) :is(
    .module-hero,
    .module-panel,
    .panel-soft,
    .surface-card,
    .card,
    .settings-module,
    .access-panel,
    .access-canvas,
    .users-role-card,
    .users-matrix-card,
    .users-system-card,
    .theme-preview-card,
    .settings-info-card,
    .status-item,
    .admin-kpi,
    .panel,
    .panel-box,
    .panel-shell,
    .device-section,
    .central-summary-card,
    .filter-panel,
    .column-panel,
    .config-panel,
    .network-scan-box,
    .site-item,
    .building-card,
    .floor-card,
    .hint-box,
    .mode-card,
    .intro-card,
    .edit-card,
    .table-card,
    .info-card,
    .sub-panel,
    .focus-note,
    .status-column,
    .comment-box,
    .attachment-box,
    .work-card,
    .lux-panel,
    .lux-kpi-card
) {
    background: var(--vm-panel) !important;
    color: var(--vm-text) !important;
    border: 1px solid var(--vm-border) !important;
    border-radius: var(--vm-radius) !important;
    box-shadow: var(--vm-shadow) !important;
}

/* hero / page-header */
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) :is(.module-hero, .admin-dashboard-hero, .page-header) {
    background: linear-gradient(180deg, var(--vm-panel-2) 0%, var(--vm-panel) 100%) !important;
    padding: 22px 24px !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) :is(.module-hero, .admin-dashboard-hero) h1,
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .page-header h1 {
    color: var(--vm-text) !important;
    font-size: 1.35rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.015em !important;
    margin: 0 !important;
}

/* ============================================================
   KPI cards (admin/index.html) — Portum-style
   ============================================================ */
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .lux-kpi-card {
    background: var(--vm-panel) !important;
    border: 1px solid var(--vm-border) !important;
    border-radius: var(--vm-radius) !important;
    padding: 18px 20px !important;
    box-shadow: var(--vm-shadow) !important;
    transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .lux-kpi-card::before {
    height: 2px !important;
    opacity: 0.85;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .lux-kpi-card:nth-child(1)::before { background: linear-gradient(90deg, var(--vm-info), #6aa9d6cc) !important; }
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .lux-kpi-card:nth-child(2)::before { background: linear-gradient(90deg, var(--vm-success), #6ec68dcc) !important; }
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .lux-kpi-card:nth-child(3)::before { background: linear-gradient(90deg, var(--vm-accent), var(--vm-accent-hover)) !important; }
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .lux-kpi-card:nth-child(4)::before { background: linear-gradient(90deg, #b58cd6, #b58cd6cc) !important; }
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .lux-kpi-card:hover {
    border-color: var(--vm-border-strong) !important;
    transform: translateY(-1px);
    box-shadow: var(--vm-shadow-elev) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .lux-kpi-icon {
    border-radius: 10px !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .lux-kpi-icon--blue   { background: rgba(106,169,214,0.14) !important; color: var(--vm-info) !important; }
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .lux-kpi-icon--green  { background: rgba(110,198,141,0.14) !important; color: var(--vm-success) !important; }
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .lux-kpi-icon--amber  { background: var(--vm-accent-soft) !important;  color: var(--vm-accent) !important; }
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .lux-kpi-icon--purple { background: rgba(181,140,214,0.14) !important; color: #b58cd6 !important; }

/* FACIT-mode (2026-05-12): alla KPI-ikoner blir accent för enhetlig look.
   Per kan toggla till "semantic" i /admin/global_settings för originalfärgerna. */
body[data-status-style="facit"]:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) :is(.lux-kpi-icon--blue, .lux-kpi-icon--green, .lux-kpi-icon--purple) {
    background: var(--vm-accent-soft) !important;
    color: var(--vm-accent) !important;
}

body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .lux-kpi-value {
    color: var(--vm-text) !important;
    font-size: 30px !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .lux-kpi-label {
    color: var(--vm-text-muted) !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    font-weight: 600 !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .lux-kpi-link {
    color: var(--vm-accent) !important;
    font-weight: 600 !important;
}

/* lux-panel head/body */
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .lux-panel-head {
    background: linear-gradient(180deg, var(--vm-panel-head) 0%, var(--vm-panel) 100%) !important;
    border-bottom: 1px solid var(--vm-border) !important;
    padding: 14px 18px !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .lux-panel-title {
    color: var(--vm-text) !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .lux-panel-divider {
    background: var(--vm-border) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .lux-detail-text {
    color: var(--vm-text-soft) !important;
}

/* event log */
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .lux-event-log {
    background: rgba(0,0,0,0.24) !important;
    border: 1px solid var(--vm-border) !important;
    color: var(--vm-text-soft) !important;
    font-family: var(--vm-font-mono) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .lux-event-row {
    border-bottom: 1px solid var(--vm-border-soft) !important;
}

/* central row */
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .lux-central-row {
    border-bottom: 1px solid var(--vm-border-soft) !important;
    color: var(--vm-text-soft) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .lux-central-head {
    color: var(--vm-text-muted) !important;
    border-bottom: 1px solid var(--vm-border) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .lux-central-row strong {
    color: var(--vm-text) !important;
}

/* ============================================================
   TABLES
   ============================================================ */
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) :is(
    table, .table, .data-table, .table-basic,
    .access-table, .users-table, .users-matrix,
    .status-table, .doc-table
) {
    color: var(--vm-text-soft) !important;
    background: transparent !important;
    border-collapse: collapse;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) :is(table, .table, .data-table) th,
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) :is(.access-table, .users-table, .status-table) th {
    color: var(--vm-text-muted) !important;
    background: var(--vm-panel-head) !important;
    text-transform: uppercase;
    font-size: var(--vm-text-xs) !important;  /* E5: 10px → 12px-golv (tabellhuvuden, 4 moduler) */
    letter-spacing: 0.10em !important;
    font-weight: 700 !important;
    border-bottom: 1px solid var(--vm-border) !important;
    padding: 10px 12px !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) :is(table, .table, .data-table) td,
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) :is(.access-table, .users-table, .status-table) td {
    color: var(--vm-text-soft) !important;
    border-top: 1px solid var(--vm-border-soft) !important;
    padding: 10px 12px !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) :is(table, .table, .data-table) tbody tr:hover td {
    background: rgba(255,255,255,0.025) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) :is(table, .table, .data-table) tbody tr td strong,
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) :is(table, .table, .data-table) tbody tr td b {
    color: var(--vm-text) !important;
}

/* ============================================================
   BUTTONS
   ============================================================ */
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) :is(.btn, button.btn, a.btn) {
    background: rgba(255,255,255,0.04) !important;
    color: var(--vm-text) !important;
    border: 1px solid var(--vm-border) !important;
    border-radius: var(--vm-radius-sm) !important;
    font-weight: 600 !important;
    letter-spacing: -0.005em;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) :is(.btn, button.btn, a.btn):hover {
    background: rgba(255,255,255,0.08) !important;
    border-color: var(--vm-border-strong) !important;
}
/* FAS O (2026-05-16): solid blå + vit text — tidigare gold-gradient med mörkt
   brunsvart text gav <4.5:1 kontrast på Tidomat-blå. Matchar nu designsystem-spec. */
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) :is(.btn-primary, button.btn-primary, a.btn-primary) {
    background: var(--vm-brand-primary) !important;
    color: var(--vm-text-on-brand) !important;
    border-color: var(--vm-brand-primary) !important;
    box-shadow: none !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) :is(.btn-primary, button.btn-primary, a.btn-primary):hover {
    background: var(--vm-brand-primary-hover) !important;
    color: var(--vm-text-on-brand) !important;
    border-color: var(--vm-brand-primary-hover) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) :is(.btn-secondary, button.btn-secondary, a.btn-secondary) {
    background: rgba(106,169,214,0.10) !important;
    color: var(--vm-info) !important;
    border-color: rgba(106,169,214,0.24) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) :is(.btn-secondary, button.btn-secondary, a.btn-secondary):hover {
    background: rgba(106,169,214,0.18) !important;
    border-color: rgba(106,169,214,0.40) !important;
    color: var(--vm-info) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) :is(.btn-danger, button.btn-danger, a.btn-danger) {
    background: rgba(224,133,133,0.10) !important;
    color: var(--vm-danger) !important;
    border-color: rgba(224,133,133,0.30) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) :is(.btn-ghost, button.btn-ghost, a.btn-ghost) {
    background: transparent !important;
    color: var(--vm-text-soft) !important;
    border-color: transparent !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) :is(.btn-ghost):hover {
    background: rgba(255,255,255,0.04) !important;
    color: var(--vm-text) !important;
}

/* ============================================================
   BADGES / STATUS
   ============================================================ */
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) :is(.badge, .status-badge, .access-status-badge, .access-pill, .role-badge, .ops-badge) {
    background: rgba(255,255,255,0.08) !important;
    color: rgba(235,240,250,0.85) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    border-radius: var(--vm-radius-pill) !important;
    padding: 3px 10px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) :is(.badge-success, .status-online, .badge.status-online) {
    background: var(--vm-success-soft) !important;
    color: var(--vm-success) !important;
    border-color: rgba(110,198,141,0.28) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) :is(.badge-warning, .badge.status-warning, .status-warning) {
    background: var(--vm-warning-soft) !important;
    color: var(--vm-warning) !important;
    border-color: rgba(var(--vm-accent-rgb), 0.28) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) :is(.badge-danger, .badge.status-offline, .status-offline) {
    background: var(--vm-danger-soft) !important;
    color: var(--vm-danger) !important;
    border-color: rgba(224,133,133,0.28) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) :is(.badge-info) {
    background: var(--vm-info-soft) !important;
    color: var(--vm-info) !important;
    border-color: rgba(106,169,214,0.28) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) :is(.badge-neutral) {
    background: rgba(255,255,255,0.05) !important;
    color: var(--vm-text-soft) !important;
    border-color: var(--vm-border) !important;
}

/* ============================================================
   FORMS
   ============================================================ */
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]) {
    background: rgba(0,0,0,0.20) !important;
    color: var(--vm-text) !important;
    border: 1px solid var(--vm-border) !important;
    border-radius: var(--vm-radius-xs) !important;
    padding: 9px 12px !important;
    font-family: var(--vm-font) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) :is(input, select, textarea):focus {
    outline: none !important;
    border-color: var(--vm-accent) !important;
    box-shadow: 0 0 0 3px var(--vm-accent-soft) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) ::placeholder {
    color: var(--vm-text-faint) !important;
    opacity: 1 !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) label {
    color: var(--vm-text-soft) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em;
}

/* ============================================================
   TYPOGRAPHY hierarchy
   ============================================================ */
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) :is(h1, h2, h3, h4, h5, h6) {
    color: var(--vm-text) !important;
    letter-spacing: -0.015em !important;
    font-weight: 600 !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) :is(.muted, .soft, .text-muted, .section-subtitle, small) {
    color: var(--vm-text-muted) !important;
}
/* Monolit #10 (a:not()-color) — Lardom 21 patch 2026-05-22 (LARMDEL fix-batch):
   .vm-segment-item ar en <a>-tagg (VMDS-batch 20). Utan denna :not() vinner
   color:var(--vm-accent)!important over .vm-segment-item.is-active spec 0,2,0
   och tab-texten blir samma farg som bg (rgb 74,139,214). Adderar .vm-segment-item
   till bade default- och :hover-block for konsekvens. */
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) a:not(.btn):not(.sidebar-link):not(.sidebar-system-entry):not(.sidebar-back-link):not(.sidebar-logout-link):not(.lux-kpi-link):not(.brand):not(.vm-tab):not(.vm-btn):not(.vm-error-cta):not(.vm-segment-item) {
    color: var(--vm-accent) !important;
    text-decoration: none;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) a:not(.btn):not(.sidebar-link):not(.sidebar-system-entry):not(.sidebar-back-link):not(.sidebar-logout-link):not(.lux-kpi-link):not(.brand):not(.vm-tab):not(.vm-btn):not(.vm-error-cta):not(.vm-segment-item):hover {
    color: var(--vm-accent-hover) !important;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

/* ============================================================
   ACCESS-V3 inline shell (_module_base.html) — neutralize
   light-blue gradients into studio dark
   ============================================================ */
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) :is(
    .access-v3-sidebar, .access-v3-panel, .access-v3-subbar,
    .access-v3-box, .access-v3-info, .access-v3-head
) {
    background: var(--vm-panel) !important;
    border-color: var(--vm-border) !important;
    box-shadow: var(--vm-shadow-soft) !important;
    color: var(--vm-text) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .access-v3-sidebar {
    background: linear-gradient(180deg, var(--vm-panel-2) 0%, var(--vm-panel) 100%) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .access-v3-brand {
    background: linear-gradient(180deg, var(--vm-panel-head) 0%, var(--vm-panel-2) 100%) !important;
    border-bottom: 1px solid var(--vm-border) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .access-v3-brand h1 {
    color: var(--vm-text) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .access-v3-brand p {
    color: var(--vm-text-muted) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .access-v3-group {
    background: rgba(255,255,255,0.02) !important;
    border-color: var(--vm-border) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .access-v3-group-title {
    background: rgba(255,255,255,0.03) !important;
    color: var(--vm-text-muted) !important;
    border-bottom: 1px solid var(--vm-border) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .access-v3-link {
    background: transparent !important;
    color: var(--vm-text-soft) !important;
    border-left: 4px solid transparent !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .access-v3-link + .access-v3-link {
    border-top: 1px solid var(--vm-border-soft) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .access-v3-link:hover {
    background: rgba(255,255,255,0.04) !important;
    color: var(--vm-text) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .access-v3-link.active {
    background: linear-gradient(90deg, var(--vm-accent-soft) 0%, transparent 100%) !important;
    border-left-color: var(--vm-accent) !important;
    color: var(--vm-accent) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .access-v3-head {
    background: linear-gradient(180deg, var(--vm-panel-head) 0%, var(--vm-panel) 100%) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .access-v3-title {
    color: var(--vm-text) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .access-v3-subtitle {
    color: var(--vm-text-muted) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .access-v3-badge {
    background: rgba(255,255,255,0.05) !important;
    border-color: var(--vm-border) !important;
    color: var(--vm-text-soft) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .access-v3-subbar {
    background: var(--vm-panel-2) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .access-v3-subnav a {
    background: rgba(255,255,255,0.03) !important;
    border-color: var(--vm-border) !important;
    color: var(--vm-text-soft) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .access-v3-subnav a.active {
    background: var(--vm-accent-soft) !important;
    border-color: rgba(var(--vm-accent-rgb), 0.30) !important;
    color: var(--vm-accent) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .access-v3-box {
    background: var(--vm-panel) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .access-v3-box-head {
    background: var(--vm-panel-head) !important;
    border-bottom: 1px solid var(--vm-border) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .access-v3-box-head :is(h2, h3) {
    color: var(--vm-text) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .access-v3-table-wrap {
    background: rgba(0,0,0,0.20) !important;
    border-top: 1px solid var(--vm-border) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .access-v3-table thead th {
    background: var(--vm-panel-head) !important;
    color: var(--vm-text-muted) !important;
    border-right: 1px solid var(--vm-border) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .access-v3-table td {
    color: var(--vm-text-soft) !important;
    border-top: 1px solid var(--vm-border-soft) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .access-v3-table tbody tr:hover td,
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .access-v3-table tbody tr.active td {
    background: var(--vm-accent-soft) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .access-v3-table a {
    color: var(--vm-accent) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .access-v3-muted {
    color: var(--vm-text-muted) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .access-v3-btn,
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .access-v3-actions button,
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .access-v3-actions a {
    background: rgba(255,255,255,0.04) !important;
    border-color: var(--vm-border) !important;
    color: var(--vm-text) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .access-v3-btn:hover,
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .access-v3-actions button:hover,
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .access-v3-actions a:hover {
    background: var(--vm-accent-soft) !important;
    border-color: rgba(var(--vm-accent-rgb), 0.30) !important;
    color: var(--vm-accent) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .access-v3-form input,
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .access-v3-form select,
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .access-v3-form textarea {
    background: rgba(0,0,0,0.20) !important;
    color: var(--vm-text) !important;
    border-color: var(--vm-border) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .access-v3-form label {
    color: var(--vm-text-soft) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .access-v3-info {
    background: var(--vm-panel) !important;
    color: var(--vm-text-soft) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .access-v3-info h3 {
    color: var(--vm-text) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .access-v3-list li {
    background: rgba(255,255,255,0.02) !important;
    border-color: var(--vm-border) !important;
    color: var(--vm-text-soft) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .access-v3-list li small {
    color: var(--vm-text-muted) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .access-v3-tabs a {
    background: rgba(255,255,255,0.03) !important;
    border-color: var(--vm-border) !important;
    color: var(--vm-text-soft) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .access-v3-tabs a.active {
    background: var(--vm-accent-soft) !important;
    color: var(--vm-accent) !important;
    border-color: rgba(var(--vm-accent-rgb), 0.30) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .access-v3-kpi-item {
    background: var(--vm-panel) !important;
    border-color: var(--vm-border) !important;
    color: var(--vm-text) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .access-v3-kpi-item strong {
    color: var(--vm-text) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .access-v3-pill {
    background: var(--vm-accent-soft) !important;
    color: var(--vm-accent) !important;
}

/* ============================================================
   Misc — flash messages, modals, scrollbars
   ============================================================ */
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) :is(.flash, .flash-info, .flash-success, .flash-warning, .flash-danger) {
    background: var(--vm-panel) !important;
    color: var(--vm-text) !important;
    border: 1px solid var(--vm-border) !important;
    border-left-width: 3px !important;
    border-radius: var(--vm-radius-sm) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .flash-success { border-left-color: var(--vm-success) !important; }
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .flash-warning { border-left-color: var(--vm-warning) !important; }
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .flash-danger  { border-left-color: var(--vm-danger) !important; }
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .flash-info    { border-left-color: var(--vm-info) !important; }

body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) ::-webkit-scrollbar {
    width: 10px; height: 10px;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) ::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.16);
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) ::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.08);
    border-radius: 6px;
    border: 2px solid transparent;
    background-clip: content-box;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) ::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.14);
    background-clip: content-box;
    border: 2px solid transparent;
}

/* don't override map editor (canvas-based, has own dark theme) */
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"])[data-endpoint="admin.map_editor"] {
    --bg: #171d26;
}

/* ============================================================
   PASS 2 — explicit overrides for inline <style> blocks
   (admin/access/index.html .ap-* classes med hårdkodade
   vita gradienter och låg-kontrast section-labels)
   ============================================================ */

/* alla section-headers / caps-labels → läsbara mot mörk bg */
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) :is(
    .ap-section-label,
    .section-label,
    .section-title,
    .section-heading,
    .module-section-heading,
    .module-toolbar-sub,
    .access-stat-label,
    .ap-kpi-lbl
) {
    color: var(--vm-text-soft) !important;
    opacity: 1 !important;
}

/* små sub-captions — fortfarande dim men läsbara */
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) :is(
    .ap-kpi-sub,
    .ap-quick-label span,
    .ap-warn-text span
) {
    color: var(--vm-text-muted) !important;
    opacity: 1 !important;
}

/* panel header h3 (Varningar & notiser, Fördelning, Senaste händelser ...) */
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) :is(
    .access-panel-header h3,
    .access-panel-header h2,
    .access-panel-header > div > h3,
    .access-panel-header > div > h2,
    .ap-panel-header h3,
    .panel-header h3,
    .panel-header h2
) {
    color: var(--vm-text) !important;
    font-weight: 600 !important;
    margin: 0 !important;
}

/* ── KPI grid (.ap-kpi) — neutralisera hårdkodad vit gradient ── */
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .ap-kpi,
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) a.ap-kpi {
    background: var(--vm-panel) !important;
    border: 1px solid var(--vm-border) !important;
    color: var(--vm-text) !important;
    border-radius: var(--vm-radius-sm) !important;
    box-shadow: var(--vm-shadow-soft) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .ap-kpi:hover,
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) a.ap-kpi:hover {
    border-color: var(--vm-accent) !important;
    box-shadow: 0 0 0 1px var(--vm-accent-soft), var(--vm-shadow) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .ap-kpi-val {
    color: var(--vm-text) !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .ap-kpi.warn .ap-kpi-val   { color: var(--vm-warning) !important; }
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .ap-kpi.danger .ap-kpi-val { color: var(--vm-danger) !important; }
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .ap-kpi.ok .ap-kpi-val     { color: var(--vm-success) !important; }

/* ── snabblänkar (.ap-quick) — neutralisera vit gradient + lugna ikoner ── */
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .ap-quick,
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) a.ap-quick {
    background: var(--vm-panel) !important;
    border: 1px solid var(--vm-border) !important;
    color: var(--vm-text) !important;
    border-radius: var(--vm-radius-sm) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .ap-quick:hover,
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) a.ap-quick:hover {
    border-color: var(--vm-accent) !important;
    background: var(--vm-bg-elevated) !important;
    box-shadow: 0 0 0 1px var(--vm-accent-soft) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .ap-quick-icon {
    border-radius: 8px !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .ap-quick-icon.blue   { background: rgba(106,169,214,0.16) !important; color: #7fb6dc !important; }
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .ap-quick-icon.green  { background: rgba(110,198,141,0.16) !important; color: var(--vm-success) !important; }
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .ap-quick-icon.orange { background: var(--vm-accent-soft) !important;  color: var(--vm-accent) !important; }
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .ap-quick-icon.purple { background: rgba(181,140,214,0.16) !important; color: #c4a3dd !important; }

/* ── varnings-rader (.ap-warn-item) — mörka mot studio-bg, behåll color-cue ── */
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .ap-warn-item.warn {
    background: var(--vm-warning-soft) !important;
    border-color: rgba(var(--vm-accent-rgb), 0.24) !important;
    color: #e8c489 !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .ap-warn-item.danger {
    background: var(--vm-danger-soft) !important;
    border-color: rgba(224,133,133,0.24) !important;
    color: #efaaaa !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .ap-warn-item.info {
    background: var(--vm-info-soft) !important;
    border-color: rgba(106,169,214,0.24) !important;
    color: #95c4e0 !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .ap-warn-item.ok {
    background: var(--vm-success-soft) !important;
    border-color: rgba(110,198,141,0.24) !important;
    color: #a3dab9 !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .ap-warn-text strong {
    color: inherit !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .ap-warn-link {
    color: inherit !important;
    opacity: 0.8 !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .ap-warn-link:hover {
    opacity: 1 !important;
    text-decoration: underline !important;
}

/* ── verktygskort (.access-stat / Kort-verifiering, PIN-kod, Zon-kapacitet) ── */
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .access-stat,
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) a.access-stat {
    background: var(--vm-panel) !important;
    border: 1px solid var(--vm-border) !important;
    color: var(--vm-text) !important;
    border-radius: var(--vm-radius-sm) !important;
    padding: 14px 16px !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) a.access-stat:hover {
    border-color: var(--vm-accent) !important;
    background: var(--vm-bg-elevated) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .access-stat-value {
    color: var(--vm-text) !important;
    font-weight: 600 !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .access-stat-label {
    color: var(--vm-text-muted) !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.10em !important;
    font-weight: 700 !important;
}

/* ── access-panel (Varningar & notiser, Fördelning, etc) ── */
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .access-panel {
    background: var(--vm-panel) !important;
    border: 1px solid var(--vm-border) !important;
    border-radius: var(--vm-radius) !important;
    box-shadow: var(--vm-shadow-soft) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .access-panel-header {
    background: var(--vm-panel-head) !important;
    border-bottom: 1px solid var(--vm-border) !important;
    padding: 12px 16px !important;
}

/* ── bar-chart (.ap-bar-track / .ap-bar-fill) ── */
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .ap-bar-track {
    background: rgba(255,255,255,0.06) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .ap-bar-fill         { background: var(--vm-info) !important; }
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .ap-bar-fill.green   { background: var(--vm-success) !important; }
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .ap-bar-fill.orange  { background: var(--vm-accent) !important; }
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .ap-bar-fill.red     { background: var(--vm-danger) !important; }
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .ap-bar-lbl {
    color: var(--vm-text-soft) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .ap-bar-num {
    color: var(--vm-text) !important;
    font-weight: 600 !important;
}

/* ── activity-rader (.ap-act-row) ── */
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .ap-act-row {
    border-bottom: 1px solid var(--vm-border-soft) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .ap-act-main {
    color: var(--vm-text) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .ap-act-time {
    color: var(--vm-text-muted) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .ap-act-dot.grey {
    background: var(--vm-text-faint) !important;
}

/* tightare gap mellan kort i KPI-grid (mindre plottrigt) */
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .ap-kpi-grid {
    gap: 10px !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .ap-quick-grid {
    gap: 10px !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .access-stack {
    gap: 18px !important;
}

/* ============================================================
   PASS 3 — neutralisera vita klumpar/streck/osynliga element
   ============================================================ */

/* override vm_compact_admin.css color-mix tokens som mixar in vitt */
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) {
    --vm-bg-subtle: var(--vm-panel) !important;
    --vm-bg-soft:   var(--vm-bg-elevated) !important;
    --vm-bg-app:    var(--vm-bg) !important;
    --vm-surface-raised: linear-gradient(180deg, var(--vm-panel-2) 0%, var(--vm-panel) 100%) !important;
}

/* .vm-empty-icon — hårdkodad vit gradient → studio */
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .vm-empty-icon {
    background: linear-gradient(180deg, var(--vm-panel-head) 0%, var(--vm-panel-2) 100%) !important;
    border: 1px solid var(--vm-border) !important;
    color: var(--vm-accent) !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
}

body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .vm-empty {
    padding: 16px 18px !important;
    gap: 8px !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .vm-empty-title {
    color: var(--vm-text) !important;
    font-weight: 600 !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .vm-empty-text {
    color: var(--vm-text-soft) !important;
}

/* .vm-toolbar — när tom (bara padding+border) blir det en spöksträcka.
   Border-top tonas till ingenting, padding till 0 så den försvinner när
   den inte har innehåll. */
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .vm-toolbar {
    border-top: 0 !important;
    padding-top: 0 !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .vm-toolbar:not(:empty) {
    padding-top: 8px !important;
    border-top: 1px solid var(--vm-border) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .vm-toolbar-group:empty {
    display: none !important;
}

/* .vm-admin-title / eyebrow */
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .vm-admin-title {
    color: var(--vm-text) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .vm-admin-eyebrow {
    color: var(--vm-accent) !important;
    letter-spacing: 0.16em !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .vm-admin-subtitle {
    color: var(--vm-text-soft) !important;
}

/* .access-canvas — neutralisera ljus gradient (panel → bg-subtle blir
   nu panel → panel via våra token-overrides, men sätt explicit också) */
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .access-canvas {
    background: var(--vm-panel) !important;
    border: 1px solid var(--vm-border) !important;
}

/* .access-stat / .access-list-item / .access-empty — alla har samma vit-glide-pattern */
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) :is(.access-stat, .access-list-item, .access-empty, .access-legacy-section, .access-legacy-summary, .access-legacy-body, .access-legacy-item, .access-legacy-empty) {
    background: var(--vm-panel) !important;
    border-color: var(--vm-border) !important;
    color: var(--vm-text) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .access-legacy-section[open] {
    background: var(--vm-panel-2) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .access-legacy-summary {
    background: var(--vm-panel-head) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .access-legacy-body {
    background: var(--vm-panel) !important;
    border-top: 1px solid var(--vm-border) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .access-legacy-summary-copy strong,
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .access-legacy-item strong,
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .access-legacy-empty strong,
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .access-list-item strong {
    color: var(--vm-text) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .access-legacy-empty {
    background: rgba(255,255,255,0.02) !important;
    border-style: dashed !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .access-subtle {
    color: var(--vm-text-soft) !important;
}

/* .access-table — har background:#fff hårdkodat */
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .access-table-wrap,
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .access-table {
    background: var(--vm-panel) !important;
}

/* .access-status-badge / .access-pill — har background:#fff hårdkodat */
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) :is(.access-status-badge, .access-pill, .access-legacy-count) {
    background: rgba(255,255,255,0.05) !important;
    border-color: var(--vm-border) !important;
    color: var(--vm-text-soft) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .access-status-badge--success { color: var(--vm-success) !important; }
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .access-status-badge--warning { color: var(--vm-warning) !important; }
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .access-status-badge--danger  { color: var(--vm-danger) !important; }

/* .access-btn — knappar inom access-shell */
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .access-btn {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid var(--vm-border) !important;
    color: var(--vm-text) !important;
    padding: 8px 14px !important;
    border-radius: var(--vm-radius-sm) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .access-btn:hover {
    background: rgba(255,255,255,0.08) !important;
    border-color: var(--vm-border-strong) !important;
}
/* FAS O (2026-05-16): solid blå + vit text — se kommentar ovan vid .btn-primary. */
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .access-btn-primary,
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) a.access-btn-primary {
    background: var(--vm-brand-primary) !important;
    color: var(--vm-text-on-brand) !important;
    border-color: var(--vm-brand-primary) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .access-btn-primary:hover {
    background: var(--vm-brand-primary-hover) !important;
    color: var(--vm-text-on-brand) !important;
    border-color: var(--vm-brand-primary-hover) !important;
}

/* .access-input / select / textarea */
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) :is(.access-input, .access-select, .access-textarea) {
    background: rgba(0,0,0,0.20) !important;
    color: var(--vm-text) !important;
    border-color: var(--vm-border) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .access-label {
    color: var(--vm-text-soft) !important;
}

/* .access-link-inline / .access-table a */
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) :is(.access-link-inline, .access-table a) {
    color: var(--vm-accent) !important;
}

/* ============================================================
   PASS 4 — sid-specifika overrides
   /admin/ideas (.id-card*), /admin/alarm (.al-*),
   /integration/* och /health/* har eget scope nu
   ============================================================ */

/* ── /admin/ideas — id-card* ── */
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .id-card,
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) a.id-card {
    background: var(--vm-panel) !important;
    border: 1px solid var(--vm-border) !important;
    color: var(--vm-text) !important;
    border-radius: var(--vm-radius) !important;
    box-shadow: var(--vm-shadow-soft) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) a.id-card:hover {
    border-color: var(--vm-accent) !important;
    background: var(--vm-bg-elevated) !important;
    box-shadow: var(--vm-shadow) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .id-card-title {
    color: var(--vm-text) !important;
    font-weight: 600 !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .id-card-desc {
    color: var(--vm-text-soft) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .id-card-icon {
    border-radius: var(--vm-radius-sm) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .id-card-icon.blue   { background: rgba(106,169,214,0.16) !important; color: #7fb6dc !important; }
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .id-card-icon.green  { background: rgba(110,198,141,0.16) !important; color: var(--vm-success) !important; }
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .id-card-icon.orange,
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .id-card-icon.amber  { background: var(--vm-accent-soft) !important;  color: var(--vm-accent) !important; }
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .id-card-icon.purple { background: rgba(181,140,214,0.16) !important; color: #c4a3dd !important; }
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .id-card-icon.red    { background: var(--vm-danger-soft) !important;  color: var(--vm-danger) !important; }
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .id-card-icon.yellow { background: var(--vm-warning-soft) !important; color: var(--vm-warning) !important; }
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .id-tag {
    background: rgba(255,255,255,0.05) !important;
    color: var(--vm-text-soft) !important;
    border: 1px solid var(--vm-border) !important;
    font-size: var(--vm-text-xs) !important;  /* E5: 10px → 12px-golv */
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    font-weight: 700 !important;
    padding: 3px 8px !important;
    border-radius: var(--vm-radius-pill) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .id-tag.api,
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .id-tag.ready {
    background: var(--vm-success-soft) !important;
    color: var(--vm-success) !important;
    border-color: rgba(110,198,141,0.28) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .id-tag.planned,
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .id-tag.warn {
    background: var(--vm-warning-soft) !important;
    color: var(--vm-warning) !important;
    border-color: rgba(var(--vm-accent-rgb), 0.28) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .id-tag.firmware,
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .id-tag.danger {
    background: var(--vm-danger-soft) !important;
    color: var(--vm-danger) !important;
    border-color: rgba(224,133,133,0.28) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .id-title,
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .id-section-title {
    color: var(--vm-text) !important;
    font-weight: 600 !important;
}

/* ── /admin/alarm — al-* (har inline background:#fff hårdkodat) ── */
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .al-wrap {
    background: transparent !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .al-panel {
    background: var(--vm-panel) !important;
    border: 1px solid var(--vm-border) !important;
    border-radius: var(--vm-radius) !important;
    box-shadow: var(--vm-shadow-soft) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .al-title {
    color: var(--vm-text) !important;
    font-weight: 600 !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .al-sub {
    color: var(--vm-text-soft) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .al-live {
    color: var(--vm-success) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .al-pick,
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) select.al-pick {
    background: rgba(0,0,0,0.20) !important;
    color: var(--vm-text) !important;
    border-color: var(--vm-border) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .al-p-title {
    color: var(--vm-text-soft) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.10em !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .al-p-count {
    background: rgba(255,255,255,0.06) !important;
    color: var(--vm-text-soft) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .al-p-count.red {
    background: var(--vm-danger-soft) !important;
    color: var(--vm-danger) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .al-empty {
    color: var(--vm-text-muted) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .al-row,
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .al-row-it {
    background: rgba(0,0,0,0.16) !important;
    border: 1px solid var(--vm-border) !important;
    color: var(--vm-text) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .al-row-st.ok      { background: var(--vm-success-soft) !important; color: var(--vm-success) !important; }
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .al-row-st.active  { background: var(--vm-danger-soft) !important; color: var(--vm-danger) !important; }
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .al-row-st.warn    { background: var(--vm-warning-soft) !important; color: var(--vm-warning) !important; }
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .al-row-st.offline { background: rgba(255,255,255,0.06) !important; color: var(--vm-text-muted) !important; }
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .al-row-st.trig    { background: var(--vm-danger-soft) !important; color: var(--vm-danger) !important; }
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .al-modal-bg {
    background: rgba(0,0,0,0.60) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .al-modal {
    background: var(--vm-panel) !important;
    border: 1px solid var(--vm-border) !important;
    color: var(--vm-text) !important;
    box-shadow: var(--vm-shadow-elev) !important;
}

/* ── system_report wizard-steps (det ljusa området med "1 Period & serverstatus") ── */
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) :is(.wizard-steps, .wizard-step, .step-pill, .step-number) {
    background: transparent !important;
    color: var(--vm-text-soft) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .wizard-step.active,
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .step-pill.active {
    background: var(--vm-accent-soft) !important;
    color: var(--vm-accent) !important;
}

/* ── /health/* gauges, trend-charts ── */
body[data-path^="/health"] :is(.gauge, .gauge-track, .trend-chart, .trend-bg) {
    background: rgba(255,255,255,0.04) !important;
}
body[data-path^="/health"] svg circle[stroke="#e5e7eb"],
body[data-path^="/health"] svg path[fill="#f0f2f5"] {
    stroke: rgba(255,255,255,0.08) !important;
    fill: rgba(255,255,255,0.04) !important;
}

/* ── universal: alla element med inline style="background:#fff" / "background:white" ── */
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) [style*="background:#fff"],
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) [style*="background: #fff"],
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) [style*="background:white"],
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) [style*="background: white"],
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) [style*="background-color:#fff"],
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) [style*="background-color: #fff"] {
    background: var(--vm-panel) !important;
}

/* ============================================================
   PASS 5 — /integration/* sidor: .int-* klasser
   (template har inline <style> med 30+ hårdkodade vita
   bakgrunder och ljusblå gradienter)
   ============================================================ */

body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) :is(
    .int-search, .int-add-drawer, .int-panel,
    .int-add-trigger, .int-row-btn, .int-menu-btn
) {
    background: var(--vm-panel) !important;
    border-color: var(--vm-border) !important;
    color: var(--vm-text) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .int-search {
    background: rgba(0,0,0,0.20) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .int-search:focus {
    border-color: var(--vm-accent) !important;
    box-shadow: 0 0 0 3px var(--vm-accent-soft) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .int-counter {
    color: var(--vm-text-muted) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .int-add-trigger:hover {
    background: rgba(255,255,255,0.04) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .int-add-trigger-label {
    color: var(--vm-text) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .int-add-trigger-icon {
    background: var(--vm-accent-soft) !important;
    color: var(--vm-accent) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .int-add-trigger-chevron {
    color: var(--vm-text-muted) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .int-discovery {
    background: var(--vm-info-soft) !important;
    border-color: rgba(106,169,214,0.24) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .int-discovery-label {
    color: var(--vm-info) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .int-device-chip {
    background: rgba(106,169,214,0.12) !important;
    border-color: rgba(106,169,214,0.24) !important;
    color: var(--vm-text) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .int-panel-head {
    background: var(--vm-panel-head) !important;
    border-bottom-color: var(--vm-border) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .int-panel-title {
    color: var(--vm-text-soft) !important;
    font-weight: 700 !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .int-autoping {
    color: var(--vm-success) !important;
}
/* .int-table path-scoped regler rivet i Batch 19g-1 2026-05-22 —
   alla integration-tabeller migrerade till .vm-table i Batch 19d.
   Cross-template grep verifierade 0 användning av .int-table-klassen. */
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .int-name-cell strong {
    color: var(--vm-text) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .int-name-cell span {
    color: var(--vm-text-muted) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .int-row-btn,
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .int-menu-btn {
    background: rgba(255,255,255,0.04) !important;
    border-color: var(--vm-border) !important;
    color: var(--vm-text-soft) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .int-row-btn:hover,
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .int-menu-btn:hover {
    background: rgba(255,255,255,0.08) !important;
    border-color: var(--vm-border-strong) !important;
    color: var(--vm-text) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .int-row-btn.danger {
    background: var(--vm-danger-soft) !important;
    border-color: rgba(224,133,133,0.30) !important;
    color: var(--vm-danger) !important;
}
/* .int-dropdown path-scoped overrides rivna i Batch 19g-1 2026-05-22 —
   klassen anvandes 0 ggr i templates. integration_page.css:65-71-
   blocket rivet samtidigt. */
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .int-empty {
    color: var(--vm-text-muted) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .int-dot.online {
    background: var(--vm-success) !important;
    box-shadow: 0 0 0 2px var(--vm-success-soft) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .int-dot.offline {
    background: var(--vm-danger) !important;
    box-shadow: 0 0 0 2px var(--vm-danger-soft) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .int-dot.loading {
    background: var(--vm-warning) !important;
}

/* ── .uc-* (unknown card popup) ── */
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) :is(
    [id^="uc-"]
) {
    background: var(--vm-panel) !important;
    color: var(--vm-text) !important;
    border-color: var(--vm-border) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .uc-item {
    color: var(--vm-text-soft) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .uc-item:hover {
    background: rgba(255,255,255,0.04) !important;
    color: var(--vm-text) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .uc-item-danger {
    color: var(--vm-danger) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .uc-div {
    background: var(--vm-border) !important;
}

/* ── tabbar (Centraler / Synkstatus / Synkinställningar / ...) ── */
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) :is(
    .nav-tabs, .tab-bar, .tabs-list
) :is(a, .tab-link, .tab-item, button) {
    background: transparent !important;
    color: var(--vm-text-soft) !important;
    border-color: transparent !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) :is(
    .nav-tabs, .tab-bar, .tabs-list
) :is(a, .tab-link, .tab-item, button):hover {
    color: var(--vm-text) !important;
    background: rgba(255,255,255,0.04) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) :is(
    .nav-tabs, .tab-bar, .tabs-list
) :is(a, .tab-link, .tab-item, button).active {
    color: var(--vm-accent) !important;
    background: var(--vm-accent-soft) !important;
    border-bottom: 2px solid var(--vm-accent) !important;
}

/* ── universellt: bumpa font-weight på små caps headers (många template
   använder font-weight:800 men render-vikten kan se urvattnat ut mot mörk
   bg utan tydligt antialias-stöd). Sätter explicit 700 + lite spacing. ── */
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) :is(
    [class*="-section-label"],
    [class*="-panel-title"],
    [class*="-stat-label"],
    [class*="-kpi-lbl"],
    [class*="section-heading"]
) {
    color: var(--vm-text-soft) !important;
    font-weight: 700 !important;
    -webkit-font-smoothing: antialiased;
}

/* ============================================================
   PASS 6 — alla nya prefixer från audit
   .central-* / .cs-* / .sd-* / .sr-* / .sl-* / .rt-*
   ============================================================ */

/* ── universal: TR td linear-gradient(...,#f5f8fb / #eef3fa) striping ── */
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) tr:nth-child(even) td[style*="background"],
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) tr:nth-child(even) td[bgcolor] {
    background: rgba(255,255,255,0.02) !important;
}

/* ── /admin/central_status — .central-* + .cs-* ── */
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) :is(
    .central-topbar, .central-meta, .central-title, .central-search,
    .central-filter-row, .central-toolbar, .central-table-wrap,
    .central-summary-card, .central-summary-value, .central-summary-label,
    .central-name, .central-sub, .central-row, .central-cell,
    .central-backup, .central-backup-card, .central-pill, .central-chip
) {
    color: var(--vm-text) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .central-meta,
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .central-summary-label,
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .central-sub {
    color: var(--vm-text-muted) !important;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    font-size: 11px;
    font-weight: 700;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) :is(
    .central-summary-card, .central-search, .central-toolbar, .central-table-wrap,
    .central-backup, .central-backup-card, .central-row, .central-filter-row
) {
    background: var(--vm-panel) !important;
    border: 1px solid var(--vm-border) !important;
    border-radius: var(--vm-radius) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .central-search input,
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .central-filter-row input {
    background: rgba(0,0,0,0.20) !important;
    color: var(--vm-text) !important;
    border-color: var(--vm-border) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .central-pill,
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .central-chip {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid var(--vm-border) !important;
    color: var(--vm-text-soft) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) :is(
    .cs-col-mgr, .cs-col-mgr-head, .cs-col-mgr-body, .cs-col-mgr-btn,
    .cs-drag-list, .cs-drag-item, .cs-popup, .cs-modal, .cs-row, .cs-cell
) {
    background: var(--vm-panel) !important;
    border-color: var(--vm-border) !important;
    color: var(--vm-text) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .cs-col-mgr-title {
    color: var(--vm-text) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .cs-col-mgr-sub,
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .cs-col-mgr-chevron {
    color: var(--vm-text-muted) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .cs-col-mgr-btn {
    background: rgba(255,255,255,0.04) !important;
    border-color: var(--vm-border) !important;
    color: var(--vm-text-soft) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .cs-col-mgr-btn.accent {
    background: linear-gradient(180deg, var(--vm-accent) 0%, var(--vm-accent-strong) 100%) !important;
    color: #1a1305 !important;
    border-color: rgba(var(--vm-accent-rgb), 0.50) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .cs-drag-item {
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid var(--vm-border) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .cs-drag-item.is-visible {
    background: var(--vm-accent-soft) !important;
    border-color: rgba(var(--vm-accent-rgb), 0.30) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .cs-drag-item.drag-over {
    border-color: var(--vm-accent) !important;
}

/* ── /admin/access/schedules_doors — .sd-* ── */
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) :is(
    .sd-left-panel, .sd-right-panel, .sd-modal, .sd-week-view,
    .sd-form-input, .sd-form-select
) {
    background: var(--vm-panel) !important;
    border: 1px solid var(--vm-border) !important;
    color: var(--vm-text) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) :is(
    .sd-left-head, .sd-right-head, .sd-door-table .sd-door-th
) {
    background: var(--vm-panel-head) !important;
    border-bottom: 1px solid var(--vm-border) !important;
    color: var(--vm-text-soft) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .sd-search {
    background: rgba(0,0,0,0.20) !important;
    color: var(--vm-text) !important;
    border-color: var(--vm-border) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .sd-filter-row {
    background: var(--vm-panel-2) !important;
    border-bottom: 1px solid var(--vm-border) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .sd-form-input,
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .sd-form-select {
    background: rgba(0,0,0,0.20) !important;
}

/* ── /admin/system_report och /integration/system_report — .sr-* / .sl-* ── */
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) :is(
    .sr-config, .sr-report-panel, .sr-input
) {
    background: var(--vm-panel) !important;
    border: 1px solid var(--vm-border) !important;
    color: var(--vm-text) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .sr-input {
    background: rgba(0,0,0,0.20) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) :is(
    .sr-config-head, .sr-report-head, .sr-sec-head
) {
    background: var(--vm-panel-head) !important;
    border-bottom: 1px solid var(--vm-border) !important;
    color: var(--vm-text-soft) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .sr-kv-item {
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid var(--vm-border) !important;
    color: var(--vm-text) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .sr-table tr:nth-child(even) td,
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .sl-table tr:nth-child(even) td {
    background: rgba(255,255,255,0.02) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .sr-table tr:hover td {
    background: var(--vm-accent-soft) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .sr-table th,
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .sl-table th {
    background: var(--vm-panel-head) !important;
    color: var(--vm-text-soft) !important;
    border-bottom: 1px solid var(--vm-border) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .sl-badge.out {
    background: var(--vm-info-soft) !important;
    color: var(--vm-info) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .sl-badge.in,
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .sl-badge.ok {
    background: var(--vm-success-soft) !important;
    color: var(--vm-success) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .sl-badge.fail {
    background: var(--vm-danger-soft) !important;
    color: var(--vm-danger) !important;
}

/* ── /realtime/index — .rt-* ── */
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) :is(
    .rt-stat, .rt-door-card, .rt-tab.active
) {
    background: var(--vm-panel) !important;
    border: 1px solid var(--vm-border) !important;
    color: var(--vm-text) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) :is(
    .rt-subnav, .rt-table th, .rt-th
) {
    background: var(--vm-panel-head) !important;
    color: var(--vm-text-soft) !important;
    border-bottom: 1px solid var(--vm-border) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .rt-tab {
    background: transparent !important;
    color: var(--vm-text-soft) !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .rt-tab.active {
    background: var(--vm-accent-soft) !important;
    color: var(--vm-accent) !important;
    border-bottom: 2px solid var(--vm-accent) !important;
}

/* ── /admin/alarm fallback-fix: .al-row använde var(--bg-soft,var(--vm-text)) — ── */
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .al-row,
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .al-btn {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid var(--vm-border) !important;
    color: var(--vm-text) !important;
}

/* ── synkstatus-kort på /integration (rad 860 inline) ── */
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) :is(
    .sync-card, .sync-status-card, .sync-row, .sync-interval-card,
    .integ-sync-card, .integ-interval-tile
) {
    background: var(--vm-panel) !important;
    border: 1px solid var(--vm-border) !important;
    color: var(--vm-text) !important;
    border-radius: var(--vm-radius) !important;
}

/* ── tomma stora numeriska headers ("10s" / "1m" / "5m" på synkstatus)
   som ser blurry/urvattnade ut — fixa text-rendering ── */
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) :is(
    [class*="big-number"], [class*="kpi-value"], [class*="metric-value"],
    [class*="-val"], [class*="-figure"]
) {
    color: var(--vm-text) !important;
    font-weight: 600 !important;
    text-shadow: none !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}

/* ── universellt: alla input/select/textarea — explicit dark styling
   (color-scheme: dark ensam räcker inte, browser-default vita kvar i många fall) ── */
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]) {
    color-scheme: dark;
    background: var(--vm-panel-2) !important;
    color: var(--vm-text) !important;
    border-color: var(--vm-border-strong);
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) :is(input, select, textarea)::placeholder {
    color: var(--vm-text-faint) !important;
    opacity: 1;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) :is(input, select, textarea):focus {
    border-color: var(--vm-accent);
    box-shadow: 0 0 0 3px var(--vm-accent-soft);
    outline: none;
}

/* ── thead/elevated-bg rows: dämpa --bg-soft så en "elevation" inte
   sticker ut som ljus bar mot dark panel. Pekar nu mot panel-head
   istället för bg-hover (mindre delta från panel). ── */
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) {
    --bg-soft:      var(--vm-panel-head);
    --vm-bg-subtle: var(--vm-panel-head);
}

/* ── /health-modulen: egen --health-* palette i health.css (light by default).
   Override till studio-paletten så alla /health-undersidor blir dark. ── */
body[data-path^="/health"] {
    --health-bg:        var(--vm-bg);
    --health-card-bg:   var(--vm-panel);
    --health-border:    var(--vm-border);
    --health-text:      var(--vm-text);
    --health-text-muted: var(--vm-text-muted);
    --health-accent:    var(--vm-accent);

    --health-ok:        var(--vm-success);
    --health-ok-bg:     var(--vm-success-soft);
    --health-ok-border: rgba(110,198,141,0.32);

    --health-warning:        var(--vm-warning);
    --health-warning-bg:     var(--vm-warning-soft);
    --health-warning-border: rgba(var(--vm-accent-rgb), 0.32);

    --health-critical:        var(--vm-danger);
    --health-critical-bg:     var(--vm-danger-soft);
    --health-critical-border: rgba(224,133,133,0.32);

    --health-stale:    var(--vm-text-faint);
    --health-stale-bg: var(--vm-bg-elevated);

    --health-shadow:    0 1px 2px rgba(0,0,0,0.20), 0 1px 3px rgba(0,0,0,0.30);
    --health-shadow-lg: 0 4px 12px rgba(0,0,0,0.40);
}

/* health-tabs: gör hover/active visuellt tydliga mot dark */
body[data-path^="/health"] .health-tab {
    color: var(--vm-text-soft);
}
body[data-path^="/health"] .health-tab:hover {
    color: var(--vm-text);
    background: var(--vm-bg-hover);
}
body[data-path^="/health"] .health-tab.active {
    color: var(--vm-accent);
    border-bottom-color: var(--vm-accent);
}

/* health-card / panel / kpi-grid: säkerställ att eventuella
   hardcoded lights blir dark */
body[data-path^="/health"] :is(.health-card, .health-panel, .health-kpi-card,
                                  .health-stat, .health-summary, .health-banner,
                                  .health-centrals-strip, .health-alarm-section,
                                  .health-bottom-grid, .health-empty,
                                  .health-pearl, .health-list-item, .health-row,
                                  .health-feature, .health-section, .health-widget,
                                  .health-admin-panel, .health-admin-card,
                                  .health-admin-row) {
    background: var(--vm-panel);
    border-color: var(--vm-border);
    color: var(--vm-text);
}

body[data-path^="/health"] :is(h1, h2, h3, h4, .health-title,
                                  .health-panel-title, .health-section-title) {
    color: var(--vm-text);
}

body[data-path^="/health"] :is(.health-meta, .health-panel-meta,
                                  .health-feature-meta, .health-empty,
                                  .health-text-muted) {
    color: var(--vm-text-muted);
}

/* ── universal fallback: alla element med svag custom property som default
   blir vit (t.ex. var(--panel, #282623)) — sätt --panel på body så fallback inte tas ── */
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) {
    --vm-premium-panel-gradient: var(--vm-panel-2);   /* Etapp 2: platt, var gradient */
    --vm-premium-divider: var(--vm-border);
}

/* ────────────────────────────────────────────────────────────
   STAT KPI-KORT (.ap-kpi) — Per's referensspec 2026-05-09:
   mörk system-yta + vit text för max kontrast i statistik-raden.
   2026-05-29 tema-grund: tokeniserat — light-mode biter via
   --vm-surface-system + --vm-text-on-system.
   html-prefix höjer specificity (0,2,2) > vm_atelier (0,2,1). */
html body.theme-atelier .ap-kpi,
html body.theme-atelier a.ap-kpi {
    background: var(--vm-surface-system) !important;
    border: 1px solid var(--vm-border-on-system-subtle) !important;
    color: var(--vm-text-on-system) !important;
    box-shadow: none !important;
}
html body.theme-atelier .ap-kpi:hover,
html body.theme-atelier a.ap-kpi:hover {
    background: var(--vm-surface-system-hover) !important;
    border-color: rgba(var(--vm-accent-rgb), 0.30) !important;
}
html body.theme-atelier .ap-kpi-val { color: var(--vm-text-on-system) !important; }
html body.theme-atelier .ap-kpi-lbl { color: rgba(255,255,255,0.62) !important; }
html body.theme-atelier .ap-kpi-sub { color: rgba(255,255,255,0.45) !important; }

/* SERVER-VERSION-KNAPP (.sidebar-version-badge) — mörk system-yta, vit text */
html body.theme-atelier .sidebar-version-badge {
    background: var(--vm-surface-system) !important;
    border: 1px solid var(--vm-border-on-system-subtle) !important;
    color: rgba(255,255,255,0.78) !important;
}
html body.theme-atelier .sidebar-version-badge:hover {
    background: var(--vm-surface-system-hover) !important;
    color: var(--vm-text-on-system) !important;
}

/* GHOST-KNAPPAR — gold accent (DETALJER, VISA ALLA, Hantera kolumner, Avbryt,
   Återställ, Stäng, Importera Excel — all .access-btn-ghost system-wide).
   Per's spec 2026-05-09: rundare + mjukare border (referensbild). */
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .access-btn.access-btn-ghost,
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) a.access-btn.access-btn-ghost,
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) button.access-btn.access-btn-ghost,
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) select.access-btn.access-btn-ghost {
    background: rgba(212,168,67,0.12) !important;
    border: 1px solid rgba(212,168,67,0.50) !important;
    color: #e8c489 !important;
    border-radius: 10px !important;
    padding: 6px 14px !important;
}
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) .access-btn.access-btn-ghost:hover,
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) a.access-btn.access-btn-ghost:hover,
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) button.access-btn.access-btn-ghost:hover,
body:is([data-path^="/admin"],[data-path^="/integration"],[data-path^="/health"],[data-path^="/realtime"]) select.access-btn.access-btn-ghost:hover {
    background: rgba(212,168,67,0.14) !important;
    border-color: rgba(212,168,67,0.65) !important;
    color: #e8b955 !important;
}

/* ============================================================
   REFERENS-LAB: /admin/access — Per:s nya designspråk
   Mål: rundare sidebar-knappar, svart-bg-vit-text på SYSTEM,
        vita sektionsrubriker, ljusare + varmare ton.
   När godkänt -> bredda scope till alla admin-sidor.
   ============================================================ */

/* --- bakgrund: lite ljusare + varmare grå-ton (mindre blå, hint av varm)
       2026-05-29 tema-grund: scopad till mörkt läge så light inte överstyrs.
       --vm-bg-elevated path-override vann över [data-theme="light"]:s
       --vm-bg-input → inputs förblev mörka i ljust. Fix: scope path-overrides
       till :root (default dark) bara, lägg motsvarande light-override under. --- */
html:not([data-theme="light"]) body[data-path^="/admin/access"] {
    --vm-bg:           #1d222a !important;
    --vm-bg-elevated:  #232831 !important;
    --vm-bg-hover:     #2a303a !important;
    --vm-panel:        #131922 !important;
    --vm-panel-2:      #2a303a !important;
    --vm-panel-head:   #2f3640 !important;
    --bg:              #1d222a !important;
    --bg-elevated:     #232831 !important;
    --bg-soft:         #2a303a !important;
    --panel:           #131922 !important;
    --panel-2:         #2a303a !important;
    --panel-3:         #2f3640 !important;
}
/* Light-läge på admin/access: behåll varmare hint men ljus. */
html[data-theme="light"] body[data-path^="/admin/access"] {
    --vm-bg:           #f6f8fa !important;
    --vm-bg-elevated:  #ffffff !important;
    --vm-bg-hover:     rgba(15, 23, 42, 0.04) !important;
    --vm-panel:        #fafbfc !important;
    --vm-panel-2:      #f1f4f8 !important;
    --vm-panel-head:   #eef2f6 !important;
    --bg:              #f6f8fa !important;
    --bg-elevated:     #ffffff !important;
    --bg-soft:         #f1f4f8 !important;
    --panel:           #fafbfc !important;
    --panel-2:         #f1f4f8 !important;
    --panel-3:         #eef2f6 !important;
}
body[data-path^="/admin/access"].app-shell {
    background:
        radial-gradient(1200px 600px at 0% 0%, rgba(var(--vm-accent-rgb), 0.06), transparent 60%),
        radial-gradient(800px 500px at 100% 100%, rgba(106,169,214,0.04), transparent 60%),
        var(--vm-bg) !important;
}

/* ============================================================
   FARG-KONSEKVENS (Batch 17.5b, 2026-05-20)
   Path-scoped --panel-overrides for sidor som ska matcha referens
   (admin/index .lux-panel-flat-monster, bg #131922 = body bg).
   Symmetriskt med access-overriden ovan men med referens-fargen.
   Tackar: debug, system_report, vm-log, hela ideas-modulen.
   ============================================================ */
/* 2026-05-29 r8: tema-medveten (D4) — var tidigare ej scopad → mörka paneler
   i ljust på debug/system_report/vm-log/ideas. */
html:not([data-theme="light"]) body[data-path^="/admin/debug"],
html:not([data-theme="light"]) body[data-path^="/admin/system_report"],
html:not([data-theme="light"]) body[data-path^="/admin/vm-log"],
html:not([data-theme="light"]) body[data-path^="/admin/ideas"] {
    --panel:    #131922 !important;
    --vm-panel: #131922 !important;
}
html[data-theme="light"] body[data-path^="/admin/debug"],
html[data-theme="light"] body[data-path^="/admin/system_report"],
html[data-theme="light"] body[data-path^="/admin/vm-log"],
html[data-theme="light"] body[data-path^="/admin/ideas"] {
    --panel:    var(--vm-bg-elevated) !important;
    --vm-panel: var(--vm-bg-elevated) !important;
}

/* --- sidebar-bg: matcha den varmare tonen, inte näst-svart --- */
/* FAS O (2026-05-16): admin/access sidebar pekar nu på dedikerad sidebar-token. */
body[data-path^="/admin/access"] .app-sidebar {
    background: var(--vm-bg-sidebar) !important;
}

/* --- SYSTEM-knappen i admin/access: använd brand-gradient i båda teman.
   2026-05-29 tema-grund-r3: bytte från surface-system (mörk i båda) till
   sidebar-system-grad så light får ljus blå pill med vit text. --- */
body[data-path^="/admin/access"] .sidebar-system-entry {
    background: var(--vm-sidebar-system-grad) !important;
    border: 1px solid var(--vm-border-default) !important;
    color: var(--vm-sidebar-system-text) !important;
    border-radius: 14px !important;
    letter-spacing: 0.18em;
    font-weight: 700;
    box-shadow: var(--vm-shadow-md) !important;
}
body[data-path^="/admin/access"] .sidebar-system-entry:hover,
body[data-path^="/admin/access"] .sidebar-system-entry.is-active {
    background: var(--vm-sidebar-system-grad-hover) !important;
    border-color: var(--vm-border-strong) !important;
    color: var(--vm-sidebar-system-text) !important;
}

/* --- back-link rundare --- */
body[data-path^="/admin/access"] .sidebar-back-link {
    border-radius: 12px !important;
}

/* --- nav-länkar (Personer, Tillträdespunkter, etc.) rundare --- */
body[data-path^="/admin/access"] .sidebar-link,
body[data-path^="/admin/access"] a.sidebar-link {
    border-radius: 12px !important;
}

/* --- aktiv nav-länk: behåll guld accent men rundare + tydligare --- */
body[data-path^="/admin/access"] .sidebar-link.active,
body[data-path^="/admin/access"] a.sidebar-link.active {
    border-radius: 12px !important;
}

/* --- SEKTIONSRUBRIKER: PERSONER / BEHÖRIGHET / TIDSTYRNING / LOGG.
       2026-05-29 tema-grund: tokeniserat — i mörkt vit, i ljust mörk-primary. --- */
body[data-path^="/admin/access"] .sidebar-label {
    color: var(--vm-text-primary) !important;
    opacity: 0.95;
    font-weight: 800 !important;
    letter-spacing: 0.18em !important;
}

/* --- logout rundare --- */
body[data-path^="/admin/access"] .sidebar-logout-link {
    border-radius: 12px !important;
}

/* --- byggtid-knapp + server-status-pill rundare (sidebar-foten) --- */
body[data-path^="/admin/access"] .sidebar-foot,
body[data-path^="/admin/access"] .sidebar-foot * {
    border-radius: 12px;
}

/* --- tabellrubriker i SENASTE PASSAGER (och alla access-panels):
       2026-05-29 r8: tema-aware par. MÖRKT = original system-yta #0a0e14 + vit
       text (D5, återställt — r7 hade halv-flyttat till #1e2630). LJUST = vit
       header + mörk text (matchar att panelen nu flippar till ljust kort, Per's
       beslut THEME_TRACKER §6b). --- */
body[data-path^="/admin/access"] .access-panel table thead th,
body[data-path^="/admin/access"] .access-panel thead th,
body[data-path^="/admin/access"] section.access-panel table th {
    border-bottom: 1px solid var(--vm-border-on-system-subtle) !important;
    font-weight: 800 !important;
    letter-spacing: 0.10em !important;
}
html:not([data-theme="light"]) body[data-path^="/admin/access"] .access-panel table thead th,
html:not([data-theme="light"]) body[data-path^="/admin/access"] .access-panel thead th,
html:not([data-theme="light"]) body[data-path^="/admin/access"] section.access-panel table th {
    background: var(--vm-surface-system) !important;
    color: var(--vm-text-on-system) !important;
}
html[data-theme="light"] body[data-path^="/admin/access"] .access-panel table thead th,
html[data-theme="light"] body[data-path^="/admin/access"] .access-panel thead th,
html[data-theme="light"] body[data-path^="/admin/access"] section.access-panel table th {
    background: var(--vm-bg-surface) !important;
    color: var(--vm-text-primary) !important;
    border-bottom-color: var(--vm-border-default) !important;
}

/* --- access-panels (Larmstatus / Zoner / Senaste passager / Varningar / Fördelning):
       2026-05-29 r8: Per valde "flippa till ljust kort" (THEME_TRACKER §6b-beslut;
       tidigare "svart med vit text" gällde pre-tema-eran). MÖRKT = oförändrad
       system-yta #0a0e14 + vit on-system-text (D5). LJUST = vit kort-yta + mörk
       läsbar text, konsekvent med grannpanelerna. Tidigare var rubriken mörk-på-
       mörk = osynlig i ljust (r7-halvmigration). --- */
body[data-path^="/admin/access"] .access-panel {
    border: 1px solid var(--vm-border-on-system-subtle) !important;
    box-shadow: var(--vm-shadow-md) !important;
}
html:not([data-theme="light"]) body[data-path^="/admin/access"] .access-panel {
    background: var(--vm-surface-system) !important;   /* mörk #0a0e14 (D5) */
}
html[data-theme="light"] body[data-path^="/admin/access"] .access-panel {
    background: var(--vm-bg-surface) !important;        /* ljus vit kort-yta */
}
body[data-path^="/admin/access"] .access-panel-header {
    background: transparent !important;
}
/* Header-rubrik + ingress: vit on-system i mörkt, mörk i ljust. */
html:not([data-theme="light"]) body[data-path^="/admin/access"] .access-panel-header h3,
html:not([data-theme="light"]) body[data-path^="/admin/access"] .access-panel-header h4 {
    color: var(--vm-text-on-system) !important;
}
html[data-theme="light"] body[data-path^="/admin/access"] .access-panel-header h3,
html[data-theme="light"] body[data-path^="/admin/access"] .access-panel-header h4 {
    color: var(--vm-text-primary) !important;
}
html:not([data-theme="light"]) body[data-path^="/admin/access"] .access-panel-header p {
    color: rgba(255, 255, 255, 0.60) !important;
}
html[data-theme="light"] body[data-path^="/admin/access"] .access-panel-header p {
    color: var(--vm-text-muted) !important;
}
body[data-path^="/admin/access"] .access-panel table tbody td {
    background: transparent !important;
    border-color: var(--vm-border-on-system-subtle) !important;
}
html:not([data-theme="light"]) body[data-path^="/admin/access"] .access-panel table tbody td {
    color: rgba(255, 255, 255, 0.85) !important;   /* on-system vit i mörkt */
}
html[data-theme="light"] body[data-path^="/admin/access"] .access-panel table tbody td {
    color: var(--vm-text-secondary) !important;     /* mörk läsbar i ljust */
}

/* KPI-grid-stilar flyttade till inline <style> i index.html (rad 127-141)
   för att eliminera cascade-konflikt med template-inline. */

/* --- typsnitt: Geist på body, ärvs naturligt nedåt utan att röra color --- */
body[data-path^="/admin/access"] {
    --vm-font: "Geist", "Inter", "Segoe UI", system-ui, -apple-system, sans-serif !important;
    font-family: "Geist", "Inter", "Segoe UI", system-ui, -apple-system, sans-serif !important;
}

/* --- ghost-knappar (DETALJER / VISA ALLA): blå/cyan -> guld accent --- */
body[data-path^="/admin/access"] .access-btn.access-btn-ghost,
body[data-path^="/admin/access"] a.access-btn.access-btn-ghost,
body[data-path^="/admin/access"] button.access-btn.access-btn-ghost {
    color: var(--vm-accent) !important;
    border-color: rgba(var(--vm-accent-rgb), 0.45) !important;
    background: rgba(var(--vm-accent-rgb), 0.08) !important;
}
body[data-path^="/admin/access"] .access-btn.access-btn-ghost:hover,
body[data-path^="/admin/access"] a.access-btn.access-btn-ghost:hover,
body[data-path^="/admin/access"] button.access-btn.access-btn-ghost:hover {
    color: var(--vm-accent-hover) !important;
    border-color: rgba(var(--vm-accent-rgb), 0.65) !important;
    background: rgba(var(--vm-accent-rgb), 0.14) !important;
}

/* --- sidebar-link.active: forced guld (referensbild visar guld, inte cyan) --- */
body[data-path^="/admin/access"] .sidebar-link.active,
body[data-path^="/admin/access"] a.sidebar-link.active {
    color: var(--vm-accent) !important;
    background: rgba(var(--vm-accent-rgb), 0.10) !important;   /* Etapp 2: platt, var gradient */
    border-color: rgba(var(--vm-accent-rgb), 0.30) !important;
}
body[data-path^="/admin/access"] .sidebar-link.active .sidebar-link-copy,
body[data-path^="/admin/access"] .sidebar-link.active .sidebar-link-copy strong {
    color: var(--vm-accent) !important;
}
body[data-path^="/admin/access"] .sidebar-link.active .sidebar-link-icon,
body[data-path^="/admin/access"] .sidebar-link.active svg {
    color: var(--vm-accent) !important;
    background: rgba(var(--vm-accent-rgb), 0.18) !important;
    fill: none !important;
    stroke: var(--vm-accent) !important;
}

/* ============================================================
   GLOBAL ADMIN: guld-accent designspråk för HELA admin-systemet
   Bredd från /admin/access referens-sidan till alla admin-paths.
   Per's vision: svart bg + guld accent + premium-känsla.
   ============================================================ */

/* FAS P (2026-05-16): solid blå + vit text — tidigare gold-gradient med #1a1305
   brunsvart text gjorde knappen "+Ny person" oläsbar (mörk text på blå gradient).
   Matchar nu designsystem-spec, garanterar WCAG AA 4.5:1. */
body:is([data-path^="/admin"], [data-path^="/integration"], [data-path^="/health"], [data-path^="/realtime"]) :is(
    .lab-btn-primary,
    .wiz-btn-primary,
    .fb-btn-primary,
    .mtx-btn-primary,
    .vm-btn-primary,
    .vw-btn-primary,
    .sd-btn-primary,
    .pl-btn-primary,
    .pt-btn-primary,
    .uc-btn-primary
) {
    background: var(--vm-brand-primary) !important;
    color: var(--vm-text-on-brand) !important;
    border: 1px solid var(--vm-brand-primary) !important;
    box-shadow: none !important;
}
body:is([data-path^="/admin"], [data-path^="/integration"], [data-path^="/health"], [data-path^="/realtime"]) :is(
    .lab-btn-primary:hover,
    .wiz-btn-primary:hover,
    .fb-btn-primary:hover,
    .mtx-btn-primary:hover,
    .vm-btn-primary:hover,
    .vw-btn-primary:hover,
    .sd-btn-primary:hover,
    .pl-btn-primary:hover,
    .pt-btn-primary:hover,
    .uc-btn-primary:hover
) {
    background: var(--vm-brand-primary-hover) !important;
    color: var(--vm-text-on-brand) !important;
    border-color: var(--vm-brand-primary-hover) !important;
}

/* --- alla "ghost/secondary/default"-knapp-classes: transparent + guld text/border --- */
body:is([data-path^="/admin"], [data-path^="/integration"], [data-path^="/health"], [data-path^="/realtime"]) :is(
    .lab-btn,
    .wiz-btn,
    .wiz-btn-outline,
    .fb-btn,
    .fb-btn-ghost,
    .fb-btn-sm,
    .vw-btn,
    .vw-btn-ghost,
    .mtx-btn,
    .sd-quick-btn,
    .ev-filter-btn,
    .vl-btn,
    .ap-quick,
    .lab-btn-secondary,
    .wiz-btn-green,
    .map-editor-shell-btn,
    .map-editor-shell-btn-secondary
) {
    background: rgba(var(--vm-accent-rgb), 0.06) !important;
    color: var(--vm-accent) !important;
    border: 1px solid rgba(var(--vm-accent-rgb), 0.35) !important;
}
body:is([data-path^="/admin"], [data-path^="/integration"], [data-path^="/health"], [data-path^="/realtime"]) :is(
    .lab-btn:hover,
    .wiz-btn:hover,
    .wiz-btn-outline:hover,
    .fb-btn:hover,
    .fb-btn-ghost:hover,
    .vw-btn:hover,
    .vw-btn-ghost:hover,
    .mtx-btn:hover,
    .sd-quick-btn:hover,
    .ev-filter-btn:hover,
    .vl-btn:hover,
    .ap-quick:hover,
    .lab-btn-secondary:hover,
    .map-editor-shell-btn:hover,
    .map-editor-shell-btn-secondary:hover
) {
    background: rgba(var(--vm-accent-rgb), 0.14) !important;
    color: var(--vm-accent-hover) !important;
    border-color: rgba(var(--vm-accent-rgb), 0.55) !important;
}

/* --- danger-varianter: behåll röd (ej guld) --- */
body:is([data-path^="/admin"], [data-path^="/integration"], [data-path^="/health"], [data-path^="/realtime"]) :is(
    .fb-btn-danger,
    .vw-btn-danger,
    .vl-btn-danger,
    .sd-quick-btn.danger,
    .lab-doors-lockdown-btn--danger,
    .map-editor-shell-btn--danger
) {
    background: rgba(224,133,133,0.10) !important;
    color: var(--vm-danger) !important;
    border: 1px solid rgba(224,133,133,0.45) !important;
}

/* --- aktiv-state: båda conventions (.active + .is-active) till guld --- */
body:is([data-path^="/admin"], [data-path^="/integration"], [data-path^="/health"], [data-path^="/realtime"]) :is(
    .ev-filter-btn.active,
    .vm-subnav-link.active,
    .access-v3-link.active,
    .vm-e-nav-item.is-active,
    .vm-e-nav-subitem.is-active
) {
    color: var(--vm-accent) !important;
    background: rgba(var(--vm-accent-rgb), 0.10) !important;   /* Etapp 2: platt, var gradient */
    border-color: rgba(var(--vm-accent-rgb), 0.30) !important;
}
body:is([data-path^="/admin"], [data-path^="/integration"], [data-path^="/health"], [data-path^="/realtime"]) :is(
    .vm-e-nav-item.is-active svg,
    .vm-e-nav-subitem.is-active svg,
    .access-v3-link.active svg,
    .vm-subnav-link.active svg
) {
    color: var(--vm-accent) !important;
    stroke: var(--vm-accent) !important;
}

/* --- ap-warn-link (Hantera→ / Visa→ i Varningar-rutan): tvinga guld --- */
body:is([data-path^="/admin"], [data-path^="/integration"], [data-path^="/health"], [data-path^="/realtime"]) .ap-warn-link {
    color: var(--vm-accent) !important;
    opacity: 1 !important;
    font-weight: 700 !important;
}
body:is([data-path^="/admin"], [data-path^="/integration"], [data-path^="/health"], [data-path^="/realtime"]) .ap-warn-link:hover {
    color: var(--vm-accent-hover) !important;
}

/* --- alla modaler: enhetlig svart bg + guld accent (2026-05-13: Per's beslut
   "alla modaler följer samma tema som övriga sidor" — .sd-modal tillbaka i listan) */
body:is([data-path^="/admin"], [data-path^="/integration"], [data-path^="/health"], [data-path^="/realtime"]) :is(
    .sd-modal, .sd-modal-card,
    .pl-modal, .pl-modal-card,
    .pt-modal, .pt-modal-card,
    .sc-modal, .sc-modal-card,
    .ts-modal, .ts-modal-card,
    .uc-modal-card,
    .ag-modal-card,
    .al-modal-card,
    .id-modal-card,
    .ld-modal-card,
    .symbol-modal-card,
    .modal-container,
    .modal-content
) {
    background: var(--vm-bg-elevated) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    color: var(--vm-text) !important;
    box-shadow: 0 16px 48px rgba(0,0,0,0.40) !important;
    /* Etapp 2 (2026-05-30): glas borttaget — solid modal var(--vm-bg-elevated), mjuk skugga kvar. */
}
/* Q.3.4 (2026-05-16): modal-overlay frosted-glass.
   2026-05-29: tokeniserat — light-mode biter via --vm-overlay. */
body:is([data-path^="/admin"], [data-path^="/integration"], [data-path^="/health"], [data-path^="/realtime"]) :is(
    .modal-backdrop, .vm-modal-backdrop, .sd-modal-backdrop, .modal-overlay
) {
    background: var(--vm-overlay) !important;
    /* Etapp 2: glas borttaget — solid scrim var(--vm-overlay). */
}
body:is([data-path^="/admin"], [data-path^="/integration"], [data-path^="/health"], [data-path^="/realtime"]) :is(
    .sd-modal-head,
    .pl-modal-head,
    .pt-modal-head,
    .sc-modal-head,
    .ts-modal-head,
    .uc-modal-header,
    .symbol-modal-header,
    .modal-header
) {
    background: linear-gradient(180deg, rgba(var(--vm-accent-rgb), 0.06) 0%, rgba(var(--vm-accent-rgb), 0.02) 100%) !important;
    border-bottom: 1px solid rgba(var(--vm-accent-rgb), 0.20) !important;
    color: var(--vm-accent) !important;
}
body:is([data-path^="/admin"], [data-path^="/integration"], [data-path^="/health"], [data-path^="/realtime"]) :is(
    .sd-modal-close,
    .pl-modal-close,
    .pt-modal-close,
    .sc-modal-close,
    .ts-modal-close,
    .uc-modal-close,
    .symbol-modal-close,
    .modal-close-btn
) {
    color: var(--vm-accent) !important;
    background: transparent !important;
    border: 1px solid rgba(var(--vm-accent-rgb), 0.30) !important;
}
body:is([data-path^="/admin"], [data-path^="/integration"], [data-path^="/health"], [data-path^="/realtime"]) :is(
    .sd-modal-close:hover,
    .pl-modal-close:hover,
    .pt-modal-close:hover,
    .sc-modal-close:hover,
    .ts-modal-close:hover,
    .uc-modal-close:hover,
    .symbol-modal-close:hover,
    .modal-close-btn:hover
) {
    background: rgba(var(--vm-accent-rgb), 0.14) !important;
    color: var(--vm-accent-hover) !important;
}

/* --- KPI-warn stripe: gör synligare med inset shadow + tjockare border --- */
body:is([data-path^="/admin"], [data-path^="/integration"], [data-path^="/health"], [data-path^="/realtime"]) .ap-kpi.warn {
    box-shadow: inset 5px 0 0 0 var(--vm-accent) !important;
}

/* --- gul accent på warn-text (OKÄNDA KORT-värdet) --- */
body:is([data-path^="/admin"], [data-path^="/integration"], [data-path^="/health"], [data-path^="/realtime"]) .ap-kpi.warn .ap-kpi-val {
    color: var(--vm-accent) !important;
}

/* --- SYSTEM-pill globalt admin/integration/health/realtime — brand-gradient.
       2026-05-29 tema-grund-r4: bytt från --vm-surface-system (mörk i båda) till
       --vm-sidebar-system-grad (Tidomat-blå i båda teman) så light också får
       synlig blå pill med vit text istället för osynlig mörk-på-vit. --- */
body:is([data-path^="/admin"], [data-path^="/integration"], [data-path^="/health"], [data-path^="/realtime"]) .sidebar-system-entry {
    background: var(--vm-sidebar-system-grad) !important;
    border: 1px solid var(--vm-border-default) !important;
    color: var(--vm-sidebar-system-text) !important;
    border-radius: 14px !important;
    letter-spacing: 0.18em !important;
    font-weight: 700 !important;
    box-shadow: var(--vm-shadow-md) !important;
}
body:is([data-path^="/admin"], [data-path^="/integration"], [data-path^="/health"], [data-path^="/realtime"]) .sidebar-system-entry:hover,
body:is([data-path^="/admin"], [data-path^="/integration"], [data-path^="/health"], [data-path^="/realtime"]) .sidebar-system-entry.is-active {
    background: var(--vm-sidebar-system-grad-hover) !important;
    border-color: var(--vm-border-strong) !important;
    color: var(--vm-sidebar-system-text) !important;
}
body:is([data-path^="/admin"], [data-path^="/integration"], [data-path^="/health"], [data-path^="/realtime"]) .sidebar-back-link {
    border-radius: 12px !important;
}
body:is([data-path^="/admin"], [data-path^="/integration"], [data-path^="/health"], [data-path^="/realtime"]) .sidebar-link,
body:is([data-path^="/admin"], [data-path^="/integration"], [data-path^="/health"], [data-path^="/realtime"]) a.sidebar-link {
    border-radius: 12px !important;
}
body:is([data-path^="/admin"], [data-path^="/integration"], [data-path^="/health"], [data-path^="/realtime"]) .sidebar-label {
    color: #ffffff !important;
    opacity: 0.95 !important;
    font-weight: 800 !important;
    letter-spacing: 0.18em !important;
}
body:is([data-path^="/admin"], [data-path^="/integration"], [data-path^="/health"], [data-path^="/realtime"]) .sidebar-logout-link {
    border-radius: 12px !important;
}

/* --- aktiv sidebar-link: guld text + ikon (override eventuella cyan från andra CSS) --- */
body:is([data-path^="/admin"], [data-path^="/integration"], [data-path^="/health"], [data-path^="/realtime"]) :is(
    .sidebar-link.active,
    a.sidebar-link.active
) {
    color: var(--vm-accent) !important;
    background: rgba(var(--vm-accent-rgb), 0.10) !important;   /* Etapp 2: platt, var gradient */
    border-color: rgba(var(--vm-accent-rgb), 0.30) !important;
}
body:is([data-path^="/admin"], [data-path^="/integration"], [data-path^="/health"], [data-path^="/realtime"]) :is(
    .sidebar-link.active .sidebar-link-copy,
    .sidebar-link.active .sidebar-link-copy strong,
    .sidebar-link.active .sidebar-link-icon,
    .sidebar-link.active svg
) {
    color: var(--vm-accent) !important;
    stroke: var(--vm-accent) !important;
}

/* --- Override mot vm_atelier.css/vm_components.css cascade-konflikt:
       super-specifik selector (body.theme-atelier + admin-scope = specificity 0,3,1)
       som vinner mot vm_atelier 0,2,1 oavsett ladd-ordning. --- */
body.theme-atelier:is([data-path^="/admin"], [data-path^="/integration"], [data-path^="/health"], [data-path^="/realtime"]) :is(
    .btn-primary,
    .vm-btn-primary,
    .access-btn-primary,
    .access-btn.access-btn-primary,
    a.access-btn.access-btn-primary,
    button.access-btn.access-btn-primary
) {
    background: rgba(var(--vm-accent-rgb), 0.14) !important;
    color: var(--vm-accent) !important;
    border: 1px solid rgba(var(--vm-accent-rgb), 0.40) !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
body.theme-atelier:is([data-path^="/admin"], [data-path^="/integration"], [data-path^="/health"], [data-path^="/realtime"]) :is(
    .btn-primary:hover,
    .vm-btn-primary:hover,
    .access-btn-primary:hover,
    .access-btn.access-btn-primary:hover
) {
    background: rgba(var(--vm-accent-rgb), 0.22) !important;
    border-color: rgba(var(--vm-accent-rgb), 0.55) !important;
    box-shadow: none !important;
}

/* --- access-btn (default state, ej primary): tona till guld outline --- */
body.theme-atelier:is([data-path^="/admin"], [data-path^="/integration"], [data-path^="/health"], [data-path^="/realtime"]) .access-btn {
    color: var(--vm-accent) !important;
    border-color: rgba(var(--vm-accent-rgb), 0.35) !important;
    background: rgba(var(--vm-accent-rgb), 0.06) !important;
}
body.theme-atelier:is([data-path^="/admin"], [data-path^="/integration"], [data-path^="/health"], [data-path^="/realtime"]) .access-btn:hover {
    background: rgba(var(--vm-accent-rgb), 0.14) !important;
    color: var(--vm-accent-hover) !important;
    border-color: rgba(var(--vm-accent-rgb), 0.55) !important;
}
/* access-btn-ghost = redan guld via tidigare regel + behåll svagare bg */
body.theme-atelier:is([data-path^="/admin"], [data-path^="/integration"], [data-path^="/health"], [data-path^="/realtime"]) .access-btn.access-btn-ghost {
    background: rgba(var(--vm-accent-rgb), 0.06) !important;
    color: var(--vm-accent) !important;
    border-color: rgba(var(--vm-accent-rgb), 0.35) !important;
}

/* --- Subnav-tabs UNIFIED v2 — explicit selectors utan :is() för säker specificity
       Inactive = guld text + transparent bg + guld outline
       Active = VIT text + guld-fyld gradient (Per's krav: vit text, inte mörk) --- */
body.theme-atelier[data-path^="/admin"] a.vm-subnav-link:not(.active),
body.theme-atelier[data-path^="/admin"] .vm-subnav-link:not(.active),
body.theme-atelier[data-path^="/integration"] a.vm-subnav-link:not(.active),
body.theme-atelier[data-path^="/integration"] .vm-subnav-link:not(.active),
body.theme-atelier[data-path^="/health"] a.vm-subnav-link:not(.active),
body.theme-atelier[data-path^="/realtime"] a.vm-subnav-link:not(.active),
body.theme-atelier[data-path^="/admin"] a.access-tab-link:not(.active):not(.is-active),
body.theme-atelier[data-path^="/admin"] .access-tab-link:not(.active):not(.is-active),
body.theme-atelier[data-path^="/admin"] a.pd-tab:not(.active),
body.theme-atelier[data-path^="/admin"] .pd-tab:not(.active),
body.theme-atelier[data-path^="/admin"] a.fb-tab:not(.active),
body.theme-atelier[data-path^="/admin"] .fb-tab:not(.active),
body.theme-atelier[data-path^="/admin"] a.cat-tab:not(.active),
body.theme-atelier[data-path^="/admin"] .cat-tab:not(.active),
body.theme-atelier[data-path^="/admin"] a.pt-tab:not(.active),
body.theme-atelier[data-path^="/admin"] .pt-tab:not(.active) {
    color: var(--vm-accent) !important;
    background: transparent !important;
    border: 1px solid rgba(var(--vm-accent-rgb), 0.35) !important;
    text-shadow: none !important;
    box-shadow: none !important;
    font-weight: 600 !important;
}
body.theme-atelier[data-path^="/admin"] a.vm-subnav-link:not(.active):hover,
body.theme-atelier[data-path^="/admin"] .vm-subnav-link:not(.active):hover,
body.theme-atelier[data-path^="/integration"] a.vm-subnav-link:not(.active):hover,
body.theme-atelier[data-path^="/admin"] a.access-tab-link:not(.active):not(.is-active):hover,
body.theme-atelier[data-path^="/admin"] a.pd-tab:not(.active):hover,
body.theme-atelier[data-path^="/admin"] a.fb-tab:not(.active):hover,
body.theme-atelier[data-path^="/admin"] a.cat-tab:not(.active):hover,
body.theme-atelier[data-path^="/admin"] a.pt-tab:not(.active):hover {
    color: var(--vm-accent-hover) !important;
    background: rgba(var(--vm-accent-rgb), 0.08) !important;
    border-color: rgba(var(--vm-accent-rgb), 0.55) !important;
}
body.theme-atelier[data-path^="/admin"] a.vm-subnav-link.active,
body.theme-atelier[data-path^="/admin"] .vm-subnav-link.active,
body.theme-atelier[data-path^="/integration"] a.vm-subnav-link.active,
body.theme-atelier[data-path^="/integration"] .vm-subnav-link.active,
body.theme-atelier[data-path^="/health"] a.vm-subnav-link.active,
body.theme-atelier[data-path^="/realtime"] a.vm-subnav-link.active,
body.theme-atelier[data-path^="/admin"] a.access-tab-link.active,
body.theme-atelier[data-path^="/admin"] a.access-tab-link.is-active,
body.theme-atelier[data-path^="/admin"] a.access-tab-link[aria-selected="true"],
body.theme-atelier[data-path^="/admin"] .access-tab-link.active,
body.theme-atelier[data-path^="/admin"] a.pd-tab.active,
body.theme-atelier[data-path^="/admin"] .pd-tab.active,
body.theme-atelier[data-path^="/admin"] a.fb-tab.active,
body.theme-atelier[data-path^="/admin"] .fb-tab.active,
body.theme-atelier[data-path^="/admin"] a.cat-tab.active,
body.theme-atelier[data-path^="/admin"] .cat-tab.active,
body.theme-atelier[data-path^="/admin"] a.pt-tab.active,
body.theme-atelier[data-path^="/admin"] .pt-tab.active {
    color: var(--vm-accent) !important;
    background: rgba(var(--vm-accent-rgb), 0.14) !important;
    border: 1px solid rgba(var(--vm-accent-rgb), 0.40) !important;
    box-shadow: none !important;
    font-weight: 700 !important;
}

/* --- LEGACY (behåll min :is-version som fallback för andra path-prefix) --- */
body.theme-atelier:is([data-path^="/admin"], [data-path^="/integration"], [data-path^="/health"], [data-path^="/realtime"]) :is(
    .vm-subnav-link:not(.active),
    a.vm-subnav-link:not(.active),
    .access-tab-link:not(.active):not(.is-active):not([aria-selected="true"]),
    a.access-tab-link:not(.active):not(.is-active):not([aria-selected="true"]),
    .pd-tab:not(.active),
    a.pd-tab:not(.active),
    .fb-tab:not(.active),
    a.fb-tab:not(.active),
    .cat-tab:not(.active),
    a.cat-tab:not(.active),
    .pt-tab:not(.active),
    a.pt-tab:not(.active)
) {
    color: rgba(var(--vm-accent-rgb), 0.55) !important;
    background: transparent !important;
    border: 1px solid rgba(var(--vm-accent-rgb), 0.30) !important;
    text-shadow: none !important;
    box-shadow: none !important;
    font-weight: 600 !important;
}
body.theme-atelier:is([data-path^="/admin"], [data-path^="/integration"], [data-path^="/health"], [data-path^="/realtime"]) :is(
    .vm-subnav-link:not(.active):hover,
    a.vm-subnav-link:not(.active):hover,
    .access-tab-link:not(.active):not(.is-active):hover,
    a.access-tab-link:not(.active):not(.is-active):hover,
    .pd-tab:not(.active):hover,
    a.pd-tab:not(.active):hover,
    .fb-tab:not(.active):hover,
    a.fb-tab:not(.active):hover,
    .cat-tab:not(.active):hover,
    a.cat-tab:not(.active):hover,
    .pt-tab:not(.active):hover,
    a.pt-tab:not(.active):hover
) {
    color: var(--vm-accent) !important;
    background: rgba(var(--vm-accent-rgb), 0.08) !important;
    border-color: rgba(var(--vm-accent-rgb), 0.50) !important;
}
body.theme-atelier:is([data-path^="/admin"], [data-path^="/integration"], [data-path^="/health"], [data-path^="/realtime"]) :is(
    .vm-subnav-link.active,
    a.vm-subnav-link.active,
    .access-tab-link.active,
    .access-tab-link.is-active,
    .access-tab-link[aria-selected="true"],
    a.access-tab-link.active,
    a.access-tab-link.is-active,
    a.access-tab-link[aria-selected="true"],
    .pd-tab.active,
    a.pd-tab.active,
    .fb-tab.active,
    a.fb-tab.active,
    .cat-tab.active,
    a.cat-tab.active,
    .pt-tab.active,
    a.pt-tab.active
) {
    color: var(--vm-accent) !important;
    background: rgba(var(--vm-accent-rgb), 0.14) !important;
    border: 1px solid rgba(var(--vm-accent-rgb), 0.40) !important;
    box-shadow: none !important;
    font-weight: 700 !important;
}

/* --- access-tab-link (legacy access-tabs prefix) --- */
body.theme-atelier:is([data-path^="/admin"], [data-path^="/integration"], [data-path^="/health"], [data-path^="/realtime"]) .access-tab-link {
    color: rgba(var(--vm-accent-rgb), 0.70) !important;
    border: 1px solid rgba(var(--vm-accent-rgb), 0.25) !important;
    background: rgba(var(--vm-accent-rgb), 0.04) !important;
}
body.theme-atelier:is([data-path^="/admin"], [data-path^="/integration"], [data-path^="/health"], [data-path^="/realtime"]) .access-tab-link.active {
    color: var(--vm-accent) !important;
    background: linear-gradient(180deg, rgba(var(--vm-accent-rgb), 0.18) 0%, rgba(var(--vm-accent-rgb), 0.10) 100%) !important;
    border-color: rgba(var(--vm-accent-rgb), 0.50) !important;
}

/* ============================================================
   DJUPGÅENDE GLOBAL — alla element / alla sidor / alla detaljer
   ============================================================ */

/* --- ALLA prefix-tabeller: svart bg + vit text på header + ljus hover på rader --- */
body.theme-atelier:is([data-path^="/admin"], [data-path^="/integration"], [data-path^="/health"], [data-path^="/realtime"]) :is(
    .pl-table, .pt-table, .pt-door-table, .pt-alarm-table,
    .uc-table, .dp-persons-table, .ap-table, .ag-table,
    .pd-table, .sd-door-table, .cs-table, .sc-table,
    .am-table, .rt-log-table, .bk-table, .vw-table,
    .unit-list-table, .r-table, .builtin-table, .au-table,
    .imp-preview-table, .ll-dock-table, .vl-table
) {
    background: var(--vm-surface-system) !important;
    color: var(--vm-text) !important;
    border-collapse: collapse !important;
}
body.theme-atelier:is([data-path^="/admin"], [data-path^="/integration"], [data-path^="/health"], [data-path^="/realtime"]) :is(
    .pl-table thead th, .pt-table thead th, .pt-door-table thead th, .pt-alarm-table thead th,
    .uc-table thead th, .dp-persons-table thead th, .ap-table thead th, .ag-table thead th,
    .pd-table thead th, .sd-door-table thead th, .cs-table thead th, .sc-table thead th,
    .am-table thead th, .rt-log-table thead th, .bk-table thead th, .vw-table thead th,
    .unit-list-table thead th, .r-table thead th, .builtin-table thead th, .au-table thead th,
    .imp-preview-table thead th, .ll-dock-table thead th, .vl-table thead th
) {
    background: var(--vm-surface-system) !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    font-size: 0.65rem !important;
    letter-spacing: 0.10em !important;
    font-weight: 800 !important;
    border-bottom: 1px solid rgba(var(--vm-accent-rgb), 0.20) !important;
    padding: 10px 12px !important;
}
body.theme-atelier:is([data-path^="/admin"], [data-path^="/integration"], [data-path^="/health"], [data-path^="/realtime"]) :is(
    .pl-table tbody td, .pt-table tbody td, .pt-door-table tbody td, .pt-alarm-table tbody td,
    .uc-table tbody td, .dp-persons-table tbody td, .ap-table tbody td, .ag-table tbody td,
    .pd-table tbody td, .sd-door-table tbody td, .cs-table tbody td, .sc-table tbody td,
    .am-table tbody td, .rt-log-table tbody td, .bk-table tbody td, .vw-table tbody td,
    .unit-list-table tbody td, .r-table tbody td, .builtin-table tbody td, .au-table tbody td,
    .imp-preview-table tbody td, .ll-dock-table tbody td, .vl-table tbody td
) {
    background: transparent !important;
    color: var(--vm-text-soft) !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    padding: 9px 12px !important;
}
body.theme-atelier:is([data-path^="/admin"], [data-path^="/integration"], [data-path^="/health"], [data-path^="/realtime"]) :is(
    .pl-table tbody tr:hover td, .pt-table tbody tr:hover td, .uc-table tbody tr:hover td,
    .ap-table tbody tr:hover td, .ag-table tbody tr:hover td, .pd-table tbody tr:hover td,
    .cs-table tbody tr:hover td, .sc-table tbody tr:hover td, .am-table tbody tr:hover td,
    .rt-log-table tbody tr:hover td, .bk-table tbody tr:hover td, .vw-table tbody tr:hover td
) {
    background: rgba(var(--vm-accent-rgb), 0.06) !important;
    color: var(--vm-text) !important;
}

/* --- INPUT / SELECT / TEXTAREA globalt på admin: dämpat surface + subtil border.
       2026-05-29 tema-grund: tokeniserat (var #1a1f27 hårdkodat → bröt light). --- */
body.theme-atelier:is([data-path^="/admin"], [data-path^="/integration"], [data-path^="/health"], [data-path^="/realtime"]) :is(
    input[type="text"], input[type="search"], input[type="email"], input[type="number"],
    input[type="tel"], input[type="url"], input[type="password"], input[type="date"],
    input[type="time"], input[type="datetime-local"],
    select, textarea
) {
    background: var(--vm-bg-input) !important;
    color: var(--vm-text-primary) !important;
    border: 1px solid var(--vm-border-default) !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    font-family: inherit !important;
    font-size: 0.85rem !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
}
body.theme-atelier:is([data-path^="/admin"], [data-path^="/integration"], [data-path^="/health"], [data-path^="/realtime"]) :is(
    input[type="text"]:focus, input[type="search"]:focus, input[type="email"]:focus,
    input[type="number"]:focus, input[type="tel"]:focus, input[type="url"]:focus,
    input[type="password"]:focus, input[type="date"]:focus, input[type="time"]:focus,
    input[type="datetime-local"]:focus, select:focus, textarea:focus
) {
    border-color: var(--vm-accent) !important;
    box-shadow: 0 0 0 3px rgba(var(--vm-accent-rgb), 0.18) !important;
    outline: none !important;
}
body.theme-atelier:is([data-path^="/admin"], [data-path^="/integration"], [data-path^="/health"], [data-path^="/realtime"]) :is(
    input::placeholder, textarea::placeholder
) {
    color: var(--vm-text-muted) !important;
}

/* --- BADGES + STATUS-CHIPS: enhetlig tonad bakgrund. 2026-05-29 tokeniserat. --- */
body.theme-atelier:is([data-path^="/admin"], [data-path^="/integration"], [data-path^="/health"], [data-path^="/realtime"]) :is(
    .access-status-badge, .access-pill, .access-legacy-count,
    .role-meta-badge, .builtin-badge, .cs-chip,
    .vm-badge, .vm-pill, .status-pill, .status-badge
) {
    background: var(--vm-bg-hover) !important;
    color: var(--vm-text-secondary) !important;
    border: 1px solid var(--vm-border-subtle) !important;
    border-radius: 999px !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    padding: 2px 10px !important;
}
body.theme-atelier:is([data-path^="/admin"], [data-path^="/integration"], [data-path^="/health"], [data-path^="/realtime"]) :is(
    .access-status-badge--success, .status-badge--success, .status-pill--success,
    .vm-badge--success, .cs-chip.ok
) {
    background: rgba(110,198,141,0.10) !important;
    color: var(--vm-success) !important;
    border-color: rgba(110,198,141,0.30) !important;
}
body.theme-atelier:is([data-path^="/admin"], [data-path^="/integration"], [data-path^="/health"], [data-path^="/realtime"]) :is(
    .access-status-badge--warning, .status-badge--warning, .status-pill--warning,
    .vm-badge--warning, .cs-chip.warn
) {
    background: rgba(var(--vm-accent-rgb), 0.10) !important;
    color: var(--vm-accent) !important;
    border-color: rgba(var(--vm-accent-rgb), 0.35) !important;
}
body.theme-atelier:is([data-path^="/admin"], [data-path^="/integration"], [data-path^="/health"], [data-path^="/realtime"]) :is(
    .access-status-badge--danger, .status-badge--danger, .status-pill--danger,
    .vm-badge--danger, .cs-chip.alert, .cs-chip.danger
) {
    background: rgba(224,133,133,0.10) !important;
    color: var(--vm-danger) !important;
    border-color: rgba(224,133,133,0.35) !important;
}
body.theme-atelier:is([data-path^="/admin"], [data-path^="/integration"], [data-path^="/health"], [data-path^="/realtime"]) :is(
    .role-meta-badge, .builtin-badge
) {
    background: rgba(var(--vm-accent-rgb), 0.10) !important;
    color: var(--vm-accent) !important;
    border-color: rgba(var(--vm-accent-rgb), 0.35) !important;
}

/* --- KORT/PANEL — generic mörk-bg på alla admin-paneler (övrigt än access-panel) --- */
body.theme-atelier:is([data-path^="/admin"], [data-path^="/integration"], [data-path^="/health"], [data-path^="/realtime"]) :is(
    .pl-panel, .pt-panel, .uc-panel, .cs-panel, .sc-panel,
    .ap-panel, .ag-panel, .pd-panel, .sd-panel, .am-panel,
    .vw-panel, .bk-panel, .id-card, .ld-card, .pw-card,
    .sr-card, .vl-card, .ota-card, .ll-card,
    .device-card, .library-card, .building-card, .floor-card
) {
    background: linear-gradient(180deg, var(--vm-panel) 0%, var(--vm-bg) 100%) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.20) !important;
    color: var(--vm-text) !important;
}

/* --- Sökfält i tabell-headers (filter-rader): mer kompakt input-stil --- */
body.theme-atelier:is([data-path^="/admin"], [data-path^="/integration"], [data-path^="/health"], [data-path^="/realtime"]) :is(
    .pl-search input, .pt-search input, .uc-search input, .cs-search input,
    .pl-filter input, .pt-filter input, .uc-filter input,
    thead input[type="text"], thead input[type="search"], thead select
) {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(var(--vm-accent-rgb), 0.18) !important;
    color: var(--vm-text) !important;
    padding: 6px 10px !important;
    font-size: 0.78rem !important;
    border-radius: 6px !important;
}

/* --- DROPDOWN / context-menu / popover --- */
body.theme-atelier:is([data-path^="/admin"], [data-path^="/integration"], [data-path^="/health"], [data-path^="/realtime"]) :is(
    .dropdown-menu, .vm-dropdown, .vm-menu, .context-menu,
    .pop-card, .vm-popover, .lab-popover, .id-popover
) {
    background: var(--vm-surface-system) !important;
    border: 1px solid rgba(var(--vm-accent-rgb), 0.20) !important;
    border-radius: 10px !important;
    box-shadow: 0 12px 32px rgba(0,0,0,0.50) !important;
    color: var(--vm-text) !important;
}
body.theme-atelier:is([data-path^="/admin"], [data-path^="/integration"], [data-path^="/health"], [data-path^="/realtime"]) :is(
    .dropdown-item, .vm-menu-item, .context-menu-item, .pop-item
) {
    color: var(--vm-text-soft) !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
}
body.theme-atelier:is([data-path^="/admin"], [data-path^="/integration"], [data-path^="/health"], [data-path^="/realtime"]) :is(
    .dropdown-item:hover, .vm-menu-item:hover, .context-menu-item:hover, .pop-item:hover
) {
    background: rgba(var(--vm-accent-rgb), 0.10) !important;
    color: var(--vm-accent) !important;
}

/* --- TOPBAR-knappar / topbar-pills --- */
body.theme-atelier:is([data-path^="/admin"], [data-path^="/integration"], [data-path^="/health"], [data-path^="/realtime"]) :is(
    .topbar-btn, .topbar-pill, .topbar-action,
    .vm-topbar-btn, .ah-pill, .ah-btn
) {
    background: rgba(var(--vm-accent-rgb), 0.06) !important;
    color: var(--vm-accent) !important;
    border: 1px solid rgba(var(--vm-accent-rgb), 0.25) !important;
    border-radius: 999px !important;
}
body.theme-atelier:is([data-path^="/admin"], [data-path^="/integration"], [data-path^="/health"], [data-path^="/realtime"]) :is(
    .topbar-btn:hover, .topbar-pill:hover, .topbar-action:hover,
    .vm-topbar-btn:hover, .ah-pill:hover, .ah-btn:hover
) {
    background: rgba(var(--vm-accent-rgb), 0.14) !important;
    color: var(--vm-accent-hover) !important;
    border-color: rgba(var(--vm-accent-rgb), 0.50) !important;
}

/* --- Page-headers + breadcrumbs --- */
body.theme-atelier:is([data-path^="/admin"], [data-path^="/integration"], [data-path^="/health"], [data-path^="/realtime"]) :is(
    .breadcrumb, .vm-breadcrumb, .page-breadcrumb, .access-breadcrumb
) {
    color: rgba(255,255,255,0.55) !important;
    font-size: 0.72rem !important;
}
body.theme-atelier:is([data-path^="/admin"], [data-path^="/integration"], [data-path^="/health"], [data-path^="/realtime"]) :is(
    .breadcrumb a, .vm-breadcrumb a, .page-breadcrumb a, .access-breadcrumb a
) {
    color: var(--vm-accent) !important;
    text-decoration: none !important;
}

/* --- Form-labels: enhetlig dämpat ljus --- */
body.theme-atelier:is([data-path^="/admin"], [data-path^="/integration"], [data-path^="/health"], [data-path^="/realtime"]) :is(
    label, .form-label, .vm-label, .access-label, .pl-label, .pt-label
) {
    color: rgba(255,255,255,0.75) !important;
    font-size: 0.74rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
}

/* --- Charts/grafer (inline SVG/canvas): tona axis + grid linjer --- */
body.theme-atelier:is([data-path^="/admin"], [data-path^="/integration"], [data-path^="/health"], [data-path^="/realtime"]) :is(
    .chart-grid, .chart-axis, .vm-chart-axis, .grid-line
) {
    stroke: rgba(255,255,255,0.08) !important;
}

/* --- Section-rubriker (alla h-tags på admin) ärver vit text via cascade,
       men säkra ifall någon CSS sätter mörk text --- */
body.theme-atelier:is([data-path^="/admin"], [data-path^="/integration"], [data-path^="/health"], [data-path^="/realtime"]) :is(
    h1, h2, h3, h4, h5, h6
) {
    color: var(--vm-text) !important;
}

/* --- Länkar i body (default a-tags utan class): tona till guld --- */
body.theme-atelier:is([data-path^="/admin"], [data-path^="/integration"], [data-path^="/health"], [data-path^="/realtime"]) :is(
    .access-link-inline, .vm-link, .access-table a, table a:not(.btn):not([class*="btn"])
) {
    color: var(--vm-accent) !important;
    text-decoration: none !important;
}
body.theme-atelier:is([data-path^="/admin"], [data-path^="/integration"], [data-path^="/health"], [data-path^="/realtime"]) :is(
    .access-link-inline:hover, .vm-link:hover, .access-table a:hover
) {
    color: var(--vm-accent-hover) !important;
    text-decoration: underline !important;
}

/* === v0500 — GLOBAL TABLE-HEADER: svart bg + vit text på alla <th> i admin-scope ===
   Per's referens: tabellrubriker SKA vara svart bg + vit text + versal + letter-spacing.
   Täcker .pl-th, .sd-door-th, .vm-events-table th, .users-table thead th, .builtin-table th
   och alla generic <th> som inte har egen styling. */
body.theme-atelier:is([data-path^="/admin"], [data-path^="/integration"], [data-path^="/health"], [data-path^="/realtime"]) :is(
    table:not(.no-header-recolor) thead th,
    table:not(.no-header-recolor) > thead > tr > th,
    .access-table thead th,
    .pl-table thead th, .pt-table thead th, .uc-table thead th, .ag-table thead th,
    .sc-table thead th, .am-table thead th, .ap-table thead th, .pd-table thead th,
    .sd-door-table thead th, .cs-table thead th, .rt-log-table thead th,
    .bk-table thead th, .vw-table thead th, .unit-list-table thead th,
    .r-table thead th, .builtin-table thead th, .au-table thead th,
    .imp-preview-table thead th, .ll-dock-table thead th, .vl-table thead th,
    .users-table thead th, .data-table thead th, .vm-events-table thead th,
    .pl-th, .pt-th, .sd-door-th, .sc-th, .rt-th, .am-th, .vw-th, .pd-th
) {
    background: var(--vm-surface-system) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.10em !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

/* === v0500 — SAKNADE BUTTON-CLASSES: extension av admin-knapp-täckning ===
   Identifierat av audit: .btn, .btn-ghost, .quick-btn, .rt-btn*, .sd-new-grp-btn m.fl. */

/* Generic .btn-primary och prefix-primary → guld-fyll */
body.theme-atelier:is([data-path^="/admin"], [data-path^="/integration"], [data-path^="/health"], [data-path^="/realtime"]) :is(
    .btn-primary,
    button.btn-primary,
    .quick-btn.active,
    .rt-btn-primary,
    .sd-new-grp-btn,
    .sd-sel-action,
    .pw-btn-primary,
    .sr-btn-primary,
    .id-btn-primary,
    .ld-btn-primary
) {
    background: linear-gradient(135deg, var(--vm-accent) 0%, var(--vm-accent-strong) 100%) !important;
    color: #1a1305 !important;
    border: 1px solid var(--vm-accent) !important;
    box-shadow: 0 1px 4px rgba(var(--vm-accent-rgb), 0.25) !important;
    font-weight: 700 !important;
}
body.theme-atelier:is([data-path^="/admin"], [data-path^="/integration"], [data-path^="/health"], [data-path^="/realtime"]) :is(
    .btn-primary:hover,
    button.btn-primary:hover,
    .quick-btn.active:hover,
    .rt-btn-primary:hover,
    .sd-new-grp-btn:hover,
    .sd-sel-action:hover,
    .pw-btn-primary:hover,
    .sr-btn-primary:hover,
    .id-btn-primary:hover,
    .ld-btn-primary:hover
) {
    background: linear-gradient(135deg, var(--vm-accent-hover) 0%, #c89c52 100%) !important;
    box-shadow: 0 2px 8px rgba(var(--vm-accent-rgb), 0.40) !important;
}

/* Generic ghost/secondary buttons → guld-outline */
body.theme-atelier:is([data-path^="/admin"], [data-path^="/integration"], [data-path^="/health"], [data-path^="/realtime"]) :is(
    .btn-ghost,
    .btn-secondary,
    .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-warning),
    button.btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-warning),
    .quick-btn:not(.active),
    .rt-btn-outline,
    .pw-btn:not(.primary),
    .sd-door-times-btn,
    .nd-col-btn,
    .int-snav-tab
) {
    background: rgba(var(--vm-accent-rgb), 0.06) !important;
    color: var(--vm-accent) !important;
    border: 1px solid rgba(var(--vm-accent-rgb), 0.40) !important;
    font-weight: 600 !important;
}
body.theme-atelier:is([data-path^="/admin"], [data-path^="/integration"], [data-path^="/health"], [data-path^="/realtime"]) :is(
    .btn-ghost:hover,
    .btn-secondary:hover,
    .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-warning):hover,
    button.btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-warning):hover,
    .quick-btn:hover,
    .rt-btn-outline:hover,
    .pw-btn:not(.primary):hover,
    .sd-door-times-btn:hover,
    .nd-col-btn:hover,
    .int-snav-tab:hover
) {
    background: rgba(var(--vm-accent-rgb), 0.14) !important;
    border-color: var(--vm-accent) !important;
}

/* === STORLEK: bredda container i admin-scope (1480px → fluid) === */
body.theme-atelier:is([data-path^="/admin"], [data-path^="/integration"], [data-path^="/health"], [data-path^="/realtime"]) .page-shell {
    max-width: none !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
}

/* === BODY-BG: en nyans ljusare + varmare (bort från blå-ton) === */
body.theme-atelier:is([data-path^="/admin"], [data-path^="/integration"], [data-path^="/health"], [data-path^="/realtime"]) {
    background:
        radial-gradient(ellipse 60% 50% at 20% 0%, rgba(var(--vm-accent-rgb), 0.04), transparent 60%),
        radial-gradient(ellipse 50% 40% at 80% 100%, rgba(80,90,110,0.05), transparent 60%),
        #2b2826 !important;
}

/* === APPLE LIQUID GLASS — paneler/kort med backdrop-blur === */
body.theme-atelier:is([data-path^="/admin"], [data-path^="/integration"], [data-path^="/health"], [data-path^="/realtime"]) :is(
    .access-panel, .access-card, .access-section,
    .pl-panel, .pt-panel, .uc-panel, .cs-panel, .device-card,
    .sd-panel, .sc-panel, .ts-panel, .ag-panel, .vw-panel, .bk-panel,
    .ap-quick, .ap-warn-item, .ap-warn-item.info,
    .au-card, .au-panel, .rl-card, .pr-card, .cat-card,
    .vm-card, .vm-panel, .panel
) {
    background: rgba(38, 36, 34, 0.55) !important;
    backdrop-filter: blur(22px) saturate(1.5) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 6px 28px rgba(0, 0, 0, 0.22) !important;
    border-radius: 14px !important;
}