/* ===========================================================
   Finralis v2 — design tokens + redesigned shell/dashboard.
   Loaded ALONGSIDE styles.css (after it) on pages served from
   templates_v2/. Anything not explicitly overridden here (forms,
   flash alerts, achievement toasts, footer) still inherits its
   base rules from styles.css — this file only re-skins the shell
   chrome and supplies new dashboard-specific components.
   =========================================================== */

/* ---------- 1. Tokens ---------- */
:root {
    --paper: #f5f8f7;
    --surface: #ffffff;
    --surface-sunken: #edf2f0;
    --ink: #16211f;
    --ink-soft: #4c5a57;
    --ink-faint: #83918d;
    --line: #dde3df;
    --line-soft: #e8ece9;

    /* Brand accent — matches the app's existing --color-accent */
    --accent: #3a7d7c;
    --accent-deep: #2c5d5c;
    --accent-bg: #e3eeed;

    /* "Growing" — investment / long-horizon money, distinct from spendable */
    --growing: #55588f;
    --growing-deep: #3d3f6b;
    --growing-bg: #e7e7f3;

    /* Semantic state — reuses the app's existing success/danger/warning hues */
    --good: #16a34a;
    --good-bg: rgba(22, 163, 74, 0.1);
    --warn: #b07d2a;
    --warn-bg: rgba(176, 125, 42, 0.1);
    --critical: #dc2626;
    --critical-bg: rgba(220, 38, 38, 0.1);

    --shadow-sm: 0 1px 2px rgba(22, 33, 31, 0.05);
    --shadow: 0 1px 2px rgba(22, 33, 31, 0.05), 0 10px 28px -16px rgba(22, 33, 31, 0.22);

    --sans: "Nunito Sans", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
    /* Deliberately NOT a coding-monospace stack: those (Consolas, SF Mono, Menlo)
       slash their zero to disambiguate 0/O in source code, which reads as a
       typo in a dollar figure. Nunito Sans's zero is a plain oval, so numerals
       use it too — tabular-nums still keeps digit columns aligned. */
    --mono: var(--sans);
}

