html.theme-ready body,
html.theme-ready .sidebar,
html.theme-ready .main-topbar,
html.theme-ready .topbar,
html.theme-ready .panel,
html.theme-ready .kpi-card,
html.theme-ready .focus-card,
html.theme-ready .kpi,
html.theme-ready .helper-card,
html.theme-ready .empty-state-card,
html.theme-ready .soft-info-card,
html.theme-ready .status-banner,
html.theme-ready .user-card,
html.theme-ready .nav-group,
html.theme-ready .nav-item,
html.theme-ready .nav-icon,
html.theme-ready .logo-mark,
html.theme-ready .command-dialog,
html.theme-ready .command-btn,
html.theme-ready .command-input,
html.theme-ready .form-dark,
html.theme-ready .date-input,
html.theme-ready .form-control-dark,
html.theme-ready .login-card,
html.theme-ready .card,
html.theme-ready .box,
html.theme-ready .left-panel,
html.theme-ready .right-panel,
html.theme-ready .btn,
html.theme-ready .btn-primary,
html.theme-ready .btn-outline,
html.theme-ready .btn-income,
html.theme-ready .btn-expense,
html.theme-ready .btn-primary-custom,
html.theme-ready .surface-button,
html.theme-ready .surface-chip,
html.theme-ready .lang-pill,
html.theme-ready .theme-pill,
html.theme-ready .logout-btn,
html.theme-ready .trial-badge,
html.theme-ready .focus-list-item,
html.theme-ready .dt td,
html.theme-ready .dt th,
html.theme-ready .info-row,
html.theme-ready .order-row,
html.theme-ready .pl-row,
html.theme-ready .kassa-row,
html.theme-ready a,
html.theme-ready span,
html.theme-ready div,
html.theme-ready h1,
html.theme-ready h2,
html.theme-ready h3,
html.theme-ready h4,
html.theme-ready h5,
html.theme-ready p,
html.theme-ready label,
html.theme-ready input,
html.theme-ready select,
html.theme-ready button {
    transition:
        background-color .28s ease,
        background .28s ease,
        color .22s ease,
        border-color .22s ease,
        box-shadow .28s ease,
        fill .22s ease,
        stroke .22s ease;
}

html[data-theme="light"] {
    --bg: #eef3f9 !important;
    --surface: rgba(251, 253, 255, 0.96) !important;
    --panel: rgba(255, 255, 255, 0.94) !important;
    --card: rgba(255, 255, 255, 0.98) !important;
    --border: rgba(148, 163, 184, 0.22) !important;
    --border-active: rgba(82, 121, 179, 0.24) !important;
    --text: #142033 !important;
    --muted: #607089 !important;
    --dim: #8190a6 !important;
    --primary: #5279b3 !important;
    --primary-glow: rgba(82, 121, 179, 0.12) !important;
    --green: #3f9775 !important;
    --green-dim: rgba(63, 151, 117, 0.12) !important;
    --red: #c76c7b !important;
    --red-dim: rgba(199, 108, 123, 0.12) !important;
    --yellow: #bf9859 !important;
    /* Alias overrides */
    --line: rgba(148, 163, 184, 0.22) !important;
    --success: #3f9775 !important;
    --warning: #bf9859 !important;
    --danger: #c76c7b !important;
    --card-hover: rgba(245, 248, 252, 0.98) !important;
    --yellow-dim: rgba(191, 152, 89, 0.1) !important;
    --blue: #4a7fb5 !important;
    --blue-dim: rgba(74, 127, 181, 0.1) !important;
}

html[data-theme="light"] body {
    background:
        radial-gradient(circle at top left, rgba(82, 121, 179, 0.07), transparent 22rem),
        radial-gradient(circle at top right, rgba(191, 152, 89, 0.08), transparent 18rem),
        #eef3f9 !important;
    color: var(--text) !important;
}

html[data-theme="dark"] body {
    background:
        radial-gradient(circle at top left, rgba(90, 127, 183, 0.08), transparent 26rem),
        radial-gradient(circle at top right, rgba(213, 109, 130, 0.06), transparent 20rem),
        #09111d !important;
}

