/* ============================================================
   Portfolio Analytics — App CSS
   Swiss Precision Design System
   Bootstrap 5.3 + data-bs-theme="light|dark"
   Fonts: Hanken Grotesk (sans) · IBM Plex Mono (numbers/data)
   ============================================================ */

/* ── Design Tokens ─────────────────────────────────────────── */
:root {
    /* Typography */
    --pa-font-sans: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
    --pa-font-mono: 'IBM Plex Mono', 'Courier New', monospace;

    /* Palette — Light */
    --pa-bg: #f2f5fa;
    --pa-surface: #ffffff;
    --pa-surface-2: #eaeff7;
    --pa-text: #0a0f1e;
    --pa-text-2: #56637a;
    --pa-accent: #1d4ed8;
    --pa-accent-rgb: 29, 78, 216;
    --pa-accent-faint: rgba(29, 78, 216, 0.07);
    --pa-positive: #0f6b3d;
    --pa-positive-faint: rgba(15, 107, 61, 0.07);
    --pa-negative: #b91c1c;
    --pa-negative-faint: rgba(185, 28, 28, 0.07);
    --pa-warn: #b45309;
    --pa-warn-faint: rgba(180, 83, 9, 0.07);
    --pa-border: #dde3ef;
    --pa-border-2: #c4ccdf;
    --pa-shadow: 0 1px 3px rgba(10, 15, 30, .05), 0 1px 2px rgba(10, 15, 30, .03);
    --pa-shadow-md: 0 4px 16px rgba(10, 15, 30, .08), 0 2px 6px rgba(10, 15, 30, .04);

    /* Chart line colours */
    --pa-color-portfolio: #1d4ed8;
    --pa-color-smi: #059669;
    --pa-color-msgcb: #d97706;
    --pa-color-msgm: #7c3aed;
    --pa-color-btc: #ca8a04;
}

[data-bs-theme="dark"] {
    /* Palette — Dark */
    --pa-bg: #080d17;
    --pa-surface: #111827;
    --pa-surface-2: #0d1525;
    --pa-text: #e2e8f7;
    --pa-text-2: #667799;
    --pa-accent: #3b82f6;
    --pa-accent-rgb: 59, 130, 246;
    --pa-accent-faint: rgba(59, 130, 246, 0.10);
    --pa-positive: #34d399;
    --pa-positive-faint: rgba(52, 211, 153, 0.08);
    --pa-negative: #f87171;
    --pa-negative-faint: rgba(248, 113, 113, 0.08);
    --pa-warn: #fb923c;
    --pa-warn-faint: rgba(251, 146, 60, 0.08);
    --pa-border: #1a2540;
    --pa-border-2: #243052;
    --pa-shadow: 0 1px 3px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .25);
    --pa-shadow-md: 0 4px 16px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .28);

    /* Chart line colours — brightened for dark backgrounds */
    --pa-color-portfolio: #60a5fa;
    --pa-color-smi: #34d399;
    --pa-color-msgcb: #fbbf24;
    --pa-color-msgm: #a78bfa;
    --pa-color-btc: #fbbf24;
}