@media (prefers-color-scheme: dark) {
    :root {
        --paper: #121a18;
        --surface: #182320;
        --surface-sunken: #0e1615;
        --ink: #eef3f1;
        --ink-soft: #a9b7b3;
        --ink-faint: #6d7c78;
        --line: #263330;
        --line-soft: #202b28;

        --accent: #6cb8b5;
        --accent-deep: #94d3d0;
        --accent-bg: #1b3130;

        --growing: #9a9de0;
        --growing-deep: #b7b9ea;
        --growing-bg: #232449;

        --good: #4fbf78;
        --good-bg: rgba(79, 191, 120, 0.16);
        --warn: #e2ac5c;
        --warn-bg: rgba(226, 172, 92, 0.16);
        --critical: #e88579;
        --critical-bg: rgba(232, 133, 121, 0.16);

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
        --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 28px -16px rgba(0, 0, 0, 0.6);

        /* Alias the legacy (pre-v2) token names to the dark palette above.
           Pages not yet individually reskinned (Analytics) are built entirely
           from these — redefining them here covers every such class in one
           shot instead of overriding each one by hand. Hardcoded hex colors
           (not var()-based) still need their own explicit dark overrides
           further down, since aliasing can't reach those. */
        --color-bg: #0e1615;
        --color-card-bg: #182320;
        --color-card-header: #0e1615;
        --color-card-border: #263330;
        --color-text-primary: #eef3f1;
        --color-text-secondary: #a9b7b3;
        --color-accent: #6cb8b5;
        --color-accent-hover: #94d3d0;
        --color-success: #4fbf78;
        --color-danger: #e88579;
        --color-warning: #e2ac5c;
        --color-shadow-light: rgba(0,0,0,0.3);
        --color-shadow-medium: rgba(0,0,0,0.35);
        --color-shadow-dark: rgba(0,0,0,0.4);
        --color-shadow-hover: rgba(0,0,0,0.35);
    }
}
:root[data-theme="dark"] {
    --paper: #121a18; --surface: #182320; --surface-sunken: #0e1615;
    --ink: #eef3f1; --ink-soft: #a9b7b3; --ink-faint: #6d7c78;
    --line: #263330; --line-soft: #202b28;
    --accent: #6cb8b5; --accent-deep: #94d3d0; --accent-bg: #1b3130;
    --growing: #9a9de0; --growing-deep: #b7b9ea; --growing-bg: #232449;
    --good: #4fbf78; --good-bg: rgba(79, 191, 120, 0.16);
    --warn: #e2ac5c; --warn-bg: rgba(226, 172, 92, 0.16);
    --critical: #e88579; --critical-bg: rgba(232, 133, 121, 0.16);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 28px -16px rgba(0, 0, 0, 0.6);
    --color-bg: #0e1615; --color-card-bg: #182320; --color-card-header: #0e1615;
    --color-card-border: #263330; --color-text-primary: #eef3f1; --color-text-secondary: #a9b7b3;
    --color-accent: #6cb8b5; --color-accent-hover: #94d3d0;
    --color-success: #4fbf78; --color-danger: #e88579; --color-warning: #e2ac5c;
    --color-shadow-light: rgba(0,0,0,0.3); --color-shadow-medium: rgba(0,0,0,0.35);
    --color-shadow-dark: rgba(0,0,0,0.4); --color-shadow-hover: rgba(0,0,0,0.35);
}
:root[data-theme="light"] {
    --paper: #f5f8f7; --surface: #ffffff; --surface-sunken: #edf2f0;
    --ink: #16211f; --ink-soft: #4c5a57; --ink-faint: #83918d;
    --line: #dde3df; --line-soft: #e8ece9;
    --accent: #3a7d7c; --accent-deep: #2c5d5c; --accent-bg: #e3eeed;
    --growing: #55588f; --growing-deep: #3d3f6b; --growing-bg: #e7e7f3;
    --good: #16a34a; --good-bg: rgba(22, 163, 74, 0.1);
    --warn: #b07d2a; --warn-bg: rgba(176, 125, 42, 0.1);
    --critical: #dc2626; --critical-bg: rgba(220, 38, 38, 0.1);
    --shadow-sm: 0 1px 2px rgba(22, 33, 31, 0.05);
    --shadow: 0 1px 2px rgba(22, 33, 31, 0.05), 0 10px 28px -16px rgba(22, 33, 31, 0.22);
    --color-bg: #f9fafb; --color-card-bg: #ffffff; --color-card-header: #f1f3f2;
    --color-card-border: #cdd4d2; --color-text-primary: #1a2a2a; --color-text-secondary: #3a3a3a;
    --color-accent: #3a7d7c; --color-accent-hover: #2c5d5c;
    --color-success: #16a34a; --color-danger: #dc2626; --color-warning: #b07d2a;
    --color-shadow-light: rgba(0,0,0,0.05); --color-shadow-medium: rgba(0,0,0,0.06);
    --color-shadow-dark: rgba(0,0,0,0.08); --color-shadow-hover: rgba(0,0,0,0.07);
}

.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---------- 2. Shell ---------- */
html, body {
    background: var(--paper) !important;
    color: var(--ink) !important;
    font-family: var(--sans) !important;
    font-size: 17px;
}

.page-content { max-width: 1280px; }
.page-header .page-title { font-size: 1.7rem !important; }

.site-footer {
    background: transparent;
    color: var(--ink-faint);
    border-top: 1px solid var(--line);
    margin-top: 40px;
    padding: 20px 0 28px;
}
.site-footer-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.footer-links {
    display: flex;
    align-items: center;
    gap: 20px;
}
.site-footer a {
    color: var(--ink-soft);
    text-decoration: none;
    font-size: 13.5px;
}
.site-footer a:hover { color: var(--accent-deep); text-decoration: underline; }
.footer-copyright { font-size: 13px; color: var(--ink-faint); }
@media (max-width: 600px) {
    .site-footer-inner { flex-direction: column; text-align: center; gap: 10px; }
}

