/* ── E# Brand Palette ─────────────────────────────────────────────────────── */
:root {
    --brand-red:        #B0171E;
    --brand-red-dark:   #8C1118;
    --brand-red-light:  #FADDE0;
    --brand-slate:      #2C3746;
    --brand-slate-dark: #1A222D;
    --brand-slate-mid:  #3D4F63;
    --brand-surface:    #F7F8FA;
    --brand-text:       #1E2530;

    /* ── Semantic UI tokens — light theme (default) ── */
    --ui-bg:            #F7F8FA;
    --ui-surface:       #ffffff;
    --ui-surface-2:     #f0f4f8;
    --ui-border:        #dee2e6;
    --ui-text:          #1E2530;
    --ui-text-muted:    #6c757d;
    --ui-topbar-bg:     #f7f7f7;
    --ui-topbar-border: #d6d5d5;
    --ui-hover-bg:      #e8e8e8;
    --ui-icon:          #555555;
    --ui-input-bg:      #ffffff;
    --ui-input-border:  #ced4da;
    --ui-input-text:    #1E2530;
    --ui-scrollbar:     rgba(0, 0, 0, 0.18);
}

/* ── Semantic UI tokens — dark theme ────────────────────────────────────── */
html[data-theme="dark"] {
    --ui-bg:            #1E2A35;
    --ui-surface:       #1b2736;
    --ui-surface-2:     #243347;
    --ui-border:        #2c3e50;
    --ui-text:          #e2e8f0;
    --ui-text-muted:    #8fa8be;
    --ui-topbar-bg:     #1A222D;
    --ui-topbar-border: #2c3e50;
    --ui-hover-bg:      #2a3a4a;
    --ui-icon:          #a0b4c8;
    --ui-input-bg:      #1E2A35;
    --ui-input-border:  #2c3e50;
    --ui-input-text:    #e2e8f0;
    --ui-scrollbar:     rgba(255, 255, 255, 0.12);
    --brand-surface:    #1E2A35;
    --brand-text:       #e2e8f0;
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: var(--ui-bg);
    color: var(--ui-text);
}

a, .btn-link {
    color: var(--brand-red);
}

a:hover, .btn-link:hover {
    color: var(--brand-red-dark);
}

