/* ==========================================================================
   POLISH LAYER — loaded last (after style.css, mobile.css, desktop.css).
   Phase 1 of the UI cleanup: one set of type / spacing / radius tokens, a floor
   under the tiny text, lighter label weights, and a calmer top bar. Removing the
   <link> restores the previous look exactly.

   Type scale (px):  caption 11.5 · label 12 · body 13 · emphasis 15 · title 18 · figure 24 · hero 32
   Weights:          400 body · 500 labels · 600 headings · 700 key figures only
   Spacing (4pt):    4 · 8 · 12 · 16 · 24 · 32
   Radius:           8 controls · 12 cards
   ========================================================================== */

:root {
    --t-caption: 11.5px;
    --t-label: 12px;
    --t-body: 13px;
    --t-emphasis: 15px;
    --t-title: 18px;
    --t-figure: 24px;
    --t-hero: 32px;

    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;

    --r-control: 8px;
    --r-card: 12px;
}

/* Numbers line up in columns and don't jitter when prices update */
body,
.privacy-masked,
.asset-category-value,
td,
th {
    font-variant-numeric: tabular-nums;
}

/* One font: the sidebar title was the only place still asking for Outfit */
.sidebar-title {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif !important;
}

/* ---------- LABELS: bigger, lighter, calmer (all sizes) ---------- */
/* These were 10–10.5px at weight 700–800, mostly uppercase and letter-spaced */
.asset-category-label,
.nw-hero-stat-label,
.modern-card-label,
.portfolio-tool-label {
    font-size: var(--t-caption) !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em !important;
}
.modern-card-label {
    text-transform: none !important;
}
.modern-card-status {
    font-size: var(--t-caption) !important;
    font-weight: 700 !important;
}
.app-sidebar .sidebar-section-label {
    font-size: var(--t-caption) !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
}

/* Small supporting text: nothing below 11.5px */
.invested-label,
.invested-val,
.pnl-label-total,
.pnl-label-day,
.pnl-val-total,
.pnl-val-day,
.fs-row-weight,
.alloc-breakdown-pct,
.alloc-breakdown-name,
.alloc-breakdown-amt,
.upcoming-activity-sub,
.upcoming-activity-days,
.modern-card-meta,
.modern-card-btn-edit,
.compare-note,
.compare-stats-warn,
.range-btn,
.compare-chip {
    font-size: var(--t-caption) !important;
}
.pnl-label-total,
.pnl-label-day,
.invested-label,
.modern-card-meta {
    font-weight: 500 !important;
}
.pnl-val-total,
.pnl-val-day {
    font-weight: 700 !important;
}

/* Filter / range chips: one weight, not a mix of 600 and 700 */
.range-btn,
.compare-chip {
    font-weight: 600 !important;
}

/* ---------- OVERVIEW: hide chart cards that have nothing to show yet ---------- */
.overview-insight-card.is-empty {
    display: none !important;
}

/* ---------- DESKTOP TOP BAR: quieter, one visual weight per item ---------- */
@media (min-width: 769px) {

    /* Sync: a plain muted line instead of a lavender pill */
    #dashToolbar #last-sync-info {
        background: transparent !important;
        color: var(--m-muted) !important;
        font-size: var(--t-label) !important;
        font-weight: 500 !important;
        padding: 0 var(--sp-1) !important;
    }
    #dashToolbar #last-sync-info #last-sync-time {
        font-weight: 600 !important;
    }

    /* Risk profile: neutral chip. The coloured pink/blue/green fill competed with the
       primary "Add entry" button, and the long "(Actual: …)" text is cut with an ellipsis
       (full text stays in the tooltip). */
    #dashToolbar #nwRiskProfileBadge {
        color: var(--m-muted) !important;
        background: transparent !important;
        border: 1px solid var(--m-hairline) !important;
        font-size: var(--t-label) !important;
        font-weight: 500 !important;
        max-width: 190px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    #dashToolbar #nwRiskProfileBadge #nwRiskProfileVal {
        text-decoration: none !important;
        color: var(--m-text);
        font-weight: 600 !important;
    }

    /* Sidebar section headings sit a little further from the item above */
    .app-sidebar .sidebar-section-label {
        margin-top: var(--sp-2);
    }
}

/* ---------- MOBILE: raise the 10px floor ---------- */
@media (max-width: 768px) {
    #assetBreakdownGrid .asset-category-label,
    .analytics-tab-btn span,
    .nav-label,
    .asset-category-label,
    .modern-card-label {
        font-size: var(--t-caption) !important;
    }
    .modern-card-meta,
    .invested-label,
    .pnl-label-total,
    .pnl-label-day,
    .fs-row-weight {
        font-size: var(--t-label) !important;
    }
}

/* ==========================================================================
   PHASE 2 — SHARED COMPONENTS
   One active colour (indigo), 12px cards, 600 weight on controls, no emoji tabs.
   ========================================================================== */

/* Active state = indigo everywhere (was black, navy and amber depending on the component) */
.analytics-tab-btn.active,
.analytics-tabs .analytics-tab-btn.active,
.analytics-tabs button.analytics-tab-btn.active,
body.dark-mode .analytics-tabs button.analytics-tab-btn.active {
    background: var(--m-accent-fill) !important;
    border-color: var(--m-accent-fill) !important;
    color: #ffffff !important;
}
.compare-chip.on {
    background: var(--m-accent-soft) !important;
    border-color: var(--m-accent) !important;
    color: var(--m-accent) !important;
}
.range-btn.active {
    color: var(--m-accent) !important;
}

/* Controls: 600 not 700 */
.analytics-tab-btn,
.modern-card-btn,
.modern-card-btn-edit,
.portfolio-tool-btn,
#dashToolbar .dash-toolbar-btn,
#dashToolbar .dash-toolbar-btn-primary {
    font-weight: 600 !important;
}
.analytics-tab-btn {
    font-size: var(--t-body) !important;
}

/* Cards: one radius */
.asset-allocation-chart-card,
.networth-side-card,
.portfolio-tool-btn {
    border-radius: var(--r-card) !important;
}
.master-wealth-card {
    border-radius: 16px !important;
}

/* Emoji tab icons out: the sidebar and bottom bar use line icons, so tabs shouldn't mix styles */
.holdings-type-tabs .tab-icon {
    display: none !important;
}

/* ---------- MOBILE ---------- */
@media (max-width: 768px) {
    /* Easier to hit: buttons inside cards and filter chips */
    .modern-card-btn,
    .modern-card-btn-edit,
    .btn-action-small,
    .range-btn,
    .compare-chip {
        min-height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* The AI button floated over card content (it covered the XIRR tile): smaller and
       slightly see-through so what's under it stays readable, solid when pressed */
    #ai-chat-fab {
        width: 44px !important;
        height: 44px !important;
        font-size: 1.15rem !important;
        opacity: 0.85;
    }
    #ai-chat-fab:active {
        opacity: 1;
    }
}

/* ==========================================================================
   PHASE 3 — TABLES, GOALS, REALIZED P&L, HISTORY, TOAST
   ========================================================================== */

/* ---------- Tables: nothing under 11.5px, headers in sentence case ---------- */
.cell-sub,
.table-action-btn,
.status-pill,
.asset-data-table th,
.asset-data-table .num.sortable {
    font-size: var(--t-caption) !important;
}
.asset-data-table th,
.asset-data-table .num.sortable {
    text-transform: none !important;
    letter-spacing: 0.01em !important;
    font-weight: 600 !important;
}
.status-pill {
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 600 !important;
}
.table-action-btn {
    font-weight: 600 !important;
}

/* ---------- Toast: bottom-centre, clear of the app bar ---------- */
#successToast {
    top: auto !important;
    bottom: 28px;
    max-width: min(520px, calc(100vw - 32px));
    border-radius: var(--r-card) !important;
    padding: var(--sp-3) var(--sp-4) !important;
    font-size: var(--t-body);
    font-weight: 500 !important;
    line-height: 1.45;
    animation: toastRise 0.25s ease-out !important;
}
@keyframes toastRise {
    from { transform: translate(-50%, 12px); opacity: 0; }
    to { transform: translate(-50%, 0); opacity: 1; }
}

