/* ============================================================
   VoERP CENTRAL THEME SYSTEM
   Light / Dark / System
   ============================================================ */


/* ============================================================
   LIGHT THEME — DEFAULT
   ============================================================ */

:root,
html[data-theme="light"] {

    color-scheme: light;

    /* Page */
    --bg-primary: #f4f7fb;
    --bg-secondary: #f8fafc;
    --bg-tertiary: #eef3f8;

    /* Surfaces */
    --surface-primary: #ffffff;
    --surface-secondary: #f8fafc;
    --surface-tertiary: #f1f5f9;
    --surface-hover: #f3f7fb;
    --surface-active: #e8f1fb;

    /* Borders */
    --border-primary: #dfe7ef;
    --border-secondary: #cdd8e5;
    --border-strong: #b7c5d4;

    /* Text */
    --text-primary: #182230;
    --text-secondary: #344054;
    --text-muted: #667085;
    --text-disabled: #98a2b3;
    --text-inverse: #ffffff;

    /* Accent */
    --accent-primary: #2374c6;
    --accent-hover: #1d5d9b;
    --accent-active: #174678;
    --accent-soft: #eaf4ff;

    /* Semantic */
    --success: #087443;
    --success-hover: #066137;
    --success-bg: #e7f8ee;

    --warning: #a95a05;
    --warning-hover: #884704;
    --warning-bg: #fff3d8;

    --danger: #b42318;
    --danger-hover: #912018;
    --danger-bg: #feeceb;

    --info: #08758b;
    --info-hover: #065f70;
    --info-bg: #e8f7fa;

    /* Inputs */
    --input-bg: #ffffff;
    --input-border: #d0dae5;
    --input-hover-border: #aebdce;
    --input-focus: #3187df;
    --input-placeholder: #98a2b3;
    --input-disabled-bg: #f2f4f7;

    /* Tables */
    --table-bg: #ffffff;
    --table-header-bg: #f5f8fb;
    --table-row-hover: #f7faff;
    --table-row-selected: #eaf4ff;
    --table-border: #e1e7ef;

    /* Navigation */
    --sidebar-bg: #102a43;
    --sidebar-surface: #143450;
    --sidebar-hover: #183b56;
    --sidebar-active: #243b53;
    --sidebar-text: #d9e2ec;
    --sidebar-muted: #9fb3c8;
    --sidebar-border: #274866;

    --navbar-bg: #ffffff;
    --navbar-border: #e1e7ef;

    /* Components */
    --card-bg: #ffffff;
    --card-header-bg: #fbfcfe;
    --modal-bg: #ffffff;
    --dropdown-bg: #ffffff;
    --tooltip-bg: #182230;

    /* Shadows */
    --shadow-color: rgba(16, 42, 67, .10);
    --shadow-soft: 0 2px 10px rgba(16, 42, 67, .08);
    --shadow-card: 0 8px 24px rgba(16, 42, 67, .08);

    /* Focus */
    --focus-ring: rgba(49, 135, 223, .20);

    /* Scrollbar */
    --scrollbar-track: #eef3f8;
    --scrollbar-thumb: #bcc9d7;
    --scrollbar-hover: #9eafc1;
}


/* ============================================================
   DARK THEME
   ============================================================ */

html[data-theme="dark"] {

    color-scheme: dark;

    /* Page */
    --bg-primary: #11151b;
    --bg-secondary: #151a21;
    --bg-tertiary: #1a2029;

    /* Surfaces */
    --surface-primary: #1a2028;
    --surface-secondary: #202731;
    --surface-tertiary: #262e39;
    --surface-hover: #29323e;
    --surface-active: #2d3e50;

    /* Borders */
    --border-primary: #303946;
    --border-secondary: #394553;
    --border-strong: #465466;

    /* Text */
    --text-primary: #edf1f6;
    --text-secondary: #cbd3dc;
    --text-muted: #98a6b6;
    --text-disabled: #677483;
    --text-inverse: #11151b;

    /* Accent */
    --accent-primary: #5d9dde;
    --accent-hover: #75afe8;
    --accent-active: #87b9ea;
    --accent-soft: #20364d;

    /* Semantic */
    --success: #55b88a;
    --success-hover: #6cc79c;
    --success-bg: #17382b;

    --warning: #d7a452;
    --warning-hover: #e1b66d;
    --warning-bg: #3a2d18;

    --danger: #dc776e;
    --danger-hover: #e58d85;
    --danger-bg: #3d2222;

    --info: #6bb4c3;
    --info-hover: #82c3cf;
    --info-bg: #19343a;

    /* Inputs */
    --input-bg: #181e26;
    --input-border: #374250;
    --input-hover-border: #4a596a;
    --input-focus: #5d9dde;
    --input-placeholder: #748293;
    --input-disabled-bg: #20262e;

    /* Tables */
    --table-bg: #1a2028;
    --table-header-bg: #222a34;
    --table-row-hover: #242d38;
    --table-row-selected: #263b50;
    --table-border: #303946;

    /* Navigation */
    --sidebar-bg: #0d1823;
    --sidebar-surface: #132333;
    --sidebar-hover: #192d40;
    --sidebar-active: #21405a;
    --sidebar-text: #d8e2ec;
    --sidebar-muted: #8da2b5;
    --sidebar-border: #253b50;

    --navbar-bg: #171d24;
    --navbar-border: #303946;

    /* Components */
    --card-bg: #1a2028;
    --card-header-bg: #202731;
    --modal-bg: #1a2028;
    --dropdown-bg: #202731;
    --tooltip-bg: #eef2f6;

    /* Shadows */
    --shadow-color: rgba(0, 0, 0, .34);
    --shadow-soft: 0 3px 12px rgba(0, 0, 0, .24);
    --shadow-card: 0 10px 28px rgba(0, 0, 0, .24);

    /* Focus */
    --focus-ring: rgba(93, 157, 222, .24);

    /* Scrollbar */
    --scrollbar-track: #14191f;
    --scrollbar-thumb: #394552;
    --scrollbar-hover: #4b5a69;
}


/* ============================================================
   LEGACY VOERP VARIABLE BRIDGE

   Eski 8.000 satırlık CSS'in büyük bölümünü yeni semantik
   token sistemiyle otomatik bağlar.
   ============================================================ */

:root,
html[data-theme] {

    --voerp-bg: var(--bg-primary);
    --voerp-bg-soft: var(--bg-secondary);

    --voerp-surface: var(--surface-primary);
    --voerp-surface-soft: var(--surface-secondary);

    --voerp-text: var(--text-primary);
    --voerp-text-secondary: var(--text-secondary);

    --voerp-muted: var(--text-muted);
    --voerp-subtle: var(--text-disabled);

    --voerp-border: var(--border-primary);
    --voerp-border-strong: var(--border-secondary);

    --voerp-shadow-xs: var(--shadow-soft);
    --voerp-shadow-sm: var(--shadow-soft);
    --voerp-shadow: var(--shadow-card);
    --voerp-shadow-lg: var(--shadow-card);
}