.btn-primary {
    color: #fff;
    background-color: var(--brand-red);
    border-color: var(--brand-red);
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: var(--brand-red-dark);
    border-color: var(--brand-red-dark);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem rgba(176, 23, 30, 0.45);
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ── Sidebar collapsed mode ──────────────────────────────────────────────── */
/* These must be global because .sidebar-collapsed lives in MainLayout while
   the target elements (.brand-text, .nav-label, etc.) live inside NavMenu.
   Blazor scoped CSS cannot cross component boundaries. */

@media (min-width: 641px) {
    .sidebar-collapsed .brand-text,
    .sidebar-collapsed .nav-label {
        display: none;
    }

    .sidebar-collapsed .navbar-brand {
        justify-content: center;
    }

    .sidebar-collapsed .nav-item {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .sidebar-collapsed .nav-link {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }

    .sidebar-collapsed .nav-link .bi {
        margin-right: 0;
    }
}

/* ── Sidebar flex layout fix ─────────────────────────────────────────────── */
/* Pages with wide content (e.g. the package table) have a large min-width.
   Without these two rules the flex algorithm squeezes .sidebar to zero when
   the table content is wider than the viewport.                              */
@media (min-width: 641px) {
    .sidebar {
        flex-shrink: 0;   /* sidebar never compressed regardless of page content width */
    }

    main {
        min-width: 0;     /* allows <main> to shrink below its content min-width so the sidebar gets its space */
        overflow-x: auto; /* wide content (tables) scrolls inside <main> instead of pushing sidebar out */
    }
}

/* ── Scrollbar ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ui-scrollbar); border-radius: 3px; }

/* ── Theme toggle button icon (CSS-driven, works in SSR layout) ──────────── */
.theme-btn::before { content: "☾"; }
html[data-theme="dark"] .theme-btn::before { content: "☀"; }

/* ══════════════════════════════════════════════════════════════════════════
   DARK THEME
   Strategy:
     1. Override Bootstrap --bs-* CSS variables → cascades to ALL BS components
     2. Direct !important overrides for Bootstrap elements that don't fully
        respect their own variables in all versions
     3. Scoped component overrides — targets hardcoded colors in .razor.css
        files via global selectors (needs !important to beat equal specificity)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. CSS variable overrides ───────────────────────────────────────────── */
html[data-theme="dark"] {
    color-scheme: dark;

    /* Our semantic tokens */
    --ui-bg:            #0f1923;
    --ui-surface:       #1b2736;
    --ui-surface-2:     #243347;
    --ui-border:        #2c3e50;
    --ui-text:          #e2e8f0;
    --ui-text-muted:    #8fa8be;
    --ui-topbar-bg:     #1A222D;
    --ui-topbar-border: #2c3e50;
    --ui-hover-bg:      #2a3a4a;
    --ui-icon:          #a0b4c8;
    --ui-input-bg:      #1b2736;
    --ui-input-border:  #2c3e50;
    --ui-input-text:    #e2e8f0;
    --ui-scrollbar:     rgba(255, 255, 255, 0.12);
    --brand-surface:    #1E2A35;
    --brand-text:       #e2e8f0;

    /* Bootstrap 5 core body/typography */
    --bs-body-color:                     #e2e8f0;
    --bs-body-bg:                        #1E2A35;
    --bs-secondary-color:                rgba(226,232,240,0.75);
    --bs-secondary-bg:                   #243347;
    --bs-tertiary-color:                 rgba(226,232,240,0.5);
    --bs-tertiary-bg:                    #1b2736;
    --bs-emphasis-color:                 #e2e8f0;
    --bs-border-color:                   #2c3e50;
    --bs-border-color-translucent:       rgba(255,255,255,0.15);
    --bs-heading-color:                  #e2e8f0;
    --bs-link-color:                     #60a5fa;
    --bs-link-hover-color:               #93c5fd;

    /* Bootstrap 5 — Card */
    --bs-card-bg:                        #1b2736;
    --bs-card-border-color:              #2c3e50;
    --bs-card-cap-bg:                    rgba(255,255,255,0.05);
    --bs-card-color:                     #e2e8f0;

    /* Bootstrap 5 — Form / Input */
    --bs-form-control-bg:                #1b2736;
    --bs-form-control-disabled-bg:       #1E2A35;
    --bs-input-bg:                       #1b2736;
    --bs-input-disabled-bg:              #1E2A35;
    --bs-input-color:                    #e2e8f0;
    --bs-input-border-color:             #2c3e50;
    --bs-input-focus-bg:                 #1b2736;
    --bs-input-focus-color:              #e2e8f0;
    --bs-input-focus-border-color:       rgba(176,23,30,0.6);
    --bs-input-placeholder-color:        #506070;

    /* Bootstrap 5 — Input group addon */
    --bs-input-group-addon-bg:           #243347;
    --bs-input-group-addon-color:        #e2e8f0;
    --bs-input-group-addon-border-color: #2c3e50;

    /* Bootstrap 5 — Table */
    --bs-table-color:                    #e2e8f0;
    --bs-table-bg:                       transparent;
    --bs-table-border-color:             #2c3e50;
    --bs-table-striped-bg:               rgba(255,255,255,0.04);
    --bs-table-striped-color:            #e2e8f0;
    --bs-table-hover-bg:                 rgba(255,255,255,0.07);
    --bs-table-hover-color:              #e2e8f0;
    --bs-table-active-bg:                rgba(255,255,255,0.1);

    /* Bootstrap 5 — Modal */
    --bs-modal-bg:                       #1b2736;
    --bs-modal-border-color:             #2c3e50;
    --bs-modal-header-border-color:      #2c3e50;
    --bs-modal-footer-border-color:      #2c3e50;
    --bs-modal-color:                    #e2e8f0;

    /* Bootstrap 5 — Dropdown */
    --bs-dropdown-bg:                    #1b2736;
    --bs-dropdown-border-color:          #2c3e50;
    --bs-dropdown-color:                 #e2e8f0;
    --bs-dropdown-link-color:            #e2e8f0;
    --bs-dropdown-link-hover-color:      #e2e8f0;
    --bs-dropdown-link-hover-bg:         #2a3a4a;
    --bs-dropdown-divider-bg:            #2c3e50;

    /* Bootstrap 5 — List group */
    --bs-list-group-color:               #e2e8f0;
    --bs-list-group-bg:                  #1b2736;
    --bs-list-group-border-color:        #2c3e50;
    --bs-list-group-hover-bg:            #2a3a4a;
    --bs-list-group-action-color:        #8fa8be;
    --bs-list-group-action-hover-color:  #e2e8f0;
    --bs-list-group-active-bg:           #B0171E;
    --bs-list-group-active-border-color: #B0171E;

    /* Bootstrap 5 — Nav / Tabs */
    --bs-nav-link-color:                 #8fa8be;
    --bs-nav-link-hover-color:           #e2e8f0;
    --bs-nav-tabs-border-color:          #2c3e50;
    --bs-nav-tabs-link-active-color:     #e2e8f0;
    --bs-nav-tabs-link-active-bg:        #1E2A35;
    --bs-nav-tabs-link-active-border-color: #2c3e50 #2c3e50 #1E2A35;
    --bs-nav-pills-link-active-bg:       #B0171E;

    /* Bootstrap 5 — Pagination */
    --bs-pagination-color:               #e2e8f0;
    --bs-pagination-bg:                  #1b2736;
    --bs-pagination-border-color:        #2c3e50;
    --bs-pagination-hover-color:         #e2e8f0;
    --bs-pagination-hover-bg:            #243347;
    --bs-pagination-hover-border-color:  #2c3e50;
    --bs-pagination-active-color:        #fff;
    --bs-pagination-active-bg:           #B0171E;
    --bs-pagination-active-border-color: #B0171E;
    --bs-pagination-disabled-color:      #506070;
    --bs-pagination-disabled-bg:         #1b2736;
    --bs-pagination-disabled-border-color: #2c3e50;

    /* Bootstrap 5 — Accordion */
    --bs-accordion-bg:                   #1b2736;
    --bs-accordion-border-color:         #2c3e50;
    --bs-accordion-button-color:         #e2e8f0;
    --bs-accordion-button-bg:            #1b2736;
    --bs-accordion-button-active-color:  #e2e8f0;
    --bs-accordion-button-active-bg:     #243347;
    --bs-accordion-color:                #e2e8f0;

    /* Bootstrap 5 — Popover / Tooltip */
    --bs-popover-bg:                     #1b2736;
    --bs-popover-border-color:           #2c3e50;
    --bs-popover-header-bg:              #243347;
    --bs-popover-header-color:           #e2e8f0;
    --bs-popover-body-color:             #e2e8f0;
    --bs-tooltip-bg:                     #243347;
    --bs-tooltip-color:                  #e2e8f0;

    /* Bootstrap 5 — Progress */
    --bs-progress-bg:                    #243347;
}

/* ── 2. Direct Bootstrap overrides ──────────────────────────────────────── */
/* These cover Bootstrap elements that don't fully inherit from --bs-* vars  */

html[data-theme="dark"] body,
html[data-theme="dark"] main,
html[data-theme="dark"] article {
    background-color: var(--ui-bg);
    color: var(--ui-text);
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] select {
    background-color: var(--ui-input-bg) !important;
    border-color: var(--ui-input-border) !important;
    color: var(--ui-input-text) !important;
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] input:focus {
    background-color: var(--ui-input-bg) !important;
    border-color: rgba(176,23,30,0.6) !important;
    color: var(--ui-input-text) !important;
    box-shadow: 0 0 0 0.25rem rgba(176,23,30,0.25) !important;
}

html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] textarea::placeholder,
html[data-theme="dark"] input::placeholder {
    color: #506070 !important;
}

html[data-theme="dark"] .form-check-input {
    background-color: var(--ui-input-bg);
    border-color: var(--ui-input-border);
}

html[data-theme="dark"] .input-group-text {
    background-color: #243347 !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text) !important;
}

html[data-theme="dark"] .card {
    background-color: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text) !important;
}