/* ---------- Desktop sidebar: the highlight follows the page that is actually open ---------- */
@media (min-width: 769px) {
    body.no-scroll .app-sidebar .sidebar-primary-nav .sidebar-nav-item.active {
        background: transparent !important;
        color: var(--m-muted) !important;
        font-weight: 600 !important;
    }
    body.no-scroll .app-sidebar .sidebar-primary-nav .sidebar-nav-item.active::before {
        display: none !important;
    }
    .app-sidebar .sidebar-item.sidebar-current {
        background: var(--m-accent-soft) !important;
        color: var(--m-accent) !important;
        font-weight: 600 !important;
    }
}

/* ---------- GOALS ---------- */
/* The SIP card and the On track / Deadline / Shortfall strip read as one card */
#overall-sip-summary-container {
    margin-bottom: 0 !important;
}
#overall-sip-summary-container .merged-sip-card {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-bottom: 1px solid var(--m-hairline) !important;
    box-shadow: none !important;
}
#goals-summary-strip .goals-summary-tile {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-top: 0 !important;
    margin-top: 0 !important;
}
/* Coloured dot instead of an emoji tile; long goal names wrap instead of "EMERGENC…" */
#goals-summary-strip .gs-tile-icon {
    width: 8px !important;
    height: 8px !important;
    min-width: 8px;
    padding: 0 !important;
    border-radius: 50% !important;
    align-self: flex-start;
    margin-top: 5px;
    font-size: 0 !important;
}
#goals-summary-strip .gs-tile-value {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: var(--t-emphasis) !important;
    font-weight: 600 !important;
    line-height: 1.25;
}
.goals-summary-tile .gs-tile-label {
    text-transform: none !important;
    font-size: var(--t-caption) !important;
    letter-spacing: 0 !important;
    font-weight: 500 !important;
}
.pvi-nums > div {
    min-width: 0;
}


/* ---------- REALIZED P&L ---------- */
/* Same indigo hero as Overview, instead of a one-off dark navy block */
.pnl-hero {
    background: linear-gradient(135deg, #312e81 0%, #4f46e5 100%);
    color: #ffffff;
    padding: var(--sp-5);
    border-radius: 16px;
}
.pnl-hero-label {
    font-size: var(--t-label);
    font-weight: 500;
    opacity: 0.8;
}
.pnl-hero-value {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: var(--sp-1) 0 var(--sp-3);
}
.pnl-hero-split {
    display: flex;
    gap: var(--sp-5);
    flex-wrap: wrap;
    font-size: var(--t-label);
    opacity: 0.9;
}
.pnl-hero-split b {
    font-weight: 600;
    margin-left: var(--sp-1);
}

/* One flat stat row per tab, replacing the green/red box inside a box */
.pnl-stat-row {
    display: flex;
    gap: var(--sp-5);
    flex-wrap: wrap;
    padding: var(--sp-3) 0;
}
.pnl-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.pnl-stat-label {
    font-size: var(--t-caption);
    font-weight: 500;
    color: var(--m-muted);
}
.pnl-stat-value {
    font-size: var(--t-title);
    font-weight: 700;
    color: var(--m-text);
}
.pnl-stat-value.pnl-gain { color: #059669; }
.pnl-stat-value.pnl-loss { color: #dc2626; }

/* Mutual Funds / Direct Stocks switch: the active one is filled, the other is plain */
#pnlTabMF,
#pnlTabStocks {
    background: var(--m-surface) !important;
    color: var(--m-muted) !important;
    border: 1px solid var(--m-hairline) !important;
    box-shadow: none !important;
    font-weight: 600 !important;
}
#pnlTabMF.is-active,
#pnlTabStocks.is-active {
    background: var(--m-accent-fill) !important;
    border-color: var(--m-accent-fill) !important;
    color: #ffffff !important;
}

/* ---------- HISTORY / REALIZED cards ---------- */
/* Units, NAV and notes aren't gains, so they aren't green; real P&L values keep their inline colour */
/* mobile.css painted every .history-card-value dark green, which also overrode the inline red:
   a LOSS (e.g. -₹10,802) showed in green. Plain values are neutral again; gains and losses use
   their own inline colour (darkened a little for contrast on white). */
body:not(.dark-mode) .history-card-value {
    color: var(--m-text) !important;
}
body:not(.dark-mode) .history-card-value[style*="#10b981"] { color: #047857 !important; }
body:not(.dark-mode) .history-card-value[style*="#ef4444"] { color: #dc2626 !important; }
body.dark-mode .history-card-value[style*="#10b981"] { color: #34d399 !important; }
body.dark-mode .history-card-value[style*="#ef4444"] { color: #f87171 !important; }
.modern-history-card .history-card-value[style*="italic"] {
    font-style: normal !important;
    font-weight: 500 !important;
    color: var(--m-muted) !important;
}
.history-card-title-text {
    white-space: normal !important;
    overflow: visible !important;
}
/* Filter chips: even spacing, no crowding */
.unified-history-pill {
    font-size: var(--t-label) !important;
    font-weight: 600 !important;
    padding: 6px 12px !important;
    white-space: nowrap;
}
#commonPortfolioHistoryModal .unified-modal-header h3,
#unified-pnl-sidebar h3 {
    font-weight: 700 !important;
}
@media (max-width: 768px) {
    /* Title wraps instead of running under the Export button */
    #commonPortfolioHistoryModal .unified-modal-header {
        flex-wrap: wrap;
        gap: var(--sp-2);
    }
}

/* History table: names and notes may shrink so the Amount column stays inside the card */
#commonPortfolioHistoryBody .asset-data-table td.cell-name {
    max-width: 230px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#commonPortfolioHistoryBody .asset-data-table td:nth-child(8) {
    max-width: 150px;
}
#commonPortfolioHistoryBody .asset-data-table th,
#commonPortfolioHistoryBody .asset-data-table td {
    padding-left: var(--sp-3);
    padding-right: var(--sp-3);
}

/* ---------- Icon-only action buttons (line icons replaced the ✏️ 🗑️ emoji) ---------- */
/* The emoji carried their own colour; a line icon follows the button's text colour, which some
   of these buttons set to white. Buttons with their own inline colour (History cards) keep it. */
button[title]:has(> svg.icon-svg:only-child) {
    color: var(--m-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
button[title]:has(> svg.icon-svg:only-child):hover {
    color: var(--m-accent);
}
button[title^="Delete"]:has(> svg.icon-svg:only-child):hover,
button[title^="Remove"]:has(> svg.icon-svg:only-child):hover {
    color: #dc2626;
}

/* ==========================================================================
   DARK MODE — one three-step palette (it used 5 different darks plus translucent layers)
     page      #141b2d   the canvas
     surface   #1c2540   cards, bars, sidebar
     raised    #25304d   full pages, dialogs, menus
   Inputs sit slightly LIGHTER than their surface (they were darker, which read as holes).
   ========================================================================== */
:root[data-theme="dark"],
body.dark-mode {
    --dk-page: #141b2d;
    --dk-surface: #1c2540;
    --dk-raised: #25304d;
    --dk-line: rgba(255, 255, 255, 0.10);
    --dk-text: #e8ecf4;
    --dk-muted: #a3aec4;

    --m-bg: var(--dk-page);
    --m-surface: var(--dk-surface);
    --m-surface-blur: var(--dk-surface);
    --m-hairline: var(--dk-line);
    --m-text: var(--dk-text);
    --m-muted: var(--dk-muted);

    --bg-main: var(--dk-page);
    --bg-card: var(--dk-surface);
    --bg-sidebar: var(--dk-surface);
    --bg-input: rgba(255, 255, 255, 0.06);
    --card-bg: var(--dk-surface);
    --input-bg: rgba(255, 255, 255, 0.06);
    --border-color: var(--dk-line);
    --text-main: var(--dk-text);
    --text-dim: var(--dk-muted);

    --stw-surface: var(--dk-surface);
    --stw-surface-alt: var(--dk-raised);
    --stw-border: var(--dk-line);
}

:root[data-theme="dark"],
:root[data-theme="dark"] body,
body.dark-mode {
    background: var(--dk-page) !important;
}

body.dark-mode .app-sidebar,
body.dark-mode #app-header-bar,
body.dark-mode .tab-content .networth-side-card,
body.dark-mode .asset-allocation-chart-card,
body.dark-mode .pvi-card,
body.dark-mode .merged-sip-card,
body.dark-mode .goals-summary-tile,
body.dark-mode .asset-table-wrap {
    background: var(--dk-surface) !important;
    border-color: var(--dk-line) !important;
}

/* Full pages and dialogs are one step above the cards */
body.dark-mode .app-page,
body.dark-mode .modal-content {
    background: var(--dk-raised) !important;
}
body.dark-mode .app-page .unified-modal-header,
body.dark-mode .modal-content .unified-modal-header {
    background: var(--dk-raised) !important;
    border-color: var(--dk-line) !important;
}

/* Inputs: a touch lighter than what they sit on, with a visible edge */
body.dark-mode input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
body.dark-mode select,
body.dark-mode textarea,
body.dark-mode .wiz-input {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: var(--dk-text) !important;
}
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: #7f8aa3 !important;
}

/* Sidebar separates from the canvas with a line instead of a near-identical fill */
body.dark-mode .app-sidebar {
    border-right: 1px solid var(--dk-line) !important;
}

/* Text: soft white instead of pure #fff, which glares on navy. Card values that set their own
   colour (gain/loss green and red, status) keep it. */
body.dark-mode .asset-category-value,
body.dark-mode .networth-stat-value,
body.dark-mode .modern-card-value:not([style*="color"]) {
    color: var(--dk-text) !important;
}

/* The three big pages (Add Transaction, Configure, History) had their own hard-coded dark rules
   at ID level (#182030 page, #0f1626 inputs); bring them onto the same palette. */
body.dark-mode #unifiedAddTxModal,
body.dark-mode #unifiedConfigModal,
body.dark-mode #commonPortfolioHistoryModal {
    background: var(--dk-raised) !important;
    color: var(--dk-text) !important;
}
body.dark-mode #unifiedAddTxModal h3,
body.dark-mode #unifiedConfigModal h3,
body.dark-mode #commonPortfolioHistoryModal h3 {
    color: var(--dk-text) !important;
    font-weight: 700 !important;
}
body.dark-mode #unifiedAddTxModal label,
body.dark-mode #unifiedAddTxModal .wiz-label,
body.dark-mode #unifiedConfigModal label,
body.dark-mode #unifiedConfigModal .wiz-label,
body.dark-mode #commonPortfolioHistoryModal label,
body.dark-mode #commonPortfolioHistoryModal span {
    color: var(--dk-muted) !important;
}
body.dark-mode #unifiedAddTxModal input:not([type="checkbox"]):not([type="radio"]),
body.dark-mode #unifiedAddTxModal select,
body.dark-mode #unifiedAddTxModal textarea,
body.dark-mode #unifiedConfigModal input:not([type="checkbox"]):not([type="radio"]),
body.dark-mode #unifiedConfigModal select,
body.dark-mode #unifiedConfigModal textarea,
body.dark-mode #commonPortfolioHistoryModal input:not([type="checkbox"]):not([type="radio"]),
body.dark-mode #commonPortfolioHistoryModal select,
body.dark-mode #commonPortfolioHistoryModal textarea {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: var(--dk-text) !important;
}