/* ── Bootstrap variable overrides — Light ─────────────────── */
:root,
[data-bs-theme="light"] {
    --bs-body-font-family: var(--pa-font-sans);
    --bs-body-bg: var(--pa-bg);
    --bs-body-color: var(--pa-text);
    --bs-card-bg: var(--pa-surface);
    --bs-border-color: var(--pa-border);
    --bs-border-color-translucent: rgba(10, 15, 30, 0.09);
    --bs-secondary-bg: var(--pa-surface-2);
    --bs-secondary-color: var(--pa-text-2);
    --bs-primary: var(--pa-accent);
    --bs-primary-rgb: var(--pa-accent-rgb);
    --bs-font-monospace: var(--pa-font-mono);
    --bs-link-color: var(--pa-accent);
    --bs-link-hover-color: color-mix(in srgb, var(--pa-accent) 80%, #000);
    --bs-navbar-color: var(--pa-text-2);
    --bs-navbar-hover-color: var(--pa-text);
    --bs-navbar-active-color: var(--pa-accent);
    /* Semantic colours aligned to design system */
    --bs-success: var(--pa-positive);
    --bs-success-rgb: 15, 107, 61;
    --bs-danger: var(--pa-negative);
    --bs-danger-rgb: 185, 28, 28;
    --bs-warning: var(--pa-warn);
    --bs-warning-rgb: 180, 83, 9;
    --bs-info: var(--pa-accent);
    --bs-info-rgb: var(--pa-accent-rgb);
}

/* ── Bootstrap variable overrides — Dark ─────────────────── */
[data-bs-theme="dark"] {
    --bs-body-font-family: var(--pa-font-sans);
    --bs-body-bg: var(--pa-bg);
    --bs-body-color: var(--pa-text);
    --bs-card-bg: var(--pa-surface);
    --bs-border-color: var(--pa-border);
    --bs-border-color-translucent: rgba(226, 232, 247, 0.09);
    --bs-secondary-bg: var(--pa-surface-2);
    --bs-secondary-color: var(--pa-text-2);
    --bs-primary: var(--pa-accent);
    --bs-primary-rgb: var(--pa-accent-rgb);
    --bs-font-monospace: var(--pa-font-mono);
    --bs-link-color: var(--pa-accent);
    --bs-link-hover-color: color-mix(in srgb, var(--pa-accent) 85%, #fff);
    --bs-navbar-color: var(--pa-text-2);
    --bs-navbar-hover-color: var(--pa-text);
    --bs-navbar-active-color: var(--pa-accent);
    /* Semantic colours aligned to design system */
    --bs-success: var(--pa-positive);
    --bs-success-rgb: 52, 211, 153;
    --bs-danger: var(--pa-negative);
    --bs-danger-rgb: 248, 113, 113;
    --bs-warning: var(--pa-warn);
    --bs-warning-rgb: 251, 146, 60;
    --bs-info: var(--pa-accent);
    --bs-info-rgb: var(--pa-accent-rgb);
}

/* ── Global base ───────────────────────────────────────────── */
body {
    font-family: var(--pa-font-sans);
    background: var(--pa-bg);
    color: var(--pa-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Reserve room at the bottom for the fixed #utilityStrip (height
       2.75rem + safe-area), plus a small breathing buffer so the last row
       of any scrollable page isn't pinned right against the strip. */
    padding-bottom: calc(2.75rem + env(safe-area-inset-bottom, 0px) + 1rem);
}

/* ── Smooth theme transitions ──────────────────────────────── */
body,
.card,
.navbar,
#utilityStrip,
.table,
.modal-content,
.offcanvas,
.list-group-item,
.form-control,
.form-select,
.btn,
.badge,
.nav-link {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* ── Strip emoji glyphs (theme + privacy + language) ───────── */
.strip-emoji {
    display: inline-block;
    font-size: 0.95rem;
    line-height: 1;
    vertical-align: -0.1em;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

/* ── Navbar ────────────────────────────────────────────────── */
#mainNav {
    background: var(--pa-surface) !important;
    border-bottom: 1px solid var(--pa-border) !important;
    box-shadow: none !important;
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
}

#mainNav .navbar-brand {
    font-weight: 800;
    font-size: 0.9rem;
    letter-spacing: -0.03em;
    color: var(--pa-text) !important;
    gap: 6px;
}

#mainNav .nav-link {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--pa-text-2) !important;
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
    letter-spacing: 0.01em;
    transition: color 0.12s, background 0.12s;
}

#mainNav .nav-link:hover {
    color: var(--pa-text) !important;
    background: var(--pa-accent-faint);
}

#mainNav .nav-link.active,
#mainNav .nav-link.fw-semibold {
    color: var(--pa-accent) !important;
    background: var(--pa-accent-faint);
    font-weight: 600;
}

/* Nav dropdown */
#mainNav .dropdown-menu {
    border: 1px solid var(--pa-border);
    box-shadow: var(--pa-shadow-md);
    background: var(--pa-surface);
    border-radius: 7px;
    padding: 0.3rem;
    min-width: 11rem;
}

#mainNav .dropdown-item {
    font-size: 0.8rem;
    border-radius: 4px;
    padding: 0.45rem 0.7rem;
    color: var(--pa-text);
}

#mainNav .dropdown-item:hover {
    background: var(--pa-accent-faint);
    color: var(--pa-accent);
}

#mainNav .dropdown-item.active {
    background: var(--pa-accent-faint);
    color: var(--pa-accent);
}

#mainNav .dropdown-divider {
    border-color: var(--pa-border);
    margin: 0.25rem 0;
}

/* Nav utility buttons (theme, language, logout) */
#mainNav .btn-outline-secondary {
    border-color: var(--pa-border-2);
    color: var(--pa-text-2);
    border-radius: 5px;
    font-size: 0.75rem;
    padding: 0.22rem 0.5rem;
    transition: border-color 0.12s, color 0.12s, background 0.12s;
}

#mainNav .btn-outline-secondary:hover {
    border-color: var(--pa-accent);
    color: var(--pa-accent);
    background: var(--pa-accent-faint);
}

#mainNav .btn-outline-danger {
    border-radius: 5px;
    font-size: 0.75rem;
    padding: 0.22rem 0.5rem;
}

/* Dropdown toggle split arrow in nav */
.dropdown-toggle-split {
    color: var(--pa-text-2) !important;
}

/* ── Cards ─────────────────────────────────────────────────── */
.card {
    background: var(--pa-surface);
    border: 1px solid var(--pa-border);
    border-radius: 8px;
    box-shadow: var(--pa-shadow);
}

.card.shadow-sm {
    box-shadow: var(--pa-shadow) !important;
}

.card.shadow {
    box-shadow: var(--pa-shadow-md) !important;
}

/* ── Metric cards ──────────────────────────────────────────── */
.metric-card {
    border: 1px solid var(--pa-border);
    border-left: 2px solid var(--pa-accent);
    border-radius: 8px;
    background: var(--pa-surface);
    box-shadow: var(--pa-shadow);
    animation: cardReveal 0.45s ease both;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.metric-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--pa-shadow-md);
}

@keyframes cardReveal {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.metric-value {
    font-family: var(--pa-font-mono);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--pa-text);
}

.metric-label {
    font-family: var(--pa-font-sans);
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--pa-text-2);
    display: flex;
    align-items: center;
    gap: 4px;
}

