/* Shared light/dark theme layer. Loaded last so page-specific layouts stay intact. */
:root {
    --app-header: rgba(9, 10, 12, .92);
    --app-nav: rgba(12, 13, 15, .97);
    --app-overlay: rgba(0, 0, 0, .72);
    --app-shadow: 0 18px 50px rgba(0, 0, 0, .28);
    --surface-tint: rgba(255, 255, 255, .025);
    --chart-grid: rgba(255, 255, 255, .07);
}

html[data-theme="light"] {
    --bg-primary: #e9e7e1;
    --bg-secondary: #f1efe9;
    --bg-card: #fbfaf7;
    --bg-hover: #e4e1d9;
    --border-color: #d9d5cc;
    --border-light: #c8c2b7;
    --text-primary: #171816;
    --text-secondary: #5d605c;
    --text-muted: #858982;
    --accent-green: #168044;
    --accent-red: #cf3434;
    --accent-yellow: #a96800;
    --accent-blue: #2563c9;
    --mobile-surface: #f8f7f3;
    --mobile-surface-raised: #eeece6;
    --mobile-border: rgba(34, 36, 32, .11);
    --app-header: rgba(248, 247, 243, .94);
    --app-nav: rgba(248, 247, 243, .97);
    --app-overlay: rgba(31, 32, 29, .42);
    --app-shadow: 0 18px 46px rgba(48, 45, 38, .13);
    --surface-tint: rgba(25, 27, 24, .025);
    --chart-grid: rgba(28, 30, 27, .1);
}

html, body, .main-content, .desktop-sidebar, .mobile-header, .bottom-nav,
.card, .form-control, .form-select, .btn, .modal-box, .payment-modal-box,
.expense-modal-panel, .confirm-panel, .payment-record, .mobile-expense-item {
    transition: background-color .22s ease, border-color .22s ease, color .22s ease, box-shadow .22s ease;
}

.logo-theme.logo-light { display: none; }
html[data-theme="light"] .logo-theme.logo-dark { display: none; }
html[data-theme="light"] .logo-theme.logo-light { display: block; }