/* ============================================================
   BOOTSTRAP VARIABLE BRIDGE
   ============================================================ */

html[data-theme="light"],
html[data-theme="dark"] {

    --bs-body-bg: var(--bg-primary);
    --bs-body-color: var(--text-primary);

    --bs-secondary-color: var(--text-muted);
    --bs-secondary-bg: var(--surface-secondary);
    --bs-tertiary-bg: var(--surface-tertiary);

    --bs-emphasis-color: var(--text-primary);

    --bs-border-color: var(--border-primary);

    --bs-link-color: var(--accent-primary);
    --bs-link-hover-color: var(--accent-hover);

    --bs-primary: var(--accent-primary);
}


/* ============================================================
   ROOT / PAGE
   ============================================================ */

html {
    background: var(--bg-primary);
}

body {
    background: var(--bg-primary);
    color: var(--text-primary);
}

main {
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
}


/* ============================================================
   TYPOGRAPHY
   ============================================================ */

h1,
h2,
h3,
h4,
h5,
h6,
legend {
    color: var(--text-primary);
}

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

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


/* ============================================================
   NAVBAR / TOPBAR
   ============================================================ */

main > .d-flex.justify-content-between.mb-4 {
    background: var(--navbar-bg);
    border: 1px solid var(--navbar-border);
    border-radius: 10px;
    padding: .65rem .8rem;
    color: var(--text-primary);
}


/* ============================================================
   SIDEBAR
   ============================================================ */

.sidebar {
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
}

.sidebar .brand {
    color: var(--text-inverse);
}

html[data-theme="dark"] .sidebar .brand {
    color: var(--sidebar-text);
}

.sidebar a {
    color: var(--sidebar-text);
}

.sidebar a:hover {
    background: var(--sidebar-hover);
    color: #ffffff;
}

.sidebar a.active,
.sidebar .sidebar-subitem.active {
    background: var(--sidebar-active);
    color: #ffffff;
}

.sidebar-section-toggle {
    color: var(--sidebar-muted);
}

.sidebar-section-toggle:hover {
    background: var(--sidebar-hover);
    color: #ffffff;
}


/* ============================================================
   CARDS / PANELS
   ============================================================ */

.card,
.voerp-dashboard-panel,
.voerp-kpi-card,
.voerp-mini-stat {
    background: var(--card-bg);
    color: var(--text-primary);
    border-color: var(--border-primary);
}

.card-header,
.card-footer {
    background: var(--card-header-bg);
    color: var(--text-primary);
    border-color: var(--border-primary);
}


/* Bootstrap bg-white legacy compatibility */

.bg-white {
    background-color: var(--surface-primary) !important;
}


/* ============================================================
   FORMS
   ============================================================ */

.form-control,
.form-select,
.form-check-input,
textarea,
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="number"],
input[type="search"] {
    background-color: var(--input-bg);
    color: var(--text-primary);
    border-color: var(--input-border);
}

.form-control:hover,
.form-select:hover {
    border-color: var(--input-hover-border);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    background-color: var(--input-bg);
    color: var(--text-primary);
    border-color: var(--input-focus);
    box-shadow: 0 0 0 .2rem var(--focus-ring);
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--input-placeholder);
    opacity: 1;
}

.form-control:disabled,
.form-select:disabled,
.form-control[readonly] {
    background-color: var(--input-disabled-bg);
    color: var(--text-disabled);
}

.form-label {
    color: var(--text-secondary);
}


/* Chrome/Safari autofill */

html[data-theme="dark"]
input:-webkit-autofill,
html[data-theme="dark"]
input:-webkit-autofill:hover,
html[data-theme="dark"]
input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text-primary);
    -webkit-box-shadow:
        0 0 0 1000px var(--input-bg) inset;
    caret-color: var(--text-primary);
}


/* Native controls */

html[data-theme="dark"]
input[type="date"],
html[data-theme="dark"]
input[type="time"],
html[data-theme="dark"]
input[type="datetime-local"] {
    color-scheme: dark;
}


/* ============================================================
   TABLES
   ============================================================ */

.table {
    --bs-table-bg: var(--table-bg);
    --bs-table-color: var(--text-primary);
    --bs-table-border-color: var(--table-border);

    --bs-table-hover-bg: var(--table-row-hover);
    --bs-table-hover-color: var(--text-primary);

    color: var(--text-primary);
}

.table-light {
    --bs-table-bg: var(--table-header-bg);
    --bs-table-color: var(--text-secondary);
    --bs-table-border-color: var(--table-border);
}

.table > thead {
    background: var(--table-header-bg);
}

.table > :not(caption) > * > * {
    border-bottom-color: var(--table-border);
}


/* ============================================================
   DROPDOWN
   ============================================================ */

.dropdown-menu {
    background: var(--dropdown-bg);
    color: var(--text-primary);
    border-color: var(--border-primary);
    box-shadow: var(--shadow-card);
}

.dropdown-item {
    color: var(--text-primary);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--surface-hover);
    color: var(--text-primary);
}

.dropdown-divider {
    border-color: var(--border-primary);
}


/* ============================================================
   MODAL
   ============================================================ */

.modal-content {
    background: var(--modal-bg);
    color: var(--text-primary);
    border-color: var(--border-primary);
}

.modal-header,
.modal-footer {
    border-color: var(--border-primary);
}


/* ============================================================
   BUTTONS
   ============================================================ */

.btn-primary {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: #ffffff;
}

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

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

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

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

.btn-outline-secondary:hover {
    color: var(--text-primary);
    background: var(--surface-hover);
    border-color: var(--border-strong);
}

.btn:focus-visible,
a:focus-visible,
button:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
    outline: 2px solid var(--input-focus);
    outline-offset: 2px;
}


/* ============================================================
   ALERTS / SEMANTIC STATES
   ============================================================ */

.alert-success {
    color: var(--success);
    background: var(--success-bg);
    border-color: color-mix(
        in srgb,
        var(--success) 25%,
        transparent
    );
}

.alert-warning {
    color: var(--warning);
    background: var(--warning-bg);
}

.alert-danger {
    color: var(--danger);
    background: var(--danger-bg);
}

.alert-info {
    color: var(--info);
    background: var(--info-bg);
}


/* ============================================================
   PAGINATION
   ============================================================ */

.page-link {
    background: var(--surface-primary);
    color: var(--text-secondary);
    border-color: var(--border-primary);
}

