:root {
    --app-bg: #f4f6f8;
    --surface: #ffffff;
    --surface-muted: #f8fafc;
    --surface-subtle: #eef3f7;
    --surface-hover: #f3f7fa;
    --border: #d9e0e8;
    --border-soft: #edf1f5;
    --text: #17202a;
    --muted: #5f6b7a;
    --muted-strong: #314253;
    --link: #245f80;
    --link-hover: #173f56;
    --nav-bg: #172331;
    --nav-border: rgba(255, 255, 255, .08);
    --brand: #20435c;
    --brand-strong: #163247;
    --accent: #2f7d8c;
    --success: #2f7658;
    --warning: #b2761f;
    --danger: #b33b2e;
    --info: #2f7d8c;
    --success-bg: #e3f2e8;
    --success-text: #25623f;
    --warning-bg: #fff5d8;
    --warning-text: #82620f;
    --danger-bg: #f9ded9;
    --danger-text: #9e2f20;
    --info-bg: #ddeef7;
    --info-text: #23566b;
    --neutral-bg: #e8eef4;
    --neutral-text: #334155;
    --shadow-sm: 0 1px 2px rgba(20, 31, 43, .06);
    --shadow-md: 0 12px 28px rgba(20, 31, 43, .12);
    --focus-ring: rgba(47, 125, 140, .18);
}

[data-bs-theme="dark"] {
    --app-bg: #0f141a;
    --surface: #171f28;
    --surface-muted: #1c2631;
    --surface-subtle: #23303d;
    --surface-hover: #263544;
    --border: #334252;
    --border-soft: #283643;
    --text: #eef4f8;
    --muted: #a9b7c5;
    --muted-strong: #d5e0e8;
    --link: #8fc8e8;
    --link-hover: #b8dff3;
    --nav-bg: #0b1118;
    --nav-border: #203040;
    --brand: #6ea8c7;
    --brand-strong: #91c7df;
    --accent: #6db7bf;
    --success: #7fcaa2;
    --warning: #e1b85f;
    --danger: #e18478;
    --info: #78b9dc;
    --success-bg: rgba(83, 176, 126, .18);
    --success-text: #9dddb9;
    --warning-bg: rgba(225, 184, 95, .18);
    --warning-text: #f0cc7b;
    --danger-bg: rgba(225, 119, 104, .18);
    --danger-text: #f0a096;
    --info-bg: rgba(120, 185, 220, .18);
    --info-text: #a9d6ef;
    --neutral-bg: #263341;
    --neutral-text: #cfdae4;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .32);
    --shadow-md: 0 18px 42px rgba(0, 0, 0, .38);
    --focus-ring: rgba(109, 183, 191, .26);
    --bs-body-bg: var(--app-bg);
    --bs-body-color: var(--text);
    --bs-secondary-color: var(--muted);
    --bs-tertiary-bg: var(--surface-muted);
    --bs-border-color: var(--border);
    color-scheme: dark;
}

html {
    min-height: 100%;
    font-size: 14px;
    scroll-behavior: smooth;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    min-height: 100vh;
    margin: 0;
    background: var(--app-bg);
    color: var(--text);
    font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    font-size: .95rem;
}

.app-header {
    border-bottom: 1px solid var(--nav-border);
}

.app-navbar {
    background: var(--nav-bg);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .18);
}

.app-brand {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-weight: 800;
    letter-spacing: 0;
}

.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 7px;
    background: var(--surface-subtle);
    color: var(--text);
    font-size: .95rem;
}

.navbar-nav {
    gap: .15rem;
}

.navbar-nav .nav-link {
    border-radius: 7px;
    color: rgba(255, 255, 255, .78) !important;
    font-weight: 650;
    padding: .5rem .72rem;
    text-decoration: none !important;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link.active {
    background: rgba(255, 255, 255, .10);
    color: #ffffff !important;
}

.navbar-toggler {
    border-color: rgba(255, 255, 255, .35);
}

.dropdown-menu {
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 16px 34px rgba(20, 31, 43, .16);
    max-height: 72vh;
    overflow-y: auto;
}

.dropdown-item {
    font-size: .92rem;
    color: var(--text);
    text-decoration: none !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--surface-subtle);
    color: var(--brand-strong);
}

