/* Shared commercial appearance system for the CheckMate web interface. */
html[data-theme] {
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: scroll !important;
    scrollbar-gutter: stable;
}

html[data-theme] body:not(.modal-open) {
    min-height: 100%;
    height: auto;
    overflow-x: clip !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
}

html[data-theme] {
    scrollbar-width: none;
}

html[data-theme]::-webkit-scrollbar {
    width: 0;
    height: 0;
}

html[data-theme] .page-shell,
html[data-theme] .page-card {
    height: auto;
    max-height: none;
    overflow-x: clip;
    overflow-y: visible;
}

html[data-theme]:has(body.modal-open) {
    overflow-y: hidden !important;
}

.cm-page-scrollbar {
    position: fixed;
    z-index: 9990;
    top: 0;
    right: 0;
    bottom: 0;
    width: 16px;
    border-left: 1px solid var(--panel-border-soft);
    background: color-mix(in srgb, var(--theme-surface-raised) 88%, transparent);
    box-shadow: -3px 0 12px color-mix(in srgb, var(--text) 7%, transparent);
    cursor: pointer;
    touch-action: none;
}

.cm-page-scrollbar:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: -3px;
}

.cm-page-scrollbar__thumb {
    position: absolute;
    top: 0;
    right: 3px;
    left: 3px;
    min-height: 52px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--accent), var(--accent-hover));
    box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 34%, transparent);
    cursor: grab;
    will-change: height, transform;
}

.cm-page-scrollbar__thumb:hover {
    filter: brightness(1.08);
}

.cm-page-scrollbar.is-dragging .cm-page-scrollbar__thumb {
    cursor: grabbing;
}

.cm-page-scrollbar[data-disabled="true"] .cm-page-scrollbar__thumb {
    opacity: 0.38;
    box-shadow: none;
}

body.modal-open .cm-page-scrollbar {
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 720px) {
    .cm-page-scrollbar { width: 12px; }
    .cm-page-scrollbar__thumb { right: 2px; left: 2px; }
}

@media print {
    .cm-page-scrollbar { display: none !important; }
}