.page-link:hover {
    background: var(--surface-hover);
    color: var(--accent-primary);
}

.active > .page-link,
.page-link.active {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
}


/* ============================================================
   TRADE UX / CONSIGNMENT / READINESS
   ============================================================ */

.trade-line-row,
.return-line-row,
.voerp-readiness-panel,
.voerp-consignment-preview,
.voerp-live-summary {
    background: var(--surface-primary);
    color: var(--text-primary);
    border-color: var(--border-primary);
}

.voerp-readiness-header,
.voerp-consignment-header {
    background: var(--surface-secondary);
    border-color: var(--border-primary);
}

.voerp-readiness-item,
.voerp-consignment-row,
.voerp-operation-summary-card,
.voerp-operation-summary-heading,
.voerp-stock-availability-values > div,
.voerp-live-summary-grid > div {
    background: var(--surface-secondary);
    color: var(--text-primary);
    border-color: var(--border-primary);
}

.voerp-readiness-item strong,
.voerp-consignment-row strong,
.voerp-operation-summary-card strong,
.voerp-stock-availability strong,
.voerp-live-summary strong {
    color: var(--text-primary);
}


/* ============================================================
   BADGES
   ============================================================ */

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


/* ============================================================
   TOOLTIP
   ============================================================ */

.tooltip {
    --bs-tooltip-bg: var(--tooltip-bg);
    --bs-tooltip-color: var(--text-inverse);
}


/* ============================================================
   SCROLLBAR
   ============================================================ */

* {
    scrollbar-width: thin;
    scrollbar-color:
        var(--scrollbar-thumb)
        var(--scrollbar-track);
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

*::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 999px;
    border: 2px solid var(--scrollbar-track);
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-hover);
}


/* ============================================================
   THEME CONTROL
   ============================================================ */

.voerp-theme-control {
    display: inline-flex;
    align-items: center;
    gap: .25rem;

    padding: .2rem;

    background: var(--surface-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 10px;
}

.voerp-theme-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: .3rem;

    min-height: 30px;

    padding: .25rem .5rem;

    color: var(--text-muted);
    background: transparent;

    border: 0;
    border-radius: 7px;

    font-size: .68rem;
    font-weight: 650;
}

.voerp-theme-option:hover {
    color: var(--text-primary);
    background: var(--surface-hover);
}

.voerp-theme-option.active {
    color: var(--accent-primary);
    background: var(--accent-soft);
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 767.98px) {

    .voerp-theme-option span {
        display: none;
    }

    .voerp-theme-option {
        width: 32px;
        padding: .25rem;
    }
}


/* ============================================================
   COMPANY DROPDOWN PORTAL
   Görsel tasarımı değiştirmez; yalnız stacking context'ten çıkarır.
   ============================================================ */

.voerp-company-dropdown-portal {
    z-index: 20000 !important;

    min-width: 220px;

    max-width:
        calc(100vw - 24px);
}

/* ============================================================
   VOERP SEMANTIC CONTRACT V2
   Foundation values are private to this file. Components consume
   semantic aliases only.
   ============================================================ */

:root {
    --palette-neutral-0: #ffffff;
    --palette-neutral-25: #fbfcfe;
    --palette-neutral-50: #f8fafc;
    --palette-neutral-100: #f1f5f9;
    --palette-neutral-200: #dfe7ef;
    --palette-neutral-300: #cdd8e5;
    --palette-neutral-400: #98a2b3;
    --palette-neutral-500: #667085;
    --palette-neutral-700: #344054;
    --palette-neutral-900: #182230;
    --palette-slate-950: #0d1823;
    --palette-blue-50: #eaf4ff;
    --palette-blue-500: #3187df;
    --palette-blue-600: #2374c6;
    --palette-blue-700: #1d5d9b;
    --palette-red-50: #feeceb;
    --palette-red-600: #d92d20;
    --palette-red-700: #b42318;
    --palette-green-50: #e7f8ee;
    --palette-green-700: #087443;
    --palette-amber-50: #fff3d8;
    --palette-amber-700: #925004;
    --palette-cyan-50: #e8f7fa;
    --palette-cyan-700: #08758b;
}

:root,
html[data-theme="light"] {
    --surface-page: #f4f7fb;
    --surface-sidebar: #102a43;
    --surface-base: var(--palette-neutral-0);
    --surface-subtle: var(--palette-neutral-50);
    --surface-raised: var(--palette-neutral-0);
    --surface-overlay: var(--palette-neutral-0);
    --surface-input: var(--palette-neutral-0);
    --surface-hover: #f3f7fb;
    --surface-active: #e8f1fb;
    --surface-selected: var(--palette-blue-50);
    --surface-disabled: #f2f4f7;
    --surface-readonly: #f7f9fc;

    --content-primary: var(--palette-neutral-900);
    --content-secondary: var(--palette-neutral-700);
    --content-muted: var(--palette-neutral-500);
    --content-disabled: var(--palette-neutral-400);
    --content-inverse: var(--palette-neutral-0);
    --content-link: var(--palette-blue-600);
    --content-link-hover: var(--palette-blue-700);

    --border-subtle: var(--palette-neutral-200);
    --border-default: var(--palette-neutral-300);
    --border-strong: #aebdce;
    --border-focus: var(--palette-blue-500);
    --border-disabled: #d8dee7;

    --control-primary-bg: var(--palette-blue-600);
    --control-primary-hover-bg: var(--palette-blue-700);
    --control-primary-active-bg: #174678;
    --control-primary-fg: var(--palette-neutral-0);
    --control-danger-bg: var(--palette-red-600);
    --control-danger-hover-bg: var(--palette-red-700);
    --control-danger-fg: var(--palette-neutral-0);
    --control-disabled-bg: #e9edf2;
    --control-disabled-fg: #7a8696;

    --feedback-success-fg: var(--palette-green-700);
    --feedback-success-bg: var(--palette-green-50);
    --feedback-success-border: #a9ddbf;
    --feedback-warning-fg: var(--palette-amber-700);
    --feedback-warning-bg: var(--palette-amber-50);
    --feedback-warning-border: #e7c47e;
    --feedback-danger-fg: var(--palette-red-700);
    --feedback-danger-bg: var(--palette-red-50);
    --feedback-danger-border: #edb3ae;
    --feedback-info-fg: var(--palette-cyan-700);
    --feedback-info-bg: var(--palette-cyan-50);
    --feedback-info-border: #a9dde6;
    --feedback-neutral-fg: var(--content-secondary);
    --feedback-neutral-bg: var(--surface-subtle);
    --feedback-neutral-border: var(--border-default);

    --table-header-bg: #f5f8fb;
    --table-row-bg: var(--surface-base);
    --table-row-alt-bg: #fafbfd;
    --table-row-hover-bg: #eef5fd;
    --table-row-selected-bg: var(--surface-selected);
    --table-border-color: var(--border-subtle);
    --modal-backdrop-color: rgba(10, 24, 40, .52);
    --focus-ring-color: rgba(49, 135, 223, .32);
    --shadow-raised: 0 8px 24px rgba(16, 42, 67, .10);
    --shadow-overlay: 0 22px 64px rgba(16, 24, 40, .20);

    --sidebar-surface-hover: #183b56;
    --sidebar-surface-active: #214767;
    --sidebar-content: #d9e2ec;
    --sidebar-content-muted: #aebfd0;
    --sidebar-border-color: #274866;
}

