/*
 * LBRank — Theme Mapper export converted to semantic, permanent rules.
 * Source: user export from 2026-10-10 (format v1).
 * No fixed theme colours: every colour follows an existing UI Theme role.
 * CSS is loaded after styles.css and life-dashboard.css so these role
 * choices persist even when the Theme Mapper is empty or never opened.
 *
 * Important: the source export had position-dependent :nth-of-type(...)
 * paths. Prefer stable IDs/classes so new rows, dates and history values
 * inherit the same choices. The seven-card buyer statuses remain semantic.
 */
:root {
    --hardcoded-secondary-surface:
        linear-gradient(145deg,
            color-mix(in srgb, var(--theme-secondary, #0858E8) 30%, #060913),
            color-mix(in srgb, var(--theme-secondary, #0858E8) 12%, #060913));
}

/* WHAT CHANGED
 * The user's first/latest history chip in each metric follows Secondary,
 * independently of whether the row is good, bad, neutral, or moves.
 * Single-chip metrics naturally use .current as well.
 */
#infoDetailModal #lifeWhatChanged .life-number-history-point.current {
    background: var(--hardcoded-secondary-surface) !important;
}

/* All seven numbers-card titles follow Primary Text. */
#infoDetailModal #lifeWhatChanged .life-number-heading > strong,
#infoDetailModal #lifeWhatChanged .life-number-metric-name {
    color: var(--theme-text, #FFFFFF) !important;
    -webkit-text-fill-color: currentColor !important;
}

/* IMPORTANT DATES: only date/date-range uses primary accent;
   event name, description and source are primary text. */
#infoDetailModal #lifeImportantDates .life-important-date > div > strong,
#infoDetailModal #lifeImportantDates .life-important-date > div > strong .life-event-title,
#infoDetailModal #lifeImportantDates .life-important-date > div > small,
#infoDetailModal #lifeImportantDates .life-important-date > a,
#infoDetailModal #lifeImportantDates .life-important-date > span {
    color: var(--theme-text, #FFFFFF) !important;
    -webkit-text-fill-color: currentColor !important;
}
#infoDetailModal #lifeImportantDates .life-important-date .life-event-date {
    color: var(--theme-primary, #00D4FF) !important;
    -webkit-text-fill-color: currentColor !important;
}

/* Dashboard hero and its Home entry control: Secondary surface. */
#infoDetailModal.life-dashboard-open #lifeHub .life-theme-hero,
#rankLifeDashboardButton {
    background: var(--hardcoded-secondary-surface) !important;
}

/* HOME: four value tiles and their containing surface follow Secondary. */
#rank-tab .home-entry-panel .info-display,
#rank-tab .home-entry-panel .info-display > .info-item {
    background: var(--hardcoded-secondary-surface) !important;
}

/* Home streak marble: Secondary fill, Primary text and outline.
 * Match by stable #streakOrb rather than current streak-day count or its
 * position among cards. Keep the flame's glyph and animations untouched.
 */
#rank-tab #streakOrb {
    background: var(--hardcoded-secondary-surface) !important;
    color: var(--theme-primary, #00D4FF) !important;
    border: 1px solid var(--theme-primary, #00D4FF) !important;
}
#rank-tab #streakOrb > :is(span, strong, b, small, svg) {
    color: var(--theme-primary, #00D4FF) !important;
}

/* PROGRESS: total historical changes are Secondary Text; history heading
 * and daily/weekly/list/calendar selectors use Primary Text.
 */
#graph-tab .history-change {
    color: var(--theme-text-muted, #B8C5D6) !important;
    -webkit-text-fill-color: currentColor !important;
}
#graph-tab .minimal-cycle-btn,
#graph-tab .history-section > .history-heading-row > h3 {
    color: var(--theme-text, #FFFFFF) !important;
    -webkit-text-fill-color: currentColor !important;
}

/* NAV: the normal app bottom bar and Badges tab follow Secondary.
 * Preserve the separately customised Progress-page nav colours.
 * Use the stable .tab-nav rather than the brittle nth-of-type(16) path.
 */
body:not(.progress-nav-themed) .tab-nav {
    background: var(--hardcoded-secondary-surface) !important;
    border-top: 1px solid var(--theme-secondary, #0858E8) !important;
}
body:not(.progress-nav-themed) .tab-nav .tab-btn[data-tab="badges"] {
    background: var(--hardcoded-secondary-surface) !important;
}

/* BUDGET: both Budget and Mortgage tab outlines follow Secondary, while
 * retaining their active/inactive text and fill rules.
 */
#financeBudgetButton,
#financeMortgageButton {
    border: 1px solid var(--theme-secondary, #0858E8) !important;
}