/* ============================================================ theme-light.css — Light theme overrides Applied via FinResolver · finresolver.in ============================================================ */ html.theme-light { /* ── Core palette — warm off-white like the reference design ── */ --bg: #eeecea; --surface: #ffffff; --surface2: #f5f4f0; --border: #e4e2de; --text: #1a2030; --muted: #8a91a8; /* ── Accents — vivid for light backgrounds ── */ --accent: #00b87d; --accent2: #e84040; --accent3: #e09600; --accent4: #2b80d4; --purple: #6c42d8; } /* ── Remove dot-grid background in light mode ── */ html.theme-light body::before { display: none; } /* ── Scrollbar ── */ html.theme-light ::-webkit-scrollbar-track { background: var(--bg); } html.theme-light ::-webkit-scrollbar-thumb { background: #d0cdc9; border-radius: 3px; } /* ── Header ── */ html.theme-light header { background: rgba(255,255,255,.97); box-shadow: 0 1px 0 var(--border), 0 2px 16px rgba(0,0,0,.06); } /* ── Select dropdowns ── */ html.theme-light select { background: var(--surface); border-color: var(--border); color: var(--text); } /* ── User menu ── */ html.theme-light .user-menu { box-shadow: 0 8px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06); } /* ── Universal card shadow treatment ── */ html.theme-light .card, html.theme-light .table-card, html.theme-light .chart-card, html.theme-light .home-stat-card, html.theme-light .fire-card, html.theme-light .insights-card, html.theme-light .inv-sum-card, html.theme-light .loan-sum-card, html.theme-light .pf-sum-card, html.theme-light .detail-metric, html.theme-light .inv-holdings-card, html.theme-light .inv-side-panel, html.theme-light .detail-chart-card, html.theme-light .amort-card, html.theme-light .payment-card, html.theme-light .pf-panel, html.theme-light .loan-card { box-shadow: 0 1px 4px rgba(0,0,0,.04), 0 4px 20px rgba(0,0,0,.06); border-color: rgba(0,0,0,.07); } html.theme-light .card:hover, html.theme-light .home-stat-card:hover, html.theme-light .inv-sum-card:hover, html.theme-light .loan-sum-card:hover, html.theme-light .pf-sum-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.08), 0 8px 32px rgba(0,0,0,.08); } /* ── Home nav cards — colorful gradient backgrounds ── */ html.theme-light .home-nav-card { border-color: rgba(0,0,0,.07); box-shadow: 0 2px 8px rgba(0,0,0,.05), 0 4px 20px rgba(0,0,0,.06); } html.theme-light .home-nav-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,.1), 0 2px 8px rgba(0,0,0,.05); } html.theme-light .home-nav-card.tracker { background: linear-gradient(140deg, #e6f9f2 0%, #f0fdf9 100%); border-color: rgba(0,184,125,.18); --card-glow: none; } html.theme-light .home-nav-card.tracker:hover { background: linear-gradient(140deg, #d4f4e8 0%, #e8faf4 100%); border-color: rgba(0,184,125,.35); } html.theme-light .home-nav-card.investment { background: linear-gradient(140deg, #e5f0fc 0%, #eff6ff 100%); border-color: rgba(43,128,212,.18); --card-glow: none; } html.theme-light .home-nav-card.investment:hover { background: linear-gradient(140deg, #d4e8f8 0%, #e3f0fd 100%); border-color: rgba(43,128,212,.35); } html.theme-light .home-nav-card.loan { background: linear-gradient(140deg, #fdf6e3 0%, #fffbeb 100%); border-color: rgba(224,150,0,.18); --card-glow: none; } html.theme-light .home-nav-card.loan:hover { background: linear-gradient(140deg, #faeece 0%, #fdf6e0 100%); border-color: rgba(224,150,0,.35); } html.theme-light .home-nav-card.portfolio { background: linear-gradient(140deg, #f0eafc 0%, #f5f0ff 100%); border-color: rgba(108,66,216,.18); --card-glow: none; } html.theme-light .home-nav-card.portfolio:hover { background: linear-gradient(140deg, #e5d8f8 0%, #ede4ff 100%); border-color: rgba(108,66,216,.35); } html.theme-light .home-nav-card.lifestyle { background: linear-gradient(140deg, #fdeaea 0%, #fef2f2 100%); border-color: rgba(232,64,64,.18); --card-glow: none; } /* Nav badge in light mode */ html.theme-light .home-nav-badge.live { background: rgba(0,184,125,.14); color: var(--accent); border-color: rgba(0,184,125,.3); } /* ── Home stat cards ── */ html.theme-light .home-stat-card { background: var(--surface); } /* ── Init row ── */ html.theme-light .init-row { background: var(--surface); box-shadow: 0 1px 4px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.05); border-color: rgba(0,0,0,.07); } html.theme-light .init-input { background: var(--bg); color: var(--text); border-color: var(--border); } /* ── Tables ── */ html.theme-light tbody tr:hover { background: #f7f6f2; } html.theme-light tbody td { border-bottom-color: rgba(0,0,0,.06); } /* ── Table card headers ── */ html.theme-light .table-card-head, html.theme-light .amort-card-head, html.theme-light .payment-card-head, html.theme-light .inv-holdings-head { background: #faf9f6; border-bottom-color: rgba(0,0,0,.07); } /* ── Add row inputs ── */ html.theme-light .add-row { background: #faf9f6; border-top-color: rgba(0,0,0,.07); } html.theme-light .add-row input { background: var(--surface); color: var(--text); border-color: var(--border); } html.theme-light .loan-tag-select { background: var(--surface); color: var(--text); border-color: var(--border); } /* ── Row inline-edit ── */ html.theme-light tbody tr.editing { background: #f0f2f8 !important; } html.theme-light .row-edit-input { background: var(--surface); border-color: var(--accent4); color: var(--text); } /* ── Investment quick-add ── */ html.theme-light .inv-qa-select { background: var(--surface); border-color: var(--border); color: var(--text); } html.theme-light .inv-qa-full-btn { background: var(--surface); border-color: var(--border); color: var(--muted); } html.theme-light .add-payment-row { background: #faf9f6; } html.theme-light .add-payment-row input { background: var(--surface); border-color: var(--border); color: var(--text); } /* ── Checklist ── */ html.theme-light .check-item { background: var(--surface); border-color: rgba(0,0,0,.08); box-shadow: 0 1px 4px rgba(0,0,0,.04); } html.theme-light .check-item.done { background: rgba(0,184,125,.07); border-color: rgba(0,184,125,.3); } html.theme-light .check-input { background: var(--surface); color: var(--text); border-color: var(--border); } /* ── Section line ── */ html.theme-light .section-line { background: var(--border); } /* ── Buttons ── */ html.theme-light .btn-import { background: var(--surface); border-color: var(--border); color: var(--text); } html.theme-light .btn-import:hover { background: rgba(43,128,212,.07); border-color: rgba(43,128,212,.3); color: var(--accent4); } html.theme-light .btn-clear-month { border-color: var(--border); } html.theme-light .btn-smart-fill { background: rgba(43,128,212,.07); border-color: rgba(43,128,212,.22); } html.theme-light .btn-smart-fill:hover { background: rgba(43,128,212,.14); } /* ── Loan card ── */ html.theme-light .loan-card { background: var(--surface); } html.theme-light .loan-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,.1); } html.theme-light .loan-stat { background: #f5f4f0; } html.theme-light .loan-progress-track { background: #eeecea; border-color: #dddad6; } html.theme-light .loan-sum-card { background: var(--surface); } html.theme-light .detail-metric { background: var(--surface); } html.theme-light .loan-act-btn { background: var(--surface2); border-color: var(--border); } html.theme-light .amort-table th { background: #faf9f6; } html.theme-light .amort-table td { border-bottom-color: rgba(0,0,0,.06); } html.theme-light .amort-table tr:hover td { background: #f7f6f2; } html.theme-light .payment-log-item:hover { background: #f7f6f2; } html.theme-light .payment-log-item { border-bottom-color: rgba(0,0,0,.06); } html.theme-light .loan-modal { box-shadow: 0 24px 80px rgba(0,0,0,.14); } html.theme-light .loan-form-input { background: var(--surface); border-color: var(--border); color: var(--text); } html.theme-light .loan-modal-header, html.theme-light .loan-modal-footer { background: #faf9f6; } /* ── Investment ── */ html.theme-light .inv-sum-card { background: var(--surface); } html.theme-light .inv-alloc-card { background: var(--surface); border-color: rgba(0,0,0,.07); box-shadow: 0 1px 4px rgba(0,0,0,.04), 0 4px 20px rgba(0,0,0,.06); } html.theme-light .inv-tab.active { background: var(--surface); border-color: rgba(0,0,0,.08); border-bottom-color: var(--surface); } html.theme-light .inv-tabs { border-bottom-color: var(--border); } html.theme-light .inv-holdings-card { background: var(--surface); } html.theme-light .inv-modal { background: var(--surface); box-shadow: 0 24px 80px rgba(0,0,0,.14); border-color: rgba(0,0,0,.08); } html.theme-light .inv-modal-header, html.theme-light .inv-modal-footer { background: #faf9f6; } html.theme-light .inv-table tr:hover td { background: #f7f6f2; } html.theme-light .inv-table tr.selected td { background: rgba(43,128,212,.07); } html.theme-light .inv-table td { border-bottom-color: rgba(0,0,0,.06); } /* ── Portfolio ── */ html.theme-light .pf-sum-card { background: var(--surface); } html.theme-light .pf-panel { background: var(--surface); } html.theme-light .pf-health-item { background: #f5f4f0; } html.theme-light .pf-holding-row { background: #f5f4f0; } html.theme-light .pf-holding-row:hover { background: #eeecea; } html.theme-light .pf-fire-number { color: var(--accent3); } /* ── FIRE & Insights cards ── */ html.theme-light .fire-card, html.theme-light .insights-card { background: var(--surface); } html.theme-light .fire-stat { background: #f5f4f0; } html.theme-light .insight-item { border-bottom-color: rgba(0,0,0,.07); } /* ── Chart cards ── */ html.theme-light .chart-card { background: var(--surface); } /* ── Login screen ── */ html.theme-light #loginScreen { background: var(--bg); } html.theme-light .login-card { box-shadow: 0 24px 80px rgba(0,0,0,.12); } html.theme-light .btn-google:hover { box-shadow: 0 6px 24px rgba(0,0,0,.1); } html.theme-light .btn-guest:hover { background: rgba(0,184,125,.07); } /* ── Toast ── */ html.theme-light .toast { background: var(--surface); border-color: rgba(0,0,0,.1); box-shadow: 0 8px 32px rgba(0,0,0,.1); } html.theme-light .toast.success { border-color: rgba(0,184,125,.4); } html.theme-light .toast.error { border-color: rgba(232,64,64,.4); } /* ── Modals ── */ html.theme-light .modal { background: var(--surface); box-shadow: 0 24px 80px rgba(0,0,0,.14); border-color: rgba(0,0,0,.08); } html.theme-light .dropzone { border-color: var(--border); background: #faf9f6; } html.theme-light .dropzone.drag-over { background: rgba(43,128,212,.05); } html.theme-light .col-map-item { background: var(--bg); } html.theme-light .smart-modal { box-shadow: 0 24px 80px rgba(0,0,0,.14); } html.theme-light .smart-item:hover { background: rgba(43,128,212,.05); } html.theme-light .smart-item.selected { background: rgba(43,128,212,.09); } /* ── Preview table ── */ html.theme-light .preview-table td { border-bottom-color: rgba(0,0,0,.07); } /* ── Setup banner ── */ html.theme-light .setup-banner { background: rgba(43,128,212,.06); border-color: rgba(43,128,212,.22); } html.theme-light .setup-banner code { background: rgba(0,0,0,.06); } /* ── Guest banner ── */ html.theme-light .guest-banner { background: rgba(224,150,0,.07); border-color: rgba(224,150,0,.28); } /* ── Theme toggle button ── */ .theme-toggle { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; font-size: 1rem; line-height: 1; transition: background .2s, border-color .2s, transform .15s; flex-shrink: 0; } .theme-toggle:hover { border-color: var(--accent); transform: scale(1.08); } html.theme-light .theme-toggle { background: var(--surface); box-shadow: 0 1px 4px rgba(0,0,0,.07); } /* ── User pill ── */ html.theme-light .user-pill { background: var(--surface); border-color: rgba(0,0,0,.1); box-shadow: 0 1px 4px rgba(0,0,0,.06); } html.theme-light .user-menu-item:hover { background: var(--surface2); } html.theme-light .user-menu-sep { background: var(--border); }