html[data-theme="dark"] {
    --surface-page: #11151b;
    --surface-sidebar: #0d1823;
    --surface-base: #1a2028;
    --surface-subtle: #202731;
    --surface-raised: #242c36;
    --surface-overlay: #28313c;
    --surface-input: #181e26;
    --surface-hover: #29323e;
    --surface-active: #304052;
    --surface-selected: #263f57;
    --surface-disabled: #20262e;
    --surface-readonly: #222a33;

    --content-primary: #edf1f6;
    --content-secondary: #cbd3dc;
    --content-muted: #a8b3c0;
    --content-disabled: #7f8b99;
    --content-inverse: #11151b;
    --content-link: #75afe8;
    --content-link-hover: #9bc8f1;

    --border-subtle: #303946;
    --border-default: #3b4755;
    --border-strong: #596879;
    --border-focus: #75afe8;
    --border-disabled: #343d48;

    --control-primary-bg: #397fbe;
    --control-primary-hover-bg: #4f93cf;
    --control-primary-active-bg: #67a5dc;
    --control-primary-fg: #ffffff;
    --control-danger-bg: #b94f49;
    --control-danger-hover-bg: #ca625b;
    --control-danger-fg: #ffffff;
    --control-disabled-bg: #2a313a;
    --control-disabled-fg: #8a96a4;

    --feedback-success-fg: #78cba5;
    --feedback-success-bg: #17382b;
    --feedback-success-border: #2f6b50;
    --feedback-warning-fg: #e4b768;
    --feedback-warning-bg: #3a2d18;
    --feedback-warning-border: #755c2d;
    --feedback-danger-fg: #ee938b;
    --feedback-danger-bg: #3d2222;
    --feedback-danger-border: #75403e;
    --feedback-info-fg: #8acbd7;
    --feedback-info-bg: #19343a;
    --feedback-info-border: #356771;
    --feedback-neutral-fg: var(--content-secondary);
    --feedback-neutral-bg: var(--surface-subtle);
    --feedback-neutral-border: var(--border-default);

    --table-header-bg: #222a34;
    --table-row-bg: var(--surface-base);
    --table-row-alt-bg: #1d242d;
    --table-row-hover-bg: #293746;
    --table-row-selected-bg: var(--surface-selected);
    --table-border-color: var(--border-subtle);
    --modal-backdrop-color: rgba(3, 8, 14, .72);
    --focus-ring-color: rgba(117, 175, 232, .38);
    --shadow-raised: 0 10px 28px rgba(0, 0, 0, .28);
    --shadow-overlay: 0 24px 72px rgba(0, 0, 0, .46);

    --sidebar-surface-hover: #192d40;
    --sidebar-surface-active: #21496a;
    --sidebar-content: #d8e2ec;
    --sidebar-content-muted: #a8bacb;
    --sidebar-border-color: #2d4861;
}

/* Public compatibility aliases. */
:root,
html[data-theme] {
    --bg-primary: var(--surface-page);
    --bg-secondary: var(--surface-subtle);
    --bg-tertiary: var(--surface-raised);
    --surface-primary: var(--surface-base);
    --surface-secondary: var(--surface-subtle);
    --surface-tertiary: var(--surface-raised);
    --text-primary: var(--content-primary);
    --text-secondary: var(--content-secondary);
    --text-muted: var(--content-muted);
    --text-disabled: var(--content-disabled);
    --text-inverse: var(--content-inverse);
    --accent-primary: var(--control-primary-bg);
    --accent-hover: var(--control-primary-hover-bg);
    --accent-active: var(--control-primary-active-bg);
    --input-bg: var(--surface-input);
    --input-border: var(--border-default);
    --input-hover-border: var(--border-strong);
    --input-focus: var(--border-focus);
    --input-placeholder: var(--content-disabled);
    --input-disabled-bg: var(--surface-disabled);
    --table-bg: var(--table-row-bg);
    --table-row-hover: var(--table-row-hover-bg);
    --table-row-selected: var(--table-row-selected-bg);
    --table-border: var(--table-border-color);
    --sidebar-bg: var(--surface-sidebar);
    --sidebar-hover: var(--sidebar-surface-hover);
    --sidebar-active: var(--sidebar-surface-active);
    --sidebar-text: var(--sidebar-content);
    --sidebar-muted: var(--sidebar-content-muted);
    --sidebar-border: var(--sidebar-border-color);
    --navbar-bg: var(--surface-raised);
    --navbar-border: var(--border-subtle);
    --card-bg: var(--surface-base);
    --card-header-bg: var(--surface-subtle);
    --modal-bg: var(--surface-overlay);
    --dropdown-bg: var(--surface-overlay);
    --shadow-soft: var(--shadow-raised);
    --shadow-card: var(--shadow-raised);
    --focus-ring: var(--focus-ring-color);
    --success: var(--feedback-success-fg);
    --success-bg: var(--feedback-success-bg);
    --warning: var(--feedback-warning-fg);
    --warning-bg: var(--feedback-warning-bg);
    --danger: var(--feedback-danger-fg);
    --danger-bg: var(--feedback-danger-bg);
    --info: var(--feedback-info-fg);
    --info-bg: var(--feedback-info-bg);
}

/* Bootstrap 5.3 bridge. RGB values are theme-specific for Bootstrap alpha APIs. */
html[data-theme="light"] {
    --bs-body-bg-rgb: 244, 247, 251;
    --bs-body-color-rgb: 24, 34, 48;
    --bs-primary-rgb: 35, 116, 198;
    --bs-secondary-rgb: 102, 112, 133;
    --bs-success-rgb: 8, 116, 67;
    --bs-warning-rgb: 146, 80, 4;
    --bs-danger-rgb: 180, 35, 24;
    --bs-info-rgb: 8, 117, 139;
}