html[data-theme="light"] .sidebar,
html[data-theme="light"] .main-topbar,
html[data-theme="light"] .topbar,
html[data-theme="light"] .trial-bar,
html[data-theme="light"] .panel,
html[data-theme="light"] .kpi-card,
html[data-theme="light"] .focus-card,
html[data-theme="light"] .kpi,
html[data-theme="light"] .login-card,
html[data-theme="light"] .card,
html[data-theme="light"] .box,
html[data-theme="light"] .command-dialog,
html[data-theme="light"] .container.auth-surface,
html[data-theme="light"] .left-panel,
html[data-theme="light"] .right-panel {
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
}

html[data-theme="light"] .sidebar {
    background: rgba(248, 250, 253, 0.94) !important;
    border-right-color: rgba(148, 163, 184, 0.18) !important;
    backdrop-filter: blur(18px);
}

html[data-theme="light"] .main-topbar,
html[data-theme="light"] .topbar {
    background: rgba(251, 253, 255, 0.9) !important;
    border-bottom-color: rgba(148, 163, 184, 0.18) !important;
    backdrop-filter: blur(12px);
}

html[data-theme="light"] .panel,
html[data-theme="light"] .kpi-card,
html[data-theme="light"] .focus-card,
html[data-theme="light"] .kpi,
html[data-theme="light"] .trial-bar,
html[data-theme="light"] .helper-card,
html[data-theme="light"] .empty-state-card,
html[data-theme="light"] .soft-info-card,
html[data-theme="light"] .status-banner,
html[data-theme="light"] .user-card,
html[data-theme="light"] .nav-group,
html[data-theme="light"] .command-dialog,
html[data-theme="light"] .mini-stat,
html[data-theme="light"] .soft-panel,
html[data-theme="light"] .customer-card,
html[data-theme="light"] .product-card,
html[data-theme="light"] .view-toggle,
html[data-theme="light"] .search-box,
html[data-theme="light"] .modal-helper,
html[data-theme="light"] .total-box,
html[data-theme="light"] .advanced-box,
html[data-theme="light"] .panel-shell,
html[data-theme="light"] .card-dark,
html[data-theme="light"] .invoice-card,
html[data-theme="light"] .z-report-card {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(148, 163, 184, 0.16) !important;
}

html[data-theme="light"] .command-backdrop,
html[data-theme="light"] .sidebar-overlay {
    background: rgba(15, 23, 42, 0.22) !important;
}

html[data-theme="light"] .nav-item,
html[data-theme="light"] .page-subtitle,
html[data-theme="light"] .topbar-meta,
html[data-theme="light"] .section-subtitle,
html[data-theme="light"] .compact-meta,
html[data-theme="light"] .logo-sub,
html[data-theme="light"] .user-role,
html[data-theme="light"] .nav-label,
html[data-theme="light"] .kpi-l,
html[data-theme="light"] .kpi-s,
html[data-theme="light"] .focus-sub,
html[data-theme="light"] .back-link,
html[data-theme="light"] .mini-stat-label,
html[data-theme="light"] .product-stock,
html[data-theme="light"] .command-item-subtitle,
html[data-theme="light"] .empty-state-subtitle,
html[data-theme="light"] .command-empty,
html[data-theme="light"] .form-label,
html[data-theme="light"] .helper-card,
html[data-theme="light"] .helper-card span,
html[data-theme="light"] .modal-helper,
html[data-theme="light"] .modal-helper span {
    color: var(--muted) !important;
}

html[data-theme="light"] .page-title,
html[data-theme="light"] .section-title,
html[data-theme="light"] .panel-title,
html[data-theme="light"] .compact-title,
html[data-theme="light"] .compact-title.strong,
html[data-theme="light"] .compact-title.xstrong,
html[data-theme="light"] .product-name,
html[data-theme="light"] .customer-card .compact-title,
html[data-theme="light"] .mini-stat-value,
html[data-theme="light"] .kpi-v,
html[data-theme="light"] .info-value,
html[data-theme="light"] .order-table td,
html[data-theme="light"] .products-table td,
html[data-theme="light"] .products-table th,
html[data-theme="light"] .order-table th {
    color: var(--text) !important;
}