.metric-positive {
    color: var(--pa-positive) !important;
}

.metric-negative {
    color: var(--pa-negative) !important;
}

.metric-neutral {
    color: inherit;
}

/* ── Info tooltip trigger ──────────────────────────────────── */
.info-tooltip {
    cursor: help;
    opacity: 0.38;
    font-size: 0.75em;
    vertical-align: super;
    transition: opacity 0.15s;
}

.info-tooltip:hover {
    opacity: 1;
}

.info-tooltip[data-metric-key] {
    cursor: pointer;
}

/* ── Metrics guide chevron ─────────────────────────────────── */
.metrics-guide-chevron {
    transition: transform 0.2s ease;
}

[data-bs-toggle="collapse"][aria-expanded="true"] .metrics-guide-chevron {
    transform: rotate(180deg);
}

/* ── Chart container ───────────────────────────────────────── */
.chart-container {
    position: relative;
    height: 340px;
    width: 100%;
}

@media (max-width: 768px) {
    .chart-container {
        height: 220px;
    }
}

/* Full-window variant — the page's only chart fills the viewport instead of
   sitting in a fixed 340px box. The offset covers everything stacked around
   it: sticky navbar, main's py-4, page header, card header, card body padding,
   card margin, and the fixed #utilityStrip plus body's reserved padding.
   dvh (not vh) so collapsing mobile browser chrome doesn't overshoot; the
   min-height keeps it usable on short windows. */
.chart-container--tall {
    height: calc(100dvh - 310px);
    min-height: 340px;
}

@media (max-width: 768px) {
    .chart-container--tall {
        height: calc(100dvh - 280px);
        min-height: 260px;
    }
}

/* ── Insights panel ────────────────────────────────────────── */
.insights-group-label {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--pa-text-2);
}

.insight-item {
    display: flex;
    align-items: flex-start;
    font-size: 0.82rem;
    line-height: 1.45;
    padding: 5px 0;
    border-bottom: 1px solid var(--pa-border);
}

.insight-item:last-child {
    border-bottom: none;
}

.insight-item i {
    margin-top: 2px;
}

.insight-highlight i {
    color: var(--pa-positive);
}

.insight-risk i {
    color: var(--pa-negative);
}

.insight-info i {
    color: var(--pa-accent);
}

/* ── Entry type badges ─────────────────────────────────────── */
.badge-performance {
    background-color: var(--pa-accent-faint);
    color: var(--pa-accent);
    border-radius: 3px;
}

.badge-deposit {
    background-color: var(--pa-positive-faint);
    color: var(--pa-positive);
    border-radius: 3px;
}

.badge-withdrawal {
    background-color: var(--pa-negative-faint);
    color: var(--pa-negative);
    border-radius: 3px;
}

/* ── Tables ────────────────────────────────────────────────── */
.table {
    --bs-table-bg: transparent;
    --bs-table-hover-bg: var(--pa-accent-faint);
    font-size: 0.875rem;
    color: var(--pa-text);
}

.table thead th {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--pa-text-2);
    border-bottom: 1px solid var(--pa-border-2) !important;
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
    white-space: nowrap;
    background: transparent;
}

/* Override Bootstrap's table-light on thead */
thead.table-light {
    --bs-table-bg: transparent;
    --bs-table-color: var(--pa-text-2);
}

[data-bs-theme="dark"] thead.table-light {
    --bs-table-bg: transparent;
    --bs-table-color: var(--pa-text-2);
}

.table tbody td {
    border-bottom: 1px solid var(--pa-border);
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
    vertical-align: middle;
}

.table tbody tr:last-child td {
    border-bottom: none;
}

.table-hover tbody tr {
    cursor: default;
    transition: background 0.08s;
}

.table-hover tbody tr:hover {
    background: var(--pa-accent-faint);
}

[data-bs-theme="dark"] .table .table-light {
    --bs-table-bg: var(--pa-surface-2);
    --bs-table-color: var(--pa-text-2);
}

/* ── Sticky header offset ──────────────────────────────────── */
html {
    scroll-padding-top: 66px;
}

/* ── Form controls ─────────────────────────────────────────── */
.form-control,
.form-select {
    border-color: var(--pa-border-2);
    border-radius: 5px;
    font-size: 0.875rem;
    background: var(--pa-surface);
    color: var(--pa-text);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--pa-accent);
    box-shadow: 0 0 0 3px rgba(var(--pa-accent-rgb), 0.12);
    background: var(--pa-surface);
    color: var(--pa-text);
}

.input-group-text {
    border-color: var(--pa-border-2);
    border-radius: 5px;
    background: var(--pa-surface-2);
    color: var(--pa-text-2);
    font-size: 0.875rem;
}

.form-label {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--pa-text);
    margin-bottom: 0.3rem;
    letter-spacing: 0.01em;
}

.form-text {
    font-size: 0.76rem;
    color: var(--pa-text-2);
}

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
    font-weight: 500;
    font-size: 0.84rem;
    letter-spacing: 0.01em;
    border-radius: 5px;
    transition:
        color .16s ease,
        background-color .16s ease,
        border-color .16s ease,
        box-shadow .16s ease,
        transform .16s ease;
}

.btn:hover:not(:disabled):not(.disabled) {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(10, 15, 30, .10), 0 1px 3px rgba(10, 15, 30, .06);
}

