:root {
    --app-bg: #f4f6f8;
    --surface: #ffffff;
    --surface-elevated: #ffffff;
    --surface-muted: #f8fafc;
    --surface-subtle: #eef3f7;
    --surface-hover: #f3f7fa;
    --control-bg: #ffffff;
    --border: #d9e0e8;
    --border-strong: #c6d0da;
    --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);
}

/* Theme integrity layer.
   Keeps legacy page-local colours from breaking contrast and gives every
   interactive surface a clear, consistent elevation in light and dark mode. */
.app-main :where(
    .card,
    .viz-panel,
    .ops-panel,
    .server-panel,
    .forecast-panel,
    .ai-panel,
    .incident-panel,
    .incident-insights,
    .status-panel,
    .content-panel,
    .report-panel,
    .table-panel,
    .dbhealth-panel,
    .configs-panel,
    .reports-sidebar,
    .reports-toolbar,
    .filter-panel,
    .result-panel,
    .detail-panel,
    .quality-panel,
    .workload-panel,
    .recommendation-panel,
    .sqljobs-panel,
    .license-db-panel,
    .license-renewal,
    .server-job-card,
    .metric-tile,
    .kpi-tile,
    .detail-card,
    .report-card,
    .story-card,
    .section-box
) {
    background-color: var(--surface-elevated);
    color: var(--text);
}

.viz-panel {
    background: var(--surface-elevated);
}

.app-main :where(.form-control, .form-select) {
    border-color: var(--border-strong);
    background-color: var(--control-bg);
    color: var(--text);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface-elevated) 65%, transparent);
}

.app-main :where(.form-control, .form-select):hover:not(:disabled):not(:focus) {
    border-color: color-mix(in srgb, var(--accent) 44%, var(--border-strong));
}

.app-main :where(.form-label, label, legend) {
    color: var(--muted-strong);
}

[data-bs-theme="dark"] body {
    background:
        radial-gradient(circle at 18% -20%, rgba(70, 130, 155, .10), transparent 34rem),
        var(--app-bg);
}

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

[data-bs-theme="dark"] :where(.card-header, .card-footer, .modal-header, .modal-footer, .offcanvas-header) {
    background-color: var(--surface-muted);
    border-color: var(--border);
    color: var(--text);
}

[data-bs-theme="dark"] .app-main :where(
    .card,
    .viz-panel,
    .ops-controls,
    .ops-kpi,
    .ops-panel,
    .server-controls,
    .server-panel,
    .server-kpi,
    .status-panel,
    .config-panel,
    .content-panel,
    .report-panel,
    .table-panel,
    .doc-panel,
    .incident-state,
    .incident-controls,
    .incident-kpi,
    .incident-panel,
    .incident-insights,
    .forecast-panel,
    .ai-panel,
    .forecast-tools,
    .kpi-tile,
    .server-focus,
    .config-row-pair,
    .detail-card,
    .report-card,
    .dash-topbar,
    .reports-sidebar,
    .reports-toolbar,
    .filter-panel,
    .result-panel,
    .detail-panel
) {
    background: var(--surface-elevated) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .16), inset 0 1px 0 rgba(255, 255, 255, .025) !important;
}

[data-bs-theme="dark"] .app-main :where(.ops-filter-field > span, .form-label, .control-field label, .tool-field label) {
    color: var(--muted-strong) !important;
}

[data-bs-theme="dark"] .app-main :where(.ops-header h1, .server-hero h1, .card-title, .dashboard-quick-title, .kpi-value) {
    color: var(--text) !important;
}

[data-bs-theme="dark"] .app-main :where(.kpi-label, .priority-meta, .ops-fast-link span) {
    color: var(--muted) !important;
}

[data-bs-theme="dark"] .app-main :where(.ops-load-mode, .ops-hero-metric, .ops-fast-link, .priority-item) {
    background: var(--surface-elevated) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

[data-bs-theme="dark"] .app-main :where(
    .queue-tools,
    .war-card,
    .causal-card,
    .escalation-chip,
    .muted-panel,
    .gap-list > div,
    .war-results > div,
    .playbook-grid > div,
    .incident-action-strip,
    .incident-detail-grid > div
) {
    background: var(--surface-elevated) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

[data-bs-theme="dark"] .app-main :where(
    .war-results,
    .playbook-grid,
    .incident-action-strip,
    .incident-detail-grid,
    .causal-card,
    .escalation-chip,
    .server-focus
) :where(strong, p) {
    color: var(--text) !important;
}

[data-bs-theme="dark"] .app-main .ai-insight :where(span, strong, p),
[data-bs-theme="dark"] .app-main .incident-tech-detail summary {
    color: var(--muted-strong) !important;
}

[data-bs-theme="dark"] .app-main .ai-insight p {
    color: var(--text) !important;
}

[data-bs-theme="dark"] .app-main :where(
    .map-title,
    .war-results,
    .playbook-grid,
    .incident-action-strip,
    .incident-detail-grid,
    .causal-card,
    .escalation-chip,
    .queue-counter
) :where(span, small, em, summary),
[data-bs-theme="dark"] .app-main .queue-counter {
    color: var(--muted) !important;
}

[data-bs-theme="dark"] .app-main .horizon-grid .now {
    background: var(--danger-bg) !important;
    border-color: rgba(225, 119, 104, .40) !important;
}

[data-bs-theme="dark"] .app-main .horizon-grid .today {
    background: var(--warning-bg) !important;
    border-color: rgba(225, 184, 95, .40) !important;
}

[data-bs-theme="dark"] .app-main .horizon-grid .later {
    background: var(--neutral-bg) !important;
    border-color: var(--border) !important;
}

[data-bs-theme="dark"] .app-main .horizon-grid :where(.now, .today, .later) :where(strong, span) {
    color: var(--text) !important;
}

[data-bs-theme="dark"] .app-main .restore-chain > div:nth-child(2) {
    background: var(--danger-bg) !important;
    color: var(--danger-text) !important;
}

[data-bs-theme="dark"] .app-main .restore-chain > div:nth-child(3) {
    background: var(--warning-bg) !important;
    color: var(--warning-text) !important;
}

[data-bs-theme="dark"] .app-main .restore-chain > div:nth-child(2) :where(strong, span) {
    color: var(--danger-text) !important;
}

[data-bs-theme="dark"] .app-main .restore-chain > div:nth-child(3) :where(strong, span) {
    color: var(--warning-text) !important;
}

[data-bs-theme="dark"] .app-main .quality-playbook article > span {
    color: #071c23 !important;
}

[data-bs-theme="dark"] .btn-outline-primary {
    border-color: #65a9cf !important;
    color: #a9d8f1 !important;
}

[data-bs-theme="dark"] .btn-outline-primary:hover,
[data-bs-theme="dark"] .btn-outline-primary:focus {
    border-color: #8fc8e8 !important;
    background: rgba(120, 185, 220, .18) !important;
    color: #d9f0fb !important;
}

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

[data-bs-theme="dark"] .app-main :where(.ops-load-mode, .data-quality-banner) {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}

[data-bs-theme="dark"] .app-main :where(.ops-load-mode strong, .ops-hero-metric strong, .ops-fast-link strong) {
    color: var(--text) !important;
}

[data-bs-theme="dark"] .app-main :where(.ops-load-mode span, .ops-hero-metric span) {
    color: var(--muted) !important;
}

[data-bs-theme="dark"] .app-main .priority-item.critical {
    background: var(--danger-bg) !important;
    border-color: rgba(225, 119, 104, .44) !important;
    border-left-color: var(--danger) !important;
    color: var(--danger-text) !important;
}

[data-bs-theme="dark"] .app-main .priority-item.watch {
    background: var(--info-bg) !important;
    border-color: rgba(120, 185, 220, .40) !important;
    border-left-color: var(--info) !important;
    color: var(--info-text) !important;
}

[data-bs-theme="dark"] :where(.form-control, .form-select, .input-group-text) {
    border-color: var(--border-strong);
    background-color: var(--control-bg);
    color: var(--text);
}

[data-bs-theme="dark"] :where(.form-control, .form-select):focus {
    border-color: var(--accent);
    background-color: color-mix(in srgb, var(--control-bg) 88%, var(--accent));
    color: var(--text);
}

[data-bs-theme="dark"] .form-select option {
    background: var(--surface-elevated);
    color: var(--text);
}

[data-bs-theme="dark"] :where(.form-check-input, .form-range::-webkit-slider-runnable-track) {
    border-color: var(--border-strong);
    background-color: var(--control-bg);
}

[data-bs-theme="dark"] :where(.accordion-item, .accordion-button, .nav-tabs .nav-link, .page-link) {
    border-color: var(--border);
    background-color: var(--surface-elevated);
    color: var(--text);
}

[data-bs-theme="dark"] :where(.accordion-button:not(.collapsed), .nav-tabs .nav-link.active, .page-link:hover) {
    background-color: var(--surface-hover);
    color: var(--text);
}

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

[data-bs-theme="dark"] .table {
    --bs-table-bg: var(--surface-elevated);
    --bs-table-striped-bg: var(--surface-muted);
    --bs-table-hover-bg: var(--surface-hover);
    --bs-table-active-bg: var(--surface-hover);
}

@media (max-width: 767.98px) {
    .app-main :where(.card, .viz-panel, .ops-controls, .ops-panel, .server-panel, .table-panel) {
        box-shadow: var(--shadow-sm);
    }

    .app-main :where(.form-control, .form-select, .btn) {
        min-height: 42px;
    }
}

[data-bs-theme="dark"] {
    --app-bg: #0c1218;
    --surface: #17222c;
    --surface-elevated: #1c2935;
    --surface-muted: #202e3a;
    --surface-subtle: #283947;
    --surface-hover: #2d4050;
    --control-bg: #15202a;
    --border: #3a4f61;
    --border-strong: #4b6275;
    --border-soft: #2f4050;
    --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;
}

.skip-link {
    position: fixed;
    top: .75rem;
    left: .75rem;
    z-index: 3000;
    transform: translateY(-160%);
    border-radius: 7px;
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-md);
    padding: .55rem .8rem;
    font-weight: 750;
}

.skip-link:focus {
    transform: translateY(0);
}

::selection {
    background: rgba(47, 125, 140, .22);
}

.app-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    border-bottom: 1px solid var(--nav-border);
    background: color-mix(in srgb, var(--nav-bg) 94%, transparent);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .025);
    backdrop-filter: blur(18px) saturate(135%);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
    transition: box-shadow .2s ease, background-color .2s ease;
}