html[data-theme="light"] .nav-item:hover,
html[data-theme="light"] .command-btn:hover,
html[data-theme="light"] .command-item:hover {
    background: rgba(82, 121, 179, 0.06) !important;
}

html[data-theme="light"] .nav-item.active,
html[data-theme="light"] .lang-pill.lang-active,
html[data-theme="light"] .theme-pill.theme-active {
    background: rgba(82, 121, 179, 0.12) !important;
    color: #355a8d !important;
    border-color: rgba(82, 121, 179, 0.22) !important;
}

html[data-theme="light"] .nav-icon,
html[data-theme="light"] .focus-list-item,
html[data-theme="light"] .command-btn,
html[data-theme="light"] .command-input,
html[data-theme="light"] .form-dark,
html[data-theme="light"] .date-input,
html[data-theme="light"] .form-control-dark,
html[data-theme="light"] .login-card .form-control,
html[data-theme="light"] .form-group input,
html[data-theme="light"] .form-group select,
html[data-theme="light"] .search-box input,
html[data-theme="light"] .search-box,
html[data-theme="light"] .view-toggle {
    background: rgba(245, 247, 251, 0.96) !important;
    color: var(--text) !important;
    border-color: rgba(148, 163, 184, 0.22) !important;
}

html[data-theme="light"] .btn-outline,
html[data-theme="light"] .surface-button,
html[data-theme="light"] .lang-pill,
html[data-theme="light"] .theme-pill,
html[data-theme="light"] .filter-btn,
html[data-theme="light"] .view-btn,
html[data-theme="light"] .cat-tab,
html[data-theme="light"] .action-btn {
    background: rgba(255, 255, 255, 0.75) !important;
    color: var(--muted) !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
}

html[data-theme="light"] .filter-btn.active,
html[data-theme="light"] .filter-btn:hover,
html[data-theme="light"] .view-btn.active,
html[data-theme="light"] .cat-tab.active,
html[data-theme="light"] .cat-tab:hover {
    background: rgba(82, 121, 179, 0.1) !important;
    color: #355a8d !important;
    border-color: rgba(82, 121, 179, 0.18) !important;
}

html[data-theme="light"] .badge-soft,
html[data-theme="light"] .variant-chip,
html[data-theme="light"] .roll-badge,
html[data-theme="light"] .meter-badge {
    border-color: rgba(148, 163, 184, 0.18) !important;
}

html[data-theme="light"] .btn-primary,
html[data-theme="light"] .btn-primary-custom,
html[data-theme="light"] .surface-button.primary,
html[data-theme="light"] .surface-chip.primary {
    background: var(--primary) !important;
    color: #ffffff !important;
    border-color: transparent !important;
}

html[data-theme="light"] .btn-view,
html[data-theme="light"] .surface-button.soft-info,
html[data-theme="light"] .surface-chip.cyan {
    background: rgba(82, 121, 179, 0.1) !important;
    color: #355a8d !important;
    border-color: rgba(82, 121, 179, 0.16) !important;
}

html[data-theme="light"] .badge-info,
html[data-theme="light"] .b-blue,
html[data-theme="light"] .btn-view,
html[data-theme="light"] .roll-badge {
    background: rgba(82, 121, 179, 0.1) !important;
    color: #355a8d !important;
}

html[data-theme="light"] .logout-btn,
html[data-theme="light"] .surface-button.danger,
html[data-theme="light"] .surface-chip.danger,
html[data-theme="light"] .btn-delete,
html[data-theme="light"] .btn-del,
html[data-theme="light"] .remove-item,
html[data-theme="light"] .badge-danger,
html[data-theme="light"] .b-red {
    background: rgba(199, 108, 123, 0.1) !important;
    color: #ab5061 !important;
    border-color: rgba(199, 108, 123, 0.18) !important;
}