.btn:active:not(:disabled):not(.disabled),
.btn.active:not(:disabled):not(.disabled) {
    transform: translateY(0);
    box-shadow: none;
}

[data-bs-theme="dark"] .btn:hover:not(:disabled):not(.disabled) {
    box-shadow: 0 4px 14px rgba(0, 0, 0, .36), 0 1px 4px rgba(0, 0, 0, .28);
}

@media (prefers-reduced-motion: reduce) {
    .btn {
        transition: none;
    }

    .btn:hover:not(:disabled):not(.disabled),
    .btn:active:not(:disabled):not(.disabled),
    .btn.active:not(:disabled):not(.disabled) {
        transform: none;
    }
}

.btn-primary {
    --bs-btn-bg: var(--pa-accent);
    --bs-btn-border-color: var(--pa-accent);
    --bs-btn-hover-bg: color-mix(in srgb, var(--pa-accent) 83%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--pa-accent) 83%, #000);
    --bs-btn-active-bg: color-mix(in srgb, var(--pa-accent) 72%, #000);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-focus-shadow-rgb: var(--pa-accent-rgb);
}

.btn-outline-primary {
    --bs-btn-color: var(--pa-accent);
    --bs-btn-border-color: var(--pa-accent);
    --bs-btn-hover-bg: var(--pa-accent);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-border-color: var(--pa-accent);
    --bs-btn-active-bg: var(--pa-accent);
    --bs-btn-focus-shadow-rgb: var(--pa-accent-rgb);
}

.btn-outline-secondary {
    --bs-btn-color: var(--pa-text-2);
    --bs-btn-border-color: var(--pa-border-2);
    --bs-btn-hover-bg: var(--pa-text-2);
    --bs-btn-hover-color: var(--pa-surface);
    --bs-btn-hover-border-color: var(--pa-border-2);
    --bs-btn-active-bg: var(--pa-text);
    --bs-btn-active-color: var(--pa-surface);
    --bs-btn-active-border-color: var(--pa-text);
}

.btn-outline-danger {
    --bs-btn-focus-shadow-rgb: 185, 28, 28;
}

/* ── Modals ────────────────────────────────────────────────── */
.modal-content {
    background: var(--pa-surface);
    border: 1px solid var(--pa-border);
    border-radius: 10px;
    box-shadow: var(--pa-shadow-md);
}

.modal-header {
    border-bottom: 1px solid var(--pa-border);
    padding: 1.1rem 1.4rem 0.95rem;
}

.modal-title {
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--pa-text);
}

.modal-body {
    padding: 1.2rem 1.4rem;
}

.modal-footer {
    border-top: 1px solid var(--pa-border);
    padding: 0.85rem 1.4rem;
}

.btn-close {
    opacity: 0.4;
}

.btn-close:hover {
    opacity: 0.9;
}

/* ── API key masked input ──────────────────────────────────── */
.api-key-display {
    font-family: var(--pa-font-mono);
    letter-spacing: 0.08em;
    opacity: 0.55;
    font-size: 0.82rem;
}

/* ── Benchmark toggle buttons ──────────────────────────────── */
.btn-benchmark {
    --bench-color: #6b7a99;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 1.5px solid var(--bench-color);
    color: var(--bench-color);
    background: transparent;
    border-radius: 3px;
    opacity: 0.6;
    transition: opacity 0.12s, background 0.12s, color 0.12s, border-color 0.12s;
}

.btn-benchmark:hover,
.btn-benchmark:focus {
    opacity: 1;
    background: color-mix(in srgb, var(--bench-color) 10%, transparent);
    color: var(--bench-color);
    border-color: var(--bench-color);
}

.btn-benchmark.bench-active {
    opacity: 1;
    background: color-mix(in srgb, var(--bench-color) 14%, transparent);
    color: var(--bench-color);
    font-weight: 700;
}

.btn-benchmark:disabled {
    opacity: 0.3;
    cursor: wait;
}

.bench-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--bench-color);
    flex-shrink: 0;
}

/* ── Time-range selector (scrollable) ──────────────────────── */
/* Ten ranges (All Time … MTD) overrun a phone-width card. Scroll horizontally
   rather than wrapping — a wrapped .btn-group breaks the joined pill shape.
   The vertical padding keeps focus rings clear of the scroll container's clip
   edge; without it the ring is shaved flat on the top and bottom. */
.range-scroll {
    max-width: 100%;
    overflow-x: auto;
    padding-block: 2px;
}

.range-scroll .btn-group {
    flex-wrap: nowrap;
}

/* Buttons must not shrink, or they'd compress to fit instead of scrolling. */
.range-scroll .btn-group > .btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Custom-range popover: wide enough for two date inputs side by side, and
   scrollable so a long portfolio-anchor list never runs off a phone screen. */
.custom-range-menu {
    min-width: 20rem;
    max-width: min(24rem, calc(100vw - 1.5rem));
    max-height: min(28rem, calc(100vh - 6rem));
    overflow-y: auto;
}

/* ── Utility strip (fixed bottom bar) ─────────────────────── */
#utilityStrip {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1040;
    height: calc(2.75rem + env(safe-area-inset-bottom, 0px));
    display: flex;
    align-items: center;
    padding: 0 calc(1rem + env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) calc(1rem + env(safe-area-inset-left, 0px));
    background: var(--pa-surface);
    border-top: 1px solid var(--pa-border);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
}

