/*
 * VARIO color themes.
 *
 * This is the final color-only layer of the application. Shared components
 * own geometry; this file maps their semantic tokens to the Light and Dark
 * user profiles and neutralizes legacy hard-coded colors without changing
 * dimensions, spacing or behavior.
 */

:root,
html[data-vario-theme="light"],
html[data-vario-theme="windows-light"] {
    color-scheme: light;
    --vario-accent: #1464ed;
    --vario-app-bg: #f2f5f9;
    --vario-shell-bg: #f2f5f9;
    --vario-nav-bg: #134f8c;
    --vario-brand-bg: #134f8c;
    --vario-brand-border: #0d3d70;
    --vario-brand-muted: #d0e0f1;
    --vario-titlebar-bg: #ffffff;
    --vario-statusbar-bg: #e4ebf3;
    --vario-content-bg: #f2f5f9;
    --vario-workbench-bg: #f2f5f9;
    --vario-toolbar-bg: #f7f9fc;
    --vario-surface: #ffffff;
    --vario-surface-alt: #f2f5f9;
    --vario-surface-muted: #e4ebf3;
    --vario-surface-hover: #edf4ff;
    --vario-border: #d4dfed;
    --vario-border-strong: #b4c7df;
    --vario-border-soft: #e4ebf3;
    --vario-text: #092b53;
    --vario-text-strong: #092b53;
    --vario-text-muted: #58708d;
    --vario-active-text: #ffffff;
    --vario-active-bg: #1464ed;
    --vario-grid-bg: #ffffff;
    --vario-grid-header-bg: #f7f9fc;
    --vario-grid-hover-bg: #edf4ff;
    --vario-component-list-row-hover-bg: #dfeeff;
    --vario-component-list-row-selected-bg: #195fb7;
    --vario-component-list-row-selected-text: #ffffff;
    --vario-component-list-row-selected-accent: #88c7ff;
    --vario-input-bg: #ffffff;
    --vario-input-readonly-bg: #f7f9fc;
    --vario-modal-bg: #ffffff;
    --vario-modal-body-bg: var(--vario-modal-bg, var(--vario-surface));
    --vario-empty-bg: #f7f9fc;
    --vario-empty-border: #d4dfed;
    --vario-preview-border: #d4dfed;
    --vario-window-header-bg: #134f8c;
    --vario-window-frame-border: #134f8c;
    --vario-window-overlay: rgba(18, 36, 62, 0.30);
    --vario-menu-bg: #ffffff;
    --vario-menu-hover-bg: #edf4ff;
    --vario-menu-shadow: 0 14px 30px rgba(7, 27, 61, 0.16);

    --vario-color-primary-500: #2377ff;
    --vario-color-primary-600: #1464ed;
    --vario-color-cobalt-700: #134f8c;
    --vario-color-cobalt-800: #0d3d70;
    --vario-color-cobalt-900: #061b3f;
    --vario-color-surface-page: #f2f5f9;
    --vario-color-surface-module: #e4ebf3;
    --vario-color-surface-panel: #f2f5f9;
    --vario-color-surface-card: #ffffff;
    --vario-color-surface-subtle: #f7f9fc;
    --vario-color-surface-muted: #f7f9fc;
    --vario-color-surface-selected: #e8f1ff;
    --vario-color-border-soft: #d4dfed;
    --vario-color-border-subtle: #e4ebf3;
    --vario-color-border-field: #c7d7ea;
    --vario-color-border-muted: #e4ebf3;
    --vario-color-border-grid-top: #d4dfed;
    --vario-color-border-tabs: #d4dfed;
    --vario-color-border-frame: #134f8c;
    --vario-color-text-strong: #092b53;
    --vario-color-text-default: #092b53;
    --vario-color-text-heading: #123960;
    --vario-color-text-muted: #58708d;
    --vario-color-text-subtle: #6b7f98;
    --vario-color-text-disabled: #91a0b4;
    --vario-color-text-on-primary: #ffffff;
    --vario-color-text-rail-inactive: #092b53;
    --vario-color-focus-ring: #5eabff;
    --vario-gradient-grid-header: #f7f9fc;
    --vario-gradient-primary-action: linear-gradient(180deg, #2377ff 0%, #1464ed 100%);
    --vario-gradient-clear-action: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
    --vario-gradient-window-header: #134f8c;

    --vario-sidebar-background: #134f8c;
    --vario-sidebar-foreground: #f4f8ff;
    --vario-sidebar-muted: #d0e0f1;
    --vario-sidebar-border: #0d3d70;
    --vario-sidebar-hover: #1b5d9f;
    --vario-sidebar-active-background: #e8f1ff;
    --vario-sidebar-active-foreground: #123960;
    --vario-sidebar-active-border: #b4d0f5;
    --vario-sidebar-child-active-background: #dceaff;
    --vario-sidebar-accent: #5eabff;
    --vario-sidebar-branch: #7faad2;
    --vario-sidebar-press-shadow: rgba(4, 31, 62, 0.34);

    --vario-component-list-bg: #f2f5f9;
    --vario-component-module-bg: #e4ebf3;
    --vario-component-panel-bg: #f2f5f9;
    --vario-component-card-bg: #ffffff;
    --vario-component-rail-bg: #e4ebf3;
    --vario-component-rail-border: #d4dfed;
    --vario-component-rail-text: #092b53;
    --vario-component-topbar-separator: #d4dfed;
    --vario-component-topbar-action-text: var(--vario-color-primary-500);
    --vario-component-topbar-action-hover-text: var(--vario-color-primary-500);
    --vario-component-topbar-action-hover-bg: var(--vario-grid-hover-bg);
    --vario-component-document-subcategory-row-bg: #f2f5f9;
    --vario-component-document-subcategory-segment-bg: #ffffff;
    --vario-component-document-subcategory-segment-border: #d4dfed;
    --vario-component-document-subcategory-segment-text: #58708d;
    --vario-component-document-subcategory-segment-hover-bg: #edf4ff;
    --vario-component-document-subcategory-active-bg: #1464ed;
    --vario-component-document-subcategory-active-text: #ffffff;
    --vario-component-document-window-tabs-bg: #e4ebf3;
    --vario-component-document-window-tab-bg: #ffffff;
    --vario-component-document-window-tab-icon-bg: #f7f9fc;
    --vario-component-document-window-tab-border: #d4dfed;
    --vario-component-document-window-tab-text: #58708d;
    --vario-component-document-window-tab-active-bg: #edf4ff;
    --vario-component-document-window-tab-active-border: #b4d0f5;
    --vario-component-document-window-tab-active-text: #1464ed;
    --vario-component-document-window-tab-active-icon-bg: #1464ed;
    --vario-component-primary-action-bg: var(--vario-gradient-primary-action);
    --vario-component-primary-action-border: #1464ed;
    --vario-component-primary-action-hover-bg: #0751d8;
    --vario-component-primary-action-hover-border: #0751d8;
    --vario-component-primary-action-active-bg: #0647bd;
    --vario-component-primary-action-active-border: #0647bd;
    --vario-component-primary-action-disabled-bg: #c7d4e7;
    --vario-component-primary-action-disabled-border: #b7c6dc;
    --vario-component-primary-action-disabled-text: #ffffff;

    --vario-module-shell-bg: #f2f5f9;
    --vario-module-content-bg: #f2f5f9;
    --vario-module-command-rail-bg: #e4ebf3;
    --vario-module-command-rail-border: #d4dfed;
    --vario-module-command-rail-frame-border: #d4dfed;
    --vario-module-command-rail-inactive-text: #58708d;
    --vario-list-border-soft: #d4dfed;
    --vario-list-border-subtle: #e4ebf3;
    --vario-list-grid-header-top-border: #d4dfed;
    --vario-list-grid-header-bg: #f7f9fc;
    --vario-list-grid-header-text: #092b53;
    --vario-list-accent: #1464ed;

    --vario-auth-canvas: #f2f5f9;
    --vario-auth-navy: #134f8c;
    --vario-auth-blue: #1464ed;
    --vario-auth-blue-hover: #0751d8;
    --vario-auth-text: #092b53;
    --vario-auth-muted: #58708d;
    --vario-auth-border: #d4dfed;
}

html[data-vario-theme="dark"],
html[data-vario-theme="graphite-cobalt"] {
    color-scheme: dark;
    --vario-accent: #1464ed;
    --vario-app-bg: #0f141b;
    --vario-shell-bg: #0f141b;
    --vario-nav-bg: #111a25;
    --vario-brand-bg: #111a25;
    --vario-brand-border: #34404f;
    --vario-brand-muted: #acbcd1;
    --vario-titlebar-bg: #202730;
    --vario-statusbar-bg: #1b2430;
    --vario-content-bg: #161d26;
    --vario-workbench-bg: #161d26;
    --vario-toolbar-bg: #28313e;
    --vario-surface: #202730;
    --vario-surface-alt: #232d39;
    --vario-surface-muted: #28313e;
    --vario-surface-hover: #2b4566;
    --vario-border: #414e61;
    --vario-border-strong: #597dab;
    --vario-border-soft: #34404f;
    --vario-text: #e2eaf6;
    --vario-text-strong: #f4f8ff;
    --vario-text-muted: #acbcd1;
    --vario-active-text: #ffffff;
    --vario-active-bg: #1464ed;
    --vario-grid-bg: #202730;
    --vario-grid-header-bg: #28313e;
    --vario-grid-hover-bg: #213d60;
    --vario-component-list-row-hover-bg: #273e5c;
    --vario-component-list-row-selected-bg: #245da5;
    --vario-component-list-row-selected-text: #ffffff;
    --vario-component-list-row-selected-accent: #a7d5ff;
    --vario-input-bg: #1b2531;
    --vario-input-readonly-bg: #28313e;
    --vario-select-option-hover: #273e5c;
    --vario-select-option-selected: #234f83;
    --vario-select-option-selected-text: #f4f8ff;
    --vario-select-popover-bg: #18283b;
    --vario-select-popover-border: #405875;
    --vario-select-popover-text: #eef5ff;
    --vario-select-popover-muted: #a9bdd3;
    --vario-select-popover-shadow: 0 16px 38px rgb(0 0 0 / 44%);
    --vario-focus-ring-color: #9ac4ff;
    --vario-date-range-label: #a9bdd3;
    --vario-date-range-popover-border: #354a64;
    --vario-date-range-popover-bg: #172537;
    --vario-date-range-text: #eef5ff;
    --vario-date-range-shadow: 0 16px 38px rgb(0 0 0 / 44%);
    --vario-date-range-header-bg: #1d2d42;
    --vario-date-range-muted: #a9bdd3;
    --vario-date-range-hover-bg: #273e5c;
    --vario-date-range-active-border: #4776ae;
    --vario-date-range-active-bg: #243f62;
    --vario-date-range-active-text: #a7d5ff;
    --vario-date-range-input-bg: #1b2531;
    --vario-modal-bg: #202730;
    --vario-modal-body-bg: var(--vario-modal-bg, var(--vario-surface));
    --vario-empty-bg: #202730;
    --vario-empty-border: #414e61;
    --vario-preview-border: #414e61;
    --vario-window-header-bg: #195b98;
    --vario-window-frame-border: #195b98;
    --vario-window-overlay: rgba(3, 7, 13, 0.72);
    --vario-menu-bg: #202730;
    --vario-menu-hover-bg: #2b4566;
    --vario-menu-shadow: 0 16px 34px rgba(0, 0, 0, 0.42);

    --vario-color-primary-500: #5eabff;
    --vario-color-primary-600: #9ac4ff;
    --vario-color-cobalt-700: #195b98;
    --vario-color-cobalt-800: #134f8c;
    --vario-color-cobalt-900: #0d3159;
    --vario-color-surface-page: #161d26;
    --vario-color-surface-module: #232d39;
    --vario-color-surface-panel: #161d26;
    --vario-color-surface-card: #202730;
    --vario-color-surface-subtle: #28313e;
    --vario-color-surface-muted: #28313e;
    --vario-color-surface-selected: #2b4566;
    --vario-color-border-soft: #414e61;
    --vario-color-border-subtle: #34404f;
    --vario-color-border-field: #597dab;
    --vario-color-border-muted: #34404f;
    --vario-color-border-grid-top: #414e61;
    --vario-color-border-tabs: #414e61;
    --vario-color-border-frame: #195b98;
    --vario-color-text-strong: #f4f8ff;
    --vario-color-text-default: #e2eaf6;
    --vario-color-text-heading: #f4f8ff;
    --vario-color-text-muted: #acbcd1;
    --vario-color-text-subtle: #8fa2bb;
    --vario-color-text-disabled: #8294aa;
    --vario-color-text-on-primary: #ffffff;
    --vario-color-text-rail-inactive: #e2eaf6;
    --vario-color-focus-ring: #9ac4ff;
    --vario-component-grid-footer-bg: #232d39;
    --vario-component-grid-footer-border: #414e61;
    --vario-component-grid-footer-text: #acbcd1;
    --vario-component-column-chooser-bg: #202730;
    --vario-component-column-chooser-header-bg: #28313e;
    --vario-component-column-chooser-border: #414e61;
    --vario-gradient-grid-header: #28313e;
    --vario-gradient-primary-action: linear-gradient(180deg, #2377ff 0%, #1464ed 100%);
    --vario-gradient-clear-action: #28313e;
    --vario-gradient-window-header: #195b98;
    --vario-gradient-minimize-action: #3b4c5f;

    --vario-sidebar-background: #111a25;
    --vario-sidebar-foreground: #e2eaf6;
    --vario-sidebar-muted: #acbcd1;
    --vario-sidebar-border: #34404f;
    --vario-sidebar-hover: #1e2b3a;
    --vario-sidebar-active-background: #213d60;
    --vario-sidebar-active-foreground: #e2eaf6;
    --vario-sidebar-active-border: #597dab;
    --vario-sidebar-child-active-background: #1c334f;
    --vario-sidebar-accent: #5eabff;
    --vario-sidebar-branch: #52677d;
    --vario-sidebar-press-shadow: rgba(0, 0, 0, 0.42);

    --vario-component-list-bg: #161d26;
    --vario-component-module-bg: #232d39;
    --vario-component-panel-bg: #161d26;
    --vario-component-card-bg: #202730;
    --vario-component-rail-bg: #28313e;
    --vario-component-rail-border: #414e61;
    --vario-component-rail-text: #e2eaf6;
    --vario-component-topbar-separator: #414e61;
    --vario-component-topbar-action-text: var(--vario-color-primary-500);
    --vario-component-topbar-action-hover-text: var(--vario-color-primary-500);
    --vario-component-topbar-action-hover-bg: var(--vario-grid-hover-bg);
    --vario-component-document-subcategory-row-bg: #28313e;
    --vario-component-document-subcategory-segment-bg: #202730;
    --vario-component-document-subcategory-segment-border: #46566a;
    --vario-component-document-subcategory-segment-text: #acbcd1;
    --vario-component-document-subcategory-segment-hover-bg: #2b4566;
    --vario-component-document-subcategory-active-bg: #1464ed;
    --vario-component-document-subcategory-active-text: #ffffff;
    --vario-component-document-window-tabs-bg: #28313e;
    --vario-component-document-window-tab-bg: #202730;
    --vario-component-document-window-tab-icon-bg: #28313e;
    --vario-component-document-window-tab-border: #414e61;
    --vario-component-document-window-tab-text: #acbcd1;
    --vario-component-document-window-tab-active-bg: #213d60;
    --vario-component-document-window-tab-active-border: #597dab;
    --vario-component-document-window-tab-active-text: #9ac4ff;
    --vario-component-document-window-tab-active-icon-bg: #1464ed;
    --vario-component-primary-action-bg: var(--vario-gradient-primary-action);
    --vario-component-primary-action-border: #2377ff;
    --vario-component-primary-action-hover-bg: #2d74e8;
    --vario-component-primary-action-hover-border: #5eabff;
    --vario-component-primary-action-active-bg: #1056cd;
    --vario-component-primary-action-active-border: #5eabff;
    --vario-component-primary-action-disabled-bg: #34404f;
    --vario-component-primary-action-disabled-border: #414e61;
    --vario-component-primary-action-disabled-text: #697b91;

    --vario-module-shell-bg: #161d26;
    --vario-module-content-bg: #161d26;
    --vario-module-command-rail-bg: #28313e;
    --vario-module-command-rail-border: #414e61;
    --vario-module-command-rail-frame-border: #414e61;
    --vario-module-command-rail-inactive-text: #acbcd1;
    --vario-list-border-soft: #414e61;
    --vario-list-border-subtle: #34404f;
    --vario-list-grid-header-top-border: #414e61;
    --vario-list-grid-header-bg: #28313e;
    --vario-list-grid-header-text: #e2eaf6;
    --vario-list-accent: #5eabff;

    --vario-status-draft-bg: #213d60;
    --vario-status-draft-border: #597dab;
    --vario-status-draft-text: #b9d6ff;
    --vario-status-success-bg: #1f3d31;
    --vario-status-success-border: #3e6f56;
    --vario-status-success-text: #92deaf;
    --vario-status-warning-bg: #44351d;
    --vario-status-warning-border: #806132;
    --vario-status-warning-text: #f4cf83;
    --vario-status-danger-bg: #492a30;
    --vario-status-danger-border: #8b4c55;
    --vario-status-danger-text: #ffb2b9;
    --vario-status-neutral-bg: #28313e;
    --vario-status-neutral-border: #414e61;
    --vario-status-neutral-text: #c0ccdc;

    --vario-shadow-panel: 0 14px 32px rgba(0, 0, 0, 0.24);
    --vario-shadow-panel-compact: 0 8px 18px rgba(0, 0, 0, 0.28);
    --vario-shadow-menu: var(--vario-menu-shadow);
    --vario-shadow-popover: var(--vario-menu-shadow);
    --vario-shadow-button-hover: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 4px 10px rgba(0, 0, 0, 0.26);
    --vario-shadow-button-primary-hover: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 6px 14px rgba(20, 100, 237, 0.28);
    --vario-shadow-button-danger-hover: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 5px 12px rgba(0, 0, 0, 0.28);
    --vario-shadow-button-success-hover: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 5px 12px rgba(0, 0, 0, 0.28);
    --vario-shadow-button-warning-hover: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 5px 12px rgba(0, 0, 0, 0.28);
    --vario-shadow-button-pressed: inset 0 2px 4px rgba(0, 0, 0, 0.46), inset 0 -1px 0 rgba(255, 255, 255, 0.08);

    --vario-auth-canvas: #0f141b;
    --vario-auth-navy: #111a25;
    --vario-auth-blue: #2377ff;
    --vario-auth-blue-hover: #1464ed;
    --vario-auth-text: #e2eaf6;
    --vario-auth-muted: #acbcd1;
    --vario-auth-border: #414e61;
}

html[data-vario-theme] {
    --bs-body-color: var(--vario-text);
    --bs-body-bg: var(--vario-app-bg);
    --bs-secondary-color: var(--vario-text-muted);
    --bs-secondary-bg: var(--vario-surface-muted);
    --bs-tertiary-color: var(--vario-text-muted);
    --bs-tertiary-bg: var(--vario-surface-alt);
    --bs-border-color: var(--vario-border);
    --bs-emphasis-color: var(--vario-text-strong);
    --bs-link-color: var(--vario-color-primary-600);
    --bs-link-hover-color: var(--vario-color-primary-500);
    --bs-form-control-bg: var(--vario-input-bg);
}

#vario-app-root[data-vario-theme] body,
html[data-vario-theme] .vario-win-shell {
    color: var(--vario-text) !important;
    background: var(--vario-app-bg) !important;
}

#vario-app-root[data-vario-theme] body .vario-win-content,
#vario-app-root[data-vario-theme] body .vario-module-content,
#vario-app-root[data-vario-theme] body .vario-module-page {
    color: var(--vario-text) !important;
    background: var(--vario-content-bg) !important;
}

#vario-app-root[data-vario-theme] body .vario-win-titlebar,
#vario-app-root[data-vario-theme] body .vario-topbar {
    color: var(--vario-text) !important;
    background: var(--vario-titlebar-bg) !important;
    border-color: var(--vario-border) !important;
}

