/* 02_dashboard.css — Authenticated dashboard: sidebar shell, KPI cards,
   fund cards, filter badge, sync status. Ported from styles.py
   inject_dashboard_styles()/inject_sidebar_styles() minus all
   Streamlit/BaseWeb selectors. */

.dash-shell {
    display: flex;
    min-height: 100vh;
    background: var(--bg-page);
}

/* ------------------------------------------------------------------ */
/* Sidebar                                                              */
/* ------------------------------------------------------------------ */
.dashboard-sidebar {
    width: 300px;
    flex-shrink: 0;
    background: linear-gradient(180deg, var(--bg-green-light) 0%, var(--bg-page) 140%);
    border-right: 1px solid var(--border);
    padding: 16px 20px 32px 20px;
    min-height: 100vh;
    transition: width 0.25s ease, padding 0.25s ease;
    overflow: hidden;
}

/* Collapsed state (class toggled by the sidebar-toggle clientside callback) */
.dash-shell.sidebar-collapsed .dashboard-sidebar {
    width: 0;
    padding: 0;
    border-right: none;
}

/* Collapse/expand toggle — fixed at the top-left edge, always reachable */
.sidebar-toggle-btn {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 10001;
    background: var(--bg-card);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-pill);
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-1);
    padding: 0;
}
.sidebar-toggle-btn:hover { background: var(--bg-hover); }
.sidebar-toggle-btn .raw-html { display: flex; }
.sidebar-toggle-chevron { transition: transform 0.25s ease; }
.dash-shell.sidebar-collapsed .sidebar-toggle-chevron { transform: rotate(180deg); }

/* Keep the sidebar brand clear of the fixed toggle */
.dashboard-sidebar .sidebar-brand { padding-top: 1.25rem; }

/* Hamburger navigation menu (closed by default) */
.sidebar-menu {
    background-color: var(--bg-card);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin: 4px 0;
}
.sidebar-menu-summary {
    list-style: none;
    display: flex;
    align-items: center;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--text-secondary);
    padding: 10px 12px;
    cursor: pointer;
    user-select: none;
}
.sidebar-menu-summary::-webkit-details-marker { display: none; }
.sidebar-menu-summary:hover { background: var(--bg-hover); }
.sidebar-menu[open] { border-color: var(--brand-green); }
.sidebar-menu .sidebar-menu-links { padding: 4px 8px 8px 8px; }
.sidebar-menu .hamburger-icon p { display: inline-flex; margin: 0; }

.sidebar-brand {
    text-align: center;
    padding: 0.75rem 0 0.25rem 0;
}
.sidebar-brand h1 {
    font-size: var(--fs-4xl);
    margin: 0;
    line-height: 1.2;
    font-family: 'Inter', sans-serif;
    letter-spacing: -0.01em;
}
.brand-gradient-divider {
    width: 48px;
    height: 3px;
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, var(--brand-green), var(--brand-teal), var(--warning));
    margin: 12px auto 0 auto;
    opacity: 0.7;
}
.brand-gradient-divider.left { margin: 12px 0; }

.sidebar-section-label {
    font-size: var(--fs-3xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.65px;
    color: var(--text-muted);
    margin: 16px 0 4px 0;
}

.sidebar-nav-link {
    display: block;
    color: var(--text-primary);
    text-decoration: none;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    padding: 6px 8px;
    border-radius: var(--radius-sm);
}
.sidebar-nav-link:hover { background: var(--bg-hover); }

.sidebar-caption {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    margin: 2px 0;
    word-break: break-word;
}

.sync-pill {
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    margin: 4px 0;
}
.sync-pill.ok {
    background: var(--success-light);
    color: var(--success-text);
    border: 1px solid rgb(var(--brand-green-rgb) / 0.25);
}
/* "No data yet" is a neutral state, not an error — muted, not red. */
.sync-pill.missing {
    background: var(--bg-hover);
    color: var(--text-muted);
    border: 1px solid var(--border-medium);
}

/* Advanced-filters card (Streamlit expander → styled details element) */
.sidebar-filters {
    background-color: var(--bg-card);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    overflow: visible;
    transition: border-color var(--dur-base) var(--ease-standard),
                box-shadow var(--dur-base) var(--ease-standard);
    margin: 4px 0;
}
.sidebar-filters[open] { border-color: var(--brand-green); }
.sidebar-filters:focus-within { box-shadow: var(--focus-ring); }
.sidebar-filters summary {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--text-secondary);
    padding: 10px 12px;
    cursor: pointer;
    list-style: none;
}
.sidebar-filters .filters-body { padding: 4px 12px 12px 12px; }