/* ── Utility strip — PWA standalone on phone (rounded corners) ─ */
@media (display-mode: standalone) and (max-width: 767px) {
    #utilityStrip {
        padding-bottom: max(env(safe-area-inset-bottom, 0px), 1.5rem);
        height: calc(2.75rem + max(env(safe-area-inset-bottom, 0px), 1.5rem));
    }
}

/* ── Strip version label ───────────────────────────────────── */
#stripVersion {
    font-size: 0.65rem;
    font-family: var(--pa-font-mono);
    letter-spacing: 0.03em;
    opacity: 0.95;
    user-select: none;
    margin-right: 0.5rem;
}

/* ── Session countdown (utility strip) ────────────────────── */
#sessionBanner {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 0.67rem;
    font-family: var(--pa-font-mono);
    letter-spacing: 0.03em;
    color: var(--pa-text-2);
    opacity: 0.95;
    pointer-events: none;
    transition: color 0.4s ease, opacity 0.4s ease;
    user-select: none;
    white-space: nowrap;
}

#sessionBanner.warn {
    color: var(--pa-warn);
    opacity: 1;
}

#sessionBanner.critical {
    color: var(--pa-negative);
    opacity: 1;
    font-weight: 700;
}

/* ── Flash messages ────────────────────────────────────────── */
.alert {
    border-radius: 6px;
    font-size: 0.875rem;
    border-width: 1px;
}

/* Compact, vertically-centred close button (no alert-dismissible absolute override) */
.alert .btn-close {
    flex-shrink: 0;
    width      : 0.875rem;
    height     : 0.875rem;
    padding    : 0;
}

.alert.auto-dismiss {
    animation: fadeOutAlert 4s forwards;
}

@keyframes fadeOutAlert {
    0% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* ── Metric help modal ─────────────────────────────────────── */
.metric-help-section {
    margin-bottom: 1.25rem;
}

.metric-help-section:last-child {
    margin-bottom: 0;
}

.metric-help-section-title {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--pa-text-2);
    margin-bottom: 0.4rem;
}

.metric-formula {
    background: var(--pa-surface-2);
    border-left: 2px solid var(--pa-accent);
    border-radius: 0 4px 4px 0;
    padding: 0.6rem 1rem;
    font-family: var(--pa-font-mono);
    font-size: 0.8rem;
    line-height: 1.8;
    white-space: pre;
    overflow-x: auto;
    color: var(--pa-text);
}

.metric-scale {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.25rem;
}

.metric-scale-item {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    font-family: var(--pa-font-mono);
    padding: 0.18rem 0.6rem;
    border-radius: 3px;
    border: 1px solid;
    white-space: nowrap;
}

.metric-scale-bad {
    border-color: rgba(185, 28, 28, .28);
    background: rgba(185, 28, 28, .05);
    color: var(--pa-negative);
}

.metric-scale-warn {
    border-color: rgba(180, 83, 9, .28);
    background: rgba(180, 83, 9, .05);
    color: var(--pa-warn);
}

.metric-scale-ok {
    border-color: rgba(15, 107, 61, .28);
    background: rgba(15, 107, 61, .05);
    color: var(--pa-positive);
}

.metric-scale-great {
    border-color: rgba(29, 78, 216, .28);
    background: rgba(29, 78, 216, .05);
    color: var(--pa-accent);
}

.metric-scale-neutral {
    border-color: var(--pa-border);
    background: var(--pa-surface-2);
    color: var(--pa-text-2);
}

/* ── Card header ───────────────────────────────────────────── */
.card-header {
    background: var(--pa-surface-2);
    border-bottom: 1px solid var(--pa-border);
    border-radius: 8px 8px 0 0;
    padding: 0.7rem 1rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--pa-text);
    letter-spacing: 0.01em;
}

/* ── Form checks ───────────────────────────────────────────── */
.form-check-input {
    border-color: var(--pa-border-2);
    /* Use background-color (not the shorthand) so Bootstrap's form-switch
       background-image SVG thumb is preserved. */
    background-color: var(--pa-surface);
}

.form-check-input:checked {
    background-color: var(--pa-accent);
    border-color: var(--pa-accent);
}

.form-check-input:focus {
    border-color: var(--pa-accent);
    box-shadow: 0 0 0 3px rgba(var(--pa-accent-rgb), 0.12);
}

.form-check-label {
    font-size: 0.84rem;
    color: var(--pa-text);
}

/* ── Horizontal rules ──────────────────────────────────────── */
hr {
    border-color: var(--pa-border);
    opacity: 1;
}


/* ── Typography ────────────────────────────────────────────── */
h4,
h5,
h6 {
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--pa-text);
}

/* ── Badges ────────────────────────────────────────────────── */
.badge {
    border-radius: 3px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

/* ── Privacy mode ──────────────────────────────────────────── */

/* Blurred element — animates on both transitions */
.privacy-blur {
    transition: filter 0.2s ease;
    filter: none;
}

body.privacy-mode .privacy-blur {
    filter: blur(6px);
    user-select: none;
}

/* Toggle button: filled accent when active, styled from body state alone */
body.privacy-mode #privacyToggle {
    background: var(--pa-accent);
    border-color: var(--pa-accent);
    color: #fff;
}