html[data-theme="dark"] .card-header {
    background-color: #243347 !important;
    border-color: var(--ui-border) !important;
}

html[data-theme="dark"] .card-footer {
    background-color: #243347 !important;
    border-color: var(--ui-border) !important;
}

html[data-theme="dark"] .table {
    color: var(--ui-text) !important;
    border-color: var(--ui-border) !important;
}

html[data-theme="dark"] .table > :not(caption) > * > * {
    color: var(--ui-text);
    border-color: var(--ui-border);
}

html[data-theme="dark"] .table > thead > tr > th,
html[data-theme="dark"] th {
    color: var(--ui-text) !important;
    border-color: var(--ui-border) !important;
}

html[data-theme="dark"] .modal-content {
    background-color: var(--ui-surface) !important;
    color: var(--ui-text) !important;
    border-color: var(--ui-border) !important;
}

html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer {
    background-color: #243347 !important;
    border-color: var(--ui-border) !important;
}

html[data-theme="dark"] .modal-body {
    background-color: var(--ui-surface) !important;
    color: var(--ui-text) !important;
}

html[data-theme="dark"] .modal-backdrop {
    background-color: rgba(0,0,0,0.7) !important;
}

html[data-theme="dark"] .list-group-item {
    background-color: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text) !important;
}

html[data-theme="dark"] .accordion-item {
    background-color: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text) !important;
}

html[data-theme="dark"] .accordion-button {
    background-color: var(--ui-surface) !important;
    color: var(--ui-text) !important;
}

html[data-theme="dark"] .accordion-button:not(.collapsed) {
    background-color: #243347 !important;
}

html[data-theme="dark"] .accordion-body {
    background-color: var(--ui-surface) !important;
    color: var(--ui-text) !important;
}

html[data-theme="dark"] hr {
    border-color: var(--ui-border) !important;
}

html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .text-secondary {
    color: var(--ui-text-muted) !important;
}

html[data-theme="dark"] .text-dark {
    color: var(--ui-text) !important;
}

html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light {
    background-color: var(--ui-surface) !important;
    color: var(--ui-text) !important;
}

html[data-theme="dark"] .border,
html[data-theme="dark"] .border-top,
html[data-theme="dark"] .border-bottom,
html[data-theme="dark"] .border-start,
html[data-theme="dark"] .border-end {
    border-color: var(--ui-border) !important;
}

html[data-theme="dark"] .badge.bg-light,
html[data-theme="dark"] .badge.bg-secondary {
    background-color: #243347 !important;
    color: #e2e8f0 !important;
}

/* ── 3. Scoped component overrides ───────────────────────────────────────── */
/* Targets hardcoded light-mode colors inside .razor.css scoped files.
   Needs !important to win over equal-specificity scoped selectors loaded later. */

/* Generic light-background patterns */
html[data-theme="dark"] [style*="background-color: #fff"],
html[data-theme="dark"] [style*="background-color: white"],
html[data-theme="dark"] [style*="background: white"],
html[data-theme="dark"] [style*="background: #fff"] {
    background-color: var(--ui-surface) !important;
    color: var(--ui-text) !important;
}

/* Light panel / card backgrounds (#f8f9fa, #f0f1f3, #e9ecef, #f7f7f7) */
html[data-theme="dark"] .bg-body-secondary,
html[data-theme="dark"] .bg-body-tertiary {
    background-color: var(--ui-surface-2) !important;
    color: var(--ui-text) !important;
}

/* Status alert boxes — replace pastel backgrounds with dark tints */
html[data-theme="dark"] .alert-success {
    background-color: rgba(40,167,69,0.15) !important;
    border-color: rgba(40,167,69,0.4) !important;
    color: #6ee7a0 !important;
}

html[data-theme="dark"] .alert-danger {
    background-color: rgba(220,53,69,0.15) !important;
    border-color: rgba(220,53,69,0.4) !important;
    color: #f87171 !important;
}

html[data-theme="dark"] .alert-warning {
    background-color: rgba(255,193,7,0.15) !important;
    border-color: rgba(255,193,7,0.4) !important;
    color: #fbbf24 !important;
}

html[data-theme="dark"] .alert-info {
    background-color: rgba(13,202,240,0.12) !important;
    border-color: rgba(13,202,240,0.35) !important;
    color: #67e8f9 !important;
}

/* Step tree / test row status backgrounds (from StepTreeView, TestMonitor) */
html[data-theme="dark"] .step-pass,
html[data-theme="dark"] .row-pass,
html[data-theme="dark"] .status-pass { background-color: rgba(40,167,69,0.12) !important; }

html[data-theme="dark"] .step-fail,
html[data-theme="dark"] .row-fail,
html[data-theme="dark"] .status-fail { background-color: rgba(220,53,69,0.12) !important; }

html[data-theme="dark"] .step-running,
html[data-theme="dark"] .row-running,
html[data-theme="dark"] .status-running { background-color: rgba(33,150,243,0.12) !important; }

html[data-theme="dark"] .step-warning,
html[data-theme="dark"] .row-warning,
html[data-theme="dark"] .status-warning { background-color: rgba(255,193,7,0.12) !important; }

/* Log table dark background rows (already dark, invert so they're lighter) */
html[data-theme="dark"] .log-row-warning { background-color: rgba(255,193,7,0.12) !important; }
html[data-theme="dark"] .log-row-error   { background-color: rgba(220,53,69,0.12) !important; }