/* ---------- 3. Navbar ---------- */
.navbar {
    background-color: var(--surface) !important;
    border-bottom: 1px solid var(--line);
    box-shadow: none;
}
.navbar .navbar-brand { color: var(--ink) !important; font-weight: 800; letter-spacing: -0.01em; }
.navbar-nav .nav-link { color: var(--ink-soft) !important; }
.navbar-nav .nav-link:hover { color: var(--accent-deep) !important; }
.navbar-toggler { border-color: var(--line) !important; }
@media (prefers-color-scheme: dark) { .navbar-toggler-icon { filter: invert(1); } }
:root[data-theme="dark"] .navbar-toggler-icon { filter: invert(1); }
:root[data-theme="light"] .navbar-toggler-icon { filter: none; }

.dropdown-menu {
    background-color: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}
.dropdown-item { color: var(--ink-soft); }
.dropdown-item:hover, .dropdown-item:focus { background-color: var(--surface-sunken); color: var(--ink); }
.dropdown-divider { border-color: var(--line); }

.nav-avatar { border-color: var(--line); }

/* Split nav item: "Analytics" text navigates straight to the Overview page;
   the small caret next to it is the only thing that opens the dropdown. */
.nav-item-split { display: flex; align-items: center; }
.nav-item-split .nav-link:first-child { padding-right: 0.25rem; }
.dropdown-toggle-split-nav {
    padding: 0.5rem 0.5rem !important;
    margin-left: -0.1rem;
}
.dropdown-toggle-split-nav::after { margin-left: 0; vertical-align: 0.15em; }

.theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    border: 1px solid var(--line);
    background: var(--surface-sunken);
    color: var(--ink-soft);
    cursor: pointer;
    margin-right: 6px;
    transition: background 0.15s, color 0.15s;
}
.theme-toggle-btn:hover { background: var(--accent-bg); color: var(--accent-deep); }

/* ---------- 4. Alerts, flash messages + achievement toast (dark-aware) ---------- */
/* Generic alert base — covers any Bootstrap .alert on a v2 page, not just
   the ones inside .flash-messages (e.g. the error box on reset_password.html). */
.alert {
    background-color: var(--surface) !important;
    color: var(--ink) !important;
    border: 1px solid var(--line) !important;
}
.alert-danger {
    background-color: var(--critical-bg) !important;
    color: var(--critical) !important;
    border-color: var(--critical) !important;
}
@media (prefers-color-scheme: dark) { .btn-close { filter: invert(1); } }
:root[data-theme="dark"] .btn-close { filter: invert(1); }
:root[data-theme="light"] .btn-close { filter: none; }

.achievement-toast {
    background-color: var(--surface);
    color: var(--ink);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}
.achievement-toast-desc { color: var(--ink-soft); }

.hint-body {
    background-color: var(--surface-sunken) !important;
    color: var(--ink-soft) !important;
    border-left-color: var(--accent) !important;
}
.hint-btn { border-color: var(--accent) !important; color: var(--accent) !important; }
.hint-btn:hover { background: var(--accent) !important; }

/* ---------- 5. Page header ---------- */
.page-header .page-title { color: var(--ink); }
.page-header .btn-primary {
    background-color: var(--accent);
    border-color: var(--accent);
}
.page-header .btn-primary:hover { background-color: var(--accent-deep); border-color: var(--accent-deep); }

/* ---------- 6. Dashboard: hero split ---------- */
.dash-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}
.hero-tile {
    border-radius: 14px;
    padding: 20px 22px;
    background: var(--surface);
    border: 1px solid var(--line);
}
.hero-tile--spendable { background: var(--accent-bg); border-color: transparent; }
.hero-tile--growing { background: var(--growing-bg); border-color: transparent; }
.hero-label {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.hero-tile--spendable .hero-label { color: var(--accent-deep); }
.hero-tile--growing .hero-label { color: var(--growing-deep); }
.hero-figure {
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink);
}
.hero-figure.hidden-figure { letter-spacing: 0.1em; }
.hero-sub { font-size: 14.5px; color: var(--ink-soft); margin-top: 6px; }