html[data-theme="dark"] {
    --bs-body-bg-rgb: 17, 21, 27;
    --bs-body-color-rgb: 237, 241, 246;
    --bs-primary-rgb: 57, 127, 190;
    --bs-secondary-rgb: 168, 179, 192;
    --bs-success-rgb: 120, 203, 165;
    --bs-warning-rgb: 228, 183, 104;
    --bs-danger-rgb: 238, 147, 139;
    --bs-info-rgb: 138, 203, 215;
}

html[data-theme] {
    --bs-body-bg: var(--surface-page);
    --bs-body-color: var(--content-primary);
    --bs-heading-color: var(--content-primary);
    --bs-emphasis-color: var(--content-primary);
    --bs-secondary-color: var(--content-muted);
    --bs-secondary-bg: var(--surface-subtle);
    --bs-tertiary-bg: var(--surface-raised);
    --bs-border-color: var(--border-default);
    --bs-border-color-translucent: var(--border-subtle);
    --bs-primary: var(--control-primary-bg);
    --bs-success: var(--feedback-success-fg);
    --bs-warning: var(--feedback-warning-fg);
    --bs-danger: var(--feedback-danger-fg);
    --bs-info: var(--feedback-info-fg);
    --bs-link-color: var(--content-link);
    --bs-link-hover-color: var(--content-link-hover);
    --bs-focus-ring-color: var(--focus-ring-color);
    --bs-form-control-disabled-bg: var(--surface-disabled);
}

/* Core surfaces and cards. Legacy card-header gradients are normalized through the semantic surface. */
html[data-theme] body,
html[data-theme] main {
    background-color: var(--surface-page);
    color: var(--content-primary);
}

html[data-theme] .card,
html[data-theme] .voerp-dashboard-panel,
html[data-theme] .voerp-kpi-card,
html[data-theme] .voerp-mini-stat {
    background: var(--surface-base);
    color: var(--content-primary);
    border-color: var(--border-subtle);
    box-shadow: var(--shadow-raised);
}

html[data-theme] .card-header,
html[data-theme] .card-footer {
    background: var(--surface-subtle);
    color: var(--content-primary);
    border-color: var(--border-subtle);
}

html[data-theme] .card-header strong,
html[data-theme] .card-title {
    color: var(--content-primary);
}

html[data-theme] .bg-white,
html[data-theme] .bg-light {
    background-color: var(--surface-base);
    color: var(--content-primary);
}

/* Forms and native controls. */
html[data-theme] .form-control,
html[data-theme] .form-select,
html[data-theme] textarea,
html[data-theme] input[type="date"],
html[data-theme] input[type="time"],
html[data-theme] input[type="datetime-local"],
html[data-theme] input[type="file"] {
    color: var(--content-primary);
    background-color: var(--surface-input);
    border-color: var(--border-default);
}

html[data-theme] .form-control:hover,
html[data-theme] .form-select:hover {
    border-color: var(--border-strong);
}

html[data-theme] .form-control::placeholder,
html[data-theme] textarea::placeholder {
    color: var(--content-disabled);
    opacity: 1;
}

html[data-theme] .form-control[readonly],
html[data-theme] textarea[readonly] {
    color: var(--content-secondary);
    background: var(--surface-readonly);
    border-color: var(--border-default);
}

html[data-theme] .form-control:disabled,
html[data-theme] .form-select:disabled,
html[data-theme] textarea:disabled,
html[data-theme] .btn:disabled,
html[data-theme] .btn.disabled {
    color: var(--control-disabled-fg);
    background: var(--control-disabled-bg);
    border-color: var(--border-disabled);
    opacity: 1;
}

html[data-theme] .form-control.is-invalid,
html[data-theme] .form-select.is-invalid {
    color: var(--content-primary);
    background-color: var(--feedback-danger-bg);
    border-color: var(--feedback-danger-border);
}

html[data-theme] .form-control.is-valid,
html[data-theme] .form-select.is-valid {
    color: var(--content-primary);
    background-color: var(--feedback-success-bg);
    border-color: var(--feedback-success-border);
}

html[data-theme] .invalid-feedback,
html[data-theme] .text-danger {
    color: var(--feedback-danger-fg) !important;
}

html[data-theme] .valid-feedback,
html[data-theme] .text-success {
    color: var(--feedback-success-fg) !important;
}

html[data-theme] input[type="file"]::file-selector-button {
    color: var(--content-primary);
    background: var(--surface-subtle);
    border-color: var(--border-default);
}

html[data-theme="dark"] input:-webkit-autofill,
html[data-theme="dark"] input:-webkit-autofill:hover,
html[data-theme="dark"] input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--content-primary);
    -webkit-box-shadow: 0 0 0 1000px var(--surface-input) inset;
    caret-color: var(--content-primary);
}

html[data-theme] input[type="date"],
html[data-theme] input[type="time"],
html[data-theme] input[type="datetime-local"],
html[data-theme] select {
    color-scheme: inherit;
}

/* One focus contract for keyboard users. */
html[data-theme] :where(
    a,
    button,
    .btn,
    .form-control,
    .form-select,
    .form-check-input,
    .dropdown-item,
    .page-link,
    .nav-link,
    .nav-tabs .nav-link
):focus-visible {
    outline: 3px solid var(--border-focus);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--focus-ring-color);
}

html[data-theme] a {
    color: var(--content-link);
}

html[data-theme] a:hover {
    color: var(--content-link-hover);
}

/* Buttons. */
html[data-theme] .btn-primary {
    color: var(--control-primary-fg);
    background: var(--control-primary-bg);
    border-color: var(--control-primary-bg);
}

html[data-theme] .btn-primary:hover,
html[data-theme] .btn-primary:focus {
    color: var(--control-primary-fg);
    background: var(--control-primary-hover-bg);
    border-color: var(--control-primary-hover-bg);
}

html[data-theme] .btn-danger {
    color: var(--control-danger-fg);
    background: var(--control-danger-bg);
    border-color: var(--control-danger-bg);
}

html[data-theme] .btn-outline-primary,
html[data-theme] .btn-outline-secondary,
html[data-theme] .btn-outline-danger {
    background: transparent;
}

html[data-theme] .btn-outline-secondary {
    color: var(--content-secondary);
    border-color: var(--border-strong);
}

html[data-theme] .btn-outline-danger {
    color: var(--feedback-danger-fg);
    border-color: var(--feedback-danger-border);
}

html[data-theme] .btn-outline-danger:hover {
    color: var(--control-danger-fg);
    background: var(--control-danger-bg);
    border-color: var(--control-danger-bg);
}

/* Sidebar and application topbar. */
html[data-theme] :is(.sidebar, aside.sidebar, aside.bg-dark, .sidebar-wrapper) {
    color: var(--sidebar-content);
    background: var(--surface-sidebar);
    border-color: var(--sidebar-border-color);
}