html[data-theme="light"] .alert-success,
html[data-theme="light"] .status-banner.success,
html[data-theme="light"] .surface-button.success,
html[data-theme="light"] .surface-chip.success,
html[data-theme="light"] .badge-success,
html[data-theme="light"] .b-green,
html[data-theme="light"] .btn-pay {
    background: rgba(63, 151, 117, 0.1) !important;
    color: #2c7f60 !important;
    border-color: rgba(63, 151, 117, 0.18) !important;
}

html[data-theme="light"] .alert-error,
html[data-theme="light"] .status-banner.danger {
    background: rgba(199, 108, 123, 0.1) !important;
    color: #ab5061 !important;
    border-color: rgba(199, 108, 123, 0.18) !important;
}

html[data-theme="light"] .surface-button.warning,
html[data-theme="light"] .surface-chip.warning,
html[data-theme="light"] .b-yel,
html[data-theme="light"] .trial-badge,
html[data-theme="light"] .btn-limit,
html[data-theme="light"] .badge-warning {
    background: rgba(191, 152, 89, 0.1) !important;
    color: #9b7440 !important;
    border-color: rgba(191, 152, 89, 0.18) !important;
}

html[data-theme="light"] .dt th,
html[data-theme="light"] .dt td,
html[data-theme="light"] .info-row,
html[data-theme="light"] .order-row,
html[data-theme="light"] .pl-row,
html[data-theme="light"] .kassa-row {
    border-color: rgba(148, 163, 184, 0.14) !important;
}

html[data-theme="light"] .dt tr:hover td {
    background: rgba(82, 121, 179, 0.04) !important;
}

html[data-theme="light"] .order-table tr:hover,
html[data-theme="light"] .products-table tr:hover,
html[data-theme="light"] .customer-card:hover,
html[data-theme="light"] .product-card:hover {
    background: rgba(82, 121, 179, 0.03) !important;
}

html[data-theme="light"] .modal-dark .modal-content {
    background: rgba(255, 255, 255, 0.96) !important;
    border-color: rgba(148, 163, 184, 0.18) !important;
    color: var(--text) !important;
}

html[data-theme="light"] .modal-dark .modal-header,
html[data-theme="light"] .modal-dark .modal-footer {
    border-color: rgba(148, 163, 184, 0.16) !important;
}

html[data-theme="light"] .product-image {
    background: rgba(245, 247, 251, 0.96) !important;
    color: #8aa1bf !important;
}

html[data-theme="light"] .command-input::placeholder,
html[data-theme="light"] .search-box input::placeholder,
html[data-theme="light"] .form-dark::placeholder,
html[data-theme="light"] .form-control-dark::placeholder {
    color: #8ca0b8 !important;
}

html[data-theme="light"] .customer-card.has-debt {
    border-color: rgba(199, 108, 123, 0.24) !important;
}

html[data-theme="light"] .debt-bar {
    background: rgba(148, 163, 184, 0.16) !important;
}