.theme-switcher {
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 8px;
    padding: 2px;
    margin: 0 .5rem 0 0;
    background: rgba(255, 255, 255, .08);
}

.viz-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

.viz-panel {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    padding: 14px;
    min-width: 0;
}

.growth-chart-frame {
    width: 100%;
    height: clamp(260px, 36vh, 360px);
    min-height: 0;
}

.growth-chart-frame canvas {
    width: 100% !important;
    height: 100% !important;
}

.viz-title {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    align-items: baseline;
    margin-bottom: 10px;
}

.viz-title span {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 850;
    text-transform: uppercase;
}

.viz-title strong {
    color: var(--text);
    overflow-wrap: anywhere;
}

.viz-meter {
    display: grid;
    gap: 5px;
    margin: 7px 0;
}

.viz-meter-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: var(--muted);
    font-size: .82rem;
}

.viz-track,
.viz-stack {
    width: 100%;
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--surface-subtle);
}

.viz-fill,
.viz-stack span {
    display: block;
    height: 100%;
    min-width: 2px;
    border-radius: inherit;
}

.viz-fill.success,
.viz-stack .success { background: var(--success); }
.viz-fill.info,
.viz-stack .info { background: var(--info); }
.viz-fill.warning,
.viz-stack .warning { background: var(--warning); }
.viz-fill.danger,
.viz-stack .danger { background: var(--danger); }
.viz-fill.neutral,
.viz-stack .neutral { background: #607086; }

.viz-stack {
    display: flex;
}

.viz-stack span {
    border-radius: 0;
}

.viz-stack span:first-child {
    border-radius: 999px 0 0 999px;
}

.viz-stack span:last-child {
    border-radius: 0 999px 999px 0;
}

.viz-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.viz-legend span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--muted);
    font-size: .76rem;
    font-weight: 750;
}

.viz-legend span::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--accent);
}

.viz-legend .success::before { background: var(--success); }
.viz-legend .info::before { background: var(--info); }
.viz-legend .warning::before { background: var(--warning); }
.viz-legend .danger::before { background: var(--danger); }
.viz-legend .neutral::before { background: #607086; }

.viz-bars {
    display: grid;
    gap: 8px;
}

.viz-bar-row {
    display: grid;
    grid-template-columns: minmax(90px, 160px) minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    color: var(--muted);
    font-size: .82rem;
}

.viz-bar-row strong {
    color: var(--text);
    overflow-wrap: anywhere;
}

.ops-controls .form-label,
.server-controls .form-label {
    color: var(--muted-strong);
    font-weight: 700;
    min-height: 1.15rem;
}

.ops-controls .btn[type="submit"],
.server-controls .btn[type="submit"] {
    min-width: 96px;
}

.viz-empty {
    border-radius: 7px;
    background: var(--surface-muted);
    color: var(--muted);
    padding: 16px;
    text-align: center;
}

.viz-gauge {
    width: 112px;
    height: 112px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin: 0 auto;
    background: conic-gradient(var(--accent) calc(var(--value, 0) * 1%), var(--surface-subtle) 0);
}

.viz-gauge > span {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--surface);
    color: var(--text);
    font-weight: 850;
}

.viz-map {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 8px;
}

.viz-map a,
.viz-map div {
    border: 1px solid var(--border-soft);
    border-radius: 7px;
    background: var(--surface-muted);
    padding: 9px 10px;
    text-decoration: none;
}

.viz-map strong,
.viz-map span {
    display: block;
}

.viz-map strong {
    color: var(--text);
}

.viz-map span {
    color: var(--muted);
    font-size: .78rem;
}

@media (max-width: 720px) {
    .viz-bar-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .growth-chart-frame {
        height: 260px;
    }
}