html[data-theme] .sidebar a,
html[data-theme] .sidebar-section-toggle {
    color: var(--sidebar-content-muted);
}

html[data-theme] .sidebar a:hover,
html[data-theme] .sidebar-section-toggle:hover {
    color: var(--sidebar-content);
    background: var(--sidebar-surface-hover);
}

html[data-theme] .sidebar a.active,
html[data-theme] .sidebar .sidebar-subitem.active {
    color: var(--sidebar-content);
    background: var(--sidebar-surface-active);
    box-shadow: inset 3px 0 0 var(--border-focus);
}

html[data-theme] main > .d-flex.justify-content-between.mb-4 {
    color: var(--content-primary);
    background: var(--surface-raised);
    border-color: var(--border-subtle);
    box-shadow: var(--shadow-raised);
}

html[data-theme] main > .d-flex.justify-content-between.mb-4 b {
    color: var(--content-primary);
}

.voerp-topbar-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* Theme selector. */
.voerp-theme-control {
    min-height: 44px;
    padding: 0;
    background: var(--surface-subtle);
    border-color: var(--border-default);
}

.voerp-theme-option {
    min-width: 44px;
    min-height: 44px;
    color: var(--content-muted);
}

.voerp-theme-option:hover {
    color: var(--content-primary);
    background: var(--surface-hover);
}

.voerp-theme-option.active,
.voerp-theme-option[aria-pressed="true"] {
    color: var(--content-link);
    background: var(--surface-selected);
    box-shadow: inset 0 0 0 1px var(--border-default);
}

/* Dropdowns. */
html[data-theme] .dropdown-menu {
    color: var(--content-primary);
    background: var(--surface-overlay);
    border-color: var(--border-default);
    box-shadow: var(--shadow-overlay);
}

html[data-theme] .dropdown-item {
    color: var(--content-primary);
    background: transparent;
}

html[data-theme] .dropdown-item:hover,
html[data-theme] .dropdown-item:focus {
    color: var(--content-primary);
    background: var(--surface-hover);
}

html[data-theme] .dropdown-item.active,
html[data-theme] .dropdown-item:active {
    color: var(--content-primary);
    background: var(--surface-selected);
}

html[data-theme] .dropdown-item.disabled,
html[data-theme] .dropdown-item:disabled {
    color: var(--content-disabled);
    background: transparent;
}

/* Modals and backdrop. */
html[data-theme] .modal-content {
    color: var(--content-primary);
    background: var(--surface-overlay);
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-overlay);
}

html[data-theme] .modal-header,
html[data-theme] .modal-footer {
    border-color: var(--border-subtle);
}

html[data-theme] .modal-backdrop {
    --bs-backdrop-bg: var(--modal-backdrop-color);
    --bs-backdrop-opacity: 1;
}

html[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(180%);
}

/* Pagination and tab navigation. */
html[data-theme] .page-link,
html[data-theme] .nav-tabs .nav-link,
html[data-theme] .nav-pills .nav-link {
    color: var(--content-secondary);
    background: var(--surface-base);
    border-color: var(--border-default);
}

html[data-theme] .page-link:hover,
html[data-theme] .nav-tabs .nav-link:hover,
html[data-theme] .nav-pills .nav-link:hover {
    color: var(--content-link-hover);
    background: var(--surface-hover);
    border-color: var(--border-strong);
}

html[data-theme] .page-item.active .page-link,
html[data-theme] .nav-tabs .nav-link.active,
html[data-theme] .nav-pills .nav-link.active {
    color: var(--control-primary-fg);
    background: var(--control-primary-bg);
    border-color: var(--control-primary-bg);
}

html[data-theme] .page-item.disabled .page-link,
html[data-theme] .nav-link.disabled {
    color: var(--content-disabled);
    background: var(--surface-disabled);
    border-color: var(--border-disabled);
}

/* Generic feedback and empty states. */
html[data-theme] .alert-success {
    color: var(--feedback-success-fg);
    background: var(--feedback-success-bg);
    border-color: var(--feedback-success-border);
}

html[data-theme] .alert-warning {
    color: var(--feedback-warning-fg);
    background: var(--feedback-warning-bg);
    border-color: var(--feedback-warning-border);
}

html[data-theme] .alert-danger {
    color: var(--feedback-danger-fg);
    background: var(--feedback-danger-bg);
    border-color: var(--feedback-danger-border);
}

html[data-theme] .alert-info {
    color: var(--feedback-info-fg);
    background: var(--feedback-info-bg);
    border-color: var(--feedback-info-border);
}

html[data-theme] .alert-light,
html[data-theme] .alert-secondary {
    color: var(--feedback-neutral-fg);
    background: var(--feedback-neutral-bg);
    border-color: var(--feedback-neutral-border);
}

html[data-theme] :is(.empty-state, .voerp-empty-state, td.text-center.text-muted) {
    color: var(--content-muted) !important;
    background: transparent;
}

/* Base table compatibility only; domain table migration remains a later phase. */
html[data-theme] .table-responsive {
    background: var(--surface-base);
    border-color: var(--table-border-color);
}

html[data-theme] .table > thead > tr > th,
html[data-theme] .table-light > :not(caption) > * > * {
    color: var(--content-secondary);
    background: var(--table-header-bg);
    border-color: var(--table-border-color);
}

html[data-theme] .table > tbody > tr > td {
    color: var(--content-primary);
    background: var(--table-row-bg);
    border-color: var(--table-border-color);
}

html[data-theme] .table > tbody > tr:nth-child(even) > * {
    background: var(--table-row-alt-bg);
}

html[data-theme] .table-hover > tbody > tr:hover > * {
    color: var(--content-primary);
    background: var(--table-row-hover-bg);
}

@media (max-width: 767.98px) {
    .voerp-topbar-actions {
        gap: .35rem;
    }

    .voerp-theme-option {
        min-width: 44px;
        min-height: 44px;
    }
}

/* Bootstrap feedback utility compatibility. */
html[data-theme] .text-bg-success {
    color: var(--feedback-success-fg) !important;
    background: var(--feedback-success-bg) !important;
    border-color: var(--feedback-success-border) !important;
}

html[data-theme] .text-bg-warning {
    color: var(--feedback-warning-fg) !important;
    background: var(--feedback-warning-bg) !important;
    border-color: var(--feedback-warning-border) !important;
}

html[data-theme] .text-bg-danger {
    color: var(--feedback-danger-fg) !important;
    background: var(--feedback-danger-bg) !important;
    border-color: var(--feedback-danger-border) !important;
}

html[data-theme] .text-bg-info {
    color: var(--feedback-info-fg) !important;
    background: var(--feedback-info-bg) !important;
    border-color: var(--feedback-info-border) !important;
}