/* ---------- 7. Reconciliation strip ---------- */
.recon-strip {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 11px 16px;
    margin-bottom: 16px;
    font-size: 15px;
    color: var(--ink-soft);
}
.recon-strip.is-balanced { border-color: var(--good); }
.recon-strip.is-drifted { border-color: var(--warn); }
.recon-dot {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.recon-strip.is-balanced .recon-dot { background: var(--good); box-shadow: 0 0 0 3px var(--good-bg); }
.recon-strip.is-drifted .recon-dot { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-bg); }
.recon-strip b { color: var(--ink); }
.recon-strip.is-balanced b { color: var(--good); }
.recon-strip.is-drifted b { color: var(--warn); }
.recon-strip a { color: inherit; text-decoration: underline; }

/* ---------- 8. Dashboard grid + panels ---------- */
.dash-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr 0.85fr;
    gap: 16px;
    align-items: start;
}
.dash-panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.dash-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
    font-weight: 700;
    font-size: 16px;
    color: var(--ink);
}
.dash-panel-head .subtext { font-weight: 500; font-size: 14px; color: var(--ink-faint); }
.dash-panel-body { padding: 14px 18px 18px; }

/* ---------- 9. Budget rows (real fill bars) ---------- */
.budget-row { padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.budget-row:last-child { border-bottom: none; }
.budget-row-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.budget-name { font-size: 15.5px; font-weight: 600; color: var(--ink); }
.budget-amt { font-size: 15px; font-weight: 600; }
.budget-track {
    height: 7px;
    border-radius: 100px;
    background: var(--surface-sunken);
    overflow: hidden;
}
.budget-fill { height: 100%; border-radius: 100px; transition: width 0.3s ease; }
.budget-fill.state-good { background: var(--good); }
.budget-fill.state-warn { background: var(--warn); }
.budget-fill.state-critical { background: var(--critical); }
.budget-amt.state-good { color: var(--good); }
.budget-amt.state-warn { color: var(--warn); }
.budget-amt.state-critical { color: var(--critical); }
.budget-sub { font-size: 13px; color: var(--ink-faint); margin-top: 4px; text-align: right; }

/* ---------- 10. Account / summary columns ---------- */
.acct-group-label {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin: 14px 0 6px;
}
.acct-group-label:first-child { margin-top: 0; }
.acct-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 0;
    font-size: 15px;
    color: var(--ink-soft);
    border-bottom: 1px solid var(--line-soft);
}
.acct-row:last-child { border-bottom: none; }
.acct-row.total-row {
    font-weight: 700;
    color: var(--ink);
    background-color: transparent !important;
    border-top: 1px solid var(--line);
}
.acct-row .val { font-weight: 600; color: var(--ink); }
.acct-empty { font-size: 14px; color: var(--ink-faint); padding: 6px 0; }
.acct-empty a { color: var(--accent-deep); }

.net-worth-panel .dash-panel-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.net-worth-value { font-size: 26px; font-weight: 700; color: var(--ink); }
.net-worth-panel .btn-icon-inline { color: var(--ink-soft) !important; }