.app-header.is-scrolled {
    background: color-mix(in srgb, var(--nav-bg) 98%, transparent);
    box-shadow: 0 14px 38px rgba(5, 12, 20, .26);
}

.app-navbar {
    min-height: 70px;
    background:
        radial-gradient(circle at 12% -80%, rgba(66, 166, 180, .22), transparent 42%),
        transparent;
}

.app-brand {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: .7rem;
    margin-right: 1.25rem;
    padding: .35rem 0;
    letter-spacing: 0;
    text-decoration: none !important;
}

.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 39px;
    height: 39px;
    border: 1px solid rgba(137, 221, 225, .36);
    border-radius: 12px;
    background: linear-gradient(145deg, #3b97a5, #24586f);
    color: #ffffff;
    box-shadow: 0 7px 18px rgba(7, 19, 28, .3), inset 0 1px 0 rgba(255, 255, 255, .24);
    font-size: 1rem;
    font-weight: 850;
    letter-spacing: -.02em;
    transition: transform .2s ease, box-shadow .2s ease;
}

.app-brand:hover .brand-mark,
.app-brand:focus-visible .brand-mark {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(7, 19, 28, .38), inset 0 1px 0 rgba(255, 255, 255, .28);
}

.brand-copy,
.brand-name,
.brand-product {
    display: block;
    min-width: 0;
}

.brand-copy {
    line-height: 1.08;
}

.brand-name {
    max-width: 12rem;
    overflow: hidden;
    color: #ffffff;
    font-size: .96rem;
    font-weight: 800;
    letter-spacing: -.012em;
    text-overflow: ellipsis;
}

.brand-product {
    margin-top: .22rem;
    color: rgba(216, 233, 240, .62);
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .075em;
    text-transform: uppercase;
}

.app-navbar-collapse {
    min-width: 0;
}

.mobile-nav-heading {
    display: none;
}

.app-primary-nav {
    align-items: center;
    gap: .12rem;
    min-width: 0;
}

.app-navbar .navbar-nav .nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: .42rem;
    min-height: 42px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: rgba(225, 236, 242, .76) !important;
    font-size: .82rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .006em;
    padding: .55rem .62rem;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}

.app-navbar .navbar-nav .nav-link:hover,
.app-navbar .navbar-nav .nav-link:focus-visible {
    border-color: rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .075);
    color: #ffffff !important;
}

.app-navbar .navbar-nav .nav-link.active {
    border-color: rgba(101, 194, 202, .16);
    background: linear-gradient(180deg, rgba(83, 174, 185, .17), rgba(64, 138, 153, .11));
    color: #ffffff !important;
    box-shadow: inset 0 -2px 0 rgba(99, 202, 209, .72);
}

.nav-link-icon,
.quick-nav-button svg,
.nav-contact-link svg {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.app-navbar .dropdown-toggle::after {
    width: .42rem;
    height: .42rem;
    margin: -.18rem 0 0 .05rem;
    border: 0;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    opacity: .7;
    transform: rotate(45deg);
    transition: transform .16s ease, margin-top .16s ease;
}

.app-navbar .dropdown-toggle.show::after {
    margin-top: .12rem;
    transform: rotate(225deg);
}

.app-navbar .navbar-nav .login-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    border: 1px solid rgba(255, 255, 255, .56);
    border-radius: 10px;
    background: #ffffff;
    color: var(--nav-bg) !important;
    font-weight: 800;
    box-shadow: 0 7px 18px rgba(0, 0, 0, .18);
}

.app-navbar .navbar-nav .login-cta:hover,
.app-navbar .navbar-nav .login-cta:focus-visible {
    border-color: #ffffff;
    background: #f0f6f8;
    color: #172331 !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .13), 0 10px 22px rgba(0, 0, 0, .24);
}

.app-menu-toggle {
    align-items: center;
    gap: .55rem;
    min-height: 42px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 11px;
    background: rgba(255, 255, 255, .07);
    color: #ffffff;
    padding: .5rem .68rem;
    box-shadow: none !important;
}

.app-menu-toggle:hover,
.app-menu-toggle:focus-visible,
.app-menu-toggle[aria-expanded="true"] {
    border-color: rgba(118, 207, 214, .36);
    background: rgba(77, 166, 178, .16);
}

.app-menu-icon {
    position: relative;
    display: block;
    width: 19px;
    height: 14px;
}

.app-menu-icon > span {
    position: absolute;
    left: 0;
    display: block;
    width: 19px;
    height: 1.5px;
    border-radius: 999px;
    background: currentColor;
    transition: top .18s ease, transform .18s ease, opacity .12s ease;
}

.app-menu-icon > span:nth-child(1) { top: 0; }
.app-menu-icon > span:nth-child(2) { top: 6px; }
.app-menu-icon > span:nth-child(3) { top: 12px; }

.app-menu-toggle[aria-expanded="true"] .app-menu-icon > span:nth-child(1) {
    top: 6px;
    transform: rotate(45deg);
}

.app-menu-toggle[aria-expanded="true"] .app-menu-icon > span:nth-child(2) {
    opacity: 0;
}

.app-menu-toggle[aria-expanded="true"] .app-menu-icon > span:nth-child(3) {
    top: 6px;
    transform: rotate(-45deg);
}

.app-menu-label {
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .025em;
}

.menu-label-close {
    display: none;
}

.app-menu-toggle[aria-expanded="true"] .menu-label-open {
    display: none;
}

.app-menu-toggle[aria-expanded="true"] .menu-label-close {
    display: inline;
}

.app-navbar .app-dropdown-menu {
    min-width: 18rem;
    max-width: min(23rem, calc(100vw - 2rem));
    margin-top: .55rem;
    border: 1px solid rgba(137, 159, 177, .24);
    border-radius: 15px;
    background: color-mix(in srgb, var(--surface) 97%, transparent);
    padding: .48rem;
    box-shadow: 0 22px 52px rgba(8, 17, 26, .22), 0 2px 8px rgba(8, 17, 26, .1);
    max-height: 72vh;
    overflow-y: auto;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.dropdown-menu-heading {
    display: flex;
    flex-direction: column;
    gap: .16rem;
    margin: .05rem .08rem .35rem;
    border-bottom: 1px solid var(--border-soft);
    padding: .55rem .68rem .65rem;
}

.dropdown-menu-heading > span {
    color: var(--text);
    font-size: .79rem;
    font-weight: 800;
    letter-spacing: .025em;
}

.dropdown-menu-heading > small {
    color: var(--muted);
    font-size: .7rem;
    line-height: 1.35;
}

.app-navbar .dropdown-item {
    position: relative;
    border: 1px solid transparent;
    border-radius: 9px;
    padding: .62rem .75rem .62rem .82rem;
    font-size: .875rem;
    font-weight: 650;
    line-height: 1.3;
    color: var(--text);
    text-decoration: none !important;
    overflow-wrap: anywhere;
    white-space: normal;
    transition: background-color .14s ease, border-color .14s ease, color .14s ease, transform .14s ease;
}

.app-navbar .dropdown-divider {
    margin: .35rem .2rem;
    border-color: var(--border-soft);
}

.app-navbar .dropdown-item:hover,
.app-navbar .dropdown-item:focus {
    border-color: color-mix(in srgb, var(--accent) 17%, transparent);
    background: color-mix(in srgb, var(--accent) 8%, var(--surface));
    color: var(--brand-strong);
    transform: translateX(2px);
}

.app-navbar .dropdown-item.active,
.app-navbar .dropdown-item:active {
    border-color: color-mix(in srgb, var(--accent) 24%, transparent);
    background: color-mix(in srgb, var(--accent) 12%, var(--surface)) !important;
    color: var(--brand-strong) !important;
    font-weight: 750;
}

.app-navbar .dropdown-item.active::before {
    content: "";
    position: absolute;
    top: 50%;
    left: .22rem;
    width: 3px;
    height: 18px;
    border-radius: 99px;
    background: var(--accent);
    transform: translateY(-50%);
}

.app-nav-utilities {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: .4rem;
    margin-left: .65rem;
}

.theme-switcher {
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    align-items: center;
    min-height: 38px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 10px;
    padding: 2px;
    margin: 0;
    background: rgba(255, 255, 255, .055);
}

.quick-nav-button,
.nav-contact-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    justify-content: center;
    min-height: 38px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 10px;
    background: rgba(255, 255, 255, .055);
    color: rgba(229, 239, 244, .82);
    font-size: .78rem;
    font-weight: 750;
    line-height: 1;
    padding: .42rem .58rem;
    margin: 0;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}