/* Details/summary elements */
html[data-theme="dark"] details {
    background-color: var(--ui-surface);
    border-color: var(--ui-border);
    color: var(--ui-text);
}

html[data-theme="dark"] summary {
    color: var(--ui-text);
}

/* Code and pre blocks */
html[data-theme="dark"] code,
html[data-theme="dark"] kbd,
html[data-theme="dark"] pre {
    background-color: #0d1117 !important;
    color: #c9d1d9 !important;
    border-color: var(--ui-border) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   COMPONENT-SPECIFIC DARK OVERRIDES
   These target custom class names in scoped .razor.css files.
   !important is required because WorkflowEngine.UI.styles.css (scoped CSS)
   loads after app.css at equal specificity.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Headings — scoped CSS sets explicit dark gray, must override ─────── */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 { color: var(--ui-text) !important; }

html[data-theme="dark"] p,
html[data-theme="dark"] span,
html[data-theme="dark"] label { color: var(--ui-text); }

html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .section-title,
html[data-theme="dark"] .lead,
html[data-theme="dark"] .tile-desc,
html[data-theme="dark"] .mcp-desc,
html[data-theme="dark"] .mcp-hint,
html[data-theme="dark"] .mcp-meta,
html[data-theme="dark"] .mcp-option-label,
html[data-theme="dark"] .mcp-tab,
html[data-theme="dark"] .mcp-steps,
html[data-theme="dark"] .ext-badge,
html[data-theme="dark"] .form-group label,
html[data-theme="dark"] .results-summary,
html[data-theme="dark"] .no-data,
html[data-theme="dark"] .pkg-detail-meta,
html[data-theme="dark"] .unit-text,
html[data-theme="dark"] .limits-text,
html[data-theme="dark"] .measurement-count,
html[data-theme="dark"] .auto-scroll-toggle { color: var(--ui-text-muted) !important; }

/* ── Home page ────────────────────────────────────────────────────────── */
html[data-theme="dark"] .tile {
    background-color: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text) !important;
}
html[data-theme="dark"] .tile-title,
html[data-theme="dark"] .mcp-client-title { color: var(--ui-text) !important; }

html[data-theme="dark"] .mcp-connect-card {
    background-color: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
}
html[data-theme="dark"] .mcp-tabs { border-color: var(--ui-border) !important; }
html[data-theme="dark"] .mcp-tab:hover { color: var(--ui-text) !important; }
html[data-theme="dark"] .mcp-client-section { border-color: var(--ui-border) !important; }
html[data-theme="dark"] .mcp-command-row {
    background-color: #0d1117 !important;
    color: #c9d1d9 !important;
}
html[data-theme="dark"] .mcp-copy-btn {
    background-color: var(--ui-surface-2) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text-muted) !important;
}
html[data-theme="dark"] .mcp-copy-btn:hover {
    background-color: var(--ui-hover-bg) !important;
    color: var(--ui-text) !important;
}
html[data-theme="dark"] .mcp-steps kbd {
    background-color: var(--ui-surface-2) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text) !important;
}
html[data-theme="dark"] .mcp-notice {
    background-color: rgba(255,193,7,0.10) !important;
    border-color: rgba(255,193,7,0.35) !important;
    color: #fbbf24 !important;
}

/* ── TestMonitor ──────────────────────────────────────────────────────── */
html[data-theme="dark"] .execution-controls {
    background-color: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text) !important;
}
html[data-theme="dark"] .form-control-static {
    background-color: var(--ui-surface-2) !important;
    color: var(--ui-text-muted) !important;
}
html[data-theme="dark"] .connection-status.connected {
    background-color: rgba(40,167,69,0.12) !important;
    border-color: rgba(40,167,69,0.35) !important;
    color: #6ee7a0 !important;
}
html[data-theme="dark"] .connection-status.disconnected {
    background-color: rgba(220,53,69,0.12) !important;
    border-color: rgba(220,53,69,0.35) !important;
    color: #f87171 !important;
}
html[data-theme="dark"] .required-tags-section {
    background-color: rgba(255,193,7,0.08) !important;
    border-color: rgba(255,193,7,0.3) !important;
}
html[data-theme="dark"] .required-tags-heading { color: #fbbf24 !important; }
html[data-theme="dark"] .tags-section summary { color: var(--ui-text-muted) !important; }
html[data-theme="dark"] .btn-refresh-tests {
    border-color: var(--ui-border) !important;
    color: var(--ui-text-muted) !important;
    background-color: transparent !important;
}
html[data-theme="dark"] .btn-refresh-tests:hover:not(:disabled) {
    background-color: var(--ui-hover-bg) !important;
    color: var(--ui-text) !important;
}

/* ── TestResults & TestResultDetail ──────────────────────────────────── */
html[data-theme="dark"] .search-form {
    background-color: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text) !important;
}
html[data-theme="dark"] .search-form h3 { color: var(--ui-text) !important; }
html[data-theme="dark"] .search-row .field label { color: var(--ui-text-muted) !important; }
html[data-theme="dark"] .results-summary { color: var(--ui-text-muted) !important; }

/* Main results table */
html[data-theme="dark"] .data-table {
    color: var(--ui-text) !important;
    background-color: var(--ui-surface) !important;
}
html[data-theme="dark"] .data-table thead { background-color: var(--ui-surface-2) !important; color: var(--ui-text) !important; }
html[data-theme="dark"] .data-table th { color: var(--ui-text) !important; border-color: var(--ui-border) !important; }
html[data-theme="dark"] .data-table td { border-color: var(--ui-border) !important; color: var(--ui-text) !important; }
html[data-theme="dark"] .data-table tbody tr:hover { background-color: var(--ui-hover-bg) !important; }
html[data-theme="dark"] .result-row.expanded { background-color: var(--ui-surface-2) !important; font-weight: 600; }