/* ---------- 11. Recent activity ---------- */
.activity-group-hd {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-faint);
    padding: 2px 0 8px;
}
.activity-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.activity-row:last-child { border-bottom: none; }
.activity-dot {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.activity-dot.in { background: var(--good); }
.activity-dot.out { background: var(--ink-faint); }
.activity-mid { flex: 1; min-width: 0; }
.activity-merchant { font-size: 15px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity-cat { font-size: 13px; color: var(--ink-faint); }
.activity-amt { font-size: 15px; font-weight: 700; white-space: nowrap; }
.activity-amt.in { color: var(--good); }
.activity-amt.out { color: var(--ink); }
.activity-empty { font-size: 14px; color: var(--ink-faint); padding: 6px 0; }

/* ---------- 12. Opportunity card ---------- */
.opp-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    background: linear-gradient(135deg, var(--accent-bg), var(--surface));
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 16px;
}
.opp-text { font-size: 15px; line-height: 1.55; color: var(--ink-soft); max-width: 62ch; }
.opp-text b { color: var(--accent-deep); font-weight: 700; }
.opp-cta {
    font-size: 14px;
    font-weight: 700;
    color: var(--accent-deep);
    white-space: nowrap;
    border: 1px solid var(--accent);
    border-radius: 100px;
    padding: 7px 14px;
    text-decoration: none;
    flex-shrink: 0;
}
.opp-cta:hover { background: var(--accent-bg); }

/* ---------- 13b. Buttons ---------- */
.btn-secondary {
    background-color: var(--surface) !important;
    color: var(--accent-deep) !important;
    border-color: var(--line) !important;
}
.btn-secondary:hover { background-color: var(--surface-sunken) !important; color: var(--accent-deep) !important; }
.btn-tertiary {
    background-color: var(--surface) !important;
    color: var(--accent-deep) !important;
    border-color: var(--accent) !important;
}
.btn-tertiary:hover { background-color: var(--accent-bg) !important; }
.btn-outline {
    display: inline-block;
    background-color: var(--surface) !important;
    color: var(--ink-soft) !important;
    border: 1px solid var(--line) !important;
    border-radius: 8px;
    text-decoration: none;
}
.btn-outline:hover { background-color: var(--surface-sunken) !important; color: var(--ink) !important; }

/* Register page: password-requirements hover tooltip — hardcoded white/gray
   in the legacy stylesheet, would render as a light popup on a dark page. */
.requirements-toggle { color: var(--ink-faint) !important; }
.requirements-content {
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    color: var(--ink-soft) !important;
    box-shadow: var(--shadow) !important;
}

/* Bootstrap's .text-muted reads a fixed color that isn't dark-mode aware
   (used on Forgot Password copy, etc.) */
.text-muted { color: var(--ink-faint) !important; }

/* ---------- 14. Forms (Budgets/Accounts/Transactions add+edit) ---------- */
.form-card, .form-card-secondary {
    background: var(--surface) !important;
    border-color: var(--line) !important;
    box-shadow: var(--shadow-sm);
}
.form-card-header h2, .form-card-secondary-title { color: var(--ink); }
.form-subtitle, .form-hint, .optional-tag, .rate-type-badge, .rate-empty { color: var(--ink-faint) !important; }
.optional-tag { background: var(--surface-sunken) !important; border-color: var(--line) !important; }
.form-label { color: var(--ink) !important; font-size: 15px; }
.form-control, .form-select, textarea {
    background-color: var(--surface) !important;
    border-color: var(--line) !important;
    color: var(--ink) !important;
    font-size: 15px;
}
.form-control:focus, .form-select:focus, textarea:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 2px var(--accent-bg) !important;
}
.form-control::placeholder { color: var(--ink-faint); }
.input-prefix, .input-suffix { color: var(--ink-faint) !important; }
.input-suffix { background: var(--surface-sunken) !important; border-color: var(--line) !important; }
.pif-check-label { color: var(--ink) !important; }
.pif-badge { background: var(--surface-sunken) !important; color: var(--ink-faint) !important; }
select.form-select:disabled, input.form-control:disabled { background-color: var(--surface-sunken) !important; }

/* ---------- 15. Item rows (Budgets/Accounts/Investments lists, drag-reorder) ---------- */
.item-row {
    background-color: var(--surface) !important;
    color: var(--ink-soft);
}
.item-row:hover { background-color: var(--surface-sunken) !important; }
.item-row.item-header {
    background-color: var(--surface-sunken) !important;
    border-bottom-color: var(--accent) !important;
    color: var(--ink);
}
.item-name { color: var(--ink) !important; font-size: 15.5px; }
.item-balance, .item-value { color: var(--ink) !important; font-size: 15px; }
.item-type, .item-rate { color: var(--ink-faint) !important; }
.drag-handle, .row-expand-toggle { color: var(--ink-faint) !important; }
.item-row.item-row--stack { border-color: var(--line) !important; }
.item-row.item-row--stack .item-balance,
.item-row.item-row--stack.is-expanded .item-row-secondary { border-top-color: var(--line-soft) !important; }
.item-row.item-row--stack .item-balance::before,
.item-row.item-row--stack.is-expanded .item-row-secondary:not(.item-actions)::before { color: var(--ink-faint) !important; }
.no-data { color: var(--ink-faint) !important; }
.table-card, .accounts-card, .budgets-card { background-color: var(--surface) !important; border-color: var(--line) !important; box-shadow: var(--shadow-sm); }
.card-header {
    background-color: var(--surface-sunken) !important;
    color: var(--ink) !important;
    border-bottom-color: var(--line) !important;
    font-size: 15.5px;
}
/* Profile danger zone — restore the red emphasis the generic .card-header
   override above would otherwise flatten to plain ink. */
