/* Dark appearance layer for administration, staff, and authentication layouts.
   Customer layouts always apply data-theme="light". */

:root[data-theme="dark"] {
    color-scheme: dark;

    --zj-error: #ffb4ab;
    --zj-error-container: #5f151b;
    --zj-on-error: #690005;
    --zj-on-error-container: #ffdada;
    --zj-success: #5ee0b5;
    --zj-success-container: rgba(52, 211, 153, 0.16);
    --zj-warning: #f7c56b;
    --zj-warning-container: rgba(245, 158, 11, 0.17);
    --zj-info: #93c5fd;
    --zj-info-container: rgba(59, 130, 246, 0.18);

    --zj-surface: #0b1220;
    --zj-surface-dim: #070c16;
    --zj-surface-bright: #263247;
    --zj-surface-variant: #202b3d;
    --zj-surface-container-lowest: #101827;
    --zj-surface-container-low: #131d2e;
    --zj-surface-container: #182337;
    --zj-surface-container-high: #202d42;
    --zj-surface-container-highest: #29374d;
    --zj-on-surface-rgb: 235, 242, 252;
    --zj-on-surface: #ebf2fc;
    --zj-on-surface-variant: #b8c5d8;
    --zj-on-background: #ebf2fc;
    --zj-background: #080f1c;
    --zj-outline-rgb: 126, 144, 169;
    --zj-outline: #7e90a9;
    --zj-outline-variant: #2b3a50;
    --zj-inverse-surface: #e6edf7;
    --zj-inverse-on-surface: #172033;

    --zj-field-surface:
        linear-gradient(180deg, rgba(28, 41, 62, 0.98), rgba(17, 27, 43, 0.96));
    --zj-field-surface-focus:
        linear-gradient(180deg, rgba(38, 53, 78, 0.99), rgba(22, 34, 53, 0.98));
    --zj-field-menu-surface: rgba(16, 24, 39, 0.98);
    --zj-field-border: rgba(148, 163, 184, 0.38);
    --zj-field-border-hover: rgba(148, 163, 184, 0.62);
    --zj-field-border-focus: var(--zj-primary);
    --zj-field-focus-ring: 0 0 0 3.5px rgba(var(--zj-primary-rgb), 0.25);
    --zj-field-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.045),
        0 10px 24px rgba(0, 0, 0, 0.2);

    /* Semantic field tokens with WCAG AA >= 4.5:1 contrast guarantee */
    --zj-input-placeholder: #9ca3af;
    --zj-input-placeholder-muted: #a1a1aa;
    --zj-field-placeholder: var(--zj-input-placeholder);
    --zj-field-surface-disabled: rgba(255, 255, 255, 0.04);
    --zj-field-border-disabled: rgba(148, 163, 184, 0.2);
    --zj-on-field-disabled: rgba(148, 163, 184, 0.6);

    --zj-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.28);
    --zj-shadow-md: 0 6px 18px rgba(0, 0, 0, 0.3);
    --zj-shadow-lg: 0 12px 34px rgba(0, 0, 0, 0.34);
    --zj-shadow-xl: 0 20px 52px rgba(0, 0, 0, 0.4);
    --zj-shadow-2xl: 0 34px 72px -12px rgba(0, 0, 0, 0.55);
    --zj-glass-bg: rgba(16, 24, 39, 0.72);
    --zj-glass-bg-strong: rgba(18, 28, 45, 0.9);
    --zj-glass-border: 1px solid rgba(148, 163, 184, 0.18);
    --zj-glass-border-light: 1px solid rgba(203, 213, 225, 0.14);
    --zj-ghost-border: 1px solid rgba(148, 163, 184, 0.2);

    --color-bg: var(--zj-background);
    --color-surface: var(--zj-surface-container-lowest);
    --color-surface-low: var(--zj-surface-container-low);
    --color-surface-high: var(--zj-surface-container-high);
    --color-surface-highest: var(--zj-surface-container-highest);
    --color-text: var(--zj-on-surface);
    --color-text-muted: var(--zj-on-surface-variant);
    --color-outline: var(--zj-outline);
    --color-border: var(--zj-outline-variant);
    --color-error-ink: #ffb4ab;
    --surface-card: var(--zj-surface-container-lowest);
    --text-muted: var(--zj-on-surface-variant);
    --surface-panel: linear-gradient(180deg, rgba(24, 35, 55, 0.98), rgba(13, 21, 35, 0.96));
    --surface-elevated: rgba(22, 33, 51, 0.96);
    --surface-accent-soft: rgba(var(--zj-primary-rgb), 0.15);
    --surface-accent-soft-strong: rgba(var(--zj-primary-rgb), 0.22);
    --surface-accent-soft-muted: rgba(var(--zj-primary-rgb), 0.09);
    --surface-success-soft: rgba(52, 211, 153, 0.16);
    --surface-warning-soft: rgba(245, 158, 11, 0.17);
    --surface-error-soft: rgba(248, 113, 113, 0.16);
    --surface-neutral-soft: rgba(148, 163, 184, 0.14);
    --surface-warm: rgba(var(--zj-tertiary-rgb), 0.13);
    --panel-border: 1px solid rgba(148, 163, 184, 0.18);
    --ambient-shadow: var(--zj-shadow-lg);
    --ambient-shadow-soft: var(--zj-shadow-md);
    --console-surface: #060b14;
    --console-text: #dce8fa;
    --console-muted: #9eb0c9;
    --ghost-border-color: rgba(148, 163, 184, 0.22);
    --surface-color: var(--zj-surface);
    --surface-bg: var(--zj-surface);
    --border-color: var(--zj-outline-variant);
    --text-primary: var(--zj-on-surface);
    --text-secondary: var(--zj-on-surface-variant);
    --success-color: var(--zj-success);
}