.sidebar-filter-status {
    font-size: var(--fs-2xs);
    color: var(--text-muted);
    margin: 4px 0 0 2px;
}
.sidebar-filter-status strong { color: var(--brand-green-text); }

.sidebar-logout-btn {
    background: transparent;
    color: var(--text-secondary);
    border: 1.5px solid var(--border-opaque);
    border-radius: var(--radius-sm);
    font-weight: var(--fw-medium);
    font-size: var(--fs-sm);
    padding: 8px 20px;
    width: 100%;
    margin-top: 12px;
}
.sidebar-logout-btn:hover { border-color: var(--brand-green); color: var(--text-primary); }

/* ------------------------------------------------------------------ */
/* Main column                                                          */
/* ------------------------------------------------------------------ */
.dashboard-main {
    flex-grow: 1;
    min-width: 0;
    padding: 24px 32px 48px 32px;
}

/* Dashboard tab menu (FICs | FPVs | FICs Benchmark | FPVs Benchmark) —
   dcc.Link tabs, brand-green active underline, mirroring the .custom-tabs
   treatment. Token-driven (light + dark). */
.dashboard-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid var(--border-opaque);
    margin: 0 0 4px 0;
}
.dashboard-tab {
    padding: 12px 20px;
    margin-bottom: -2px;
    font-size: var(--fs-md);
    font-weight: var(--fw-medium);
    font-family: 'Inter', sans-serif;
    color: var(--text-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.dashboard-tab:hover { color: var(--text-secondary); }
.dashboard-tab--active {
    color: var(--text-primary);
    font-weight: var(--fw-semibold);
    border-bottom: 2px solid var(--brand-green);
}

.sfc-disclaimer {
    text-align: center;
    font-size: var(--fs-lg);
    font-weight: var(--fw-regular);
    color: var(--text-muted);
    margin: 1rem 0 0 0;
    font-family: 'Inter', sans-serif;
}

.filter-badge-wrap {
    display: flex;
    justify-content: center;
    margin: 8px 0 0 0;
}
.filter-badge {
    display: inline-block;
    background: var(--bg-green-light);
    border: 1px solid rgb(var(--brand-green-rgb) / 0.3);
    border-radius: var(--radius-pill);
    padding: 4px 14px;
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    color: var(--brand-green-text);
    letter-spacing: 0.2px;
}

/* Control rows (selectors above each section) */
.control-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.control-row > div { min-width: 150px; }
.control-row .control-grow { flex-grow: 1; }

/* KPI grid */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 8px 0 20px 0;
}

.metric-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    box-shadow: var(--shadow-1);
}
.metric-label {
    font-size: var(--fs-2xs);
    color: var(--text-muted);
    margin: 0;
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.65px;
}
.metric-label.accent-brand { color: var(--brand-green-text); }
.metric-sublabel {
    font-size: var(--fs-sm);
    color: var(--text-primary);
    margin: 8px 0;
    font-weight: var(--fw-medium);
    line-height: var(--lh-ui);
    word-break: break-word;
    white-space: normal;
}
.metric-value {
    font-size: var(--fs-9xl);
    color: var(--text-primary);
    margin: 0;
    font-weight: var(--fw-semibold);
    letter-spacing: -0.8px;
}
.metric-value.value-success { color: var(--success-text); }
.metric-value.value-error { color: var(--error-text); }
.metric-value.value-brand { color: var(--brand-green-text); }
.metric-value .value-unit { font-size: var(--fs-lg); color: var(--text-muted); }

/* Known-fund result cards */
.fund-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 12px 0;
}
.fund-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    box-shadow: var(--shadow-1);
    transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.fund-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-2);
}
.fund-card-up { border-left: 4px solid var(--brand-green); }
.fund-card-down { border-left: 4px solid var(--error); }
.fund-card-name {
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    font-weight: var(--fw-medium);
    line-height: var(--lh-ui);
    word-break: break-word;
    white-space: normal;
}
.fund-card-tipo {
    font-size: var(--fs-2xs);
    color: var(--text-muted);
    margin-top: 4px;
}
.fund-card-rate {
    font-size: var(--fs-7xl);
    font-weight: var(--fw-semibold);
    margin-top: 8px;
    letter-spacing: -0.5px;
}
.fund-card-rate.rate-positive { color: var(--brand-green-text); }
.fund-card-rate.rate-negative { color: var(--error-text); }
/* Deep link under each known-fund card into the dataset's benchmark, with
   the fund and its class pre-selected. */