.quick-nav-button:hover,
.quick-nav-button:focus-visible,
.nav-contact-link:hover,
.nav-contact-link:focus-visible {
    border-color: rgba(124, 204, 212, .28);
    background: rgba(255, 255, 255, .1);
    color: #ffffff;
}

.nav-contact-link {
    border-color: rgba(83, 185, 195, .3);
    background: rgba(54, 151, 163, .14);
    color: #dffbfc;
}

.external-link-mark {
    margin-left: -.18rem;
    opacity: .65;
    font-size: .72rem;
    transform: translateY(-.16rem);
}

.app-account-nav {
    flex: 0 0 auto;
}

.app-navbar .account-menu-toggle {
    gap: .48rem;
    padding-right: .58rem;
}

.account-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    border: 1px solid rgba(137, 221, 225, .34);
    border-radius: 9px;
    background: linear-gradient(145deg, rgba(59, 151, 165, .8), rgba(36, 88, 111, .92));
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
    font-size: .72rem;
    font-weight: 850;
    line-height: 1;
}

.account-menu-label {
    font-size: .8rem;
    font-weight: 750;
}

.app-navbar .account-dropdown-menu {
    min-width: 19rem;
}

.account-menu-summary {
    display: flex;
    flex-direction: column;
    gap: .28rem;
    margin: .05rem .08rem .4rem;
    border-bottom: 1px solid var(--border-soft);
    padding: .62rem .68rem .72rem;
    color: var(--text);
}

.account-company {
    color: var(--brand-strong);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.account-menu-summary > strong {
    overflow-wrap: anywhere;
    font-size: .88rem;
    line-height: 1.3;
}

.account-role-list {
    display: flex;
    flex-wrap: wrap;
    gap: .28rem;
}

.account-role-badge {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--border));
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 9%, var(--surface));
    color: var(--brand-strong);
    font-size: .67rem;
    font-weight: 800;
    line-height: 1;
    padding: .24rem .48rem;
}

.account-logout-form {
    margin: 0;
}

.app-navbar .account-logout-item {
    color: var(--danger-text);
}

.quick-nav-button kbd {
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 5px;
    background: rgba(255, 255, 255, .12);
    box-shadow: none;
    color: rgba(255, 255, 255, .76);
    font-size: .68rem;
    font-weight: 800;
    padding: .12rem .28rem;
}

@media (min-width: 1200px) {
    .app-navbar .app-dropdown-menu-wide {
        min-width: 34rem;
    }

    .app-navbar .app-dropdown-menu-wide.show {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: .3rem;
    }

    .app-dropdown-menu-wide .dropdown-menu-heading {
        grid-column: 1 / -1;
    }

    .app-navbar .navbar-nav.ms-auto {
        gap: .12rem;
    }
}

.form-has-changes {
    border-color: rgba(47, 125, 140, .42) !important;
    box-shadow: 0 0 0 .16rem var(--focus-ring);
}

.has-pending-filter {
    position: relative;
}

.has-pending-filter::after {
    content: "";
    position: absolute;
    top: 5px;
    right: 5px;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--warning);
    box-shadow: 0 0 0 2px var(--surface);
}

.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;
    box-shadow: var(--shadow-sm);
}

.smart-guidance {
    display: grid;
    gap: 7px;
    margin-top: 8px;
    padding: 9px 10px;
    border: 1px solid var(--border-soft);
    border-left: 4px solid var(--accent);
    border-radius: 7px;
    background: var(--surface-muted);
    color: var(--text);
}

.smart-guidance.compact {
    gap: 5px;
    padding: 8px 9px;
}

.smart-guidance-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.smart-guidance span {
    display: block;
    color: var(--muted);
    font-size: .7rem;
    font-weight: 850;
    text-transform: uppercase;
}

.smart-guidance strong {
    color: var(--text);
}

.smart-guidance p {
    margin: 0;
    color: var(--text);
    font-size: .82rem;
    line-height: 1.35;
}

.smart-guidance .smart-guidance-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
}

.smart-guidance .smart-guidance-actions form {
    margin: 0;
}

.report-guidance {
    grid-template-columns: 1fr;
}

.report-guidance > div {
    border-bottom: 1px solid var(--border-soft);
    padding-bottom: 7px;
}

.report-guidance > div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

@media (max-width: 760px) {
    .smart-guidance-grid {
        grid-template-columns: 1fr;
    }
}

.growth-chart-frame {
    width: 100%;
    height: var(--growth-chart-height, clamp(260px, 36vh, 360px));
    min-height: 0;
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(47, 125, 140, .05), transparent 42%),
        var(--surface);
    padding: 10px 12px 8px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55);
}

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

.growth-workspace {
    display: grid;
    gap: 12px;
}

.growth-command-panel {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(120px, 150px) minmax(130px, 160px) minmax(130px, 160px);
    gap: 10px;
    align-items: end;
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    background: var(--surface-muted);
    padding: 10px;
}

.growth-command-panel label,
.growth-series-panel > label {
    display: block;
    margin-bottom: 4px;
    color: var(--muted-strong);
    font-size: .72rem;
    font-weight: 850;
    text-transform: uppercase;
}

.growth-overview {
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    background: var(--surface);
    padding: 10px;
}

.growth-overview-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: baseline;
    margin-bottom: 9px;
}

.growth-overview-head span {
    display: block;
    color: var(--muted);
    font-size: .7rem;
    font-weight: 850;
    text-transform: uppercase;
}

.growth-overview-head strong {
    color: var(--text);
}

.growth-overview-head small {
    color: var(--muted);
    font-weight: 700;
}

.growth-overview-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
}

.growth-pick-card {
    display: grid;
    gap: 3px;
    min-height: 104px;
    border: 1px solid var(--border-soft);
    border-left: 4px solid var(--accent);
    border-radius: 8px;
    background: var(--surface-muted);
    color: var(--text);
    text-align: left;
    padding: 9px 10px;
}

.growth-pick-card:hover,
.growth-pick-card:focus,
.growth-pick-card.active {
    border-color: var(--accent);
    background: var(--surface-hover);
    box-shadow: 0 0 0 .18rem var(--focus-ring);
}

.growth-pick-card.down {
    border-left-color: var(--success);
}

.growth-pick-card span {
    color: var(--muted);
    font-size: .68rem;
    font-weight: 850;
    text-transform: uppercase;
}