.theme-option {
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: rgba(255, 255, 255, .78);
    font-size: .78rem;
    font-weight: 750;
    padding: .32rem .52rem;
    line-height: 1.1;
}

.theme-option:hover,
.theme-option:focus {
    color: #ffffff;
}

.theme-option.active {
    background: var(--surface);
    color: var(--text);
}

.app-main {
    min-height: calc(100vh - 128px);
}

.app-loading {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(15, 23, 32, .20);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .16s ease, visibility .16s ease;
}

.app-loading.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.app-loading::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 36%;
    background: var(--accent);
    border-radius: 0 999px 999px 0;
    animation: loading-bar 1.1s ease-in-out infinite;
}

.app-loading-panel {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-md);
    padding: .85rem 1rem;
    font-weight: 750;
}

.app-loading-spinner {
    width: 1.3rem;
    height: 1.3rem;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: loading-spin .75s linear infinite;
}

.app-loading-text {
    white-space: nowrap;
}

body.is-loading {
    cursor: progress;
}

body.is-loading a,
body.is-loading button {
    cursor: progress;
}

@keyframes loading-spin {
    to { transform: rotate(360deg); }
}

@keyframes loading-bar {
    0% { transform: translateX(-110%); width: 28%; }
    48% { width: 46%; }
    100% { transform: translateX(360%); width: 28%; }
}

.app-main > .container,
.app-main > .container-fluid {
    max-width: 1500px;
}

.app-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .6rem;
    border-top: 1px solid var(--border);
    background: var(--surface);
    padding: .85rem 1rem;
    font-size: .86rem;
}

a {
    color: var(--link);
    text-decoration: none;
}

a:hover {
    color: var(--link-hover);
    text-decoration: underline;
}

.card {
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    background: var(--surface);
    color: var(--text);
}

.card-header {
    background: var(--surface-muted);
    border-bottom: 1px solid var(--border);
    font-weight: 700;
}

.card-title {
    letter-spacing: 0;
}

.btn {
    border-radius: 7px;
    font-weight: 650;
}

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

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

.btn-outline-secondary {
    border-color: var(--border);
    color: var(--muted-strong);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background: var(--surface-subtle);
    border-color: var(--accent);
    color: var(--text);
}

.form-control,
.form-select {
    border-color: var(--border);
    border-radius: 7px;
    background-color: var(--surface);
    color: var(--text);
}

.form-control:focus,
.form-select:focus,
.btn:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 .18rem var(--focus-ring);
}

.table {
    --bs-table-bg: var(--surface);
    --bs-table-color: var(--text);
    --bs-table-border-color: var(--border);
    --bs-table-striped-bg: var(--surface-muted);
    --bs-table-hover-bg: var(--surface-hover);
    border-color: var(--border);
}

.table thead th {
    background: var(--surface-subtle);
    color: var(--muted-strong);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: 0;
    border-bottom-color: var(--border);
}

[data-bs-theme="dark"] .dropdown-menu,
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .list-group-item,
[data-bs-theme="dark"] .table {
    background-color: var(--surface);
    color: var(--text);
}

[data-bs-theme="dark"] .dropdown-item {
    color: var(--text);
}

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

[data-bs-theme="dark"] .dropdown-menu {
    box-shadow: var(--shadow-md);
}

