/* Theme tokens + full dark / night mode for Halson ERP */

:root {
    --theme-surface: #ffffff;
    --theme-surface-2: #f9fbfa;
    --theme-surface-3: #f1f5f3;
    --theme-elevated: #ffffff;
    --theme-topbar: #ffffffed;
    --theme-shadow: 0 3px 10px #18382d05;
    --theme-shadow-strong: 0 10px 32px #18382d1a;
    --theme-input-bg: #ffffff;
    --theme-input-border: #e1e8e4;
    --theme-hover: #f1f5f3;
    --theme-text-strong: #2d403a;
    --theme-text: var(--ink);
    --theme-text-muted: var(--muted);
    --theme-success-bg: #eef8f2;
    --theme-success-border: #cfe8da;
    --theme-success-text: #245844;
    --theme-danger-bg: #fdf2ef;
    --theme-danger-border: #f0d2c8;
    --theme-danger-text: #8a4a3a;
    --theme-warn-bg: #fdf9f1;
    --theme-warn-border: #f4ead8;
    --theme-warn-text: #806333;
    --theme-sidebar: #102522;
    --theme-sidebar-text: #d8e3df;
    --theme-kbd-bg: #ffffff;
    --theme-chart-grid: #eef2f0;
    --theme-overlay: rgba(12, 24, 20, 0.45);
    --theme-soft-green: #eaf5ef;
    --theme-soft-amber: #fbf3e4;
    --theme-soft-red: #f9eeeb;
    --theme-soft-blue: #edf4fa;
    --theme-soft-violet: #f1eff9;
    --theme-table-head: #fafcfb;
    --theme-thumb: #f5f8f6;
    --theme-chip: #f1f5f2;
    --theme-dashed: #cfded5;
}

html[data-theme="dark"] {
    color-scheme: dark;
    --ink: #e7efec;
    --muted: #93a49e;
    --soft-muted: #7d8f88;
    --line: #2a3a35;
    --canvas: #0c1412;
    --white: #15201c;
    --green: #3f9d7f;
    --green-dark: #9fd9c0;
    --green-soft: #1a3029;
    --amber: #e4a443;
    --theme-surface: #15201c;
    --theme-surface-2: #1a2823;
    --theme-surface-3: #20312c;
    --theme-elevated: #1a2823;
    --theme-topbar: rgba(12, 20, 18, 0.92);
    --theme-shadow: 0 4px 18px #00000055;
    --theme-shadow-strong: 0 14px 40px #00000066;
    --theme-input-bg: #121c19;
    --theme-input-border: #31443d;
    --theme-hover: #24332e;
    --theme-text-strong: #eef5f2;
    --theme-text: #e7efec;
    --theme-text-muted: #93a49e;
    --theme-success-bg: #143028;
    --theme-success-border: #2a5a48;
    --theme-success-text: #9fd9c0;
    --theme-danger-bg: #2a1a16;
    --theme-danger-border: #5a342c;
    --theme-danger-text: #f0b4a4;
    --theme-warn-bg: #2f2816;
    --theme-warn-border: #5a4a22;
    --theme-warn-text: #e4c07a;
    --theme-sidebar: #0a1613;
    --theme-sidebar-text: #d8e3df;
    --theme-kbd-bg: #1a2823;
    --theme-chart-grid: #24332e;
    --theme-overlay: rgba(0, 0, 0, 0.55);
    --theme-soft-green: #1a332c;
    --theme-soft-amber: #3a2e16;
    --theme-soft-red: #3a221c;
    --theme-soft-blue: #1a2a36;
    --theme-soft-violet: #2a2438;
    --theme-table-head: #1a2823;
    --theme-thumb: #1a2823;
    --theme-chip: #20312c;
    --theme-dashed: #31443d;
}

/* ── Base shell ─────────────────────────────────────────── */
html[data-theme="dark"] body {
    background: var(--canvas);
    color: var(--ink);
}

html[data-theme="dark"] .sidebar {
    color: var(--theme-sidebar-text);
    background: var(--theme-sidebar);
    border-right: 1px solid #1c2e29;
}

html[data-theme="dark"] .main-area,
html[data-theme="dark"] .app-shell {
    background: var(--canvas);
}

html[data-theme="dark"] .page-content {
    color: var(--ink);
}

/* ── Top bar ────────────────────────────────────────────── */
html[data-theme="dark"] .topbar {
    border-bottom-color: var(--line);
    background: var(--theme-topbar);
}

html[data-theme="dark"] .breadcrumb {
    color: var(--soft-muted);
}

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

html[data-theme="dark"] .crumb-slash {
    color: #4a5c56;
}

html[data-theme="dark"] .search-box,
html[data-theme="dark"] .table-search,
html[data-theme="dark"] .pos-search,
html[data-theme="dark"] .catalogue-search {
    border-color: var(--theme-input-border) !important;
    background: var(--theme-input-bg) !important;
}

html[data-theme="dark"] .search-box svg,
html[data-theme="dark"] .table-search svg,
html[data-theme="dark"] .pos-search svg,
html[data-theme="dark"] .catalogue-search svg {
    stroke: #8a9791;
}

html[data-theme="dark"] .search-box input,
html[data-theme="dark"] .table-search input,
html[data-theme="dark"] .pos-search input,
html[data-theme="dark"] .catalogue-search input {
    color: var(--ink) !important;
    background: transparent !important;
}

html[data-theme="dark"] .search-box input::placeholder,
html[data-theme="dark"] .table-search input::placeholder,
html[data-theme="dark"] .pos-search input::placeholder,
html[data-theme="dark"] .catalogue-search input::placeholder {
    color: #6f807a;
}

html[data-theme="dark"] .search-box kbd {
    border-color: var(--line);
    color: var(--soft-muted);
    background: var(--theme-kbd-bg);
}

html[data-theme="dark"] .icon-button:hover,
html[data-theme="dark"] .theme-toggle:hover {
    background: var(--theme-hover);
}