body.privacy-mode #privacyToggle:hover {
    background: color-mix(in srgb, var(--pa-accent) 83%, #000);
    border-color: color-mix(in srgb, var(--pa-accent) 83%, #000);
}

/* ── Responsive border utilities (md breakpoint = 768px) ───── */
@media (min-width: 768px) {
    .border-start-md { border-left: 1px solid var(--bs-border-color) !important; }
}

/* ── Mobile: metric card density ──────────────────────────── */
@media (max-width: 575.98px) {

    /* Metric value: 1.5rem is too wide for col-6 on narrow phones */
    .metric-value {
        font-size: 0.95rem;
    }

    /* Tighten card padding so more value fits */
    .metric-card .card-body {
        padding: 0.55rem 0.65rem !important;
    }

    /* Page h4 titles (portfolio name, wealth title) */
    h4 {
        font-size: 1.1rem;
    }
}

/* ── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--pa-border-2);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--pa-text-2);
}
/* ── Portfolio page switcher ───────────────────────────────── */
.portfolio-switcher {
    padding: 0.25rem 0.5rem;
    border-radius: 0.5rem;
    transition: background 0.12s ease;
}
.portfolio-switcher:hover,
.portfolio-switcher:focus {
    background: var(--pa-accent-faint);
    text-decoration: none;
}
.portfolio-switcher .bi-chevron-down {
    transition: transform 0.15s ease;
}
.portfolio-switcher[aria-expanded="true"] .bi-chevron-down {
    transform: rotate(180deg);
}

/* ── Closed portfolio rows ─────────────────────────────────── */
.portfolio-closed-row { opacity: 0.6; }
.portfolio-closed-row:hover { opacity: 0.85; }

/* ── Brand wordmark (theme-aware) ──────────────────────────────
 * Two PNG wordmarks toggled by the Bootstrap data-bs-theme on <html>:
 * the "lite" mark (dark ink) on light themes, the "dark" mark (light ink)
 * on dark themes. Pure CSS swap — instant on toggle, no JS. */
.brand-logo { width: auto; vertical-align: middle; }
.brand-logo.brand-dark { display: none; }
[data-bs-theme="dark"] .brand-logo.brand-lite { display: none; }
[data-bs-theme="dark"] .brand-logo.brand-dark { display: inline-block; }

/* ── Sortable table headers ─────────────────────────────────── */
th.sortable-th {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

th.sortable-th::after {
    content: " \2195";
    color: var(--bs-secondary-color);
    font-size: 0.72em;
    opacity: 0.45;
}

th.sortable-th[data-sort-dir="asc"]::after {
    content: " \2191";
    opacity: 0.75;
}

th.sortable-th[data-sort-dir="desc"]::after {
    content: " \2193";
    opacity: 0.75;
}

th.sortable-th:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: -2px;
}

/* ── Home — phone-first landing quick view ─────────────────── */
/* Sized against an iPhone 17 Pro in standalone PWA mode: 874 CSS px tall, of
   which the status bar, navbar and #utilityStrip take ~176. Everything from the
   hero down to the chart card has to land inside the ~698 px that remain, so the
   measurements below are deliberate rather than incidental — check the fold
   before growing any of them. On a desktop the page centres into a phone-width
   column instead of stretching, so /home stays testable in a browser. */

/* Width ladder. The phone case is the constraint the layout is designed for;
   wider viewports get more room rather than a phone-shaped column stranded in
   the middle of a desktop screen. Below lg the two column wrappers are plain
   blocks, so the phone reading order is exactly the source order. */
.home-page {
    margin-inline: auto;
}

/* Large phones / small tablets: one column, just roomier. */
@media (min-width: 576px) {
    .home-page { max-width: 620px; }
}

@media (min-width: 768px) {
    .home-page { max-width: 720px; }
}

/* Desktop: two columns — the quick view on the left, reference on the right. */
@media (min-width: 992px) {
    .home-page {
        max-width: 1180px;
        display: grid;
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
        grid-template-areas:
            "alerts alerts"
            "main   side";
        column-gap: 1rem;
        align-items: start;
    }

    .home-alerts { grid-area: alerts; }
    .home-main   { grid-area: main; }
    .home-side   { grid-area: side; }
}

@media (min-width: 1400px) {
    .home-page { max-width: 1320px; }
}

/* Reduce the shared <main> padding: the hero should sit right under the navbar. */
.home-page .home-hero { margin-top: -0.5rem; }

.home-eyebrow {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--pa-text-2);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.home-asof { font-size: 0.62rem; color: var(--pa-text-2); }

.home-sep { opacity: 0.35; }

/* ── Hero ──────────────────────────────────────────────────── */
.home-hero {
    border: 1px solid var(--pa-border);
    border-left: 2px solid var(--pa-accent);
    border-radius: 10px;
    box-shadow: var(--pa-shadow);
}

.home-hero .card-body { padding: 0.7rem 0.8rem 0.62rem; }

.home-hero-value {
    font-size: 2.2rem;
    font-weight: 600;
    line-height: 1.06;
    letter-spacing: -0.035em;
    margin-top: 2px;
}

.home-hero-value small {
    font-size: 0.95rem;
    color: var(--pa-text-2);
    font-weight: 500;
    margin-right: 4px;
    letter-spacing: 0;
}

.home-hero-pnl {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 3px;
    font-size: 0.92rem;
}

.home-pill {
    font-size: 0.85rem;
    padding: 1px 6px;
    border-radius: 5px;
    background: var(--bs-secondary-bg);
}

/* The window the hero describes. Never hide this: a range-scoped P&L that looks
   all-time is the one way this screen can actively mislead. */
.home-scope {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pa-text-2);
    border: 1px solid var(--pa-border-2);
    border-radius: 4px;
    padding: 1px 5px;
}