[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus {
    background: var(--surface-hover);
    color: var(--text);
}

[data-bs-theme="dark"] .form-control::placeholder {
    color: #7f90a1;
}

[data-bs-theme="dark"] .form-control:disabled,
[data-bs-theme="dark"] .form-select:disabled {
    background: #202a35;
    color: #7f90a1;
}

[data-bs-theme="dark"] .btn-primary {
    background: #2f6f8d;
    border-color: #2f6f8d;
    color: #ffffff;
}

[data-bs-theme="dark"] .btn-primary:hover,
[data-bs-theme="dark"] .btn-primary:focus {
    background: #3c86a8;
    border-color: #3c86a8;
    color: #ffffff;
}

[data-bs-theme="dark"] .btn-outline-secondary {
    border-color: var(--border);
    color: var(--muted-strong);
}

[data-bs-theme="dark"] .btn-outline-secondary:hover,
[data-bs-theme="dark"] .btn-outline-secondary:focus {
    background: var(--surface-hover);
    border-color: var(--accent);
    color: var(--text);
}

[data-bs-theme="dark"] .btn-link {
    color: var(--link);
}

[data-bs-theme="dark"] .table > :not(caption) > * > * {
    background-color: transparent;
    color: var(--text);
    border-bottom-color: var(--border-soft);
}

[data-bs-theme="dark"] .table thead th {
    background: var(--surface-subtle);
    color: var(--muted-strong);
}

.table > :not(caption) > * > * {
    padding: .58rem .7rem;
}

.text-primary {
    color: var(--brand) !important;
}

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

.text-warning {
    color: var(--warning) !important;
}

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

.alert {
    border-radius: 8px;
}

.breadcrumb {
    --bs-breadcrumb-divider-color: #8b98a7;
    font-size: .92rem;
}

/* Shared dark-mode polish for legacy page-local styles. */
[data-bs-theme="dark"] .ops-header,
[data-bs-theme="dark"] .server-hero,
[data-bs-theme="dark"] .status-head,
[data-bs-theme="dark"] .incident-head,
[data-bs-theme="dark"] .forecast-head,
[data-bs-theme="dark"] .config-head,
[data-bs-theme="dark"] .content-shell,
[data-bs-theme="dark"] .doc-head {
    border-color: var(--border);
}

[data-bs-theme="dark"] .dash-topbar,
[data-bs-theme="dark"] .ops-controls,
[data-bs-theme="dark"] .ops-kpi,
[data-bs-theme="dark"] .ops-panel,
[data-bs-theme="dark"] .server-controls,
[data-bs-theme="dark"] .server-panel,
[data-bs-theme="dark"] .server-kpi,
[data-bs-theme="dark"] .status-panel,
[data-bs-theme="dark"] .config-panel,
[data-bs-theme="dark"] .content-panel,
[data-bs-theme="dark"] .report-panel,
[data-bs-theme="dark"] .table-panel,
[data-bs-theme="dark"] .doc-panel,
[data-bs-theme="dark"] .incident-state,
[data-bs-theme="dark"] .incident-controls,
[data-bs-theme="dark"] .incident-kpi,
[data-bs-theme="dark"] .incident-panel,
[data-bs-theme="dark"] .incident-insights,
[data-bs-theme="dark"] .forecast-panel,
[data-bs-theme="dark"] .ai-panel,
[data-bs-theme="dark"] .forecast-tools,
[data-bs-theme="dark"] .kpi-tile,
[data-bs-theme="dark"] .priority-item,
[data-bs-theme="dark"] .server-focus,
[data-bs-theme="dark"] .data-quality-banner,
[data-bs-theme="dark"] .config-row-pair,
[data-bs-theme="dark"] .detail-card,
[data-bs-theme="dark"] .report-card {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
    box-shadow: var(--shadow-sm);
}

[data-bs-theme="dark"] .ops-header h1,
[data-bs-theme="dark"] .server-hero h1,
[data-bs-theme="dark"] .status-head h1,
[data-bs-theme="dark"] .incident-head h1,
[data-bs-theme="dark"] .forecast-head h1,
[data-bs-theme="dark"] .config-head h1,
[data-bs-theme="dark"] .doc-head h1,
[data-bs-theme="dark"] .card-title,
[data-bs-theme="dark"] .panel-title strong,
[data-bs-theme="dark"] .section-title strong,
[data-bs-theme="dark"] .ops-card-kicker + .card-title,
[data-bs-theme="dark"] .kpi-compact strong,
[data-bs-theme="dark"] .kpi-tile strong,
[data-bs-theme="dark"] .incident-kpi strong,
[data-bs-theme="dark"] .focus-main strong,
[data-bs-theme="dark"] .priority-item strong,
[data-bs-theme="dark"] .detail-grid strong,
[data-bs-theme="dark"] .incident-detail-grid strong,
[data-bs-theme="dark"] .doc-panel h2 {
    color: var(--text) !important;
}

[data-bs-theme="dark"] .ops-kicker,
[data-bs-theme="dark"] .ops-card-kicker,
[data-bs-theme="dark"] .server-kicker,
[data-bs-theme="dark"] .server-card-kicker,
[data-bs-theme="dark"] .status-kicker,
[data-bs-theme="dark"] .incident-kicker,
[data-bs-theme="dark"] .forecast-kicker,
[data-bs-theme="dark"] .config-kicker,
[data-bs-theme="dark"] .doc-kicker,
[data-bs-theme="dark"] .panel-title span,
[data-bs-theme="dark"] .section-title span,
[data-bs-theme="dark"] .control-field label,
[data-bs-theme="dark"] .tool-field label,
[data-bs-theme="dark"] .kpi-compact span,
[data-bs-theme="dark"] .kpi-compact small,
[data-bs-theme="dark"] .kpi-tile span,
[data-bs-theme="dark"] .kpi-tile small,
[data-bs-theme="dark"] .incident-kpi span,
[data-bs-theme="dark"] .incident-kpi small,
[data-bs-theme="dark"] .priority-meta,
[data-bs-theme="dark"] .focus-main small,
[data-bs-theme="dark"] .focus-main em,
[data-bs-theme="dark"] .doc-panel p,
[data-bs-theme="dark"] .doc-panel li,
[data-bs-theme="dark"] .ops-header p,
[data-bs-theme="dark"] .server-hero p,
[data-bs-theme="dark"] .status-head p,
[data-bs-theme="dark"] .incident-head p,
[data-bs-theme="dark"] .forecast-head p,
[data-bs-theme="dark"] .config-head p {
    color: var(--muted) !important;
}

[data-bs-theme="dark"] .configs-head,
[data-bs-theme="dark"] .reports-shell .sidebar-head,
[data-bs-theme="dark"] .result-summary,
[data-bs-theme="dark"] .detail-head,
[data-bs-theme="dark"] .pagination-host {
    border-color: var(--border) !important;
}

[data-bs-theme="dark"] .configs-summary,
[data-bs-theme="dark"] .configs-toolbar,
[data-bs-theme="dark"] .configs-panel,
[data-bs-theme="dark"] .configs-empty,
[data-bs-theme="dark"] .reports-sidebar,
[data-bs-theme="dark"] .reports-toolbar,
[data-bs-theme="dark"] .filter-panel,
[data-bs-theme="dark"] .result-panel,
[data-bs-theme="dark"] .detail-panel,
[data-bs-theme="dark"] .page-nav {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

[data-bs-theme="dark"] .configs-head h1,
[data-bs-theme="dark"] .configs-summary strong,
[data-bs-theme="dark"] .configs-empty strong,
[data-bs-theme="dark"] .configs-guidance strong,
[data-bs-theme="dark"] .config-description strong,
[data-bs-theme="dark"] .active-title,
[data-bs-theme="dark"] .server-subtitle,
[data-bs-theme="dark"] .object-item,
[data-bs-theme="dark"] .reports-table th,
[data-bs-theme="dark"] .reports-table td,
[data-bs-theme="dark"] .detail-value,
[data-bs-theme="dark"] .detail-row pre,
[data-bs-theme="dark"] .detail-head h3,
[data-bs-theme="dark"] .status-summary strong {
    color: var(--text) !important;
}

[data-bs-theme="dark"] .configs-kicker,
[data-bs-theme="dark"] .configs-head p,
[data-bs-theme="dark"] .configs-summary span,
[data-bs-theme="dark"] .configs-summary small,
[data-bs-theme="dark"] .config-search span,
[data-bs-theme="dark"] .config-description span,
[data-bs-theme="dark"] .server-picker label,
[data-bs-theme="dark"] .config-search label,
[data-bs-theme="dark"] .server-label,
[data-bs-theme="dark"] .object-section-title,
[data-bs-theme="dark"] .object-meta,
[data-bs-theme="dark"] .active-object-name,
[data-bs-theme="dark"] .filter-field label,
[data-bs-theme="dark"] .loading-row,
[data-bs-theme="dark"] .detail-kicker,
[data-bs-theme="dark"] .detail-label,
[data-bs-theme="dark"] .detail-label small,
[data-bs-theme="dark"] .status-summary {
    color: var(--muted) !important;
}

[data-bs-theme="dark"] .configs-guidance {
    background: var(--warning-bg) !important;
    color: var(--warning-text) !important;
    border-color: rgba(225, 184, 95, .42) !important;
}

[data-bs-theme="dark"] .configs-table-wrap,
[data-bs-theme="dark"] .reports-table td,
[data-bs-theme="dark"] .detail-row,
[data-bs-theme="dark"] .detail-row pre {
    border-color: var(--border-soft) !important;
}

[data-bs-theme="dark"] .configs-table thead th,
[data-bs-theme="dark"] .configs-table thead .config-name-col,
[data-bs-theme="dark"] .configs-table thead .config-action-col,
[data-bs-theme="dark"] .reports-table th,
[data-bs-theme="dark"] .reports-table th.sorted,
[data-bs-theme="dark"] .description-row td,
[data-bs-theme="dark"] .config-name-col,
[data-bs-theme="dark"] .config-action-col {
    background: var(--surface-subtle) !important;
    color: var(--muted-strong) !important;
    border-color: var(--border) !important;
}

[data-bs-theme="dark"] .config-description,
[data-bs-theme="dark"] .detail-row pre,
[data-bs-theme="dark"] .result-summary span,
[data-bs-theme="dark"] .object-count,
[data-bs-theme="dark"] .page-nav:disabled {
    background: var(--surface-muted) !important;
    color: var(--muted-strong) !important;
    border-color: var(--border-soft) !important;
}

[data-bs-theme="dark"] .result-summary strong {
    background: var(--success-bg) !important;
    color: var(--success-text) !important;
}

[data-bs-theme="dark"] .readonly-field,
[data-bs-theme="dark"] .page-nav {
    background: var(--surface-muted) !important;
    color: var(--muted) !important;
    border-color: var(--border) !important;
}

[data-bs-theme="dark"] .object-item:hover,
[data-bs-theme="dark"] .object-item.active,
[data-bs-theme="dark"] .data-row:hover td,
[data-bs-theme="dark"] .reports-table tbody tr:hover,
[data-bs-theme="dark"] .reports-table tbody tr.selected,
[data-bs-theme="dark"] .page-nav:hover:not(:disabled),
[data-bs-theme="dark"] .page-nav.active {
    background: rgba(109, 183, 191, .16) !important;
    color: var(--text) !important;
    border-color: var(--accent) !important;
}

[data-bs-theme="dark"] .priority-item.critical,
[data-bs-theme="dark"] .empty-warning,
[data-bs-theme="dark"] .data-quality-banner.warning,
[data-bs-theme="dark"] .warning-panel {
    background: var(--warning-bg) !important;
    border-color: rgba(225, 184, 95, .42) !important;
    color: var(--warning-text) !important;
}

[data-bs-theme="dark"] .priority-item.watch,
[data-bs-theme="dark"] .ai-insight,
[data-bs-theme="dark"] .insight-item,
[data-bs-theme="dark"] .model-notes b,
[data-bs-theme="dark"] .empty-state,
[data-bs-theme="dark"] .empty-incident,
[data-bs-theme="dark"] .empty-forecast,
[data-bs-theme="dark"] .incident-detail-grid pre,
[data-bs-theme="dark"] .mini-bar,
[data-bs-theme="dark"] .metric-pill,
[data-bs-theme="dark"] .pill,
[data-bs-theme="dark"] .source-chip,
[data-bs-theme="dark"] .status-chip,
[data-bs-theme="dark"] .chip,
[data-bs-theme="dark"] .state-pill,
[data-bs-theme="dark"] .state {
    background: var(--surface-muted) !important;
    color: var(--muted-strong) !important;
    border-color: var(--border-soft) !important;
}

[data-bs-theme="dark"] .source-chip.offline,
[data-bs-theme="dark"] .status-chip.bad,
[data-bs-theme="dark"] .chip.bad,
[data-bs-theme="dark"] .state-pill.watch,
[data-bs-theme="dark"] .state.watch,
[data-bs-theme="dark"] .risk-pill.high,
[data-bs-theme="dark"] .risk-pill.warning,
[data-bs-theme="dark"] .risk-chip.high,
[data-bs-theme="dark"] .risk-chip.warning,
[data-bs-theme="dark"] .detail-score.high,
[data-bs-theme="dark"] .detail-score.warning {
    background: var(--warning-bg) !important;
    color: var(--warning-text) !important;
}

[data-bs-theme="dark"] .state-pill.action-required,
[data-bs-theme="dark"] .state.action-required,
[data-bs-theme="dark"] .status-pill.fail,
[data-bs-theme="dark"] .risk-pill.critical,
[data-bs-theme="dark"] .risk-chip.critical,
[data-bs-theme="dark"] .detail-score.critical {
    background: var(--danger-bg) !important;
    color: var(--danger-text) !important;
}

[data-bs-theme="dark"] .state-pill,
[data-bs-theme="dark"] .status-pill.ok,
[data-bs-theme="dark"] .risk-pill.stable,
[data-bs-theme="dark"] .confidence.high,
[data-bs-theme="dark"] .category-chip.backup,
[data-bs-theme="dark"] .source-chip:not(.offline),
[data-bs-theme="dark"] .status-chip:not(.bad),
[data-bs-theme="dark"] .chip:not(.bad) {
    background: var(--success-bg) !important;
    color: var(--success-text) !important;
}

[data-bs-theme="dark"] .risk-pill.watch,
[data-bs-theme="dark"] .risk-chip.watch,
[data-bs-theme="dark"] .risk-chip.info,
[data-bs-theme="dark"] .confidence.medium,
[data-bs-theme="dark"] .detail-score.watch,
[data-bs-theme="dark"] .detail-score.info,
[data-bs-theme="dark"] .category-chip.runtime,
[data-bs-theme="dark"] .category-chip.tempdb,
[data-bs-theme="dark"] .category-chip.queries,
[data-bs-theme="dark"] .category-chip.connectivity {
    background: var(--info-bg) !important;
    color: var(--info-text) !important;
}

[data-bs-theme="dark"] .category-chip.agent,
[data-bs-theme="dark"] .category-chip.health,
[data-bs-theme="dark"] .category-chip.security,
[data-bs-theme="dark"] .category-chip.telemetry,
[data-bs-theme="dark"] .confidence.low {
    background: var(--neutral-bg) !important;
    color: var(--neutral-text) !important;
}

[data-bs-theme="dark"] .category-chip.concurrency {
    background: var(--danger-bg) !important;
    color: var(--danger-text) !important;
}

[data-bs-theme="dark"] .table-responsive,
[data-bs-theme="dark"] .forecast-table-wrap,
[data-bs-theme="dark"] .incident-table-wrap,
[data-bs-theme="dark"] .status-table-wrap,
[data-bs-theme="dark"] .content-table-wrap {
    border-color: var(--border-soft) !important;
    background: var(--surface) !important;
}

[data-bs-theme="dark"] tbody tr:hover,
[data-bs-theme="dark"] .server-focus:hover,
[data-bs-theme="dark"] .server-focus:focus,
[data-bs-theme="dark"] .forecast-table tbody tr.selected,
[data-bs-theme="dark"] .incident-table tbody tr.selected {
    background: rgba(109, 183, 191, .14) !important;
}

[data-bs-theme="dark"] code,
[data-bs-theme="dark"] pre,
[data-bs-theme="dark"] .form-text {
    color: var(--muted-strong);
}

[data-bs-theme="dark"] .alert-light,
[data-bs-theme="dark"] .alert-secondary {
    background: var(--surface-muted);
    border-color: var(--border);
    color: var(--text);
}

[data-bs-theme="dark"] .alert-warning {
    background: var(--warning-bg);
    border-color: rgba(225, 184, 95, .42);
    color: var(--warning-text);
}

[data-bs-theme="dark"] .alert-danger {
    background: var(--danger-bg);
    border-color: rgba(225, 119, 104, .42);
    color: var(--danger-text);
}

[data-bs-theme="dark"] .alert-success {
    background: var(--success-bg);
    border-color: rgba(83, 176, 126, .42);
    color: var(--success-text);
}

@media (max-width: 767.98px) {
    .app-main {
        padding-left: .75rem !important;
        padding-right: .75rem !important;
    }

    .app-brand {
        min-width: 0;
    }

    .app-brand span:last-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .navbar-nav .nav-link {
        padding: .55rem .65rem;
    }

    .theme-switcher {
        width: 100%;
        margin: .25rem 0 .5rem;
    }
}

/* Responsive workspace tuning for monitoring pages. */
.app-main > .container,
.app-main > .container-fluid {
    width: min(100%, 1680px);
}

.viz-grid {
    gap: clamp(8px, 1vw, 12px);
}

.viz-panel {
    padding: clamp(10px, 1vw, 14px);
}

.growth-chart-frame {
    height: clamp(220px, 30vh, 320px);
}

.table-responsive,
.forecast-table-wrap,
.incident-table-wrap,
.status-table-wrap,
.content-table-wrap {
    scrollbar-width: thin;
}

@media (min-width: 768px) and (max-width: 1399.98px) {
    .viz-title {
        margin-bottom: 8px;
    }

    .viz-bars {
        gap: 6px;
    }

    .viz-bar-row {
        gap: 7px;
        font-size: .8rem;
    }

    .viz-gauge {
        width: 96px;
        height: 96px;
    }

    .viz-gauge > span {
        width: 64px;
        height: 64px;
    }

    .growth-chart-frame {
        height: clamp(210px, 28vh, 290px);
    }
}

@media (min-width: 1400px) {
    .growth-chart-frame {
        height: clamp(240px, 30vh, 340px);
    }
}

@media (max-width: 767.98px) {
    body {
        font-size: .92rem;
    }

    .app-main {
        padding-top: .85rem !important;
    }

    .ops-shell,
    .server-shell {
        padding-top: .75rem !important;
    }

    .ops-header,
    .server-hero {
        gap: 10px;
        margin-bottom: 10px;
        padding-bottom: 10px;
    }

    .ops-header h1,
    .server-hero h1 {
        font-size: 1.45rem !important;
        line-height: 1.2;
    }

    .ops-state,
    .server-hero > .text-end {
        width: 100%;
        text-align: left !important;
    }

    .ops-controls .btn[type="submit"],
    .server-controls .btn[type="submit"] {
        width: 100%;
    }

    .priority-item {
        grid-template-columns: 1fr !important;
    }

    .data-quality-banner .d-flex,
    .dash-topbar .d-flex {
        align-items: flex-start !important;
    }

    .viz-grid {
        grid-template-columns: 1fr;
    }

    .viz-panel {
        padding: 10px;
    }

    .growth-chart-frame {
        height: 230px;
    }

    .table > :not(caption) > * > * {
        padding: .48rem .55rem;
    }

    .card,
    .viz-panel,
    .status-panel,
    .forecast-panel,
    .incident-panel,
    .report-panel,
    .table-panel {
        border-radius: 8px;
    }
}