#vario-app-root[data-vario-theme] body .vario-win-title,
#vario-app-root[data-vario-theme] body .vario-win-title h1,
#vario-app-root[data-vario-theme] body .vario-win-title strong,
#vario-app-root[data-vario-theme] body .vario-login-display-name {
    color: var(--vario-text-strong) !important;
}

#vario-app-root[data-vario-theme] body .vario-win-title small,
#vario-app-root[data-vario-theme] body .vario-login-user-name,
#vario-app-root[data-vario-theme] body .text-muted {
    color: var(--vario-text-muted) !important;
}

#vario-app-root[data-vario-theme] body .vario-win-statusbar {
    color: var(--vario-text-muted) !important;
    background: var(--vario-statusbar-bg) !important;
    border-color: var(--vario-border) !important;
}

#vario-app-root[data-vario-theme] body :where(
    .vario-win-workbench,
    .vario-erp-workspace,
    .vario-list-standard,
    .vario-list-shell,
    .vario-module-shell,
    .vario-sales-table-card,
    .vario-list-document-grid-pane) {
    color: var(--vario-text) !important;
    background: var(--vario-workbench-bg) !important;
    border-color: var(--vario-border) !important;
}

#vario-app-root[data-vario-theme] body :where(
    .vario-erp-section,
    .vario-panel,
    .card,
    .list-group-item,
    .vario-list-bottom-panel,
    .vario-list-preview-pane,
    .vario-sales-preview-card,
    .vario-directory-card,
    .vario-admin-card,
    .admin-action,
    .vario-module-card) {
    color: var(--vario-text) !important;
    background: var(--vario-surface) !important;
    border-color: var(--vario-border) !important;
}