/* Expand arrow */
html[data-theme="dark"] .expand-icon { color: var(--ui-text-muted) !important; }
html[data-theme="dark"] .expand-icon.expanded { color: #60a5fa !important; transform: rotate(90deg); }

/* Inline detail panel (expanded row content) */
html[data-theme="dark"] .inline-detail-row td { border-color: var(--ui-border) !important; }
html[data-theme="dark"] .inline-detail {
    background-color: var(--ui-surface) !important;
    color: var(--ui-text) !important;
}
html[data-theme="dark"] .loading-detail { color: var(--ui-text-muted) !important; }

/* Report header (verdict-colored banner) */
html[data-theme="dark"] .report-header {
    background-color: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text) !important;
}
html[data-theme="dark"] .report-header.verdict-pass        { background-color: rgba(40,167,69,0.08)  !important; border-left-color: #4ade80 !important; }
html[data-theme="dark"] .report-header.verdict-fail        { background-color: rgba(220,53,69,0.08)  !important; border-left-color: #f87171 !important; }
html[data-theme="dark"] .report-header.verdict-undetermined{ background-color: rgba(255,193,7,0.08)  !important; border-left-color: #fbbf24 !important; }
html[data-theme="dark"] .report-header.verdict-aborted     { background-color: var(--ui-surface-2)  !important; border-left-color: #9ca3af !important; }
html[data-theme="dark"] .header-table td.label { color: var(--ui-text-muted) !important; }
html[data-theme="dark"] .header-table td.value { color: var(--ui-text) !important; }

/* Step results sub-table */
html[data-theme="dark"] .step-results-table h4 { color: var(--ui-text) !important; }
html[data-theme="dark"] .iteration-badge { background-color: var(--ui-surface-2) !important; color: var(--ui-text-muted) !important; }
html[data-theme="dark"] .measurement-row { background-color: rgba(255,255,255,0.02) !important; color: var(--ui-text) !important; }
html[data-theme="dark"] .measurement-count { color: var(--ui-text-muted) !important; }
html[data-theme="dark"] .units { color: var(--ui-text-muted) !important; }

/* Nested executions */
html[data-theme="dark"] .nested-execution { border-color: var(--ui-border) !important; }
html[data-theme="dark"] .nested-header { background-color: var(--ui-surface-2) !important; color: var(--ui-text) !important; }
html[data-theme="dark"] .nested-header:hover { background-color: var(--ui-hover-bg) !important; }
html[data-theme="dark"] .nested-body { border-color: var(--ui-border) !important; color: var(--ui-text) !important; }

/* Pagination */
html[data-theme="dark"] .pagination .btn {
    background-color: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text) !important;
}
html[data-theme="dark"] .pagination .btn:hover:not(:disabled) { background-color: var(--ui-hover-bg) !important; }
html[data-theme="dark"] .page-info { color: var(--ui-text-muted) !important; }

/* Tags, config snapshot, outline button */
html[data-theme="dark"] .tag-badge { background-color: var(--ui-surface-2) !important; border-color: var(--ui-border) !important; color: var(--ui-text-muted) !important; }
html[data-theme="dark"] .config-snapshot-section { border-color: var(--ui-border) !important; }
html[data-theme="dark"] .config-snapshot-toggle { color: var(--ui-text-muted) !important; }
html[data-theme="dark"] .config-snapshot-toggle:hover { color: #60a5fa !important; }
html[data-theme="dark"] .config-snapshot-table th { background-color: var(--ui-surface-2) !important; border-color: var(--ui-border) !important; color: var(--ui-text-muted) !important; }
html[data-theme="dark"] .config-snapshot-table td { border-color: var(--ui-border) !important; color: var(--ui-text) !important; }
html[data-theme="dark"] .config-snapshot-table .config-key { color: var(--ui-text-muted) !important; }
html[data-theme="dark"] .config-snapshot-table .config-value { color: var(--ui-text) !important; }
html[data-theme="dark"] .btn-outline { border-color: #60a5fa !important; color: #60a5fa !important; background: transparent !important; }
html[data-theme="dark"] .btn-outline:hover { background-color: #60a5fa !important; color: #0f1923 !important; }

/* ── PackageBrowser ───────────────────────────────────────────────────── */
html[data-theme="dark"] .package-table th {
    background-color: var(--ui-surface-2) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text) !important;
}
html[data-theme="dark"] .package-table td { border-color: var(--ui-border) !important; }
html[data-theme="dark"] .pkg-row:hover td { background-color: var(--ui-hover-bg) !important; }
html[data-theme="dark"] .pkg-detail-row td {
    background-color: var(--ui-surface-2) !important;
    border-color: var(--ui-border) !important;
}
html[data-theme="dark"] .pkg-detail-meta { color: var(--ui-text-muted) !important; }
html[data-theme="dark"] .pkg-detail-meta strong { color: var(--ui-text) !important; }

/* ── StepTreeView ─────────────────────────────────────────────────────── */
html[data-theme="dark"] .step-tree-table thead,
html[data-theme="dark"] .step-tree-table th {
    background-color: var(--ui-surface-2) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text) !important;
}
html[data-theme="dark"] .step-tree-table td { border-color: var(--ui-border) !important; }
html[data-theme="dark"] .step-row:hover { background-color: var(--ui-hover-bg) !important; }
html[data-theme="dark"] .step-row.step-running {
    background-color: rgba(0,123,255,0.10) !important;
    border-left-color: #4d9ef5 !important;
}
html[data-theme="dark"] .step-row.step-verdict-pass {
    background-color: rgba(40,167,69,0.10) !important;
    border-left-color: #4ade80 !important;
}
html[data-theme="dark"] .step-row.step-verdict-pass:hover { background-color: rgba(40,167,69,0.16) !important; }
html[data-theme="dark"] .step-row.step-verdict-fail {
    background-color: rgba(220,53,69,0.10) !important;
    border-left-color: #f87171 !important;
}
html[data-theme="dark"] .step-row.step-verdict-fail:hover { background-color: rgba(220,53,69,0.16) !important; }
html[data-theme="dark"] .step-row.step-verdict-undetermined {
    background-color: rgba(255,193,7,0.08) !important;
    border-left-color: #fbbf24 !important;
}
html[data-theme="dark"] .step-row.step-verdict-undetermined:hover { background-color: rgba(255,193,7,0.13) !important; }
html[data-theme="dark"] .measurement-row.measurement-pass { background-color: rgba(40,167,69,0.08) !important; }
html[data-theme="dark"] .measurement-row.measurement-fail { background-color: rgba(220,53,69,0.08) !important; }
html[data-theme="dark"] .badge-numeric {
    background-color: rgba(0,123,255,0.15) !important;
    color: #93c5fd !important;
}
html[data-theme="dark"] .badge-boolean {
    background-color: rgba(40,167,69,0.15) !important;
    color: #86efac !important;
}
html[data-theme="dark"] .badge-string {
    background-color: rgba(255,193,7,0.12) !important;
    color: #fde68a !important;
}

/* ── LogTable ─────────────────────────────────────────────────────────── */
html[data-theme="dark"] .log-table-panel {
    background-color: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text) !important;
}
html[data-theme="dark"] .log-table-header h3 { color: var(--ui-text) !important; border-color: var(--ui-border) !important; }
html[data-theme="dark"] .log-column-headers th {
    background-color: var(--ui-surface-2) !important;
    color: var(--ui-text) !important;
    border-color: var(--ui-border) !important;
}
html[data-theme="dark"] .log-column-filters td {
    background-color: var(--ui-surface-2) !important;
    border-color: var(--ui-border) !important;
}
html[data-theme="dark"] .log-column-filters input {
    background-color: var(--ui-input-bg) !important;
    border-color: var(--ui-input-border) !important;
    color: var(--ui-text) !important;
}
html[data-theme="dark"] .log-data-table tbody td { border-color: var(--ui-border) !important; }
html[data-theme="dark"] .log-data-table tbody tr:hover { background-color: var(--ui-hover-bg) !important; }
html[data-theme="dark"] .log-table-footer {
    background-color: var(--ui-surface-2) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text-muted) !important;
}

/* ── StationConfig ────────────────────────────────────────────────────── */
html[data-theme="dark"] .config-section,
html[data-theme="dark"] .config-card,
html[data-theme="dark"] .info-box,
html[data-theme="dark"] .settings-panel {
    background-color: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text) !important;
}

/* ── Statistics ───────────────────────────────────────────────────────── */
html[data-theme="dark"] .stats-card,
html[data-theme="dark"] .stat-panel,
html[data-theme="dark"] .stats-panel,
html[data-theme="dark"] .chart-container {
    background-color: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text) !important;
}