.fund-card-benchmark-link {
    display: inline-block;
    margin-top: var(--space-2);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--brand-green-text);
    text-decoration: none;
}
.fund-card-benchmark-link:hover { text-decoration: underline; }

/* Table container */
.table-wrap {
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin: 8px 0 20px 0;
}

/* First-load hint under spinners */
.risk-legend {
    font-size: var(--fs-2xs);
    line-height: 1.45;
    color: var(--text-muted);
    margin: 8px 4px 0 4px;
}

/* Benchmark page -------------------------------------------------------- */

/* The Benchmark pages are the only dashboards whose tab strip is followed
   directly by a .section-header (the others put a .sfc-disclaimer in between,
   which brings its own 1rem top margin), so the title needs the breathing
   room added back here rather than on the shared .dashboard-tabs rule. */
.page-benchmark .dashboard-tabs { margin-bottom: var(--space-5); }

/* Centers the CTA under the centered .sfc-disclaimer and owns its vertical
   rhythm: var(--space-6) above matches the 2rem .divider margin below, so the
   CTA sits an equal distance from the source line and the rule under it. */
.benchmark-cta-wrap {
    display: flex;
    justify-content: center;
    margin: var(--space-6) 0 0 0;
}

/* Cross-link from the FIC ranking into /Benchmark, and from /Benchmark into
   its methodology article. Margins live on the wrapper, not here. */
.benchmark-cta {
    display: inline-block;
    margin: 0;
    padding: 8px 14px;
    border: 1px solid var(--brand-green);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--brand-green-text);
    text-decoration: none;
}
.benchmark-cta:hover {
    background: var(--brand-green-fill);
    color: var(--on-fill);
}

/* Inline radio groups (period presets, comparison scope, risk-free rate) */
.radio-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    padding-top: 8px;
}
.radio-inline label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    cursor: pointer;
}
.radio-inline input[type="radio"] {
    accent-color: var(--brand-green);
    margin: 0;
    cursor: pointer;
}

/* "Include funds in liquidation" checkbox at the head of each ranking table
   (unchecked by default: rankings leave those funds out). Mirrors the inline
   radio groups so the controls above a table read as one family. */
.liquidation-toggle {
    margin: calc(-1 * var(--space-2)) 0 var(--space-4);
}
.liquidation-toggle label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    cursor: pointer;
}
.liquidation-toggle input[type="checkbox"] {
    accent-color: var(--brand-green);
    margin: 0;
    cursor: pointer;
}
.liquidation-toggle input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}
.text-input:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Five summary cards read better flowing than in the default 3-up grid */
.kpi-grid--benchmark {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
/* Long values ("#372 de 1 297", "±999.99 pp") must wrap inside the
   auto-fit columns and grow the card, not spill past its border. */
.kpi-grid--benchmark .metric-card {
    min-width: 0;
}
.kpi-grid--benchmark .metric-value {
    overflow-wrap: anywhere;
}

/* Responsive: stack sidebar above content on small screens.
   Breakpoint is the repo-standard 768px (see 07_responsive.css). */
@media (max-width: 768px) {
    .dash-shell { flex-direction: column; }
    .dashboard-sidebar {
        width: 100%;
        min-height: 0;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }
    .kpi-grid, .fund-card-grid { grid-template-columns: 1fr; }
    .kpi-grid--benchmark { grid-template-columns: 1fr; }
    /* Four tabs on a phone: a 2x2 grid (the datasets above, their
       benchmarks below) where every tab carries its own baseline, so the
       active underline always sits on a line. A wrapped flex row left a
       first-row underline floating above the second row. */
    .dashboard-tabs {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0;
        border-bottom: none;
    }
    .dashboard-tab {
        padding: 10px 14px;
        margin-bottom: 0;
        text-align: center;
        border-bottom: 2px solid var(--border-opaque);
    }
    .dashboard-tab--active { border-bottom-color: var(--brand-green); }
}

/* Four tabs beside the open 300px sidebar overflow between the 768px
   breakpoint and ~880px: keep every label on one line and tighten the
   padding there, instead of wrapping (a wrapped row would strand the active
   tab's underline above the strip's bottom border). Sized to leave >= 15px of
   slack at both ends of the band, so a classic (non-overlay) scrollbar still
   fits: measured 19px at 769px and 35px at 881px. */
@media (min-width: 769px) and (max-width: 880px) {
    .dashboard-tab { white-space: nowrap; padding: 12px 8px; }
}