#vario-app-root[data-vario-theme] body :where(
    .vario-erp-section-header,
    .card-header,
    .vario-list-bottom-panel-header,
    .vario-list-preview-toolbar,
    .vario-win-filterbar,
    .vario-win-commandbar) {
    color: var(--vario-text) !important;
    background: var(--vario-toolbar-bg) !important;
    background-image: none !important;
    border-color: var(--vario-border) !important;
}

#vario-app-root[data-vario-theme] body .vario-erp-section-header :where(h1, h2, h3, h4, h5, h6, strong) {
    color: var(--vario-text-strong) !important;
}

#vario-app-root[data-vario-theme] body .vario-erp-section-header :where(p, small) {
    color: var(--vario-text-muted) !important;
}

#vario-app-root[data-vario-theme] body :where(.operational-module-checks, .vario-document-check-row) label {
    color: var(--vario-text) !important;
}

#vario-app-root[data-vario-theme] body .vario-document-category-tabs,
#vario-app-root[data-vario-theme] body .vario-sales-document-type-tabs,
#vario-app-root[data-vario-theme] body .vario-list-document-type-tabs {
    color: var(--vario-component-rail-text) !important;
    background: var(--vario-component-rail-bg) !important;
    background-image: none !important;
    border-color: var(--vario-component-rail-border) !important;
    box-shadow: none !important;
}

#vario-app-root[data-vario-theme] body .vario-document-subcategory-tabs,
#vario-app-root[data-vario-theme] body .vario-sales-document-subtype-tabs {
    color: var(--vario-component-document-subcategory-segment-text) !important;
    background: var(--vario-component-document-subcategory-row-bg) !important;
    border-color: var(--vario-component-document-subcategory-segment-border) !important;
}

#vario-app-root[data-vario-theme] body :where(
    .form-control,
    .form-select,
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea) {
    color: var(--vario-text) !important;
    background-color: var(--vario-input-bg) !important;
    border-color: var(--vario-color-border-field) !important;
}

#vario-app-root[data-vario-theme] body :where(
    .form-control,
    input,
    textarea)::placeholder {
    color: var(--vario-text-muted) !important;
    opacity: 0.82 !important;
}

#vario-app-root[data-vario-theme] body :where(
    .form-control:read-only,
    input:read-only,
    textarea:read-only,
    [data-vario-readonly="true"]) {
    color: var(--vario-text) !important;
    background-color: var(--vario-input-readonly-bg) !important;
}

#vario-app-root[data-vario-theme] body :where(.form-label, label, legend, .vario-field-label) {
    color: var(--vario-text-muted);
}

#vario-app-root[data-vario-theme] body .vario-scale-tile.selected {
    color: var(--vario-active-text) !important;
}

#vario-app-root[data-vario-theme] body .vario-scale-tile.selected :where(strong, small) {
    color: inherit !important;
}

#vario-app-root[data-vario-theme] body :where(.form-control, .form-select, input, select, textarea):focus {
    border-color: var(--vario-color-focus-ring) !important;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--vario-color-focus-ring) 34%, transparent) !important;
    outline: none !important;
}

#vario-app-root[data-vario-theme] body .form-check-input {
    background-color: var(--vario-input-bg) !important;
    border-color: var(--vario-color-border-field) !important;
}

#vario-app-root[data-vario-theme] body .form-check-input:checked {
    background-color: var(--vario-accent) !important;
    border-color: var(--vario-accent) !important;
}

#vario-app-root[data-vario-theme] body :where(.table, .vario-data-grid, .vario-standard-data-grid, .vario-list-document-table) {
    color: var(--vario-text) !important;
    background: var(--vario-grid-bg) !important;
    border-color: var(--vario-border) !important;
}

#vario-app-root[data-vario-theme] body :where(.table, .vario-data-grid, .vario-standard-data-grid, .vario-list-document-table) thead th {
    color: var(--vario-color-text-strong) !important;
    background: var(--vario-grid-header-bg) !important;
    background-image: none !important;
    border-color: var(--vario-border) !important;
}

#vario-app-root[data-vario-theme] body :where(.table, .vario-data-grid, .vario-standard-data-grid, .vario-list-document-table) tbody td {
    color: var(--vario-text) !important;
    background: var(--vario-grid-bg) !important;
    border-color: var(--vario-border-soft) !important;
}

#vario-app-root[data-vario-theme] body :where(
    .vario-row-state-grid,
    .table,
    .vario-data-grid,
    .vario-standard-data-grid,
    .vario-list-document-table,
    .vario-admin-ksef-table,
    .vario-bank-import-grid,
    .vario-critical-errors-table,
    .vario-document-lines-table,
    .vario-email-delivery-table,
    .vario-payment-audit-grid,
    .vario-payment-ledger-grid,
    .vario-payment-reports-grid,
    .vario-related-picker-table,
    .vario-settlement-grid,
    .vario-supplier-receipt-table) tbody > tr > :is(td, th) {
    transition:
        background-color var(--vario-motion-list-row-state-duration, 100ms) ease-out,
        color var(--vario-motion-list-row-state-duration, 100ms) ease-out;
}

#vario-app-root[data-vario-theme] body :where(
    .vario-row-state-grid,
    .table,
    .vario-data-grid,
    .vario-standard-data-grid,
    .vario-list-document-table,
    .vario-admin-ksef-table,
    .vario-bank-import-grid,
    .vario-critical-errors-table,
    .vario-document-lines-table,
    .vario-email-delivery-table,
    .vario-payment-audit-grid,
    .vario-payment-ledger-grid,
    .vario-payment-reports-grid,
    .vario-related-picker-table,
    .vario-settlement-grid,
    .vario-supplier-receipt-table) tbody > tr:not(:is(
        .selected,
        .active,
        .vario-selected-row,
        .vario-active-row,
        .vario-grid-multi-selected,
        .vario-grid-row-selected,
        .vario-receipt-create-row-selected,
        .vario-grid-empty-message-row,
        [aria-selected="true"])):hover > :is(td, th) {
    color: var(--vario-text) !important;
    background: var(--vario-component-list-row-hover-bg) !important;
}

#vario-app-root[data-vario-theme] body :where(
    .vario-row-state-grid,
    .table,
    .vario-data-grid,
    .vario-standard-data-grid,
    .vario-list-document-table,
    .vario-admin-ksef-table,
    .vario-bank-import-grid,
    .vario-critical-errors-table,
    .vario-document-lines-table,
    .vario-email-delivery-table,
    .vario-payment-audit-grid,
    .vario-payment-ledger-grid,
    .vario-payment-reports-grid,
    .vario-related-picker-table,
    .vario-settlement-grid,
    .vario-supplier-receipt-table) tbody > tr:is(
        .selected,
        .active,
        .vario-selected-row,
        .vario-active-row,
        .vario-grid-multi-selected,
        .vario-grid-row-selected,
        .vario-receipt-create-row-selected,
        [aria-selected="true"]) > :is(td, th) {
    color: var(--vario-component-list-row-selected-text) !important;
    background: var(--vario-component-list-row-selected-bg) !important;
}

#vario-app-root[data-vario-theme] body :where(
    .vario-row-state-grid,
    .table,
    .vario-data-grid,
    .vario-standard-data-grid,
    .vario-list-document-table,
    .vario-admin-ksef-table,
    .vario-bank-import-grid,
    .vario-critical-errors-table,
    .vario-document-lines-table,
    .vario-email-delivery-table,
    .vario-payment-audit-grid,
    .vario-payment-ledger-grid,
    .vario-payment-reports-grid,
    .vario-related-picker-table,
    .vario-settlement-grid,
    .vario-supplier-receipt-table) tbody > tr:is(
        .selected,
        .active,
        .vario-selected-row,
        .vario-active-row,
        .vario-grid-multi-selected,
        .vario-grid-row-selected,
        .vario-receipt-create-row-selected,
        [aria-selected="true"]) > :is(td, th):first-child {
    box-shadow: inset 3px 0 0 var(--vario-component-list-row-selected-accent) !important;
}

#vario-app-root[data-vario-theme] body :where(
    .vario-row-state-grid,
    .table,
    .vario-data-grid,
    .vario-standard-data-grid,
    .vario-list-document-table,
    .vario-admin-ksef-table,
    .vario-bank-import-grid,
    .vario-critical-errors-table,
    .vario-document-lines-table,
    .vario-email-delivery-table,
    .vario-payment-audit-grid,
    .vario-payment-ledger-grid,
    .vario-payment-reports-grid,
    .vario-related-picker-table,
    .vario-settlement-grid,
    .vario-supplier-receipt-table) tbody > tr:is(
        .selected,
        .active,
        .vario-selected-row,
        .vario-active-row,
        .vario-grid-multi-selected,
        .vario-grid-row-selected,
        .vario-receipt-create-row-selected,
        [aria-selected="true"]) > :is(td, th) :where(strong, small, a, span):not(:where(
            button *,
            .btn *,
            .badge,
            .badge *,
            .vario-status-pill,
            .vario-status-pill *,
            .vario-sales-status,
            .vario-sales-status *,
            .vario-erp-tag,
            .vario-erp-tag *,
            [class*="status"],
            [class*="status"] *)) {
    color: inherit !important;
}