.growth-pick-card strong {
    color: var(--text);
    font-size: .9rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.growth-pick-card em {
    color: var(--danger);
    font-style: normal;
    font-weight: 850;
}

.growth-pick-card.down em {
    color: var(--success);
}

.growth-pick-card small {
    color: var(--muted);
    font-size: .75rem;
}

.growth-empty-card {
    border: 1px dashed var(--border);
    border-radius: 8px;
    background: var(--surface-muted);
    color: var(--muted);
    padding: 14px;
}

.growth-series-panel {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.growth-series-panel > label {
    margin: 0;
}

.growth-toggle-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.growth-toggle-group .btn {
    min-width: 78px;
}

.metrics-chart-frame {
    height: var(--metrics-chart-height, var(--growth-chart-height, clamp(280px, 38vh, 390px)));
}

.metrics-snapshot {
    margin-top: 0;
}

.growth-summary {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.growth-summary > div {
    min-width: 0;
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    background: var(--surface-muted);
    padding: 9px 10px;
}

.growth-summary span,
.growth-summary strong {
    display: block;
}

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

.growth-summary strong {
    color: var(--text);
    font-size: .88rem;
    overflow-wrap: anywhere;
}

.growth-summary strong.success { color: var(--success); }
.growth-summary strong.warning { color: var(--warning); }
.growth-summary strong.danger { color: var(--danger); }

.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: 11px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--surface-subtle);
    border: 1px solid var(--border-soft);
}

.viz-fill,
.viz-stack span {
    display: block;
    height: 100%;
    min-width: 2px;
    border-radius: inherit;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
}

.viz-fill.success,
.viz-stack .success { background: linear-gradient(90deg, #7fcaa2, var(--success)); }
.viz-fill.info,
.viz-stack .info { background: linear-gradient(90deg, #78b9dc, var(--info)); }
.viz-fill.warning,
.viz-stack .warning { background: linear-gradient(90deg, #e1b85f, var(--warning)); }
.viz-fill.danger,
.viz-stack .danger { background: linear-gradient(90deg, #e18478, 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);
    box-shadow: inset 0 0 0 1px var(--border-soft);
}

.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: var(--growth-chart-height, 260px);
    }

    .growth-command-panel {
        grid-template-columns: 1fr;
    }

    .growth-overview-cards {
        grid-template-columns: 1fr;
    }
}

.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);
    width: min(100%, 1680px);
    margin-inline: auto;
}

.license-alert-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 0 0 16px;
    border: 1px solid var(--border);
    border-left: 6px solid var(--warning);
    border-radius: 8px;
    background: var(--warning-bg);
    color: var(--warning-text);
    box-shadow: var(--shadow-sm);
    padding: 13px 14px;
}

.license-alert-banner.danger {
    border-left-color: var(--danger);
    background: var(--danger-bg);
    color: var(--danger-text);
}

.license-alert-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.license-alert-copy strong {
    color: inherit;
    font-size: 1rem;
    font-weight: 850;
}

.license-alert-copy span {
    color: inherit;
    line-height: 1.35;
}

.license-alert-copy small,
.license-alert-modal-meta {
    color: inherit;
    font-weight: 750;
    opacity: .86;
}

.license-alert-banner .btn {
    flex: 0 0 auto;
}

.license-alert-modal .modal-content {
    border: 1px solid var(--danger);
    background: var(--surface);
    color: var(--text);
}

.license-alert-modal .modal-header {
    border-bottom-color: var(--border-soft);
}

.license-alert-modal .modal-footer {
    border-top-color: var(--border-soft);
}
@media (max-width: 1199.98px) {
    .app-navbar {
        min-height: 64px;
        padding: .52rem 0;
    }

    .app-brand {
        margin-right: .75rem;
    }

    .brand-mark {
        width: 37px;
        height: 37px;
        border-radius: 11px;
    }

    .app-menu-toggle {
        display: inline-flex;
    }

    .app-navbar .app-navbar-collapse.show,
    .app-navbar .app-navbar-collapse.collapsing {
        flex-basis: 100%;
        width: 100%;
        max-height: calc(100vh - 78px);
        max-height: calc(100dvh - 78px);
        margin-top: .72rem;
        border: 1px solid rgba(255, 255, 255, .1);
        border-radius: 17px;
        background:
            linear-gradient(145deg, rgba(255, 255, 255, .045), transparent 50%),
            rgba(8, 16, 24, .96);
        box-shadow: 0 22px 48px rgba(2, 8, 15, .36), inset 0 1px 0 rgba(255, 255, 255, .035);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: .82rem;
        scrollbar-gutter: stable;
    }

    .mobile-nav-heading {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 1rem;
        margin: 0 .2rem .65rem;
        border-bottom: 1px solid rgba(255, 255, 255, .08);
        padding: .15rem .2rem .7rem;
    }

    .mobile-nav-heading > span {
        color: #ffffff;
        font-size: .75rem;
        font-weight: 800;
        letter-spacing: .075em;
        text-transform: uppercase;
    }

    .mobile-nav-heading > small {
        color: rgba(206, 223, 231, .52);
        font-size: .69rem;
    }

    .app-primary-nav {
        align-items: stretch;
        gap: .28rem;
        width: 100%;
        margin: 0 !important;
    }

    .app-navbar .app-primary-nav > .nav-item > .nav-link {
        width: 100%;
        min-height: 48px;
        border-color: rgba(255, 255, 255, .055);
        border-radius: 12px;
        background: rgba(255, 255, 255, .035);
        color: rgba(231, 240, 244, .86) !important;
        font-size: .93rem;
        padding: .68rem .72rem;
        white-space: normal;
    }

    .app-navbar .app-primary-nav > .nav-item > .nav-link .nav-link-icon {
        width: 20px;
        height: 20px;
        margin-right: .14rem;
        color: rgba(121, 203, 211, .82);
    }

    .app-navbar .app-primary-nav > .nav-item > .nav-link.dropdown-toggle::after {
        margin-left: auto;
        margin-right: .25rem;
    }

    .app-navbar .app-primary-nav > .nav-item > .nav-link:hover,
    .app-navbar .app-primary-nav > .nav-item > .nav-link:focus-visible,
    .app-navbar .app-primary-nav > .nav-item > .nav-link.show {
        border-color: rgba(105, 195, 203, .18);
        background: rgba(77, 164, 175, .11);
    }

    .app-navbar .app-primary-nav > .nav-item > .nav-link.active {
        border-color: rgba(105, 195, 203, .21);
        background: rgba(77, 164, 175, .14);
        box-shadow: inset 3px 0 0 rgba(102, 205, 211, .75);
    }

    .app-navbar .app-dropdown-menu {
        position: static !important;
        min-width: 0;
        max-width: none;
        width: calc(100% - .65rem);
        max-height: none;
        margin: .34rem .325rem .55rem;
        border: 1px solid rgba(255, 255, 255, .075);
        border-radius: 13px;
        background: rgba(255, 255, 255, .035);
        box-shadow: none;
        padding: .38rem;
        transform: none !important;
        backdrop-filter: none;
    }

    .app-navbar .dropdown-menu-heading {
        margin: 0 .05rem .28rem;
        border-bottom-color: rgba(255, 255, 255, .075);
        padding: .55rem .62rem .6rem;
    }

    .app-navbar .dropdown-menu-heading > span {
        color: rgba(255, 255, 255, .93);
    }

    .app-navbar .dropdown-menu-heading > small {
        color: rgba(209, 224, 232, .56);
    }

    .app-navbar .dropdown-item {
        min-height: 43px;
        display: flex;
        align-items: center;
        border-radius: 9px;
        color: rgba(225, 236, 241, .79);
        padding: .62rem .72rem;
    }

    .app-navbar .dropdown-item:hover,
    .app-navbar .dropdown-item:focus {
        border-color: rgba(114, 201, 208, .13);
        background: rgba(91, 178, 188, .1);
        color: #ffffff;
        transform: none;
    }

    .app-navbar .dropdown-item.active,
    .app-navbar .dropdown-item:active {
        border-color: rgba(114, 201, 208, .18);
        background: rgba(91, 178, 188, .13) !important;
        color: #ffffff !important;
    }

    .app-navbar .dropdown-divider {
        border-color: rgba(255, 255, 255, .09);
    }

    .app-navbar .dropdown-item.text-muted {
        color: rgba(211, 225, 232, .48) !important;
    }

    .app-nav-utilities {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .5rem;
        width: 100%;
        margin: .75rem 0 0;
        border-top: 1px solid rgba(255, 255, 255, .08);
        padding-top: .75rem;
    }

    .quick-nav-button,
    .nav-contact-link {
        width: 100%;
        min-height: 43px;
        padding-inline: .72rem;
    }

    .quick-nav-button kbd {
        margin-left: auto;
    }

    .theme-switcher {
        grid-column: 1 / -1;
        min-height: 43px;
    }

    .app-nav-utilities > .navbar-nav {
        grid-column: 1 / -1;
        gap: .4rem;
        width: 100%;
        margin: 0 !important;
        padding: 0;
    }

    .app-nav-utilities > .navbar-nav .nav-item,
    .app-nav-utilities > .navbar-nav form {
        width: 100%;
    }

    .app-account-nav .account-menu-toggle {
        justify-content: flex-start;
        width: 100%;
        min-height: 46px;
        border-color: rgba(255, 255, 255, .08);
        background: rgba(255, 255, 255, .04);
        padding: .5rem .62rem;
    }

    .app-account-nav .account-menu-toggle::after {
        margin-left: auto;
        margin-right: .25rem;
    }

    .account-menu-summary {
        border-bottom-color: rgba(255, 255, 255, .075);
        color: rgba(255, 255, 255, .93);
    }

    .account-company {
        color: rgba(143, 220, 225, .9);
    }

    .account-role-badge {
        border-color: rgba(114, 201, 208, .2);
        background: rgba(91, 178, 188, .1);
        color: rgba(222, 248, 249, .92);
    }

    .app-navbar .account-logout-item {
        color: #ffb8ae;
    }

    .app-navbar .navbar-nav .login-cta {
        width: 100%;
        min-height: 45px;
        margin-top: .05rem;
        border-radius: 11px;
        font-size: .92rem;
    }
}

@media (max-width: 575.98px) {
    .app-navbar > .container-fluid {
        padding-right: .75rem !important;
        padding-left: .75rem !important;
    }

    .brand-product {
        display: none;
    }

    .brand-name {
        max-width: 9rem;
        font-size: .9rem;
    }

    .mobile-nav-heading > small {
        display: none;
    }

    .app-navbar .app-navbar-collapse.show,
    .app-navbar .app-navbar-collapse.collapsing {
        padding: .68rem;
    }

    .app-nav-utilities {
        grid-template-columns: 1fr;
    }

    .theme-switcher,
    .app-nav-utilities > .navbar-nav {
        grid-column: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .brand-mark,
    .app-menu-icon > span,
    .app-navbar .nav-link,
    .app-navbar .dropdown-toggle::after,
    .app-navbar .dropdown-item,
    .quick-nav-button,
    .nav-contact-link {
        transition: none !important;
    }
}
.app-main :where(h1, h2, h3, h4, h5, h6, p, li, label, .btn, .dropdown-item) {
    overflow-wrap: break-word;
}

.app-main :where(td, th) {
    overflow-wrap: normal;
    word-break: normal;
}

.app-main :where(.row > *, .card, .card-body, .viz-panel, .smart-guidance) {
    min-width: 0;
}

.app-main :where(.card, .card-body, .viz-panel, .smart-guidance, .table-responsive) :where(a, span, strong, p, div, li, td, th, code, pre) {
    max-width: 100%;
}

.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;
}

.is-button-loading {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    pointer-events: none;
    min-width: 5.5rem;
}

.button-loading-spinner {
    width: .95rem;
    height: .95rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: loading-spin .75s linear infinite;
}

@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;
}

.command-palette {
    position: fixed;
    inset: 0;
    z-index: 2600;
    display: none;
    place-items: start center;
    padding: min(10vh, 72px) 16px 16px;
    background: rgba(15, 23, 32, .34);
}

.command-palette.open {
    display: grid;
}

.command-palette-panel {
    width: min(720px, 100%);
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-md);
    padding: 12px;
}

.command-palette-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin-bottom: 8px;
}