.home-hero-ctx {
    margin-top: 7px;
    padding-top: 6px;
    border-top: 1px solid var(--pa-border);
    font-size: 0.68rem;
    color: var(--pa-text-2);
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}

.home-hero-ctx::-webkit-scrollbar { display: none; }
.home-hero-ctx b { color: var(--pa-text); font-weight: 500; }

/* ── Actions row ───────────────────────────────────────────── */
.home-actions { display: flex; gap: 7px; align-items: stretch; }

.home-btn-add {
    flex: 0 0 auto;
    width: 44px;               /* square, icon-only — the pill takes the rest */
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 1rem;
}

/* The dropdown WRAPPER is the flex item here, not the button inside it — put
   the grow on the wrapper or the pill collapses to the width of the portfolio
   name instead of claiming the rest of the row. */
.home-target {
    flex: 1 1 auto;
    min-width: 0;
}

.home-btn-target {
    width: 100%;
    min-width: 0;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    font-size: 0.8rem;
    padding-inline: 0.6rem;
    border: 1px solid var(--pa-border-2);
    border-radius: 8px;
    background: var(--pa-surface);
    color: var(--pa-text);
}

.home-btn-target::after { display: none; }   /* own chevron icon instead */

.home-target-inner {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.home-target-name {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-swatch {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    flex: 0 0 auto;
    display: inline-block;
}

/* ── Last entry strip ──────────────────────────────────────── */
.home-last {
    display: flex;
    flex-direction: row;   /* .card would otherwise stack it into a column */
    align-items: center;
    text-align: left;
    gap: 9px;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--pa-border);
    border-left: 2px solid var(--pa-accent);
    border-radius: 10px;
    background: var(--pa-surface);
    box-shadow: var(--pa-shadow);
}

.home-last-body { flex: 1; min-width: 0; }

.home-last-line {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-top: 2px;
    flex-wrap: wrap;
}

.home-last-amt { font-size: 1rem; font-weight: 600; letter-spacing: -0.03em; }
.home-last-meta { font-size: 0.68rem; color: var(--pa-text-2); }
.home-last-chev { color: var(--pa-text-2); font-size: 0.8rem; }

/* ── Range selector: full-width chips on a phone ───────────── */
.home-ranges .js-range-selector { flex-wrap: nowrap; gap: 6px; }
.home-ranges .range-scroll { flex: 1 1 auto; min-width: 0; }
.home-ranges .js-range-chips { width: 100%; }
.home-ranges .js-range-chips .btn {
    flex: 1 1 0;
    min-width: 0;          /* without this the longest label ("All Time") wins */
    padding-inline: 0.25rem;
    font-size: 0.72rem;
}

/* The Custom popover's label is redundant next to its calendar icon here. */
@media (max-width: 575.98px) {
    .home-ranges .js-range-custom-btn .js-range-custom-label { display: none; }
    .home-ranges .js-range-custom-btn i { margin-right: 0 !important; }
}

/* ── Chart card ────────────────────────────────────────────── */
.home-tabs .btn {
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.home-chart-note { font-size: 0.62rem; font-family: var(--pa-font-mono); }

.home-bench-row {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 1px;
}

.home-bench-row::-webkit-scrollbar { display: none; }
.home-bench-row .btn-benchmark { flex: 0 0 auto; }

.home-chart-wrap { position: relative; height: 218px; }

.home-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 3px 10px;
    padding: 4px 2px 0;
    font-size: 0.62rem;
    color: var(--pa-text-2);
}

.home-legend .home-lg { display: inline-flex; align-items: center; gap: 4px; }
.home-legend .home-lg b {
    font-family: var(--pa-font-mono);
    color: var(--pa-text);
    font-weight: 500;
}
.home-legend .home-lg .home-swatch { width: 0.45rem; height: 0.45rem; }
.home-legend .home-lg.is-bench .home-swatch { opacity: 0.75; }

/* ── Holdings ──────────────────────────────────────────────── */
.home-holdings .home-hrow {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0.45rem 0.7rem;
    font-size: 0.8rem;
}

.home-hname {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-hval { font-size: 0.8rem; }
.home-hpct { font-size: 0.72rem; width: 3.6rem; text-align: right; flex: 0 0 auto; }

.home-tag {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pa-text-2);
    border: 1px solid var(--pa-border-2);
    border-radius: 3px;
    padding: 0 3px;
    margin-left: 5px;
    vertical-align: 1px;
}

/* ── Collapsible sections ──────────────────────────────────── */
.home-acc-head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0.62rem 0.7rem;
    background: transparent;
    border: 0;
    color: var(--pa-text);
    text-align: left;
}