:root[data-theme="clarity"] {
    color-scheme: light;
    --bg: #f2f6fc;
    --panel: #ffffff;
    --panel-2: #f6f8fc;
    --panel-3: #eaf1ff;
    --panel-4: #dce7ff;
    --surface: #ffffff;
    --surface-2: #f6f8fc;
    --surface-3: #dce7ff;
    --panel-border: #cbd7e8;
    --panel-border-soft: rgba(57, 80, 119, 0.14);
    --panel-glass: rgba(255, 255, 255, 0.84);
    --panel-glass-strong: rgba(255, 255, 255, 0.96);
    --border: #cbd7e8;
    --border-strong: #a9bbd4;
    --text: #101828;
    --text-soft: #475467;
    --text-muted: #667085;
    --accent: #2457d6;
    --accent-hover: #1945b5;
    --accent-soft: rgba(36, 87, 214, 0.13);
    --accent-border: rgba(36, 87, 214, 0.30);
    --field-bg: #f7f9fc;
    --field-bg-focus: #ffffff;
    --field-text: #101828;
    --neutral: #667085;
    --theme-on-accent: #ffffff;
    --theme-page-background: radial-gradient(circle at 8% 0%, rgba(36, 87, 214, 0.12), transparent 30%), linear-gradient(180deg, #f8faff 0%, #eef3fa 100%);
    --theme-topbar: rgba(255, 255, 255, 0.92);
    --theme-surface: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
    --theme-surface-color: #ffffff;
    --theme-surface-raised: #f5f8fd;
    --theme-input: #f7f9fc;
    --theme-shadow: 0 18px 44px rgba(29, 52, 88, 0.10);
    --theme-soft-hover: rgba(36, 87, 214, 0.07);
}

:root[data-theme="harbour"] {
    color-scheme: light;
    --bg: #eff7f6;
    --panel: #ffffff;
    --panel-2: #f1f8f7;
    --panel-3: #def1ef;
    --panel-4: #c8e9e6;
    --surface: #ffffff;
    --surface-2: #f1f8f7;
    --surface-3: #d9efed;
    --panel-border: #bfd7d5;
    --panel-border-soft: rgba(18, 80, 84, 0.14);
    --panel-glass: rgba(255, 255, 255, 0.84);
    --panel-glass-strong: rgba(255, 255, 255, 0.96);
    --border: #bfd7d5;
    --border-strong: #91b8b7;
    --text: #102122;
    --text-soft: #405c5d;
    --text-muted: #5f7778;
    --accent: #007c83;
    --accent-hover: #00656b;
    --accent-soft: rgba(0, 124, 131, 0.13);
    --accent-border: rgba(0, 124, 131, 0.30);
    --field-bg: #f2f8f7;
    --field-bg-focus: #ffffff;
    --field-text: #102122;
    --neutral: #5f7778;
    --theme-on-accent: #ffffff;
    --theme-page-background: radial-gradient(circle at 90% 0%, rgba(0, 166, 166, 0.14), transparent 30%), linear-gradient(180deg, #f7fbfa 0%, #eaf4f3 100%);
    --theme-topbar: rgba(249, 253, 252, 0.93);
    --theme-surface: linear-gradient(180deg, #ffffff 0%, #f9fcfb 100%);
    --theme-surface-color: #ffffff;
    --theme-surface-raised: #edf7f5;
    --theme-input: #f2f8f7;
    --theme-shadow: 0 18px 44px rgba(13, 68, 71, 0.10);
    --theme-soft-hover: rgba(0, 124, 131, 0.07);
}

:root[data-theme="foundry"] {
    color-scheme: light;
    --bg: #f8f4ee;
    --panel: #fffdfa;
    --panel-2: #f8f3ed;
    --panel-3: #f1e7dc;
    --panel-4: #ead9c9;
    --surface: #fffdfa;
    --surface-2: #f8f3ed;
    --surface-3: #f1e7dc;
    --panel-border: #d8cec3;
    --panel-border-soft: rgba(74, 60, 47, 0.14);
    --panel-glass: rgba(255, 253, 250, 0.84);
    --panel-glass-strong: rgba(255, 253, 250, 0.96);
    --border: #d8cec3;
    --border-strong: #bcaea0;
    --text: #211e1a;
    --text-soft: #5c554e;
    --text-muted: #746c64;
    --accent: #b54708;
    --accent-hover: #933b08;
    --accent-soft: rgba(181, 71, 8, 0.13);
    --accent-border: rgba(181, 71, 8, 0.30);
    --field-bg: #fbf7f2;
    --field-bg-focus: #ffffff;
    --field-text: #211e1a;
    --neutral: #746c64;
    --theme-on-accent: #ffffff;
    --theme-page-background: radial-gradient(circle at 12% 0%, rgba(217, 119, 6, 0.13), transparent 31%), linear-gradient(180deg, #fdfaf6 0%, #f4eee7 100%);
    --theme-topbar: rgba(255, 252, 248, 0.93);
    --theme-surface: linear-gradient(180deg, #fffdfa 0%, #fbf7f2 100%);
    --theme-surface-color: #fffdfa;
    --theme-surface-raised: #f5eee7;
    --theme-input: #fbf7f2;
    --theme-shadow: 0 18px 44px rgba(65, 48, 33, 0.10);
    --theme-soft-hover: rgba(181, 71, 8, 0.07);
}

:root[data-theme="midnight"] {
    color-scheme: dark;
    --bg: #120f1f;
    --panel: #171328;
    --panel-2: #1f1930;
    --panel-3: #2a2440;
    --panel-4: #332a4d;
    --surface: #201a2b;
    --surface-2: #241d32;
    --surface-3: #3a2c75;
    --panel-border: rgba(174, 160, 220, 0.28);
    --panel-border-soft: rgba(255, 255, 255, 0.08);
    --panel-glass: rgba(255, 255, 255, 0.045);
    --panel-glass-strong: rgba(255, 255, 255, 0.075);
    --border: rgba(174, 160, 220, 0.28);
    --border-strong: rgba(174, 160, 220, 0.40);
    --text: #ffffff;
    --text-soft: #d9d4ee;
    --text-muted: #b4acca;
    --accent: #8b80f9;
    --accent-hover: #786be8;
    --accent-soft: rgba(139, 128, 249, 0.18);
    --accent-border: rgba(139, 128, 249, 0.36);
    --field-bg: #f5f7fb;
    --field-bg-focus: #ffffff;
    --field-text: #111827;
    --neutral: #d1d5db;
    --theme-on-accent: #201253;
    --theme-page-background: radial-gradient(circle at 90% 0%, rgba(124, 106, 242, 0.20), transparent 30%), linear-gradient(180deg, #19142a 0%, #120f1f 100%);
    --theme-topbar: rgba(18, 15, 31, 0.84);
    --theme-surface: linear-gradient(180deg, #1d1830 0%, #171328 100%);
    --theme-surface-color: #1d1830;
    --theme-surface-raised: #241d3a;
    --theme-input: #2a2438;
    --theme-shadow: 0 18px 46px rgba(7, 5, 16, 0.30);
    --theme-soft-hover: rgba(139, 128, 249, 0.11);
}

html[data-theme] body,
html[data-theme] .page-shell,
html[data-theme] .page-card {
    background: var(--theme-page-background) !important;
    color: var(--text) !important;
}

html[data-theme] .topbar {
    background: var(--theme-topbar) !important;
    border-color: var(--panel-border-soft) !important;
    box-shadow: 0 12px 34px color-mix(in srgb, var(--text) 8%, transparent) !important;
    backdrop-filter: blur(18px);
}

html[data-theme] .panel,
html[data-theme] .chart-panel,
html[data-theme] .metric-card,
html[data-theme] .membership-card,
html[data-theme] .supplier-card,
html[data-theme] .linked-user-card,
html[data-theme] .document-card,
html[data-theme] .modal-card,
html[data-theme] .card {
    background: var(--theme-surface) !important;
    border-color: var(--panel-border) !important;
    box-shadow: var(--theme-shadow) !important;
}

html[data-theme] .summary-item,
html[data-theme] .stat-card,
html[data-theme] .quick-edit-panel,
html[data-theme] .upload-panel,
html[data-theme] .report-link-panel,
html[data-theme] .report-item,
html[data-theme] .asset-choice,
html[data-theme] .invite-placeholder {
    border-color: var(--panel-border-soft) !important;
}

html[data-theme]:not([data-theme="midnight"]) .summary-item,
html[data-theme]:not([data-theme="midnight"]) .quick-edit-panel,
html[data-theme]:not([data-theme="midnight"]) .upload-panel,
html[data-theme]:not([data-theme="midnight"]) .report-link-panel,
html[data-theme]:not([data-theme="midnight"]) .report-item,
html[data-theme]:not([data-theme="midnight"]) .asset-choice,
html[data-theme]:not([data-theme="midnight"]) .invite-placeholder {
    background: var(--theme-surface-raised) !important;
}

html[data-theme] .brand-title,
html[data-theme] .panel-title,
html[data-theme] .modal-title,
html[data-theme] .summary-value,
html[data-theme] .membership-card__title,
html[data-theme] h1,
html[data-theme] h2,
html[data-theme] h3 {
    color: var(--text) !important;
}

html[data-theme] .brand-subtitle,
html[data-theme] .panel-copy,
html[data-theme] .summary-label,
html[data-theme] .subtle,
html[data-theme] .muted-note {
    color: var(--text-soft) !important;
}

html[data-theme]:not([data-theme="midnight"]) input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]),
html[data-theme]:not([data-theme="midnight"]) select,
html[data-theme]:not([data-theme="midnight"]) textarea {
    background: var(--theme-input) !important;
    border-color: var(--panel-border) !important;
    color: var(--field-text) !important;
}

html[data-theme] .btn-primary,
html[data-theme] .button:not(.button--ghost) {
    background: var(--accent) !important;
    color: var(--theme-on-accent) !important;
}

html[data-theme] .btn-secondary,
html[data-theme] .button--ghost {
    border-color: var(--panel-border) !important;
}

/* Image/video-first service placement on eligible client plans. */
html[data-theme] .account-ad-slot {
    border: 1px solid var(--accent-border) !important;
    background: linear-gradient(135deg, var(--accent-soft), transparent 58%), var(--theme-surface-raised) !important;
    box-shadow: var(--theme-shadow);
    overflow: hidden;
}

html[data-theme] .account-ad-slot__eyebrow,
html[data-theme] .account-ad-slot__pill {
    background: var(--accent-soft) !important;
    border-color: var(--accent-border) !important;
    color: var(--accent) !important;
}

html[data-theme] .account-ad-slot__media {
    min-height: 250px;
    background: linear-gradient(135deg, var(--panel-4), var(--panel-2)) !important;
    border-color: var(--panel-border-soft) !important;
}

html[data-theme] .account-ad-slot__media--placeholder {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 12px;
    padding: 28px;
    color: var(--text-soft);
    text-align: center;
}

.account-ad-slot__placeholder-logo {
    width: 72px;
    height: 72px;
    object-fit: contain;
    border-radius: 18px;
    filter: drop-shadow(0 12px 18px color-mix(in srgb, var(--accent) 24%, transparent));
}

.account-ad-slot__placeholder-label {
    font-weight: 800;
    color: var(--text);
}

@media (min-width: 760px) {
    html[data-theme] .account-ad-slot:has(.account-ad-slot__media) {
        grid-template-columns: minmax(280px, 0.9fr) minmax(280px, 1.1fr);
        align-items: center;
        column-gap: 24px;
    }

    html[data-theme] .account-ad-slot:has(.account-ad-slot__media) .account-ad-slot__media {
        grid-column: 1;
        grid-row: 1 / span 4;
        height: 100%;
        min-height: 280px;
        aspect-ratio: auto;
    }

    html[data-theme] .account-ad-slot:has(.account-ad-slot__media) > :not(.account-ad-slot__media) {
        grid-column: 2;
    }
}

/* Accessible appearance picker, injected consistently on every page. */
.cm-theme-picker {
    position: relative;
    z-index: 10000;
    font-family: Inter, Arial, sans-serif;
    color: var(--text);
}

.cm-theme-picker--floating {
    position: fixed;
    top: 18px;
    right: 18px;
}

.cm-theme-trigger {
    min-height: 46px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 7px 12px !important;
    border: 1px solid var(--panel-border) !important;
    border-radius: 14px !important;
    background: var(--theme-surface) !important;
    color: var(--text) !important;
    box-shadow: 0 8px 22px color-mix(in srgb, var(--text) 10%, transparent) !important;
    cursor: pointer;
}

.cm-theme-trigger:hover,
.cm-theme-trigger:focus-visible {
    background: var(--theme-surface-raised) !important;
    border-color: var(--accent) !important;
    outline: 3px solid var(--accent-soft);
}

.cm-theme-trigger__mark {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
    padding: 6px;
    border-radius: 9px;
    background: var(--accent-soft);
}

.cm-theme-trigger__mark i {
    display: block;
    width: 4px;
    border-radius: 4px;
    background: var(--accent);
}

.cm-theme-trigger__mark i:nth-child(1) { height: 8px; }
.cm-theme-trigger__mark i:nth-child(2) { height: 14px; }
.cm-theme-trigger__mark i:nth-child(3) { height: 11px; }

.cm-theme-trigger__copy {
    display: grid;
    gap: 1px;
    text-align: left;
    line-height: 1.1;
}

.cm-theme-trigger__copy small {
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.cm-theme-trigger__copy strong {
    color: var(--text);
    font-size: 0.88rem;
}

.cm-theme-trigger__chevron {
    color: var(--text-muted);
    font-size: 1rem;
}

.cm-theme-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: min(310px, calc(100vw - 32px));
    padding: 10px;
    border: 1px solid var(--panel-border);
    border-radius: 18px;
    background: var(--theme-surface);
    box-shadow: 0 24px 60px color-mix(in srgb, var(--text) 20%, transparent);
}

.cm-theme-menu[hidden] { display: none !important; }

.cm-theme-menu__title {
    margin: 4px 8px 8px;
    color: var(--text-muted);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.cm-theme-option {
    width: 100%;
    min-height: 60px !important;
    display: grid !important;
    grid-template-columns: 42px 1fr 22px;
    align-items: center !important;
    gap: 11px !important;
    padding: 8px 10px !important;
    border: 1px solid transparent !important;
    border-radius: 13px !important;
    background: transparent !important;
    color: var(--text) !important;
    box-shadow: none !important;
    text-align: left;
    cursor: pointer;
}

.cm-theme-option:hover,
.cm-theme-option:focus-visible,
.cm-theme-option[aria-checked="true"] {
    background: var(--theme-soft-hover) !important;
    border-color: var(--accent-border) !important;
    outline: none;
}

.cm-theme-option > span:nth-child(2) {
    display: grid;
    gap: 3px;
}

.cm-theme-option strong { color: var(--text); font-size: 0.92rem; }
.cm-theme-option small { color: var(--text-muted); font-size: 0.77rem; }
.cm-theme-option__check { color: var(--accent); opacity: 0; font-weight: 900; }
.cm-theme-option[aria-checked="true"] .cm-theme-option__check { opacity: 1; }

.cm-theme-swatch {
    width: 40px;
    height: 40px;
    display: block;
    padding: 7px;
    border-radius: 12px;
    border: 1px solid rgba(127, 127, 127, 0.22);
}

.cm-theme-swatch i {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 7px;
}

.cm-theme-swatch--clarity { background: #f4f7fc; }
.cm-theme-swatch--clarity i { background: #2457d6; }
.cm-theme-swatch--harbour { background: #f2f8f7; }
.cm-theme-swatch--harbour i { background: #007c83; }
.cm-theme-swatch--foundry { background: #faf7f2; }
.cm-theme-swatch--foundry i { background: #b54708; }
.cm-theme-swatch--midnight { background: #201a2b; }
.cm-theme-swatch--midnight i { background: #9a8cff; }

@media (max-width: 720px) {
    .cm-theme-picker--integrated {
        width: 100%;
    }

    .cm-theme-picker--integrated .cm-theme-trigger {
        width: 100%;
        justify-content: flex-start;
    }

    .cm-theme-trigger__chevron { margin-left: auto; }
    .cm-theme-picker--floating { top: 10px; right: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .cm-theme-trigger,
    .cm-theme-option { transition: none !important; }
}

/* HIGH-ENERGY INTERACTIVE + STATUS PALETTE */
:root[data-theme="clarity"] {
    --accent: #0057ff;
    --accent-hover: #0045cc;
    --accent-soft: rgba(0, 87, 255, 0.15);
    --accent-border: rgba(0, 87, 255, 0.42);
    --success: #00a86b;
    --ok: #00a86b;
    --warning: #f79009;
    --warn: #f79009;
    --danger: #e5484d;
    --danger-deep: #d92d20;
    --danger-soft: rgba(229, 72, 77, 0.16);
    --info: #0b8fdc;
    --semantic-success-ink: #067647;
    --semantic-warning-ink: #8a3b08;
    --semantic-danger-ink: #b42318;
    --semantic-info-ink: #075985;
    --semantic-warning-on: #231400;
}

:root[data-theme="harbour"] {
    --accent: #0097a7;
    --accent-hover: #007c89;
    --accent-soft: rgba(0, 151, 167, 0.16);
    --accent-border: rgba(0, 151, 167, 0.42);
    --success: #00a76f;
    --ok: #00a76f;
    --warning: #f79009;
    --warn: #f79009;
    --danger: #e5484d;
    --danger-deep: #d92d20;
    --danger-soft: rgba(229, 72, 77, 0.16);
    --info: #0788d1;
    --semantic-success-ink: #057a55;
    --semantic-warning-ink: #8a3b08;
    --semantic-danger-ink: #b42318;
    --semantic-info-ink: #075985;
    --semantic-warning-on: #231400;
}

:root[data-theme="foundry"] {
    --accent: #d14e00;
    --accent-hover: #aa3f00;
    --accent-soft: rgba(209, 78, 0, 0.16);
    --accent-border: rgba(209, 78, 0, 0.42);
    --success: #0e9f6e;
    --ok: #0e9f6e;
    --warning: #eaaa08;
    --warn: #eaaa08;
    --danger: #d92d20;
    --danger-deep: #b42318;
    --danger-soft: rgba(217, 45, 32, 0.16);
    --info: #2563eb;
    --semantic-success-ink: #057a55;
    --semantic-warning-ink: #854d0e;
    --semantic-danger-ink: #9b1c1c;
    --semantic-info-ink: #1d4ed8;
    --semantic-warning-on: #231400;
}

:root[data-theme="midnight"] {
    --accent: #a897ff;
    --accent-hover: #8e79ff;
    --accent-soft: rgba(168, 151, 255, 0.22);
    --accent-border: rgba(168, 151, 255, 0.52);
    --success: #32d583;
    --ok: #32d583;
    --warning: #fdb022;
    --warn: #fdb022;
    --danger: #ff6268;
    --danger-deep: #ff424b;
    --danger-soft: rgba(255, 98, 104, 0.22);
    --info: #53b1fd;
    --semantic-success-ink: #75e0a7;
    --semantic-warning-ink: #fec84b;
    --semantic-danger-ink: #fda29b;
    --semantic-info-ink: #84caff;
    --semantic-warning-on: #261800;
}

/* Primary and contextual actions */
html[data-theme] .btn-primary,
html[data-theme] .button:not(.button--ghost),
html[data-theme] :where(button[type="submit"]:not(.btn-danger):not(.btn-warn):not(.btn-secondary):not(.button--ghost):not(.btn-remedy):not(.btn-out-of-service):not(.topbar-logout)),
html[data-theme] input[type="submit"] {
    background: linear-gradient(180deg, var(--accent), var(--accent-hover)) !important;
    border-color: color-mix(in srgb, var(--accent) 78%, #000000) !important;
    color: var(--theme-on-accent) !important;
    box-shadow: 0 9px 22px color-mix(in srgb, var(--accent) 30%, transparent) !important;
}

html[data-theme] .btn-primary:hover,
html[data-theme] .button:not(.button--ghost):hover,
html[data-theme] :where(button[type="submit"]:not(.btn-danger):not(.btn-warn):not(.btn-secondary):not(.button--ghost):not(.btn-remedy):not(.btn-out-of-service):not(.topbar-logout)):hover,
html[data-theme] input[type="submit"]:hover {
    background: linear-gradient(180deg, var(--accent-hover), color-mix(in srgb, var(--accent-hover) 88%, #000000)) !important;
    box-shadow: 0 12px 26px color-mix(in srgb, var(--accent) 38%, transparent) !important;
}

html[data-theme] .btn-secondary,
html[data-theme] .button--ghost,
html[data-theme] .topbar-action-tab,
html[data-theme] .topbar-nav-link,
html[data-theme] .icon-button,
html[data-theme] .copy-id-btn,
html[data-theme] .edit-icon-btn {
    background: color-mix(in srgb, var(--accent) 17%, var(--theme-surface-raised)) !important;
    border: 1px solid color-mix(in srgb, var(--accent) 58%, var(--panel-border)) !important;
    color: var(--accent) !important;
    box-shadow: 0 7px 17px color-mix(in srgb, var(--accent) 14%, transparent) !important;
}

html[data-theme] .btn-secondary:hover,
html[data-theme] .button--ghost:hover,
html[data-theme] .topbar-action-tab:hover,
html[data-theme] .topbar-nav-link:hover,
html[data-theme] .icon-button:hover,
html[data-theme] .copy-id-btn:hover,
html[data-theme] .edit-icon-btn:hover {
    background: color-mix(in srgb, var(--accent) 27%, var(--theme-surface-raised)) !important;
    border-color: var(--accent) !important;
    transform: translateY(-1px);
}

html[data-theme] .btn-danger,
html[data-theme] .btn-out-of-service,
html[data-theme] .topbar-action-tab--danger,
html[data-theme] button.danger {
    background: linear-gradient(180deg, color-mix(in srgb, var(--danger) 80%, #ffffff), var(--danger-deep)) !important;
    border-color: var(--danger-deep) !important;
    color: #ffffff !important;
    box-shadow: 0 9px 22px color-mix(in srgb, var(--danger) 30%, transparent) !important;
}

html[data-theme] .btn-danger:hover,
html[data-theme] .btn-out-of-service:hover,
html[data-theme] .topbar-action-tab--danger:hover {
    filter: saturate(1.12) brightness(0.96);
    box-shadow: 0 12px 26px color-mix(in srgb, var(--danger) 40%, transparent) !important;
}

html[data-theme] .btn-warn,
html[data-theme] .topbar-nav-link--attention {
    background: linear-gradient(180deg, color-mix(in srgb, var(--warning) 76%, #ffffff), var(--warning)) !important;
    border-color: color-mix(in srgb, var(--warning) 78%, #000000) !important;
    color: var(--semantic-warning-on) !important;
    box-shadow: 0 9px 22px color-mix(in srgb, var(--warning) 30%, transparent) !important;
}

html[data-theme] .btn-remedy {
    background: linear-gradient(180deg, color-mix(in srgb, var(--success) 78%, #ffffff), var(--success)) !important;
    border-color: color-mix(in srgb, var(--success) 78%, #000000) !important;
    color: #ffffff !important;
    box-shadow: 0 9px 22px color-mix(in srgb, var(--success) 28%, transparent) !important;
}

html[data-theme] .topbar-logout {
    background: color-mix(in srgb, var(--danger) 15%, var(--theme-surface-raised)) !important;
    border: 1px solid color-mix(in srgb, var(--danger) 58%, var(--panel-border)) !important;
    color: var(--semantic-danger-ink) !important;
}

html[data-theme] .nav-alert-pill {
    background: var(--danger-deep) !important;
    border-color: color-mix(in srgb, var(--danger) 70%, #ffffff) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--danger) 42%, transparent) !important;
}

/* Alerts and notifications */
html[data-theme] .alert,
html[data-theme] .message,
html[data-theme] .pre-use-alert,
html[data-theme] .alert-item {
    border-width: 1px 1px 1px 5px !important;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--text) 8%, transparent) !important;
}

html[data-theme] .alert-ok,
html[data-theme] .message--ok,
html[data-theme] .message-ok {
    background: linear-gradient(90deg, color-mix(in srgb, var(--success) 22%, var(--theme-surface-raised)), var(--theme-surface-raised)) !important;
    border-color: color-mix(in srgb, var(--success) 68%, var(--panel-border)) !important;
    color: var(--semantic-success-ink) !important;
}

html[data-theme] .alert-error,
html[data-theme] .message--error,
html[data-theme] .message-error,
html[data-theme] .pre-use-alert,
html[data-theme] .alert-item {
    background: linear-gradient(90deg, color-mix(in srgb, var(--danger) 22%, var(--theme-surface-raised)), var(--theme-surface-raised)) !important;
    border-color: color-mix(in srgb, var(--danger) 70%, var(--panel-border)) !important;
    color: var(--semantic-danger-ink) !important;
}

html[data-theme] .pre-use-alert__title,
html[data-theme] .alert-error strong,
html[data-theme] .message--error strong,
html[data-theme] .message-error strong {
    color: var(--semantic-danger-ink) !important;
}

/* Badges, pills and compact state labels */
html[data-theme] .badge,
html[data-theme] .pre-use-badge,
html[data-theme] .pre-use-result-pill,
html[data-theme] .pre-use-history-badge,
html[data-theme] .coverage-count,
html[data-theme] .availability-status {
    border-width: 1px !important;
    border-style: solid !important;
    font-weight: 850 !important;
}

html[data-theme] .badge-ok,
html[data-theme] .badge-approved,
html[data-theme] .coverage-count--ok,
html[data-theme] .pre-use-result-pill:not(.pre-use-result-pill--insufficient),
html[data-theme] .pre-use-history-badge:not(.pre-use-history-badge--insufficient) {
    background: color-mix(in srgb, var(--success) 22%, var(--theme-surface-raised)) !important;
    border-color: color-mix(in srgb, var(--success) 62%, var(--panel-border)) !important;
    color: var(--semantic-success-ink) !important;
}

html[data-theme] .badge-warn,
html[data-theme] .badge-pending,
html[data-theme] .badge-inspector {
    background: color-mix(in srgb, var(--warning) 25%, var(--theme-surface-raised)) !important;
    border-color: color-mix(in srgb, var(--warning) 66%, var(--panel-border)) !important;
    color: var(--semantic-warning-ink) !important;
}

html[data-theme] .badge-danger,
html[data-theme] .pre-use-result-pill--insufficient,
html[data-theme] .pre-use-history-badge--insufficient,
html[data-theme] .availability-status--active {
    background: color-mix(in srgb, var(--danger) 22%, var(--theme-surface-raised)) !important;
    border-color: color-mix(in srgb, var(--danger) 66%, var(--panel-border)) !important;
    color: var(--semantic-danger-ink) !important;
}

html[data-theme] .badge-info,
html[data-theme] .badge-user,
html[data-theme] .badge-paused,
html[data-theme] .badge-neutral,
html[data-theme] .badge-muted,
html[data-theme] .live-account-pill {
    background: color-mix(in srgb, var(--info) 20%, var(--theme-surface-raised)) !important;
    border-color: color-mix(in srgb, var(--info) 58%, var(--panel-border)) !important;
    color: var(--semantic-info-ink) !important;
}

html[data-theme] .badge-admin,
html[data-theme] .badge-super {
    background: color-mix(in srgb, var(--accent) 21%, var(--theme-surface-raised)) !important;
    border-color: color-mix(in srgb, var(--accent) 62%, var(--panel-border)) !important;
    color: var(--accent) !important;
}

/* Dashboard tiles and finding notifications */
html[data-theme] .stat-card--total,
html[data-theme] .stat-card--accent,
html[data-theme] .tone-accent {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, var(--theme-surface-color)), var(--theme-surface-color)) !important;
    border-left-color: var(--accent) !important;
}

html[data-theme] .stat-card--danger,
html[data-theme] .stat-card--critical,
html[data-theme] .tone-danger,
html[data-theme] .inspection-status-card--danger,
html[data-theme] .inspection-status-card--critical,
html[data-theme] .asset-card--danger,
html[data-theme] .inspection-finding--danger {
    background: linear-gradient(135deg, color-mix(in srgb, var(--danger) 19%, var(--theme-surface-color)), var(--theme-surface-color)) !important;
    border-left-color: var(--danger-deep) !important;
}

html[data-theme] .stat-card--warn,
html[data-theme] .tone-warn,
html[data-theme] .inspection-status-card--warn,
html[data-theme] .asset-card--warn,
html[data-theme] .inspection-finding--warn {
    background: linear-gradient(135deg, color-mix(in srgb, var(--warning) 20%, var(--theme-surface-color)), var(--theme-surface-color)) !important;
    border-left-color: var(--warning) !important;
}

html[data-theme] .stat-card--ok,
html[data-theme] .tone-ok,
html[data-theme] .asset-card--ok {
    background: linear-gradient(135deg, color-mix(in srgb, var(--success) 18%, var(--theme-surface-color)), var(--theme-surface-color)) !important;
    border-left-color: var(--success) !important;
}

html[data-theme] .asset-card--neutral {
    background: var(--theme-surface-color) !important;
    border-color: var(--panel-border) !important;
    border-left-color: var(--border-strong) !important;
}

html[data-theme] .stat-card--info,
html[data-theme] .stat-card--paused,
html[data-theme] .tone-info,
html[data-theme] .inspection-status-card--paused,
html[data-theme] .asset-card--paused {
    background: linear-gradient(135deg, color-mix(in srgb, var(--info) 18%, var(--theme-surface-color)), var(--theme-surface-color)) !important;
    border-left-color: var(--info) !important;
}

html[data-theme] .stat-card--total .stat-value,
html[data-theme] .stat-card--accent .stat-value,
html[data-theme] .tone-accent .stat-value { color: var(--accent) !important; }
html[data-theme] .stat-card--danger .stat-value,
html[data-theme] .stat-card--critical .stat-value,
html[data-theme] .tone-danger .stat-value { color: var(--danger-deep) !important; }
html[data-theme] .stat-card--warn .stat-value,
html[data-theme] .tone-warn .stat-value { color: var(--semantic-warning-ink) !important; }
html[data-theme] .stat-card--ok .stat-value,
html[data-theme] .tone-ok .stat-value { color: var(--semantic-success-ink) !important; }
html[data-theme] .stat-card--info .stat-value,
html[data-theme] .stat-card--paused .stat-value,
html[data-theme] .tone-info .stat-value { color: var(--semantic-info-ink) !important; }

html[data-theme] .status-tab.is-active {
    background: linear-gradient(180deg, var(--accent), var(--accent-hover)) !important;
    border-color: var(--accent) !important;
    color: var(--theme-on-accent) !important;
    box-shadow: 0 7px 18px color-mix(in srgb, var(--accent) 28%, transparent) !important;
}

html[data-theme]:not([data-theme="midnight"]) .status-tab:not(.is-active) {
    background: var(--theme-surface-raised) !important;
    border-color: var(--border-strong) !important;
    color: var(--text-soft) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border-strong) 35%, transparent) !important;
}

html[data-theme]:not([data-theme="midnight"]) .status-tab:not(.is-active):hover,
html[data-theme]:not([data-theme="midnight"]) .status-tab:not(.is-active):focus-visible {
    background: color-mix(in srgb, var(--accent) 12%, var(--theme-surface-raised)) !important;
    border-color: var(--accent) !important;
    outline: 3px solid color-mix(in srgb, var(--accent) 24%, transparent);
    outline-offset: 2px;
}

html[data-theme] .status-tab-mini--paused,
html[data-theme] .finding-status-card__primary--paused {
    background: color-mix(in srgb, var(--info) 20%, var(--theme-surface-raised)) !important;
    border-color: color-mix(in srgb, var(--info) 60%, var(--panel-border)) !important;
    color: var(--semantic-info-ink) !important;
}

/* Requested refinements: unified logout shape and stronger critical/quarantine states. */
:root[data-theme="clarity"] {
    --quarantine: #3155f5;
    --quarantine-ink: #243db8;
}

:root[data-theme="harbour"] {
    --quarantine: #006edc;
    --quarantine-ink: #0755a5;
}

:root[data-theme="foundry"] {
    --quarantine: #4754d6;
    --quarantine-ink: #343fa7;
}

:root[data-theme="midnight"] {
    --quarantine: #60a5fa;
    --quarantine-ink: #93c5fd;
}

html[data-theme] .topbar-logout {
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 14px !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    line-height: 1 !important;
    cursor: pointer;
}

html[data-theme] .topbar-logout:hover {
    background: color-mix(in srgb, var(--danger) 24%, var(--theme-surface-raised)) !important;
    border-color: var(--danger) !important;
    color: var(--semantic-danger-ink) !important;
    transform: translateY(-1px);
}

html[data-theme]:not([data-theme="midnight"]) .stat-card--critical,
html[data-theme]:not([data-theme="midnight"]) .inspection-status-card--critical,
html[data-theme]:not([data-theme="midnight"]) .inspection-finding--danger:has(.finding-status-card__primary--critical) {
    background: linear-gradient(135deg, color-mix(in srgb, var(--danger) 32%, #ffffff), color-mix(in srgb, var(--danger) 11%, #ffffff)) !important;
    border: 1px solid color-mix(in srgb, var(--danger) 64%, var(--panel-border)) !important;
    border-left: 7px solid var(--danger-deep) !important;
    box-shadow: 0 12px 28px color-mix(in srgb, var(--danger) 18%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--danger) 12%, transparent) !important;
}

html[data-theme]:not([data-theme="midnight"]) .stat-card--critical .stat-label,
html[data-theme]:not([data-theme="midnight"]) .inspection-status-card--critical .inspection-status-card__label {
    color: var(--semantic-danger-ink) !important;
    font-weight: 900 !important;
}

html[data-theme]:not([data-theme="midnight"]) .stat-card--critical .stat-value,
html[data-theme]:not([data-theme="midnight"]) .inspection-status-card--critical .inspection-status-card__value {
    color: var(--danger-deep) !important;
}

html[data-theme]:not([data-theme="midnight"]) .finding-status-card__primary--critical,
html[data-theme]:not([data-theme="midnight"]) .finding-tab--yes-danger,
html[data-theme]:not([data-theme="midnight"]) .finding-tab__value--danger {
    background: var(--danger-deep) !important;
    border-color: color-mix(in srgb, var(--danger-deep) 72%, #000000) !important;
    color: #ffffff !important;
    box-shadow: 0 7px 18px color-mix(in srgb, var(--danger) 28%, transparent) !important;
}

html[data-theme] .stat-card--paused,
html[data-theme] .inspection-status-card--paused,
html[data-theme] .asset-card--paused {
    background: linear-gradient(135deg, color-mix(in srgb, var(--quarantine) 25%, var(--theme-surface-color)), color-mix(in srgb, var(--quarantine) 8%, var(--theme-surface-color))) !important;
    border-color: color-mix(in srgb, var(--quarantine) 58%, var(--panel-border)) !important;
    border-left: 7px solid var(--quarantine) !important;
    box-shadow: 0 12px 26px color-mix(in srgb, var(--quarantine) 16%, transparent) !important;
}

html[data-theme] .stat-card--paused .stat-label,
html[data-theme] .inspection-status-card--paused .inspection-status-card__label {
    color: var(--quarantine-ink) !important;
    font-weight: 900 !important;
}

html[data-theme] .stat-card--paused .stat-value,
html[data-theme] .inspection-status-card--paused .inspection-status-card__value {
    color: var(--quarantine-ink) !important;
}

html[data-theme] .badge-paused,
html[data-theme] .availability-status--active,
html[data-theme] .finding-status-card__sub,
html[data-theme] .status-tab-mini--paused,
html[data-theme] .finding-status-card__primary--paused {
    background: color-mix(in srgb, var(--quarantine) 22%, var(--theme-surface-raised)) !important;
    border-color: color-mix(in srgb, var(--quarantine) 66%, var(--panel-border)) !important;
    color: var(--quarantine-ink) !important;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--quarantine) 18%, transparent) !important;
}

html[data-theme]:not([data-theme="midnight"]) .stat-card--paused,
html[data-theme]:not([data-theme="midnight"]) .inspection-status-card--paused,
html[data-theme]:not([data-theme="midnight"]) .asset-card--paused {
    background: linear-gradient(135deg, color-mix(in srgb, var(--quarantine) 30%, #ffffff), color-mix(in srgb, var(--quarantine) 9%, #ffffff)) !important;
}

/* Checkmate — the approved gold identity, shared by every portal.
   Legacy theme keys intentionally remain stable for saved preferences. */
:root[data-theme] {
    --cm-gold: #d8b45c;
    --cm-gold-deep: #8b671d;
    --cm-metal: linear-gradient(115deg, #b18a38 0%, #f7e4a4 24%, #d8b45c 43%, #a77b28 61%, #eed58b 82%, #c69c44 100%);
    --cm-sidebar-width: 246px;
    --radius-lg: 18px;
    --radius-md: 12px;
    --radius-sm: 8px;
}
:root[data-theme="clarity"] {
    --bg: #f6f5f1; --panel: #fff; --panel-2: #f8f8f5; --panel-3: #f1eee5; --panel-4: #ece5d3;
    --surface: #fff; --surface-2: #f8f8f5; --surface-3: #eee9dc;
    --panel-border: #e1e3dd; --panel-border-soft: #e8e9e3; --panel-glass: #fff; --panel-glass-strong: #fff;
    --border: #e1e3dd; --border-strong: #b5b9b0;
    --text: #191d1b; --text-soft: #555e58; --text-muted: #69716b;
    --accent: #8b671d; --accent-hover: #705015; --accent-soft: #f4eddc; --accent-border: #d3bd85;
    --field-bg: #fff; --field-bg-focus: #fff; --field-text: #191d1b; --neutral: #69716b;
    --theme-on-accent: #fff; --theme-page-background: #f6f5f1; --theme-topbar: #f6f5f1;
    --theme-surface: #fff; --theme-surface-color: #fff; --theme-surface-raised: #f8f8f5; --theme-input: #fff;
    --theme-shadow: 0 2px 6px #17231904; --shadow-soft: 0 2px 6px #17231906; --shadow-panel: 0 4px 20px #17231908;
    --theme-soft-hover: #f4f1e9;
    --success: #168260; --ok: #168260; --warning: #b76b13; --warn: #b76b13;
    --danger: #d34e46; --danger-deep: #b83630; --danger-soft: #fbebe9; --info: #3776a0;
    --semantic-success-ink: #136447; --semantic-warning-ink: #85500b; --semantic-danger-ink: #a92e29;
    --semantic-info-ink: #245b7c; --semantic-warning-on: #422704;
    --quarantine: #597c9f; --quarantine-ink: #3e5d7a;
}
:root[data-theme="midnight"] {
    --bg: #101214; --panel: #1a1d1f; --panel-2: #212528; --panel-3: #2c2c26; --panel-4: #383326;
    --surface: #1a1d1f; --surface-2: #212528; --surface-3: #2c2c26;
    --panel-border: #353a3c; --panel-border-soft: #2d3234; --panel-glass: #1a1d1f; --panel-glass-strong: #212528;
    --border: #353a3c; --border-strong: #596160;
    --text: #f3f3ed; --text-soft: #b7beb8; --text-muted: #a4ada6;
    --accent: #d8b45c; --accent-hover: #ecd08a; --accent-soft: #322e23; --accent-border: #756038;
    --field-bg: #15181a; --field-bg-focus: #1c2022; --field-text: #f3f3ed; --neutral: #a4ada6;
    --theme-on-accent: #151719; --theme-page-background: #101214; --theme-topbar: #101214;
    --theme-surface: #1a1d1f; --theme-surface-color: #1a1d1f; --theme-surface-raised: #212528; --theme-input: #15181a;
    --theme-shadow: 0 2px 6px #00000018; --shadow-soft: 0 2px 6px #00000018; --shadow-panel: 0 4px 20px #00000020;
    --theme-soft-hover: #282a27;
    --success: #51bd94; --ok: #51bd94; --warning: #e4af5a; --warn: #e4af5a;
    --danger: #e87b72; --danger-deep: #c85049; --danger-soft: #392422; --info: #87b6d3;
    --semantic-success-ink: #82d4ae; --semantic-warning-ink: #efc987; --semantic-danger-ink: #f0a39b;
    --semantic-info-ink: #a4cbe1; --semantic-warning-on: #271c0a;
    --quarantine: #91b2d1; --quarantine-ink: #abc6df;
}
html[data-theme] {
    background: var(--bg); scrollbar-width: auto; scrollbar-color: var(--border-strong) var(--bg);
    overflow-x: hidden; overflow-y: auto !important; scroll-padding-top: 24px;
}
html[data-theme]::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-theme]::-webkit-scrollbar-thumb { border: 2px solid var(--bg); border-radius: 10px; background: var(--border-strong); }
html[data-theme] body {
    font-family: "Segoe UI Variable", "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
    font-size: 14px; line-height: 1.5; letter-spacing: -.012em; background: var(--bg) !important; color: var(--text);
    -webkit-font-smoothing: antialiased;
}
html[data-theme] button, html[data-theme] input, html[data-theme] select, html[data-theme] textarea { font: inherit; }
html[data-theme] :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
html[data-theme] [hidden] { display: none !important; }
html[data-theme] button:disabled, html[data-theme] input:disabled { opacity: .52; cursor: not-allowed; }
html[data-theme] .cm-workspace :is(.page-shell, .page-card, .shell) {
    background: var(--bg) !important; max-width: none; width: 100%; min-height: 100vh;
    border: 0; border-radius: 0; margin: 0; box-shadow: none; padding: 0;
}
html[data-theme] body.cm-has-sidebar { padding-left: var(--cm-sidebar-width); }
html[data-theme] .cm-workspace .topbar {
    padding: 30px 34px 24px; background: var(--bg) !important; border: 0 !important; border-bottom: 1px solid var(--panel-border-soft) !important;
    box-shadow: none !important; gap: 18px; align-items: center; margin: 0; border-radius: 0;
}
html[data-theme] .cm-workspace .topbar .brand-logo { width: 44px; height: 44px; border-radius: 12px; box-shadow: none; background: #101214; }
html[data-theme] .cm-has-sidebar .topbar .brand-logo { display: none; }
html[data-theme] .cm-workspace .brand-title, html[data-theme] .cm-page-title { font-size: clamp(25px, 2.2vw, 34px); font-weight: 650; letter-spacing: -.045em; line-height: 1.12; }
html[data-theme] .cm-workspace .brand-subtitle, html[data-theme] .cm-page-description { font-size: 13px; font-weight: 400; margin: 9px 0 0; max-width: 660px; line-height: 1.6; }
html[data-theme] .cm-page-eyebrow, html[data-theme] .cm-section-kicker {
    display: block; font-size: 10px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--accent); margin: 0 0 9px;
}
html[data-theme] .cm-workspace .content, html[data-theme] .cm-workspace .content-grid {
    padding: 28px 34px 46px; max-width: 1800px; margin: 0 auto; width: 100%;
}
html[data-theme] .cm-workspace .topbar-controls { flex: 1 1 500px; gap: 8px; }
html[data-theme] .cm-workspace .topbar-toolbar { justify-content: flex-end; gap: 10px; }
html[data-theme] .cm-workspace .topbar-actions { margin-left: auto; gap: 8px; }
html[data-theme] .cm-workspace .topbar-utility-row:empty,
html[data-theme] .cm-workspace .page-nav-actions:empty { display: none; }
html[data-theme] .cm-workspace .asset-action-tabs {
    border: 0; padding: 0; gap: 8px; background: none; border-radius: 0; justify-content: flex-end;
}
html[data-theme] .cm-workspace .topbar-meta { gap: 10px; margin-top: 0; }
html[data-theme] .cm-workspace .topbar-meta__item { border: 1px solid var(--border); background: var(--panel) !important; border-radius: 10px; padding: 10px 14px; }
html[data-theme] .cm-workspace .topbar-meta__value { font-weight: 600; color: var(--text); }
html[data-theme] .cm-workspace .topbar-meta__label { font-weight: 500; color: var(--text-muted); font-size: 11px; }
html[data-theme] .cm-workspace :is(.panel, .chart-panel, .membership-card, .supplier-card, .linked-user-card, .document-card, .card) {
    border: 1px solid var(--panel-border); border-radius: 16px; box-shadow: var(--theme-shadow) !important;
}
html[data-theme] .cm-workspace .panel { padding: 24px; margin-bottom: 22px; }
html[data-theme] .cm-workspace :is(.panel-title, .chart-title) { font-size: 17px; font-weight: 650; letter-spacing: -.025em; margin: 0 0 7px; }
html[data-theme] .cm-workspace :is(.panel-copy, .chart-copy, .modal-copy) { font-size: 13px; font-weight: 400; line-height: 1.65; }
html[data-theme] .cm-overview-banner {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px;
    padding: 30px 32px; margin-bottom: 24px; border: 1px solid #393a31; border-radius: 18px;
    background: radial-gradient(ellipse at 92% 20%, #b1903c21, transparent 52%), #151719; color: #f3f2e9;
}
html[data-theme] .cm-overview-banner h2 { color: #faf8f0 !important; font-size: clamp(25px, 2.4vw, 36px); font-weight: 600; letter-spacing: -.045em; line-height: 1.18; margin: 0 0 10px; }
html[data-theme] .cm-overview-banner p { color: #bcc1b8 !important; max-width: 610px; font-size: 13px; line-height: 1.65; }
html[data-theme] .cm-overview-banner .cm-section-kicker { color: #e2c57b !important; }
html[data-theme] .cm-overview-banner .btn { color: #191b18 !important; background: var(--cm-metal) !important; border-color: #c7a653 !important; }
html[data-theme] .cm-workspace :is(.stat-card, .metric-card, .defect-card, .metric) {
    background: var(--panel) !important; border: 1px solid var(--panel-border) !important; border-radius: 14px;
    padding: 18px 20px; box-shadow: none !important; min-width: 0;
}
html[data-theme] .cm-workspace :is(.stat-label, .metric-label) { color: var(--text-soft) !important; font-size: 12px; font-weight: 500 !important; line-height: 1.5; }
html[data-theme] .cm-workspace :is(.stat-value, .metric-value) { font-size: clamp(26px, 2.5vw, 36px); font-weight: 600; letter-spacing: -.05em; font-variant-numeric: tabular-nums; line-height: 1.2; }
html[data-theme] .cm-workspace :is(.stat-card--critical, .stat-card--danger, .tone-danger) { border-top: 3px solid var(--danger-deep) !important; }
html[data-theme] .cm-workspace :is(.stat-card--warn, .tone-warn) { border-top: 3px solid var(--warning) !important; }
html[data-theme] .cm-workspace :is(.stat-card--ok, .tone-ok) { border-top: 3px solid var(--success) !important; }
html[data-theme] .cm-workspace :is(.stat-card--total, .stat-card--accent, .tone-accent) { border-top: 3px solid var(--cm-gold) !important; }
html[data-theme] .cm-workspace :is(.stat-card--paused, .stat-card--info, .tone-info) { border-top: 3px solid var(--quarantine) !important; }
html[data-theme] .cm-workspace .stats-grid { gap: 12px; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); }
html[data-theme] .cm-workspace .defect-grid { gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
html[data-theme] .cm-workspace .chart-bar__fill { background: var(--cm-metal) !important; border-radius: 5px 5px 0 0; }
html[data-theme] .cm-workspace .chart-bar__track { background: var(--panel-2); }
html[data-theme] .cm-workspace :is(.summary-item, .report-item, .report-link-panel, .asset-choice, .status-card) { background: var(--panel-2) !important; border: 1px solid var(--border); border-radius: 12px; }
html[data-theme] .cm-workspace .summary-value { font-size: 14px; font-weight: 600; }
html[data-theme] .cm-workspace .summary-label { font-size: 11px; font-weight: 500; }
html[data-theme] .cm-workspace :is(.table-wrap, .table-wrapper, .table-container, .question-table-wrap) { border: 1px solid var(--border); border-radius: 12px; overflow-x: auto; background: var(--panel); }
html[data-theme] .cm-workspace table { border-collapse: collapse; background: var(--panel); color: var(--text); }
html[data-theme] .cm-workspace th {
    background: var(--panel-2) !important; color: var(--text-soft) !important; padding: 13px 15px;
    font-size: 10px; line-height: 1.5; text-transform: uppercase; letter-spacing: .07em; font-weight: 600;
    border-bottom: 1px solid var(--border) !important;
}
html[data-theme] .cm-workspace td { background: transparent; padding: 16px 15px; font-size: 12px; border-bottom: 1px solid var(--panel-border-soft); }
html[data-theme] .cm-workspace tbody tr:nth-child(even) { background: var(--panel) !important; }
html[data-theme] .cm-workspace tbody tr:hover { background: var(--theme-soft-hover) !important; }
html[data-theme] .cm-workspace td strong { font-weight: 600; }
html[data-theme] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), select, textarea) {
    border: 1px solid var(--panel-border) !important; background: var(--theme-input) !important; color: var(--field-text) !important;
    border-radius: 9px; box-shadow: none; min-height: 43px; font-size: 13px;
}
html[data-theme] input::placeholder, html[data-theme] textarea::placeholder { color: var(--text-muted); opacity: 1; }
html[data-theme] :is(input, select, textarea):focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-soft); outline: none; }
html[data-theme] :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--accent); }
html[data-theme] .cm-workspace label { color: var(--text-soft); font-size: 12px; font-weight: 550; }
html[data-theme] .cm-workspace :is(.btn, .button, button) { font-weight: 600; font-size: 12px; border-radius: 9px; box-shadow: none !important; transition: background-color .16s, border-color .16s; }
html[data-theme] .cm-workspace :is(.btn-primary, .button:not(.button--ghost)),
html[data-theme] .cm-workspace button[type="submit"]:not(.btn-danger):not(.btn-warn):not(.btn-secondary):not(.button--ghost):not(.btn-remedy):not(.btn-out-of-service):not(.topbar-logout):not(.cm-signout) {
    background: var(--accent) !important; color: var(--theme-on-accent) !important; border: 1px solid var(--accent) !important;
}
html[data-theme] .cm-workspace :is(.btn-secondary, .button--ghost, .topbar-action-tab, .topbar-nav-link, .icon-button, .copy-id-btn, .edit-icon-btn) {
    background: var(--panel) !important; border: 1px solid var(--panel-border) !important; color: var(--text) !important; box-shadow: none !important;
}
html[data-theme] .cm-workspace :is(.btn-secondary, .button--ghost, .topbar-action-tab, .topbar-nav-link):hover {
    background: var(--theme-soft-hover) !important; border-color: var(--accent-border) !important; transform: none;
}
html[data-theme] .cm-workspace :is(.btn-danger, .btn-out-of-service, .topbar-action-tab--danger) { background: var(--danger-soft) !important; border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--border)) !important; color: var(--semantic-danger-ink) !important; animation: none; }
html[data-theme] .cm-workspace .btn-remedy { background: var(--semantic-success-ink) !important; color: var(--panel) !important; }
html[data-theme] .cm-workspace .btn-warn { background: color-mix(in srgb, var(--warning) 14%, var(--panel)) !important; color: var(--semantic-warning-ink) !important; }
html[data-theme] .cm-workspace :is(.badge, .pre-use-badge, .coverage-count, .live-account-pill, .availability-status) { font-weight: 600 !important; font-size: 10px; border-radius: 6px; box-shadow: none !important; }
html[data-theme] .cm-workspace .status-tabs { gap: 6px; padding-bottom: 15px; }
html[data-theme] .cm-workspace .status-tab { border-radius: 7px; box-shadow: none !important; min-height: 35px; font-size: 11px; font-weight: 600; padding: 8px 12px; }
html[data-theme] .cm-workspace .status-tab.is-active { background: var(--text) !important; border-color: var(--text) !important; color: var(--panel) !important; }
html[data-theme] .cm-workspace .cm-user-pill { background: var(--panel-2) !important; border-color: var(--border) !important; color: var(--text-soft) !important; border-radius: 30px; padding: 7px 12px; font-size: 11px; }
html[data-theme] .cm-workspace .alert { border-width: 1px 1px 1px 3px !important; border-radius: 10px; box-shadow: none !important; font-weight: 500; font-size: 13px; }
html[data-theme] .cm-workspace .modal-backdrop { background: #0a0f15a6; backdrop-filter: blur(4px); z-index: 3000; }
html[data-theme] .cm-workspace .modal-backdrop--confirm { z-index: 3100; }
html[data-theme="clarity"] .badge-admin,
html[data-theme="clarity"] .badge-super { color: #705015 !important; }
html[data-theme] .cm-workspace .modal-card { padding: 26px; max-height: calc(100dvh - 40px); overflow-y: auto; }
html[data-theme] .cm-workspace .modal-title { font-size: 23px; font-weight: 650; letter-spacing: -.03em; }
html[data-theme] .cm-workspace .selected-chip { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-border); }

/* Asset records need an opaque themed surface. The legacy cards used a
   transparent white gradient, which became a bright sheet in dark mode when
   expanded or composited by the browser. */
html[data-theme="midnight"] .cm-assets .asset-card {
    background: #1a1d1f !important;
    border-color: #3a4141 !important;
    color: var(--text) !important;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.22) !important;
}

html[data-theme="midnight"] .cm-assets .asset-card--danger {
    background: linear-gradient(100deg, rgba(232, 123, 114, 0.13), #1a1d1f 34%) !important;
    border-left-color: var(--danger-deep) !important;
}

html[data-theme="midnight"] .cm-assets .asset-card--warn {
    background: linear-gradient(100deg, rgba(228, 175, 90, 0.13), #1a1d1f 34%) !important;
    border-left-color: var(--warning) !important;
}

html[data-theme="midnight"] .cm-assets .asset-card--ok {
    background: linear-gradient(100deg, rgba(81, 189, 148, 0.11), #1a1d1f 34%) !important;
    border-left-color: var(--success) !important;
}

html[data-theme="midnight"] .cm-assets .asset-card--paused {
    background: linear-gradient(100deg, rgba(89, 124, 159, 0.18), #1a1d1f 34%) !important;
    border-left-color: var(--quarantine) !important;
}

html[data-theme="midnight"] .cm-assets :is(.asset-card-body, .asset-summary-row) {
    color: var(--text) !important;
}

html[data-theme="midnight"] .cm-assets .asset-card-body {
    border-top-color: var(--panel-border-soft) !important;
}

html[data-theme="midnight"] .cm-assets .asset-summary-row:hover {
    background: rgba(216, 180, 92, 0.07) !important;
}

/* Ivory & Gold contrast and component-definition pass.
   Several feature views began life on the dark palette and still carry translucent
   white borders or pale foregrounds. Keep those treatments in Onyx & Gold, while
   giving the light workspace deliberate nested surfaces and readable semantic ink. */
html[data-theme="clarity"] .cm-workspace :is(.user-card, .provider-card) {
    background: var(--panel-2) !important;
    border: 1px solid #cfd3ca !important;
    box-shadow: 0 3px 12px rgba(25, 29, 27, 0.06) !important;
}

html[data-theme="clarity"] .cm-workspace .provider-card {
    border-left: 4px solid var(--accent) !important;
}

html[data-theme="clarity"] .cm-workspace :is(.meta-box, .provider-box, .form-card) {
    background: var(--panel) !important;
    border: 1px solid #d4d7cf !important;
    box-shadow: 0 1px 3px rgba(25, 29, 27, 0.035) !important;
}

html[data-theme="clarity"] .cm-workspace :is(.meta-box--date, .provider-box:not(.provider-box--empty)) {
    background: color-mix(in srgb, var(--accent) 7%, var(--panel)) !important;
    border-color: color-mix(in srgb, var(--accent) 34%, #d4d7cf) !important;
}

html[data-theme="clarity"] .cm-workspace :is(.asset-card-body, .provider-head) {
    border-color: #d4d7cf !important;
}

html[data-theme="clarity"] .cm-workspace .report-panel {
    background: var(--panel-3) !important;
    border: 1px solid #d1cbbd !important;
    box-shadow: inset 0 0 0 1px rgba(139, 103, 29, 0.035) !important;
}

html[data-theme="clarity"] .cm-workspace .report-section {
    background: var(--panel) !important;
    border: 1px solid #cfd3ca !important;
}

html[data-theme="clarity"] .cm-workspace .linked-assets {
    background: var(--panel-3) !important;
    border: 1px solid #d1cbbd !important;
}

html[data-theme="clarity"] .cm-workspace .empty-state {
    background: var(--panel-2) !important;
    border-color: var(--border-strong) !important;
    color: var(--text-soft) !important;
}

html[data-theme="clarity"] .cm-workspace .gap-item {
    background: color-mix(in srgb, var(--warning) 5%, var(--panel)) !important;
    border: 1px solid color-mix(in srgb, var(--warning) 38%, #d4d7cf) !important;
    box-shadow: 0 2px 8px rgba(25, 29, 27, 0.045) !important;
}

html[data-theme="clarity"] .cm-workspace .alert-item {
    background: color-mix(in srgb, var(--danger) 6%, var(--panel)) !important;
    border-color: color-mix(in srgb, var(--danger) 34%, #d4d7cf) !important;
}

html[data-theme="clarity"] .cm-workspace :is(.provider-title, .report-section__title) {
    color: var(--text) !important;
}

html[data-theme="clarity"] .cm-workspace :is(.provider-title, .linked-assets__title) {
    color: var(--accent) !important;
}

html[data-theme="clarity"] .cm-workspace :is(.provider-type, .linked-chip, .selected-chip, .pre-use-badge),
html[data-theme="clarity"] .cm-workspace.cm-checks .badge {
    background: var(--accent-soft) !important;
    border: 1px solid var(--accent-border) !important;
    color: var(--accent) !important;
}

html[data-theme="clarity"] .cm-workspace :is(.coverage-count, .account-ad-slot__eyebrow, .badge-warn, .badge-pending, .badge-inspector) {
    background: color-mix(in srgb, var(--warning) 10%, var(--panel)) !important;
    border: 1px solid color-mix(in srgb, var(--warning) 42%, var(--border)) !important;
    color: var(--semantic-warning-ink) !important;
}

html[data-theme="clarity"] .cm-workspace :is(.coverage-count--ok, .badge-approved, .alert-ok, .pending-approval-empty, .pre-use-result-pill, .pre-use-history-badge) {
    background: color-mix(in srgb, var(--success) 10%, var(--panel)) !important;
    border-color: color-mix(in srgb, var(--success) 42%, var(--border)) !important;
    color: var(--semantic-success-ink) !important;
}

html[data-theme="clarity"] .cm-workspace :is(.badge-danger, .message--error, .message-error, .alert-error, .pre-use-alert__title, .pre-use-result-pill--insufficient, .pre-use-history-badge--insufficient) {
    color: var(--semantic-danger-ink) !important;
}

html[data-theme="clarity"] .cm-workspace :is(.message--error, .message-error, .alert-error, .pre-use-result-pill--insufficient, .pre-use-history-badge--insufficient) {
    background: var(--danger-soft) !important;
    border-color: color-mix(in srgb, var(--danger) 42%, var(--border)) !important;
}

html[data-theme="clarity"] .cm-account .password-grid {
    align-items: start;
}

html[data-theme="clarity"] .cm-account .password-grid .field {
    align-self: start;
}

/* Persistent navigation. No route or permission decision lives in CSS. */
.cm-icon { flex: 0 0 auto; vertical-align: middle; }
html[data-theme] .cm-sidebar {
    position: fixed; z-index: 1100; left: 0; top: 0; bottom: 0; width: var(--cm-sidebar-width);
    display: flex; flex-direction: column; padding: 28px 18px 22px; background: #101214; color: #d3d6d1;
    border-right: 1px solid #30332d; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
}
html[data-theme] .cm-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #f1db9f; }
html[data-theme] .cm-brand img { flex: none; width: 45px; height: 45px; object-fit: contain; border-radius: 10px; background: #101214; }
html[data-theme] .cm-brand strong { display: block; font-size: 24px; letter-spacing: -.055em; line-height: 1.1; font-weight: 600; color: #ebd296; }
html[data-theme] .cm-brand small { display: block; margin-top: 6px; font-size: 8px; letter-spacing: .2em; color: #b4ad94; }
html[data-theme] .cm-workspace-label { display: flex; align-items: center; gap: 9px; border: 1px solid #353830; border-radius: 9px; padding: 10px 12px; margin: 30px 0 27px; color: #d9d9cd; font-size: 11px; }
.cm-workspace-dot { height: 6px; width: 6px; border-radius: 50%; background: #d8b45c; box-shadow: 0 0 0 3px #d8b45c13; }
html[data-theme] .cm-nav-caption { margin: 0 12px 12px; color: #959c92; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; }
html[data-theme] .cm-nav { display: grid; gap: 6px; }
html[data-theme] .cm-sidebar a.cm-nav-link {
    display: flex; align-items: center; justify-content: flex-start; gap: 12px; width: 100%; min-height: 44px;
    padding: 11px 12px; border: 1px solid transparent !important; border-radius: 9px;
    background: transparent !important; color: #b7bfb8 !important; box-shadow: none !important;
    font-size: 12px; font-weight: 500; text-decoration: none; line-height: 1.4; text-align: left; transform: none;
}
html[data-theme] .cm-sidebar a.cm-nav-link:hover { background: #20241f !important; color: #fff !important; }
html[data-theme] .cm-sidebar a.cm-nav-link[aria-current="page"] { background: #2a281e !important; color: #e8ce87 !important; border-color: #53452a !important; }
html[data-theme] .cm-sidebar .nav-alert-pill { margin-left: auto; font-size: 9px; min-width: 18px; height: 18px; box-shadow: none !important; }
html[data-theme] .cm-sidebar-bottom { margin-top: auto; padding-top: 40px; }
html[data-theme] .cm-session-actions form { margin: 9px 0 0 !important; width: 100%; }
html[data-theme] .cm-sidebar .cm-signout { display: flex; align-items: center; justify-content: flex-start; gap: 12px; width: 100%; padding: 11px 12px; border: 0 !important; background: transparent !important; color: #b3bab2 !important; font-size: 12px; text-align: left; min-height: 42px; }
html[data-theme] .cm-sidebar .cm-signout:hover { background: #22241f !important; color: #f1d29d !important; }
html[data-theme] .cm-brand-promise { color: #949d92; font-size: 10px; line-height: 1.8; margin: 26px 12px 0; }
html[data-theme] .cm-brand-promise span { color: #d7bd7c; }
html[data-theme] .cm-theme-trigger { border-radius: 10px !important; min-height: 42px !important; box-shadow: none !important; font-weight: 500; }
html[data-theme] .cm-sidebar .cm-theme-trigger { width: 100%; padding: 11px 12px !important; background: #1b1e1d !important; border-color: #353a32 !important; color: #dac88e !important; }
html[data-theme] .cm-sidebar .cm-theme-trigger__copy strong { color: #d7dccc; font-size: 11px; font-weight: 500; }
html[data-theme] .cm-sidebar .cm-theme-trigger__copy small { color: #939d92; font-size: 8px; font-weight: 500; }
html[data-theme] .cm-theme-trigger__chevron { margin-left: auto; }
html[data-theme] .cm-theme-swatch--clarity { background: #f6f5f1; }
html[data-theme] .cm-theme-swatch--midnight { background: #101214; }
html[data-theme] .cm-theme-swatch i { background: var(--cm-metal); }
html[data-theme] .cm-theme-option { border-radius: 9px !important; font-weight: 500; }
html[data-theme] .cm-theme-option strong { font-weight: 600; }
html[data-theme] .cm-theme-menu { border-radius: 14px; box-shadow: 0 12px 40px #00000026; }
html[data-theme] .cm-sidebar .cm-theme-menu { left: 0; right: auto; top: auto; bottom: calc(100% + 10px); width: 208px; }
html[data-theme] .cm-sidebar .cm-theme-option { grid-template-columns: 30px 1fr 14px; gap: 7px !important; padding: 7px 5px !important; }
html[data-theme] .cm-sidebar .cm-theme-swatch { height: 30px; width: 30px; padding: 5px; border-radius: 7px; }
html[data-theme] .cm-sidebar .cm-theme-option strong { font-size: 11px; }
html[data-theme] .cm-sidebar .cm-theme-option small { font-size: 10px; }
.cm-mobile-bar, .cm-nav-backdrop { display: none !important; }
.cm-skip-link { position: fixed; top: -100px; left: 260px; padding: 12px 20px; z-index: 15000; background: var(--panel); color: var(--text); border: 2px solid var(--accent); border-radius: 8px; }
.cm-skip-link:focus { top: 12px; }
@media (max-width: 1280px) {
    :root[data-theme] { --cm-sidebar-width: 220px; }
    html[data-theme] .cm-sidebar { padding: 24px 12px 18px; }
    html[data-theme] .cm-brand strong { font-size: 21px; }
    html[data-theme] .cm-brand img { width: 39px; height: 39px; }
    html[data-theme] .cm-workspace .topbar { padding: 25px 24px 22px; }
    html[data-theme] .cm-workspace .content, html[data-theme] .cm-workspace .content-grid { padding: 24px; }
}
@media (max-width: 1024px) {
    html[data-theme] body.cm-has-sidebar { padding-left: 0; padding-top: 64px; }
    html[data-theme] .cm-sidebar { width: 250px; transform: translateX(-100%); visibility: hidden; top: 64px; transition: transform .2s, visibility .2s; }
    html[data-theme] .cm-navigation-open .cm-sidebar { transform: translateX(0); visibility: visible; }
    html[data-theme] .cm-mobile-bar { display: flex !important; position: fixed; left: 0; right: 0; top: 0; height: 64px; z-index: 1200; padding: 0 18px; background: #101214; align-items: center; justify-content: space-between; border-bottom: 1px solid #353830; }
    html[data-theme] .cm-mobile-bar .cm-brand img { width: 34px; height: 34px; }
    html[data-theme] .cm-mobile-bar .cm-brand strong { font-size: 21px; }
    html[data-theme] .cm-menu-toggle { height: 40px; width: 40px; min-height: 40px; padding: 8px; background: #202420; color: #e2cc92; border: 1px solid #454534; border-radius: 9px; display: grid; place-items: center; }
    html[data-theme] .cm-navigation-open .cm-nav-backdrop { display: block !important; position: fixed; inset: 64px 0 0; z-index: 1050; width: 100%; height: calc(100dvh - 64px); background: #0008; border: 0; border-radius: 0; }
    html[data-theme] body.cm-navigation-open { overflow: hidden !important; }
    html[data-theme] .cm-workspace .topbar-controls { flex-basis: 100%; }
    html[data-theme] .cm-workspace .topbar-toolbar { justify-content: flex-start; flex-wrap: wrap; }
    html[data-theme] .cm-workspace .asset-action-tabs { justify-content: flex-start; }
    html[data-theme] .cm-workspace .topbar-actions { margin-left: 0; }
    .cm-skip-link { left: 16px; }
}
@media (max-width: 640px) {
    html[data-theme] .cm-assets .topbar-toolbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    html[data-theme] .cm-assets .topbar-toolbar :is(.asset-action-tabs, .page-nav-actions) { display: contents; }
    html[data-theme] .cm-assets .topbar-toolbar :is(.btn, button) { width: 100%; min-width: 0; padding: 8px; }
    html[data-theme] .cm-workspace .topbar { align-items: stretch; padding: 22px 16px; gap: 16px; }
    html[data-theme] .cm-workspace .content, html[data-theme] .cm-workspace .content-grid { padding: 18px 14px 32px; }
    html[data-theme] .cm-workspace .panel { padding: 18px 16px; border-radius: 13px; }
    html[data-theme] .cm-overview-banner { padding: 24px 22px; border-radius: 14px; }
    html[data-theme] .cm-workspace .stats-grid, html[data-theme] .cm-workspace .defect-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    html[data-theme] .cm-workspace :is(.stat-card, .metric-card, .defect-card) { padding: 15px; }
    html[data-theme] .cm-workspace :is(.btn, .button) { min-height: 42px; }
    html[data-theme] .cm-workspace .modal-card { padding: 20px 16px; }
    html[data-theme] .cm-theme-picker--floating { right: 12px; top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
@media print {
    html[data-theme] body.cm-has-sidebar { padding: 0 !important; background: #fff !important; }
    .cm-sidebar, .cm-mobile-bar, .cm-nav-backdrop, .cm-theme-picker, .cm-skip-link { display: none !important; }
    html[data-theme] .cm-workspace .panel { break-inside: avoid; box-shadow: none !important; }
}