.command-palette-head label {
    color: var(--muted-strong);
    font-size: .78rem;
    font-weight: 850;
    text-transform: uppercase;
}

.command-palette-head kbd {
    border: 1px solid var(--border-soft);
    background: var(--surface-muted);
    color: var(--muted-strong);
    box-shadow: none;
    font-size: .72rem;
}

.command-palette-input {
    min-height: 42px;
}

.command-palette-results {
    display: grid;
    gap: 6px;
    max-height: min(56vh, 460px);
    overflow: auto;
    margin-top: 10px;
}

.config-scroll-box {
    border: 1px solid var(--border);
    border-radius: 8px;
    max-height: min(68vh, 780px);
    overflow: auto;
    padding: 8px;
    scrollbar-width: thin;
}

.event-config-scroll {
    max-height: min(68vh, 820px);
}

.audit-config-scroll {
    max-height: min(56vh, 560px);
}

.command-palette-item {
    display: grid;
    grid-template-columns: minmax(100px, 150px) minmax(0, 1fr);
    gap: 2px 12px;
    align-items: center;
    width: 100%;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: var(--text);
    padding: 8px 10px;
    text-align: left;
}

.command-palette-item:hover,
.command-palette-item.active {
    border-color: var(--border-soft);
    background: var(--surface-hover);
}

.command-palette-item span {
    grid-row: span 2;
    color: var(--muted);
    font-size: .7rem;
    font-weight: 850;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.command-palette-item strong,
.command-palette-item small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.command-palette-item strong {
    color: var(--text);
    font-size: .92rem;
}

.command-palette-item small {
    color: var(--muted);
    font-size: .76rem;
}

.command-palette-empty {
    border: 1px dashed var(--border);
    border-radius: 7px;
    background: var(--surface-muted);
    color: var(--muted);
    padding: 22px;
    text-align: center;
}

.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-elevated);
    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,
.nav-link,
.dropdown-item,
.form-control,
.form-select,
.theme-option {
    transition: background-color .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease;
}

.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);
}

.btn-outline-primary {
    border-color: color-mix(in srgb, var(--link) 72%, var(--border));
    color: var(--link);
}

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

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

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

:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.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);
}

.table-responsive {
    scrollbar-color: var(--border) transparent;
    border-radius: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-responsive > .table {
    min-width: 760px;
}

.table-responsive > .table.table-sm {
    min-width: 680px;
}

.table-responsive > .server-list-table {
    min-width: 980px;
}

.table-responsive .table th,
.table-responsive .table td {
    white-space: nowrap;
}

.table-responsive .table :where(.text-wrap, .text-break, p, small) {
    white-space: normal;
}

.table tbody tr[hidden] {
    display: none !important;
}

.smart-table-toolbar {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: end;
    border: 1px solid var(--border-soft);
    border-bottom: 0;
    border-radius: 7px 7px 0 0;
    background: var(--surface-muted);
    padding: 8px 10px;
}

.smart-table-toolbar label {
    display: grid;
    gap: 4px;
    min-width: min(360px, 100%);
    margin: 0;
}

.smart-table-toolbar span {
    color: var(--muted-strong);
    font-size: .72rem;
    font-weight: 850;
    text-transform: uppercase;
}

.smart-table-count {
    flex: 0 0 auto;
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    font-size: .76rem;
    font-weight: 800;
    padding: 4px 8px;
    white-space: nowrap;
}

.smart-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

.copyable-code {
    position: relative;
}

.copy-code-button {
    float: right;
    margin: 0 0 4px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface-muted);
    color: var(--muted-strong);
    font-size: .72rem;
    font-weight: 800;
    padding: 3px 8px;
}

.copy-code-button:hover,
.copy-code-button:focus {
    border-color: var(--accent);
    background: var(--surface-hover);
    color: var(--text);
}

[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;
}

/* Floating labels provide the visible field caption; their placeholder stays hidden in every theme. */
.form-floating > .form-control::placeholder {
    color: transparent;
}

[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;
}

.ops-panel,
.server-panel,
.forecast-panel,
.incident-panel,
.status-panel,
.content-panel,
.report-panel,
.table-panel,
.dbhealth-panel {
    content-visibility: auto;
    contain-intrinsic-size: 360px;
}

.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;
}

.license-shell {
    display: grid;
    gap: 16px;
}

.license-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 14px;
}

.license-head h1 {
    margin: 0;
    color: var(--text);
    font-size: clamp(1.65rem, 2vw, 2.1rem);
    font-weight: 800;
}

.license-head p {
    margin: 4px 0 0;
    color: var(--muted);
}

.license-kicker {
    display: block;
    margin-bottom: 3px;
    color: var(--muted);
    font-size: .74rem;
    font-weight: 850;
    text-transform: uppercase;
}

.license-state {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    border-radius: 999px;
    padding: .32rem .7rem;
    font-weight: 850;
    border: 1px solid transparent;
}

.license-state.success {
    background: var(--success-bg);
    color: var(--success-text);
    border-color: rgba(83, 176, 126, .35);
}

.license-state.warning {
    background: var(--warning-bg);
    color: var(--warning-text);
    border-color: rgba(225, 184, 95, .38);
}

.license-state.danger {
    background: var(--danger-bg);
    color: var(--danger-text);
    border-color: rgba(225, 119, 104, .38);
}

.license-db-panel {
    display: grid;
    gap: 12px;
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    padding: 14px;
}

.license-db-panel.success { border-left-color: var(--success); }
.license-db-panel.warning { border-left-color: var(--warning); }
.license-db-panel.danger { border-left-color: var(--danger); }

.license-db-copy span {
    display: block;
    margin-bottom: 3px;
    color: var(--muted);
    font-size: .72rem;
    font-weight: 850;
    text-transform: uppercase;
}

.license-db-copy strong {
    display: block;
    color: var(--text);
    overflow-wrap: anywhere;
}

.license-db-copy p {
    margin: 6px 0 0;
    color: var(--muted);
}

.license-db-panel details {
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    background: var(--surface-muted);
    padding: 10px;
}

.license-db-panel summary {
    cursor: pointer;
    color: var(--muted-strong);
    font-weight: 750;
}

.license-db-form fieldset {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    min-inline-size: 0;
    margin: 10px 0 0;
    padding: 0;
    border: 0;
}

.license-db-checks {
    display: grid;
    gap: 7px;
    align-content: center;
}