html[data-theme="light"] .debt-bar-fill {
    background: linear-gradient(90deg, #c76c7b, #bf9859) !important;
}

html[data-theme="light"] .product-price,
html[data-theme="light"] .tone-success {
    color: #2c7f60 !important;
}

html[data-theme="light"] .stock-out,
html[data-theme="light"] .tone-danger {
    color: #ab5061 !important;
}

html[data-theme="light"] .stock-low,
html[data-theme="light"] .tone-warning {
    color: #9b7440 !important;
}

html[data-theme="light"] .main-wrap {
    background:
        radial-gradient(circle at top left, rgba(82, 121, 179, 0.05), transparent 22rem),
        #eef3f9 !important;
}

html[data-theme="light"] .login-card,
html[data-theme="light"] .card,
html[data-theme="light"] .box,
html[data-theme="light"] .container.auth-surface {
    background: rgba(255, 255, 255, 0.94) !important;
    border: 1px solid rgba(148, 163, 184, 0.18) !important;
    color: var(--text) !important;
}

html[data-theme="light"] .logo,
html[data-theme="light"] .logo span {
    color: var(--primary) !important;
}

html[data-theme="light"] .logo-sub,
html[data-theme="light"] .register-link,
html[data-theme="light"] .login-link,
html[data-theme="light"] .tagline,
html[data-theme="light"] .right-panel p,
html[data-theme="light"] .form-group label,
html[data-theme="light"] .step {
    color: var(--muted) !important;
}

html[data-theme="light"] .step.active,
html[data-theme="light"] .step.active .step-num {
    color: #355a8d !important;
    border-color: rgba(82, 121, 179, 0.22) !important;
    background: rgba(82, 121, 179, 0.12) !important;
}

html[data-theme="light"] .step.done,
html[data-theme="light"] .step.done .step-num {
    color: #2c7f60 !important;
    border-color: rgba(63, 151, 117, 0.18) !important;
    background: rgba(63, 151, 117, 0.1) !important;
}

html[data-theme="light"] .left-panel {
    background: linear-gradient(135deg, rgba(82, 121, 179, 0.12), rgba(63, 151, 117, 0.08)) !important;
}

/* ── POS Cashier light theme ── */
html[data-theme="light"] .pos-panel,
html[data-theme="light"] .right-col,
html[data-theme="light"] .cart-wrap,
html[data-theme="light"] .kassa-row,
html[data-theme="light"] .product-card,
html[data-theme="light"] .cat-tab {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(148, 163, 184, 0.18) !important;
}

html[data-theme="light"] .cat-tab.active {
    background: rgba(82, 121, 179, 0.12) !important;
    color: #355a8d !important;
    border-color: rgba(82, 121, 179, 0.2) !important;
}

html[data-theme="light"] .search-bar input,
html[data-theme="light"] .form-dark,
html[data-theme="light"] .form-control-dark,
html[data-theme="light"] input[class*="dark"],
html[data-theme="light"] select[class*="dark"] {
    background: rgba(245, 247, 251, 0.96) !important;
    color: var(--text) !important;
    border-color: rgba(148, 163, 184, 0.22) !important;
}

/* ── Dashboard-specific light theme ── */
html[data-theme="light"] .qa-card {
    background: rgba(255, 255, 255, 0.88) !important;
    border-color: rgba(148, 163, 184, 0.18) !important;
    color: var(--muted) !important;
}

html[data-theme="light"] .qa-card:hover {
    background: rgba(82, 121, 179, 0.08) !important;
    border-color: rgba(82, 121, 179, 0.2) !important;
    color: var(--primary) !important;
}

html[data-theme="light"] .debt-amount {
    color: #ab5061 !important;
}

html[data-theme="light"] .kpi-c-blue .kpi-value  { color: var(--primary) !important; }
html[data-theme="light"] .kpi-c-green .kpi-value { color: var(--green) !important; }
html[data-theme="light"] .kpi-c-red .kpi-value   { color: var(--red) !important; }
html[data-theme="light"] .kpi-c-amber .kpi-value { color: var(--yellow) !important; }

html[data-theme="light"] .kpi-c-blue .kpi-icon {
    background: rgba(82, 121, 179, 0.1) !important;
}
html[data-theme="light"] .kpi-c-green .kpi-icon {
    background: rgba(63, 151, 117, 0.1) !important;
}
html[data-theme="light"] .kpi-c-red .kpi-icon {
    background: rgba(199, 108, 123, 0.1) !important;
}
html[data-theme="light"] .kpi-c-amber .kpi-icon {
    background: rgba(191, 152, 89, 0.1) !important;
}

html[data-theme="light"] .trial-bar {
    background: rgba(191, 152, 89, 0.07) !important;
    border-color: rgba(191, 152, 89, 0.18) !important;
}

html[data-theme="light"] .btn-primary-dash {
    background: var(--primary) !important;
    color: #ffffff !important;
}

html[data-theme="light"] .btn-outline-dash {
    background: rgba(255, 255, 255, 0.8) !important;
    border-color: rgba(148, 163, 184, 0.22) !important;
    color: var(--text) !important;
}

html[data-theme="light"] .stock-bar-wrap {
    background: rgba(148, 163, 184, 0.2) !important;
}