#vario-app-root[data-vario-theme] body :where(
    .vario-row-state-grid,
    .table,
    .vario-data-grid,
    .vario-standard-data-grid,
    .vario-list-document-table) tbody > tr:is(:focus-visible, .vario-grid-keyboard-active) {
    outline: 1px solid var(--vario-color-focus-ring) !important;
    outline-offset: -1px !important;
}

#vario-app-root[data-vario-theme] body :where(
    .vario-email-account-row,
    .vario-column-chooser-row,
    .vario-sales-correction-picker-row,
    .vario-permission-profile-row,
    .vario-permission-scope-row,
    .contractors-v2-list-row,
    .vario-row-state-item) {
    transition:
        background-color var(--vario-motion-list-row-state-duration, 100ms) ease-out,
        color var(--vario-motion-list-row-state-duration, 100ms) ease-out,
        border-color var(--vario-motion-list-row-state-duration, 100ms) ease-out,
        box-shadow var(--vario-motion-list-row-state-duration, 100ms) ease-out;
}

#vario-app-root[data-vario-theme] body :where(
    .vario-email-account-row,
    .vario-column-chooser-row,
    .vario-sales-correction-picker-row,
    .vario-permission-profile-row,
    .vario-permission-scope-row,
    .contractors-v2-list-row,
    .vario-row-state-item):not(.selected):hover {
    background: var(--vario-component-list-row-hover-bg) !important;
}

#vario-app-root[data-vario-theme] body :where(
    .vario-email-account-row,
    .vario-column-chooser-row,
    .vario-sales-correction-picker-row,
    .vario-permission-profile-row,
    .vario-permission-scope-row,
    .contractors-v2-list-row,
    .vario-row-state-item).selected {
    color: var(--vario-component-list-row-selected-text) !important;
    background: var(--vario-component-list-row-selected-bg) !important;
    border-color: var(--vario-component-list-row-selected-bg) !important;
    box-shadow: inset 3px 0 0 var(--vario-component-list-row-selected-accent) !important;
}

#vario-app-root[data-vario-theme] body :where(
    .vario-email-account-row,
    .vario-column-chooser-row,
    .vario-sales-correction-picker-row,
    .vario-permission-profile-row,
    .vario-permission-scope-row,
    .contractors-v2-list-row,
    .vario-row-state-item).selected :where(strong, small, span):not(:where(
        .badge,
        [class*="status"])) {
    color: inherit !important;
}

@media (prefers-reduced-motion: reduce) {
    #vario-app-root[data-vario-theme] body table tbody > tr > :is(td, th),
    #vario-app-root[data-vario-theme] body :where(
        .vario-email-account-row,
        .vario-column-chooser-row,
        .vario-sales-correction-picker-row,
        .vario-permission-profile-row,
        .vario-permission-scope-row,
        .contractors-v2-list-row,
        .vario-row-state-item) {
        transition: none !important;
    }
}

#vario-app-root[data-vario-theme] body :where(.modal, .vario-modal-layer, .vario-erp-create-wizard-modal) {
    --bs-modal-color: var(--vario-text);
    --bs-modal-bg: var(--vario-modal-bg);
    --bs-modal-border-color: var(--vario-window-frame-border);
}

#vario-app-root[data-vario-theme] body :where(.modal-backdrop, .vario-modal-backdrop, .vario-document-modal-backdrop) {
    background: var(--vario-window-overlay) !important;
}

#vario-app-root[data-vario-theme] body :where(
    .modal-content,
    .vario-erp-modal-content,
    .vario-directory-card-modal,
    .vario-document-line-lookup-modal,
    .operational-module-dialog) {
    color: var(--vario-text) !important;
    background: var(--vario-modal-bg) !important;
    border-color: var(--vario-window-frame-border) !important;
}

/* A modal-dialog only positions and centers the actual modal-content. It must
   remain transparent or its viewport-height box becomes a second white panel. */
#vario-app-root[data-vario-theme] body .modal-dialog.vario-document-confirmation-dialog {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* The full-screen document host is an overlay, not the dialog surface. Keeping
   this distinction here prevents module styles from turning the obscured
   register white while the actual card remains theme-aware. */
#vario-app-root[data-vario-theme] body .vario-erp-document-details-modal {
    background: var(--vario-window-overlay) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#vario-app-root[data-vario-theme] body :where(
    .modal-header,
    .vario-erp-document-card-header,
    .vario-contractor-modal-header,
    .vario-document-dialog-header,
    .vario-document-confirmation-header) {
    color: #ffffff !important;
    background: var(--vario-window-header-bg) !important;
    background-image: none !important;
    border-color: var(--vario-window-frame-border) !important;
}

#vario-app-root[data-vario-theme] body :where(
    .modal-header,
    .vario-erp-document-card-header,
    .vario-contractor-modal-header,
    .vario-document-dialog-header,
    .vario-document-confirmation-header) :where(h1, h2, h3, h4, h5, h6, strong, small, span, .nav-icon) {
    color: inherit !important;
}

/* Status badges keep their semantic palette inside the shared blue window
   header.  The generic header inheritance above is intentionally strong for
   titles and plain labels, so semantic badges need an equally central rule
   instead of module-specific colour exceptions. */
#vario-app-root[data-vario-theme] body .vario-erp-document-card-header .vario-erp-document-card-badges :is(span, button).status-primary,
#vario-app-root[data-vario-theme] body .vario-erp-document-card-header .vario-erp-document-card-badges :is(span, button).status-info {
    color: var(--vario-status-draft-text) !important;
    background: var(--vario-status-draft-bg) !important;
    border-color: var(--vario-status-draft-border) !important;
}

#vario-app-root[data-vario-theme] body .vario-erp-document-card-header .vario-erp-document-card-badges :is(span, button).status-success {
    color: var(--vario-status-success-text) !important;
    background: var(--vario-status-success-bg) !important;
    border-color: var(--vario-status-success-border) !important;
}

#vario-app-root[data-vario-theme] body .vario-erp-document-card-header .vario-erp-document-card-badges :is(span, button).status-warning {
    color: var(--vario-status-warning-text) !important;
    background: var(--vario-status-warning-bg) !important;
    border-color: var(--vario-status-warning-border) !important;
}

#vario-app-root[data-vario-theme] body .vario-erp-document-card-header .vario-erp-document-card-badges :is(span, button).status-danger {
    color: var(--vario-status-danger-text) !important;
    background: var(--vario-status-danger-bg) !important;
    border-color: var(--vario-status-danger-border) !important;
}

#vario-app-root[data-vario-theme] body .vario-erp-document-card-header .vario-erp-document-card-badges :is(span, button).status-neutral {
    color: var(--vario-status-neutral-text) !important;
    background: var(--vario-status-neutral-bg) !important;
    border-color: var(--vario-status-neutral-border) !important;
}

#vario-app-root[data-vario-theme] body :where(.modal-body, .vario-erp-modal-body, .vario-erp-document-card-body) {
    color: var(--vario-text) !important;
    background: var(--vario-modal-body-bg) !important;
    border-color: var(--vario-border) !important;
}

#vario-app-root[data-vario-theme] body :where(.modal-footer, .vario-document-dialog-footer, .vario-erp-document-card-footer) {
    color: var(--vario-text) !important;
    background: var(--vario-surface-muted) !important;
    border-color: var(--vario-border) !important;
}

#vario-app-root[data-vario-theme] body [data-vario-component="VarioDocumentTabStrip"],
#vario-app-root[data-vario-theme] body .vario-win-document-tabs {
    color: var(--vario-component-document-window-tab-text) !important;
    background: var(--vario-component-document-window-tabs-bg) !important;
    border-color: var(--vario-component-document-window-tab-border) !important;
}

#vario-app-root[data-vario-theme] body :where(
    .dropdown-menu,
    .vario-context-menu,
    .vario-sales-row-menu,
    .vario-notification-panel,
    .vario-topbar-calendar-panel,
    .popover,
    .offcanvas) {
    color: var(--vario-text) !important;
    background: var(--vario-menu-bg) !important;
    border-color: var(--vario-border) !important;
    box-shadow: var(--vario-menu-shadow) !important;
}

#vario-app-root[data-vario-theme] body :where(.dropdown-item, .vario-context-menu-action, .vario-sales-row-menu button, .list-group-item-action) {
    color: var(--vario-text) !important;
    background: transparent !important;
}

#vario-app-root[data-vario-theme] body :where(.dropdown-item, .vario-context-menu-action, .vario-sales-row-menu button, .list-group-item-action):hover:not(:disabled) {
    color: var(--vario-text-strong) !important;
    background: var(--vario-menu-hover-bg) !important;
}

#vario-app-root[data-vario-theme] body :where(.btn-light, .btn-secondary, .vario-list-clear-button) {
    color: var(--vario-text) !important;
    background: var(--vario-surface) !important;
    background-image: none !important;
    border-color: var(--vario-border-strong) !important;
}

#vario-app-root[data-vario-theme] body :where(.btn-light, .btn-secondary, .vario-list-clear-button):hover:not(:disabled) {
    color: var(--vario-color-primary-600) !important;
    background: var(--vario-surface-hover) !important;
    border-color: var(--vario-color-focus-ring) !important;
}

#vario-app-root[data-vario-theme] body :where(.btn-primary, .vario-list-search-button, .vario-list-add-button) {
    color: #ffffff !important;
    background: var(--vario-component-primary-action-bg) !important;
    border-color: var(--vario-component-primary-action-border) !important;
}

#vario-app-root[data-vario-theme] body :where(.btn-danger, .vario-danger-button, .vario-document-close-action) {
    color: var(--vario-status-danger-text) !important;
    background: var(--vario-status-danger-bg) !important;
    background-image: none !important;
    border-color: var(--vario-status-danger-border) !important;
}

#vario-app-root[data-vario-theme] body :where(.btn-success, .vario-success-button) {
    color: var(--vario-status-success-text) !important;
    background: var(--vario-status-success-bg) !important;
    border-color: var(--vario-status-success-border) !important;
}