.license-status {
    display: grid;
    grid-template-columns: minmax(260px, 1.4fr) repeat(3, minmax(150px, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--border-soft);
}

.license-status > div {
    min-width: 0;
    background: var(--surface);
    padding: 13px 14px;
}

.license-status span,
.license-renewal span,
.license-action p,
.license-note {
    color: var(--muted);
}

.license-status span {
    display: block;
    margin-bottom: 3px;
    font-size: .72rem;
    font-weight: 850;
    text-transform: uppercase;
}

.license-status strong,
.license-renewal strong {
    display: block;
    color: var(--text);
    overflow-wrap: anywhere;
}

.license-status strong.success,
.license-renewal.success strong { color: var(--success); }
.license-status strong.warning,
.license-renewal.warning strong { color: var(--warning); }
.license-status strong.danger,
.license-renewal.danger strong { color: var(--danger); }

.license-flow {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.license-action {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    padding: 14px;
}

.license-step {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: var(--brand);
    color: #ffffff;
    font-weight: 850;
}

.license-action h2 {
    margin: 0;
    color: var(--text);
    font-size: 1.08rem;
    font-weight: 800;
}

.license-action p {
    margin: 4px 0 12px;
}

.license-import-form {
    display: grid;
    gap: 10px;
}

.license-import-form fieldset {
    display: grid;
    gap: 10px;
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.license-import-form details,
.license-advanced {
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    background: var(--surface-muted);
    padding: 10px;
}

.license-import-form summary,
.license-advanced > summary {
    cursor: pointer;
    color: var(--muted-strong);
    font-weight: 750;
}

.license-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.license-renewal {
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    background: var(--surface-muted);
    padding: 10px;
}

.license-note {
    margin: 0;
    line-height: 1.45;
}

@media (max-width: 991.98px) {
    .license-status,
    .license-flow,
    .license-metrics,
    .license-db-form fieldset {
        grid-template-columns: 1fr;
    }

    .license-head {
        flex-direction: column;
    }
}

/* 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;
    }

    .navbar-nav.ms-auto {
        align-items: stretch;
        width: 100%;
        margin-top: .45rem;
    }

    .navbar-nav.ms-auto .form-inline {
        margin: 0;
    }

    .navbar-nav.ms-auto .nav-link:not(.login-cta) {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-height: 42px;
        border: 1px solid rgba(255, 255, 255, .18);
        background: rgba(255, 255, 255, .08);
        padding: .55rem .7rem;
    }

    .navbar-nav.ms-auto .nav-link:not(.login-cta):hover,
    .navbar-nav.ms-auto .nav-link:not(.login-cta):focus {
        border-color: rgba(255, 255, 255, .34);
        background: rgba(255, 255, 255, .15);
    }

    .navbar-nav .login-cta {
        width: 100%;
        min-height: 42px;
    }

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

/* Global layout normalization.
   This section intentionally comes last to smooth older page-local styles into one
   predictable workspace system without rewriting every Razor page at once. */
:root {
    --layout-page-max: 1680px;
    --layout-readable-max: 1120px;
    --layout-narrow-max: 920px;
    --layout-gutter: clamp(.75rem, 1.2vw, 1.5rem);
    --layout-section-gap: clamp(.75rem, 1vw, 1rem);
    --layout-panel-padding: clamp(.75rem, 1vw, 1rem);
    --layout-control-height: 38px;
    --layout-control-height-sm: 34px;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    line-height: 1.45;
    overflow-x: hidden;
}

.app-main {
    width: min(100%, var(--layout-page-max));
    padding-inline: var(--layout-gutter) !important;
    padding-block: clamp(.85rem, 1.2vw, 1.25rem) !important;
}

.app-main > :where(section, div, form, article) {
    min-width: 0;
}

.app-main > :where(section[class$="-shell"], div[class$="-shell"], form[class$="-shell"]) {
    display: grid;
    gap: var(--layout-section-gap);
    width: 100%;
    max-width: 100%;
}

.app-main :where(.container, .container-fluid) {
    max-width: var(--layout-page-max);
    padding-inline: 0;
}

.app-main :where(
    .doc-shell,
    .privacy-shell,
    .instructions-shell,
    .license-shell
) {
    max-width: var(--layout-readable-max);
    margin-inline: auto;
}

.app-main :where(
    .ops-header,
    .server-hero,
    .status-head,
    .incident-head,
    .forecast-head,
    .config-head,
    .configs-head,
    .doc-head,
    .quality-hero,
    .workload-head,
    .sqljobs-head,
    .dash-topbar
) {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: clamp(.75rem, 1.5vw, 1.25rem);
    min-width: 0;
    padding-bottom: clamp(.7rem, 1vw, 1rem);
    border-bottom: 1px solid var(--border);
}

.app-main :where(
    .ops-header,
    .server-hero,
    .status-head,
    .incident-head,
    .forecast-head,
    .config-head,
    .configs-head,
    .doc-head,
    .quality-hero,
    .workload-head,
    .sqljobs-head
) :where(h1, h2) {
    margin: 0 0 .3rem;
    color: var(--text);
    font-size: clamp(1.45rem, 1.1rem + .9vw, 2rem);
    line-height: 1.15;
    letter-spacing: 0;
}

.app-main :where(
    .ops-header,
    .server-hero,
    .status-head,
    .incident-head,
    .forecast-head,
    .config-head,
    .configs-head,
    .doc-head,
    .quality-hero,
    .workload-head,
    .sqljobs-head
) p {
    max-width: 78ch;
    margin: 0;
    color: var(--muted);
}

.app-main :where(
    .viz-grid,
    .license-metrics,
    .sqljobs-metrics,
    .growth-overview-cards,
    .kpi-grid,
    .metric-grid,
    .trust-grid,
    .catalogue-grid,
    .gap-grid,
    .result-grid
) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: var(--layout-section-gap);
}

.app-main :where(
    .card,
    .viz-panel,
    .smart-guidance,
    .ops-panel,
    .server-panel,
    .forecast-panel,
    .ai-panel,
    .incident-panel,
    .incident-insights,
    .status-panel,
    .content-panel,
    .report-panel,
    .table-panel,
    .dbhealth-panel,
    .configs-panel,
    .reports-sidebar,
    .reports-toolbar,
    .filter-panel,
    .result-panel,
    .detail-panel,
    .quality-panel,
    .workload-panel,
    .recommendation-panel,
    .sqljobs-panel,
    .license-db-panel,
    .license-renewal,
    .server-job-card,
    .metric-tile,
    .kpi-tile,
    .detail-card,
    .report-card,
    .story-card,
    .section-box
) {
    min-width: 0;
    border-radius: 8px;
    border-color: var(--border);
    box-shadow: var(--shadow-sm);
}

.app-main :where(
    .viz-panel,
    .ops-panel,
    .server-panel,
    .forecast-panel,
    .ai-panel,
    .incident-panel,
    .incident-insights,
    .status-panel,
    .content-panel,
    .report-panel,
    .table-panel,
    .dbhealth-panel,
    .configs-panel,
    .filter-panel,
    .result-panel,
    .detail-panel,
    .quality-panel,
    .workload-panel,
    .recommendation-panel,
    .sqljobs-panel,
    .license-db-panel,
    .license-renewal
) {
    padding: var(--layout-panel-padding);
}

.app-main :where(
    .panel-title,
    .viz-title,
    .section-title,
    .server-panel-head,
    .status-toolbar,
    .reports-toolbar,
    .configs-toolbar,
    .workload-toolbar,
    .smart-table-toolbar,
    .sqljobs-head-actions,
    .target-actions,
    .rules-actions,
    .toolbar-actions,
    .detail-actions
) {
    min-width: 0;
}

.app-main :where(.panel-title, .viz-title, .section-title) {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: .45rem .85rem;
}

.app-main :where(.panel-title span, .viz-title span, .section-title span, .form-label) {
    color: var(--muted);
    font-size: .74rem;
    font-weight: 850;
    letter-spacing: 0;
    text-transform: uppercase;
}

.app-main :where(.panel-title strong, .viz-title strong, .section-title strong) {
    min-width: 0;
    color: var(--text);
    overflow-wrap: anywhere;
}

.app-main :where(.row) {
    --bs-gutter-x: var(--layout-section-gap);
    --bs-gutter-y: var(--layout-section-gap);
}

.app-main :where(.form-label) {
    margin-bottom: .3rem;
}

.app-main :where(.form-control, .form-select) {
    min-height: var(--layout-control-height);
    border-radius: 7px;
}

.app-main :where(.form-control-sm, .form-select-sm) {
    min-height: var(--layout-control-height-sm);
}

.app-main :where(textarea.form-control) {
    min-height: 6rem;
    resize: vertical;
}

.app-main :where(.form-text, .text-muted, small) {
    line-height: 1.35;
}

.app-main :where(fieldset:disabled) {
    opacity: .86;
}

.app-main :where(.form-control:disabled, .form-select:disabled, .btn:disabled, fieldset:disabled .btn) {
    cursor: not-allowed;
}

.app-main :where(.btn) {
    min-height: var(--layout-control-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    white-space: normal;
    text-align: center;
}

.app-main :where(.btn-sm) {
    min-height: var(--layout-control-height-sm);
}

.app-main :where(.table-responsive, .configs-table-wrap, .forecast-table-wrap, .incident-table-wrap, .status-table-wrap, .content-table-wrap) {
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.app-main :where(.table) {
    margin-bottom: 0;
    vertical-align: middle;
}

.app-main :where(.table th) {
    position: relative;
    vertical-align: middle;
}

.app-main :where(.table td) {
    vertical-align: top;
}

.app-main :where(.table td, .table th) {
    max-width: 34rem;
}

.app-main :where(.table td > *, .table th > *) {
    max-width: 100%;
}

.app-main :where(pre, code, .font-monospace) {
    overflow-wrap: anywhere;
}

.app-main :where(.alert) {
    border-radius: 8px;
    overflow-wrap: anywhere;
}

@media (min-width: 992px) {
    .app-main {
        padding-inline: clamp(1rem, 1.8vw, 2rem) !important;
    }

    .app-main :where(
        .ops-controls,
        .server-controls,
        .growth-command-panel,
        .filter-grid,
        .workload-controls,
        .sqljobs-builder
    ) {
        gap: var(--layout-section-gap);
    }
}

@media (min-width: 1600px) {
    .app-main {
        --layout-section-gap: 1rem;
        --layout-panel-padding: 1rem;
    }
}

@media (max-width: 1199.98px) {
    .app-main :where(
        .reports-shell,
        .workload-grid,
        .primary-grid,
        .secondary-grid,
        .sqljobs-builder,
        .license-flow,
        .license-db-form fieldset
    ) {
        grid-template-columns: 1fr !important;
    }

    .app-main :where(.target-panel, .reports-sidebar, .detail-panel) {
        position: static !important;
        top: auto !important;
        max-height: none !important;
    }
}

@media (max-width: 767.98px) {
    .app-main {
        --layout-section-gap: .75rem;
        --layout-panel-padding: .75rem;
    }

    .app-main :where(
        .ops-header,
        .server-hero,
        .status-head,
        .incident-head,
        .forecast-head,
        .config-head,
        .configs-head,
        .doc-head,
        .quality-hero,
        .workload-head,
        .sqljobs-head,
        .license-alert-banner,
        .panel-title,
        .viz-title,
        .section-title,
        .status-toolbar,
        .reports-toolbar,
        .configs-toolbar,
        .smart-table-toolbar
    ) {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    .app-main :where(
        .viz-grid,
        .license-metrics,
        .sqljobs-metrics,
        .growth-overview-cards,
        .kpi-grid,
        .metric-grid,
        .trust-grid,
        .catalogue-grid,
        .gap-grid,
        .result-grid,
        .story-grid,
        .filter-grid
    ) {
        grid-template-columns: 1fr !important;
    }

    .app-main :where(.btn, .btn-group, .input-group, .toolbar-actions, .status-actions, .sqljobs-head-actions, .target-actions) {
        width: 100%;
    }

    .app-main :where(.btn-group) {
        display: grid;
    }

    .app-main :where(.input-group) {
        flex-wrap: nowrap;
    }

    .app-main :where(.table-responsive, .configs-table-wrap, .forecast-table-wrap, .incident-table-wrap, .status-table-wrap, .content-table-wrap) {
        width: calc(100vw - (var(--layout-gutter) * 2));
        max-width: 100%;
    }
}

/* Page-local Razor styles are rendered after this stylesheet. These targeted
   important rules normalize only layout fundamentals across legacy pages. */
.app-main > :where(
    .ops-shell,
    .server-shell,
    .server-overview-page,
    .status-shell,
    .incident-shell,
    .forecast-shell,
    .configs-shell,
    .reports-shell,
    .content-shell,
    .quality-shell,
    .workload-shell,
    .sqljobs-shell,
    .license-shell
) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: var(--layout-section-gap) !important;
}

.app-main :where(
    .ops-header,
    .ops-hero,
    .backup-hero,
    .dbhealth-hero,
    .rules-hero,
    .server-hero,
    .overview-head,
    .status-head,
    .incident-head,
    .forecast-head,
    .config-head,
    .configs-head,
    .doc-head,
    .doc-hero,
    .guide-hero,
    .quality-hero,
    .workload-head,
    .sqljobs-head,
    .report-head,
    .license-head,
    .delivery-head
) {
    align-items: flex-end !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    gap: clamp(.75rem, 1.5vw, 1.25rem) !important;
    min-height: 0 !important;
    padding: 0 clamp(.65rem, 1.1vw, 1rem) clamp(.75rem, 1vw, 1rem) !important;
}

.app-main :where(
    .ops-header,
    .ops-hero,
    .backup-hero,
    .dbhealth-hero,
    .rules-hero,
    .server-hero,
    .overview-head,
    .status-head,
    .incident-head,
    .forecast-head,
    .config-head,
    .configs-head,
    .doc-head,
    .doc-hero,
    .guide-hero,
    .quality-hero,
    .workload-head,
    .sqljobs-head,
    .report-head,
    .license-head,
    .delivery-head
) :where(h1, h2) {
    font-size: clamp(1.45rem, 1.1rem + .9vw, 2rem) !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
}

.app-main :where(
    .workload-state strong,
    .metric-tile strong,
    .kpi-tile strong,
    .incident-kpi strong,
    .impact-score strong
) {
    font-size: clamp(1.2rem, 1rem + .55vw, 1.65rem) !important;
    line-height: 1.1 !important;
}

.app-main :where(
    .overview-kpis,
    .workload-kpis,
    .sqljobs-metrics,
    .license-metrics,
    .viz-grid,
    .impact-themes,
    .metric-grid,
    .trust-grid,
    .catalogue-grid,
    .gap-grid,
    .result-grid,
    .recommendation-list
) {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)) !important;
    gap: var(--layout-section-gap) !important;
}

.app-main :where(
    .overview-controls,
    .workload-controls,
    .growth-command-panel,
    .configs-toolbar,
    .reports-toolbar,
    .status-toolbar,
    .workload-filterbar,
    .filter-grid
) {
    gap: var(--layout-section-gap) !important;
}

.app-main :where(
    .card,
    .viz-panel,
    .ops-panel,
    .server-panel,
    .forecast-panel,
    .ai-panel,
    .incident-panel,
    .incident-insights,
    .status-panel,
    .content-panel,
    .report-panel,
    .table-panel,
    .dbhealth-panel,
    .configs-panel,
    .reports-sidebar,
    .reports-toolbar,
    .filter-panel,
    .result-panel,
    .detail-panel,
    .quality-panel,
    .workload-panel,
    .recommendation-panel,
    .sqljobs-panel,
    .license-db-panel,
    .license-renewal,
    .overview-head,
    .overview-controls,
    .server-workspace,
    .impact-summary,
    .advice-band,
    .story-card,
    .section-box
) {
    border-radius: 8px !important;
    min-width: 0 !important;
}

.app-main :where(
    .viz-panel,
    .ops-panel,
    .server-panel,
    .forecast-panel,
    .ai-panel,
    .incident-panel,
    .incident-insights,
    .status-panel,
    .content-panel,
    .report-panel,
    .table-panel,
    .dbhealth-panel,
    .configs-panel,
    .filter-panel,
    .result-panel,
    .detail-panel,
    .quality-panel,
    .workload-panel,
    .recommendation-panel,
    .sqljobs-panel,
    .license-db-panel,
    .license-renewal
) {
    padding: var(--layout-panel-padding) !important;
}

@media (max-width: 1399.98px) {
    .app-main :where(
        .overview-controls,
        .workload-controls
    ) {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)) !important;
    }

    .app-main :where(
        .impact-summary,
        .workload-map,
        .workload-results-layout,
        .server-panel-head
    ) {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 1199.98px) {
    .app-main :where(
        .reports-shell,
        .server-workspace,
        .workload-grid,
        .primary-grid,
        .secondary-grid,
        .license-flow,
        .license-db-form fieldset
    ) {
        grid-template-columns: 1fr !important;
        grid-template-areas: none !important;
    }

    .app-main :where(.sqljobs-builder) {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "targets"
            "definition"
            "schedule" !important;
    }

    .app-main :where(
        .server-nav,
        .target-panel,
        .reports-sidebar,
        .detail-panel
    ) {
        position: static !important;
        top: auto !important;
        max-height: none !important;
    }
}

@media (max-width: 767.98px) {
    .app-main :where(
        .overview-head,
        .workload-head,
        .impact-summary,
        .server-panel-head,
        .server-job-row,
        .result-summary,
        .detail-head
    ) {
        align-items: stretch !important;
        flex-direction: column !important;
        text-align: left !important;
    }

    .app-main :where(
        .overview-controls,
        .workload-controls,
        .workload-filterbar,
        .filter-grid,
        .backup-plan-grid,
        .job-grid,
        .step-options
    ) {
        grid-template-columns: 1fr !important;
    }

    .app-main :where(
        .estate-state,
        .workload-state,
        .row-counter
    ) {
        justify-items: start !important;
        justify-self: start !important;
        min-width: 0 !important;
        width: 100% !important;
        text-align: left !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .001ms !important;
    }
}

/* 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: var(--growth-chart-height, clamp(220px, 30vh, 320px));
}

.table-responsive,
.forecast-table-wrap,
.incident-table-wrap,
.status-table-wrap,
.content-table-wrap {
    scrollbar-width: thin;
    scrollbar-gutter: stable;
    overscroll-behavior: auto;
}

.app-main * {
    overscroll-behavior-y: auto !important;
    overscroll-behavior-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

@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: var(--growth-chart-height, clamp(210px, 28vh, 290px));
    }
}

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

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

    .app-main :where(
        .card-body-normal,
        .card-body-half,
        .card-body-priority,
        .card-body-mini,
        .ops-panel,
        .server-panel,
        .configs-panel,
        .forecast-panel,
        .ai-panel,
        .selected-panel,
        .incident-panel,
        .incident-insights,
        .queue-panel,
        .focus-panel,
        .status-table-wrap,
        .table-scroll,
        .report-table-panel .table-responsive
    ) {
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
    }

    .app-main :where(
        .card-body-normal,
        .card-body-half,
        .card-body-priority,
        .card-body-mini,
        .ops-panel,
        .server-panel,
        .configs-panel,
        .forecast-panel,
        .ai-panel,
        .selected-panel,
        .incident-panel,
        .incident-insights,
        .queue-panel,
        .focus-panel
    ) {
        content-visibility: visible !important;
        contain-intrinsic-size: auto !important;
        overflow: visible !important;
    }

    .app-main :where(
        .configs-table-wrap,
        .forecast-table-wrap,
        .incident-table-wrap,
        .status-table-wrap,
        .content-table-wrap,
        .table-scroll,
        .workload-panel .stack-list,
        .report-table-panel .table-responsive
    ) {
        width: 100% !important;
        max-width: 100% !important;
        max-height: none !important;
        min-height: 0 !important;
    }

    .app-main :where(
        .card,
        .viz-panel,
        .ops-panel,
        .server-panel,
        .forecast-panel,
        .ai-panel,
        .incident-panel,
        .incident-insights,
        .status-panel,
        .content-panel,
        .report-panel,
        .table-panel,
        .dbhealth-panel,
        .configs-panel,
        .reports-sidebar,
        .reports-toolbar,
        .filter-panel,
        .result-panel,
        .detail-panel,
        .quality-panel,
        .workload-panel,
        .recommendation-panel,
        .sqljobs-panel,
        .server-job-card,
        .metric-tile,
        .kpi-tile,
        .detail-card,
        .report-card,
        .story-card,
        .section-box
    ) {
        content-visibility: visible !important;
        contain-intrinsic-size: auto !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .command-palette {
        padding-top: 10px;
    }

    .command-palette-item {
        grid-template-columns: 1fr;
    }

    .command-palette-item span {
        grid-row: auto;
    }

    .smart-table-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .smart-table-count {
        align-self: flex-start;
    }

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

    .license-alert-banner {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
        padding: 12px;
    }

    .license-alert-banner .btn {
        width: 100%;
    }

    .quick-nav-button,
    .theme-switcher {
        margin: .35rem 0;
    }

    .quick-nav-button {
        justify-content: space-between;
        width: 100%;
    }

    .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: var(--growth-chart-height, 230px);
    }

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

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

/* Final UI polish layer.
   Many Razor pages ship page-local CSS after site.css. These narrowly scoped
   important rules keep shared controls aligned without rewriting each page. */
.app-main,
.app-main *,
.app-main *::before,
.app-main *::after {
    box-sizing: border-box;
}

.app-main :where(
    [class$="-grid"],
    [class$="-layout"],
    [class$="-row"],
    [class$="-head"],
    [class$="-toolbar"],
    [class$="-actions"],
    [class$="-filter"],
    [class$="-controls"],
    [class$="-panel"],
    [class$="-card"],
    [class$="-item"],
    [class$="-line"],
    [class$="-title"],
    [class$="-meta"],
    [class$="-side"],
    [class$="-main"],
    [class$="-content"]
) {
    min-width: 0;
}

.app-main :where(
    .ops-filter,
    .backup-filter,
    .dbhealth-filter,
    .overview-controls,
    .workload-controls,
    .workload-filterbar,
    .configs-toolbar,
    .status-toolbar,
    .reports-toolbar,
    .filter-grid,
    .rule-edit-grid,
    .queue-filters,
    .job-grid,
    .ops-filter-grid,
    .forecast-tools,
    .queue-tools,
    .server-picker-row
) {
    align-items: end !important;
}

.app-main :where(
    .ops-filter,
    .backup-filter,
    .dbhealth-filter,
    .overview-controls,
    .workload-controls,
    .workload-filterbar,
    .filter-grid
) > label,
.app-main :where(.rule-edit-grid, .queue-filters, .job-grid, .control-grid, .ops-filter-grid, .forecast-tools, .queue-tools) label {
    min-width: 0 !important;
}

.app-main :where(label) > :where(.form-control, .form-select, .input-group) {
    width: 100%;
    max-width: 100%;
    margin-top: .25rem;
}

.app-main :where(input.form-control:not([type="checkbox"]):not([type="radio"]), select.form-select) {
    height: var(--layout-control-height) !important;
}

.app-main :where(input.form-control-sm:not([type="checkbox"]):not([type="radio"]), select.form-select-sm) {
    height: var(--layout-control-height-sm) !important;
}

.app-main :where(textarea.form-control) {
    height: auto !important;
}

.app-main :where(.input-group) {
    max-width: 100%;
    align-items: stretch;
}

.app-main :where(.input-group > .form-control, .input-group > .form-select) {
    min-width: 0;
    margin-top: 0;
}

.app-main :where(.input-group > .btn) {
    flex: 0 0 auto;
    min-width: max-content;
}

.app-main :where(
    .toolbar-actions,
    .status-actions,
    .target-actions,
    .rules-actions,
    .export-actions,
    .schedule-actions,
    .smart-guidance-actions,
    .detail-actions,
    .backup-filter-actions,
    .sqljobs-head-actions
) {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.app-main :where(
    .toolbar-actions,
    .status-actions,
    .target-actions,
    .rules-actions,
    .export-actions,
    .schedule-actions,
    .smart-guidance-actions,
    .detail-actions,
    .backup-filter-actions,
    .sqljobs-head-actions
) > :where(.btn, a.btn, button.btn) {
    flex: 0 1 auto;
    max-width: 100%;
}

.app-main :where(
    .ops-filter,
    .backup-filter,
    .dbhealth-filter
) {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)) auto !important;
}