/* ── YamlValidator ────────────────────────────────────────────────────── */
html[data-theme="dark"] .validation-result,
html[data-theme="dark"] .yaml-panel,
html[data-theme="dark"] .schema-section {
    background-color: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text) !important;
}
html[data-theme="dark"] .validation-success {
    background-color: rgba(40,167,69,0.12) !important;
    border-color: rgba(40,167,69,0.35) !important;
    color: #86efac !important;
}
html[data-theme="dark"] .validation-error {
    background-color: rgba(220,53,69,0.12) !important;
    border-color: rgba(220,53,69,0.35) !important;
    color: #f87171 !important;
}

/* ── Help page ────────────────────────────────────────────────────────── */
html[data-theme="dark"] .help-section,
html[data-theme="dark"] .help-card,
html[data-theme="dark"] .about-panel {
    background-color: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text) !important;
}

/* ── TestResultDetail ─────────────────────────────────────────────────── */
html[data-theme="dark"] .result-header,
html[data-theme="dark"] .result-panel,
html[data-theme="dark"] .verdict-panel,
html[data-theme="dark"] .detail-section {
    background-color: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text) !important;
}

/* ── TestMonitor — .panel wrapper + VariablesPanel ────────────────────── */
html[data-theme="dark"] .panel {
    background-color: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text) !important;
}
html[data-theme="dark"] .panel h3 { color: var(--ui-text) !important; }
html[data-theme="dark"] .data-panels { background-color: var(--ui-bg) !important; }
html[data-theme="dark"] .table-scroll-wrapper { background-color: var(--ui-surface) !important; }
/* .highlight-new: scoped CSS generates .data-panels[b-xxx] .highlight-new (0,3,0) with !important.
   We need (0,3,1) or higher to beat it. `html` element selector adds the +1. */
@keyframes fadeHighlightDark {
    from { background-color: rgba(255, 193, 7, 0.18); }
    to   { background-color: transparent; }
}
html[data-theme="dark"] .panel .highlight-new,
html[data-theme="dark"] .data-panels .highlight-new {
    background-color: rgba(255,193,7,0.18) !important;
    animation: fadeHighlightDark 2s forwards !important;
}
html[data-theme="dark"] .timestamp { color: var(--ui-text-muted) !important; }

/* .data-table is used by VariablesPanel and Statistics with no scoped CSS — needs explicit override */
html[data-theme="dark"] .data-table {
    background-color: var(--ui-surface) !important;
    color: var(--ui-text) !important;
}
html[data-theme="dark"] .data-table thead {
    background-color: var(--ui-surface-2) !important;
    color: var(--ui-text) !important;
}
html[data-theme="dark"] .data-table th { color: var(--ui-text) !important; border-color: var(--ui-border) !important; }
html[data-theme="dark"] .data-table td { border-color: var(--ui-border) !important; color: var(--ui-text) !important; }
html[data-theme="dark"] .data-table tbody tr:hover { background-color: var(--ui-hover-bg) !important; }
html[data-theme="dark"] .data-table tbody tr.capability-row:hover { background-color: var(--ui-hover-bg) !important; }