html[data-theme="dark"] .icon-button svg {
    stroke: #a7b6b0;
}

html[data-theme="dark"] .notification-dot {
    border-color: var(--theme-surface);
}

html[data-theme="dark"] .notification-count {
    border-color: var(--theme-topbar);
}

html[data-theme="dark"] .topbar-divider {
    background: var(--line);
}

html[data-theme="dark"] .profile-copy strong {
    color: var(--theme-text-strong);
}

html[data-theme="dark"] .profile-copy small {
    color: var(--soft-muted);
}

html[data-theme="dark"] .logout-button {
    border-color: var(--line) !important;
    color: var(--theme-text-muted) !important;
    background: var(--theme-surface-2) !important;
}

html[data-theme="dark"] .logout-button:hover {
    background: var(--theme-hover) !important;
    color: var(--ink) !important;
    border-color: var(--line) !important;
}

/* ── Cards / panels / surfaces (catch remaining whites) ── */
html[data-theme="dark"] :is(
    .metric-card,
    .panel,
    .product-metric,
    .form-panel,
    .settings-panel,
    .notice-card,
    .invoice-card,
    .catalogue-card,
    .catalogue-panel,
    .pos-catalogue,
    .pos-cart,
    .report-card,
    .garage-card,
    .empty-state,
    .login-card,
    .data-card,
    .summary-card,
    .stat-tile,
    .movements-panel,
    .orders-panel,
    .top-products,
    .side-stack > .panel,
    .settings-form-main .panel,
    .settings-form-aside .panel,
    .invoice-summary,
    .invoice-preview,
    .quote-card,
    .delivery-card,
    .payment-card,
    .user-card,
    .warehouse-card,
    .supplier-card,
    .notification-card,
    .detail-card,
    .info-card,
    .content-card,
    .filter-bar,
    .toolbar-card,
    .stock-adjust-dialog,
    .modal-card,
    .dialog-card
) {
    border-color: var(--line) !important;
    background: var(--theme-surface) !important;
    box-shadow: var(--theme-shadow) !important;
    color: var(--ink);
}

/* Generic white / near-white surface catch-all inside page */
html[data-theme="dark"] .page-content :is(
    .panel,
    .metric-card,
    .product-metric,
    .form-panel,
    .settings-panel,
    .catalogue-panel,
    .movements-panel,
    .pos-catalogue,
    .pos-cart,
    .report-card,
    .garage-card,
    .invoice-card,
    .empty-state,
    .data-card,
    .summary-card,
    .stat-tile,
    .notice-card
) {
    background: var(--theme-surface) !important;
    border-color: var(--line) !important;
}