.app-main :where(
    .ops-filter-grid,
    .forecast-tools,
    .queue-tools,
    .status-toolbar
) {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)) !important;
}

.app-main :where(.ops-filter > button, .backup-filter-actions, .dbhealth-filter > button, .dbhealth-filter > a.btn) {
    align-self: end;
}

.app-main :where(.ops-kpis, .backup-kpis, .dbhealth-kpis, .rules-kpis, .report-kpis) {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)) !important;
}

.app-main :where(.action-ops-map, .restore-board, .dbhealth-map, .rule-design-map, .rules-notes) {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)) !important;
}

.app-main :where(
    .ops-filter-field,
    .tool-field,
    .config-search,
    .server-picker
) :where(.form-control, .form-select) {
    width: 100% !important;
    min-width: 0 !important;
}

.app-main :where(.action-row, .dbhealth-row, .backup-actions article, .server-panel-head, .advice-band) {
    min-width: 0;
}

.app-main :where(.action-title, .dbhealth-title, .map-title, .rule-map-title, .section-title, .box-title) {
    min-width: 0;
    flex-wrap: wrap;
}

.app-main :where(.action-side, .dbhealth-side, .backup-meta, .ops-meta) {
    min-width: 0;
    overflow-wrap: anywhere;
}

.app-main :where(.table-responsive, .configs-table-wrap, .forecast-table-wrap, .incident-table-wrap, .status-table-wrap, .content-table-wrap, .table-scroll) {
    max-width: 100% !important;
    overflow-x: auto !important;
}