#vario-app-root[data-vario-theme] body :where(.btn-warning, .vario-warning-button) {
    color: var(--vario-status-warning-text) !important;
    background: var(--vario-status-warning-bg) !important;
    border-color: var(--vario-status-warning-border) !important;
}

#vario-app-root[data-vario-theme="dark"] body :where(.vario-document-minimize-button, .vario-erp-document-minimize-button, .vario-document-footer-action-minimize, .vario-minimize-button),
#vario-app-root[data-vario-theme="graphite-cobalt"] body :where(.vario-document-minimize-button, .vario-erp-document-minimize-button, .vario-document-footer-action-minimize, .vario-minimize-button) {
    color: #dce9fa !important;
    background: #3b4c5f !important;
    border-color: #697f9b !important;
}

#vario-app-root[data-vario-theme="dark"] body :where(.vario-document-minimize-button, .vario-erp-document-minimize-button, .vario-document-footer-action-minimize, .vario-minimize-button) :where(span, svg, .nav-icon),
#vario-app-root[data-vario-theme="graphite-cobalt"] body :where(.vario-document-minimize-button, .vario-erp-document-minimize-button, .vario-document-footer-action-minimize, .vario-minimize-button) :where(span, svg, .nav-icon) {
    color: inherit !important;
    stroke: currentColor !important;
}

#vario-app-root[data-vario-theme] body :where(button, .btn, input, select, textarea):disabled,
#vario-app-root[data-vario-theme] body :where(button, .btn)[aria-disabled="true"] {
    color: var(--vario-color-text-disabled) !important;
    border-color: var(--vario-border) !important;
    box-shadow: none !important;
}

#vario-app-root[data-vario-theme] body :where(.vario-erp-empty, .vario-empty-state, .vario-list-empty-state) {
    color: var(--vario-text-muted) !important;
    background: var(--vario-empty-bg) !important;
    border-color: var(--vario-empty-border) !important;
}

#vario-app-root[data-vario-theme] body .alert-info {
    color: var(--vario-status-draft-text) !important;
    background: var(--vario-status-draft-bg) !important;
    border-color: var(--vario-status-draft-border) !important;
}

#vario-app-root[data-vario-theme] body .alert-success {
    color: var(--vario-status-success-text) !important;
    background: var(--vario-status-success-bg) !important;
    border-color: var(--vario-status-success-border) !important;
}

#vario-app-root[data-vario-theme] body .alert-warning {
    color: var(--vario-status-warning-text) !important;
    background: var(--vario-status-warning-bg) !important;
    border-color: var(--vario-status-warning-border) !important;
}

#vario-app-root[data-vario-theme] body .alert-danger {
    color: var(--vario-status-danger-text) !important;
    background: var(--vario-status-danger-bg) !important;
    border-color: var(--vario-status-danger-border) !important;
}

#vario-app-root[data-vario-theme="dark"] body :where(.bg-white, .bg-light, .text-bg-light) {
    color: var(--vario-text) !important;
    background-color: var(--vario-surface) !important;
}

#vario-app-root[data-vario-theme="dark"] body :where(.text-dark, .text-body) {
    color: var(--vario-text) !important;
}

#vario-app-root[data-vario-theme="dark"] body iframe.vario-pdf-preview,
#vario-app-root[data-vario-theme="dark"] body .vario-pdf-paper {
    background: #ffffff !important;
}

/* Shared topbar content uses its own component classes. Keep it readable in
   both profiles without changing the approved topbar geometry. */
#vario-app-root[data-vario-theme] body .vario-topbar-module-title h1 {
    color: var(--vario-text-strong) !important;
}

#vario-app-root[data-vario-theme] body .vario-topbar-module-title > span {
    color: var(--vario-text-muted) !important;
}

#vario-app-root[data-vario-theme] body :where(
    .vario-topbar-module-icon,
    .vario-topbar-global-actions button,
    .vario-topbar-global-actions .nav-icon) {
    color: var(--vario-color-primary-500) !important;
}

/* A selected parent module owns the active foreground. Legacy child spans and
   icons must not repaint it with the inactive sidebar color. */
#vario-app-root[data-vario-theme] body :where(
    .vario-sidebar-row > .vario-sidebar-item.active,
    .vario-sidebar-main-row.active,
    .vario-sidebar-operational-group.active > .vario-sidebar-main-row) :where(span, .nav-icon) {
    color: inherit !important;
    stroke: currentColor !important;
}

#vario-app-root[data-vario-theme] body :where(
    .vario-sidebar-row > .vario-sidebar-item.active,
    .vario-sidebar-main-row.active,
    .vario-sidebar-operational-group.active > .vario-sidebar-main-row) :where(
        .vario-sidebar-text,
        .vario-sidebar-main-label,
        .vario-sidebar-group-label,
        .vario-sidebar-chevron,
        .nav-icon) {
    color: var(--vario-sidebar-active-foreground) !important;
    stroke: currentColor !important;
}

/* Register rows inherit their final color from the shared table cell. Several
   historical registers painted document numbers directly on <strong>. */
#vario-app-root[data-vario-theme] body :where(
    .vario-data-grid,
    .vario-standard-data-grid,
    .vario-list-document-table,
    .vario-sales-table) tbody td > strong {
    color: inherit !important;
}

/* Shared search/document labels. Required and validation labels are restored
   below so semantic red remains independent of the visual profile. */
#vario-app-root[data-vario-theme] body :where(
    .vario-list-bottom-panel,
    .vario-list-search-panel,
    .vario-erp-document-details-modal,
    .vario-directory-card-modal) :where(
        label > span,
        .vario-field-label,
        .vario-document-section-title h2) {
    color: var(--vario-text-strong) !important;
}

#vario-app-root[data-vario-theme] body :where(
    .vario-erp-document-details-modal,
    .vario-directory-card-modal) :where(
        .vario-document-section-title p,
        .vario-document-field-hint:not(.danger)) {
    color: var(--vario-text-muted) !important;
}

#vario-app-root[data-vario-theme] body :where(
    .vario-document-field-required,
    .is-invalid) > span,
#vario-app-root[data-vario-theme] body .vario-document-field-hint.danger {
    color: var(--vario-status-danger-text) !important;
}

/* Bottom summaries are shared by sales, purchases, warehouse and payments. */
#vario-app-root[data-vario-theme] body .vario-document-bottom-summary > * {
    color: var(--vario-text) !important;
    background: var(--vario-surface) !important;
    background-image: none !important;
    border-color: var(--vario-border) !important;
}

#vario-app-root[data-vario-theme] body .vario-document-bottom-summary > :where(
    .vario-document-summary-primary,
    .vario-document-summary-positive,
    .vario-document-summary-warning) {
    color: var(--vario-text-strong) !important;
}

#vario-app-root[data-vario-theme] body .vario-document-bottom-summary > .vario-document-summary-primary {
    color: #ffffff !important;
    background: var(--vario-component-primary-action-bg) !important;
    border-color: var(--vario-component-primary-action-border) !important;
}

#vario-app-root[data-vario-theme] body .vario-document-bottom-summary > * :where(span, strong, small) {
    color: inherit !important;
}

/* Directory surfaces use the same palette as the shared list shell. */
#vario-app-root[data-vario-theme] body :where(
    .vario-search-tabs,
    .vario-search-field-grid,
    .vario-win-grid-pane,
    .vario-list-list-pane,
    .vario-contractors-list,
    .vario-directory-preview-tabs-v2,
    .vario-contractors-preview-tabs,
    .vario-directory-sales-preview-tabs) {
    color: var(--vario-text) !important;
    background: var(--vario-surface) !important;
    background-image: none !important;
    border-color: var(--vario-border) !important;
}

#vario-app-root[data-vario-theme] body .vario-directory-type-tab {
    color: var(--vario-text-muted) !important;
    background: var(--vario-surface) !important;
    border-color: var(--vario-border) !important;
}

#vario-app-root[data-vario-theme] body .vario-directory-type-tab.active {
    color: var(--vario-color-primary-600) !important;
    background: var(--vario-color-surface-selected) !important;
    border-color: var(--vario-color-focus-ring) !important;
}

#vario-app-root[data-vario-theme] body .vario-directory-tab-stack-search::after {
    background: var(--vario-toolbar-bg) !important;
    background-image: none !important;
    border-color: var(--vario-border) !important;
}

#vario-app-root[data-vario-theme] body .vario-list-preview-empty {
    color: var(--vario-text-muted) !important;
    background: var(--vario-surface) !important;
}

#vario-app-root[data-vario-theme] body .vario-list-preview-empty > strong {
    color: var(--vario-text-strong) !important;
}

#vario-app-root[data-vario-theme] body .vario-list-preview-empty > span {
    color: var(--vario-text-muted) !important;
}

/* Outlined actions keep their semantics while sharing the dark surface. */
#vario-app-root[data-vario-theme="dark"] body :where(
    .btn-outline-primary,
    .btn-outline-secondary,
    .btn-outline-light),
#vario-app-root[data-vario-theme="graphite-cobalt"] body :where(
    .btn-outline-primary,
    .btn-outline-secondary,
    .btn-outline-light) {
    color: var(--vario-text) !important;
    background: var(--vario-surface) !important;
    background-image: none !important;
    border-color: var(--vario-border-strong) !important;
}

#vario-app-root[data-vario-theme="dark"] body .btn-outline-primary,
#vario-app-root[data-vario-theme="graphite-cobalt"] body .btn-outline-primary {
    color: var(--vario-color-primary-500) !important;
    border-color: var(--vario-color-primary-500) !important;
}

#vario-app-root[data-vario-theme="dark"] body :where(
    .btn-outline-primary,
    .btn-outline-secondary,
    .btn-outline-light):hover:not(:disabled),
#vario-app-root[data-vario-theme="graphite-cobalt"] body :where(
    .btn-outline-primary,
    .btn-outline-secondary,
    .btn-outline-light):hover:not(:disabled) {
    color: var(--vario-text-strong) !important;
    background: var(--vario-surface-hover) !important;
    border-color: var(--vario-color-focus-ring) !important;
}

#vario-app-root[data-vario-theme="dark"] body .btn-outline-danger,
#vario-app-root[data-vario-theme="graphite-cobalt"] body .btn-outline-danger {
    color: var(--vario-status-danger-text) !important;
    background: var(--vario-status-danger-bg) !important;
    background-image: none !important;
    border-color: var(--vario-status-danger-border) !important;
}