html[data-theme="dark"] .notice-card {
    background: linear-gradient(125deg, #152820 0%, #15201c 70%, #1a2823 100%) !important;
    border-color: #2a4a3d !important;
}

html[data-theme="dark"] .notice-glow {
    border-color: #2a4a3d;
    box-shadow: 0 0 0 13px #1a3028, 0 0 0 27px #15241f;
    opacity: 0.55;
}

html[data-theme="dark"] .notice-icon {
    color: #6fbf9a;
    background: #1f3a30;
}

html[data-theme="dark"] .notice-label,
html[data-theme="dark"] .notice-card strong,
html[data-theme="dark"] .notice-card p {
    color: var(--ink);
}

html[data-theme="dark"] .notice-card p b {
    color: #9fd9c0;
}

html[data-theme="dark"] .notice-card > a {
    color: #8fd4b8;
}

/* ── Typography ─────────────────────────────────────────── */
html[data-theme="dark"] :is(
    .metric-label,
    .product-metric small,
    .welcome-subtitle,
    .panel-header p,
    .panel-kicker,
    .eyebrow,
    .result-count,
    .field-hint,
    .chart-footer,
    .table-footer,
    .page-footer,
    .login-subtitle,
    .login-foot,
    .form-section-heading p,
    .dialog-heading p,
    .catalogue-product small,
    .catalogue-barcode,
    .pos-product-meta,
    .pos-empty-products,
    .pos-cart-empty,
    .pos-payment-label,
    .pos-cart .field-hint,
    .movement-product small,
    .movement-note,
    .customer-table-person small,
    .customer-contact small,
    .customer-location,
    .customer-added,
    .settings-preview-note
) {
    color: var(--theme-text-muted) !important;
}

html[data-theme="dark"] :is(
    .metric-value,
    .product-metric strong,
    .panel-header h2,
    .panel-header strong,
    .products-heading h1,
    .page-content h1,
    .page-content h2,
    .page-content h3,
    .login-card h1,
    .top-product-copy strong,
    .legend-row strong,
    .donut-center strong,
    .chart-summary strong,
    .pos-cart-header h2,
    .pos-product-top strong,
    .pos-cart-line-info strong,
    .pos-cart-line-total strong,
    .pos-total-row strong,
    .catalogue-product strong,
    .catalogue-sku,
    .catalogue-price,
    .catalogue-empty h3,
    .customer-table-person strong,
    .customer-contact strong,
    .movement-product strong,
    .dialog-heading h2,
    .form-section-heading h2,
    .amount
) {
    color: var(--theme-text-strong) !important;
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2 {
    color: var(--theme-text-strong);
}

html[data-theme="dark"] .info-dot {
    border-color: #4a5c56;
    color: #8a9791;
}

html[data-theme="dark"] .metric-decimal,
html[data-theme="dark"] .metric-note {
    color: var(--theme-text-muted);
}

/* Metric icons */
html[data-theme="dark"] .metric-icon--green,
html[data-theme="dark"] .product-metric-icon--green {
    color: #6fbf9a !important;
    background: var(--theme-soft-green) !important;
}

html[data-theme="dark"] .metric-icon--blue,
html[data-theme="dark"] .product-metric-icon--blue {
    color: #7eb0d8 !important;
    background: var(--theme-soft-blue) !important;
}

html[data-theme="dark"] .metric-icon--amber,
html[data-theme="dark"] .product-metric-icon--amber {
    color: #e4a443 !important;
    background: var(--theme-soft-amber) !important;
}

html[data-theme="dark"] .metric-icon--rose,
html[data-theme="dark"] .metric-icon--red,
html[data-theme="dark"] .product-metric-icon--red {
    color: #e08a78 !important;
    background: var(--theme-soft-red) !important;
}

html[data-theme="dark"] .metric-icon--violet {
    color: #b5a4e0 !important;
    background: var(--theme-soft-violet) !important;
}

html[data-theme="dark"] .product-metric-icon {
    background: var(--theme-surface-3);
}

html[data-theme="dark"] .form-section-icon {
    color: #6fbf9a !important;
    background: var(--theme-soft-green) !important;
}

html[data-theme="dark"] .form-section-icon--gold {
    color: #e4a443 !important;
    background: var(--theme-soft-amber) !important;
}

html[data-theme="dark"] .form-section-icon--violet {
    color: #b5a4e0 !important;
    background: var(--theme-soft-violet) !important;
}

html[data-theme="dark"] .form-section-icon--green {
    color: #6fbf9a !important;
    background: var(--theme-soft-green) !important;
}

/* ── Buttons ────────────────────────────────────────────── */
html[data-theme="dark"] .button {
    border-color: var(--line);
    color: var(--ink);
    background: var(--theme-surface-2);
    box-shadow: none;
}

html[data-theme="dark"] .button:hover {
    background: var(--theme-hover);
    box-shadow: 0 5px 12px #00000040;
}

html[data-theme="dark"] .button--primary,
html[data-theme="dark"] .button.button--primary,
html[data-theme="dark"] .login-submit {
    border-color: #2f6b57 !important;
    color: #f3faf7 !important;
    background: linear-gradient(180deg, #2f7a62, #246c5b) !important;
    box-shadow: 0 4px 9px #00000040 !important;
}

html[data-theme="dark"] .button--primary:hover,
html[data-theme="dark"] .login-submit:hover {
    background: linear-gradient(180deg, #35906f, #2a7a64) !important;
}

html[data-theme="dark"] .button--ghost,
html[data-theme="dark"] .button--secondary {
    border-color: var(--line) !important;
    color: var(--ink) !important;
    background: var(--theme-surface-2) !important;
}

html[data-theme="dark"] .button--ghost:hover,
html[data-theme="dark"] .button--secondary:hover {
    background: var(--theme-hover) !important;
}

html[data-theme="dark"] .filter-submit,
html[data-theme="dark"] .adjust-stock-button {
    border-color: var(--line) !important;
    color: var(--ink) !important;
    background: var(--theme-surface-2) !important;
}

html[data-theme="dark"] .filter-submit:hover,
html[data-theme="dark"] .adjust-stock-button:hover {
    border-color: #2a5a48 !important;
    color: #9fd9c0 !important;
    background: var(--theme-soft-green) !important;
}

html[data-theme="dark"] .edit-product,
html[data-theme="dark"] .status-toggle {
    color: #8fd4b8 !important;
}

html[data-theme="dark"] .edit-product:hover,
html[data-theme="dark"] .status-toggle:hover {
    background: var(--theme-hover) !important;
}

html[data-theme="dark"] .status-toggle {
    color: var(--theme-text-muted) !important;
}

html[data-theme="dark"] .period-tabs {
    border-color: var(--line) !important;
    background: var(--theme-surface-2) !important;
}

html[data-theme="dark"] .period-tab {
    color: var(--theme-text-muted);
    background: transparent;
}

html[data-theme="dark"] .period-tab:hover {
    color: var(--ink);
}

html[data-theme="dark"] .period-tab.is-active,
html[data-theme="dark"] .period-tab.is-selected,
html[data-theme="dark"] .period-tab[aria-selected="true"] {
    color: #9fd9c0 !important;
    background: var(--theme-surface) !important;
    border-color: #2a5a48;
    box-shadow: 0 1px 3px #00000040;
}

/* ── Tables ─────────────────────────────────────────────── */
html[data-theme="dark"] :is(
    table,
    .data-table,
    .orders-table,
    .products-table,
    .catalogue-table
) {
    color: var(--ink);
}

html[data-theme="dark"] :is(thead, .table-head, .orders-header, .panel-header, .catalogue-header) {
    border-color: var(--line);
}

html[data-theme="dark"] :is(
    th,
    .table-head th,
    .orders-table th,
    .catalogue-table th
) {
    color: var(--theme-text-muted) !important;
    border-color: var(--line) !important;
    background: var(--theme-table-head) !important;
}

html[data-theme="dark"] :is(
    td,
    .table-row,
    tr,
    .orders-table td,
    .catalogue-table td
) {
    border-color: var(--line) !important;
    color: var(--theme-text-muted);
}

html[data-theme="dark"] tbody tr:hover,
html[data-theme="dark"] .dashboard-invoice-row:hover,
html[data-theme="dark"] .product-row:hover,
html[data-theme="dark"] .notification-row:hover,
html[data-theme="dark"] .catalogue-table tbody tr:hover,
html[data-theme="dark"] .orders-table tbody tr:hover {
    background: var(--theme-hover) !important;
}

html[data-theme="dark"] .table-footer,
html[data-theme="dark"] .product-item,
html[data-theme="dark"] .panel-bottom-link,
html[data-theme="dark"] .stock-content,
html[data-theme="dark"] .orders-header,
html[data-theme="dark"] .catalogue-pagination,
html[data-theme="dark"] .movements-pagination,
html[data-theme="dark"] .catalogue-empty,
html[data-theme="dark"] .movement-empty,
html[data-theme="dark"] .customer-consent,
html[data-theme="dark"] .dialog-actions,
html[data-theme="dark"] .chart-footer {
    border-color: var(--line) !important;
}

html[data-theme="dark"] .table-footer strong,
html[data-theme="dark"] .catalogue-pagination strong {
    color: var(--theme-text-strong) !important;
}

html[data-theme="dark"] .order-id,
html[data-theme="dark"] .catalogue-sku {
    color: #6fbf9a !important;
}

html[data-theme="dark"] .customer-cell strong,
html[data-theme="dark"] .product-details strong,
html[data-theme="dark"] .product-sales strong {
    color: var(--theme-text-strong) !important;
}

html[data-theme="dark"] .customer-cell small,
html[data-theme="dark"] .product-details small,
html[data-theme="dark"] .product-sales small {
    color: var(--theme-text-muted) !important;
}

html[data-theme="dark"] .row-menu,
html[data-theme="dark"] .more-button {
    color: var(--theme-text-muted);
}

html[data-theme="dark"] .row-menu:hover,
html[data-theme="dark"] .more-button:hover {
    color: #9fd9c0;
}

/* Pagination — base CSS uses !important whites */
html[data-theme="dark"] .pagination button {
    border-color: var(--line) !important;
    color: var(--theme-text-muted) !important;
    background: var(--theme-surface) !important;
}

html[data-theme="dark"] .pagination button:disabled {
    color: #4a5c56 !important;
}

html[data-theme="dark"] .pagination button.page-current {
    border-color: #2a5a48 !important;
    color: #9fd9c0 !important;
    background: var(--theme-soft-green) !important;
}

html[data-theme="dark"] .catalogue-pagination nav span,
html[data-theme="dark"] .catalogue-pagination nav a {
    border-color: var(--line) !important;
    color: var(--theme-text-muted) !important;
    background: var(--theme-surface) !important;
}

html[data-theme="dark"] .catalogue-pagination nav [aria-current="page"] span {
    border-color: #2a5a48 !important;
    color: #9fd9c0 !important;
    background: var(--theme-soft-green) !important;
}

/* ── Forms / inputs ─────────────────────────────────────── */
html[data-theme="dark"] :is(
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    input[type="date"],
    input[type="tel"],
    input[type="url"],
    input[type="time"],
    input[type="datetime-local"],
    select,
    textarea,
    .form-field input,
    .form-field select,
    .form-field textarea,
    .pos-cart .form-field input[type="text"],
    .pos-cart .form-field input[type="number"],
    .pos-customer-field select,
    .pos-catalogue-toolbar select,
    .catalogue-filters select,
    .adjust-fields .form-field select,
    .customer-form .form-field select,
    .money-input,
    .login-form > input,
    .pos-discount-row input,
    .pos-cart-line-qty input
) {
    border-color: var(--theme-input-border) !important;
    color: var(--ink) !important;
    background: var(--theme-input-bg) !important;
    box-shadow: none;
}

html[data-theme="dark"] :is(input, select, textarea)::placeholder {
    color: #6f807a;
}

html[data-theme="dark"] :is(
    label,
    .form-field,
    .form-field > span,
    .form-section-header,
    .settings-preview-note,
    .login-form > label:not(.remember-row)
) {
    color: var(--theme-text-muted);
}

html[data-theme="dark"] .form-section-header h2,
html[data-theme="dark"] .form-section-header strong,
html[data-theme="dark"] .status-switch strong {
    color: var(--theme-text-strong) !important;
}

html[data-theme="dark"] .status-switch small {
    color: var(--theme-text-muted) !important;
}

html[data-theme="dark"] .field-error,
html[data-theme="dark"] .invoice-errors,
html[data-theme="dark"] .dialog-validation {
    color: var(--theme-danger-text) !important;
}

html[data-theme="dark"] .invoice-errors {
    border-color: var(--theme-danger-border) !important;
    background: var(--theme-danger-bg) !important;
}

html[data-theme="dark"] .money-input i {
    color: var(--theme-text-muted);
}

html[data-theme="dark"] .money-input input {
    background: transparent !important;
    border: 0 !important;
}

html[data-theme="dark"] .read-only-stock,
html[data-theme="dark"] .dialog-current-stock {
    border-color: var(--line) !important;
    color: #9fd9c0 !important;
    background: var(--theme-surface-2) !important;
}

html[data-theme="dark"] .read-only-stock small,
html[data-theme="dark"] .dialog-current-stock span,
html[data-theme="dark"] .dialog-current-stock small {
    color: var(--theme-text-muted) !important;
}

html[data-theme="dark"] .read-only-stock a {
    color: #8fd4b8 !important;
}

html[data-theme="dark"] .upload-zone {
    border-color: var(--theme-dashed) !important;
    color: var(--theme-text-muted) !important;
    background: var(--theme-surface-2) !important;
}

html[data-theme="dark"] .upload-zone:hover {
    border-color: #2a5a48 !important;
    background: var(--theme-hover) !important;
}

html[data-theme="dark"] .upload-icon {
    color: #6fbf9a !important;
    background: var(--theme-soft-green) !important;
}

html[data-theme="dark"] .image-item {
    border-color: var(--line) !important;
    background: var(--theme-thumb) !important;
}

html[data-theme="dark"] .main-image-option {
    color: var(--ink) !important;
    background: rgba(21, 32, 28, 0.92) !important;
}

html[data-theme="dark"] .image-reorder button {
    color: var(--ink) !important;
    background: rgba(26, 40, 35, 0.9) !important;
}

html[data-theme="dark"] .status-switch i {
    background: #3a4a44;
}

html[data-theme="dark"] .status-switch i::after {
    background: #e7efec;
}

html[data-theme="dark"] .status-switch input:checked + i {
    background: #2f7a62;
}

html[data-theme="dark"] .form-actions {
    background: rgba(12, 20, 18, 0.92) !important;
    border-top: 1px solid var(--line);
}

html[data-theme="dark"] .dialog-close {
    border-color: var(--line) !important;
    color: var(--theme-text-muted) !important;
    background: var(--theme-surface-2) !important;
}

html[data-theme="dark"] .stock-adjust-dialog::backdrop {
    background: var(--theme-overlay) !important;
}

/* ── Status pills / badges / chips ──────────────────────── */
html[data-theme="dark"] :is(
    .status,
    .product-status,
    .invoice-status,
    .category-pill,
    .settings-secure-badge,
    .result-count,
    .customer-type,
    .reason-pill,
    .pos-stock,
    .pos-pay-chip span
) {
    border-color: var(--line);
    background: var(--theme-chip) !important;
    color: var(--ink) !important;
}

html[data-theme="dark"] :is(
    .status--paid,
    .status--active,
    .product-status--active,
    .product-status--healthy,
    .invoice-status--paid
) {
    color: #9fd9c0 !important;
    background: var(--theme-soft-green) !important;
    border-color: #2a5a48;
}

html[data-theme="dark"] :is(
    .status--pending,
    .invoice-status--pending,
    .status--draft,
    .product-status--low,
    .customer-type--garage
) {
    color: #e4c07a !important;
    background: var(--theme-soft-amber) !important;
    border-color: #5a4a22;
}

html[data-theme="dark"] :is(
    .status--overdue,
    .status--cancelled,
    .invoice-status--overdue,
    .product-status--out,
    .product-status--inactive
) {
    color: #f0b4a4 !important;
    background: var(--theme-soft-red) !important;
    border-color: #5a342c;
}

html[data-theme="dark"] .pos-stock {
    color: #9fd9c0 !important;
    background: var(--theme-soft-green) !important;
}

html[data-theme="dark"] .pos-stock.is-low {
    color: #e4c07a !important;
    background: var(--theme-soft-amber) !important;
}

html[data-theme="dark"] .pos-stock.is-out {
    color: #f0b4a4 !important;
    background: var(--theme-soft-red) !important;
}

html[data-theme="dark"] .reason-pill--out {
    color: #f0b4a4 !important;
    background: var(--theme-soft-red) !important;
}

html[data-theme="dark"] .pos-pay-chip input:checked + span {
    border-color: #2a5a48 !important;
    background: var(--theme-soft-green) !important;
    color: #9fd9c0 !important;
}

html[data-theme="dark"] .settings-secure-badge {
    color: #9fd9c0 !important;
    background: var(--theme-soft-green) !important;
}

/* ── Flash / toast / alerts ─────────────────────────────── */
html[data-theme="dark"] .flash-message,
html[data-theme="dark"] .pos-flash {
    border-color: var(--theme-success-border) !important;
    background: var(--theme-success-bg) !important;
    color: var(--theme-success-text) !important;
}

html[data-theme="dark"] .flash-message a,
html[data-theme="dark"] .pos-flash a {
    color: #9fd9c0 !important;
}

html[data-theme="dark"] .toast {
    border-color: var(--line) !important;
    color: var(--ink) !important;
    background: var(--theme-elevated) !important;
    box-shadow: var(--theme-shadow-strong) !important;
}

html[data-theme="dark"] .stock-alert {
    border-color: var(--theme-warn-border) !important;
    background: var(--theme-warn-bg) !important;
}

html[data-theme="dark"] .stock-alert strong {
    color: var(--theme-warn-text) !important;
}

html[data-theme="dark"] .stock-alert small {
    color: #b09b75 !important;
}

html[data-theme="dark"] .alert-symbol {
    color: #e4a443 !important;
    background: var(--theme-soft-amber) !important;
}

/* ── Charts / stock ─────────────────────────────────────── */
html[data-theme="dark"] .chart-wrap,
html[data-theme="dark"] .sparkline,
html[data-theme="dark"] .donut-wrap {
    color: var(--ink);
}

html[data-theme="dark"] .chart-y-labels,
html[data-theme="dark"] .chart-x-labels,
html[data-theme="dark"] .legend-label,
html[data-theme="dark"] .top-product-copy small,
html[data-theme="dark"] .donut-center span,
html[data-theme="dark"] .chart-summary-change span,
html[data-theme="dark"] .chart-footer .chart-footer-note {
    color: var(--theme-text-muted) !important;
}

html[data-theme="dark"] .chart-gridline {
    stroke: var(--theme-chart-grid) !important;
}

html[data-theme="dark"] .chart-point {
    fill: var(--theme-surface) !important;
}

html[data-theme="dark"] .donut-track {
    stroke: var(--theme-surface-3) !important;
}

html[data-theme="dark"] .legend-dot--muted {
    background: #3a4a44 !important;
}

/* ── Catalogue / product list ───────────────────────────── */
html[data-theme="dark"] .catalogue-thumb,
html[data-theme="dark"] .catalogue-thumb--empty {
    border-color: var(--line) !important;
    background: var(--theme-thumb) !important;
    color: #8a9791 !important;
}

html[data-theme="dark"] .empty-box,
html[data-theme="dark"] .movement-empty-mark {
    color: #6fbf9a !important;
    background: var(--theme-soft-green) !important;
}

html[data-theme="dark"] .stock-count {
    color: #9fd9c0 !important;
}

html[data-theme="dark"] .stock-count small,
html[data-theme="dark"] .inventory-on-hand small,
html[data-theme="dark"] .inventory-minimum small {
    color: var(--theme-text-muted) !important;
}

html[data-theme="dark"] .stock-count--low,
html[data-theme="dark"] .inventory-on-hand--low {
    color: #e4c07a !important;
}

html[data-theme="dark"] .stock-count--out,
html[data-theme="dark"] .inventory-on-hand--out {
    color: #f0b4a4 !important;
}

html[data-theme="dark"] .inventory-on-hand {
    color: #9fd9c0 !important;
}

html[data-theme="dark"] .inventory-minimum,
html[data-theme="dark"] .movement-reference,
html[data-theme="dark"] .movement-user,
html[data-theme="dark"] .movement-time {
    color: var(--theme-text-muted) !important;
}

html[data-theme="dark"] .movement-quantity--in {
    color: #9fd9c0 !important;
}

html[data-theme="dark"] .movement-quantity--out {
    color: #f0b4a4 !important;
}

/* Avatars */
html[data-theme="dark"] .avatar--orange {
    color: #e4b48a !important;
    background: #3a2e1c !important;
}

html[data-theme="dark"] .avatar--blue {
    color: #7eb0d8 !important;
    background: #1a2a36 !important;
}

html[data-theme="dark"] .avatar--purple {
    color: #b5a4e0 !important;
    background: #2a2438 !important;
}

html[data-theme="dark"] .avatar--green,
html[data-theme="dark"] .customer-avatar {
    color: #6fbf9a !important;
    background: var(--theme-soft-green) !important;
}

html[data-theme="dark"] .customer-avatar--garage {
    color: #e4c07a !important;
    background: var(--theme-soft-amber) !important;
}

html[data-theme="dark"] .product-art--brake {
    color: #e08a78 !important;
    background: var(--theme-soft-red) !important;
}

html[data-theme="dark"] .product-art--filter {
    color: #7eb0d8 !important;
    background: var(--theme-soft-blue) !important;
}

html[data-theme="dark"] .product-art--plug {
    color: #e4c07a !important;
    background: var(--theme-soft-amber) !important;
}

/* ── POS ────────────────────────────────────────────────── */
html[data-theme="dark"] .pos-cart-lines,
html[data-theme="dark"] .pos-line,
html[data-theme="dark"] .pos-totals,
html[data-theme="dark"] .pos-catalogue-toolbar,
html[data-theme="dark"] .pos-total-row--grand {
    border-color: var(--line) !important;
}

html[data-theme="dark"] .pos-product-card {
    border-color: var(--line) !important;
    background: var(--theme-surface-2) !important;
    color: var(--ink);
}

html[data-theme="dark"] .pos-product-card:hover:not(:disabled) {
    border-color: #2a5a48 !important;
    box-shadow: 0 8px 18px #00000040 !important;
}

html[data-theme="dark"] .pos-product-card.is-in-cart {
    border-color: #2f6b57 !important;
    background: var(--theme-soft-green) !important;
}

html[data-theme="dark"] .pos-product-price {
    color: #9fd9c0 !important;
}

html[data-theme="dark"] .pos-product-price em {
    color: var(--theme-text-muted) !important;
}

html[data-theme="dark"] .pos-cart-line {
    border-color: var(--line) !important;
    background: var(--theme-surface-2) !important;
}

html[data-theme="dark"] .pos-cart-line-info small {
    color: var(--theme-text-muted) !important;
}

html[data-theme="dark"] .pos-cart-line-qty button {
    border-color: var(--line) !important;
    background: var(--theme-surface-3) !important;
    color: var(--ink) !important;
}

html[data-theme="dark"] .pos-remove {
    background: var(--theme-soft-red) !important;
    color: #f0b4a4 !important;
}

html[data-theme="dark"] .pos-total-row {
    color: var(--theme-text-muted) !important;
}

html[data-theme="dark"] .pos-total-row--grand span,
html[data-theme="dark"] .pos-total-row--grand strong,
html[data-theme="dark"] .pos-change {
    color: #9fd9c0 !important;
}

html[data-theme="dark"] .pos-cart-empty {
    border-color: var(--theme-dashed) !important;
    background: var(--theme-surface-2) !important;
    color: var(--theme-text-muted) !important;
}

html[data-theme="dark"] .pos-line:hover,
html[data-theme="dark"] .pos-product:hover {
    background: var(--theme-hover);
}

html[data-theme="dark"] .pos-cart .form-field > span {
    color: var(--theme-text-muted);
}

/* ── Login ──────────────────────────────────────────────── */
html[data-theme="dark"] body.login-page {
    background:
        radial-gradient(ellipse at top, #1a3028 0%, transparent 55%),
        var(--canvas) !important;
}

html[data-theme="dark"] .login-card {
    border-color: var(--line) !important;
    background: var(--theme-surface) !important;
    box-shadow: var(--theme-shadow-strong) !important;
}

html[data-theme="dark"] .login-brand {
    color: #eef5f2 !important;
}

html[data-theme="dark"] .login-brand .brand-copy strong {
    color: #fff;
}

html[data-theme="dark"] .login-brand .brand-copy small {
    color: #9aada7;
}

html[data-theme="dark"] .login-eyebrow {
    color: var(--soft-muted);
}

html[data-theme="dark"] .remember-row {
    color: var(--theme-text-muted);
}

html[data-theme="dark"] .login-foot {
    border-top-color: var(--line) !important;
}

/* ── Links / footer ─────────────────────────────────────── */
html[data-theme="dark"] .page-footer a,
html[data-theme="dark"] .text-link,
html[data-theme="dark"] .panel-bottom-link {
    color: #8fd4b8 !important;
}

html[data-theme="dark"] .empty-search,
html[data-theme="dark"] .catalogue-empty p,
html[data-theme="dark"] .product-tip p,
html[data-theme="dark"] .invoice-tip p {
    color: var(--theme-text-muted) !important;
}

html[data-theme="dark"] .nav-divider {
    background: #1c2e29;
}

html[data-theme="dark"] .help-card {
    border-color: #ffffff14 !important;
    background: #ffffff08 !important;
}

/* ── Theme toggle control ───────────────────────────────── */
.theme-toggle {
    position: relative;
    display: grid;
    width: 35px;
    height: 35px;
    flex: 0 0 auto;
    place-items: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.theme-toggle:hover {
    background: #f1f5f3;
}

.theme-toggle:focus-visible {
    outline: 2px solid #246c5b;
    outline-offset: 2px;
}

.theme-toggle svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: #667672;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.6;
}

.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
    display: none;
}

html[data-theme="light"] .theme-toggle .icon-moon,
html:not([data-theme]) .theme-toggle .icon-moon {
    display: block;
}

html[data-theme="dark"] .theme-toggle .icon-sun {
    display: block;
}

html[data-theme="dark"] .theme-toggle {
    border-color: transparent;
}

html[data-theme="dark"] .theme-toggle:hover {
    background: var(--theme-hover);
}

html[data-theme="dark"] .theme-toggle svg {
    stroke: #a7b6b0;
}

/* Floating toggle on login */
.theme-toggle--floating {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 30;
    width: 42px;
    height: 42px;
    border: 1px solid var(--line, #e9efec);
    border-radius: 12px;
    background: var(--theme-surface, #fff);
    box-shadow: var(--theme-shadow-strong, 0 10px 32px #18382d1a);
}

html[data-theme="dark"] .theme-toggle--floating {
    border-color: var(--line);
    background: var(--theme-surface);
}

/* Settings appearance card */
.theme-preference-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 14px;
    padding: 14px 16px;
    border: 1px solid var(--line, #e9efec);
    border-radius: 10px;
    background: var(--theme-surface-2, #f9fbfa);
}

.theme-preference-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.theme-preference-copy strong {
    color: var(--theme-text-strong, #2d403a);
    font-size: 13px;
}

.theme-preference-copy span {
    color: var(--theme-text-muted, #81908d);
    font-size: 12px;
}

.theme-preference-actions {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
}

.theme-chip {
    min-width: 76px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid var(--line, #e9efec);
    border-radius: 8px;
    color: var(--ink, #1b2927);
    background: var(--theme-surface, #fff);
    font: 600 12px "DM Sans", sans-serif;
    cursor: pointer;
}

.theme-chip.is-active {
    border-color: #2f6b57;
    color: #1f6b4f;
    background: #e7f4ef;
}

html[data-theme="dark"] .theme-preference-card {
    border-color: var(--line);
    background: var(--theme-surface-2);
}

html[data-theme="dark"] .theme-chip {
    border-color: var(--line);
    color: var(--ink);
    background: var(--theme-input-bg);
}

html[data-theme="dark"] .theme-chip.is-active {
    border-color: #2a5a48;
    color: #9fd9c0;
    background: #1a332c;
}

/* ── Hardcoded white / light gray catch-alls ────────────── */
html[data-theme="dark"] .page-content hr {
    border-color: var(--line);
}

/* Nested light strips, toolbars, filter rows */
html[data-theme="dark"] .page-content :is(
    .catalogue-filters,
    .orders-tools,
    .welcome-actions,
    .products-heading,
    .settings-heading,
    .filter-row,
    .toolbar,
    .list-toolbar
) {
    color: var(--ink);
}

/* Any leftover pure-white boxes commonly used as cards */
html[data-theme="dark"] .page-content [style*="background: white"],
html[data-theme="dark"] .page-content [style*="background:white"],
html[data-theme="dark"] .page-content [style*="background: #fff"],
html[data-theme="dark"] .page-content [style*="background:#fff"],
html[data-theme="dark"] .page-content [style*="background: #ffffff"],
html[data-theme="dark"] .page-content [style*="background:#ffffff"],
html[data-theme="dark"] .page-content [style*="background-color: white"],
html[data-theme="dark"] .page-content [style*="background-color:#fff"] {
    background: var(--theme-surface) !important;
    color: var(--ink) !important;
}

/* Scrollbars in dark mode */
html[data-theme="dark"] {
    scrollbar-color: #3a4a44 #15201c;
}

html[data-theme="dark"] ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

html[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #121c19;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #3a4a44;
    border-radius: 999px;
    border: 2px solid #121c19;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #4a5c56;
}

/* Selection */
html[data-theme="dark"] ::selection {
    background: #2a5a48;
    color: #eef5f2;
}

/* Focus rings stay visible on dark */
html[data-theme="dark"] :focus-visible {
    outline-color: #3f9d7f;
}

/* Reduce harsh pure whites left in nested UI */
html[data-theme="dark"] .page-content :is(.panel, .metric-card, .product-metric, .form-panel) {
    background: var(--theme-surface);
}

/* Ensure sticky form bars and dialogs never flash white */
html[data-theme="dark"] .form-actions .button--secondary {
    background: var(--theme-surface-2) !important;
}

/* Invoice / document detail common blocks */
html[data-theme="dark"] :is(
    .invoice-lines,
    .document-lines,
    .quote-lines,
    .delivery-lines,
    .line-items,
    .totals-box,
    .meta-box,
    .detail-grid > div,
    .info-grid > div,
    .settings-preview,
    .preview-card
) {
    border-color: var(--line) !important;
    background: var(--theme-surface-2) !important;
    color: var(--ink);
}

/* Notification rows */
html[data-theme="dark"] .notification-row,
html[data-theme="dark"] .notification-item {
    border-color: var(--line) !important;
    background: var(--theme-surface) !important;
}

html[data-theme="dark"] .notification-row:hover,
html[data-theme="dark"] .notification-item:hover {
    background: var(--theme-hover) !important;
}

html[data-theme="dark"] .notification-row.is-unread,
html[data-theme="dark"] .notification-item.is-unread {
    background: var(--theme-soft-green) !important;
}

/* Code / kbd / mono chips */
html[data-theme="dark"] kbd,
html[data-theme="dark"] code {
    border-color: var(--line);
    background: var(--theme-kbd-bg);
    color: var(--ink);
}

/* ── Dark mode hard fix: force shell + common light surfaces ── */
html.theme-dark,
html[data-theme="dark"] {
    color-scheme: dark !important;
}

html.theme-dark body,
html[data-theme="dark"] body,
html.theme-dark .app-shell,
html[data-theme="dark"] .app-shell,
html.theme-dark .main-area,
html[data-theme="dark"] .main-area {
    background: var(--canvas) !important;
    color: var(--ink) !important;
}

html.theme-dark .topbar,
html[data-theme="dark"] .topbar {
    background: var(--theme-topbar) !important;
    border-bottom-color: var(--line) !important;
}

html.theme-dark .page-content,
html[data-theme="dark"] .page-content {
    color: var(--ink) !important;
}

html.theme-dark .page-content h1,
html[data-theme="dark"] .page-content h1,
html.theme-dark .page-content h2,
html[data-theme="dark"] .page-content h2,
html.theme-dark .breadcrumb strong,
html[data-theme="dark"] .breadcrumb strong,
html.theme-dark .profile-copy strong,
html[data-theme="dark"] .profile-copy strong {
    color: var(--theme-text-strong) !important;
}

html.theme-dark .welcome-subtitle,
html[data-theme="dark"] .welcome-subtitle,
html.theme-dark .breadcrumb,
html[data-theme="dark"] .breadcrumb,
html.theme-dark .profile-copy small,
html[data-theme="dark"] .profile-copy small,
html.theme-dark .eyebrow,
html[data-theme="dark"] .eyebrow,
html.theme-dark .panel-kicker,
html[data-theme="dark"] .panel-kicker,
html.theme-dark .metric-label,
html[data-theme="dark"] .metric-label {
    color: var(--theme-text-muted) !important;
}

html.theme-dark :is(
    .metric-card,
    .panel,
    .product-metric,
    .form-panel,
    .settings-panel,
    .catalogue-panel,
    .pos-catalogue,
    .pos-cart,
    .report-card,
    .garage-card,
    .invoice-card,
    .notice-card,
    .empty-state,
    .login-card,
    .data-card,
    .summary-card,
    .stat-tile,
    .movements-panel,
    .orders-panel,
    .top-products,
    .filter-bar,
    .toolbar-card,
    .stock-adjust-dialog,
    .modal-card,
    .dialog-card,
    .settings-preview,
    .preview-card,
    .notification-card,
    .detail-card,
    .info-card,
    .content-card,
    .user-card,
    .warehouse-card,
    .supplier-card,
    .quote-card,
    .delivery-card,
    .payment-card
),
html[data-theme="dark"] :is(
    .metric-card,
    .panel,
    .product-metric,
    .form-panel,
    .settings-panel,
    .catalogue-panel,
    .pos-catalogue,
    .pos-cart,
    .report-card,
    .garage-card,
    .invoice-card,
    .notice-card,
    .empty-state,
    .login-card,
    .data-card,
    .summary-card,
    .stat-tile,
    .movements-panel,
    .orders-panel,
    .top-products,
    .filter-bar,
    .toolbar-card,
    .stock-adjust-dialog,
    .modal-card,
    .dialog-card,
    .settings-preview,
    .preview-card,
    .notification-card,
    .detail-card,
    .info-card,
    .content-card,
    .user-card,
    .warehouse-card,
    .supplier-card,
    .quote-card,
    .delivery-card,
    .payment-card
) {
    background: var(--theme-surface) !important;
    border-color: var(--line) !important;
    color: var(--ink) !important;
    box-shadow: var(--theme-shadow) !important;
}

html.theme-dark :is(
    .button--secondary,
    .button--ghost,
    .logout-button,
    .filter-submit,
    .adjust-stock-button,
    .pagination button,
    .theme-chip,
    .pos-cart-line,
    .pos-product-card,
    .pos-cart-empty,
    .catalogue-search,
    .pos-search,
    .search-box,
    .table-search
),
html[data-theme="dark"] :is(
    .button--secondary,
    .button--ghost,
    .logout-button,
    .filter-submit,
    .adjust-stock-button,
    .pagination button,
    .theme-chip,
    .pos-cart-line,
    .pos-product-card,
    .pos-cart-empty,
    .catalogue-search,
    .pos-search,
    .search-box,
    .table-search
) {
    background: var(--theme-surface-2) !important;
    border-color: var(--line) !important;
    color: var(--ink) !important;
}

html.theme-dark :is(
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    input[type="date"],
    input[type="tel"],
    select,
    textarea
),
html[data-theme="dark"] :is(
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    input[type="date"],
    input[type="tel"],
    select,
    textarea
) {
    background: var(--theme-input-bg) !important;
    border-color: var(--theme-input-border) !important;
    color: var(--ink) !important;
}

html.theme-dark :is(th, .table-head th, .orders-table th, .catalogue-table th),
html[data-theme="dark"] :is(th, .table-head th, .orders-table th, .catalogue-table th) {
    background: var(--theme-table-head) !important;
    color: var(--theme-text-muted) !important;
    border-color: var(--line) !important;
}

html.theme-dark :is(td, .orders-table td, .catalogue-table td),
html[data-theme="dark"] :is(td, .orders-table td, .catalogue-table td) {
    border-color: var(--line) !important;
    color: var(--theme-text-muted) !important;
}

html.theme-dark .icon-button:hover,
html[data-theme="dark"] .icon-button:hover,
html.theme-dark .theme-toggle:hover,
html[data-theme="dark"] .theme-toggle:hover {
    background: var(--theme-hover) !important;
}

html.theme-dark .metric-value,
html[data-theme="dark"] .metric-value,
html.theme-dark .product-metric strong,
html[data-theme="dark"] .product-metric strong,
html.theme-dark .amount,
html[data-theme="dark"] .amount {
    color: var(--theme-text-strong) !important;
}

html.theme-dark .page-footer,
html[data-theme="dark"] .page-footer {
    color: var(--theme-text-muted) !important;
    border-color: var(--line) !important;
}

html.theme-dark .toast,
html[data-theme="dark"] .toast {
    background: var(--theme-elevated) !important;
    color: var(--ink) !important;
    border-color: var(--line) !important;
}