.profile-danger-card { border-color: var(--critical) !important; }
.profile-danger-card .card-header {
    background-color: var(--critical-bg) !important;
    color: var(--critical) !important;
    border-bottom-color: var(--critical) !important;
}
/* .profile-label (Profile page field labels) never had a color rule in
   either stylesheet — it fell through to Bootstrap's default body text
   color, invisible on a dark card. */
.profile-label { color: var(--ink) !important; }
.status-pill--success { color: var(--good) !important; background: var(--good-bg) !important; }
.status-pill--warning { color: var(--warn) !important; background: var(--warn-bg) !important; }
.status-pill--danger { color: var(--critical) !important; background: var(--critical-bg) !important; }
.profile-link-btn { color: var(--accent) !important; }
.item-row.total-row { background-color: transparent !important; border-top: 1px solid var(--line); }
.item-balance.state-good { color: var(--good) !important; }
.item-balance.state-warn { color: var(--warn) !important; }
.item-balance.state-critical { color: var(--critical) !important; }

/* ---------- 16. Tables (Transactions/Ledger/Allocate) ---------- */
/* Bootstrap tables read background from the --bs-table-bg custom property
   on the <table> itself (every cell inherits it) — overriding td/th alone
   isn't enough, the variable has to be reset at the source. */
.table, .accounts-table { --bs-table-bg: var(--surface); }
.table th, .accounts-table th {
    background-color: var(--surface-sunken) !important;
    color: var(--ink) !important;
    border-bottom-color: var(--line) !important;
    font-size: 13px;
}
.table td, .accounts-table td {
    border-bottom-color: var(--line-soft) !important;
    color: var(--ink-soft);
    font-size: 15px;
}
.table tbody tr:hover, .accounts-table tbody tr:hover { background-color: var(--surface-sunken); }
.text-muted { color: var(--ink-faint) !important; }

/* ---------- 17. Reconciliation delta (Allocate page) ---------- */
.allocate-delta-sticky { background-color: var(--surface) !important; border-color: var(--line) !important; }
.item-name-delta-amount { color: var(--ink) !important; }
.delta-positive, .delta.positive { color: var(--good) !important; }
.delta-negative, .delta.negative { color: var(--critical) !important; }
.delta-zero, .delta.zero { color: var(--ink-faint) !important; }
.alloc-preview { color: var(--accent-deep); }

/* ---------- 18. Summary blocks (Recurring Expenses totals) ---------- */
.summary-card { background: var(--accent-bg) !important; border-color: var(--line) !important; }
.summary-item:not(:last-child) { border-right-color: var(--line) !important; }
.summary-label { color: var(--ink-faint) !important; }
.summary-value { color: var(--ink) !important; }
.summary-subtext { color: var(--ink-faint) !important; }
.summary-divider { border-top-color: var(--line) !important; }

/* ---------- 19. Filters (Transactions/Ledger date + budget filter) ---------- */
.filter-pill {
    background: var(--surface) !important;
    border-color: var(--line) !important;
    color: var(--ink-soft) !important;
    font-size: 13px;
}
.filter-pill:hover { border-color: var(--accent) !important; color: var(--accent-deep) !important; }
.filter-pill.active { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; }
.date-filter-custom span { color: var(--ink-faint); }
.budget-filter-panel { background: var(--surface) !important; border-color: var(--line) !important; box-shadow: var(--shadow); }
.budget-filter-option { color: var(--ink-soft); }
.budget-filter-panel-actions { border-top-color: var(--line) !important; }
.btn-link { color: var(--accent-deep) !important; }