.theme-toggle { font-family: inherit; cursor: pointer; }
.theme-toggle-glyph { display: grid; place-items: center; font-size: 19px; line-height: 1; }
.mobile-header-actions { position: absolute; right: max(10px, env(safe-area-inset-right)); display: flex; align-items: center; gap: 2px; }
.mobile-header-actions .action-btn { position: static; }
.theme-toggle-desktop { width: 100%; min-height: 42px; margin-bottom: 14px; padding: 0 12px; display: flex; align-items: center; gap: 10px; color: var(--text-secondary); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 11px; font-size: 11px; font-weight: 600; }
.theme-toggle-desktop:hover { color: var(--text-primary); border-color: var(--border-light); background: var(--bg-hover); }
.sidebar-footer small { display: block; color: var(--text-muted); font-size: 10px; }
.login-panel { position: relative; }
.login-theme-toggle { position: absolute; top: max(20px, env(safe-area-inset-top)); right: max(20px, env(safe-area-inset-right)); z-index: 5; min-height: 42px; padding: 0 13px; display: inline-flex; align-items: center; gap: 8px; color: #8b8f88; background: #141414; border: 1px solid #2a2a2a; border-radius: 12px; font-size: 11px; font-weight: 600; }
.login-theme-toggle:hover { color: #fff; border-color: #444; }

html[data-theme="light"], html[data-theme="light"] body,
html[data-theme="light"] body.has-sidebar { background: var(--bg-primary); color: var(--text-primary); }
html[data-theme="light"] .desktop-sidebar { background: #f4f2ed; box-shadow: 8px 0 28px rgba(45, 43, 37, .04); }
html[data-theme="light"] .sidebar-nav .nav-link { color: #4e524c; }
html[data-theme="light"] .sidebar-nav .nav-link i { color: #73776f; }
html[data-theme="light"] .sidebar-nav .nav-link:hover { color: #171816; background: #e9e6df; }
html[data-theme="light"] .sidebar-nav .nav-link.active { color: #111310; background: #dfdcd4; border-left-color: #242622; }
html[data-theme="light"] .sidebar-nav .nav-link:hover i, html[data-theme="light"] .sidebar-nav .nav-link.active i { color: #242622; }
html[data-theme="light"] .mobile-header { background: var(--app-header); border-bottom-color: var(--mobile-border); box-shadow: 0 8px 26px rgba(48, 45, 38, .08); }
html[data-theme="light"] .bottom-nav { background: var(--app-nav); border-top-color: var(--mobile-border); box-shadow: 0 -10px 30px rgba(48, 45, 38, .1); }
html[data-theme="light"] .bottom-nav .nav-item { color: #7a7e78; }
html[data-theme="light"] .bottom-nav .nav-item.active { color: #171816; background: rgba(28, 30, 27, .06); }
html[data-theme="light"] .bottom-nav .nav-item.add-btn .add-circle { background: #242622; box-shadow: 0 5px 16px rgba(48, 45, 38, .2); }
html[data-theme="light"] .bottom-nav .nav-item.add-btn i { color: #fff; }
html[data-theme="light"] .mobile-header .action-btn { color: #626660; }
html[data-theme="light"] .mobile-header .action-btn:active { color: #171816; background: rgba(28, 30, 27, .07); }

html[data-theme="light"] .page-loader,
html[data-theme="light"] .loading-overlay { background: rgba(233, 231, 225, .9); }
html[data-theme="light"] ::-webkit-scrollbar-track { background: var(--bg-secondary); }
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: var(--border-light); }
html[data-theme="light"] ::selection { color: #fff; background: #343630; }

html[data-theme="light"] .form-control,
html[data-theme="light"] .form-select,
html[data-theme="light"] .form-input,
html[data-theme="light"] .input-group-text { color: var(--text-primary); background: #f7f5f0; border-color: var(--border-color); }
html[data-theme="light"] .form-control::placeholder,
html[data-theme="light"] .form-input::placeholder { color: #969991; }
html[data-theme="light"] .form-control:focus,
html[data-theme="light"] .form-select:focus,
html[data-theme="light"] .form-input:focus { background: #fffefa; border-color: #9b9d96; box-shadow: 0 0 0 3px rgba(43, 46, 41, .06); }
html[data-theme="light"] input[type="date"],
html[data-theme="light"] input[type="month"],
html[data-theme="light"] select { color-scheme: light; }

html[data-theme="light"] .btn-primary { color: #fff; background: #242622; border-color: #242622; box-shadow: 0 8px 18px rgba(36, 38, 34, .14); }
html[data-theme="light"] .btn-primary:hover { color: #fff; background: #111310; border-color: #111310; }
html[data-theme="light"] .btn-secondary { color: #343732; background: #ebe8e1; border-color: #d2cdc3; }
html[data-theme="light"] .btn-secondary:hover { color: #171816; background: #dfdcd4; border-color: #bbb5aa; }
html[data-theme="light"] .btn-outline-danger { color: #b82929; background: rgba(207, 52, 52, .04); border-color: rgba(207, 52, 52, .28); }

html[data-theme="light"] .modal-overlay,
html[data-theme="light"] .payment-modal-backdrop,
html[data-theme="light"] .expense-modal-backdrop { background: var(--app-overlay); }
html[data-theme="light"] .modal-box,
html[data-theme="light"] .payment-modal-box,
html[data-theme="light"] .expense-modal-panel,
html[data-theme="light"] .confirm-panel { box-shadow: var(--app-shadow); }
html[data-theme="light"] .modal-header,
html[data-theme="light"] .modal-footer,
html[data-theme="light"] .payment-modal-head { background: rgba(251, 250, 247, .96); }

html[data-theme="light"] .table th,
html[data-theme="light"] .expense-data-table th { color: #747870; background: #ece9e3; }
html[data-theme="light"] .table td,
html[data-theme="light"] .expense-data-table td { color: var(--text-primary); }
html[data-theme="light"] .table tbody tr:hover,
html[data-theme="light"] .expense-data-table tbody tr:hover { background: rgba(35, 38, 33, .035); }

html[data-theme="light"] .payment-search-form { background: var(--surface-tint); }
html[data-theme="light"] .payment-filters a.active { color: #fff; background: #242622; border-color: #242622; }
html[data-theme="light"] .payment-filters a.active b { color: #242622; background: #f8f7f3; }
html[data-theme="light"] .payment-pagination a.active { color: #fff; background: #242622; border-color: #242622; }
html[data-theme="light"] .record-metric,
html[data-theme="light"] .week-stats > div,
html[data-theme="light"] .week-footer-item { background: #f0eee8; }

html[data-theme="light"] .mobile-page-intro { background: linear-gradient(135deg, rgba(37, 99, 201, .07), rgba(255, 255, 255, .34)); }
html[data-theme="light"] .icon-add { color: #fff; background: #242622; box-shadow: 0 8px 18px rgba(36, 38, 34, .16); }
html[data-theme="light"] .kpi-card,
html[data-theme="light"] .employee-card { background: linear-gradient(145deg, #fbfaf7, #f1efe9); }
html[data-theme="light"] .kpi-card.total,
html[data-theme="light"] .modal-info i,
html[data-theme="light"] .period-icon,
html[data-theme="light"] .employee-avatar,
html[data-theme="light"] .selected-employee-icon,
html[data-theme="light"] .employee-form-intro > div,
html[data-theme="light"] .counter-icon.nargile { color: #2563c9; }
html[data-theme="light"] .kpi-card.material,
html[data-theme="light"] .overview-primary strong,
html[data-theme="light"] .calculated-total strong { color: #a96800; }
html[data-theme="light"] .kpi-card.personnel { color: #cf3434; }
html[data-theme="light"] .kpi-card.positive,
html[data-theme="light"] .payroll-numbers .green,
html[data-theme="light"] .received-value,
html[data-theme="light"] .text-success { color: #168044 !important; }
html[data-theme="light"] .kpi-card.negative,
html[data-theme="light"] .balance-value { color: #c33148; }
html[data-theme="light"] .payroll-numbers .orange,
html[data-theme="light"] .employee-salary .remaining { color: #b75a00; }
html[data-theme="light"] .employee-salary > div { background: #eeece6; }

html[data-theme="light"] .sale-card,
html[data-theme="light"] .payment-record-main,
html[data-theme="light"] .mobile-expense-item,
html[data-theme="light"] .menu-item,
html[data-theme="light"] .quick-action { box-shadow: 0 5px 18px rgba(47, 44, 37, .035); }
html[data-theme="light"] .payment-record-main:hover { background: #f7f5f0; }
html[data-theme="light"] .save-btn { color: #fff; background: #242622; border-color: #242622; box-shadow: 0 8px 18px rgba(36, 38, 34, .14); }
html[data-theme="light"] .save-btn:hover,
html[data-theme="light"] .save-btn:active { color: #fff; background: #111310; border-color: #111310; }
html[data-theme="light"] .status-label.status-paid,
html[data-theme="light"] .status-label.status-credit,
html[data-theme="light"] .payment-status.complete { color: #13733c; background: rgba(22, 128, 68, .1); }
html[data-theme="light"] .status-label.status-open { color: #bd2e47; background: rgba(195, 49, 72, .09); }
html[data-theme="light"] .status-label.status-partial,
html[data-theme="light"] .payment-status.partial { color: #9a6100; background: rgba(169, 104, 0, .1); }
html[data-theme="light"] .overview-icon.received,
html[data-theme="light"] .transaction-type.payment,
html[data-theme="light"] .quick-paid-action,
html[data-theme="light"] .quick-paid-icon,
html[data-theme="light"] .record-action.quick-paid,
html[data-theme="light"] .quick-paid-box p b,
html[data-theme="light"] .detail-section-title i { color: #168044; }
html[data-theme="light"] .overview-icon.outstanding,
html[data-theme="light"] .transaction-type.refund { color: #c33148; }
html[data-theme="light"] .payment-warning { color: #9a6100; }

html[data-theme="light"] .statistics-period > i,
html[data-theme="light"] .statistics-kpi.gross,
html[data-theme="light"] .records-grid > div:nth-child(1) strong,
html[data-theme="light"] .product-mix-item.nargile { color: #2563c9; }
html[data-theme="light"] .statistics-kpi.earning,
html[data-theme="light"] .statistics-kpi.net.positive,
html[data-theme="light"] .records-grid > div:nth-child(2) strong { color: #168044; }
html[data-theme="light"] .statistics-kpi.expense,
html[data-theme="light"] .statistics-kpi.net.negative { color: #cf3434; }
html[data-theme="light"] .statistics-kpi.units,
html[data-theme="light"] .records-grid > div:nth-child(3) strong,
html[data-theme="light"] .product-mix-item.sabah { color: #a96800; }
html[data-theme="light"] .statistics-kpi.days,
html[data-theme="light"] .product-mix-item.lule { color: #6554c0; }
html[data-theme="light"] .product-mix-item.dark { color: #b83280; }

html[data-theme="light"] .toast-notification { color: #fff; background: #242622; border-color: #3b3e38; box-shadow: var(--app-shadow); }

/* Login screen */
html[data-theme="light"] .login-panel { background: #f5f3ee; }
html[data-theme="light"] .login-theme-toggle { color: #4f534d; background: #ebe8e1; border-color: #d2cdc3; }
html[data-theme="light"] .login-theme-toggle:hover { color: #171816; background: #e1ded6; border-color: #bbb5aa; }
html[data-theme="light"] .alert-success { color: #168044; }
html[data-theme="light"] .alert-error,
html[data-theme="light"] .alert-danger { color: #c22f2f; }
html[data-theme="light"] .form-label { color: #555952; }
html[data-theme="light"] .input-icon,
html[data-theme="light"] .password-toggle { color: #8b8f87; }
html[data-theme="light"] .input-wrapper:focus-within .input-icon,
html[data-theme="light"] .password-toggle:hover { color: #383b36; }
html[data-theme="light"] .custom-checkbox { background: #eeece6; border-color: #c8c2b7; }
html[data-theme="light"] .checkbox-wrapper input:checked + .custom-checkbox { background: #242622; border-color: #242622; }
html[data-theme="light"] .checkbox-wrapper input:checked + .custom-checkbox svg { stroke: #fff; }
html[data-theme="light"] .checkbox-label { color: #626660; }
html[data-theme="light"] .btn-submit { color: #fff; background: linear-gradient(135deg, #343731 0%, #20221f 100%); border-color: #242622; }
html[data-theme="light"] .btn-submit:hover { border-color: #111310; box-shadow: 0 8px 22px rgba(45, 43, 37, .17); }
html[data-theme="light"] .btn-submit::before { background: linear-gradient(135deg, #171916 0%, #2d302b 100%); }
html[data-theme="light"] .btn-submit:hover span { color: #fff; }
html[data-theme="light"] .login-footer p { color: #969990; }
html[data-theme="light"] .login-footer a { color: #686c65; }
html[data-theme="light"] .spinner { border-color: #d2cdc3; border-top-color: #242622; }
html[data-theme="light"] .brand-panel { background: #dedbd3; }
html[data-theme="light"] .brand-bg { background: radial-gradient(ellipse at 20% 20%, rgba(255,255,255,.55) 0%, transparent 52%), radial-gradient(ellipse at 80% 80%, rgba(81,85,77,.06) 0%, transparent 50%); }
html[data-theme="light"] .brand-grid { background-image: linear-gradient(rgba(35,38,33,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(35,38,33,.035) 1px, transparent 1px); }
html[data-theme="light"] .brand-icon { background: linear-gradient(135deg, #f8f7f3 0%, #e8e5de 100%); border-color: #cac5bb; box-shadow: 0 12px 28px rgba(47,44,37,.08); }
html[data-theme="light"] .brand-icon svg { color: #242622; }
html[data-theme="light"] .brand-title,
html[data-theme="light"] .feature-title { color: #20221f; }
html[data-theme="light"] .brand-desc { color: #666a63; }
html[data-theme="light"] .feature-card { background: rgba(255,255,255,.35); border-color: rgba(70,72,66,.11); }
html[data-theme="light"] .feature-card:hover { background: rgba(255,255,255,.56); border-color: rgba(70,72,66,.2); }
html[data-theme="light"] .feature-icon { background: #ebe8e1; }
html[data-theme="light"] .feature-icon svg { color: #5e625b; }
html[data-theme="light"] .feature-desc { color: #858981; }
html[data-theme="light"] .login-heading h2 { color: #20221f; }
html[data-theme="light"] .login-heading p { color: #71756e; }
html[data-theme="light"] .brand-panel .brand-title { color: #fff; }
html[data-theme="light"] .brand-panel .brand-desc { color: rgba(255,255,255,.78); }
html[data-theme="light"] .brand-panel .brand-kicker { color: rgba(255,255,255,.72); }

@media (max-width: 991.98px) {
    html[data-theme="light"] { background: var(--bg-primary); }
    html[data-theme="light"] .card,
    html[data-theme="light"] .week-summary,
    html[data-theme="light"] .pending-card,
    html[data-theme="light"] .prices-card,
    html[data-theme="light"] .stat-box,
    html[data-theme="light"] .quick-action,
    html[data-theme="light"] .sale-card,
    html[data-theme="light"] .date-picker,
    html[data-theme="light"] .counter-card,
    html[data-theme="light"] .summary-box,
    html[data-theme="light"] .recent-box,
    html[data-theme="light"] .menu-item,
    html[data-theme="light"] .price-box,
    html[data-theme="light"] .payment-overview,
    html[data-theme="light"] .payment-list-panel,
    html[data-theme="light"] .expense-kpis .kpi-card,
    html[data-theme="light"] .insight-card,
    html[data-theme="light"] .records-card,
    html[data-theme="light"] .personnel-directory,
    html[data-theme="light"] .employee-card,
    html[data-theme="light"] .mobile-expense-item { background-color: var(--mobile-surface); border-color: var(--mobile-border); }
    .mobile-header-actions .action-btn { width: 40px; height: 40px; }
}

@media (max-width: 767.98px) {
    .login-theme-toggle { top: max(14px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); width: 44px; min-height: 44px; padding: 0; justify-content: center; }
    .login-theme-toggle .theme-toggle-label { display: none; }
}

/* Pure white light theme */
html[data-theme="light"] {
    --bg-primary: #ffffff;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --bg-hover: #f8f8f8;
    --border-color: #dedede;
    --border-light: #a8a8a8;
    --text-primary: #080808;
    --text-secondary: #151515;
    --text-muted: #3f3f3f;
    --mobile-surface: #ffffff;
    --mobile-surface-raised: #ffffff;
    --mobile-border: #dedede;
    --app-header: rgba(255,255,255,.97);
    --app-nav: rgba(255,255,255,.98);
    --surface-tint: #ffffff;
}
html[data-theme="light"], html[data-theme="light"] body,
html[data-theme="light"] body.has-sidebar, html[data-theme="light"] .main-content,
html[data-theme="light"] .desktop-sidebar, html[data-theme="light"] .login-panel { background: #fff; color: #080808; }
html[data-theme="light"] .desktop-sidebar { box-shadow: none; border-right-color: #dedede; }
html[data-theme="light"] .sidebar-nav .nav-link { color: #151515; }
html[data-theme="light"] .sidebar-nav .nav-link i { color: #333; }
html[data-theme="light"] .sidebar-nav .nav-link:hover { color: #000; background: #fafafa; }
html[data-theme="light"] .sidebar-nav .nav-link.active { color: #000; background: #fff; border-left-color: #000; }
html[data-theme="light"] .sidebar-nav .nav-link:hover i,
html[data-theme="light"] .sidebar-nav .nav-link.active i { color: #000; }
html[data-theme="light"] .mobile-header, html[data-theme="light"] .bottom-nav { background: rgba(255,255,255,.98); }
html[data-theme="light"] .bottom-nav .nav-item { color: #222; }
html[data-theme="light"] .bottom-nav .nav-item.active { color: #000; background: #fff; }
html[data-theme="light"] .app-page-header,
html[data-theme="light"] .card, html[data-theme="light"] .kpi-card,
html[data-theme="light"] .insight-card, html[data-theme="light"] .records-card,
html[data-theme="light"] .personnel-directory, html[data-theme="light"] .supplier-directory,
html[data-theme="light"] .employee-card, html[data-theme="light"] .payment-overview,
html[data-theme="light"] .payment-list-panel, html[data-theme="light"] .statistics-panel,
html[data-theme="light"] .statistics-filter-panel, html[data-theme="light"] .stat-box,
html[data-theme="light"] .sale-card, html[data-theme="light"] .menu-item,
html[data-theme="light"] .quick-action, html[data-theme="light"] .prices-card { background: #fff; background-image: none; }
html[data-theme="light"] .form-control, html[data-theme="light"] .form-select,
html[data-theme="light"] .form-input, html[data-theme="light"] .input-group-text,
html[data-theme="light"] .date-trigger { color: #080808; background: #fff; border-color: #cfcfcf; }
html[data-theme="light"] .form-control:focus, html[data-theme="light"] .form-select:focus,
html[data-theme="light"] .form-input:focus { color: #000; background: #fff; border-color: #000; box-shadow: 0 0 0 2px rgba(0,0,0,.08); }
html[data-theme="light"] .table th, html[data-theme="light"] .expense-data-table th,
html[data-theme="light"] .employee-ledger th { color: #111; background: #fff; }
html[data-theme="light"] .btn-secondary { color: #080808; background: #fff; border-color: #bdbdbd; }
html[data-theme="light"] .btn-secondary:hover { color: #000; background: #fafafa; border-color: #000; }
html[data-theme="light"] .employee-view-switch,
html[data-theme="light"] .employee-salary > div,
html[data-theme="light"] .record-metric, html[data-theme="light"] .week-stats > div,
html[data-theme="light"] .week-footer-item, html[data-theme="light"] .mobile-expense-item,
html[data-theme="light"] .employee-ledger tr, html[data-theme="light"] .calculation-picker label > span { background: #fff; }
html[data-theme="light"] .payment-record-main,
html[data-theme="light"] .payment-record-main:hover,
html[data-theme="light"] .record-metric { background: #fff; }

@media (max-width: 390px) {
    .mobile-header .logo { max-width: 145px; }
}

/* Desktop shell header: continue the logo divider across the full page. */
@media (min-width: 992px) {
    .desktop-sidebar .sidebar-header {
        height: 90px;
        padding: 0 20px;
        display: flex;
        align-items: center;
    }

    .main-content {
        padding-top: 0;
    }

    body .app-page-header {
        min-height: 90px;
        height: 90px;
        margin: 0 -40px 24px;
        padding: 0 40px;
        background: transparent;
        border: 0;
        border-bottom: 1px solid var(--border-color);
        box-shadow: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    html, body, .main-content, .desktop-sidebar, .mobile-header, .bottom-nav,
    .card, .form-control, .form-select, .btn, .modal-box { transition: none; }
}