html[data-theme] :is(.text-bg-secondary, .text-bg-light) {
    color: var(--feedback-neutral-fg) !important;
    background: var(--feedback-neutral-bg) !important;
    border-color: var(--feedback-neutral-border) !important;
}

html[data-theme] .text-dark {
    color: var(--content-primary) !important;
}

html[data-theme] main > .d-flex.justify-content-between.mb-4
:is(.dropdown-toggle, .btn-outline-danger) {
    background: transparent;
}

html[data-theme] main > .d-flex.justify-content-between.mb-4
.badge.text-bg-secondary {
    color: var(--feedback-neutral-fg);
    background: var(--feedback-neutral-bg);
    border-color: var(--feedback-neutral-border);
}

@media (max-width: 575.98px) {
    main > .d-flex.justify-content-between.mb-4 {
        flex-wrap: wrap;
    }

    .voerp-topbar-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

/* ============================================================
   AUTHENTICATED DOMAIN SURFACES

   Legacy domain components use light-only literals in the visual
   stylesheet. Keep those values as the light-theme contract and map
   their dark appearance onto the canonical semantic hierarchy here.
   ============================================================ */

html[data-theme="dark"] :is(
    .voerp-page-header,
    main .d-flex.flex-wrap.justify-content-between.align-items-center.gap-2.mb-4
) {
    color: var(--content-primary);
    background: var(--surface-raised);
    border-color: var(--border-default);
    box-shadow: var(--shadow-raised);
}

html[data-theme="dark"] :is(
    .voerp-page-header,
    main .d-flex.flex-wrap.justify-content-between.align-items-center.gap-2.mb-4
) :is(h1, h2, h3, strong) {
    color: var(--content-primary);
}

html[data-theme="dark"] :is(
    [data-panel="customer-products"],
    [data-panel="container-balance"],
    [data-panel="collection-actions"],
    [data-panel="payment-actions"],
    .voerp-stock-stat,
    .voerp-trade-header,
    .voerp-trade-lines,
    .voerp-return-lines,
    .voerp-consignment-preview,
    .voerp-readiness-panel
) {
    color: var(--content-primary);
    background: var(--surface-base);
    border-color: var(--border-subtle);
}

html[data-theme="dark"] :is(
    .voerp-trade-summary-card,
    .voerp-live-summary
) {
    color: var(--content-primary);
    background: var(--surface-overlay);
    border-color: var(--border-default);
    box-shadow: var(--shadow-overlay);
}

html[data-theme="dark"] :is(
    .voerp-readiness-header,
    .voerp-consignment-header,
    .voerp-operation-summary-heading,
    .voerp-line-row,
    .trade-line-row,
    .return-line-row,
    .voerp-consignment-row,
    .voerp-operation-summary-card,
    .voerp-readiness-item,
    .voerp-stock-availability-values,
    .voerp-stock-availability-values > div,
    .voerp-live-summary-grid > div,
    [data-panel="customer-products"] .border.rounded,
    .card .row.g-3 .border.rounded
) {
    color: var(--content-primary);
    background: var(--surface-subtle);
    border-color: var(--border-default);
}

html[data-theme="dark"] .card .border.rounded.p-2.mb-2 {
    color: var(--content-primary);
    background: var(--surface-subtle);
    border-color: var(--border-default) !important;
}

html[data-theme="dark"] .card .border.rounded.p-2.mb-2
> .d-flex :is(strong, .fw-semibold) {
    color: var(--content-primary);
}

html[data-theme="dark"] .card .border.rounded.p-2.mb-2
> .small.text-muted {
    color: var(--content-muted) !important;
}

html[data-theme="dark"] [data-panel="customer-products"] .border.rounded {
    border-color: var(--feedback-warning-border) !important;
}

html[data-theme="dark"] :is(
    .voerp-line-row:hover,
    .trade-line-row:hover,
    .return-line-row:hover
) {
    background: var(--surface-hover);
    border-color: var(--border-strong);
}

html[data-theme="dark"] :is(
    .voerp-operation-summary-card.danger,
    .voerp-readiness-item.danger
) {
    background: var(--feedback-danger-bg);
    border-color: var(--feedback-danger-border);
}

html[data-theme="dark"] .voerp-readiness-item.warning {
    background: var(--feedback-warning-bg);
    border-color: var(--feedback-warning-border);
}

html[data-theme="dark"] .voerp-readiness-item.success {
    background: var(--feedback-success-bg);
    border-color: var(--feedback-success-border);
}

html[data-theme="dark"] :is(
    .voerp-page-header h1,
    .card h2.h5,
    .card h3.h6,
    .card .row .border.rounded .fs-5,
    .voerp-stock-stat-value,
    .voerp-trade-lines-title,
    .voerp-trade-summary-total,
    .voerp-live-summary-title,
    .voerp-live-summary-grid strong,
    .voerp-consignment-title,
    .voerp-consignment-product strong,
    .voerp-consignment-numbers strong,
    .voerp-operation-summary-heading > div:first-child,
    .voerp-operation-summary-copy strong,
    .voerp-operation-summary-net strong,
    .voerp-readiness-title,
    .voerp-readiness-item strong,
    .voerp-stock-availability-values strong
) {
    color: var(--content-primary);
}

html[data-theme="dark"] :is(
    .voerp-stock-stat-label,
    .voerp-live-summary-grid span,
    .voerp-consignment-product-code,
    .voerp-consignment-numbers span,
    .voerp-operation-summary-product,
    .voerp-operation-summary-copy > span,
    .voerp-operation-summary-net span,
    .voerp-readiness-item span,
    .voerp-readiness-item small
) {
    color: var(--content-muted);
}

html[data-theme="dark"] .voerp-consignment-numbers > div {
    background: var(--surface-raised);
}

html[data-theme="dark"] :is(
    .voerp-live-summary-total,
    .voerp-consignment-numbers .after,
    .voerp-operation-chip.exchange,
    .voerp-operation-summary-icon,
    .voerp-stock-condition.empty,
    .voerp-stock-hint.tracked
) {
    color: var(--feedback-info-fg);
    background: var(--feedback-info-bg) !important;
    border-color: var(--feedback-info-border);
}

html[data-theme="dark"] :is(
    .voerp-stock-condition.full,
    .voerp-operation-chip.decrease,
    .voerp-operation-summary-card.decrease .voerp-operation-summary-icon,
    .voerp-consignment-row.decrease .voerp-consignment-state,
    .voerp-readiness-overall.success,
    .voerp-readiness-item.success .voerp-readiness-item-icon,
    .voerp-stock-availability.sufficient .voerp-stock-availability-status
) {
    color: var(--feedback-success-fg);
    background: var(--feedback-success-bg);
    border-color: var(--feedback-success-border);
}

html[data-theme="dark"] :is(
    .voerp-operation-chip.increase,
    .voerp-operation-summary-card.increase .voerp-operation-summary-icon,
    .voerp-consignment-row.increase .voerp-consignment-state,
    .voerp-readiness-overall.warning,
    .voerp-readiness-item.warning .voerp-readiness-item-icon,
    .voerp-stock-availability.warning .voerp-stock-availability-status
) {
    color: var(--feedback-warning-fg);
    background: var(--feedback-warning-bg);
    border-color: var(--feedback-warning-border);
}

html[data-theme="dark"] :is(
    .voerp-operation-chip.danger,
    .voerp-operation-summary-card.danger .voerp-operation-summary-icon,
    .voerp-readiness-overall.danger,
    .voerp-readiness-item.danger .voerp-readiness-item-icon,
    .voerp-stock-availability.insufficient .voerp-stock-availability-status
) {
    color: var(--feedback-danger-fg);
    background: var(--feedback-danger-bg);
    border-color: var(--feedback-danger-border);
}

html[data-theme="dark"] :is(
    .trade-line-row.voerp-condition-full,
    .trade-line-row.voerp-condition-empty,
    .voerp-line-deleted
) {
    color: var(--content-primary);
    background: var(--surface-subtle) !important;
}

html[data-theme="dark"] :is(
    .voerp-stock-availability.loading,
    .voerp-stock-availability.neutral,
    .voerp-stock-availability-values > span,
    .voerp-stock-availability.neutral .voerp-stock-message,
    .voerp-stock-availability.loading .voerp-stock-message,
    .voerp-stock-hint.service
) {
    color: var(--feedback-neutral-fg);
    background: var(--feedback-neutral-bg);
    border-color: var(--feedback-neutral-border);
}

html[data-theme="dark"] .voerp-stock-availability.warning .voerp-stock-message {
    color: var(--feedback-warning-fg);
    background: var(--feedback-warning-bg);
    border-color: var(--feedback-warning-border);
}

html[data-theme="dark"] :is(
    .voerp-line-result strong,
    .voerp-stock-availability-values strong
) {
    color: var(--content-primary);
}

html[data-theme="dark"] :is(
    .voerp-consignment-state,
    .voerp-readiness-overall.neutral,
    .voerp-readiness-item-icon,
    .voerp-stock-availability.neutral .voerp-stock-availability-status
) {
    color: var(--feedback-neutral-fg);
    background: var(--feedback-neutral-bg);
    border-color: var(--feedback-neutral-border);
}

html[data-theme="dark"] .list-group-item {
    color: var(--content-primary);
    background: var(--surface-base);
    border-color: var(--border-subtle);
}

html[data-theme="dark"] .list-group-item-action:hover,
html[data-theme="dark"] .list-group-item-action:focus {
    color: var(--content-primary);
    background: var(--surface-hover);
}

/* ============================================================
   CANONICAL DASHBOARD DARK MODE
   ============================================================ */

html[data-theme="dark"] .voerp-quick-action {
    color: var(--content-primary);
    background: var(--surface-base);
    border-color: var(--border-subtle);
}

html[data-theme="dark"] .voerp-quick-action:hover {
    color: var(--content-primary);
    background: var(--surface-hover);
    border-color: var(--border-strong);
}

html[data-theme="dark"] .voerp-quick-action-title {
    color: var(--content-primary);
}

html[data-theme="dark"] .voerp-quick-action-description {
    color: var(--content-muted);
}

html[data-theme="dark"] main
> .d-flex.flex-wrap.justify-content-between.align-items-center.gap-2.mb-4
+ .row.g-3.mb-4 .card.card-body {
    color: var(--content-primary);
    background: var(--surface-base);
    border-color: var(--border-subtle);
}

html[data-theme="dark"] main
> .d-flex.flex-wrap.justify-content-between.align-items-center.gap-2.mb-4
+ .row.g-3.mb-4 .card.card-body :is(.fw-semibold, strong) {
    color: var(--content-primary);
}

html[data-theme] :is(.voerp-kpi-value, .voerp-mini-value) {
    color: var(--content-primary);
}

html[data-theme] :is(
    .voerp-kpi-label,
    .voerp-kpi-subtitle,
    .voerp-kpi-unit,
    .voerp-mini-label
) {
    color: var(--content-muted);
}

html[data-theme="dark"] .voerp-dashboard-hero {
    color: var(--content-primary);
    background: var(--surface-raised);
    border-color: var(--border-default);
    box-shadow: var(--shadow-raised);
}

html[data-theme="dark"] :is(
    .voerp-dashboard-title,
    .voerp-dashboard-company .fw-semibold
) {
    color: var(--content-primary);
}

html[data-theme="dark"] .voerp-dashboard-lead {
    color: var(--content-secondary);
}

html[data-theme="dark"] .voerp-eyebrow {
    color: var(--content-link);
}

html[data-theme="dark"] .voerp-dashboard-company {
    color: var(--content-primary);
    background: var(--surface-base);
    border-color: var(--border-default);
}

html[data-theme="dark"] :is(.voerp-kpi-card, .voerp-mini-stat) {
    background: var(--surface-base);
    border-color: var(--border-subtle);
}

html[data-theme="dark"] .voerp-kpi-card:hover {
    border-color: var(--border-strong);
}

html[data-theme="dark"] :is(
    .voerp-kpi-icon,
    .voerp-dashboard-company-icon,
    .voerp-mini-icon.balance
) {
    color: var(--feedback-info-fg);
    background: var(--feedback-info-bg);
    border: 1px solid var(--feedback-info-border);
}

html[data-theme="dark"] :is(
    .voerp-kpi-icon.success,
    .voerp-mini-icon.credit
) {
    color: var(--feedback-success-fg);
    background: var(--feedback-success-bg);
    border-color: var(--feedback-success-border);
}

html[data-theme="dark"] :is(
    .voerp-kpi-icon.warning,
    .voerp-mini-icon.debit
) {
    color: var(--feedback-warning-fg);
    background: var(--feedback-warning-bg);
    border-color: var(--feedback-warning-border);
}

html[data-theme="dark"] .voerp-kpi-icon.danger {
    color: var(--feedback-danger-fg);
    background: var(--feedback-danger-bg);
    border-color: var(--feedback-danger-border);
}

html[data-theme="dark"] :is(
    .voerp-kpi-icon.teal,
    .voerp-mini-icon.document
) {
    color: var(--feedback-neutral-fg);
    background: var(--feedback-neutral-bg);
    border-color: var(--feedback-neutral-border);
}