/* ================================================================
   LIGHT THEME — full conversion (loads AFTER style.css + mobile.css)
   Strategy: override CSS variables + selectively override components
   Keep:  blue/cyan accent gradient, dark "hero" card (Net Worth)
================================================================ */


/* ================================================================
   1. DESIGN TOKEN OVERRIDES
================================================================ */

:root {
    /* --- Surfaces (was dark slate) --- */
    --surface-glass:     rgba(255, 255, 255, 0.85);
    --surface-input:     #ffffff;
    --surface-1:         #ffffff;
    --surface-2:         #f1f5f9;     /* slate-100 */
    --surface-3:         #e2e8f0;     /* slate-200 */

    /* --- Borders --- */
    --border-soft:       #e2e8f0;
    --border-focus:      rgba(6, 182, 212, 0.5);

    /* --- Text (flipped) --- */
    --text-primary:      #0f172a;     /* slate-900 */
    --text-secondary:    #475569;     /* slate-600 */
    --text-muted:        #94a3b8;     /* slate-400 */

    /* --- Money colors (more saturated for light bg) --- */
    --money-income:      #059669;     /* emerald-600 */
    --money-income-bg:   rgba(5, 150, 105, 0.10);
    --money-expense:     #e11d48;     /* rose-600 */
    --money-expense-bg:  rgba(225, 29, 72, 0.10);

    /* --- Shadows: softer for light bg --- */
    --elev-1: 0 1px 2px rgba(15, 23, 42, 0.06);
    --elev-2: 0 4px 12px -2px rgba(15, 23, 42, 0.08);
    --elev-3: 0 10px 30px -8px rgba(15, 23, 42, 0.15);
    --elev-fab: 0 8px 24px -4px rgba(59, 130, 246, 0.45),
                0 4px 10px -2px rgba(6, 182, 212, 0.30);

    --shadow-card:       0 4px 16px -4px rgba(15, 23, 42, 0.08),
                         0 2px 4px -1px rgba(15, 23, 42, 0.04);

    /* 🆕 v3.1.0 Phase O polish sweep — brand-tinted card shadow matching
       draft Hi-Fi .wf-box across §3/§5/§14/§21. Softer than .wf-phone's
       `0 10px 28px rgba(37,99,235,.14)` but still gives cards clear lift. */
    --shadow-card-brand: 0 10px 24px -8px rgba(37, 99, 235, 0.14),
                         0 2px 8px -2px rgba(15, 23, 42, 0.06);
    --shadow-button:     0 8px 24px -4px rgba(59, 130, 246, 0.40);
    --shadow-button-hov: 0 12px 32px -6px rgba(6, 182, 212, 0.50);
}


/* ================================================================
   2. PAGE BACKGROUNDS
================================================================ */

body.app-shell {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    color: var(--text-primary);
}