/* Administration had a complete historical light palette with !important.
   The final theme layer remaps only colors and shadows, preserving its layout. */
#vario-app-root[data-vario-theme] body .vario-admin-settings-shell,
#vario-app-root[data-vario-theme] body .vario-admin-settings-content {
    color: var(--vario-text) !important;
    background: var(--vario-content-bg) !important;
    border-color: var(--vario-border) !important;
    box-shadow: var(--vario-shadow-panel-compact) !important;
}

#vario-app-root[data-vario-theme] body .vario-admin-settings-summary,
#vario-app-root[data-vario-theme] body .vario-admin-settings-section > header {
    color: var(--vario-text) !important;
    background: var(--vario-toolbar-bg) !important;
    border-color: var(--vario-border) !important;
    box-shadow: none !important;
}

#vario-app-root[data-vario-theme] body :where(
    .vario-admin-settings-section,
    .vario-admin-settings-metrics > div,
    .vario-admin-settings-action) {
    color: var(--vario-text) !important;
    background: var(--vario-surface) !important;
    border-color: var(--vario-border) !important;
    box-shadow: none !important;
}

#vario-app-root[data-vario-theme] body :where(
    .vario-admin-settings-title strong,
    .vario-admin-settings-section h2,
    .vario-admin-settings-action-copy strong) {
    color: var(--vario-text-strong) !important;
}

#vario-app-root[data-vario-theme] body :where(
    .vario-admin-settings-title > span,
    .vario-admin-settings-metrics span,
    .vario-admin-settings-section p,
    .vario-admin-settings-action-copy > span) {
    color: var(--vario-text-muted) !important;
}

#vario-app-root[data-vario-theme] body .vario-admin-settings-metrics strong {
    color: var(--vario-color-primary-600) !important;
}

#vario-app-root[data-vario-theme] body :where(
    .vario-admin-settings-section-icon,
    .vario-admin-settings-action-icon) {
    color: var(--vario-color-primary-600) !important;
    background: var(--vario-color-surface-selected) !important;
    border-color: var(--vario-color-focus-ring) !important;
}

#vario-app-root[data-vario-theme] body .vario-admin-settings-action:hover:not(.disabled) {
    color: var(--vario-text-strong) !important;
    background: var(--vario-surface-hover) !important;
    border-color: var(--vario-color-focus-ring) !important;
    box-shadow: inset 3px 0 0 var(--vario-color-primary-500) !important;
}

#vario-app-root[data-vario-theme] body .vario-admin-settings-action.disabled {
    color: var(--vario-color-text-disabled) !important;
    background: var(--vario-input-readonly-bg) !important;
}

/* Dark profile closure.
   Historical registers and administration pages still carry light literals in
   their geometry styles. Keep those files responsible for layout while this
   final theme layer supplies one dark palette for every shared surface. */
#vario-app-root:is([data-vario-theme="dark"], [data-vario-theme="graphite-cobalt"]) body :where(
    .vario-sales-document-tab-stack,
    .vario-admin-document-tab-stack,
    .vario-list-document-filter-card,
    .vario-sales-filter-card,
    .vario-work-orders-filter-card,
    .vario-list-document-filter-grid,
    .vario-list-document-tabs-row,
    .vario-list-document-preview-pane,
    .vario-list-document-preview-summary,
    .vario-list-document-preview-details,
    .vario-list-document-preview-body,
    .vario-list-preview-pane,
    .vario-list-preview-summary,
    .vario-list-preview-details,
    .vario-list-preview-body) {
    color: var(--vario-text) !important;
    background: var(--vario-surface) !important;
    background-image: none !important;
    border-color: var(--vario-border) !important;
    box-shadow: none !important;
}

#vario-app-root:is([data-vario-theme="dark"], [data-vario-theme="graphite-cobalt"]) body :where(
    .vario-list-document-tabs-row,
    .vario-list-document-preview-tabs,
    .vario-sales-preview-tabs,
    .vario-list-preview-tabs,
    .vario-work-orders-preview-tabs,
    .vario-admin-team-preview-tabs,
    .vario-admin-operational-modules-preview-tabs) {
    color: var(--vario-text) !important;
    background: var(--vario-toolbar-bg) !important;
    background-image: none !important;
    border-color: var(--vario-border) !important;
}

#vario-app-root:is([data-vario-theme="dark"], [data-vario-theme="graphite-cobalt"]) body :where(
    .vario-document-category-tab.active,
    .vario-list-bottom-panel-tab.active,
    .vario-search-tab.active,
    .vario-list-search-tab.active,
    .vario-directory-type-tab.active,
    .vario-sales-document-type-tab.active,
    .vario-win-tab.active) {
    color: var(--vario-color-primary-600) !important;
    background: var(--vario-color-surface-selected) !important;
    background-image: none !important;
    border-color: var(--vario-color-focus-ring) !important;
    box-shadow: none !important;
}

#vario-app-root:is([data-vario-theme="dark"], [data-vario-theme="graphite-cobalt"]) body [data-vario-component="VarioListSearchPanel"][data-vario-component-part="tabs"] > button.active,
#vario-app-root:is([data-vario-theme="dark"], [data-vario-theme="graphite-cobalt"]) body .vario-sales-tabs > button.active {
    color: var(--vario-color-primary-600) !important;
    background: var(--vario-color-surface-selected) !important;
    background-image: none !important;
    border-color: var(--vario-color-focus-ring) !important;
}

#vario-app-root:is([data-vario-theme="dark"], [data-vario-theme="graphite-cobalt"]) body :where(
    .vario-document-category-tab.active .vario-document-category-tab-icon,
    .vario-list-bottom-panel-tab.active .vario-list-bottom-panel-tab-icon) {
    color: #ffffff !important;
    background: var(--vario-accent) !important;
    background-image: none !important;
    border-color: var(--vario-accent) !important;
}

#vario-app-root:is([data-vario-theme="dark"], [data-vario-theme="graphite-cobalt"]) body :where(
    .vario-sales-document-subtype-tab,
    .vario-list-document-tabs button,
    .vario-list-document-preview-tabs button,
    .vario-sales-preview-tabs button,
    .vario-work-orders-preview-tabs button) {
    color: var(--vario-text-muted) !important;
    background: transparent !important;
}

#vario-app-root:is([data-vario-theme="dark"], [data-vario-theme="graphite-cobalt"]) body :where(
    .vario-sales-document-subtype-tab.active,
    .vario-list-document-tabs button.active,
    .vario-list-document-preview-tabs button.active,
    .vario-sales-preview-tabs button.active,
    .vario-work-orders-preview-tabs button.active) {
    color: var(--vario-color-primary-600) !important;
    border-bottom-color: var(--vario-accent) !important;
}

/* Register workspace v2 keeps the variant-4 selected surface and 2 px accent
   after the global Dark palette layer has normalized historical tabs. */
#vario-app-root:is([data-vario-theme="dark"], [data-vario-theme="graphite-cobalt"]) body
    .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"]
    :is(.vario-list-search-panel-tabs, .vario-list-preview-tabs) > button.active {
    color: var(--vario-color-primary-600) !important;
    background: var(--vario-color-surface-selected) !important;
    background-image: none !important;
    border-color: var(--vario-color-focus-ring) !important;
    box-shadow: inset 0 -2px var(--vario-accent) !important;
}

/* Segmented document subcategories keep their filled selection in Dark. */
#vario-app-root:is([data-vario-theme="dark"], [data-vario-theme="graphite-cobalt"]) body
    .vario-document-subcategory-tabs[data-vario-component="VarioDocumentSubcategoryTabs"][data-vario-subcategory-tabs-appearance="segmented"]
    .vario-document-subcategory-tab.active {
    color: var(--vario-component-document-subcategory-active-text) !important;
    background: var(--vario-component-document-subcategory-active-bg) !important;
    background-image: none !important;
    border-color: var(--vario-component-document-subcategory-active-bg) !important;
}

#vario-app-root:is([data-vario-theme="dark"], [data-vario-theme="graphite-cobalt"]) body
    .vario-document-subcategory-tabs[data-vario-component="VarioDocumentSubcategoryTabs"][data-vario-subcategory-tabs-appearance="segmented"]
    .vario-document-subcategory-tab.active :where(.vario-document-subcategory-tab-icon, .vario-document-subcategory-tab-label, .nav-icon) {
    color: inherit !important;
}

#vario-app-root:is([data-vario-theme="dark"], [data-vario-theme="graphite-cobalt"]) body :where(
    .vario-list-document-tabs button + button::before,
    .vario-list-document-preview-tabs button + button::before,
    .vario-sales-preview-tabs button + button::before) {
    background: var(--vario-border) !important;
}

#vario-app-root:is([data-vario-theme="dark"], [data-vario-theme="graphite-cobalt"]) body :where(
    .vario-sales-input-with-icon,
    .vario-document-input-with-icon,
    .input-group-text,
    .vario-list-input-with-icon) {
    color: var(--vario-text) !important;
    background: var(--vario-input-bg) !important;
    background-image: none !important;
    border-color: var(--vario-color-border-field) !important;
}

#vario-app-root:is([data-vario-theme="dark"], [data-vario-theme="graphite-cobalt"]) body .vario-document-section-icon {
    color: var(--vario-color-primary-600) !important;
    background: var(--vario-color-surface-selected) !important;
    background-image: none !important;
    border-color: var(--vario-color-focus-ring) !important;
}

#vario-app-root:is([data-vario-theme="dark"], [data-vario-theme="graphite-cobalt"]) body :where(
    .vario-sales-date-range,
    .vario-sales-date-range-separator,
    .vario-search-check,
    .vario-list-search-check) {
    color: var(--vario-text-muted) !important;
}

#vario-app-root:is([data-vario-theme="dark"], [data-vario-theme="graphite-cobalt"]) body :where(
    .vario-list-document-button.secondary,
    .vario-list-document-button.ghost,
    .vario-profile-actions .btn:not(.btn-primary):not(.btn-danger),
    .vario-win-commandbar > .btn:not(.btn-primary):not(.btn-danger),
    .vario-win-commandbar > form .btn:not(.btn-primary):not(.btn-danger),
    .vario-list-bottom-panel-open) {
    color: var(--vario-text) !important;
    background: var(--vario-surface) !important;
    background-image: none !important;
    border-color: var(--vario-border-strong) !important;
}