.app-main :where(.table, .reports-table, .backup-table, .workload-table, .configs-table, .status-table) {
    max-width: none;
}

@media (max-width: 1199.98px) {
    .app-main :where(
        .ops-filter,
        .backup-filter,
        .dbhealth-filter,
        .rule-edit-grid,
        .queue-filters,
        .report-builder,
        .builder-actions,
        .server-panel-head,
        .advice-band,
        .split-detail
    ) {
        grid-template-columns: 1fr !important;
    }

    .app-main :where(.panel-head, .map-title, .rule-map-title) {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    .app-main :where(.panel-head input, .panel-title input) {
        max-width: none !important;
        width: 100% !important;
    }

    .app-main :where(
        .ops-filter-grid,
        .forecast-tools,
        .queue-tools,
        .status-toolbar,
        .configs-toolbar,
        .server-picker-row
    ) {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 767.98px) {
    .app-main :where(
        .toolbar-actions,
        .status-actions,
        .target-actions,
        .rules-actions,
        .export-actions,
        .schedule-actions,
        .smart-guidance-actions,
        .detail-actions,
        .backup-filter-actions,
        .sqljobs-head-actions
    ) {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100%;
    }

    .app-main :where(
        .toolbar-actions,
        .status-actions,
        .target-actions,
        .rules-actions,
        .export-actions,
        .schedule-actions,
        .smart-guidance-actions,
        .detail-actions,
        .backup-filter-actions,
        .sqljobs-head-actions
    ) > :where(.btn, a.btn, button.btn) {
        width: 100%;
    }

    .app-main :where(.input-group) {
        display: flex !important;
        flex-wrap: nowrap !important;
        width: 100%;
    }

    .app-main :where(.input-group > .form-control, .input-group > .form-select) {
        flex: 1 1 auto;
        width: 1%;
        min-width: 0;
    }

    .app-main :where(.input-group > .btn) {
        flex: 0 0 auto;
        width: auto !important;
        min-width: 0;
    }

    /* Keep mobile card collections in document order. This deliberately comes
       after the global auto-fit normalization so it wins the cascade. */
    .app-main :where(
        .viz-grid,
        .license-metrics,
        .sqljobs-metrics,
        .growth-overview-cards,
        .kpi-grid,
        .metric-grid,
        .trust-grid,
        .catalogue-grid,
        .gap-grid,
        .result-grid,
        .story-grid,
        .filter-grid
    ) {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-auto-flow: row !important;
    }

    .app-main :where(
        .viz-grid,
        .license-metrics,
        .sqljobs-metrics,
        .growth-overview-cards,
        .kpi-grid,
        .metric-grid,
        .trust-grid,
        .catalogue-grid,
        .gap-grid,
        .result-grid,
        .story-grid,
        .filter-grid
    ) > * {
        grid-column: auto !important;
        grid-row: auto !important;
        min-width: 0;
    }
}