/* Login page background — soft pastel aura */
.container:has(.login-wrapper) {
    background:
        radial-gradient(ellipse at 20% 0%,  rgba(59, 130, 246, 0.12), transparent 50%),
        radial-gradient(ellipse at 80% 100%, rgba(6, 182, 212, 0.10), transparent 50%),
        linear-gradient(135deg, #f1f5f9 0%, #e0f2fe 50%, #f1f5f9 100%);
}

@supports not selector(:has(*)) {
    body { background: linear-gradient(135deg, #f1f5f9, #e0f2fe, #f1f5f9); }
}


/* ================================================================
   3. LOGIN CARD
================================================================ */

.login-wrapper {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid #e2e8f0;
    box-shadow:
        0 25px 60px -20px rgba(15, 23, 42, 0.15),
        0 10px 25px -10px rgba(59, 130, 246, 0.12);
    color: var(--text-primary);
}

.login-brand__icon {
    box-shadow:
        0 12px 24px -8px rgba(59, 130, 246, 0.50),
        inset 0 1px 0 rgba(255, 255, 255, 0.40);
}

.login-brand__title {
    background: linear-gradient(180deg, #0f172a 0%, #2563eb 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.login-brand__subtitle {
    color: var(--text-secondary);
}

/* --- Input fields --- */
.login-wrapper .input-box input {
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    color: #0f172a;
    /* 🆕 iOS Safari caret visibility — explicit values with !important.
       Without this, on real iOS the caret stays hidden because:
         (1) -webkit-text-fill-color leaks from .login-brand__title gradient
         (2) Safari sometimes ignores caret-color when text-fill is transparent
       Hard-coded HEX (no var) so failsafe even if CSS variable cascade fails. */
    -webkit-text-fill-color: #0f172a !important;
    caret-color: #06b6d4 !important;
    -webkit-user-modify: read-write-plaintext-only;
    user-select: text;
    -webkit-user-select: text;
}

.login-wrapper .input-box input:hover {
    background: #f1f5f9;
}

.login-wrapper .input-box input:focus {
    background: #ffffff;
    border-color: #06b6d4;
    box-shadow: 0 0 0 4px rgba(6, 182, 212, 0.15);
}

.login-wrapper .input-box input::placeholder {
    color: var(--text-muted);
}

.login-wrapper .input-box > i,
.login-wrapper .password-toggle {
    color: var(--text-secondary);
}

.login-wrapper .password-toggle:hover {
    color: #0891b2;
    background: rgba(6, 182, 212, 0.08);
}

/* --- Remember + Reset row --- */
.login-wrapper .remember-forgot {
    color: var(--text-secondary);
}

.login-wrapper .remember-forgot label {
    color: var(--text-secondary);
}

.login-wrapper .remember-forgot input[type="checkbox"] {
    accent-color: #06b6d4;
}

.login-wrapper .remember-forgot a {
    color: #0891b2;
    font-weight: 500;
}

.login-wrapper .remember-forgot a:hover {
    color: #06b6d4;
}

/* --- Caps Lock warning --- */
.login-wrapper .caps-lock-warning {
    background: rgba(245, 158, 11, 0.10);
    border-color: rgba(245, 158, 11, 0.30);
    color: #b45309;       /* amber-700 */
}

/* --- Inline form error --- */
.login-wrapper .form-error {
    background: rgba(225, 29, 72, 0.08);
    border-color: rgba(225, 29, 72, 0.30);
    color: #be123c;       /* rose-700 */
}

/* --- Register link --- */
.login-wrapper .register-link {
    color: var(--text-secondary);
}

.login-wrapper .register-link a {
    color: #0891b2;
}

.login-wrapper .register-link a:hover {
    color: #06b6d4;
}

/* --- Footer --- */
.login-wrapper .login-footer {
    color: var(--text-muted);
    border-top: 1px solid #e2e8f0;
}

/* Sign In button — gradient stays the same (looks great on light too) */
/* Already styled in style.css with var(--accent-gradient-2) */


/* ================================================================
   4. CARDS
================================================================ */

.card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: var(--text-primary);
}

.card--clickable:active {
    background: #f8fafc;
}

/* Hero summary card — original Deep Navy gradient (focal point on light bg) */
.card--summary {
    background:
        radial-gradient(ellipse at 100% 0%, rgba(6, 182, 212, 0.30), transparent 60%),
        linear-gradient(135deg, #1e3a8a 0%, #0c4a6e 100%);
    color: #ffffff;
    border: none;
    box-shadow: 0 12px 32px -8px rgba(30, 64, 175, 0.35);
}

.card--summary .card__label {
    color: rgba(255, 255, 255, 0.80);
}

.card--summary .card__hint {
    color: rgba(255, 255, 255, 0.75);
}

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

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

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


/* ================================================================
   5. LIST ITEMS
================================================================ */

.list-item:active {
    background: #f1f5f9;
}

.list-item__icon {
    background: #f1f5f9;
    color: var(--text-secondary);
}

.list-item__title {
    color: var(--text-primary);
}

.list-item__subtitle {
    color: var(--text-muted);
}

.list-group__header {
    color: var(--text-secondary);
}


/* ================================================================
   6. SIDEBAR (desktop)
================================================================ */

.sidebar {
    background: #ffffff;
    border-right: 1px solid #e2e8f0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 1px 0 8px rgba(15, 23, 42, 0.04);
}

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

.sidebar__brand-name {
    color: var(--text-primary);
}

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

.sidebar__item:hover {
    background: #f1f5f9;
    color: var(--text-primary);
}

.sidebar__item.is-active {
    background: rgba(6, 182, 212, 0.12);
    color: #0891b2;
}

.sidebar__item.is-active i {
    color: #0891b2;
}

.sidebar__footer {
    border-top: 1px solid #e2e8f0;
}

.sidebar__user:hover {
    background: #f1f5f9;
}

.sidebar__user-name {
    color: var(--text-primary);
}

.sidebar__user-role {
    color: var(--text-muted);
}

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

.sidebar__signout:hover {
    background: rgba(225, 29, 72, 0.10);
    color: #e11d48;
}


/* ================================================================
   7. BOTTOM TAB BAR (mobile)
================================================================ */

.bottom-tab-bar {
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid #e2e8f0;
    box-shadow: 0 -2px 8px rgba(15, 23, 42, 0.04);
}

.bottom-tab-bar__item {
    color: var(--text-muted);
}

.bottom-tab-bar__item:active {
    color: var(--text-secondary);
}

.bottom-tab-bar__item.is-active {
    color: #0891b2;
}


/* ================================================================
   8. FAB (mobile)
================================================================ */

.fab {
    border: 3px solid #f8fafc;          /* match light bg */
}


/* ================================================================
   9. APP-SHEET — Unified sheet system (June 14, 2026)
        Light-theme overrides for the .app-sheet--full variant
        (Add Transaction, Edit Account). The old .bottom-sheet
        rules were removed in Phase 4 cleanup.
================================================================ */

.app-sheet--full .app-sheet__panel {
    background: #ffffff !important;
    color: var(--text-primary) !important;
}
.app-sheet--full .app-sheet__title    { color: var(--text-primary) !important; }
.app-sheet--full .app-sheet__subtitle { color: var(--text-secondary) !important; }
.app-sheet--full .app-sheet__header {
    border-bottom-color: #e2e8f0 !important;
}
.app-sheet--full .app-sheet__footer {
    background: #ffffff !important;
    border-top-color: #e2e8f0 !important;
}
/* All round icon-buttons in the header — close + back, including the
   tx-screen variants used inside the multi-screen Add Transaction sheet.
   On light theme the panel is white, so the dark-variant rules (white
   text on white bg) make them invisible. Force light-on-light look. */
.app-sheet--full .app-sheet__close,
.app-sheet--full .app-sheet__back,
.app-sheet--full .tx-screen__close,
.app-sheet--full .tx-screen__back {
    background: rgba(15, 23, 42, 0.06) !important;
    color: var(--text-secondary) !important;
}
.app-sheet--full .app-sheet__close:hover,
.app-sheet--full .app-sheet__back:hover,
.app-sheet--full .tx-screen__close:hover,
.app-sheet--full .tx-screen__back:hover,
.app-sheet--full .app-sheet__close:active,
.app-sheet--full .app-sheet__back:active,
.app-sheet--full .tx-screen__close:active,
.app-sheet--full .tx-screen__back:active {
    background: rgba(15, 23, 42, 0.12) !important;
    color: var(--text-primary) !important;
}
.app-sheet--full .app-sheet__handle {
    background: #cbd5e1 !important;
}

/* Inputs inside any app-sheet on light theme */
.app-sheet--full #txAmount {
    color: var(--text-primary) !important;
}
.app-sheet--full #txAmount + span,
.app-sheet--full [style*="font-size: var(--fs-money)"] {
    color: var(--text-secondary) !important;
}
.app-sheet--full select,
.app-sheet--full input[type="text"],
.app-sheet--full input[type="date"] {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: var(--text-primary) !important;
    color-scheme: light !important;
}


/* ================================================================
   10. CHIP (filter row)
================================================================ */

.chip {
    background: #f1f5f9;
    color: var(--text-secondary);
}

.chip.is-active {
    background: rgba(6, 182, 212, 0.12);
    border-color: rgba(6, 182, 212, 0.45);
    color: #0891b2;
}


/* ================================================================
   11. SEGMENTED CONTROL
================================================================ */

.segmented {
    background: #f1f5f9;
    border-color: #e2e8f0;
}

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


/* ================================================================
   12. SKELETON LOADER
================================================================ */

.skeleton {
    background: linear-gradient(
        90deg,
        #f1f5f9 0%,
        #e2e8f0 50%,
        #f1f5f9 100%
    );
}


/* ================================================================
   13. NUMBER PAD
================================================================ */

.number-pad__key {
    background: #f1f5f9;
    color: var(--text-primary);
    border: 1px solid #e2e8f0;
}

.number-pad__key:active {
    background: #e2e8f0;
}


/* ================================================================
   14. CATEGORY PICKER GRID (Add Transaction sheet)
================================================================ */

.cat-pick {
    background: #f1f5f9;
    color: var(--text-secondary);
    border: 1.5px solid transparent;
}

.cat-pick.is-active {
    background: rgba(6, 182, 212, 0.12);
    border-color: rgba(6, 182, 212, 0.45);
    color: #0891b2;
}


/* ================================================================
   15. EMPTY STATE
================================================================ */

.empty-state {
    color: var(--text-secondary);
}

.empty-state__icon {
    color: #cbd5e1;
}

.empty-state__title {
    color: var(--text-primary);
}

.empty-state__message {
    color: var(--text-secondary);
}


/* ================================================================
   16. UTILITIES
================================================================ */

.text-muted     { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.text-caption   { color: var(--text-muted); }
.text-h1, .text-h2 { color: var(--text-primary); }


/* ================================================================
   17. TOAST NOTIFICATIONS
   KEEP DARK — toast over light bg with dark glass = best contrast/UX
================================================================ */
/* .toast styles already dark — leave alone for visibility */


/* ================================================================
   18. SCROLLBAR — always visible, wider, accent on hover
================================================================ */

/* Auto scrollbar — แสดงเฉพาะเมื่อ content overflow */
html {
    overflow-y: auto;
    scrollbar-gutter: stable;   /* จอง gutter ไว้ — กัน layout shift ตอนเปลี่ยน page */
}
/* NOTE: translateZ(0) on html/body was tried as a "composite layer" fix
   for the iOS PWA first-paint fuzziness — it broke every position:fixed
   element (modal overlays, bottom tab bar, FAB, confirm popup) because
   the transform created a new containing block, so fixed elements
   anchored to body instead of the viewport. The real fix lives in
   mobile.css where the backdrop-filter on the .card primitive was
   removed — that filter was decorative on solid-background cards and
   was the thing iOS mis-sampled on first paint. */

/* Webkit-based browsers: Chrome, Edge, Safari */
::-webkit-scrollbar {
    width: 14px;
    height: 14px;
}

::-webkit-scrollbar-track {
    background: #e2e8f0;
    border-radius: 7px;
}

::-webkit-scrollbar-thumb {
    background: #94a3b8;          /* slate-400 — มี contrast ชัด */
    border-radius: 7px;
    border: 3px solid #e2e8f0;
    min-height: 40px;             /* ขั้นต่ำ thumb ให้เห็น */
}

/* Hover/active pseudo are WebKit-only. We use a -webkit- vendor media query
   that ONLY matches WebKit/Blink, so Firefox won't try to parse the selectors
   inside (no "ruleset ignored" warning). */
@media (-webkit-min-device-pixel-ratio: 0) {
    ::-webkit-scrollbar-thumb:hover {
        background: #64748b;
    }
    ::-webkit-scrollbar-thumb:active {
        background: #475569;
    }
}