#vario-app-root:is([data-vario-theme="dark"], [data-vario-theme="graphite-cobalt"]) body .vario-list-document-check {
    color: var(--vario-text) !important;
}

#vario-app-root:is([data-vario-theme="dark"], [data-vario-theme="graphite-cobalt"]) body .vario-list-document-check :where(span, strong, small) {
    color: inherit !important;
}

#vario-app-root:is([data-vario-theme="dark"], [data-vario-theme="graphite-cobalt"]) body :where(
    .vario-list-document-button.primary,
    .vario-button-primary) {
    color: #ffffff !important;
    background: var(--vario-component-primary-action-bg) !important;
    border-color: var(--vario-component-primary-action-border) !important;
}

#vario-app-root:is([data-vario-theme="dark"], [data-vario-theme="graphite-cobalt"]) body :where(
    button,
    .btn,
    .vario-list-document-button)[disabled],
#vario-app-root:is([data-vario-theme="dark"], [data-vario-theme="graphite-cobalt"]) body :where(
    button,
    .btn,
    .vario-list-document-button)[aria-disabled="true"] {
    color: var(--vario-color-text-disabled) !important;
    background: var(--vario-input-readonly-bg) !important;
    background-image: none !important;
    border-color: var(--vario-border) !important;
}

/* Semantic statuses use muted dark tints instead of light-theme pills. */
#vario-app-root:is([data-vario-theme="dark"], [data-vario-theme="graphite-cobalt"]) body :where(
    .vario-status-pill.info,
    .vario-status-pill.primary,
    .vario-sales-status.status-primary,
    .vario-sales-status.primary) {
    color: var(--vario-status-draft-text) !important;
    background: var(--vario-status-draft-bg) !important;
    border-color: var(--vario-status-draft-border) !important;
}

#vario-app-root:is([data-vario-theme="dark"], [data-vario-theme="graphite-cobalt"]) body :where(
    .vario-status-pill.success,
    .vario-sales-status.status-success,
    .vario-sales-status.success) {
    color: var(--vario-status-success-text) !important;
    background: var(--vario-status-success-bg) !important;
    border-color: var(--vario-status-success-border) !important;
}

#vario-app-root:is([data-vario-theme="dark"], [data-vario-theme="graphite-cobalt"]) body :where(
    .vario-status-pill.warning,
    .vario-status-pill.amber,
    .vario-sales-status.status-amber,
    .vario-sales-status.warning) {
    color: var(--vario-status-warning-text) !important;
    background: var(--vario-status-warning-bg) !important;
    border-color: var(--vario-status-warning-border) !important;
}

#vario-app-root:is([data-vario-theme="dark"], [data-vario-theme="graphite-cobalt"]) body :where(
    .vario-status-pill.danger,
    .vario-sales-status.status-danger,
    .vario-sales-status.danger) {
    color: var(--vario-status-danger-text) !important;
    background: var(--vario-status-danger-bg) !important;
    border-color: var(--vario-status-danger-border) !important;
}

#vario-app-root:is([data-vario-theme="dark"], [data-vario-theme="graphite-cobalt"]) body :where(
    .vario-status-pill.neutral,
    .vario-sales-status.neutral,
    .vario-sales-status.status-neutral) {
    color: var(--vario-status-neutral-text) !important;
    background: var(--vario-status-neutral-bg) !important;
    border-color: var(--vario-status-neutral-border) !important;
}

#vario-app-root:is([data-vario-theme="dark"], [data-vario-theme="graphite-cobalt"]) body :where(
    .vario-status-pill.violet,
    .vario-sales-status.violet,
    .vario-sales-status.status-violet) {
    color: #dccbff !important;
    background: #352b4d !important;
    border-color: #725aa5 !important;
}

/* Preview typography is shared by document registers, administration and
   Service. The old list geometry intentionally remains untouched. */
#vario-app-root:is([data-vario-theme="dark"], [data-vario-theme="graphite-cobalt"]) body :where(
    .vario-list-document-preview-body,
    .vario-list-preview-body,
    .vario-admin-team-preview-grid,
    .vario-admin-operational-modules-preview-grid,
    .vario-work-orders-preview-content,
    .vario-list-document-empty,
    .vario-list-preview-empty) :where(h2, h3, h4, strong, dd) {
    color: var(--vario-text-strong) !important;
}

#vario-app-root:is([data-vario-theme="dark"], [data-vario-theme="graphite-cobalt"]) body :where(
    .vario-list-document-preview-body,
    .vario-list-preview-body,
    .vario-admin-team-preview-grid,
    .vario-admin-operational-modules-preview-grid,
    .vario-work-orders-preview-content,
    .vario-list-document-empty,
    .vario-list-preview-empty) :where(p, span, small, dt) {
    color: var(--vario-text-muted) !important;
}

#vario-app-root:is([data-vario-theme="dark"], [data-vario-theme="graphite-cobalt"]) body :where(
    .vario-list-document-preview-body,
    .vario-list-preview-body,
    .vario-admin-team-preview-grid,
    .vario-admin-operational-modules-preview-grid) a {
    color: var(--vario-color-primary-500) !important;
}

#vario-app-root:is([data-vario-theme="dark"], [data-vario-theme="graphite-cobalt"]) body .vario-document-bottom-summary {
    color: var(--vario-text) !important;
    background: var(--vario-surface-muted) !important;
    border-color: var(--vario-border) !important;
}

#vario-app-root:is([data-vario-theme="dark"], [data-vario-theme="graphite-cobalt"]) body .vario-list-document-table tbody td > span:not(.vario-status-pill):not(.vario-sales-status):not(.vario-erp-tag) {
    color: var(--vario-text-muted) !important;
}

#vario-app-root:is([data-vario-theme="dark"], [data-vario-theme="graphite-cobalt"]) body .vario-erp-tag {
    color: var(--vario-active-text) !important;
    background: var(--vario-active-bg) !important;
    border-color: var(--vario-accent) !important;
}

#vario-app-root:is([data-vario-theme="dark"], [data-vario-theme="graphite-cobalt"]) body .vario-admin-operational-modules-preview-grid a {
    color: var(--vario-color-primary-600) !important;
}

#vario-app-root:is([data-vario-theme="dark"], [data-vario-theme="graphite-cobalt"]) body .vario-list-standard.vario-admin-operational-modules-page .vario-admin-operational-modules-preview-grid strong > a:not(.vario-list-document-button) {
    color: #9ac4ff !important;
    text-decoration-color: rgba(154, 196, 255, 0.58) !important;
}

#vario-app-root:is([data-vario-theme="dark"], [data-vario-theme="graphite-cobalt"]) body .vario-win-content a:not(.btn):not(.vario-list-document-button) {
    color: #9ac4ff !important;
    text-decoration-color: rgba(154, 196, 255, 0.58) !important;
}

/* Compact numeric controls retain their geometry while joining the shared
   field palette. */
#vario-app-root:is([data-vario-theme="dark"], [data-vario-theme="graphite-cobalt"]) body .vario-numeric-input,
#vario-app-root:is([data-vario-theme="dark"], [data-vario-theme="graphite-cobalt"]) body .vario-numeric-input :where(input, button) {
    color: var(--vario-text) !important;
    background: var(--vario-input-bg) !important;
    background-image: none !important;
    border-color: var(--vario-color-border-field) !important;
}

/* Status dictionaries are reused by administration pages without the
   vario-status-pill class. */
#vario-app-root:is([data-vario-theme="dark"], [data-vario-theme="graphite-cobalt"]) body span.status-primary {
    color: var(--vario-status-draft-text) !important;
    background: var(--vario-status-draft-bg) !important;
    border-color: var(--vario-status-draft-border) !important;
}

#vario-app-root:is([data-vario-theme="dark"], [data-vario-theme="graphite-cobalt"]) body span.status-success {
    color: var(--vario-status-success-text) !important;
    background: var(--vario-status-success-bg) !important;
    border-color: var(--vario-status-success-border) !important;
}

#vario-app-root:is([data-vario-theme="dark"], [data-vario-theme="graphite-cobalt"]) body span.status-warning {
    color: var(--vario-status-warning-text) !important;
    background: var(--vario-status-warning-bg) !important;
    border-color: var(--vario-status-warning-border) !important;
}

#vario-app-root:is([data-vario-theme="dark"], [data-vario-theme="graphite-cobalt"]) body span.status-danger {
    color: var(--vario-status-danger-text) !important;
    background: var(--vario-status-danger-bg) !important;
    border-color: var(--vario-status-danger-border) !important;
}

#vario-app-root:is([data-vario-theme="dark"], [data-vario-theme="graphite-cobalt"]) body span.status-neutral {
    color: var(--vario-status-neutral-text) !important;
    background: var(--vario-status-neutral-bg) !important;
    border-color: var(--vario-status-neutral-border) !important;
}

/* Shared explanatory blocks in configuration. */
#vario-app-root:is([data-vario-theme="dark"], [data-vario-theme="graphite-cobalt"]) body :where(
    .vario-admin-document-processes-help,
    .vario-admin-contractor-directories-help,
    .vario-admin-ksef-note,
    .vario-ksef-form-help,
    .vario-ksef-settings-note,
    .vario-ksef-official-environment-note) {
    color: var(--vario-text) !important;
    background: var(--vario-surface-alt) !important;
    background-image: none !important;
    border-color: var(--vario-border) !important;
}

/* KSeF administration and the operational KSeF workspace share the same
   surfaces as every other VARIO module. */
#vario-app-root:is([data-vario-theme="dark"], [data-vario-theme="graphite-cobalt"]) body :where(
    .vario-admin-ksef-workbench,
    .vario-admin-ksef-shell,
    .vario-admin-ksef-content,
    .vario-ksef-workbench,
    .vario-ksef-shell,
    .vario-ksef-content) {
    color: var(--vario-text) !important;
    background: var(--vario-content-bg) !important;
    background-image: none !important;
    border-color: var(--vario-border) !important;
}