:root[data-theme="dark"]:not([data-color-theme]),
:root[data-theme="dark"][data-color-theme="aura-light"] {
    --zj-primary-rgb: 56, 189, 248;
    --zj-secondary-rgb: 129, 140, 248;
    --zj-tertiary-rgb: 251, 191, 36;
    --zj-primary: #38bdf8;
    --zj-primary-container: #075985;
    --zj-on-primary: #082f49;
    --zj-on-primary-container: #d8f3ff;
    --zj-primary-fixed: #14334a;
    --zj-primary-fixed-dim: #1d668c;
    --zj-secondary: #a5b4fc;
    --zj-secondary-container: #27346f;
    --zj-on-secondary: #172554;
    --zj-on-secondary-container: #e0e7ff;
    --zj-secondary-fixed: #27346f;
    --zj-secondary-fixed-dim: #3d4f91;
    --zj-tertiary: #fbbf24;
    --zj-tertiary-container: #633d0c;
    --zj-on-tertiary: #451a03;
    --zj-on-tertiary-container: #fff0c4;
    --brand-gradient: linear-gradient(180deg, #7dd3fc, #0ea5e9);
    --brand-gradient-strong: linear-gradient(180deg, #bae6fd, #38bdf8);
    --brand-gradient-ink: #082f49;
}

:root[data-theme="dark"][data-color-theme="admin-gold-light"] {
    --zj-primary-rgb: 226, 188, 112;
    --zj-secondary-rgb: 201, 208, 218;
    --zj-tertiary-rgb: 165, 180, 252;
    --zj-primary: #e2bc70;
    --zj-primary-container: #5f481e;
    --zj-on-primary: #2f220a;
    --zj-on-primary-container: #ffedc5;
    --zj-primary-fixed: #3a2d17;
    --zj-primary-fixed-dim: #725727;
    --zj-secondary: #d5dae2;
    --zj-secondary-container: #34383e;
    --zj-on-secondary: #202226;
    --zj-on-secondary-container: #f0f2f6;
    --zj-secondary-fixed: #34383e;
    --zj-secondary-fixed-dim: #555c65;
    --zj-tertiary: #b9c6f0;
    --zj-tertiary-container: #384469;
    --zj-on-tertiary: #202943;
    --zj-on-tertiary-container: #e7ecff;
    --brand-gradient: linear-gradient(180deg, #efd395, #c99c4d);
    --brand-gradient-strong: linear-gradient(180deg, #ffe7b1, #e2bc70);
    --brand-gradient-ink: #261a06;
}

:root[data-theme="dark"][data-color-theme="customer-sunset-light"] {
    --zj-primary-rgb: 255, 148, 89;
    --zj-secondary-rgb: 225, 179, 143;
    --zj-tertiary-rgb: 250, 194, 139;
    --zj-primary: #ff9459;
    --zj-primary-container: #7d310b;
    --zj-on-primary: #4b1900;
    --zj-on-primary-container: #ffe1cf;
    --zj-primary-fixed: #472718;
    --zj-primary-fixed-dim: #874622;
    --zj-secondary: #dfb38f;
    --zj-secondary-container: #51351f;
    --zj-on-secondary: #3a210e;
    --zj-on-secondary-container: #fae3d1;
    --zj-secondary-fixed: #483224;
    --zj-secondary-fixed-dim: #70513b;
    --zj-tertiary: #f4c28e;
    --zj-tertiary-container: #65411f;
    --zj-on-tertiary: #412308;
    --zj-on-tertiary-container: #ffe6ca;
    --brand-gradient: linear-gradient(180deg, #ffad7d, #ff6f18);
    --brand-gradient-strong: linear-gradient(180deg, #ffd0ae, #ff9459);
    --brand-gradient-ink: #431600;
}

:root[data-theme="dark"][data-color-theme="violet-light"] {
    --zj-primary-rgb: 167, 139, 250;
    --zj-secondary-rgb: 165, 180, 252;
    --zj-tertiary-rgb: 45, 212, 191;
    --zj-primary: #a78bfa;
    --zj-primary-container: #4c1d95;
    --zj-on-primary: #2e1065;
    --zj-on-primary-container: #ede9fe;
    --zj-primary-fixed: #302150;
    --zj-primary-fixed-dim: #5b3f91;
    --zj-secondary: #a5b4fc;
    --zj-secondary-container: #312e81;
    --zj-on-secondary: #1e1b4b;
    --zj-on-secondary-container: #e0e7ff;
    --zj-secondary-fixed: #2b2a60;
    --zj-secondary-fixed-dim: #4c4a91;
    --zj-tertiary: #5eead4;
    --zj-tertiary-container: #134e4a;
    --zj-on-tertiary: #042f2e;
    --zj-on-tertiary-container: #ccfbf1;
    --brand-gradient: linear-gradient(180deg, #c4b5fd, #8b5cf6);
    --brand-gradient-strong: linear-gradient(180deg, #ddd6fe, #a78bfa);
    --brand-gradient-ink: #25104f;
}

:root[data-theme="dark"][data-color-theme="emerald-light"] {
    --zj-primary-rgb: 52, 211, 153;
    --zj-secondary-rgb: 110, 231, 183;
    --zj-tertiary-rgb: 103, 232, 249;
    --zj-primary: #34d399;
    --zj-primary-container: #065f46;
    --zj-on-primary: #022c22;
    --zj-on-primary-container: #d1fae5;
    --zj-primary-fixed: #143c31;
    --zj-primary-fixed-dim: #1b6b52;
    --zj-secondary: #6ee7b7;
    --zj-secondary-container: #14532d;
    --zj-on-secondary: #052e16;
    --zj-on-secondary-container: #dcfce7;
    --zj-secondary-fixed: #173e29;
    --zj-secondary-fixed-dim: #286b46;
    --zj-tertiary: #67e8f9;
    --zj-tertiary-container: #155e75;
    --zj-on-tertiary: #083344;
    --zj-on-tertiary-container: #cffafe;
    --brand-gradient: linear-gradient(180deg, #6ee7b7, #10b981);
    --brand-gradient-strong: linear-gradient(180deg, #a7f3d0, #34d399);
    --brand-gradient-ink: #022c22;
}

:root[data-theme="dark"][data-color-theme="rose-light"] {
    --zj-primary-rgb: 251, 113, 133;
    --zj-secondary-rgb: 244, 114, 182;
    --zj-tertiary-rgb: 196, 181, 253;
    --zj-primary: #fb7185;
    --zj-primary-container: #881337;
    --zj-on-primary: #4c0519;
    --zj-on-primary-container: #ffe4e6;
    --zj-primary-fixed: #4a1e2b;
    --zj-primary-fixed-dim: #812f49;
    --zj-secondary: #f472b6;
    --zj-secondary-container: #831843;
    --zj-on-secondary: #500724;
    --zj-on-secondary-container: #fce7f3;
    --zj-secondary-fixed: #4c2037;
    --zj-secondary-fixed-dim: #80335d;
    --zj-tertiary: #c4b5fd;
    --zj-tertiary-container: #4c1d95;
    --zj-on-tertiary: #2e1065;
    --zj-on-tertiary-container: #ede9fe;
    --brand-gradient: linear-gradient(180deg, #fda4af, #f43f5e);
    --brand-gradient-strong: linear-gradient(180deg, #fecdd3, #fb7185);
    --brand-gradient-ink: #4c0519;
}

/* Shell, navigation and floating surfaces */
:root[data-theme="dark"] body,
:root[data-theme="dark"] .app-shell,
:root[data-theme="dark"] .app-content {
    background-color: var(--zj-background);
}

:root[data-theme="dark"] .app-shell {
    background-image:
        radial-gradient(circle at 82% 0%, rgba(var(--zj-primary-rgb), 0.09), transparent 30rem),
        radial-gradient(circle at 6% 92%, rgba(var(--zj-tertiary-rgb), 0.055), transparent 28rem);
}

:root[data-theme="dark"] .app-sidebar {
    background: rgba(10, 17, 30, 0.9);
    border-inline-end-color: rgba(148, 163, 184, 0.14);
    box-shadow: 0.8rem 0 2rem rgba(0, 0, 0, 0.24);
}

:root[data-theme="dark"] .app-sidebar__link:hover {
    background: rgba(148, 163, 184, 0.09);
}

:root[data-theme="dark"] .app-sidebar__collapse-toggle {
    background: rgba(148, 163, 184, 0.09);
    border-color: rgba(148, 163, 184, 0.22);
    color: var(--zj-on-surface-variant);
}

:root[data-theme="dark"] .app-sidebar__collapse-toggle:hover {
    background: rgba(var(--zj-primary-rgb), 0.15);
    border-color: rgba(var(--zj-primary-rgb), 0.35);
    color: var(--zj-primary);
}

:root[data-theme="dark"] .app-sidebar__footer {
    border-top-color: rgba(148, 163, 184, 0.14);
}

:root[data-theme="dark"] .app-sidebar__link.active {
    background: rgba(var(--zj-primary-rgb), 0.15);
}

:root[data-theme="dark"] .app-topbar {
    background: rgba(10, 17, 30, 0.82);
    border-bottom-color: rgba(148, 163, 184, 0.14);
    box-shadow: 0 0.65rem 2rem rgba(0, 0, 0, 0.2);
}

:root[data-theme="dark"] .topbar-icon-btn,
:root[data-theme="dark"] .topbar-language__trigger,
:root[data-theme="dark"] .app-topbar__user-trigger {
    background: linear-gradient(180deg, rgba(31, 44, 65, 0.94), rgba(18, 28, 44, 0.9));
    border-color: rgba(148, 163, 184, 0.16);
    box-shadow: 0 0.5rem 1.4rem rgba(0, 0, 0, 0.2);
}

:root[data-theme="dark"] .topbar-icon-btn:hover,
:root[data-theme="dark"] .topbar-icon-btn.is-active,
:root[data-theme="dark"] .app-topbar__user-trigger:hover,
:root[data-theme="dark"] .app-topbar__user-trigger.is-active,
:root[data-theme="dark"] .topbar-search.is-open .form-input {
    background: linear-gradient(180deg, rgba(41, 55, 79, 0.98), rgba(23, 34, 53, 0.96));
}

:root[data-theme="dark"] .topbar-popover {
    background:
        radial-gradient(circle at top right, rgba(var(--zj-primary-rgb), 0.14), transparent 44%),
        linear-gradient(180deg, rgba(25, 37, 58, 0.99), rgba(12, 20, 34, 0.98));
    border-color: rgba(148, 163, 184, 0.2);
    box-shadow: 0 1.4rem 3rem rgba(0, 0, 0, 0.48);
}

:root[data-theme="dark"] .topbar-icon-btn__dot,
:root[data-theme="dark"] .topbar-icon-btn__badge {
    box-shadow: 0 0 0 3px var(--zj-surface-container-low);
    border-color: var(--zj-surface-container-low);
}

/* Shared controls, tables, cards and overlays */
:root[data-theme="dark"] .glass-card {
    background: var(--zj-glass-bg);
}

:root[data-theme="dark"] .zj-autocomplete__menu,
:root[data-theme="dark"] .dropdown-menu,
:root[data-theme="dark"] .modal-content,
:root[data-theme="dark"] .modal-dialog,
:root[data-theme="dark"] .modal-dialog-custom,
:root[data-theme="dark"] .wizard-modal-dialog,
:root[data-theme="dark"] .clear-cart-dialog,
:root[data-theme="dark"] .customer-new-popover,
:root[data-theme="dark"] .stock-preview-dialog,
:root[data-theme="dark"] .cashier-payment-dialog,
:root[data-theme="dark"] .split-dialog,
:root[data-theme="dark"] .cashier-customizer__dialog,
:root[data-theme="dark"] .kebab-dropdown,
:root[data-theme="dark"] .dialog-surface,
:root[data-theme="dark"] .popover,
:root[data-theme="dark"] .dropdown-content {
    background: var(--zj-surface-container-lowest) !important;
    color: var(--zj-on-surface) !important;
    border-color: var(--zj-outline-variant) !important;
}

:root[data-theme="dark"] .modal-dialog h1,
:root[data-theme="dark"] .modal-dialog h2,
:root[data-theme="dark"] .modal-dialog h3,
:root[data-theme="dark"] .modal-dialog h4,
:root[data-theme="dark"] .modal-dialog-custom h1,
:root[data-theme="dark"] .modal-dialog-custom h2,
:root[data-theme="dark"] .modal-dialog-custom h3,
:root[data-theme="dark"] .modal-dialog-custom h4,
:root[data-theme="dark"] .wizard-modal-dialog h1,
:root[data-theme="dark"] .wizard-modal-dialog h2,
:root[data-theme="dark"] .wizard-modal-dialog h3,
:root[data-theme="dark"] .wizard-modal-dialog h4,
:root[data-theme="dark"] .clear-cart-dialog h2,
:root[data-theme="dark"] .customer-new-popover h4,
:root[data-theme="dark"] .stock-preview-dialog h3,
:root[data-theme="dark"] .cashier-payment-dialog h2,
:root[data-theme="dark"] .split-dialog h2,
:root[data-theme="dark"] .cashier-customizer__dialog h2,
:root[data-theme="dark"] .cashier-customizer__dialog h3 {
    color: var(--zj-on-surface) !important;
}

:root[data-theme="dark"] .modal-dialog p,
:root[data-theme="dark"] .modal-dialog-custom p,
:root[data-theme="dark"] .wizard-modal-dialog p,
:root[data-theme="dark"] .clear-cart-dialog p,
:root[data-theme="dark"] .stock-preview-dialog p,
:root[data-theme="dark"] .cashier-payment-dialog p,
:root[data-theme="dark"] .split-dialog p,
:root[data-theme="dark"] .cashier-customizer__dialog p {
    color: var(--zj-on-surface-variant);
}

:root[data-theme="dark"] .customer-new-popover,
:root[data-theme="dark"] .kebab-dropdown {
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55) !important;
}

:root[data-theme="dark"] .data-table tbody tr:hover {
    background: rgba(var(--zj-primary-rgb), 0.08);
}

:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] .form-input,
:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .form-select {
    color-scheme: dark;
}

:root[data-theme="dark"] .form-input,
:root[data-theme="dark"] .form-select,
:root[data-theme="dark"] .form-textarea,
:root[data-theme="dark"] .form-control {
    background: var(--zj-field-surface);
    border: 1.5px solid var(--zj-field-border);
    border-color: var(--zj-field-border);
    color: var(--zj-on-surface);
    box-shadow: var(--zj-field-shadow);
}

:root[data-theme="dark"] .form-input:hover,
:root[data-theme="dark"] .form-select:hover,
:root[data-theme="dark"] .form-textarea:hover,
:root[data-theme="dark"] .form-control:hover {
    border-color: var(--zj-field-border-hover);
}

:root[data-theme="dark"] .form-input:focus,
:root[data-theme="dark"] .form-select:focus,
:root[data-theme="dark"] .form-textarea:focus,
:root[data-theme="dark"] .form-control:focus {
    background: var(--zj-field-surface-focus);
    border-color: var(--zj-field-border-focus);
    box-shadow: var(--zj-field-focus-ring);
}

:root[data-theme="dark"] .form-select-shell__menu {
    background: var(--zj-field-menu-surface);
    border: 1.5px solid var(--zj-field-border);
    border-color: var(--zj-field-border);
}

:root[data-theme="dark"] .zj-autocomplete__control {
    background: var(--zj-field-surface);
    border: 1.5px solid var(--zj-field-border);
    border-color: var(--zj-field-border);
    color: var(--zj-on-surface);
}

:root[data-theme="dark"] .zj-autocomplete__control:hover {
    border-color: var(--zj-field-border-hover);
}

:root[data-theme="dark"] .zj-autocomplete.is-open .zj-autocomplete__control,
:root[data-theme="dark"] .zj-autocomplete__control:focus-within {
    border-color: var(--zj-field-border-focus);
    box-shadow: var(--zj-field-focus-ring);
    background: var(--zj-field-surface-focus);
}

:root[data-theme="dark"] .zj-autocomplete__menu {
    background: var(--zj-field-menu-surface);
    border: 1.5px solid var(--zj-field-border);
    border-color: var(--zj-field-border);
}

:root[data-theme="dark"] .form-input::placeholder,
:root[data-theme="dark"] .form-textarea::placeholder,
:root[data-theme="dark"] .form-control::placeholder,
:root[data-theme="dark"] .zj-autocomplete__input::placeholder,
[data-theme="dark"] .form-input::placeholder,
[data-theme="dark"] .form-textarea::placeholder,
[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] .zj-autocomplete__input::placeholder,
.theme-dark .form-input::placeholder,
.theme-dark .form-textarea::placeholder,
.theme-dark .form-control::placeholder,
.theme-dark .zj-autocomplete__input::placeholder {
    color: var(--zj-field-placeholder, rgba(184, 197, 216, 0.65));
    opacity: 1;
}

:root[data-theme="dark"] .form-control--filled,
:root[data-theme="dark"] .form-input--filled {
    background: rgba(255, 248, 244, 0.05);
    border: 1.5px solid rgba(219, 193, 181, 0.28);
    color: var(--zj-on-surface);
}

:root[data-theme="dark"] .zj-autocomplete__input {
    color: var(--zj-on-surface);
}

:root[data-theme="dark"] .zj-autocomplete__trigger .material-symbols-outlined {
    color: var(--zj-on-surface-variant);
}

:root[data-theme="dark"] .zj-autocomplete__chip {
    background: var(--zj-surface-container-high);
    color: var(--zj-on-surface);
    border: 1px solid var(--zj-outline-variant);
}

:root[data-theme="dark"] .search-bar .form-input,
:root[data-theme="dark"] .table-filters__search-shell .form-input,
:root[data-theme="dark"] .table-filters__search-input,
:root[data-theme="dark"] .topbar-search .form-input,
:root[data-theme="dark"] input[type="search"].form-input,
:root[data-theme="dark"] input[type="search"].form-control {
    background: var(--zj-field-surface);
    border: 1.5px solid var(--zj-field-border);
}

:root[data-theme="dark"] .search-bar .form-input:focus,
:root[data-theme="dark"] .table-filters__search-shell .form-input:focus,
:root[data-theme="dark"] .table-filters__search-input:focus,
:root[data-theme="dark"] .topbar-search .form-input:focus,
:root[data-theme="dark"] input[type="search"].form-input:focus,
:root[data-theme="dark"] input[type="search"].form-control:focus {
    background: var(--zj-field-surface-focus);
    border-color: var(--zj-field-border-focus);
    box-shadow: var(--zj-field-focus-ring);
}

:root[data-theme="dark"] .form-input:-webkit-autofill,
:root[data-theme="dark"] .form-control:-webkit-autofill {
    -webkit-text-fill-color: var(--zj-on-surface);
    caret-color: var(--zj-on-surface);
    box-shadow:
        inset 0 0 0 1000px var(--zj-surface-container) !important,
        var(--zj-field-shadow);
}

:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder,
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder,
.theme-dark input::placeholder,
.theme-dark textarea::placeholder {
    color: var(--zj-field-placeholder);
    opacity: 1;
}

:root[data-theme="dark"] .form-input:disabled,
:root[data-theme="dark"] .form-textarea:disabled,
:root[data-theme="dark"] .form-select:disabled,
:root[data-theme="dark"] .form-control:disabled,
:root[data-theme="dark"] input:disabled,
:root[data-theme="dark"] textarea:disabled,
:root[data-theme="dark"] select:disabled,
[data-theme="dark"] input:disabled,
.theme-dark input:disabled {
    background: var(--zj-field-surface-disabled);
    border-color: var(--zj-field-border-disabled);
    color: var(--zj-on-field-disabled);
    cursor: not-allowed;
    opacity: 0.75;
}

:root[data-theme="dark"] .form-input.is-invalid,
:root[data-theme="dark"] .form-textarea.is-invalid,
:root[data-theme="dark"] .form-control.is-invalid,
:root[data-theme="dark"] .form-input[aria-invalid="true"],
:root[data-theme="dark"] .form-textarea[aria-invalid="true"],
:root[data-theme="dark"] .form-control[aria-invalid="true"],
[data-theme="dark"] .form-input.is-invalid,
.theme-dark .form-input.is-invalid {
    border-color: var(--zj-error);
    box-shadow: 0 0 0 3px rgba(255, 180, 171, 0.2);
}

:root[data-theme="dark"] .mobile-bottom-nav {
    background: rgba(12, 20, 34, 0.94);
    border-top-color: rgba(148, 163, 184, 0.18);
}

:root[data-theme="dark"] .profile-screen__mobile-nav .bottom-nav {
    background: var(--zj-surface);
    border-top-color: var(--zj-outline-variant);
}

/* Status cards retain their meaning without glowing light backgrounds. */
:root[data-theme="dark"] .subscription-notice--warning {
    background: color-mix(in srgb, var(--zj-warning) 13%, var(--zj-surface-container-low));
    border-color: color-mix(in srgb, var(--zj-warning) 45%, var(--zj-outline-variant));
    color: #fbd38d;
}

:root[data-theme="dark"] .subscription-notice--expired {
    background: color-mix(in srgb, var(--zj-error) 12%, var(--zj-surface-container-low));
    border-color: color-mix(in srgb, var(--zj-error) 42%, var(--zj-outline-variant));
    color: #ffc1bb;
}

:root[data-theme="dark"] .kitchen-order-shell--new .kitchen-card {
    background: linear-gradient(180deg, rgba(var(--zj-primary-rgb), 0.14), var(--zj-surface-container-lowest));
}

:root[data-theme="dark"] .state-pill[class*="present"] {
    background: rgba(52, 211, 153, 0.17);
    color: #6ee7b7;
}

:root[data-theme="dark"] .state-pill[class*="late"] {
    background: rgba(245, 158, 11, 0.18);
    color: #f7c56b;
}

:root[data-theme="dark"] .state-pill[class*="absent"] {
    background: rgba(248, 113, 113, 0.17);
    color: #fca5a5;
}

:root[data-theme="dark"] .state-pill[class*="leave"] {
    background: rgba(96, 165, 250, 0.17);
    color: #93c5fd;
}

:root[data-theme="dark"] .state-pill[class*="missing"],
:root[data-theme="dark"] .overnight-badge {
    background: rgba(167, 139, 250, 0.17);
    color: #c4b5fd;
}

/* Feature surfaces that intentionally used fixed pale backgrounds. */
:root[data-theme="dark"] .top-selling-dishes {
    background:
        radial-gradient(circle at 8% 10%, rgba(var(--zj-primary-rgb), 0.16), transparent 30%),
        linear-gradient(180deg, var(--zj-surface-container-low), var(--zj-surface-container-lowest));
}

:root[data-theme="dark"] .top-selling-dish,
:root[data-theme="dark"] .top-selling-dish--leader {
    background:
        radial-gradient(circle at 10% 0%, rgba(var(--zj-primary-rgb), 0.12), transparent 36%),
        var(--zj-surface-container);
}

:root[data-theme="dark"] .admin-offers__templates,
:root[data-theme="dark"] .admin-offers__template-grid > button,
:root[data-theme="dark"] .admin-offers__target-card,
:root[data-theme="dark"] .admin-offers__preview > div {
    background: var(--zj-surface-container-lowest);
    border-color: var(--zj-outline-variant);
}

:root[data-theme="dark"] .admin-offers__pricing-editor {
    background: color-mix(in srgb, var(--zj-primary) 8%, var(--zj-surface-container-low));
}

:root[data-theme="dark"] .admin-offers__preview .is-danger {
    color: #fca5a5;
    background: rgba(248, 113, 113, 0.14);
}

:root[data-theme="dark"] .admin-offers__preview .is-success {
    color: #6ee7b7;
    background: rgba(52, 211, 153, 0.14);
}

:root[data-theme="dark"] .admin-offers__preview-warning {
    color: #fbd38d;
    background: rgba(245, 158, 11, 0.14);
}

:root[data-theme="dark"] .subscription-admin__modules {
    background: linear-gradient(145deg, rgba(var(--zj-primary-rgb), 0.1), var(--zj-surface-container-low));
    border-color: rgba(var(--zj-primary-rgb), 0.24);
}

:root[data-theme="dark"] .subscription-admin label.subscription-admin__module-option,
:root[data-theme="dark"] .subscription-admin__card {
    background: var(--zj-surface-container-lowest);
    border-color: var(--zj-outline-variant);
}

:root[data-theme="dark"] .subscription-admin__plan-modules,
:root[data-theme="dark"] .subscription-admin__card {
    border-color: var(--zj-outline-variant);
}

:root[data-theme="dark"] .finance-analysis {
    --fa-ink: var(--zj-on-surface);
    --fa-paper: var(--zj-surface-container-lowest);
    --fa-mint: #5ee0b5;
    --fa-red: #fb7185;
    --fa-gold: #f7c56b;
}

:root[data-theme="dark"] .finance-analysis__filters .form-control,
:root[data-theme="dark"] .finance-analysis__filters .form-select {
    background: rgba(18, 28, 44, 0.95);
    color: var(--zj-on-surface);
}

:root[data-theme="dark"] .error-logs__hero,
:root[data-theme="dark"] .error-logs__filters,
:root[data-theme="dark"] .error-logs__table-shell,
:root[data-theme="dark"] .error-logs__distribution-card,
:root[data-theme="dark"] .error-logs__metric-card,
:root[data-theme="dark"] .health-diagnostics__hero,
:root[data-theme="dark"] .health-diagnostics__hardware-card,
:root[data-theme="dark"] .health-diagnostics__metric-card,
:root[data-theme="dark"] .health-diagnostics__protocol-card,
:root[data-theme="dark"] .profile-page__hero,
:root[data-theme="dark"] .profile-page__panel,
:root[data-theme="dark"] .profile-page__sessions-card {
    background: linear-gradient(180deg, var(--zj-surface-container-low), var(--zj-surface-container-lowest));
    border-color: var(--zj-outline-variant);
    box-shadow: var(--zj-shadow-md);
}

:root[data-theme="dark"] .error-logs__chips button,
:root[data-theme="dark"] .health-diagnostics__loading {
    background: var(--zj-surface-container-lowest);
    border-color: var(--zj-outline-variant);
    color: var(--zj-on-surface-variant);
}

:root[data-theme="dark"] .health-aura-service__icon,
:root[data-theme="dark"] .health-aura-service__metrics div,
:root[data-theme="dark"] .health-aura__stats span,
:root[data-theme="dark"] .health-aura__loading {
    background: rgba(20, 31, 49, 0.82);
    border-color: rgba(148, 163, 184, 0.16);
    box-shadow: var(--zj-shadow-sm);
}

:root[data-theme="dark"] .health-aura-log-table,
:root[data-theme="dark"] .health-aura__stats,
:root[data-theme="dark"] .health-aura-log-table__head,
:root[data-theme="dark"] .health-aura-log-table__footer {
    background: var(--zj-surface-container);
    border-color: var(--zj-outline-variant);
}

:root[data-theme="dark"] .health-aura-log-row {
    background: var(--zj-surface-container-lowest);
}

:root[data-theme="dark"] .health-aura-service__copy p,
:root[data-theme="dark"] .health-aura-service__metrics span,
:root[data-theme="dark"] .health-aura-log-table__head,
:root[data-theme="dark"] .health-aura-log-row span,
:root[data-theme="dark"] .health-aura-log-row time,
:root[data-theme="dark"] .health-aura__stats p {
    color: var(--zj-on-surface-variant);
}

:root[data-theme="dark"] .staff-heritage-orders,
:root[data-theme="dark"] .staff-heritage-summary,
:root[data-theme="dark"] .staff-heritage-alert {
    background: rgba(18, 28, 44, 0.82);
    border-color: rgba(148, 163, 184, 0.18);
}

/* ============================================================
   CASHIER SCREEN & POS SYSTEM (OrderAdd & Cashier Components)
   ============================================================ */
/* The approved cashier supplies its own scoped theme; retain these legacy rules for other layouts. */
:root[data-theme="dark"] .cashier-screen:not(:where(.cashier-reference-scope *)) {
    background: var(--zj-background) !important;
    color: var(--zj-on-surface);
}

:root[data-theme="dark"] .cashier-toolbar:not(:where(.cashier-reference-scope *)) {
    background: var(--zj-surface) !important;
    border-bottom: 1px solid var(--zj-outline-variant) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important;
}

:root[data-theme="dark"] .cashier-header__title:not(:where(.cashier-reference-scope *)) {
    color: var(--zj-on-surface) !important;
}

:root[data-theme="dark"] .cashier-header__sub:not(:where(.cashier-reference-scope *)) {
    color: var(--zj-on-surface-variant) !important;
}

:root[data-theme="dark"] .cashier-header__divider:not(:where(.cashier-reference-scope *)) {
    background: var(--zj-outline-variant) !important;
}

:root[data-theme="dark"] .cashier-header__shift-badge:not(:where(.cashier-reference-scope *)) {
    background: var(--zj-surface-container-low) !important;
    border-color: var(--zj-outline-variant) !important;
    color: var(--zj-on-surface) !important;
}

:root[data-theme="dark"] .cashier-header__order-type:not(:where(.cashier-reference-scope *)) {
    background: var(--zj-surface-container-low) !important;
    border-color: var(--zj-outline-variant) !important;
}

:root[data-theme="dark"] .order-type-btn:not(:where(.cashier-reference-scope *)) {
    color: var(--zj-on-surface-variant) !important;
}

:root[data-theme="dark"] .order-type-btn:hover:not(:disabled):not(:where(.cashier-reference-scope *)) {
    color: var(--zj-on-surface) !important;
}

:root[data-theme="dark"] .order-type-btn.is-active:not(:where(.cashier-reference-scope *)) {
    background: var(--zj-surface-container-high) !important;
    color: var(--zj-primary) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
}

:root[data-theme="dark"] .cashier-tool-btn:not(:where(.cashier-reference-scope *)) {
    background: var(--zj-surface-container-low) !important;
    border-color: var(--zj-outline-variant) !important;
    color: var(--zj-on-surface) !important;
}

:root[data-theme="dark"] .cashier-tool-btn:hover:not(:where(.cashier-reference-scope *)) {
    background: var(--zj-surface-container-high) !important;
    color: var(--zj-on-surface) !important;
    border-color: var(--zj-outline) !important;
}

:root[data-theme="dark"] .cashier-tool-btn.is-active:not(:where(.cashier-reference-scope *)) {
    background: var(--zj-primary) !important;
    color: var(--zj-on-primary) !important;
    border-color: var(--zj-primary) !important;
}

:root[data-theme="dark"] .cashier-icon-btn:not(:where(.cashier-reference-scope *)) {
    color: var(--zj-on-surface-variant) !important;
}

:root[data-theme="dark"] .cashier-icon-btn:hover:not(:where(.cashier-reference-scope *)) {
    background: var(--zj-surface-container-high) !important;
    color: var(--zj-on-surface) !important;
}

/* Workspace Canvas */
:root[data-theme="dark"] .cashier-workspace:not(:where(.cashier-reference-scope *)),
:root[data-theme="dark"] .cashier-center:not(:where(.cashier-reference-scope *)),
:root[data-theme="dark"] .cashier-catalog:not(:where(.cashier-reference-scope *)),
:root[data-theme="dark"] .cashier-menu:not(:where(.cashier-reference-scope *)) {
    background: var(--zj-background) !important;
}

/* Catalog Toolbar & Search */
:root[data-theme="dark"] .cashier-catalog-toolbar:not(:where(.cashier-reference-scope *)) {
    background: var(--zj-surface) !important;
    border-bottom: 1px solid var(--zj-outline-variant) !important;
}

:root[data-theme="dark"] .cashier-menu-search:not(:where(.cashier-reference-scope *)) {
    color: var(--zj-on-surface);
}

:root[data-theme="dark"] .cashier-menu-search .search-icon-box:not(:where(.cashier-reference-scope *)) {
    color: var(--zj-on-surface-variant);
}

:root[data-theme="dark"] .cashier-menu-search-input:not(:where(.cashier-reference-scope *)) {
    background: var(--zj-surface-container-low) !important;
    border: 1px solid var(--zj-outline-variant) !important;
    color: var(--zj-on-surface) !important;
}

:root[data-theme="dark"] .cashier-menu-search-input:not(:where(.cashier-reference-scope *))::placeholder,
[data-theme="dark"] .cashier-menu-search-input:not(:where(.cashier-reference-scope *))::placeholder,
.theme-dark .cashier-menu-search-input:not(:where(.cashier-reference-scope *))::placeholder {
    color: var(--zj-field-placeholder) !important;
    opacity: 1 !important;
}

:root[data-theme="dark"] .cashier-menu-search-input:focus:not(:where(.cashier-reference-scope *)) {
    background: var(--zj-surface-container) !important;
    border-color: var(--zj-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--zj-primary-rgb), 0.25) !important;
}

:root[data-theme="dark"] .search-barcode-btn:not(:where(.cashier-reference-scope *)) {
    background: var(--zj-surface-container-low) !important;
    border-color: var(--zj-outline-variant) !important;
    color: var(--zj-primary) !important;
}

:root[data-theme="dark"] .search-barcode-btn:hover:not(:where(.cashier-reference-scope *)) {
    background: var(--zj-surface-container-high) !important;
    border-color: var(--zj-primary) !important;
}

:root[data-theme="dark"] .catalog-action-btn:not(:where(.cashier-reference-scope *)) {
    background: var(--zj-surface-container-low) !important;
    border-color: var(--zj-outline-variant) !important;
    color: var(--zj-on-surface) !important;
}

:root[data-theme="dark"] .catalog-action-btn:hover:not(:where(.cashier-reference-scope *)) {
    background: var(--zj-surface-container-high) !important;
    border-color: var(--zj-primary) !important;
    color: var(--zj-primary) !important;
}

/* Category Rails & Pills */
:root[data-theme="dark"] .cashier-category-rail:not(:where(.cashier-reference-scope *)) {
    background: var(--zj-surface) !important;
    border-bottom: 1px solid var(--zj-outline-variant) !important;
}

:root[data-theme="dark"] .cashier-category-pill:not(:where(.cashier-reference-scope *)),
:root[data-theme="dark"] .cashier-category-button:not(:where(.cashier-reference-scope *)) {
    background: var(--zj-surface-container-low) !important;
    border-color: var(--zj-outline-variant) !important;
    color: var(--zj-on-surface-variant) !important;
}

:root[data-theme="dark"] .cashier-category-pill:hover:not(:where(.cashier-reference-scope *)),
:root[data-theme="dark"] .cashier-category-button:hover:not(:where(.cashier-reference-scope *)) {
    background: var(--zj-surface-container-high) !important;
    color: var(--zj-on-surface) !important;
    border-color: var(--zj-outline) !important;
}

:root[data-theme="dark"] .cashier-category-pill.is-active:not(:where(.cashier-reference-scope *)),
:root[data-theme="dark"] .cashier-category-button.is-active:not(:where(.cashier-reference-scope *)) {
    background: var(--zj-primary) !important;
    color: var(--zj-on-primary) !important;
    border-color: var(--zj-primary) !important;
}

:root[data-theme="dark"] .cashier-category-count:not(:where(.cashier-reference-scope *)) {
    background: rgba(var(--zj-on-surface-rgb), 0.12) !important;
    color: inherit !important;
}

/* Shortcuts Carousel */
:root[data-theme="dark"] .shortcut-chips-bar:not(:where(.cashier-reference-scope *)) {
    background: var(--zj-surface) !important;
    border-color: var(--zj-outline-variant) !important;
}

:root[data-theme="dark"] .shortcut-chips__badge:not(:where(.cashier-reference-scope *)) {
    background: rgba(245, 158, 11, 0.2) !important;
    color: #fcd34d !important;
    border-color: rgba(245, 158, 11, 0.35) !important;
}

:root[data-theme="dark"] .shortcut-chip--popular:not(:where(.cashier-reference-scope *)) {
    background: rgba(234, 88, 12, 0.18) !important;
    color: #fdba74 !important;
    border-color: rgba(234, 88, 12, 0.35) !important;
}

:root[data-theme="dark"] .shortcut-chip--popular:hover:not(:where(.cashier-reference-scope *)) {
    background: rgba(234, 88, 12, 0.28) !important;
    border-color: #fb923c !important;
}

:root[data-theme="dark"] .shortcut-chip--neutral:not(:where(.cashier-reference-scope *)) {
    background: var(--zj-surface-container-low) !important;
    color: var(--zj-on-surface) !important;
    border-color: var(--zj-outline-variant) !important;
}

:root[data-theme="dark"] .shortcut-chip--neutral:hover:not(:where(.cashier-reference-scope *)) {
    background: var(--zj-surface-container-high) !important;
    border-color: var(--zj-outline) !important;
}

:root[data-theme="dark"] .shortcut-chip--repeat:not(:where(.cashier-reference-scope *)) {
    background: rgba(59, 130, 246, 0.18) !important;
    color: #93c5fd !important;
    border-color: rgba(59, 130, 246, 0.35) !important;
}

:root[data-theme="dark"] .shortcut-chips__arrow:not(:where(.cashier-reference-scope *)) {
    background: var(--zj-surface-container-low) !important;
    border-color: var(--zj-outline-variant) !important;
    color: var(--zj-on-surface-variant) !important;
}

:root[data-theme="dark"] .shortcut-chips__arrow:hover:not(:where(.cashier-reference-scope *)) {
    background: var(--zj-surface-container-high) !important;
    color: var(--zj-on-surface) !important;
}

/* Cashier Product Item Cards */
:root[data-theme="dark"] .cashier-item-tile:not(:where(.cashier-reference-scope *)) {
    background: var(--zj-surface) !important;
    border: 1px solid var(--zj-outline-variant) !important;
    color: var(--zj-on-surface) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

:root[data-theme="dark"] .cashier-item-tile:hover:not(:where(.cashier-reference-scope *)) {
    border-color: var(--zj-primary) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45) !important;
}

:root[data-theme="dark"] .cashier-item-tile.is-selected:not(:where(.cashier-reference-scope *)) {
    border: 2px solid var(--zj-primary) !important;
}

:root[data-theme="dark"] .cashier-item-tile.is-unavailable:not(:where(.cashier-reference-scope *)) {
    background: rgba(220, 38, 38, 0.1) !important;
    border-color: rgba(220, 38, 38, 0.25) !important;
}

:root[data-theme="dark"] .cashier-item-tile__image:not(:where(.cashier-reference-scope *)) {
    background: var(--zj-surface-container-low) !important;
}

:root[data-theme="dark"] .cashier-item-tile__image .material-symbols-outlined:not(:where(.cashier-reference-scope *)) {
    color: var(--zj-on-surface-variant) !important;
}

:root[data-theme="dark"] .cashier-item-tile__title:not(:where(.cashier-reference-scope *)),
:root[data-theme="dark"] .item-tile__name:not(:where(.cashier-reference-scope *)) {
    color: var(--zj-on-surface) !important;
}

:root[data-theme="dark"] .cashier-item-tile__desc:not(:where(.cashier-reference-scope *)),
:root[data-theme="dark"] .item-tile__meta:not(:where(.cashier-reference-scope *)) {
    color: var(--zj-on-surface-variant) !important;
}

:root[data-theme="dark"] .cashier-item-tile__footer:not(:where(.cashier-reference-scope *)) {
    border-top: 1px solid var(--zj-outline-variant) !important;
}

:root[data-theme="dark"] .cashier-item-tile__price:not(:where(.cashier-reference-scope *)),
:root[data-theme="dark"] .item-tile__price:not(:where(.cashier-reference-scope *)) {
    color: var(--zj-success) !important;
}

:root[data-theme="dark"] .cashier-item-tile__add-btn:not(:where(.cashier-reference-scope *)) {
    background: var(--zj-surface-container-high) !important;
    color: var(--zj-primary) !important;
}

:root[data-theme="dark"] .cashier-item-tile:hover .cashier-item-tile__add-btn:not(:where(.cashier-reference-scope *)) {
    background: var(--zj-primary) !important;
    color: var(--zj-on-primary) !important;
}

:root[data-theme="dark"] .cashier-item-tile__sku-badge:not(:where(.cashier-reference-scope *)) {
    background: rgba(16, 24, 39, 0.88) !important;
    color: var(--zj-on-surface) !important;
}

:root[data-theme="dark"] .cashier-item-tile__servings:not(:where(.cashier-reference-scope *)) {
    background: rgba(245, 158, 11, 0.2) !important;
    color: #fcd34d !important;
    border-color: rgba(245, 158, 11, 0.35) !important;
}

/* Cashier Ticket Panel & Cart */
:root[data-theme="dark"] .cashier-ticket:not(:where(.cashier-reference-scope *)) {
    background: var(--zj-surface-container-lowest) !important;
    border-inline-end: 1px solid var(--zj-outline-variant) !important;
}

:root[data-theme="dark"] .cashier-ticket-header:not(:where(.cashier-reference-scope *)) {
    background: var(--zj-surface) !important;
    border-bottom: 1px solid var(--zj-outline-variant) !important;
}

:root[data-theme="dark"] .ticket-type-segmented:not(:where(.cashier-reference-scope *)) {
    background: var(--zj-surface-container-low) !important;
}

:root[data-theme="dark"] .type-pill:not(:where(.cashier-reference-scope *)) {
    color: var(--zj-on-surface-variant) !important;
}

:root[data-theme="dark"] .type-pill.is-active:not(:where(.cashier-reference-scope *)) {
    background: var(--zj-surface-container-high) !important;
    color: var(--zj-primary) !important;
}

:root[data-theme="dark"] .customer-emoji-btn:not(:where(.cashier-reference-scope *)),
:root[data-theme="dark"] .customer-select-control:not(:where(.cashier-reference-scope *)) {
    background: var(--zj-surface-container-low) !important;
    border-color: var(--zj-outline-variant) !important;
    color: var(--zj-on-surface) !important;
}

:root[data-theme="dark"] .customer-identity-chip:not(:where(.cashier-reference-scope *)) {
    background: var(--zj-surface-container-low) !important;
    border-color: var(--zj-outline-variant) !important;
    color: var(--zj-on-surface) !important;
}

:root[data-theme="dark"] .customer-identity-chip:hover:not(:where(.cashier-reference-scope *)) {
    background: var(--zj-surface-container) !important;
    border-color: var(--zj-primary) !important;
}

:root[data-theme="dark"] .table-selector-chip.has-table:not(:where(.cashier-reference-scope *)) {
    background: rgba(245, 158, 11, 0.18) !important;
    border-color: rgba(245, 158, 11, 0.35) !important;
    color: #fcd34d !important;
}

:root[data-theme="dark"] .table-selector-chip.missing-table:not(:where(.cashier-reference-scope *)) {
    background: rgba(239, 68, 68, 0.18) !important;
    border-color: rgba(239, 68, 68, 0.35) !important;
    color: #fca5a5 !important;
}

:root[data-theme="dark"] .cashier-ticket__scroll-area:not(:where(.cashier-reference-scope *)) {
    background: var(--zj-surface-container-lowest) !important;
}

:root[data-theme="dark"] .cashier-ticket-row:not(:where(.cashier-reference-scope *)) {
    background: var(--zj-surface-container-low) !important;
    border: 1px solid var(--zj-outline-variant) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

:root[data-theme="dark"] .cashier-ticket-row:hover:not(:where(.cashier-reference-scope *)) {
    border-color: var(--zj-outline) !important;
}

:root[data-theme="dark"] .cashier-ticket-row__title:not(:where(.cashier-reference-scope *)) {
    color: var(--zj-on-surface) !important;
}

:root[data-theme="dark"] .cashier-ticket-row__total:not(:where(.cashier-reference-scope *)) {
    color: var(--zj-primary) !important;
}

:root[data-theme="dark"] .cashier-ticket-row__unit-price:not(:where(.cashier-reference-scope *)) {
    color: var(--zj-on-surface-variant) !important;
}

:root[data-theme="dark"] .modifier-tag:not(:where(.cashier-reference-scope *)) {
    background: var(--zj-surface-container-high) !important;
    color: var(--zj-on-surface-variant) !important;
}

:root[data-theme="dark"] .cashier-quantity:not(:where(.cashier-reference-scope *)) {
    background: var(--zj-surface-container-high) !important;
    border: 1px solid var(--zj-outline-variant) !important;
}

:root[data-theme="dark"] .cashier-quantity button:not(:where(.cashier-reference-scope *)) {
    background: var(--zj-surface-container) !important;
    color: var(--zj-on-surface) !important;
}

:root[data-theme="dark"] .cashier-quantity button:hover:not(:disabled):not(:where(.cashier-reference-scope *)) {
    background: var(--zj-primary) !important;
    color: var(--zj-on-primary) !important;
}

:root[data-theme="dark"] .cashier-quantity > strong:not(:where(.cashier-reference-scope *)) {
    color: var(--zj-on-surface) !important;
}

:root[data-theme="dark"] .cashier-ticket-row__edit-options:not(:where(.cashier-reference-scope *)) {
    color: var(--zj-primary) !important;
}

:root[data-theme="dark"] .cashier-empty-ticket:not(:where(.cashier-reference-scope *)) {
    color: var(--zj-on-surface-variant) !important;
}

:root[data-theme="dark"] .cashier-empty-ticket strong:not(:where(.cashier-reference-scope *)) {
    color: var(--zj-on-surface) !important;
}

:root[data-theme="dark"] .cashier-empty-ticket p:not(:where(.cashier-reference-scope *)) {
    color: var(--zj-on-surface-variant) !important;
}

:root[data-theme="dark"] .cashier-empty-ticket .material-symbols-outlined:not(:where(.cashier-reference-scope *)) {
    color: var(--zj-primary) !important;
}

/* Kitchen Notes & Fast Cash */
:root[data-theme="dark"] .cashier-notes-trigger:not(:where(.cashier-reference-scope *)) {
    background: var(--zj-surface-container-low) !important;
    border: 1px dashed var(--zj-outline-variant) !important;
    color: var(--zj-on-surface-variant) !important;
}

:root[data-theme="dark"] .cashier-notes-trigger:hover:not(:where(.cashier-reference-scope *)) {
    background: var(--zj-surface-container) !important;
    border-color: var(--zj-outline) !important;
    color: var(--zj-on-surface) !important;
}

:root[data-theme="dark"] .cashier-notes-chip:not(:where(.cashier-reference-scope *)) {
    background: rgba(59, 130, 246, 0.18) !important;
    border-color: rgba(59, 130, 246, 0.35) !important;
    color: #93c5fd !important;
}

:root[data-theme="dark"] .quick-note-chip:not(:where(.cashier-reference-scope *)) {
    background: var(--zj-surface-container) !important;
    border-color: var(--zj-outline-variant) !important;
    color: var(--zj-on-surface-variant) !important;
}

:root[data-theme="dark"] .quick-note-chip:hover:not(:disabled):not(:where(.cashier-reference-scope *)) {
    background: var(--zj-surface-container-high) !important;
    border-color: var(--zj-primary) !important;
    color: var(--zj-primary) !important;
}

:root[data-theme="dark"] .cashier-notes-textarea:not(:where(.cashier-reference-scope *)) {
    background: var(--zj-surface-container-low) !important;
    border-color: var(--zj-outline-variant) !important;
    color: var(--zj-on-surface) !important;
}

:root[data-theme="dark"] .cashier-fast-cash-strip:not(:where(.cashier-reference-scope *)) {
    background: var(--zj-surface-container-low) !important;
    border-color: var(--zj-outline-variant) !important;
}

:root[data-theme="dark"] .fast-cash-chip:not(:where(.cashier-reference-scope *)) {
    background: var(--zj-surface-container) !important;
    border-color: var(--zj-outline-variant) !important;
    color: var(--zj-on-surface) !important;
}

:root[data-theme="dark"] .fast-cash-chip:hover:not(:where(.cashier-reference-scope *)) {
    background: var(--zj-primary) !important;
    color: var(--zj-on-primary) !important;
    border-color: var(--zj-primary) !important;
}

:root[data-theme="dark"] .quick-action-btn:not(:where(.cashier-reference-scope *)) {
    background: var(--zj-surface-container-low) !important;
    border-color: var(--zj-outline-variant) !important;
    color: var(--zj-on-surface) !important;
}

:root[data-theme="dark"] .quick-action-btn:hover:not(:disabled):not(:where(.cashier-reference-scope *)) {
    background: var(--zj-surface-container) !important;
    border-color: var(--zj-outline) !important;
    color: var(--zj-on-surface) !important;
}

:root[data-theme="dark"] .cashier-ticket__footer:not(:where(.cashier-reference-scope *)) {
    background: var(--zj-surface) !important;
    border-top: 1px dashed var(--zj-outline-variant) !important;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* Status Bar */
:root[data-theme="dark"] .cashier-terminal-status-bar:not(:where(.cashier-reference-scope *)) {
    background: var(--zj-surface) !important;
    border-top: 1px solid var(--zj-outline-variant) !important;
    color: var(--zj-on-surface-variant) !important;
}

:root[data-theme="dark"] .terminal-status-right:not(:where(.cashier-reference-scope *)) {
    color: var(--zj-on-surface-variant) !important;
}

/* SKU Numpad Modal */
:root[data-theme="dark"] .cashier-numpad-dialog {
    background: var(--zj-surface) !important;
    border-color: var(--zj-outline-variant) !important;
    color: var(--zj-on-surface) !important;
}

:root[data-theme="dark"] .cashier-numpad-header {
    background: var(--zj-surface-container-low) !important;
    border-bottom: 1px solid var(--zj-outline-variant) !important;
}

:root[data-theme="dark"] .cashier-numpad-screen {
    background: var(--zj-surface-container-lowest) !important;
    border-color: var(--zj-outline-variant) !important;
}

:root[data-theme="dark"] .cashier-numpad-screen__clear {
    background: var(--zj-surface-container-high) !important;
    color: var(--zj-on-surface) !important;
}

:root[data-theme="dark"] .cashier-numpad-match {
    background: rgba(34, 197, 94, 0.15) !important;
    border-color: rgba(34, 197, 94, 0.35) !important;
}

:root[data-theme="dark"] .cashier-numpad-match__info strong {
    color: #4ade80 !important;
}

:root[data-theme="dark"] .cashier-numpad-match__info span {
    color: #86efac !important;
}

:root[data-theme="dark"] .cashier-numpad-no-match {
    background: rgba(245, 158, 11, 0.15) !important;
    border-color: rgba(245, 158, 11, 0.35) !important;
    color: #fcd34d !important;
}

:root[data-theme="dark"] .numpad-key {
    background: var(--zj-surface-container-low) !important;
    border-color: var(--zj-outline-variant) !important;
    color: var(--zj-on-surface) !important;
}

:root[data-theme="dark"] .numpad-key:hover {
    background: var(--zj-surface-container) !important;
    border-color: var(--zj-outline) !important;
}

:root[data-theme="dark"] .numpad-key--action {
    background: var(--zj-surface-container-high) !important;
    color: var(--zj-on-surface-variant) !important;
}

:root[data-theme="dark"] .cashier-numpad-footer {
    background: var(--zj-surface-container-low) !important;
    border-top: 1px solid var(--zj-outline-variant) !important;
}

/* Modular Cashier Components (Components/Cashier/*) */
:root[data-theme="dark"] .cart-panel,
:root[data-theme="dark"] .checkout-panel,
:root[data-theme="dark"] .product-card,
:root[data-theme="dark"] .cart-item,
:root[data-theme="dark"] .order-tabs-bar {
    background: var(--zj-surface) !important;
    border-color: var(--zj-outline-variant) !important;
    color: var(--zj-on-surface) !important;
}

:root[data-theme="dark"] .cart-panel__header,
:root[data-theme="dark"] .checkout-panel__cash-strip,
:root[data-theme="dark"] .cart-drawer-close-btn {
    background: var(--zj-surface-container-low) !important;
    border-color: var(--zj-outline-variant) !important;
    color: var(--zj-on-surface) !important;
}

:root[data-theme="dark"] .cash-chip {
    background: var(--zj-surface-container) !important;
    border-color: var(--zj-outline-variant) !important;
    color: var(--zj-on-surface) !important;
}

/* ============================================================
   RETAIL SCREENS (RetailPos, RetailSales, RetailProducts)
   ============================================================ */
:root[data-theme="dark"] .retail-pos article,
:root[data-theme="dark"] .retail-pos aside,
:root[data-theme="dark"] .retail-pos .empty,
:root[data-theme="dark"] .retail-pos .package {
    background: var(--zj-surface-container-low) !important;
    border-color: var(--zj-outline-variant) !important;
    color: var(--zj-on-surface) !important;
}

:root[data-theme="dark"] .retail-pos .total,
:root[data-theme="dark"] .retail-pos .cart-line {
    border-color: var(--zj-outline-variant) !important;
}

:root[data-theme="dark"] .sales article,
:root[data-theme="dark"] .sales .refund,
:root[data-theme="dark"] .sales th,
:root[data-theme="dark"] .sales td {
    border-color: var(--zj-outline-variant) !important;
    color: var(--zj-on-surface) !important;
}

:root[data-theme="dark"] .retail-receipt {
    background: var(--zj-surface-container-low) !important;
    border-color: var(--zj-outline-variant) !important;
    color: var(--zj-on-surface) !important;
}

:root[data-theme="dark"] .retail-catalog .editor,
:root[data-theme="dark"] .retail-catalog .category-form,
:root[data-theme="dark"] .retail-catalog .table-wrap {
    background: var(--zj-surface-container-low) !important;
    border-color: var(--zj-outline-variant) !important;
    color: var(--zj-on-surface) !important;
}

:root[data-theme="dark"] .retail-catalog th {
    background: var(--zj-surface-container) !important;
    border-color: var(--zj-outline-variant) !important;
    color: var(--zj-on-surface-variant) !important;
}

:root[data-theme="dark"] .retail-catalog td,
:root[data-theme="dark"] .retail-catalog .toolbar,
:root[data-theme="dark"] .retail-catalog .package-row,
:root[data-theme="dark"] .retail-catalog .editor-footer,
:root[data-theme="dark"] .retail-catalog .category-list article {
    border-color: var(--zj-outline-variant) !important;
}

:root[data-theme="dark"] .retail-catalog .state {
    background: var(--zj-surface-container-high) !important;
    color: var(--zj-on-surface-variant) !important;
}

:root[data-theme="dark"] .retail-catalog .state.active {
    background: rgba(52, 211, 153, 0.16) !important;
    color: #6ee7b7 !important;
}

:root[data-theme="dark"] .retail-catalog .package-chip {
    background: var(--zj-surface-container) !important;
    border-color: var(--zj-outline-variant) !important;
    color: var(--zj-on-surface) !important;
}

/* ============================================================
   MODALS: MIGRATION & BULK IMPORT & SUBSCRIPTION
   ============================================================ */
:root[data-theme="dark"] .pos-migration-card,
:root[data-theme="dark"] .bulk-import-card {
    background: var(--zj-surface-container-low) !important;
    border-color: var(--zj-outline-variant) !important;
    color: var(--zj-on-surface) !important;
}

:root[data-theme="dark"] .pos-migration-card__specs,
:root[data-theme="dark"] .bulk-import-card__specs {
    background: var(--zj-surface-container) !important;
    color: var(--zj-on-surface-variant) !important;
}

:root[data-theme="dark"] .pos-migration-upload-zone__label,
:root[data-theme="dark"] .bulk-import-upload-zone__label {
    background: var(--zj-surface-container-low) !important;
    border-color: var(--zj-outline-variant) !important;
}

:root[data-theme="dark"] .pos-migration-upload-zone__label strong,
:root[data-theme="dark"] .bulk-import-upload-zone__label strong {
    color: var(--zj-on-surface) !important;
}

:root[data-theme="dark"] .pos-migration-table thead th,
:root[data-theme="dark"] .bulk-import-table thead th {
    background: var(--zj-surface-container) !important;
    color: var(--zj-on-surface) !important;
    border-color: var(--zj-outline-variant) !important;
}

:root[data-theme="dark"] .stat-card {
    background: var(--zj-surface-container-low) !important;
    border-color: var(--zj-outline-variant) !important;
    color: var(--zj-on-surface) !important;
}

:root[data-theme="dark"] .publish-confirm-dialog {
    background: var(--zj-surface-container-lowest) !important;
    border-color: var(--zj-outline-variant) !important;
    color: var(--zj-on-surface) !important;
}

:root[data-theme="dark"] .publish-confirm-alert {
    background: rgba(245, 158, 11, 0.15) !important;
    border-color: rgba(245, 158, 11, 0.35) !important;
    color: #fcd34d !important;
}

:root[data-theme="dark"] .page-draft-notice {
    background: var(--zj-surface-container-high) !important;
    border-color: var(--zj-outline-variant) !important;
    color: var(--zj-on-surface) !important;
}

:root[data-theme="dark"] .page-draft-notice p {
    color: var(--zj-on-surface-variant) !important;
}

/* Authentication Layout & Login */
:root[data-theme="dark"]:not([data-performance="lite"]) .auth-shell {
    background:
        radial-gradient(circle at 14% 8%, rgba(var(--zj-primary-rgb), 0.16), transparent 32%),
        radial-gradient(circle at 86% 16%, rgba(var(--zj-tertiary-rgb), 0.12), transparent 34%),
        radial-gradient(circle at 50% 100%, rgba(var(--zj-secondary-rgb), 0.1), transparent 42%),
        linear-gradient(145deg, var(--zj-surface), var(--zj-surface-container-low)) !important;
}

:root[data-theme="dark"]:not([data-performance="lite"]) .auth-card {
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--zj-primary-rgb), 0.12), transparent 40%),
        linear-gradient(180deg, rgba(24, 35, 55, 0.92), rgba(16, 24, 39, 0.88)) !important;
    border-color: rgba(var(--zj-primary-rgb), 0.28) !important;
    box-shadow:
        0 1.5rem 4rem rgba(0, 0, 0, 0.5),
        var(--zj-shadow-2xl) !important;
}

:root[data-theme="dark"] .auth-card__glow {
    background:
        radial-gradient(circle, rgba(var(--zj-primary-rgb), 0.22), rgba(var(--zj-secondary-rgb), 0.08) 44%, transparent 72%) !important;
}

:root[data-theme="dark"] .auth-card__title {
    color: var(--zj-on-surface) !important;
}

:root[data-theme="dark"] .auth-card__subtitle {
    color: var(--zj-on-surface-variant) !important;
}

:root[data-theme="dark"] .auth-card .form-input,
:root[data-theme="dark"] .auth-card .form-control {
    background: var(--zj-field-surface) !important;
    border-color: var(--zj-field-border) !important;
    color: var(--zj-on-surface) !important;
    box-shadow: var(--zj-field-shadow) !important;
}

:root[data-theme="dark"] .auth-card .form-input:hover,
:root[data-theme="dark"] .auth-card .form-control:hover {
    border-color: var(--zj-field-border-hover) !important;
}

:root[data-theme="dark"] .auth-card .form-input:focus,
:root[data-theme="dark"] .auth-card .form-control:focus {
    background: var(--zj-field-surface-focus) !important;
    border-color: var(--zj-field-border-focus) !important;
    box-shadow: var(--zj-field-focus-ring) !important;
}

:root[data-theme="dark"] .auth-card__footer {
    border-top-color: var(--zj-outline-variant) !important;
    color: var(--zj-on-surface-variant) !important;
}

@media (max-width: 760px) {
    :root[data-theme="dark"] .app-sidebar {
        box-shadow: 1rem 0 3rem rgba(0, 0, 0, 0.5);
    }
}