.home-acc-head:not(.collapsed) { border-bottom: 1px solid var(--pa-border); }

.home-acc-title {
    font-size: 0.82rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.home-acc-title i { color: var(--pa-accent); font-size: 0.85rem; }

.home-acc-note {
    font-size: 0.68rem;
    color: var(--pa-text-2);
    font-family: var(--pa-font-mono);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.home-acc-head .chev { transition: transform 0.15s ease; }
.home-acc-head.collapsed .chev { transform: rotate(-90deg); }

.home-link-card { text-decoration: none; color: inherit; }
.home-link-card:hover { background: var(--pa-surface-2); }

.home-subchart { position: relative; height: 128px; }

.home-subchart-label {
    font-size: 0.7rem;
    font-weight: 600;
    margin-bottom: 2px;
}

.home-subchart-label span { font-weight: 400; font-size: 0.65rem; }

.home-export-label {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--pa-text-2);
    margin-bottom: 5px;
}

/* Phones: reclaim the vertical padding <main> adds, so the fold budget holds. */
@media (max-width: 575.98px) {
    body:has(.home-page) main.container-fluid {
        padding-top: 0.6rem !important;
        padding-inline: 0.75rem;
    }

    .home-page .metric-value { font-size: 1rem; }
    .home-page .metric-card .card-body { padding: 0.45rem 0.55rem !important; }

    /* Icon-only tabs are ambiguous; keep the words but tighten them. */
    .home-tabs .btn { padding-inline: 0.5rem; }
}

/* Short phones (SE-class): shrink the hero figure; the chart sizes itself below. */
@media (max-width: 575.98px) and (max-height: 740px) {
    .home-hero-value { font-size: 1.9rem; }
}

/* ── Portfolios current value ──────────────────────────────── */
.home-pcv .list-group-item {
    padding: 0.42rem 0.7rem;
    font-size: 0.78rem;
}

.home-pcv-name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Phone: page-by-page snapping ──────────────────────────────
   Each .home-page-section is one screenful and a snap point, so the phone
   moves a full page at a time instead of scrolling freely. --pa-home-page is
   measured and set by PA.initHome(); the calc() is the pre-JS fallback.

   min-height, not height: a section shorter than a page just ends early (it is
   a slide), and one that is taller is not trapped — a snap area larger than the
   snapport can be scrolled through freely. The Holdings list is repaginated by
   PA.initHome() before it ever gets that far. */
@media (max-width: 575.98px) {
    html:has(.home-page) {
        /* PA.initHome() drops this to `proximity` if any page ends up taller
           than one screen, so mandatory snapping can never trap content. */
        scroll-snap-type: y var(--pa-home-snap, mandatory);
        /* The navbar is sticky, so a snapped section would hide underneath it. */
        scroll-padding-top: var(--pa-home-nav, 53px);
    }

    .home-page-section {
        scroll-snap-align: start;
        scroll-snap-stop: always;
        min-height: var(--pa-home-page, calc(100dvh - 53px - 2.75rem - env(safe-area-inset-bottom, 0px)));
    }

    /* The quick view already sizes itself via the chart card. */
    .home-main.home-page-section { min-height: 0; }
}

/* ── Phone: the chart card fills whatever the fold leaves ──────
   Pin the CARD's height, not the canvas. The benchmark row only exists on the
   Compare tab, so sizing the canvas made the card — and every card below it —
   change height when you switched tabs, bringing Holdings back into view. With
   the card pinned and its body flexing, the canvas absorbs the difference and
   nothing below the card moves.

   These values are a fallback: PA.initHome() measures the card's real offset on
   load and on resize and sets an exact height, so no constant here can go stale.
   The strip expressions mirror the #utilityStrip block above — a browser tab
   reserves 2.75rem + the bottom inset, an installed PWA at least 1.5rem of it. */
@media (max-width: 575.98px) {
    .home-chart-card {
        display: flex;
        flex-direction: column;
        height: calc(100dvh - 355px - 2.75rem - env(safe-area-inset-bottom, 0px));
        min-height: 260px;
    }

    .home-chart-card > .card-body {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    .home-chart-wrap {
        flex: 1 1 auto;
        height: auto;
        min-height: 0;
    }
}

@media (display-mode: standalone) and (max-width: 575.98px) {
    .home-chart-card {
        height: calc(100dvh - 355px - 2.75rem - max(env(safe-area-inset-bottom, 0px), 1.5rem));
    }
}

/* Desktop sizing. Kept at the end of the block: these override base rules
   declared further up, and equal-specificity media rules only win on source
   order. The fold stops applying once there are two columns, so the charts and
   the hero figure get the room a desktop actually has. */
@media (min-width: 992px) {
    /* Tall enough that the left column roughly matches the right one once the
       Portfolios Current Value card joins it — see the measurement note on
       data-home-pcv. The chart is the element with the most to gain from the
       space, so it absorbs the difference rather than leaving a gap. */
    .home-chart-wrap { height: 500px; }
    .home-subchart   { height: 160px; }
    .home-hero-value { font-size: 2.6rem; }
    .home-hero .card-body { padding: 0.9rem 1rem 0.8rem; }
}

@media (min-width: 1400px) {
    .home-chart-wrap { height: 540px; }
}