/* Dark: the active pill in the transaction type switch is the app's indigo, not a one-off blue */
body.dark-mode .unified-type-pill.active,
body.dark-mode .segmented-control .control-btn.active {
    background: var(--m-accent-fill) !important;
    color: #ffffff !important;
}

/* Dark mode contrast fixes found by scanning every text element (WCAG AA wants 4.5:1; these were 1.7–3.2) */
body.dark-mode #dashToolbar .dash-toolbar-btn-primary,
body.dark-mode #dashToolbar .dash-toolbar-btn-primary * {
    color: #ffffff !important;      /* label was slate-400 on indigo */
}
body.dark-mode .app-sidebar .sidebar-section-label {
    color: var(--dk-muted) !important;
    opacity: 1 !important;
}
body.dark-mode .compare-stats-warn,
body.dark-mode .compare-note {
    color: var(--dk-muted) !important;
}

/* Text inside a filled (active) control follows the control's own white, not the generic slate span colour */
body.dark-mode .analytics-tab-btn.active *,
body.dark-mode .segmented-control .control-btn.active *,
body.dark-mode .unified-type-pill.active * {
    color: inherit !important;
}
body.dark-mode .segmented-control .control-btn.active .goal-tab-count {
    background: rgba(0, 0, 0, 0.22) !important;
}
body.dark-mode #successToast,
body.dark-mode #successToast * {
    color: #ffffff !important;
}
body.dark-mode .compare-chip.on {
    color: #c7d2fe !important;
}
body.dark-mode #notif-badge {
    background: #dc2626 !important;
}

/* Fund / goal card buttons stayed white and pale blue on dark cards */
body.dark-mode .modern-card-btn {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--dk-text) !important;
    border-color: var(--dk-line) !important;
}
body.dark-mode .modern-card-btn-edit {
    background: rgba(129, 140, 248, 0.18) !important;
    color: #c7d2fe !important;
    border-color: rgba(129, 140, 248, 0.35) !important;
}

/* Safety net: templates hard-code slate text and pale-slate fills inline, which only work on white.
   Map the common ones to the dark palette so chips and notes stay readable. */
body.dark-mode [style*="color:#475569"], body.dark-mode [style*="color: #475569"],
body.dark-mode [style*="color:#334155"], body.dark-mode [style*="color: #334155"],
body.dark-mode [style*="color:#64748b"], body.dark-mode [style*="color: #64748b"] {
    color: var(--dk-muted) !important;
}
body.dark-mode [style*="color:#0f172a"], body.dark-mode [style*="color: #0f172a"],
body.dark-mode [style*="color:#1e293b"], body.dark-mode [style*="color: #1e293b"] {
    color: var(--dk-text) !important;
}
body.dark-mode [style*="background:#f1f5f9"], body.dark-mode [style*="background: #f1f5f9"],
body.dark-mode [style*="background:#f8fafc"], body.dark-mode [style*="background: #f8fafc"] {
    background: rgba(255, 255, 255, 0.06) !important;
}
body.dark-mode .unified-history-pill.active {
    background: var(--m-accent-fill) !important;
    border-color: var(--m-accent-fill) !important;
    color: #ffffff !important;
}

/* ---------- DARK MODE: remaining dialogs ---------- */
/* Status colours that were tuned for white (#059669 etc.) are lifted so they read on navy */
:root[data-theme="dark"],
body.dark-mode {
    --stw-success: #34d399;
    --stw-danger: #f87171;
    --stw-warning: #fbbf24;
}
/* Year-wise plan: Export CSV was pale indigo on blue (3.4:1) */
body.dark-mode .ysp-page .table-action-btn {
    color: #ffffff !important;
}
/* Audit Manager history cards: their text colours were fixed for a white card */
body.dark-mode span.inline-style-1156,
body.dark-mode .inline-style-1156 { color: #ffffff !important; }
body.dark-mode .inline-style-1157,
body.dark-mode .inline-style-1159 { color: var(--dk-muted) !important; }
body.dark-mode .inline-style-1158 { color: var(--dk-text) !important; }
body.dark-mode .inline-style-1160 { color: #cbd5e1 !important; }

/* One input look in every dialog and page (some older rules painted selects near-black) */
html body.dark-mode .wiz-input,
html body.dark-mode .modal-content input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html body.dark-mode .modal-content select,
html body.dark-mode .modal-content textarea,
html body.dark-mode .app-page input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html body.dark-mode .app-page select,
html body.dark-mode .app-page textarea {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: var(--dk-text) !important;
}

/* ID-level input rules in older stylesheets (loan, link-to-goal, goal wizard) - same look as everywhere */
html body.dark-mode #loanWizard .wiz-input,
html body.dark-mode #loanWizard input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html body.dark-mode #loanWizard select,
html body.dark-mode #loanWizard textarea,
html body.dark-mode #addInvestmentToGoalModal .wiz-input,
html body.dark-mode #addInvestmentToGoalModal input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html body.dark-mode #addInvestmentToGoalModal select,
html body.dark-mode #addInvestmentToGoalModal textarea,
html body.dark-mode #simpleGoalWizardModal .wiz-input,
html body.dark-mode #simpleGoalWizardModal input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html body.dark-mode #simpleGoalWizardModal select,
html body.dark-mode #simpleGoalWizardModal textarea {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: var(--dk-text) !important;
}

/* Filled buttons still using the old navy (#002b5c, e.g. Save Expense) take the app's indigo */
button[style*="background: #002b5c"],
button[style*="background:#002b5c"] {
    background: var(--m-accent-fill) !important;
}

/* ---------- Leftover details ---------- */
/* Primary save buttons: flat indigo like every other primary button (were a purple gradient) */
.btn-wiz-save,
.btn-wiz-save-small {
    background: var(--m-accent-fill) !important;
    background-image: none !important;
    box-shadow: none !important;
}
.btn-wiz-save:hover,
.btn-wiz-save-small:hover {
    filter: brightness(1.08);
}

/* Dark: the strip behind Save / Cancel matched the canvas, leaving a visible band inside the page */
body.dark-mode .app-page div:has(> .btn-wiz-save),
body.dark-mode .modal-content div:has(> .btn-wiz-save) {
    background: transparent !important;
}

/* Dark: small dialogs (Add Expense, …) - the title bar takes the dialog's own colour instead of a darker strip */
body.dark-mode .modal-content:not(.app-page) > div:first-child {
    background: transparent !important;
}

/* The mobile app-bar logo uses the transparent mark too (the PNG had a white box around it) */
@media (max-width: 768px) {
    #dashToolbar::before {
        background-image: url("icons/logo-mark.png") !important;
        background-size: 34px 34px !important;
        background-position: -3px center !important;
    }
}
.sidebar-logo {
    transform: scale(1.25);
}