/* ---------- 20. Bootstrap modals (Investments: Update Value / Contribution) ---------- */
.modal-content { background-color: var(--surface) !important; color: var(--ink); border-color: var(--line) !important; }
.modal-header, .modal-footer { border-color: var(--line) !important; }
.modal-title { color: var(--ink); }
@media (prefers-color-scheme: dark) { .modal .btn-close { filter: invert(1); } }
:root[data-theme="dark"] .modal .btn-close { filter: invert(1); }
:root[data-theme="light"] .modal .btn-close { filter: none; }

/* ---------- 21. Account-type accent (Accounts page) ---------- */
.item-row[data-account-type="bank"] { border-left: 3px solid var(--accent) !important; }
.item-row[data-account-type="investment"] { border-left: 3px solid var(--growing) !important; }
.item-row[data-account-type="credit"], .item-row[data-account-type="loan"] { border-left: 3px solid var(--warn) !important; }
@media (max-width: 768px) { .item-row[data-account-type] { border-left-width: 4px !important; } }

/* ---------- 22. Date-grouped transaction rows ---------- */
.tx-date-group-row td {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-faint) !important;
    background: var(--surface-sunken) !important;
    border-bottom-color: var(--line) !important;
    padding: 6px 12px !important;
}
.tx-amount.in { color: var(--good) !important; font-weight: 700; }
.tx-amount.out { color: var(--ink) !important; font-weight: 700; }

/* ---------- 23. Analytics — hardcoded hex colors the token alias can't reach ---------- */
/* Section 1's --color-* aliasing covers every var()-based Analytics class
   (chart-card, ratio-tile, rate-summary, health-row, etc.) automatically.
   These few classes bake literal hex values into the rule instead of
   reading a variable, so they need their own dark-mode overrides. */
:root[data-theme="dark"] .analytics-positive,
:root[data-theme="dark"] .ratio-good .ratio-tile-value,
:root[data-theme="dark"] .rate-earned .rate-summary-value { color: var(--good) !important; }
:root[data-theme="dark"] .analytics-negative,
:root[data-theme="dark"] .ratio-poor .ratio-tile-value,
:root[data-theme="dark"] .rate-cost .rate-summary-value { color: var(--critical) !important; }
:root[data-theme="dark"] .ratio-good { border-left-color: var(--good) !important; }
:root[data-theme="dark"] .ratio-warn { border-left-color: var(--warn) !important; }
:root[data-theme="dark"] .ratio-warn .ratio-tile-value { color: var(--warn) !important; }
:root[data-theme="dark"] .ratio-poor { border-left-color: var(--critical) !important; }
:root[data-theme="dark"] .opportunity-item-savings {
    background: var(--good-bg) !important;
    border-color: var(--good) !important;
}
:root[data-theme="dark"] .opportunity-item-debt {
    background: var(--warn-bg) !important;
    border-color: var(--warn) !important;
}
@media (prefers-color-scheme: dark) {
    .analytics-positive, .ratio-good .ratio-tile-value, .rate-earned .rate-summary-value { color: var(--good) !important; }
    .analytics-negative, .ratio-poor .ratio-tile-value, .rate-cost .rate-summary-value { color: var(--critical) !important; }
    .ratio-good { border-left-color: var(--good) !important; }
    .ratio-warn { border-left-color: var(--warn) !important; }
    .ratio-warn .ratio-tile-value { color: var(--warn) !important; }
    .ratio-poor { border-left-color: var(--critical) !important; }
    .opportunity-item-savings { background: var(--good-bg) !important; border-color: var(--good) !important; }
    .opportunity-item-debt { background: var(--warn-bg) !important; border-color: var(--warn) !important; }
}

/* ---------- 13. Responsive ---------- */
@media (max-width: 992px) {
    .dash-grid { grid-template-columns: 1fr; }
    .dash-hero { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .opp-card { flex-direction: column; align-items: flex-start; }
}