#vario-app-root:is([data-vario-theme="dark"], [data-vario-theme="graphite-cobalt"]) body :where(
    .vario-admin-ksef-card,
    .vario-admin-ksef-report-card,
    .vario-admin-ksef-report-filter-card,
    .vario-ksef-card,
    .vario-ksef-fetch-card,
    .vario-ksef-side-panel,
    .vario-ksef-status-card,
    .vario-ksef-settings-section,
    .vario-ksef-admin-dialog-card) {
    color: var(--vario-text) !important;
    background: var(--vario-surface) !important;
    background-image: none !important;
    border-color: var(--vario-border) !important;
    box-shadow: none !important;
}

#vario-app-root:is([data-vario-theme="dark"], [data-vario-theme="graphite-cobalt"]) body :where(
    .vario-admin-ksef-summary,
    .vario-admin-ksef-card-header,
    .vario-admin-ksef-card-actions,
    .vario-admin-ksef-report-card-header,
    .vario-admin-ksef-report-tabs-row,
    .vario-ksef-card-header,
    .vario-ksef-card-footer,
    .vario-ksef-settings-footer) {
    color: var(--vario-text) !important;
    background: var(--vario-toolbar-bg) !important;
    background-image: none !important;
    border-color: var(--vario-border) !important;
}

#vario-app-root:is([data-vario-theme="dark"], [data-vario-theme="graphite-cobalt"]) body :where(
    .vario-admin-ksef-metrics > div,
    .vario-ksef-settings-summary-grid > div) {
    color: var(--vario-text) !important;
    background: var(--vario-surface-alt) !important;
    border-color: var(--vario-border) !important;
}

#vario-app-root:is([data-vario-theme="dark"], [data-vario-theme="graphite-cobalt"]) body :where(
    .vario-admin-ksef-table,
    .vario-admin-ksef-report-grid-table) :where(th, td),
#vario-app-root:is([data-vario-theme="dark"], [data-vario-theme="graphite-cobalt"]) body .vario-admin-ksef-table tr,
#vario-app-root:is([data-vario-theme="dark"], [data-vario-theme="graphite-cobalt"]) body .vario-admin-ksef-report-grid-table tr {
    color: var(--vario-text) !important;
    background: var(--vario-grid-bg) !important;
    border-color: var(--vario-border) !important;
}

#vario-app-root:is([data-vario-theme="dark"], [data-vario-theme="graphite-cobalt"]) body :where(
    .vario-admin-ksef-card-icon,
    .vario-ksef-card-icon,
    .vario-ksef-admin-dialog-icon) {
    color: var(--vario-color-primary-600) !important;
    background: var(--vario-color-surface-selected) !important;
    border-color: var(--vario-color-focus-ring) !important;
}

#vario-app-root:is([data-vario-theme="dark"], [data-vario-theme="graphite-cobalt"]) body .vario-ksef-tab.active {
    color: var(--vario-color-primary-600) !important;
    background: var(--vario-color-surface-selected) !important;
    border-color: var(--vario-color-focus-ring) !important;
}

#vario-app-root:is([data-vario-theme="dark"], [data-vario-theme="graphite-cobalt"]) body .vario-ksef-status-card.status-success {
    color: var(--vario-status-success-text) !important;
    background: var(--vario-status-success-bg) !important;
    border-color: var(--vario-status-success-border) !important;
}

#vario-app-root:is([data-vario-theme="dark"], [data-vario-theme="graphite-cobalt"]) body .vario-ksef-status-card.status-warning {
    color: var(--vario-status-warning-text) !important;
    background: var(--vario-status-warning-bg) !important;
    border-color: var(--vario-status-warning-border) !important;
}

#vario-app-root:is([data-vario-theme="dark"], [data-vario-theme="graphite-cobalt"]) body :where(
    .vario-admin-ksef-workbench,
    .vario-ksef-workbench) :where(h1, h2, h3, h4, h5, strong) {
    color: var(--vario-text-strong) !important;
}

#vario-app-root:is([data-vario-theme="dark"], [data-vario-theme="graphite-cobalt"]) body :where(
    .vario-admin-ksef-workbench,
    .vario-ksef-workbench) :where(p, small, label, span) {
    color: inherit;
}

/* Older KSeF styles use hard-coded light-theme colors with !important.
   These scoped rules restore the Dark semantic hierarchy without changing
   any KSeF geometry or document behavior. */
#vario-app-root:is([data-vario-theme="dark"], [data-vario-theme="graphite-cobalt"]) body :where(
    .vario-admin-ksef-card-header p,
    .vario-admin-ksef-report-card .text-muted,
    .vario-ksef-card-title p,
    .vario-ksef-card-header p) {
    color: var(--vario-text-muted) !important;
}

#vario-app-root:is([data-vario-theme="dark"], [data-vario-theme="graphite-cobalt"]) body :where(
    .vario-admin-ksef-form-grid label > span,
    .vario-ksef-form-grid label > span) {
    color: var(--vario-text) !important;
}

#vario-app-root:is([data-vario-theme="dark"], [data-vario-theme="graphite-cobalt"]) body :where(
    .vario-admin-ksef-empty,
    .vario-admin-ksef-empty > span,
    .vario-ksef-empty,
    .vario-ksef-empty > span) {
    color: var(--vario-text-muted) !important;
}

#vario-app-root:is([data-vario-theme="dark"], [data-vario-theme="graphite-cobalt"]) body :where(
    .vario-admin-ksef-empty > strong,
    .vario-ksef-empty > strong) {
    color: var(--vario-text-strong) !important;
}

#vario-app-root:is([data-vario-theme="dark"], [data-vario-theme="graphite-cobalt"]) body .vario-ksef-status-card small {
    color: inherit !important;
    opacity: 0.88;
}

#vario-app-root:is([data-vario-theme="dark"], [data-vario-theme="graphite-cobalt"]) body :where(
    .vario-ksef-official-environment-note a,
    .vario-admin-ksef-workbench a:not(.btn):not(.vario-list-document-button)) {
    color: #9ac4ff !important;
    text-decoration-color: rgba(154, 196, 255, 0.58) !important;
}

#vario-app-root:is([data-vario-theme="dark"], [data-vario-theme="graphite-cobalt"]) body .vario-admin-ksef-report-tabs button.active {
    color: #9ac4ff !important;
    border-bottom-color: #5eabff !important;
}

/* CRM and Calendar used a self-contained light dashboard palette. */
#vario-app-root:is([data-vario-theme="dark"], [data-vario-theme="graphite-cobalt"]) body :where(
    .vario-crm-panel:not(.primary),
    .vario-calendar-board,
    .vario-calendar-column,
    .vario-calendar-event,
    .vario-crm-empty) {
    color: var(--vario-text) !important;
    background: var(--vario-surface) !important;
    background-image: none !important;
    border-color: var(--vario-border) !important;
    box-shadow: none !important;
}

#vario-app-root:is([data-vario-theme="dark"], [data-vario-theme="graphite-cobalt"]) body :where(
    .vario-calendar-toolbar,
    .vario-calendar-summary-grid > div,
    .vario-crm-panel.primary .vario-crm-metrics > div) {
    color: var(--vario-text) !important;
    background: var(--vario-toolbar-bg) !important;
    background-image: none !important;
    border-color: var(--vario-border) !important;
}

#vario-app-root:is([data-vario-theme="dark"], [data-vario-theme="graphite-cobalt"]) body .vario-calendar-column.selected {
    background: var(--vario-color-surface-selected) !important;
    border-color: var(--vario-color-focus-ring) !important;
}

#vario-app-root:is([data-vario-theme="dark"], [data-vario-theme="graphite-cobalt"]) body .vario-calendar-event-date {
    color: var(--vario-status-draft-text) !important;
    background: var(--vario-status-draft-bg) !important;
    border-color: var(--vario-status-draft-border) !important;
}

#vario-app-root:is([data-vario-theme="dark"], [data-vario-theme="graphite-cobalt"]) body :where(
    .vario-crm-dashboard,
    .vario-calendar-board) :where(h1, h2, h3, strong, .vario-calendar-event-number) {
    color: var(--vario-text-strong) !important;
}

#vario-app-root:is([data-vario-theme="dark"], [data-vario-theme="graphite-cobalt"]) body :where(
    .vario-crm-dashboard,
    .vario-calendar-board) :where(p, small) {
    color: var(--vario-text-muted) !important;
}

/* Reporting and future-module placeholders use standard cards and controls. */
#vario-app-root:is([data-vario-theme="dark"], [data-vario-theme="graphite-cobalt"]) body :where(
    .vario-report-summary > div,
    .vario-warehouse-document-card,
    .vario-erp-process-card) {
    color: var(--vario-text) !important;
    background: var(--vario-surface) !important;
    background-image: none !important;
    border-color: var(--vario-border) !important;
    box-shadow: none !important;
}

#vario-app-root:is([data-vario-theme="dark"], [data-vario-theme="graphite-cobalt"]) body .vario-report-template-strip button {
    color: var(--vario-text) !important;
    background: var(--vario-surface) !important;
    background-image: none !important;
    border-color: var(--vario-border-strong) !important;
}

#vario-app-root:is([data-vario-theme="dark"], [data-vario-theme="graphite-cobalt"]) body .vario-report-template-strip button.active {
    color: var(--vario-color-primary-600) !important;
    background: var(--vario-color-surface-selected) !important;
    border-color: var(--vario-color-focus-ring) !important;
}

#vario-app-root:is([data-vario-theme="dark"], [data-vario-theme="graphite-cobalt"]) body .vario-warehouse-document-icon {
    color: var(--vario-color-primary-600) !important;
    background: var(--vario-toolbar-bg) !important;
    border-color: var(--vario-border) !important;
}

#vario-app-root:is([data-vario-theme="dark"], [data-vario-theme="graphite-cobalt"]) body :where(
    .vario-report-summary,
    .vario-report-preview-card,
    .vario-erp-process-grid) :where(h2, h3, strong) {
    color: var(--vario-text-strong) !important;
}

#vario-app-root:is([data-vario-theme="dark"], [data-vario-theme="graphite-cobalt"]) body :where(
    .vario-report-summary,
    .vario-report-preview-card,
    .vario-erp-process-grid) :where(span, small, p) {
    color: var(--vario-text-muted) !important;
}

#vario-app-root:is([data-vario-theme="dark"], [data-vario-theme="graphite-cobalt"]) body .vario-eyebrow {
    color: var(--vario-text-muted) !important;
}

#vario-app-root[data-vario-theme] body ::selection {
    color: #ffffff;
    background: #1464ed;
}