/* Same flat primary button inside the two pages that had their own dark gradient rule */
html body.dark-mode #unifiedAddTxModal .btn-wiz-save,
html body.dark-mode #unifiedConfigModal .btn-wiz-save {
    background: var(--m-accent-fill) !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* ---------- Fixed sheets inside tab pages ---------- */
/* The active tab animated in with tabSlideUp and fill-mode "forwards", so it kept an identity
   transform for good. That makes the tab the containing block for every `position: fixed` child:
   the Sort sheet (Mutual Funds, Govt Schemes, FD & Bonds) was positioned against the whole tall
   page and landed hundreds of pixels below the screen on phones. The same slide-in now runs with
   "backwards" fill, and the resting style is plain opacity 1 / transform none. */
.tab-pane.active {
    opacity: 1;
    transform: none;
    animation: tabSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

@media (max-width: 768px) {
    /* `.sort-menu-left` (left:0; right:auto) beat the sheet's 20px side margins, leaving a ~170px strip
       hugging the screen edge. Full-width sheet again, with text sized for a thumb. */
    .tab-action-menu.sort-menu-left {
        left: 20px;
        right: 20px;
        transform-origin: bottom center;
    }
    .tab-action-menu .tab-action-item {
        font-size: var(--t-emphasis);
        font-weight: 600;
    }
}

/* ---------- Plan vs Invested: collapsible on phones ---------- */
.pvi-summary,
.pvi-chevron {
    display: none;                 /* desktop: the card is always open */
}
@media (max-width: 768px) {
    .pvi-head {
        cursor: pointer;
        gap: var(--sp-2);
        align-items: center;
        -webkit-tap-highlight-color: transparent;
    }
    .pvi-head-text {
        flex: 1 1 auto;
        min-width: 0;
    }
    .pvi-summary {
        display: block;
        margin-top: 2px;
        font-size: var(--t-caption);
        font-weight: 500;
        color: var(--m-muted);
        line-height: 1.35;
    }
    .pvi-card:not(.pvi-collapsed) .pvi-summary {
        display: none;             /* the numbers are on screen when open */
    }
    .pvi-chevron {
        display: inline-block;
        flex: none;
        font-size: 20px;
        line-height: 1;
        color: var(--m-muted);
        transition: transform 0.2s ease;
    }
    .pvi-card:not(.pvi-collapsed) .pvi-chevron {
        transform: rotate(180deg);
    }
    .pvi-card.pvi-collapsed .pvi-head {
        margin-bottom: 0;
    }
    .pvi-card.pvi-collapsed .pvi-cols {
        display: none;
    }
}

/* ==========================================================================
   GOAL HEALTH — badges on goals + the "why" sheet
   ========================================================================== */
.gh-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: var(--t-caption);
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.4;
}
.gh-attention { background: #fee2e2; color: #b91c1c; }
.gh-watch     { background: #fef3c7; color: #92400e; }
.gh-ontrack   { background: #d1fae5; color: #065f46; }
.gh-achieved  { background: #dbeafe; color: #1d4ed8; }
body.dark-mode .gh-attention { background: rgba(248, 113, 113, 0.18); color: #fca5a5; }
body.dark-mode .gh-watch     { background: rgba(251, 191, 36, 0.18);  color: #fcd34d; }
body.dark-mode .gh-ontrack   { background: rgba(52, 211, 153, 0.18);  color: #6ee7b7; }
body.dark-mode .gh-achieved  { background: rgba(96, 165, 250, 0.20);  color: #93c5fd; }

/* Health badge on top, the allocation-mix pill (Mix OK / Rebalance) beneath it */
.goal-status-stack {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}
.modern-card-item[style*="text-align: right"] .goal-status-stack {
    align-items: flex-end;
}

/* The On Track tile opens the sheet */
.gs-seg-link {
    cursor: pointer;
}
.gs-seg-link .gs-tile-sub {
    color: var(--m-accent);
    font-weight: 600;
}
.gs-seg-link:hover .gs-tile-value {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ----- the sheet ----- */
.gh-overlay {
    position: fixed;
    inset: 0;
    z-index: 12000;               /* above the bottom bar (10000) and the Sort sheet (11000) */
    background: rgba(15, 23, 42, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-4);
    animation: ghFade 0.18s ease-out;
}
@keyframes ghFade { from { opacity: 0; } to { opacity: 1; } }
.gh-panel {
    width: min(560px, 100%);
    max-height: min(82vh, 760px);
    display: flex;
    flex-direction: column;
    background: var(--m-surface);
    color: var(--m-text);
    border: 1px solid var(--m-hairline);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35);
    overflow: hidden;
}
.gh-grabber { display: none; }
.gh-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-4) var(--sp-2);
}
.gh-head h3 { margin: 0; font-size: var(--t-title); font-weight: 700; }
.gh-head p { margin: 2px 0 0; font-size: var(--t-body); color: var(--m-muted); }
.gh-close {
    border: 0;
    background: transparent;
    color: var(--m-muted);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    padding: 0 var(--sp-1);
}
.gh-chips {
    display: flex;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4) var(--sp-3);
    flex-wrap: wrap;
}
.gh-chip {
    border: 1px solid var(--m-hairline);
    background: transparent;
    color: var(--m-muted);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: var(--t-label);
    font-weight: 600;
    cursor: pointer;
    min-height: 34px;
}
.gh-chip span { opacity: 0.8; margin-left: 2px; }
.gh-chip.active {
    background: var(--m-accent-fill);
    border-color: var(--m-accent-fill);
    color: #ffffff;
}
.gh-list {
    overflow-y: auto;
    padding: 0 var(--sp-4) var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    -webkit-overflow-scrolling: touch;
}
.gh-item {
    border: 1px solid var(--m-hairline);
    border-radius: var(--r-card);
    padding: var(--sp-3) var(--sp-4);
    cursor: pointer;
    position: relative;
}
.gh-item:hover { border-color: var(--m-accent); }
.gh-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
}
.gh-item-name { font-size: var(--t-emphasis); font-weight: 700; }
.gh-item-sub { font-size: var(--t-caption); color: var(--m-muted); margin: 2px 0 var(--sp-2); }
.gh-issue {
    border-left: 3px solid var(--m-hairline);
    padding: 2px 0 2px var(--sp-3);
    margin-top: var(--sp-2);
}
.gh-issue-attention { border-left-color: #ef4444; }
.gh-issue-watch { border-left-color: #f59e0b; }
.gh-issue-title { font-size: var(--t-body); font-weight: 600; }
.gh-issue-detail { font-size: var(--t-label); color: var(--m-muted); margin-top: 2px; }
.gh-issue-fix { font-size: var(--t-label); font-weight: 600; color: var(--m-accent); margin-top: 2px; }
.gh-ok, .gh-note, .gh-empty {
    margin: 0;
    font-size: var(--t-label);
    color: var(--m-muted);
}
.gh-note { margin-top: var(--sp-2); font-style: normal; }
.gh-empty { text-align: center; padding: var(--sp-5) 0; }
.gh-open {
    display: block;
    margin-top: var(--sp-2);
    font-size: var(--t-label);
    font-weight: 600;
    color: var(--m-accent);
    text-align: right;
}

/* Phones: a bottom sheet */
@media (max-width: 768px) {
    .gh-overlay {
        align-items: flex-end;
        padding: 0;
    }
    .gh-panel {
        width: 100%;
        max-height: 88vh;
        border-radius: 20px 20px 0 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        animation: ghUp 0.28s cubic-bezier(0.32, 0.72, 0, 1);
    }
    .gh-grabber {
        display: block;
        width: 40px;
        height: 5px;
        border-radius: 10px;
        background: var(--m-hairline);
        margin: 8px auto 0;
    }
}
@keyframes ghUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* Dark: a generic `span` colour rule was greying the goal name and the "Open goal" link */
html body.dark-mode .gh-panel .gh-item-name { color: var(--dk-text) !important; }
html body.dark-mode .gh-panel .gh-open { color: var(--m-accent) !important; }

/* Goal detail: one-line read-out under the suggested-vs-yours allocation chart */
.glide-note {
    margin-top: var(--sp-2);
    font-size: var(--t-label);
    line-height: 1.45;
    color: var(--m-muted);
}
.glide-note b {
    color: var(--m-text);
    font-weight: 600;
}

/* Mutual Fund header: Current value and Invested side by side */
.mf-head-figures {
    display: flex;
    gap: var(--sp-5);
    flex-wrap: wrap;
}
.mf-head-invested {
    margin-top: 2px;
    font-size: var(--t-label);
    font-weight: 500;
    opacity: 0.85;
}

/* Mutual Fund category filter chips */
.mf-cat-chip {
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #475569;
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}
.mf-cat-chip small { opacity: 0.6; margin-left: 2px; }
.mf-cat-chip.active { background: #4f46e5; border-color: #4f46e5; color: #fff; }

/* ==========================================================================
   OVERVIEW PERFORMANCE ROW: Transactions | Returns by type | Top gainers & losers
   Desktop: 3 equal columns. Tablet: 2 columns, gainers/losers full width.
   Phone: single stacked column (lists need the width, so no swipe strip).
   ========================================================================== */
.ovp-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 16px;
    margin: 16px 0;
    align-items: stretch;
}
.ovp-card {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    padding: 18px 20px;
    box-sizing: border-box;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.ovp-head { margin-bottom: 12px; }
.ovp-sub { margin: 4px 0 0; font-size: 0.74rem; color: var(--text-muted, #64748b); line-height: 1.35; }
.ovp-chart { position: relative; height: 230px; flex: 1 1 auto; }

/* Returns by investment type */
.ovp-returns { display: flex; flex-direction: column; flex: 1 1 auto; }
.ovp-ret-row { padding: 12px 0; border-top: 1px dashed var(--border-color, #e2e8f0); }
.ovp-ret-row:first-child { border-top: 0; padding-top: 2px; }
.ovp-ret-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ovp-ret-name { font-size: 0.88rem; font-weight: 700; color: var(--text-main, #0f172a); min-width: 0; }
.ovp-ret-name small { display: block; font-size: 0.7rem; font-weight: 500; color: var(--text-muted, #64748b); margin-top: 2px; }
.ovp-ret-val { font-size: 0.9rem; font-weight: 700; text-align: right; white-space: nowrap; }
.ovp-ret-val small { font-size: 0.74rem; font-weight: 600; }
.ovp-ret-val.pos { color: #15803d; }
.ovp-ret-val.neg { color: #dc2626; }
.ovp-ret-bar { height: 5px; border-radius: 3px; background: var(--bg-hover, #f1f5f9); margin-top: 8px; overflow: hidden; }
.ovp-ret-bar span { display: block; height: 100%; border-radius: 3px; }
.ovp-ret-bar span.pos { background: #22c55e; }
.ovp-ret-bar span.neg { background: #ef4444; }
.ovp-ret-row.is-empty { display: flex; justify-content: space-between; align-items: center; }
.ovp-ret-row.is-empty .ovp-ret-name { color: var(--text-muted, #64748b); font-weight: 600; }
.ovp-ret-none { font-size: 0.8rem; color: var(--text-muted, #94a3b8); }

/* Top gainers & losers */
.ovp-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.ovp-field { display: block; margin: 0; min-width: 0; }
.ovp-field span {
    display: block; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--text-muted, #64748b); margin-bottom: 4px;
}
.ovp-select {
    width: 100%; min-width: 0; box-sizing: border-box; padding: 8px 10px; border-radius: 10px;
    border: 1px solid var(--border-color, #cbd5e1); background: var(--card-bg, #fff);
    color: var(--text-main, #1e293b); font: inherit; font-size: 0.84rem; font-weight: 600;
}
.ovp-gl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; flex: 1 1 auto; }
.ovp-gl-col h5 { margin: 0 0 8px; font-size: 0.82rem; font-weight: 800; color: var(--text-main, #0f172a); }
.ovp-gl-list { border-radius: 8px; overflow: hidden; border-top: 3px solid; height: calc(100% - 28px); min-height: 120px; }
.ovp-gl-col.gain .ovp-gl-list { border-color: #86b79a; background: rgba(34, 197, 94, 0.07); }
.ovp-gl-col.lose .ovp-gl-list { border-color: #d6a0a0; background: rgba(239, 68, 68, 0.06); }
.ovp-gl-item { padding: 10px 12px; border-top: 1px dashed rgba(100, 116, 139, 0.3); }
.ovp-gl-item:first-child { border-top: 0; }
.ovp-gl-col.gain .ovp-gl-item:nth-child(1) { background: rgba(34, 197, 94, 0.10); }
.ovp-gl-col.lose .ovp-gl-item:nth-child(1) { background: rgba(239, 68, 68, 0.10); }
.ovp-gl-name {
    font-size: 0.8rem; font-weight: 700; color: var(--text-main, #1e3a8a); line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ovp-gl-val { font-size: 0.8rem; font-weight: 700; margin-top: 3px; }
.ovp-gl-col.gain .ovp-gl-val { color: #15803d; }
.ovp-gl-col.lose .ovp-gl-val { color: #dc2626; }
.ovp-gl-none { padding: 18px 12px; font-size: 0.78rem; color: var(--text-muted, #64748b); }

body.dark-mode .ovp-card { background: var(--card-bg, #1e293b); border-color: var(--border-color, #334155); }
body.dark-mode .ovp-ret-val.pos, body.dark-mode .ovp-gl-col.gain .ovp-gl-val { color: #4ade80; }
body.dark-mode .ovp-ret-val.neg, body.dark-mode .ovp-gl-col.lose .ovp-gl-val { color: #f87171; }
body.dark-mode .ovp-gl-name { color: #e2e8f0; }
body.dark-mode .ovp-select { background: #0f172a; border-color: #334155; color: #e2e8f0; }

@media (max-width: 1100px) {
    .ovp-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ovp-card-wide { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
    .ovp-row { grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 10px 0; }
    .ovp-card { padding: 14px; border-radius: 14px; }
    .ovp-chart { height: 200px; flex: 0 0 auto; }
    .ovp-select { font-size: 16px; }          /* stops iOS zooming into the field */
    .ovp-gl { grid-template-columns: minmax(0, 1fr); }
    .ovp-gl-list { height: auto; min-height: 0; }
}

/* Transactions card lives in the insight row (4 across on desktop) and opens the full list */
.ovp-txn-card { cursor: pointer; }
.ovp-txn-card:hover { border-color: #818cf8 !important; }
.ovp-txn-card .nav-arrow { margin-left: auto; color: var(--text-muted, #94a3b8); font-size: 1.1rem; line-height: 1; }
.ovp-txn-card .asset-category-header { display: flex; align-items: center; }


/* Privacy mask: one look at every width. Text is hidden and a soft glow stands in for it, light on
   dark mode. (Below 769px mobile.css already does this; wider screens fell back to a blur filter.) */
body.privacy-active .privacy-masked:not(#_),
body.privacy-active .privacy-masked *:not(#_) {
    filter: none !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: 0 0 9px rgba(100, 116, 139, 0.9) !important;
}
body.dark-mode.privacy-active .privacy-masked:not(#_),
body.dark-mode.privacy-active .privacy-masked *:not(#_) {
    text-shadow: 0 0 9px rgba(203, 213, 225, 0.85) !important;
}

/* Phones / tablets: insight charts (Growth by class, Contributions, Spending vs budget, Transactions).
   The chart holder was a stretchy flex item with a canvas inside it, so the card grew far taller than
   its chart and left a big empty block under it. Now the chart is laid over a holder of fixed
   base height (taller than before) and fills it exactly; every card in the strip stays the same height. */
@media (max-width: 1100px) {
    #overview-tab .overview-insight-row .asset-allocation-chart-holder:not(#_) {
        flex: 1 1 260px; height: auto !important; min-height: 260px; position: relative;
    }
    #overview-tab .overview-insight-row .asset-allocation-chart-holder > canvas:not(#_) {
        position: absolute; top: 0; left: 0;
    }
}

/* Desktop: insight cards (incl. Transactions) match the height of Upcoming / Allocation / Equity vs Debt */
@media (min-width: 1101px) {
    #overview-tab .overview-insight-row > .overview-insight-card:not(#_) { min-height: 420px; }
}

/* ---------- Overview uniformity pass (desktop) ----------
   Rows 2-4 share one 3-column grid. Insight chart holders are a fixed 255px (same as Allocation /
   Equity vs Debt) instead of stretching to fill the card, and Returns | Gainers & Losers sit on
   that same grid (1 + 2 columns). */
@media (min-width: 1101px) {
    #overview-tab .overview-insight-row .asset-allocation-chart-holder:not(#_) { flex: 0 0 auto; height: 255px !important; }
    #overview-tab .ovp-row:not(#_) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
    #overview-tab .ovp-row .ovp-card-wide:not(#_) { grid-column: span 2; }
}

/* ---------- Overview: Portfolio Growth / Portfolio vs Market as tabs in one wide, taller card ---------- */
.ovg-tabs {
    display: inline-flex; gap: 4px; padding: 4px; margin: 16px 0 0;
    background: var(--bg-hover, #f1f5f9); border-radius: 12px; max-width: 100%;
}
.ovg-tab {
    border: 0; background: transparent; color: var(--text-muted, #64748b);
    font: inherit; font-size: 0.86rem; font-weight: 700; padding: 8px 18px; border-radius: 9px;
    cursor: pointer; white-space: nowrap;
}
.ovg-tab.active { background: var(--card-bg, #fff); color: var(--text-main, #0f172a); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); }
body.dark-mode .ovg-tabs { background: #0f172a; }
body.dark-mode .ovg-tab.active { background: #334155; color: #f1f5f9; }

#overview-tab .overview-growth-row:not(#_) { display: block; margin: 10px 0 16px; }
#overview-tab .overview-growth-row[data-active="growth"] #portfolioCompareCard:not(#_),
#overview-tab .overview-growth-row[data-active="compare"] #portfolioGrowthCard:not(#_) { display: none; }
#overview-tab .overview-growth-row .growth-card:not(#_) { margin: 0; }
#overview-tab .overview-growth-row #portfolioGrowthCard .growth-card-chart:not(#_),
#overview-tab .overview-growth-row .compare-card .growth-card-chart:not(#_) { flex: 0 0 auto; height: 400px; min-height: 0; }
@media (max-width: 768px) {
    .ovg-tabs { display: flex; margin-top: 10px; }
    .ovg-tab { flex: 1; padding: 8px 6px; font-size: 0.8rem; }
    #overview-tab .overview-growth-row #portfolioGrowthCard .growth-card-chart:not(#_),
    #overview-tab .overview-growth-row .compare-card .growth-card-chart:not(#_) { height: 260px; }
}

/* ---------- Smart Insights: lightbulb in the top bar + drawer ---------- */
.dash-insights-btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; padding: 0; border: 0; border-radius: 8px; background: transparent;
    color: #64748b; cursor: pointer; flex: 0 0 auto;
}
.dash-insights-btn:hover { background: rgba(100, 116, 139, 0.12); color: #f59e0b; }
.dash-insights-btn .icon-svg { width: 17px; height: 17px; }
.dash-insights-btn .notif-badge-pill.is-calm { background: #4f46e5 !important; }
body.dark-mode .dash-insights-btn { color: #94a3b8; }
.insights-page { width: 520px; }
.insights-page-list { display: flex; flex-direction: column; gap: 12px; }
.insights-page-list .insight-card { margin: 0; padding: 14px 16px; }
.insights-page-list .insight-title { font-size: 0.92rem; }
.insights-page-list .insight-desc { font-size: 0.8rem; }
.insights-page-list .insights-empty { padding: 40px 10px; text-align: center; color: var(--text-muted, #64748b); }
body.dark-mode .insights-page,
body.dark-mode .insights-page .inline-style-56 { background: var(--card-bg, #1e293b); border-color: #334155; }
body.dark-mode .insights-page .inline-style-57 { color: #f1f5f9; }

/* ---------- ST Wealth AI on phones: respect the safe areas ----------
   The chat is full screen; it now starts below the status bar (same rule as every other top-pinned
   element) and the composer clears the home indicator. */
@media (max-width: 600px) {
    .ai-chat-window:not(#_) {
        top: var(--m-safe-top, env(safe-area-inset-top, 0px));
        height: auto; max-height: none;
    }
    .ai-chat-window .ai-chat-top:not(#_) { padding-top: 10px; }
    .ai-chat-window .ai-composer-wrap:not(#_) { padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
    .ai-chat-window #ai-chat-input:not(#_) { border: none !important; box-shadow: none !important; }
}

/* ---------- Edit SIP: "Select SIP to Edit" box in dark mode ----------
   The box and its dropdown carry inline light colours, which left pale text on a pale panel. */
body.dark-mode #sip_selector_container:not(#_) { background: #1e293b !important; border-color: #334155 !important; }
body.dark-mode #sip_selector_container label:not(#_) { color: #e2e8f0 !important; }
body.dark-mode #sip_config_selector:not(#_) { background: #0f172a !important; color: #f1f5f9 !important; border-color: #475569 !important; }
body.dark-mode #sip_category_badge:not(#_) { background: #0f172a !important; color: #cbd5e1 !important; }

/* ST Wealth AI: "More ideas" chips under the starter cards */
.ai-more { width: 100%; margin-top: 12px; }
.ai-more > summary { cursor: pointer; list-style: none; text-align: center; font-size: 0.82rem; font-weight: 600; color: var(--ai-accent, #8ab4f8); padding: 6px; }
.ai-more > summary::-webkit-details-marker { display: none; }
.ai-more[open] > summary { margin-bottom: 8px; }
.ai-more-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ai-chip { border: 1px solid var(--ai-line, #2f3032); background: var(--ai-surface-2, #2a2b2d); color: var(--ai-text, #e3e3e3); font: inherit; font-size: 0.8rem; padding: 8px 12px; border-radius: 999px; cursor: pointer; text-align: left; }
.ai-chip:hover { border-color: var(--ai-accent, #8ab4f8); }

/* Small centred dialogs (confirm / alert / delete): the icon, title and message stack and centre.
   The generic modal header rules treated the icon as a title bar (divider line) and left-aligned the heading. */
#confirmModal .modal-content,
#appConfirmModal .modal-content,
#appAlertModal .modal-content {
    align-items: stretch;
    text-align: center;
}
#confirmModal .modal-content > h3,
#appConfirmModal .modal-content > h3,
#appAlertModal .modal-content > h3 {
    text-align: center !important;
    justify-content: center !important;
}
#confirmModal .modal-content > div:first-child,
#appConfirmModal .modal-content > div:first-child,
#appAlertModal .modal-content > div:first-child {
    border: 0 !important;
    padding: 0 !important;
}

/* ---------- Investor Tools (SIP step-up, rebalance, SWP calculators) ---------- */
.ic-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 16px; }
.ic-tab {
    padding: 8px 14px; border-radius: 999px; border: 1px solid var(--stw-border);
    background: transparent; color: var(--stw-text-dim); font-weight: 700; font-size: 0.82rem; cursor: pointer;
}
.ic-tab.active { background: var(--stw-accent); border-color: var(--stw-accent); color: #fff; }
.ic-inputs { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 14px; }
.ic-field .wiz-input { width: 100%; height: 42px; box-sizing: border-box; }
.ic-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.ic-card { background: var(--stw-surface-alt); border: 1px solid var(--stw-border); border-radius: 14px; padding: 14px; }
.ic-card-accent { border-color: var(--stw-accent); box-shadow: 0 0 0 1px var(--stw-accent) inset; }
.ic-card-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--stw-text-dim); }
.ic-card-value { font-size: 1.35rem; font-weight: 800; color: var(--stw-text); margin: 4px 0 2px; }
.ic-card-sub { font-size: 0.75rem; color: var(--stw-text-dim); }
.ic-pos { color: var(--stw-success) !important; }
.ic-neg { color: var(--stw-danger) !important; }
.ic-chart-wrap { position: relative; height: 260px; margin-bottom: 18px; }
.ic-section-title { font-weight: 800; color: var(--stw-text); margin: 4px 0 8px; }
.ic-section-title span { font-weight: 500; font-size: 0.78rem; color: var(--stw-text-dim); }
.ic-table-wrap { overflow-x: auto; border: 1px solid var(--stw-border); border-radius: 12px; }
.ic-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.ic-table th, .ic-table td { padding: 10px 12px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--stw-border); color: var(--stw-text); }
.ic-table th { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--stw-text-dim); background: var(--stw-surface-alt); }
.ic-table tr:last-child td { border-bottom: 0; }
.ic-table .ic-num { text-align: right; font-variant-numeric: tabular-nums; }
.ic-table .ic-total td { font-weight: 800; background: var(--stw-surface-alt); }
.ic-flag { color: var(--stw-warning); font-weight: 800; }
.ic-buy { color: var(--stw-success); font-weight: 800; }
.ic-sell { color: var(--stw-danger); font-weight: 800; }
.ic-muted { color: var(--stw-text-dim); }
.ic-note, .ic-disclaimer { font-size: 0.78rem; color: var(--stw-text-dim); line-height: 1.5; margin: 12px 0 0; }
.ic-disclaimer { margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--stw-border); }
.ic-empty { padding: 28px 16px; text-align: center; color: var(--stw-text-dim); border: 1.5px dashed var(--stw-border); border-radius: 12px; }
.ic-sum { font-size: 0.78rem; font-weight: 700; margin: -4px 0 12px; }
.ic-ok { color: var(--stw-success); }
.ic-bad { color: var(--stw-danger); }
.ic-banner { padding: 10px 14px; border-radius: 10px; font-size: 0.85rem; font-weight: 600; margin-bottom: 12px; }
.ic-banner-ok { background: rgba(5, 150, 105, 0.1); color: var(--stw-success); }
.ic-banner-warn { background: rgba(245, 158, 11, 0.12); color: var(--stw-warning); }
.ic-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.7rem; font-weight: 800; }
.ic-pill-ok { background: rgba(5, 150, 105, 0.12); color: var(--stw-success); }
.ic-pill-warn { background: rgba(245, 158, 11, 0.14); color: var(--stw-warning); }
.ic-pill-bad { background: rgba(239, 68, 68, 0.12); color: var(--stw-danger); }
@media (max-width: 768px) {
    .ic-inputs, .ic-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ic-card-value { font-size: 1.1rem; }
}

/* Foreign-currency amount shown under the INR figure on Govt Schemes and FD / Bonds */
.fx-sub {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--stw-text-dim, #64748b);
    letter-spacing: 0.01em;
    margin-top: 1px;
}


/* Goal card actions: the destructive Delete is clearly red, on the far side from the primary
   Details button with real space between them, and both are comfortable touch targets. */
.goal-card-actions { gap: 20px; align-items: center; }
.modern-card-btn-danger {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    min-height: 36px;
}
.modern-card-btn-danger:hover { background: #fee2e2; }
body.dark-mode .modern-card-btn-danger {
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.4);
}
.goal-card-actions .modern-card-btn { min-height: 36px; font-size: 0.75rem; }


/* ---- Light-mode text contrast (WCAG AA 4.5:1) --------------------------------------------------
   Deeper tones for small text that sat on white / pale tints. Scoped to light mode so the bright
   dark-mode palette is untouched. Colours keep their meaning (green good, red bad, amber caution). */
body:not(.dark-mode) .mini-table .pos,
body:not(.dark-mode) .compare-stats .pos { color: #047857 !important; }      /* was #10b981, 2.5:1 */
body:not(.dark-mode) .mini-table .neg,
body:not(.dark-mode) .compare-stats .neg { color: #dc2626 !important; }      /* was #ef4444, 3.8:1 */
body:not(.dark-mode) .aaa-add,
body:not(.dark-mode) .upcoming-activity-days { color: #4f46e5 !important; }  /* was #6366f1, 4.5:1 on tint */
body:not(.dark-mode) .gaa-set { color: #b45309 !important; }                 /* was #f59e0b, 2.1:1 */
body:not(.dark-mode) .ovg-tab:not(.active),
body:not(.dark-mode) .range-btn:not(.active) { color: #475569 !important; }  /* was #64748b, 4.3:1 on #f1f5f9 */
body:not(.dark-mode) #mobileMenuBtn.dropbtn,
body:not(.dark-mode) .ovp-ret-none { color: #64748b !important; }           /* was #94a3b8, 2.6:1 */

/* Keyboard focus ring for clickable divs / rows made focusable at runtime (ensureClickables) */
[data-kb]:focus { outline: none; }
[data-kb]:focus-visible { outline: 2px solid #4f46e5; outline-offset: 2px; border-radius: 6px; }
body.dark-mode [data-kb]:focus-visible { outline-color: #a5b4fc; }

/* ---- Status text tokens ------------------------------------------------------------------------
   Gain / loss / caution TEXT colours used by inline styles in app.js (color: var(--pos-text) ...).
   One token per meaning, resolved per theme, so the same markup passes WCAG AA (4.5:1) on white
   and on the dark surfaces - and already-rendered text follows a theme switch. Charts keep their
   own hex colours (canvas can't read CSS variables). */
:root,
body:not(.dark-mode) {
    --pos-text: #047857;    /* 5.5:1 on white */
    --neg-text: #b91c1c;    /* 6.5:1 */
    --warn-text: #92400e;   /* 7.1:1 */
}
body.dark-mode {
    --pos-text: #34d399;    /* 7.9:1 on #1c2540 */
    --neg-text: #f87171;    /* 5.5:1 */
    --warn-text: #fbbf24;   /* 9.1:1 */
}

/* Light mode: class-based status text that was 2.5-3.8:1 on white / pale tints */
body:not(.dark-mode) .pvi-nums b.pvi-ok,
body:not(.dark-mode) .sip-seg .val-master.seg-equity,
body:not(.dark-mode) .networth-stat-value[style*="059669"],
body:not(.dark-mode) .networth-stat-value[style*="5, 150, 105"],
body:not(.dark-mode) .merged-sip-card .col-tag-badge.active-outflow { color: var(--pos-text) !important; }
body:not(.dark-mode) .pvi-nums b.pvi-bal { color: var(--neg-text) !important; }
body:not(.dark-mode) .btn-danger-sidebar { color: #b91c1c !important; }
body:not(.dark-mode) .holding-note-save:not(.dirty) { color: #475569; }            /* was #94a3b8, 2.6:1 */
body:not(.dark-mode) .table-action-btn { color: #4338ca; }                          /* was #6366f1 on tint, 3.9:1 */
body:not(.dark-mode) .sidebar-user-greet,
body:not(.dark-mode) .segmented-control .control-btn:not(.active),
body:not(.dark-mode) .unified-type-pill:not(.active),
body:not(.dark-mode) .wiz-hint,
body:not(.dark-mode) .gaa-status.is-none { color: #475569 !important; }            /* #64748b on grey was 4.3:1 */
body:not(.dark-mode) [style*="color: #94a3b8"],
body:not(.dark-mode) [style*="color:#94a3b8"] { color: #64748b !important; }       /* 2.6:1 -> 4.8:1 */
body:not(.dark-mode) [style*="color: #6366f1"],
body:not(.dark-mode) [style*="color:#6366f1"] { color: #4f46e5 !important; }       /* 4.47 -> 6.3:1 */

/* Dark mode: inline light-theme greys / indigo text were 3.2-3.4:1 on the dark surfaces */
body.dark-mode [style*="color: #64748b"],
body.dark-mode [style*="color:#64748b"],
body.dark-mode .ovg-tab:not(.active) { color: var(--dk-muted) !important; }
body.dark-mode [style*="color: #6366f1"],
body.dark-mode [style*="color:#6366f1"] { color: #a5b4fc !important; }
body.dark-mode .pvi-nums b.pvi-bal { color: var(--neg-text) !important; }
body.dark-mode .btn-danger-sidebar { color: #fca5a5 !important; }

/* Rebalance moves: the asset class is named in normal text with its colour dot (amber / gold text
   on white was 2.2:1) */
.gaa-move-cls { display: inline-flex; align-items: center; gap: 4px; }

/* Primary filled buttons with white text: #6366f1 was 4.47:1 */
.btn-primary-small[style*="6366f1"],
.btn-primary-small[style*="99, 102, 241"] { background: #4f46e5 !important; }

/* Remaining AA fixes from the page-by-page scan */
.btn-primary-small { background: #4f46e5; }                                         /* white on #6366f1 was 4.47:1 */
body:not(.dark-mode) .segmented-control .control-btn.active,
body:not(.dark-mode) .segmented-control .control-btn.active .goal-tab-count { color: #4f46e5 !important; }
body:not(.dark-mode) .dash-toolbar-chip:not(#nwRiskProfileBadge) { color: #475569; }  /* 3.97:1 on the lilac chip */
body:not(.dark-mode) .sip-seg .val-master.seg-debt { color: #1d4ed8; }              /* #3b82f6 was 3.7:1 */
body:not(.dark-mode) [style*="color:#6b7280"],
body:not(.dark-mode) [style*="color: #6b7280"] { color: #4b5563 !important; }       /* 4.41:1 on #f1f5f9 */
body.dark-mode .ovp-ret-name small { color: var(--dk-muted); }                      /* slate-500 was 3.2:1 */

/* Budget: income / subscription cards. A long amount ("MYR 14.8K (≈ ₹3.5L)") pushed the edit/delete
   buttons past the screen edge on phones and the whole page scrolled sideways. The text column may
   now shrink, the buttons never do, and on phones the amount drops to its own line. */
.subscription-card-main { flex: 1 1 auto; min-width: 0; }
.subscription-card-actions { flex: none; }
.income-source-amt { flex: 0 1 auto; min-width: 0; text-align: right; overflow-wrap: anywhere; }
@media (max-width: 480px) {
    .subscription-card { flex-wrap: wrap; }
    .subscription-card-main { order: 1; flex-basis: calc(100% - 90px); }
    .subscription-card-actions { order: 2; }
    .income-source-amt { order: 3; flex-basis: 100%; text-align: left; }
}

/* Tap targets: at least 24x24 CSS px (WCAG 2.2 target size); these were 14-19px */
.sidebar-close-btn,
.aaa-info-btn,
.expense-entry-delete { min-width: 24px; min-height: 24px; display: inline-flex; align-items: center; justify-content: center; }
.show-inactive-link { display: inline-block; padding: 5px 0; min-height: 24px; }

/* Login screen: the card is a light glass panel on the dark backdrop in BOTH themes. Since the saved
   theme is applied before first paint, body.dark-mode is already set on the login screen, and the
   app-wide dark rules (white headings, translucent dark inputs with light text) washed out the
   fields and the title on the light card. Restore the card's own light styling under dark mode. */
body.dark-mode .login-box h2 { color: #002b5c !important; }
body.dark-mode .login-box input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
body.dark-mode .login-box select {
    background: rgba(255, 255, 255, 0.75) !important;
    border: 1px solid rgba(148, 163, 184, 0.3) !important;
    color: #1e293b !important;
}
body.dark-mode .login-box input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus {
    background: #ffffff !important;
    border-color: #002b5c !important;
}
/* Placeholders were slate-400 (2.6:1) in both themes */
.login-box input::placeholder,
body.dark-mode .login-box input::placeholder { color: #64748b !important; }
/* Secondary text on the card (the card is ~#e1e3e7 over the dark backdrop): subtitle / "New to ST
   Wealth?" 3.7:1, notice 2.2:1, "OR" and "Register Here" 2.0:1. Same link blue as Forgot Password. */
.login-box p#loginSubtitle,
.login-box span#toggleText,
.login-box .disclaimer-container p,
body.dark-mode .login-box .disclaimer-container p { color: #475569 !important; }
.login-box .inline-style-15 { color: #475569 !important; }
.login-box #toggleLink { color: #004d99 !important; font-weight: 700; }

/* ---- Yearly expense report (Budget -> Yearly Report) -------------------------------------------
   Chart colours are tokens read by drawExpenseReportCharts (canvas can't use var()). Series 1/2 are
   the validated blue/orange pair, stepped separately for each surface (CVD-safe in both modes). */
.xr-root {
    --xr-series-1: #2a78d6; --xr-series-2: #eb6834; --xr-avg: #334155;
    --xr-surface: #ffffff; --xr-grid: rgba(15, 23, 42, 0.07);
    --xr-text-1: #1e293b; --xr-text-2: #475569;
    --xr-tip-bg: #0f172a; --xr-tip-text: #f8fafc;
}
body.dark-mode .xr-root {
    --xr-series-1: #3987e5; --xr-series-2: #d95926; --xr-avg: #cbd5e1;
    --xr-surface: #1c2540; --xr-grid: rgba(255, 255, 255, 0.08);
    --xr-text-1: #e8ecf4; --xr-text-2: #a3aec4;
    --xr-tip-bg: #f8fafc; --xr-tip-text: #0f172a;
}
.xr-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.xr-toolbar .budget-month-switch { margin-right: auto; }
.xr-ccy { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--bg-main, #f1f5f9); border: 1px solid var(--border-color, #e2e8f0); }
body.dark-mode .xr-ccy { background: var(--dk-page); border-color: var(--dk-line); }
.xr-ccy-btn { min-height: 32px; padding: 0 14px; border: 0; border-radius: 8px; background: transparent; font-weight: 700; font-size: 0.8rem; color: #475569; cursor: pointer; }
body.dark-mode .xr-ccy-btn { color: var(--dk-muted); }
.xr-ccy-btn.active { background: #4f46e5; color: #fff; }
.xr-download { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px; border-radius: 10px; font-weight: 700; font-size: 0.82rem; cursor: pointer;
    background: transparent; color: #4338ca; border: 1px solid rgba(79, 70, 229, 0.35); }
body.dark-mode .xr-download { color: #c7d2fe; border-color: rgba(165, 180, 252, 0.4); }
.xr-download .icon-svg { width: 16px; height: 16px; }
.xr-toolbar .budget-month-arrow:disabled { opacity: 0.35; cursor: default; }

.xr-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.xr-kpi { min-width: 0; }
.xr-kpi .networth-stat-value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xr-kpi-text { font-size: 1.15rem !important; }
.xr-kpi-sub { display: block; margin-top: 4px; font-size: 0.75rem; color: var(--xr-text-2); }
.xr-yoy { margin: 10px 2px 16px; }
.xr-yoy .xr-kpi-sub { display: inline; font-size: 0.8rem; font-weight: 600; }
.xr-delta.is-up { color: var(--neg-text); }      /* spending more than last year */
.xr-delta.is-down { color: var(--pos-text); }

.xr-card h3 { margin: 0; font-size: 1rem; }
.xr-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.xr-card-sub { margin: 3px 0 0; font-size: 0.78rem; color: var(--xr-text-2); }
.xr-chart { position: relative; width: 100%; }
.xr-chart-month { height: 300px; }
.xr-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; margin-bottom: 20px; }

.xr-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.xr-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; color: var(--xr-text-1); }
.xr-table th { text-align: left; font-size: 0.72rem; font-weight: 700; color: var(--xr-text-2); padding: 8px 10px; border-bottom: 1px solid var(--border-color, #e2e8f0); white-space: nowrap; }
.xr-table td { padding: 9px 10px; border-bottom: 1px solid var(--border-color, #eef2f7); white-space: nowrap; }
body.dark-mode .xr-table th, body.dark-mode .xr-table td { border-color: var(--dk-line); }
.xr-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.xr-table tfoot td { font-weight: 800; border-bottom: 0; border-top: 2px solid var(--border-color, #e2e8f0); }
body.dark-mode .xr-table tfoot td { border-top-color: var(--dk-line); }
.xr-over { color: var(--neg-text); }
.xr-under { color: var(--pos-text); }
.xr-footnote { margin: 12px 0 0; font-size: 0.75rem; color: var(--xr-text-2); }
.xr-empty { text-align: center; color: var(--xr-text-2); }
.xr-empty .icon-svg { width: 32px; height: 32px; opacity: 0.6; }

@media (max-width: 900px) {
    .xr-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
    .xr-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .xr-kpi .networth-stat-value { font-size: 1.1rem !important; }
    .xr-chart-month { height: 240px; }
    .xr-toolbar .budget-month-switch { margin-right: 0; flex: 1 1 100%; justify-content: center; }
    .xr-ccy, .xr-download { flex: 1 1 0; justify-content: center; }
    .xr-ccy-btn { flex: 1 1 0; }
}
.xr-yoy { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; align-items: baseline; }
.xr-rate { font-size: 0.78rem; color: var(--xr-text-2); }
.xr-rate b { color: var(--xr-text-1); font-variant-numeric: tabular-nums; }