/* ── YAML Validator ───────────────────────────────────────────────────── */
html[data-theme="dark"] .input-panel,
html[data-theme="dark"] .results-panel {
    background-color: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text) !important;
}
html[data-theme="dark"] .panel-header {
    background-color: var(--ui-surface-2) !important;
    border-color: var(--ui-border) !important;
}
html[data-theme="dark"] .panel-title { color: var(--ui-text) !important; }
html[data-theme="dark"] .results-body { color: var(--ui-text) !important; }
html[data-theme="dark"] .placeholder { color: var(--ui-text-muted) !important; }
html[data-theme="dark"] .result-valid {
    background-color: rgba(40,167,69,0.12) !important;
    border-color: rgba(40,167,69,0.35) !important;
    color: #86efac !important;
}
html[data-theme="dark"] .result-detail { color: #86efac !important; }
html[data-theme="dark"] .result-invalid { border-color: rgba(220,53,69,0.4) !important; }
html[data-theme="dark"] .error-summary {
    background-color: rgba(220,53,69,0.12) !important;
    color: #f87171 !important;
}
html[data-theme="dark"] .error-item { border-color: rgba(220,53,69,0.2) !important; color: var(--ui-text) !important; }
html[data-theme="dark"] .error-item:nth-child(odd) { background-color: rgba(220,53,69,0.05) !important; }
html[data-theme="dark"] .error-message { color: var(--ui-text) !important; }
html[data-theme="dark"] .error-location { color: var(--ui-text-muted) !important; }
html[data-theme="dark"] .error-location-link { color: #60a5fa !important; }
html[data-theme="dark"] .error-location-link:hover { background-color: rgba(96,165,250,0.1) !important; border-color: rgba(96,165,250,0.3) !important; }
html[data-theme="dark"] .error-semantic { color: #fbbf24 !important; }
html[data-theme="dark"] .alert-error {
    background-color: rgba(255,193,7,0.10) !important;
    border-color: rgba(255,193,7,0.35) !important;
    color: #fbbf24 !important;
}

/* ── StationConfig ────────────────────────────────────────────────────── */
html[data-theme="dark"] .station-identity-card {
    background-color: rgba(56,189,248,0.08) !important;
    border-color: rgba(56,189,248,0.25) !important;
}
html[data-theme="dark"] .station-identity-label,
html[data-theme="dark"] .station-identity-value { color: #7dd3fc !important; }
html[data-theme="dark"] .station-identity-hint { color: var(--ui-text-muted) !important; }
html[data-theme="dark"] .scope-selector {
    background-color: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
}
html[data-theme="dark"] .scope-selector label { color: var(--ui-text) !important; }
html[data-theme="dark"] .config-table-container {
    background-color: var(--ui-surface) !important;
}
html[data-theme="dark"] .config-table td { border-color: var(--ui-border) !important; }
html[data-theme="dark"] .config-table tbody tr:hover { background-color: var(--ui-hover-bg) !important; }
html[data-theme="dark"] .category-cell,
html[data-theme="dark"] .description-cell,
html[data-theme="dark"] .updated-cell { color: var(--ui-text-muted) !important; }
html[data-theme="dark"] .key-cell,
html[data-theme="dark"] .value-cell { color: var(--ui-text) !important; }
html[data-theme="dark"] .edit-row { background-color: rgba(255,193,7,0.08) !important; }
html[data-theme="dark"] .add-entry-form,
html[data-theme="dark"] .registry-settings,
html[data-theme="dark"] .update-section {
    background-color: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text) !important;
}
html[data-theme="dark"] .registry-hint { color: var(--ui-text-muted) !important; }
html[data-theme="dark"] .registry-field label { color: var(--ui-text) !important; }
html[data-theme="dark"] .registry-field small { color: var(--ui-text-muted) !important; }
html[data-theme="dark"] .update-hint { color: var(--ui-text-muted) !important; }
html[data-theme="dark"] .global-readonly-banner {
    background-color: rgba(255,193,7,0.08) !important;
    border-color: rgba(255,193,7,0.3) !important;
    color: #fbbf24 !important;
}
html[data-theme="dark"] .update-status-idle { background-color: var(--ui-surface-2) !important; color: var(--ui-text-muted) !important; }
html[data-theme="dark"] .update-status-inprogress { background-color: rgba(255,193,7,0.10) !important; border-color: rgba(255,193,7,0.35) !important; color: #fbbf24 !important; }
html[data-theme="dark"] .update-status-success { background-color: rgba(40,167,69,0.12) !important; border-color: rgba(40,167,69,0.35) !important; color: #86efac !important; }
html[data-theme="dark"] .update-status-failed { background-color: rgba(220,53,69,0.12) !important; border-color: rgba(220,53,69,0.35) !important; color: #f87171 !important; }
html[data-theme="dark"] .badge-secret { background-color: rgba(220,53,69,0.15) !important; color: #f87171 !important; }
html[data-theme="dark"] .badge-obfuscated { background-color: rgba(255,193,7,0.12) !important; color: #fbbf24 !important; }

/* ── Statistics ───────────────────────────────────────────────────────── */
html[data-theme="dark"] .filter-bar {
    background-color: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text) !important;
}
html[data-theme="dark"] .filter-field label { color: var(--ui-text-muted) !important; }
html[data-theme="dark"] .capability-row.row-expanded { background-color: rgba(56,189,248,0.08) !important; }
html[data-theme="dark"] .col-step, html[data-theme="dark"] .col-test { color: var(--ui-text-muted) !important; }
html[data-theme="dark"] .stat-label { color: var(--ui-text-muted) !important; }
html[data-theme="dark"] .stat-value { color: var(--ui-text) !important; }
html[data-theme="dark"] .detail-row td { background-color: rgba(56,189,248,0.04) !important; border-color: var(--ui-border) !important; }
html[data-theme="dark"] .detail-panel { color: var(--ui-text) !important; }
html[data-theme="dark"] .limits-note { background-color: rgba(255,193,7,0.08) !important; border-color: rgba(255,193,7,0.4) !important; color: #fbbf24 !important; }
html[data-theme="dark"] .filtered-note { color: var(--ui-text-muted) !important; }

/* ── Help page ────────────────────────────────────────────────────────── */
html[data-theme="dark"] .help-sidebar {
    background-color: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
}
html[data-theme="dark"] .sidebar-title { color: var(--ui-text-muted) !important; border-color: var(--ui-border) !important; }
html[data-theme="dark"] .topic-link { color: var(--ui-text) !important; }
html[data-theme="dark"] .topic-link:hover { background-color: var(--ui-hover-bg) !important; color: var(--ui-text) !important; }
html[data-theme="dark"] .topic-link.active {
    background-color: rgba(96,165,250,0.12) !important;
    border-left-color: #60a5fa !important;
    color: #60a5fa !important;
}
html[data-theme="dark"] .markdown-body h3 { color: var(--ui-text) !important; }
html[data-theme="dark"] .markdown-body h1 { border-color: var(--ui-border) !important; }
html[data-theme="dark"] .markdown-body h2 { border-color: var(--ui-border) !important; }
html[data-theme="dark"] .markdown-body th {
    background-color: var(--ui-surface-2) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text) !important;
}
html[data-theme="dark"] .markdown-body td { border-color: var(--ui-border) !important; color: var(--ui-text) !important; }
html[data-theme="dark"] .markdown-body tr:nth-child(even) td { background-color: var(--ui-surface-2) !important; }
html[data-theme="dark"] .markdown-body code {
    background-color: var(--ui-surface-2) !important;
    border-color: var(--ui-border) !important;
    color: #93c5fd !important;
}
html[data-theme="dark"] .markdown-body blockquote {
    background-color: rgba(96,165,250,0.06) !important;
    border-left-color: #60a5fa !important;
    color: var(--ui-text) !important;
}

/* ── TestMonitor — progress section & step indicator ─────────────────── */
html[data-theme="dark"] .progress-section {
    background-color: var(--ui-surface) !important;
    color: var(--ui-text) !important;
}
html[data-theme="dark"] .progress-bar-container { background-color: var(--ui-surface-2) !important; }
html[data-theme="dark"] .step-counter           { color: #60a5fa !important; }
html[data-theme="dark"] .step-name              { color: var(--ui-text-muted) !important; }
html[data-theme="dark"] .progress-percentage    { color: var(--ui-text-muted) !important; }

/* panel h3 heading underline */
html[data-theme="dark"] .panel h3 {
    color: var(--ui-text) !important;
    border-bottom-color: #60a5fa !important;
}

/* expand/collapse arrow in StepTreeView */
html[data-theme="dark"] .expand-icon           { color: var(--ui-text-muted) !important; }
html[data-theme="dark"] .expand-icon.expanded  { color: #60a5fa !important; }

/* no-execution placeholder */
html[data-theme="dark"] .no-execution {
    background-color: var(--ui-surface) !important;
    color: var(--ui-text-muted) !important;
}

/* ── TestMonitor — MES panels ─────────────────────────────────────────── */
html[data-theme="dark"] .mes-loading {
    background-color: rgba(13,202,240,0.08) !important;
    border-color: rgba(13,202,240,0.25) !important;
    color: #67e8f9 !important;
}
html[data-theme="dark"] .mes-spinner { border-color: #67e8f9; border-top-color: transparent; }
html[data-theme="dark"] .mes-warning {
    background-color: rgba(255,193,7,0.10) !important;
    border-color: rgba(255,193,7,0.3) !important;
    color: #fbbf24 !important;
}
html[data-theme="dark"] .mes-rejected {
    background-color: rgba(220,53,69,0.12) !important;
    border-color: rgba(220,53,69,0.3) !important;
    color: #f87171 !important;
}
html[data-theme="dark"] .mes-routing {
    background-color: rgba(96,165,250,0.06) !important;
    border-color: rgba(96,165,250,0.25) !important;
    color: var(--ui-text) !important;
}
html[data-theme="dark"] .mes-work-order,
html[data-theme="dark"] .mes-operation {
    background: rgba(96,165,250,0.15) !important;
    color: #93c5fd !important;
}
html[data-theme="dark"] .mes-option {
    background-color: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text) !important;
}
html[data-theme="dark"] .mes-option:hover:not(:disabled) {
    border-color: #60a5fa !important;
    background-color: var(--ui-hover-bg) !important;
}
html[data-theme="dark"] .mes-option.selected {
    border-color: #60a5fa !important;
    background-color: rgba(96,165,250,0.10) !important;
}
html[data-theme="dark"] .mes-option-desc { color: var(--ui-text-muted) !important; }

/* ── TestMonitor — station config grid & artifact panel ──────────────── */
html[data-theme="dark"] .station-config-grid .cfg-key   { color: #60a5fa !important; }
html[data-theme="dark"] .station-config-grid .cfg-value { color: var(--ui-text) !important; }

html[data-theme="dark"] .monitor-artifacts-section {
    border-color: var(--ui-border) !important;
}
html[data-theme="dark"] .monitor-artifacts-section .config-snapshot-toggle {
    color: var(--ui-text-muted) !important;
}
html[data-theme="dark"] .monitor-artifacts-section .config-snapshot-toggle:hover {
    color: #60a5fa !important;
}
html[data-theme="dark"] .monitor-artifacts-section .config-snapshot-table th {
    background-color: var(--ui-surface-2) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text-muted) !important;
}
html[data-theme="dark"] .monitor-artifacts-section .config-snapshot-table td {
    border-color: var(--ui-border) !important;
    color: var(--ui-text) !important;
}
html[data-theme="dark"] .monitor-artifacts-section .config-key  { color: var(--ui-text-muted) !important; }
html[data-theme="dark"] .monitor-artifacts-section .config-value { color: var(--ui-text) !important; }

/* ── TestMonitor — station lock banner ───────────────────────────────── */
html[data-theme="dark"] .station-lock-banner { color: #fbbf24 !important; }
html[data-theme="dark"] .markdown-body hr { border-color: var(--ui-border) !important; }