/* ===== BOOTSTRAP OVERRIDES - Must be first ===== */
/* Reset Bootstrap's default input styles completely */
.form-control,
input.form-control,
.input-group > .form-control,
.input-group-sm > .form-control {
    border: 1px solid #e5e7eb !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    background-color: #fff !important;
    padding: 8px 12px !important;
    font-size: 0.875rem !important;
    height: auto !important;
    line-height: 1.5 !important;
}

.form-control:focus,
input.form-control:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1) !important;
    outline: none !important;
}

/* Fix input group borders */
.input-group > .form-control:not(:last-child),
.input-group > input:not(:last-child) {
    border-right: none !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.input-group > .input-group-text {
    border: 1px solid #e5e7eb !important;
    border-left: none !important;
    background: #f9fafb !important;
    border-radius: 0 6px 6px 0 !important;
    padding: 0 12px !important;
    color: #6b7280 !important;
    font-size: 0.875rem !important;
}

/* Small size variant */
.input-group-sm > .form-control,
.input-group-sm > input,
.form-control-sm {
    height: 32px !important;
    min-height: 32px !important;
    padding: 4px 10px !important;
    font-size: 0.8125rem !important;
}

.input-group-sm > .input-group-text {
    height: 32px !important;
    padding: 0 10px !important;
    font-size: 0.8125rem !important;
}

/* ===== CSS Variables for consistent theming ===== */
:root {
    /* Restrained accent used by the landing page, the Mega-cap Lab and the
       sidebar. The older indigo below is still used by the other pages. */
    --accent-color: #1d4ed8;
    --ink-color: #161a1f;
    --paper-color: #fbfaf8;
    --rule-color: #e4e1da;
    --primary-color: #6366f1;
    --primary-hover: #4f46e5;
    --sidebar-bg: #1b1e24;
    --sidebar-text: #cdd6f4;
    --sidebar-muted: #6c7086;
    --content-bg: #f8fafc;
    --card-bg: #ffffff;
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --border-color: #e2e8f0;
    --input-bg: #ffffff;
    --input-border: #cbd5e1;
    --input-focus: #6366f1;
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --danger-color: #ef4444;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --transition: all 0.2s ease;
}

/* ===== Base Styles ===== */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: var(--content-bg);
    color: var(--text-primary);
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

/* ===== Sidebar ===== */
.sidebar {
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    min-height: 100vh;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
}

.sidebar-logo {
    font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
    font-size: 1.7rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 6px;
    color: #f5f4f1;
    letter-spacing: 0.06em;
}

.sidebar-tagline {
    font-size: 0.8rem;
    color: var(--sidebar-muted);
    text-align: center;
    margin-bottom: 32px;
    line-height: 1.4;
}

.sidebar hr {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin: 0 0 24px 0;
}

/* Sidebar Navigation */
.sidebar .nav-link {
    color: var(--sidebar-text);
    padding: 12px 16px;
    margin: 4px 0;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-weight: 500;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar .nav-link:hover {
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
}

.sidebar .nav-link.active,
.sidebar .nav-link.active:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    box-shadow: inset 2px 0 0 var(--accent-color);
}

.sidebar-bottom {
    margin-top: auto;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-legal-links {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 16px;
    font-size: 0.74rem;
}

.sidebar-legal-link {
    color: var(--sidebar-muted);
    text-decoration: none;
}

.sidebar-legal-link:hover {
    color: var(--sidebar-text);
    text-decoration: underline;
}

#current-user-label {
    color: rgba(255, 255, 255, 0.75) !important;
    font-size: 0.82rem;
    font-weight: 500;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    text-align: center;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.sidebar-bottom label {
    color: var(--sidebar-muted) !important;
    font-size: 0.75rem !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px !important;
    margin-left: 0 !important;
}

.sidebar-bottom input {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: var(--sidebar-text) !important;
    padding: 10px 12px;
    font-size: 0.85rem;
}

.sidebar-bottom input:focus {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2) !important;
}

.sidebar-bottom input::placeholder {
    color: var(--sidebar-muted);
}

/* Scale Toggle in Sidebar */
.sidebar-bottom .form-check {
    padding: 6px 12px;
    background: transparent;
    border: none;
}

.sidebar-bottom .form-check-label {
    color: var(--sidebar-text) !important;
    font-size: 0.85rem !important;
    text-transform: none;
    letter-spacing: normal;
}

.sidebar-bottom .form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

/* A dropdown's selected value is a plain span with no width of its own, so a
   long option ("FIFO (First In, First Out)") spilled its control on a 320px
   screen. Truncate instead; the full text is still in the open menu. */
.Select-value-label,
.Select-placeholder {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* ===== Main Content ===== */
/* The individual overflow sources are fixed where they are, and asserted at
   several phone widths. This is the backstop for the ones nobody has measured
   yet: clip rather than hidden, because hidden makes a scroll container and
   that breaks the sticky header inside it. */
@media (max-width: 768px) {
    .app-container {
        overflow-x: clip;
        max-width: 100vw;
    }
}

.main-content {
    padding: 32px 40px;
    min-height: 100vh;
    background: var(--content-bg);
}

/* ===== Page Header ===== */
.page-header {
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}

.page-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px 0;
}

.page-subtitle {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0;
}

/* ===== Cards ===== */
.card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.card:hover {
    box-shadow: var(--shadow-md);
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--border-color);
    padding: 16px 20px;
    font-weight: 600;
    font-size: 0.95rem;
}

.card-body {
    padding: 20px;
}

/* Remove default card borders */
.card.border-0, .card[style*="border:unset"] {
    border: none !important;
    box-shadow: none !important;
}

/* ===== Form Elements - Clean shadcn/Tailwind Reset ===== */

/* Remove Bootstrap's default styles */
.form-control,
.form-control:focus,
input.form-control,
input.form-control:focus {
    box-shadow: none !important;
    outline: none !important;
}

/* Base label styling */
label, .form-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: #374151;
    margin: 0 0 4px 0 !important;
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

/* Clean input styling - shadcn inspired */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="tel"],
textarea,
.form-control {
    width: 100%;
    height: 36px;
    padding: 8px 12px;
    font-size: 0.875rem;
    font-family: inherit;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
    color: #111827;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
    margin: 0;
}

input:focus,
textarea:focus,
.form-control:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
}

input::placeholder,
textarea::placeholder {
    color: #9ca3af;
}

/* Dropdown Styling - shadcn inspired */
.dash-dropdown {
    margin: 0;
    padding: 0;
}

.dash-dropdown .Select-control {
    height: 36px !important;
    min-height: 36px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 6px !important;
    background: #fff !important;
}

.dash-dropdown .Select-control:hover {
    border-color: #d1d5db !important;
}

.dash-dropdown .is-focused .Select-control {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1) !important;
}

.dash-dropdown .Select-placeholder,
.dash-dropdown .Select--single > .Select-control .Select-value {
    padding: 0 12px !important;
    line-height: 34px !important;
    font-size: 0.875rem !important;
}

.dash-dropdown .Select-input {
    height: 34px !important;
    padding: 0 12px !important;
}

.dash-dropdown .Select-input > input {
    height: 34px !important;
    padding: 0 !important;
}

.dash-dropdown .Select-menu-outer {
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    margin-top: 4px;
}

.dash-dropdown .Select-option {
    padding: 8px 12px;
    font-size: 0.875rem;
}

.dash-dropdown .Select-option.is-focused {
    background: #f3f4f6;
}

.dash-dropdown .Select-option.is-selected {
    background: #6366f1;
    color: white;
}

/* Radio & Checkbox - Clean shadcn style */
.form-check {
    padding: 0 !important;
    margin: 0 0 6px 0 !important;
    border: none !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: pointer;
    min-height: auto !important;
}

.form-check-input {
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1.5px solid #d1d5db !important;
    border-radius: 4px !important;
    background: #fff !important;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
    -webkit-appearance: none !important;
    appearance: none !important;
    position: relative !important;
}

.form-check-input[type="radio"] {
    border-radius: 50% !important;
}

.form-check-input:hover {
    border-color: #6366f1 !important;
}

.form-check-input:checked {
    background-color: #6366f1 !important;
    border-color: #6366f1 !important;
}

.form-check-input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.form-check-input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    background: white;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.form-check-label {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    color: var(--bs-text-2) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    cursor: pointer;
    line-height: 1.4;
}

/* ===== Buttons ===== */
.btn, button.dash-debug-menu {
    padding: 10px 20px;
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: var(--radius-md);
    transition: var(--transition);
    cursor: pointer;
    border: none;
}

.btn-primary {
    background: var(--primary-color);
    color: white;
}

.btn-primary:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-secondary, .btn-outline-primary {
    background: transparent;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

.btn-secondary:hover, .btn-outline-primary:hover {
    background: var(--primary-color);
    color: white;
}

.btn-success {
    background: var(--success-color);
    color: white;
}

.btn-danger {
    background: var(--danger-color);
    color: white;
}

/* ===== Tables ===== */
.dash-table-container {
    border-radius: var(--radius-lg) !important;
    overflow: hidden;
    border: 1px solid var(--border-color) !important;
}

.dash-spreadsheet-container .dash-spreadsheet-inner th {
    background: var(--content-bg) !important;
    color: var(--text-secondary) !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 12px 14px !important;
    border-bottom: 2px solid var(--border-color) !important;
}

.dash-spreadsheet-container .dash-spreadsheet-inner td {
    padding: 10px 14px !important;
    font-size: 0.85rem !important;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

.dash-spreadsheet-container .dash-spreadsheet-inner tr:hover td {
    background: rgba(99, 102, 241, 0.04) !important;
}

/* ===== Graphs ===== */
.js-plotly-plot {
    border-radius: var(--radius-lg);
}

.js-plotly-plot .plotly .modebar {
    display: none !important;
}

#holdings-donut-chart path.surface,
#holdings-donut-chart .slice path.surface {
    stroke: none !important;
    stroke-width: 0 !important;
    stroke-opacity: 0 !important;
}

/* ===== Utility Classes ===== */
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 8px !important; }
.mt-2 { margin-top: 16px !important; }
.mt-3 { margin-top: 24px !important; }
.mt-4 { margin-top: 32px !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 8px !important; }
.mb-2 { margin-bottom: 16px !important; }
.mb-3 { margin-bottom: 24px !important; }
.mb-4 { margin-bottom: 32px !important; }
.p-0 { padding: 0 !important; }
.p-1 { padding: 8px !important; }
.p-2 { padding: 16px !important; }
.p-3 { padding: 24px !important; }
.p-4 { padding: 32px !important; }

.text-muted {
    color: var(--text-secondary) !important;
}

.text-center {
    text-align: center;
}

/* ===== Mobile Header (hidden on desktop) ===== */
.mobile-header {
    display: none;
    position: sticky;
    top: 0;
    height: 48px;
    background: var(--sidebar-bg);
    color: #fff;
    z-index: 1040;
    align-items: center;
    padding: 0 16px;
    gap: 12px;
}
.mobile-menu-btn {
    background: none;
    border: none;
    color: #fff;
    padding: 4px 8px;
    cursor: pointer;
    border-radius: 6px;
}
.mobile-menu-btn:hover {
    background: rgba(255,255,255,0.1);
}
.mobile-header-title {
    font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: #f5f4f1;
}
.mobile-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1049;
}

/* ===== Responsive Design ===== */
@media (max-width: 992px) {
    .main-content {
        padding: 24px 20px;
    }
}

@media (max-width: 768px) {
    /* Show mobile header */
    .mobile-header {
        display: flex;
    }

    /* One gutter, not two. Bootstrap's .container-fluid carries its own
       24px, which stacked on top of the page padding and left 40px of dead
       space on each side of every card: a 390px screen was giving 310px to
       content. The page gutter is the only one a phone needs, and 12px is
       enough to keep a card's border and shadow off the screen edge. */
    .main-content {
        padding: 14px 12px !important;
    }
    .main-content .container-fluid,
    .real-cost-page,
    .comparison-page,
    .legal-page,
    .ml-page {
        padding-left: 0;
        padding-right: 0;
    }

    /* Sticky header must sit below mobile header */
    .sticky-header {
        position: relative;
        top: auto;
        z-index: 50;
    }

    /* Sidebar: off-canvas drawer */
    .sidebar-col {
        position: fixed !important;
        top: 0;
        left: -280px;
        width: 260px !important;
        max-width: 260px !important;
        flex: 0 0 260px !important;
        height: 100vh;
        z-index: 1050;
        transition: left 0.25s ease;
        overflow-y: auto;
    }
    .sidebar {
        position: relative;
        min-height: 100vh;
    }

    /* When sidebar is open */
    body.sidebar-open .sidebar-col {
        left: 0;
    }
    body.sidebar-open .mobile-overlay {
        display: block;
    }

    /* Main content takes full width */
    .sidebar-col + [class*="col"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Login modal must be above overlay */
    .modal {
        z-index: 1060 !important;
    }
    .modal-backdrop {
        z-index: 1055 !important;
    }

    /* Bootstrap gutters compound with nesting: the metric tiles sit three
       rows deep, so the default 8px a side ate 24px of a 390px screen
       before a single number was drawn. Halve them below the top level. */
    .main-content .row:not(.g-0) .row:not(.g-0) {
        margin-left: -4px;
        margin-right: -4px;
    }
    .main-content .row:not(.g-0) .row:not(.g-0) > .col,
    .main-content .row:not(.g-0) .row:not(.g-0) > [class*="col-"] {
        padding-left: 4px;
        padding-right: 4px;
    }

    /* Card chrome: 16px of body padding on every card is a lot of the
       screen when the cards are stacked one per row. */
    .card-modern .card-body {
        padding: 12px;
    }
    .portfolio-analysis-page .card-modern {
        margin-bottom: 0;
    }
    .portfolio-analysis-page .mb-3 {
        margin-bottom: 10px !important;
    }
    .portfolio-analysis-page .mb-4 {
        margin-bottom: 12px !important;
    }

    #portfolio-total-value,
    .portfolio-analysis-page .portfolio-top-summary .portfolio-hero-value {
        font-size: clamp(0.85rem, 3vw, 1.4rem);
    }

    /* Real Cost preset cards */
    .preset-row {
        max-width: 100%;
    }
    .preset-col {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    .preset-card {
        padding: 14px 8px;
    }
    .preset-icon-circle {
        width: 40px;
        height: 40px;
    }
    .preset-label {
        font-size: 0.75rem;
    }
    .preset-price {
        font-size: 0.9rem;
    }

    /* Portfolio sticky header: wrap to two rows */
    .sticky-header {
        flex-wrap: wrap;
        padding: 8px 10px;
        gap: 6px;
    }
    .sticky-header .header-left {
        flex: 1 1 100%;
        order: -1;
    }
    /* Without a shrink the row keeps its content width, the wrap has
       nothing to wrap against, and the whole document scrolls sideways
       far enough to carry the sync button off the left edge. */
    .sticky-header .header-right {
        flex: 1 1 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
        min-width: 0;
        gap: 4px;
    }
    .sticky-header .header-divider {
        display: none;
    }
    /* The pills take a row of their own, so they go last and the actions
       menu keeps its place at the right of the row above them. */
    .timeframe-pill-bar {
        flex: 1 1 100%;
        order: 1;
    }
    .sticky-header .pa-actions {
        margin-left: auto;
    }
    .timeframe-btn-group {
        width: 100%;
    }
    /* Seven pills across a phone: flex:1 alone will not shrink a button
       below the width of its own label, so min-width has to go too. */
    .timeframe-btn-group .tf-pill {
        flex: 1 1 0;
        min-width: 0;
        padding: 4px 2px;
        font-size: 0.68rem;
        letter-spacing: 0;
    }
    .timeframe-pill-bar {
        margin-left: 0;
        min-width: 0;
    }

    /* Portfolio top summary: stack donut and metrics vertically */
    .portfolio-analysis-page .portfolio-top-summary [class*="col-md-4"],
    .portfolio-analysis-page .portfolio-top-summary [class*="col-md-8"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Demo banner text */
    .portfolio-analysis-page #demo-banner {
        font-size: 0.78rem;
        padding: 6px 10px;
    }

    /* Page headers: tighter on phones */
    .page-header {
        margin-bottom: 14px;
        padding-bottom: 10px;
    }
    .page-title { font-size: 1.1rem; }
    .page-subtitle { font-size: 0.78rem; }

    /* Cards: less chrome on small screens */
    .card-header-modern {
        padding: 10px 12px;
        font-size: 0.8rem;
    }

    /* Backtesting chart: shorter on phones */
    .chart-container { height: 400px; }

    /* Backtesting date picker: full width instead of overflowing */
    .compact-date,
    .compact-date .SingleDatePicker,
    .compact-date .SingleDatePickerInput,
    .compact-date .DateInput {
        width: 100%;
    }

    /* Data tables scroll inside their card, never the whole page */
    .dash-table-container .dash-spreadsheet-container {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .main-content {
        padding: 12px !important;
    }
    .preset-col {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    .preset-card {
        padding: 12px 6px;
    }
}

/* ===== Custom Scrollbar ===== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--content-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* ===== Legacy Support ===== */
.display-logo {
    font-size: 1.75rem;
    font-weight: 700;
    text-align: center;
    background: linear-gradient(135deg, var(--primary-color) 0%, #a855f7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0;
}

#trading-rules-container {
    padding-top: 10px;
}

.rotate {
    transition: transform 0.3s ease;
    display: inline-block;
}

.rotate.open {
    transform: rotate(180deg);
}

/* Fix for scale toggle */
#scale-toggle {
    margin: 0;
    max-width: none;
    padding-top: 8px;
}

/* Row spacing reset. Excludes .g-0 (the app shell row): its columns are
   p-0, so the negative margin there is uncompensated and shifted every
   page 8px off the left screen edge. */
.row:not(.g-0) {
    margin-left: -8px;
    margin-right: -8px;
}

.col, [class*="col-"] {
    padding-left: 8px;
    padding-right: 8px;
}

/* ===== Input Groups - Clean shadcn style ===== */
.input-group {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.input-group > input,
.input-group > .form-control {
    flex: 1;
    border-radius: 6px 0 0 6px !important;
    border-right: none !important;
}

.input-group-text {
    display: flex;
    align-items: center;
    padding: 0 12px;
    font-size: 0.875rem;
    font-weight: 400;
    color: #6b7280;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-left: none;
    border-radius: 0 6px 6px 0;
    height: 36px;
}

/* Small input group variant */
.input-group-sm {
    height: 32px;
}

.input-group-sm > input,
.input-group-sm > .form-control {
    height: 32px !important;
    font-size: 0.8125rem !important;
    padding: 6px 10px !important;
}

.input-group-sm .input-group-text {
    height: 32px;
    padding: 0 10px;
    font-size: 0.8125rem;
}

/* Section headers */
.section-header {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 24px 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}

/* Collapsible sections */
.collapse-header {
    cursor: pointer;
    padding: 12px 16px;
    background: var(--content-bg);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: var(--transition);
}

.collapse-header:hover {
    background: var(--border-color);
}

/* Empty state */
.empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--text-secondary);
}

.empty-state-icon {
    font-size: 3rem;
    margin-bottom: 16px;
    opacity: 0.5;
}

/* Loading state */
.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Hide Dash's "Loading..." text (appears in two elements) */
._dash-loading,
._dash-loading-callback {
    font-size: 0 !important;
    color: transparent !important;
}
/* Keep child elements (like our logo) visible */
._dash-loading > *,
._dash-loading-callback > * {
    font-size: 1rem;
    color: inherit;
}

/* Badge */
.badge {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge-primary {
    background: rgba(99, 102, 241, 0.1);
    color: var(--primary-color);
}

.badge-success {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success-color);
}

.badge-warning {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning-color);
}

.badge-danger {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger-color);
}

/* ===== Settings Modal ===== */
.settings-trigger {
    display: flex;
    justify-content: center;
}

.settings-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    color: var(--sidebar-text);
    font-size: 1.1rem;
    transition: var(--transition);
    border: 1px solid rgba(255, 255, 255, 0.1);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.settings-btn:hover {
    background: rgba(99, 102, 241, 0.2);
    color: #fff;
    transform: rotate(45deg);
}

.settings-section {
    margin-bottom: 8px;
}

.settings-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.settings-help {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.settings-input {
    width: 100%;
}

.settings-radio .form-check {
    margin-right: 12px;
}

.settings-divider {
    margin: 20px 0;
    border-color: var(--border-color);
}

/* ===== Compact Form Styles - shadcn inspired ===== */
.input-label {
    font-size: 0.6875rem !important;
    font-weight: 500 !important;
    color: #6b7280 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin: 0 0 4px 0 !important;
}

.compact-input,
input.compact-input {
    height: 32px !important;
    min-height: 32px !important;
    padding: 6px 10px !important;
    font-size: 0.8125rem !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 6px !important;
    background: #fff !important;
}

.compact-input:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1) !important;
}

.compact-dropdown .Select-control {
    height: 32px !important;
    min-height: 32px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 6px !important;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02) !important;
}

.compact-dropdown .Select-placeholder,
.compact-dropdown .Select--single > .Select-control .Select-value {
    line-height: 30px !important;
    padding: 0 10px !important;
    font-size: 0.8125rem !important;
    color: var(--text-primary) !important;
}

.compact-dropdown .Select-input {
    height: 30px !important;
}

/* Compact dropdown - multi-select pills (keeps control height unchanged) */
.compact-dropdown .Select--multi .Select-value {
    background: rgba(99, 102, 241, 0.10) !important;
    border: 1px solid rgba(99, 102, 241, 0.25) !important;
    border-radius: 999px !important;
    margin: 2px 4px 2px 0 !important;
    padding: 0 6px !important;
    box-shadow: none !important;
}

.compact-dropdown .Select--multi .Select-value-label {
    color: var(--text-primary) !important;
    font-size: 0.75rem !important;
    line-height: 16px !important;
}

.compact-dropdown .Select--multi .Select-value-icon {
    border-right: none !important;
    color: var(--text-secondary) !important;
}

/* Date picker - compact */
.compact-date .SingleDatePicker,
.compact-date .SingleDatePickerInput {
    width: 100%;
}

.compact-date .DateInput {
    width: 100%;
}

.compact-date .DateInput_input {
    height: 32px !important;
    padding: 6px 10px !important;
    font-size: 0.8125rem !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 6px !important;
    background: #fff !important;
}

.compact-date .DateInput_input__focused {
    border-color: #6366f1 !important;
}

/* ===== Rule Builder Styles ===== */
/* ── Rule Builder Card ── */
.rule-builder-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 20px 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Header */
/* One line: the title truncates before anything wraps. */
.rules-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.rules-header-left {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
    color: var(--text-primary);
    font-size: 1.05rem;
}

.rules-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rules-header-right {
    display: flex;
    gap: 2px;
    align-items: center;
    flex-shrink: 0;
}

/* Bootstrap's .btn-sm padding wins on specificity, so the header icons say
   what they need explicitly; three of them plus Run has to fit one line. */
.rules-header-right .info-btn {
    color: var(--text-secondary);
    padding: 2px 5px !important;
    font-size: 0.85rem;
    line-height: 1.2;
}
.info-btn {
    color: var(--text-secondary);
    padding: 2px 3px;
    font-size: 0.85rem;
}
.info-btn:hover {
    color: var(--primary-color);
}

/* Strategy blocks: two headed groups of conditions, written as sentences.
   Nothing here is a field until you open the code under a condition. */
.rules-container {
    display: flex;
    flex-direction: column;
    margin-bottom: 2px;
}

.strategy-block { padding: 7px 0 3px; }
.strategy-block + .strategy-block { border-top: 1px solid var(--border-color); }

.block-head {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 2px;
}
.block-title {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
/* The join is a decision, so it looks like one: a word you can press. */
.join-btn {
    padding: 0 6px !important;
    font-size: 0.68rem !important;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none !important;
    color: var(--primary-color) !important;
    background: rgba(99, 102, 241, 0.09);
    border-radius: 5px;
    line-height: 1.5;
}
.join-btn:hover:not(:disabled) { background: rgba(99, 102, 241, 0.18); }
.join-btn:disabled {
    color: var(--text-secondary) !important;
    background: none;
    opacity: 0.65;
}

.block-conds { display: flex; flex-direction: column; }
.block-empty {
    padding: 3px 0 5px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    opacity: 0.75;
}

.cond-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 4px 0;
}
.cond-body { flex: 1; min-width: 0; }
.cond-text {
    font-size: 0.86rem;
    line-height: 1.45;
    color: var(--text-primary);
}
/* Condition rows are separated by their own spacing; a second condition in a
   block gets a hairline so the joiner has something to join across. */
.cond-row + .cond-row { border-top: 1px solid var(--border-color); }

.cond-code-wrap { margin-top: 1px; }
.cond-code-toggle {
    display: inline-block;
    list-style: none;
    cursor: pointer;
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
}
.cond-code-toggle::-webkit-details-marker { display: none; }
.cond-row:hover .cond-code-toggle,
.cond-code-wrap[open] .cond-code-toggle { opacity: 0.75; }
.cond-code-toggle:hover { color: var(--primary-color); }
.cond-code-wrap[open] .cond-code-toggle { color: var(--primary-color); }

/* The expression, once asked for: still editable, still not a form field. */
textarea.cond-code {
    width: 100%;
    margin-top: 3px;
    padding: 6px 8px !important;
    border: none !important;
    border-left: 2px solid var(--border-color) !important;
    border-radius: 0 !important;
    background: var(--content-bg) !important;
    box-shadow: none !important;
    resize: none;
    overflow: hidden;
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', 'Monaco', monospace;
    font-size: 0.74rem !important;
    line-height: 1.5 !important;
    color: var(--text-secondary);
    white-space: pre-wrap;
    word-break: break-word;
}
textarea.cond-code:focus {
    border-left-color: var(--primary-color) !important;
    color: var(--text-primary);
    outline: none;
}

/* Under the opened code: Save, and what the check says. */
.cond-code-actions {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-top: 4px;
    min-height: 18px;
}
.cond-save {
    padding: 0 !important;
    font-size: 0.7rem !important;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none !important;
    color: var(--primary-color) !important;
    line-height: 1.5;
}
.cond-save:hover { text-decoration: underline !important; }
.cond-status { font-size: 0.72rem; line-height: 1.5; }
.cond-status .is-good { color: var(--success-color); }
.cond-status .is-pending { color: var(--text-secondary); }
.cond-status .is-bad {
    color: var(--danger-color);
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 0.68rem;
    word-break: break-word;
}

.cond-remove {
    flex-shrink: 0;
    color: var(--text-secondary);
    padding: 0 2px;
    font-size: 0.66rem;
    line-height: 1.7;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
}
.cond-row:hover .cond-remove,
.cond-row:focus-within .cond-remove { opacity: 0.5; }
.cond-remove:hover { color: var(--danger-color) !important; opacity: 1 !important; }

.rule-error-slot:empty { display: none; }
.rule-error {
    display: flex;
    align-items: flex-start;
    gap: 2px;
    padding: 7px 2px 0;
    font-size: 0.78rem;
    color: var(--danger-color);
}

/* The ghost row: the last row of the list, and the only way to add a rule. */
.ghost-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 2px;
    border-top: 1px solid var(--border-color);
    cursor: text;
}
.ghost-spark {
    flex-shrink: 0;
    width: 52px;
    padding-top: 1px;
    font-size: 0.78rem;
    color: var(--text-secondary);
    opacity: 0.6;
    transition: color 0.15s, opacity 0.15s;
}
.ghost-row:focus-within .ghost-spark {
    color: var(--primary-color);
    opacity: 1;
}
textarea.ghost-input {
    flex: 1;
    min-width: 0;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    resize: none;
    overflow: hidden;
    font-size: 0.82rem !important;
    line-height: 1.5 !important;
    color: var(--text-primary);
}

textarea.ghost-input:focus {
    outline: none;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
}

textarea.ghost-input::placeholder {
    color: var(--text-secondary);
    opacity: 0.75;
}
/* The Add button is a keyboard hint: Enter does the same thing. */
.ghost-add-btn {
    flex-shrink: 0;
    padding: 0 2px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
}
.ghost-row:focus-within .ghost-add-btn { opacity: 1; }
.ghost-add-btn:hover { color: var(--primary-color); }

/* While the model writes the rule. Dash marks the outputs of a running
   callback with data-dash-is-loading; the ask row is one of them. */
.ghost-row:has(.ghost-input[data-dash-is-loading="true"]) {
    pointer-events: none;
}
.ghost-row:has(.ghost-input[data-dash-is-loading="true"]) .ghost-spark {
    color: var(--primary-color);
    opacity: 1;
    animation: ghost-pulse 0.9s ease-in-out infinite;
}
.ghost-row:has(.ghost-input[data-dash-is-loading="true"]) .ghost-input {
    opacity: 0.55;
}
.ghost-row:has(.ghost-input[data-dash-is-loading="true"]) .ghost-add-btn {
    opacity: 1;
    color: var(--primary-color);
    font-size: 0;
}
.ghost-row:has(.ghost-input[data-dash-is-loading="true"]) .ghost-add-btn::after {
    content: "";
    display: inline-block;
    width: 13px;
    height: 13px;
    border: 2px solid rgba(99, 102, 241, 0.25);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: ghost-spin 0.7s linear infinite;
}
@keyframes ghost-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.35); }
}
@keyframes ghost-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .ghost-row:has(.ghost-input[data-dash-is-loading="true"]) .ghost-spark { animation: none; }
}

.run-backtest-btn {
    margin-left: 4px;
    padding: 5px 11px;
    font-weight: 600;
    font-size: 0.78rem;
    white-space: nowrap;
    border-radius: var(--radius-sm);
    box-shadow: 0 1px 3px rgba(99, 102, 241, 0.25);
    transition: box-shadow 0.15s, transform 0.1s;
}
.run-backtest-btn:hover {
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.35);
    transform: translateY(-1px);
}
.run-backtest-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(99, 102, 241, 0.2);
}

/* AI Modal */
.ai-prompt-input {
    width: 100%;
    font-size: 0.9rem;
}

.modal-help-text {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-bottom: 16px;
}

/* ===== Comparison Page Styles ===== */
.comparison-page {
    padding: 24px;
}

.upload-area {
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-lg);
    padding: 32px;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
    background: var(--content-bg);
}

.upload-area:hover {
    border-color: var(--primary-color);
    background: rgba(99, 102, 241, 0.03);
}

.upload-area-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--text-secondary);
}

.card-modern {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.card-header-modern {
    background: transparent;
    border-bottom: 1px solid var(--border-color);
    padding: 14px 20px;
    font-weight: 600;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
}

.benchmark-checklist .form-check {
    display: flex;
    padding: 8px 12px;
    margin-bottom: 6px;
    background: var(--content-bg);
    border-radius: var(--radius-sm);
}

.stat-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 16px;
    text-align: center;
}

.stat-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 4px;
}

.stat-value {
    font-size: 1.25rem;
    font-weight: 700;
}

.stats-row {
    margin-top: 16px;
}

.chart-container {
    width: 100%;
    min-height: 0;
    /* Plotly figures using autosize fill this height (see backtesting_sim).
       Sized so chart + transaction table fit a 1080p screen without scroll. */
    height: 470px;
}
.chart-container .js-plotly-plot,
.chart-container .plot-container {
    height: 100%;
}

.table-container {
    overflow-x: auto;
}

/* Position Items */
.position-item {
    transition: background-color 0.15s ease;
    padding-left: 4px;
    padding-right: 4px;
}

.position-item:hover {
    background-color: #f8fafc;
}

.position-item:last-child {
    border-bottom: none !important;
}

/* Tabs styling */
.nav-tabs {
    border-bottom: 1px solid var(--border-color);
}

.nav-tabs .nav-link {
    color: var(--text-secondary);
    border: none;
    border-bottom: 2px solid transparent;
    padding: 10px 16px;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.nav-tabs .nav-link:hover {
    color: var(--primary-color);
    border-bottom-color: #e5e7eb;
}

.nav-tabs .nav-link.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
    background: transparent;
}

/* Color utilities */
.text-success { color: var(--success-color) !important; }
.text-danger { color: var(--danger-color) !important; }
.text-warning { color: var(--warning-color) !important; }
.text-primary { color: var(--primary-color) !important; }

/* ===== Sidebar Improvements ===== */
.sidebar-brand {
    text-align: center;
    margin-bottom: 24px;
}

.sidebar-divider {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin: 0 0 20px 0;
}

.sidebar-nav {
    flex: 1;
}

.nav-link-modern {
    color: var(--sidebar-text);
    padding: 12px 16px;
    margin: 4px 0;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-weight: 500;
    transition: var(--transition);
    display: flex;
    align-items: center;
}

.nav-link-modern:hover {
    background: rgba(99, 102, 241, 0.15);
    color: #fff;
}

.nav-link-modern.active {
    background: var(--primary-color);
    color: #fff;
}

.sidebar-bottom {
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* ===== Modal Improvements ===== */
.modal-content {
    border-radius: var(--radius-lg);
    border: none;
    box-shadow: var(--shadow-lg);
}

.modal-header {
    border-bottom: 1px solid var(--border-color);
    padding: 16px 20px;
}

.modal-title {
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
}

.modal-body {
    padding: 20px;
}

.modal-footer {
    border-top: 1px solid var(--border-color);
    padding: 16px 20px;
}

/* ===== Page Header ===== */
.page-header {
    margin-bottom: 14px;
    padding-bottom: 12px;
}

.page-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px 0;
    display: flex;
    align-items: center;
}

.page-subtitle {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0;
}
/* ===== Trade Republic Connector ===== */
.tr-connector-card {
    border: 2px solid transparent;
    transition: var(--transition);
}

.tr-connector-card.connected {
    border-color: var(--success-color);
}

/* Connection Status Indicator */
.connection-status {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    font-weight: 500;
    transition: var(--transition);
}

.connection-status.disconnected {
    background-color: #fef2f2;
    color: #991b1b;
}

.connection-status.connecting {
    background-color: #fffbeb;
    color: #92400e;
}

.connection-status.connected {
    background-color: #f0fdf4;
    color: #166534;
}

.status-dot {
    font-size: 8px;
}

.connection-status.disconnected .status-dot {
    color: #ef4444;
}

.connection-status.connecting .status-dot {
    color: #f59e0b;
    animation: pulse 1.5s infinite;
}

.connection-status.connected .status-dot {
    color: #10b981;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Syncing View Styles */
.sync-spinner-large {
    width: 60px;
    height: 60px;
    border: 4px solid #e2e8f0;
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.sync-steps-container {
    max-width: 280px;
    margin: 0 auto;
}

.sync-step {
    display: flex;
    align-items: center;
}

.sync-step.active {
    color: var(--primary-color);
    font-weight: 500;
}

.sync-step.completed {
    color: var(--success-color);
}

.sync-step.pending {
    opacity: 0.6;
}

.sync-step-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid #e2e8f0;
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    display: inline-block;
}

/* Add a syncing status style */
.connection-status.syncing {
    background-color: #eff6ff;
    color: #1d4ed8;
}

.connection-status.syncing .status-dot {
    color: #3b82f6;
    animation: pulse 1s infinite;
}

/* PIN Input Styling */
.pin-input {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    letter-spacing: 0.25rem;
    text-align: center;
}

.phone-input {
    font-family: 'Inter', sans-serif;
}

.otp-input {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 1.75rem !important;
    padding: 16px !important;
    text-align: center;
    letter-spacing: 0.75rem;
    max-width: 200px;
    margin: 0 auto;
}

/* Portfolio Summary Box */
.portfolio-summary-box {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: var(--radius-md);
    padding: 16px;
    border: 1px solid var(--border-color);
}

.portfolio-summary-item {
    padding: 8px 0;
    border-bottom: 1px solid #e2e8f0;
}

.portfolio-summary-item:last-of-type {
    border-bottom: none;
}

.summary-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 2px;
}

.summary-value {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.summary-value-sm {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-primary);
}

/* Step Indicator */
.step-indicator {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.step-indicator .step {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #e2e8f0;
    transition: var(--transition);
}

.step-indicator .step.active {
    background-color: var(--primary-color);
    transform: scale(1.2);
}

.step-indicator .step.completed {
    background-color: var(--success-color);
}

/* Auth Content Transitions */
#tr-auth-content {
    min-height: 200px;
}

/* Benchmark Checklist Enhancement */
.benchmark-checklist .form-check {
    padding: 10px 12px;
    margin-bottom: 4px;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    cursor: pointer;
}

.benchmark-checklist .form-check:hover {
    background-color: #f8fafc;
}

.benchmark-checklist .form-check-input:checked + .form-check-label {
    font-weight: 500;
}

/* Manual Entry Accordion */
.manual-entry-accordion .accordion-button {
    padding: 12px 16px;
    font-size: 0.875rem;
    background-color: #f8fafc;
}

.manual-entry-accordion .accordion-button:not(.collapsed) {
    background-color: #eef2ff;
    color: var(--primary-color);
}

.manual-entry-accordion .accordion-body {
    padding: 16px;
}

/* Enhanced Alert Styling */
.alert-info {
    background-color: #eff6ff;
    border-color: #bfdbfe;
    color: #1e40af;
    text-align: center;
}

/* Connected View Styling */
#tr-connected-view {
    text-align: center;
}

/* Loading State */
.tr-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.tr-loading .spinner-border {
    width: 3rem;
    height: 3rem;
    color: var(--primary-color);
}

/* ===== TR Connect Modal Trigger ===== */
.tr-connect-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--radius-md);
    color: white;
    cursor: pointer;
    transition: var(--transition);
    font-size: 0.8rem;
}

.tr-connect-trigger:hover {
    background: linear-gradient(135deg, #16213e 0%, #0f3460 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.tr-connect-trigger.connected {
    border-color: var(--success-color);
}

.tr-connect-trigger .status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--danger-color);
}

.tr-connect-trigger.connected .status-indicator {
    background: var(--success-color);
}

/* TR Modal Styling */
.tr-modal .modal-content {
    border-radius: var(--radius-lg);
    border: none;
}

.tr-modal .modal-header {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    color: white;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.tr-modal .modal-header .btn-close {
    filter: brightness(0) invert(1);
}

/* ===== Asset Picker Styles ===== */
.asset-picker {
    display: flex;
    gap: 8px;
    align-items: center;
}

.asset-type-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
}

.asset-type-tab {
    padding: 6px 12px;
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition);
}

.asset-type-tab:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.asset-type-tab.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.asset-search-input {
    flex: 1;
}

/* ===== Stat Cards - Smaller ===== */
.stat-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 12px;
    text-align: center;
}

.stat-label {
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.stat-value {
    font-size: 1rem;
    font-weight: 600;
}

/* ===== Card Modern - Tighter ===== */
.card-modern {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.card-modern .card-header {
    padding: 12px 16px;
    font-size: 0.85rem;
}

.card-modern .card-body {
    padding: 16px;
}

.card-header-modern {
    background: transparent;
    border-bottom: 1px solid var(--border-color);
    padding: 12px 16px;
    font-weight: 600;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
}

/* ===== Benchmark Checklist - Clean ===== */
.benchmark-checklist {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.benchmark-checklist .form-check {
    padding: 6px 8px;
    margin: 0;
    border-radius: 6px;
}

.benchmark-checklist .form-check:hover {
    background: #f8fafc;
}

.benchmark-checklist .form-check-label {
    font-size: 0.8rem !important;
}

/* ===== Scale Toggle - Inline ===== */
.scale-toggle-bar {
    display: flex;
    align-items: center;
    gap: 0;
    position: absolute;
    top: 8px;
    right: 12px;
    z-index: 10;
}

.scale-btn {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 10px;
    cursor: pointer;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    transition: all 0.15s ease;
    line-height: 1.4;
    letter-spacing: 0.3px;
    outline: none;
}

.scale-btn:first-child {
    border-radius: 4px 0 0 4px;
    border-right: none;
}

.scale-btn:last-child {
    border-radius: 0 4px 4px 0;
}

.scale-btn:hover {
    background: #e2e8f0;
}

.scale-btn.active {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

/* ===== Buttons - Smaller ===== */
.btn-sm {
    padding: 6px 12px;
    font-size: 0.8rem;
}

/* ===== Row Gap Utility ===== */
.g-2 {
    gap: 8px;
}

.row-tight {
    margin: 0 -6px;
}

.row-tight > [class*="col"] {
    padding: 0 6px;
}

/* ===== HR Styling ===== */
hr {
    margin: 12px 0;
    border-color: var(--border-color);
    opacity: 0.5;
}

/* ===== Portfolio Analysis Page ===== */
.portfolio-analysis-page {
    padding: 20px 24px;
}

/* Top summary "hero" panel (scoped variables; does not change sizing) */
.portfolio-analysis-page .portfolio-top-summary {
    --card-bg: #0f172a;
    --text-primary: #f8fafc;
    --text-secondary: rgba(226, 232, 240, 0.70);
    --border-color: rgba(148, 163, 184, 0.14);
    --shadow-sm: 0 10px 20px rgba(2, 6, 23, 0.30);
}

.portfolio-analysis-page .portfolio-top-summary .text-muted {
    color: var(--text-secondary) !important;
}

.portfolio-analysis-page .portfolio-top-summary .card-modern {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(30, 41, 59, 0.96));
}

/* Container-query approach: each metric-card is its own sizing
   context so font sizes scale relative to the card's own width,
   not the viewport.  This keeps values on one line from ~1100 px
   down to 768 px without clipping, ellipsis, or word-wrapping. */
.portfolio-analysis-page .portfolio-top-summary .metric-card {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(148, 163, 184, 0.16);
    min-height: 98px;
    container-type: inline-size;
    overflow: hidden;
    padding: 10px 8px;
}

.portfolio-analysis-page .portfolio-top-summary .metric-value {
    color: #f8fafc !important;
    font-variant-numeric: tabular-nums;
}

.portfolio-analysis-page .portfolio-top-summary .metric-label {
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
}

.portfolio-analysis-page .portfolio-top-summary .metric-subtitle {
    font-variant-numeric: tabular-nums;
}

.portfolio-analysis-page .portfolio-top-summary .portfolio-positions-inline {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 6px;
}

.portfolio-analysis-page .portfolio-top-summary .portfolio-positions-value {
    color: #f8fafc !important;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Reserve consistent space even when a card has no subtitle */
.portfolio-analysis-page .portfolio-top-summary .metric-subtitle-placeholder {
    min-height: 14px;
    visibility: hidden;
}

/* Main portfolio value: keep it on one line and aligned */
#portfolio-total-value,
.portfolio-analysis-page .portfolio-top-summary .portfolio-hero-value {
    color: #ffffff !important;
    font-size: clamp(0.95rem, 3.5vw, 2rem);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    letter-spacing: -0.01em;
}

/* Reduce card padding at narrower widths to give cqw more room */
@media (max-width: 1100px) {
    .portfolio-analysis-page .portfolio-top-summary .metric-card {
        padding: 8px 6px;
    }
}

.portfolio-analysis-page .portfolio-top-summary .metric-card:hover {
    border-color: rgba(99, 102, 241, 0.45);
}

.portfolio-analysis-page .page-header {
    margin-bottom: 20px;
}

/* TR Connect Trigger Button */
.tr-connect-trigger {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    background: linear-gradient(135deg, #1e1e2e 0%, #2d2d44 100%);
    border-radius: 8px;
    color: white;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.tr-connect-trigger:hover {
    background: linear-gradient(135deg, #2d2d44 0%, #3d3d5c 100%);
    transform: translateY(-1px);
}

.tr-connect-trigger .status-indicator {
    width: 8px;
    height: 8px;
    background: #ef4444;
    border-radius: 50%;
    margin-right: 8px;
    animation: pulse-red 2s infinite;
}

.tr-connect-trigger.connected .status-indicator {
    background: #10b981;
    animation: pulse-green 2s infinite;
}

@keyframes pulse-red {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes pulse-green {
    0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
    50% { box-shadow: 0 0 0 4px rgba(16, 185, 129, 0); }
}

/* Metric Cards */
.metric-card {
    background: var(--card-bg);
    border-radius: 10px;
    padding: 12px 16px;
    border: 1px solid var(--border-color);
    height: 100%;
    transition: all 0.2s ease;
}

.metric-card:hover {
    border-color: rgba(99, 102, 241, 0.35);
    box-shadow: var(--shadow-sm);
}

.metric-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    margin-bottom: 4px;
}

.metric-value {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
}

.metric-subtitle {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 2px;
}

/* Card Modern - For chart cards */
.card-modern {
    background: var(--card-bg);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

/* Ensure dropdowns inside card-modern aren't clipped by Bootstrap .card overflow */
.card.card-modern,
.card.card-modern > .card-body {
    overflow: visible !important;
}

/* Asset autocomplete dropdown — ensure menu renders above other cards */
.asset-autocomplete {
    position: relative;
    z-index: 10;
}
.asset-autocomplete .Select-menu-outer,
.asset-autocomplete .VirtualizedSelectFocusedOption {
    z-index: 100 !important;
}

.card-header-modern {
    background: linear-gradient(to right, rgba(99, 102, 241, 0.06), rgba(255, 255, 255, 0));
    border-bottom: 1px solid var(--border-color);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    padding: 12px 16px;
}

/* Holdings List */
.holding-item {
    transition: background 0.15s ease;
}

.holding-item:hover {
    background: rgba(99, 102, 241, 0.05);
}

/* Benchmark Toggles */
.benchmark-toggles .form-check {
    margin-right: 16px;
}

.benchmark-toggles .form-check-label {
    font-size: 0.8rem;
    color: #6b7280;
}

.benchmark-toggles .form-check-input:checked {
    background-color: #6366f1;
    border-color: #6366f1;
}

/* TR Modal Styling */
.tr-modal .modal-content {
    border-radius: 12px;
    border: none;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.tr-modal .modal-header {
    background: linear-gradient(135deg, #1e1e2e 0%, #2d2d44 100%);
    color: white;
    border-radius: 12px 12px 0 0;
    border-bottom: none;
}

.tr-modal .btn-close {
    filter: brightness(0) invert(1);
    opacity: 0.7;
}

.tr-modal .btn-close:hover {
    opacity: 1;
}

/* Connection Status in Modal */
.connection-status {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
}

.connection-status.disconnected {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.connection-status.connecting {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.connection-status.connected {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.connection-status .status-dot {
    font-size: 0.5rem;
}

/* Chart Tabs - Cleaner */
.portfolio-analysis-page .nav-tabs {
    border: none;
    gap: 4px;
}

.portfolio-analysis-page .nav-tabs .nav-link {
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 6px;
    transition: all 0.15s ease;
    cursor: default;
}

.portfolio-analysis-page .nav-tabs .nav-link:hover {
    color: var(--text-primary);
    background: rgba(99, 102, 241, 0.06);
    cursor: default;
}

.portfolio-analysis-page .nav-tabs .nav-link.active {
    color: var(--primary-color);
    background: rgba(99, 102, 241, 0.12);
}

/* The donut swaps its center text on hover (chart_logger.js), so its Plotly
   hover box stays hidden. The main chart's unified tooltip must be VISIBLE —
   an old "details live in the side panel" rule hid it here and silently
   defeated the hovertemplates the chart ships. */
#holdings-donut-chart .hoverlayer {
    display: none !important;
}

.recent-activity-row {
    gap: 12px;
}

.recent-activity-main {
    min-width: 0;
    flex: 1 1 auto;
}

.recent-activity-meta {
    flex: 0 0 180px;
    min-width: 180px;
    justify-content: flex-end;
    gap: 8px;
}

.recent-activity-badge {
    min-width: 84px;
    text-align: center;
}

.recent-activity-amount {
    min-width: 92px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Phones. This block sits below the desktop rules on purpose: a media query
   adds no specificity, so the same selector earlier in the file loses. */
@media (max-width: 768px) {
    /* Bootstrap sets word-wrap: break-word on .card, so "PROFIT/LOSS" came
       out as "PROFIT/LO SS" and "TOTAL RETURN" over three lines, which is
       what made every tile twice as tall as the number it holds. Labels
       break at spaces only. */
    .portfolio-analysis-page .metric-label {
        overflow-wrap: normal;
        word-break: keep-all;
        hyphens: none;
    }
    .portfolio-analysis-page .portfolio-top-summary .metric-card {
        min-height: 0;
        padding: 6px 4px;
    }
    .portfolio-analysis-page .portfolio-top-summary .metric-label {
        font-size: 0.6rem;
        letter-spacing: 0.01em;
        line-height: 1.2;
        margin-bottom: 2px;
    }
    .portfolio-analysis-page .portfolio-top-summary .metric-subtitle {
        font-size: 0.65rem;
        line-height: 1.2;
    }
    .portfolio-analysis-page .portfolio-top-summary .card-modern .card-body {
        padding: 8px;
    }

    /* The donut is the only thing in its card and it was 260px tall. The
       height is an inline style on the graph, hence the !important. */
    .portfolio-analysis-page #holdings-donut-chart {
        height: 190px !important;
    }

    /* Recent activity: a fixed 180px for the badge and amount left about
       110px for the name, so "Core MSCI World USD (Acc)" came out over four
       lines with the date threaded through it. The name gets the room and
       truncates instead; the full text is already on the row's title. */
    .recent-activity-row {
        gap: 8px;
    }
    .recent-activity-meta {
        flex: 0 0 auto;
        min-width: 0;
        gap: 6px;
    }
    .recent-activity-badge {
        min-width: 0;
        padding: 3px 6px;
        font-size: 0.62rem;
    }
    .recent-activity-amount {
        min-width: 0;
        font-size: 0.72rem;
    }
    .recent-activity-main > div > div {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* The actions menu at the end of the header bar. Sync, hide values, the
   demo toggle and clearing the stored data live behind one button on every
   width, which keeps the bar readable on a phone and uncluttered on a
   desktop. The real buttons stay in the DOM, hidden, and the menu items
   click them. */
.pa-menu-item {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 2px;
    padding: 9px 12px;
    border: none;
    background: transparent;
    color: #1e293b;
    font-size: 0.86rem;
    font-weight: 500;
    text-align: left;
    border-radius: 6px;
    white-space: nowrap;
}
.pa-menu-item:hover,
.pa-menu-item:focus-visible {
    background: rgba(99, 102, 241, 0.09);
}
.pa-menu-item i {
    font-size: 0.95rem;
    color: #64748b;
}
.pa-menu-danger,
.pa-menu-danger i {
    color: #b91c1c;
}
.pa-menu-danger:hover,
.pa-menu-danger:focus-visible {
    background: rgba(220, 38, 38, 0.09);
}
.pa-menu-sep {
    height: 1px;
    margin: 4px 6px;
    background: #e5e7eb;
}

/* The Rank Lab corridor: exact numbers under the slider. */
.ml-num-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}
.ml-num {
    width: 5.2rem;
    font-size: 0.82rem !important;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.ml-num-dash {
    color: #94a3b8;
    font-size: 0.85rem;
}

/* What the value chart is drawn from, and the action that upgrades it.
   A sync uses the user's own execution prices; the daily closing series is
   a separate download because it is the slowest thing the sync can do. */
.history-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: -2px 0 6px;
    flex-wrap: wrap;
}
.history-source {
    font-size: 0.72rem;
    color: #94a3b8;
}
.chart-benchmark-note {
    font-size: 0.72rem;
    line-height: 1.35;
    color: #94a3b8;
    margin: 2px 0 6px;
}

.history-source::before {
    content: "\F1D0";
    font-family: "bootstrap-icons";
    margin-right: 5px;
    font-size: 0.7rem;
}
.load-history-btn {
    font-size: 0.74rem !important;
    font-weight: 600 !important;
    color: var(--primary-color) !important;
    padding: 2px 6px !important;
    text-decoration: none !important;
}
.load-history-btn:hover:not(:disabled) {
    color: var(--primary-hover) !important;
    background: rgba(99, 102, 241, 0.08) !important;
    border-radius: 6px;
}
.load-history-btn:disabled {
    color: #94a3b8 !important;
}

/* Phone stand-in for the chart's end labels. Each chip carries its series
   colour, and the text is the label itself, so colour is never the only cue.
   Desktop keeps the labels on the lines and this stays empty. */
.chart-legend:empty { display: none; }
.chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin: 0 0 4px 2px;
}
.chart-chip {
    display: inline-flex;
    align-items: center;
    font-size: 0.66rem;
    font-weight: 600;
    /* Dark text, coloured swatch, the way Plotly's own legend does it: at
       10px the lighter series hues (the grey of Added Capital especially)
       do not clear the contrast floor as text. */
    color: #475569;
    white-space: nowrap;
}
.chart-chip::before {
    content: "";
    width: 10px;
    height: 2px;
    border-radius: 1px;
    background: var(--chip, #64748b);
    margin-right: 4px;
}
@media (min-width: 768.02px) {
    .chart-legend { display: none; }
}

.chart-hover-details {
    min-height: 286px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.chart-detail-kicker {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 10px;
}

.chart-detail-date {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 14px;
}

.chart-detail-empty {
    color: var(--text-secondary);
    font-size: 0.86rem;
    line-height: 1.5;
    padding: 16px 0;
}

.chart-detail-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.chart-detail-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
}

.chart-detail-row:last-child {
    border-bottom: none;
}

.chart-detail-name {
    color: var(--text-secondary);
    font-size: 0.84rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chart-detail-value {
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Range Buttons */
.portfolio-analysis-page .btn-group .btn {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 4px 10px;
}

/* Text Color Utilities */
.text-success {
    color: #10b981 !important;
}

.text-danger {
    color: #ef4444 !important;
}

/* Input Label */
.input-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 4px;
    display: block;
}

/* Privacy mode — blur only absolute money amounts. Charts, diagrams and
   percent values stay fully visible so the page still looks good. */
.privacy-on .sensitive {
    filter: blur(6px);
    user-select: none;
}

.privacy-on .sensitive-strong {
    filter: blur(11px);
}

/* Donut stays crisp; only its € center annotation is unreadable. */
.privacy-on #holdings-donut-chart g.annotation text {
    filter: blur(7px);
}

/* Value tab (€ y-axis): blur the axis numbers and suppress the €-only
   tooltip, not the chart. A blurred floating tooltip reads as a glitch, so
   it is hidden outright while values are hidden. The performance/drawdown
   tabs are % and stay untouched. */
.privacy-on .money-axis g.ytick text {
    filter: blur(5px);
}
.privacy-on .money-axis .hoverlayer {
    display: none;
}

/* ===== Sticky Header Bar (Parqet-style) ===== */
.sticky-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: linear-gradient(135deg, #1e1e2e 0%, #252536 100%);
    border-radius: 10px;
    padding: 8px 16px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.05);
    flex-wrap: nowrap;
    min-height: 0;
}

.sticky-header .header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
}

.sticky-header .header-meta-compact {
    color: #d1d5db;
    font-size: 0.78rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sticky-header .header-freshness {
    color: #6b7280;
    font-size: 0.72rem;
    white-space: nowrap;
}

.sticky-header .header-freshness:not(:empty)::before {
    content: "·";
    margin: 0 5px;
    color: #4b5563;
}

.sticky-header .header-right {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
}

.sticky-header .header-divider {
    width: 1px;
    height: 22px;
    background: rgba(255, 255, 255, 0.1);
    margin: 0 4px;
}

.sticky-header .header-icon-btn {
    color: #9ca3af !important;
    padding: 5px 8px;
    border-radius: 6px;
    transition: all 0.15s ease;
    text-decoration: none !important;
}

.sticky-header .header-icon-btn:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.1);
}

.sticky-header .header-dropdown-wrapper {
    position: relative;
}

/* The actions button carries a single icon and no label, so it needs a bit
   more of it to read as a button. */
.sticky-header .pa-actions-btn i {
    font-size: 1.1rem;
    line-height: 1;
}

.sticky-header .header-dropdown-btn {
    color: #e5e7eb !important;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    transition: all 0.15s ease;
    text-decoration: none !important;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.sticky-header .header-dropdown-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff !important;
}

/* Popover styling for header dropdowns */
.header-checklist,
.header-radio-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.header-checklist .form-check,
.header-radio-list .form-check {
    padding: 8px 12px;
    margin: 0;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.header-checklist .form-check:hover,
.header-radio-list .form-check:hover {
    background: #f3f4f6;
}

.header-checklist .form-check-label,
.header-radio-list .form-check-label {
    font-size: 0.85rem;
    color: #374151;
    cursor: pointer;
    width: 100%;
}

.header-checklist .form-check-input,
.header-radio-list .form-check-input {
    margin-right: 10px;
}

.header-checklist .form-check-input:checked,
.header-radio-list .form-check-input:checked {
    background-color: #6366f1;
    border-color: #6366f1;
}

/* Popover override for clean look */
.popover {
    border: 1px solid #e5e7eb;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
    border-radius: 10px;
}

.popover-body {
    padding: 8px !important;
    min-width: 160px;
}

/* ===== Timeframe Pill Bar (ButtonGroup-based) ===== */
.timeframe-pill-bar {
    display: flex;
    align-items: center;
    margin-left: 12px;
}

.timeframe-btn-group {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 3px;
    border: none !important;
}

.timeframe-btn-group .tf-pill {
    border: none !important;
    background: transparent !important;
    color: rgba(255, 255, 255, 0.45) !important;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 6px !important;
    transition: all 0.15s ease;
    letter-spacing: 0.03em;
    line-height: 1.3;
    box-shadow: none !important;
}

.timeframe-btn-group .tf-pill:hover {
    color: rgba(255, 255, 255, 0.85) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

.timeframe-btn-group .tf-pill:focus {
    box-shadow: none !important;
}

.timeframe-btn-group .tf-pill.active {
    color: #fff !important;
    background: rgba(99, 102, 241, 0.9) !important;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3) !important;
}

/* ===== Securities HTML Table ===== */
.sec-table {
    width: 100%;
    border-collapse: collapse;
    font-family: Inter, sans-serif;
    font-size: 12px;
}

.sec-table .sec-th {
    font-weight: 600;
    padding: 8px 10px;
    background: #f8fafc;
    border-bottom: 2px solid #e5e7eb;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
}

.sec-sort-link {
    color: #374151;
    text-decoration: none !important;
    cursor: pointer;
    user-select: none;
}

.sec-sort-link:hover {
    color: #6366f1;
}

.sec-row td {
    padding: 7px 10px;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: middle;
    white-space: nowrap;
}

.sec-row:hover td {
    background: #f9fafb;
}

.sec-name-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 180px;
}

.sec-logo {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    object-fit: contain;
    flex-shrink: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
}

.sec-initials {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background: #6366f1;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

.sec-name-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
    font-weight: 500;
}

.sec-type {
    font-weight: 500;
    color: #6b7280;
    font-size: 11px;
}

/* Row details button → per-security trading-history modal */
.sec-detail-btn {
    border: none;
    background: transparent;
    color: #9ca3af;
    padding: 2px 7px;
    border-radius: var(--radius-sm);
    line-height: 1;
    font-size: 14px;
    cursor: pointer;
}

.sec-detail-btn:hover {
    color: #6366f1;
    background: #eef2ff;
}

.sec-history-table {
    width: 100%;
    border-collapse: collapse;
    font-family: Inter, sans-serif;
    font-size: 12.5px;
}

.sec-history-table th {
    color: #6b7280;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 6px 10px;
    border-bottom: 2px solid #e5e7eb;
    white-space: nowrap;
}

.sec-history-table td {
    padding: 7px 10px;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: middle;
    white-space: nowrap;
}

.sec-history-badge {
    font-size: 10.5px;
    font-weight: 500;
}

/* Spin animation for sync button */
.spin {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Position Icons/Logos */
.position-icon-wrapper {
    flex-shrink: 0;
    position: relative;
}

.position-logo {
    transition: opacity 0.2s ease;
}

/* Handle image load errors gracefully */
.position-logo:not([src]),
.position-logo[src=""] {
    opacity: 0;
}

/* Error state - hide broken image icon */
.position-icon-wrapper img[src] {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

/* Holdings item hover */
.holding-item {
    transition: background 0.15s ease;
    padding-left: 8px;
    padding-right: 8px;
    margin-left: -8px;
    margin-right: -8px;
    border-radius: 8px;
}

.holding-item:hover {
    background: rgba(99, 102, 241, 0.05);
}

.holding-item:last-child {
    border-bottom: none !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   THE REAL COST PAGE
   ═══════════════════════════════════════════════════════════════════════════ */

.real-cost-page {
    max-width: 960px;
    margin: 0 auto;
    padding: 40px 24px 60px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Hero */
.real-cost-hero {
    padding: 32px 0 24px;
}
.hero-icon-wrapper {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(99, 102, 241, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}
.real-cost-title {
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
}
.real-cost-subtitle {
    color: var(--text-secondary);
    font-size: 1rem;
    max-width: 520px;
    margin: 0 auto;
    line-height: 1.6;
}
.real-cost-question {
    font-weight: 600;
    color: var(--text-primary);
}

/* Preset cards */
.preset-row {
    max-width: 820px;
    margin: 0 auto;
}
.preset-row > [class*="col"] {
    display: flex;
}
.preset-card {
    background: var(--card-bg);
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 20px 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.preset-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.12);
    transform: translateY(-2px);
}
.preset-icon-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
}
.preset-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}
.preset-price {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--primary-color);
}

/* Divider */
.custom-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}
.divider-line {
    flex: 1;
    height: 1px;
    background: var(--border-color);
}
.divider-text {
    font-size: 0.82rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* Custom input area */
.custom-input-wrapper {
    max-width: 640px;
}
.custom-input-group {
    border-radius: var(--radius-md) !important;
    overflow: hidden;
}
.custom-ig-text {
    background: #f8fafc !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
    font-size: 0.85rem !important;
}
.custom-input {
    font-size: 0.9rem !important;
}
.custom-input-cost {
    max-width: 120px !important;
}
.custom-submit-btn {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    white-space: nowrap;
    padding: 8px 20px !important;
}
.custom-submit-btn:hover {
    background: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
}

.section-hr {
    border-color: var(--border-color);
    margin: 32px 0;
}

/* ── Results ─────────────────────────────────────────────────────── */
.results-container {
    /* wrapper for the full results block */
}
.animate-in {
    animation: fadeSlideUp 0.4s ease-out;
}
@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Parameters card */
.params-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 20px 24px;
    margin-bottom: 28px;
}
.params-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 14px;
}
.param-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}
.param-input {
    font-size: 0.88rem !important;
}
.param-addon {
    font-size: 0.8rem !important;
    background: #f8fafc !important;
    color: var(--text-secondary) !important;
}
.recalc-btn {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    font-weight: 600 !important;
    margin-top: 1px;
}
.recalc-btn:hover {
    background: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
}

/* Results cards */
.results-section {
    margin-bottom: 28px;
}
.results-heading {
    font-size: 1.15rem;
    font-weight: 500;
}
.result-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 24px 20px;
    text-align: center;
    transition: box-shadow 0.2s ease;
}
.result-card:hover {
    box-shadow: var(--shadow-md);
}
.result-icon {
    margin-bottom: 10px;
}
.result-card-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}
.result-card-value {
    font-size: 1.7rem;
    font-weight: 700;
    margin-bottom: 4px;
}
.text-primary-custom { color: #6366f1; }
.text-danger-custom  { color: #ef4444; }
.text-warning-custom { color: #f59e0b; }
.result-card-sub {
    font-size: 0.78rem;
    color: var(--text-secondary);
}

/* Insight callout */
.insight-callout {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border: 1px solid #fde68a;
    border-radius: var(--radius-lg);
    padding: 18px 22px;
    margin-bottom: 32px;
}
.insight-text {
    font-size: 0.88rem;
    color: #92400e;
    line-height: 1.65;
}

/* Timeline */
.timeline-section {
    margin-top: 8px;
}
.timeline-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 24px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.timeline-wrapper {
    position: relative;
    height: 80px;
    margin: 0 20px 16px;
}
.timeline-track {
    position: absolute;
    top: 8px;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color) 0%, #a78bfa 50%, #f59e0b 100%);
    border-radius: 3px;
}
.timeline-items {
    position: relative;
    height: 100%;
}
.timeline-item {
    position: absolute;
    transform: translateX(-50%);
    text-align: center;
}
.timeline-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--primary-color);
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px var(--primary-color);
    margin: 3px auto 6px;
}
.timeline-info {
    white-space: nowrap;
}
.timeline-year {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text-primary);
}
.timeline-age {
    font-size: 0.62rem;
    color: var(--text-secondary);
}
.timeline-val {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--primary-color);
}

/* ===== Bank Account Sync Page ===== */
.tx-row {
    transition: background-color 0.15s ease;
}
.tx-row:hover {
    background-color: rgba(59, 130, 246, 0.04);
}
.tx-row:last-child {
    border-bottom: none !important;
}

/* Compact Dash date range picker */
.dash-date-range-sm .DateRangePickerInput {
    font-size: 0.8rem;
    border-radius: 0.375rem;
    border: 1px solid #dee2e6;
    background: #fff;
}
.dash-date-range-sm .DateInput {
    width: 78px;
}
.dash-date-range-sm .DateInput_input {
    font-size: 0.78rem;
    padding: 4px 6px;
    line-height: 1.3;
}
.dash-date-range-sm .DateRangePickerInput_arrow_svg {
    width: 16px;
    height: 16px;
}

/* Bank sync filter bar */
.bs-filter-row .col-md-2,
.bs-filter-row .col-md-3 {
    display: flex;
    align-items: center;
}

.bs-filter-control,
.bs-filter-search .input-group-text,
.bs-filter-search .form-control,
.bs-filter-row .DateRangePickerInput {
    height: 36px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.5rem !important;
    background: #fff !important;
    box-shadow: none !important;
}

.bs-filter-search .input-group-text {
    border-right: 0 !important;
    color: #64748b !important;
    padding: 0 0.65rem !important;
}

.bs-filter-search .form-control {
    border-left: 0 !important;
    padding-left: 0.35rem !important;
}

.bs-filter-search {
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    overflow: hidden;
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.bs-filter-search .input-group-text,
.bs-filter-search .form-control {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.bs-filter-search:focus-within {
    border-color: #6366f1;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.12);
}

/* ── Custom multi-select (.bs-multiselect) ─────────────────────────── */
.bs-multiselect {
    position: relative;
    width: 100%;
}
.bs-multiselect > summary { list-style: none; }
.bs-multiselect > summary::-webkit-details-marker { display: none; }
.bs-ms-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 36px;
    padding: 0 0.6rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    background: #fff;
    cursor: pointer;
    user-select: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.bs-ms-toggle:hover {
    border-color: #cbd5e1;
}
.bs-multiselect[open] .bs-ms-toggle {
    border-color: #6366f1;
    box-shadow: 0 0 0 2px rgba(99,102,241,0.12);
}
.bs-ms-text {
    font-size: 0.82rem;
    font-weight: 500;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bs-ms-chevron {
    font-size: 0.65rem;
    color: #64748b;
    margin-left: 0.4rem;
    transition: transform 0.15s ease;
}
.bs-multiselect[open] .bs-ms-chevron {
    transform: rotate(180deg);
}
/* Panel */
.bs-ms-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 200px;
    max-height: 280px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
                0 4px 6px -4px rgb(0 0 0 / 0.1);
    z-index: 1200;
    padding: 0.35rem 0;
}
.bs-ms-actions {
    display: flex;
    align-items: center;
    padding: 0.35rem 0.65rem;
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 0.2rem;
}
.bs-ms-action {
    all: unset;
    font-size: 0.72rem;
    font-weight: 600;
    color: #6366f1;
    cursor: pointer;
    line-height: 1;
}
.bs-ms-action:hover {
    text-decoration: underline;
}
/* Checklist items */
.bs-ms-checklist {
    padding: 0.15rem 0.4rem;
}
.bs-ms-checklist label,
.bs-ms-label {
    display: flex !important;
    align-items: center;
    gap: 0.55rem;
    padding: 0.35rem 0.45rem;
    margin: 0;
    border-radius: 0.375rem;
    font-size: 0.8rem;
    font-weight: 450;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: background 0.1s ease;
    line-height: 1.35;
}
.bs-ms-checklist label:hover,
.bs-ms-label:hover {
    background: #f1f5f9;
}
.bs-ms-checklist input[type="checkbox"],
.bs-ms-checkbox {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border: 1.5px solid #cbd5e1;
    border-radius: 4px;
    background: #fff;
    flex-shrink: 0;
    cursor: pointer;
    position: relative;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.bs-ms-checklist input[type="checkbox"]:checked,
.bs-ms-checkbox:checked {
    background: #6366f1;
    border-color: #6366f1;
}
.bs-ms-checklist input[type="checkbox"]:checked::after,
.bs-ms-checkbox:checked::after {
    content: '';
    position: absolute;
    left: 4.5px;
    top: 1.5px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.bs-filter-search .form-control::placeholder {
    color: #94a3b8;
}

.bs-filter-control:focus,
.bs-filter-search .form-control:focus,
.bs-filter-row .DateRangePickerInput:focus-within {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.12) !important;
}

.bs-filter-row .DateRangePickerInput {
    display: inline-flex;
    align-items: center;
    padding: 0 0.25rem;
}

.bs-filter-row .DateInput {
    width: 88px;
}

.bs-filter-row .DateInput_input {
    height: 34px !important;
    border: none !important;
    padding: 4px 6px !important;
    font-size: 0.8rem !important;
}

.bs-filter-row .DateRangePickerInput_arrow {
    padding: 0 0.15rem;
}

@media (max-width: 768px) {
    .portfolio-analysis-page .sticky-header {
        position: sticky !important;
        top: 48px !important;
        z-index: 100 !important;
    }
}

/* ── Shadcn-like Select dropdowns ─────────────────────────────────── */
.form-select {
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    background-color: #fff;
    color: #1e293b;
    font-size: 0.82rem;
    font-weight: 500;
    padding: 0.375rem 2rem 0.375rem 0.75rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    background-size: 12px 12px;
}
.form-select:hover {
    border-color: #cbd5e1;
}
.form-select:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
    outline: none;
}
.form-select-sm {
    font-size: 0.78rem;
    padding: 0.3rem 1.8rem 0.3rem 0.6rem;
    border-radius: 0.375rem;
}
/* Default/placeholder option styling */
.form-select option[value=""] {
    color: #94a3b8;
}
.form-select option {
    font-weight: 500;
}

/* ── Language dropdown ─────────────────────────────────────────────── */
.lang-dropdown-menu {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #1e293b;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.5rem;
    padding: 0.3rem 0;
    min-width: 130px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
    z-index: 1050;
}
.lang-dropdown-item {
    display: flex;
    align-items: center;
    padding: 0.4rem 0.75rem;
    cursor: pointer;
    color: #cbd5e1;
    transition: background 0.12s ease;
    white-space: nowrap;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.lang-dropdown-item:hover {
    background: rgba(99, 102, 241, 0.2);
    color: #fff;
}


/* ── Clerk component overrides ── */
/* Hide "Secured by Clerk" branding badge */
.cl-internal-b3fm6y,
.cl-internal-1hp3lbw,
[class*="cl-internal"] a[href*="clerk.com"],
.cl-footerPages,
.cl-footer .cl-internal-1dauvpw {
    display: none !important;
}
/* Ensure Clerk cards stretch to fill container */
#clerk-sign-in .cl-rootBox,
#clerk-sign-up .cl-rootBox,
#clerk-sign-in .cl-card,
#clerk-sign-up .cl-card,
#clerk-sign-in .cl-signIn-root,
#clerk-sign-up .cl-signUp-root {
    width: 100% !important;
    max-width: 100% !important;
    box-shadow: none !important;
}
/* fix Bootstrap !important overrides bleeding into Clerk inputs */
#clerk-sign-in .cl-formFieldInput,
#clerk-sign-up .cl-formFieldInput,
#clerk-sign-in input[type="text"],
#clerk-sign-in input[type="email"],
#clerk-sign-in input[type="password"],
#clerk-sign-up input[type="text"],
#clerk-sign-up input[type="email"],
#clerk-sign-up input[type="password"] {
    background-color: #1a1e33 !important;
    border: 1px solid #2d3154 !important;
    color: #e2e8f0 !important;
}

/* ══════════════════════════════════════════════════════════════════════
   Firefox / Opera — Button click reliability fixes
   Firefox sometimes requires multiple clicks on buttons whose children
   (SVG icons, <i>, <span>) intercept pointer events.  The transform on
   hover can also shift the button out from under the cursor mid-click.
   ══════════════════════════════════════════════════════════════════════ */

/* 1. Prevent all child elements inside buttons from stealing pointer events */
button.btn > svg, button.btn > i, button.btn > span,
button.btn > span > svg, button.btn > span > i {
    pointer-events: none;
}

/* 2. Prevent text-selection on buttons (causes missed clicks on double-tap) */
button.btn {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* 3. Ensure consistent hit-area on focus (Firefox uses inner focus ring) */
button.btn::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/* Spinning icon for auth-check polling indicator */
@keyframes bs-spin { to { transform: rotate(360deg); } }
.bs-spin { display: inline-block; animation: bs-spin 1s linear infinite; }
/* ============================================================
   Performance comparison table (portfolio analysis)
   ============================================================ */
.pcmp-wrap { overflow-x: auto; }
.pcmp-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.82rem;
    font-family: Inter, sans-serif;
}
.pcmp-table th {
    font-size: 0.68rem;
    letter-spacing: 0.07em;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    padding: 8px 10px;
    text-align: right;
    white-space: nowrap;
    border-bottom: 1px solid #e5e7eb;
    background: #f8fafc;
    position: sticky;
    top: 0;
    z-index: 2;
}
/* The asset column stays put while the numbers scroll under it, so it has to
   be painted above them. Without a z-index a sticky table cell is left where
   the browser wants to put it, and the figures scrolled straight over the
   names. */
.pcmp-table th.pcmp-asset-head {
    text-align: left;
    left: 0;
    z-index: 3;
    border-right: 1px solid #eef2f7;
}
.pcmp-table td { padding: 9px 10px; border-bottom: 1px solid #f1f5f9; white-space: nowrap; }
.pcmp-asset {
    text-align: left;
    font-weight: 500;
    color: #1e293b;
    position: sticky;
    left: 0;
    z-index: 1;
    background: #fff;
    border-right: 1px solid #eef2f7;
    /* iOS repaints a sticky table cell a frame late during a flick, and the
       figures sliding underneath showed through the names. Its own layer is
       repainted with the scroll rather than after it. Checked on WebKit,
       Chromium and Gecko: the column still sticks. */
    transform: translateZ(0);
}
.pcmp-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 550;
}
.pcmp-na { text-align: right; color: #cbd5e1; }
.pcmp-row-portfolio td { background-color: #eef2ff; font-weight: 650; }
.pcmp-row-portfolio .pcmp-asset { background-color: #eef2ff; }
.pcmp-table tbody tr:hover td { filter: brightness(0.985); }
.pcmp-hint {
    font-size: 0.75rem;
    color: #94a3b8;
    margin: 10px 2px 0;
    line-height: 1.5;
}

/* ── Investment Simulator: paired inputs ─────────────────────────────
   Side by side at every width, so the form stays short enough to fit a
   normal screen without scrolling. */
.ps-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 12px;
}
/* Bottom-align the paired fields: if one label wraps to two lines, both
   inputs still sit on the same baseline instead of floating apart. */
.ps-pair > div {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
/* Long German labels ("Besteuerungsmethode") fit the half column without a
   dangling wrapped letter. */
.ps-pair .input-label {
    letter-spacing: 0.02em !important;
}

/* Rule writing guide: prose first, raw reference last and visibly quieter. */
.rule-guide-h {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1e293b;
    margin-top: 18px;
    margin-bottom: 8px;
}
#info-modal .modal-body p,
#info-modal .modal-body li {
    font-size: 0.88rem;
    line-height: 1.65;
    color: #475569;
}
#info-modal .modal-body li {
    margin-bottom: 6px;
}
#info-modal .modal-body code {
    font-size: 0.82rem;
    background: #f1f5f9;
    color: #4a3aa7;
    padding: 2px 6px;
    border-radius: 4px;
}
.rule-guide-ref {
    font-size: 0.8rem;
    line-height: 1.55;
    color: #64748b;
}

/* Small explanatory line under an input, for a setting whose behaviour
   is not obvious from its label alone. */
.input-hint {
    font-size: 0.72rem;
    line-height: 1.45;
    color: #6b7280;
}

/* Monte Carlo result summary, shown in place of the yearly table.
   One hero figure, two tiles and a spread table: the survival rate is what a
   withdrawal plan is judged on, the tiles carry the downside, and the table
   holds the full range of every amount without turning into a wall of tiles. */
.mc-stats {
    padding: 4px 2px 2px;
}
.mc-hero-row {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.mc-hero-value {
    font-family: Inter, sans-serif;
    font-size: 3rem;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.02em;
}
.mc-hero-verdict {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 2px;
}
.mc-hero-note {
    font-size: 0.82rem;
    color: #64748b;
    line-height: 1.5;
}
.mc-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 16px;
}
.mc-tiles-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mc-tile {
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-md);
    padding: 10px 12px;
    background: #fcfcfb;
}
.mc-tile-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
    margin-bottom: 4px;
}
.mc-tile-value {
    font-size: 1.35rem;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.2;
}
.mc-tile-note {
    font-size: 0.75rem;
    color: #64748b;
    line-height: 1.45;
    margin-top: 3px;
}
/* The spread table. Amounts are right aligned so digits line up down a
   column, and the row header stays left so the label reads as a label. It
   scrolls inside its own box rather than pushing the card sideways. */
.mc-table-wrap {
    margin-top: 16px;
    overflow-x: auto;
}
.mc-table {
    width: 100%;
    min-width: 460px;
    border-collapse: collapse;
    font-size: 0.82rem;
}
.mc-table thead th {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
    text-align: right;
    padding: 0 8px 6px;
    border-bottom: 1px solid #e5e7eb;
    white-space: nowrap;
}
.mc-table thead th:first-child {
    text-align: left;
    padding-left: 0;
}
.mc-table tbody th {
    font-weight: 500;
    color: #475569;
    text-align: left;
    padding: 7px 8px 7px 0;
    white-space: nowrap;
}
.mc-table tbody td {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: #1e293b;
    text-align: right;
    padding: 7px 8px;
    white-space: nowrap;
}
.mc-table tbody tr + tr th,
.mc-table tbody tr + tr td {
    border-top: 1px solid #f1f5f9;
}
.mc-footnote {
    font-size: 0.78rem;
    color: #64748b;
    line-height: 1.55;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #f1f5f9;
}
@media (max-width: 767.98px) {
    .mc-tiles, .mc-tiles-2 { grid-template-columns: 1fr; }
    .mc-hero-value { font-size: 2.5rem; }
}

/* Monte Carlo: the info button beside the section label, and a popover wide
   enough for prose (Bootstrap caps .popover at 276px by default). */
.mc-info-btn {
    color: #64748b;
    font-size: 0.95rem;
    padding: 0 0 0 6px;
    line-height: 1;
    box-shadow: none !important;
}
.mc-info-btn:hover {
    color: #6366f1;
}
.mc-info-popover {
    max-width: 380px;
}
.mc-info-popover .popover-body {
    font-size: 0.78rem;
    line-height: 1.6;
    color: #475569;
}
.mc-info-popover .popover-header {
    font-size: 0.8rem;
    font-weight: 600;
}

/* ============================================================
   Landing page (route "/")
   Editorial layout: warm paper ground, serif headlines, hairline
   rules instead of cards, one accent colour.
   ============================================================ */
.lp-page {
    --lp-ink: #161a1f;
    --lp-body: #3d454f;
    --lp-muted: #6b7480;
    --lp-rule: #e4e1da;
    --lp-paper: #fbfaf8;
    --lp-accent: #1d4ed8;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 8px 80px;
    color: var(--lp-body);
}

.lp-page ::selection { background: rgba(29, 78, 216, 0.14); }

/* ── Hero ── */
.lp-hero { padding: 56px 0 44px; }
/* Free-and-open-source note: the first line on the page, a quiet pill above
   the eyebrow so it reads as an invitation rather than a banner. */
.lp-sub-link {
    color: var(--lp-ink);
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid #c9cfd8;
}
.lp-sub-link:hover { color: var(--lp-accent); border-bottom-color: var(--lp-accent); }
.lp-eyebrow {
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--lp-muted);
    margin-bottom: 20px;
}
.lp-hero-title {
    font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
    font-size: clamp(1.5rem, 2.4vw, 2.1rem);
    line-height: 1.12;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--lp-ink);
    margin: 0 0 22px;
}
.lp-hero-em { color: var(--lp-accent); }
.lp-hero-sub {
    font-size: 1.05rem;
    line-height: 1.65;
    max-width: 33em;
    color: var(--lp-body);
    margin-bottom: 28px;
}
.lp-hero-note {
    font-size: 0.875rem;
    color: var(--lp-muted);
    max-width: 34em;
    margin: 18px 0 0;
}

.lp-cta-row { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.lp-btn {
    display: inline-flex;
    align-items: center;
    font-size: 0.95rem;
    font-weight: 550;
    text-decoration: none;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.lp-btn-primary {
    background: var(--lp-ink);
    color: #fff;
    padding: 12px 24px;
    border-radius: 4px;
    border: 1px solid var(--lp-ink);
}
.lp-btn-primary:hover { background: var(--lp-accent); border-color: var(--lp-accent); color: #fff; }
.lp-btn-quiet {
    color: var(--lp-ink);
    padding: 12px 0;
    border-bottom: 1px solid var(--lp-rule);
    border-radius: 0;
}
.lp-btn-quiet:hover { color: var(--lp-accent); border-bottom-color: var(--lp-accent); }
.lp-row-arrow { display: inline-block; transition: transform 0.18s ease; }
.lp-btn-quiet:hover .lp-row-arrow { transform: translateX(3px); }

/* ── Hero chart ── */
.lp-chart-card {
    background: #fff;
    border: 1px solid var(--lp-rule);
    border-radius: 6px;
    padding: 20px 22px 16px;
}
.lp-chart-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 6px;
}
.lp-chart-label {
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--lp-muted);
}
.lp-chart-value {
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--lp-ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.lp-chart-caption {
    font-size: 0.8rem;
    color: var(--lp-muted);
    line-height: 1.5;
    margin: 10px 0 0;
}

/* ── Facts strip ── */
.lp-facts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--lp-rule);
    border-bottom: 1px solid var(--lp-rule);
}
.lp-fact {
    padding: 20px 24px 20px 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.lp-fact + .lp-fact { border-left: 1px solid var(--lp-rule); padding-left: 24px; }
.lp-fact-k {
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--lp-muted);
}
.lp-fact-v { font-size: 0.95rem; color: var(--lp-ink); font-weight: 500; }

/* ── Sections ── */
.lp-section { padding: 60px 0 0; }
.lp-section-title {
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--lp-ink);
    letter-spacing: -0.01em;
    margin-bottom: 10px;
}
.lp-section-lead {
    font-size: 1rem;
    line-height: 1.65;
    color: var(--lp-body);
    max-width: 42em;
    margin-bottom: 26px;
}

/* ── Capability cards ── */
.lp-cards {
    display: grid;
    /* Two wide cards per row: at three across the screenshots were too
       small to read, which defeats showing them at all. auto-fill keeps
       the odd fifth card at the same width instead of stretching it. */
    grid-template-columns: repeat(auto-fill, minmax(520px, 1fr));
    gap: 16px;
    margin-top: 22px;
}
.lp-card-link { text-decoration: none; display: block; height: 100%; }
.lp-card-with-shot { padding: 0; overflow: hidden; }
.lp-card-shot {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    object-position: top;
    border-bottom: 1px solid var(--lp-rule);
    background: #f4f4f2;
}
.lp-card-row {
    position: relative;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px 40px 16px 16px;
}
.lp-card-row .lp-card-arrow { top: 16px; }

/* The hero screenshot, in a plain window frame. */
.lp-hero-shot-link { display: block; text-decoration: none; }
.lp-hero-frame {
    background: #fff;
    border: 1px solid var(--lp-rule);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 18px 44px rgba(22, 26, 31, 0.10);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.lp-hero-shot-link:hover .lp-hero-frame {
    transform: translateY(-2px);
    box-shadow: 0 22px 52px rgba(22, 26, 31, 0.14);
}
.lp-frame-bar {
    display: flex;
    gap: 6px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--lp-rule);
    background: #fafaf8;
}
.lp-frame-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #e2e0db;
}
.lp-hero-shot { display: block; width: 100%; }

.lp-card {
    position: relative;
    height: 100%;
    background: #fff;
    border: 1px solid var(--lp-rule);
    border-radius: 10px;
    /* Extra right padding keeps long titles clear of the corner arrow. */
    padding: 20px 36px 20px 18px;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.lp-card-link:hover .lp-card {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(22, 26, 31, 0.08);
    border-color: #d4d9e0;
}
.lp-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    margin-bottom: 14px;
}
.lp-tint-indigo { background: #eef2ff; color: #4f46e5; }
.lp-tint-amber  { background: #fef3c7; color: #b45309; }
.lp-tint-green  { background: #d1fae5; color: #047857; }
.lp-tint-violet { background: #ede9fe; color: #6d28d9; }
.lp-tint-cyan   { background: #cffafe; color: #0e7490; }
.lp-card-title {
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 1.08rem;
    font-weight: 600;
    color: var(--lp-ink);
    margin: 0 0 6px;
}
.lp-card-link:hover .lp-card-title { color: var(--lp-accent); }
.lp-card-desc { font-size: 0.88rem; line-height: 1.55; color: var(--lp-body); margin: 0; }
.lp-card-arrow {
    position: absolute;
    top: 18px;
    right: 16px;
    color: var(--lp-muted);
    transition: transform 0.16s ease, color 0.16s ease;
}
.lp-card-link:hover .lp-card-arrow { transform: translateX(3px); color: var(--lp-accent); }

/* ── Data notes ── */
.lp-note { padding-top: 18px; border-top: 2px solid var(--lp-ink); }
.lp-note-icon { font-size: 1.1rem; color: var(--lp-ink); margin-bottom: 6px; }
.lp-note-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--lp-ink);
    margin-bottom: 8px;
}
.lp-note-desc { font-size: 0.92rem; line-height: 1.6; color: var(--lp-body); margin: 0; }

/* ── Colophon ── */
.lp-colophon { border-top: 1px solid var(--lp-rule); margin-top: 60px; }
.lp-colophon-links { font-size: 0.9rem; margin-top: 4px; }
.lp-link { color: var(--lp-ink); text-decoration: none; border-bottom: 1px solid var(--lp-rule); }
.lp-link:hover { color: var(--lp-accent); border-bottom-color: var(--lp-accent); }
.lp-dot { color: var(--lp-muted); padding: 0 8px; }
.lp-closing {
    background: var(--lp-paper);
    border: 1px solid var(--lp-rule);
    border-radius: 6px;
    padding: 26px;
}
.lp-closing-q {
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 1.15rem;
    color: var(--lp-ink);
    line-height: 1.4;
    margin-bottom: 18px;
}
.lp-disclaimer {
    font-size: 0.8rem;
    color: var(--lp-muted);
    line-height: 1.6;
    margin: 44px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--lp-rule);
    max-width: 52em;
}

@media (max-width: 991px) {
    .lp-hero { padding: 36px 0 32px; }
    .lp-hero-chart-col { margin-top: 26px; }
    .lp-facts { grid-template-columns: repeat(2, 1fr); }
    .lp-fact:nth-child(3) { border-left: none; padding-left: 0; }
    .lp-fact:nth-child(3), .lp-fact:nth-child(4) { border-top: 1px solid var(--lp-rule); }
}
@media (max-width: 575px) {
    /* Keep the 2×2 facts grid from the 991px rules; just tighten it. */
    .lp-hero { padding: 20px 0 24px; }
    .lp-eyebrow { display: none; }
    .lp-hero-title { margin-bottom: 14px; }
    .lp-hero-sub { font-size: 0.95rem; margin-bottom: 20px; }
    .lp-hero-note { font-size: 0.82rem; margin-top: 14px; }
    .lp-cta-row { gap: 12px; }
    .lp-btn-primary { width: 100%; justify-content: center; }
    .lp-hero-chart-col { margin-top: 18px; }
    .lp-chart-card { padding: 14px 14px 12px; }
    .lp-chart-value { font-size: 1.25rem; }
    .lp-fact { padding-top: 12px; padding-bottom: 12px; }
    /* Cards go one per row with the icon on the left, so five of them stay
       a short, scannable list. */
    .lp-cards { grid-template-columns: 1fr; gap: 10px; }
    .lp-card {
        display: grid;
        grid-template-columns: 40px 1fr;
        column-gap: 14px;
        align-items: start;
        padding: 14px 32px 14px 14px;
    }
    /* The screenshot cards keep the image across the full width; the
       icon-left grid applies to the row underneath it instead. */
    .lp-card-with-shot { display: block; padding: 0; }
    .lp-card-row { padding: 12px 32px 14px 12px; }
    .lp-card-icon { margin-bottom: 0; }
    .lp-card-arrow { top: 14px; right: 14px; }
    .lp-section { padding-top: 36px; }
    .lp-section-title { font-size: 1.35rem; }
    .lp-colophon { margin-top: 40px; }
    .lp-closing { padding: 20px; margin-top: 8px; }
    .lp-disclaimer { margin-top: 28px; }
}

/* ============================================================
   Mega-cap Lab (route "/megacap")
   ============================================================ */
.ml-page {
    --ml-ink: #161a1f;
    --ml-body: #3d454f;
    --ml-muted: #6b7480;
    --ml-rule: #e4e1da;
    --ml-accent: #1d4ed8;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 8px 72px;
    color: var(--ml-body);
}
.ml-header { padding: 40px 0 30px; max-width: 62em; }
.ml-kicker {
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--ml-muted);
    margin-bottom: 14px;
}
.ml-title {
    font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
    font-size: clamp(1.8rem, 3.2vw, 2.5rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--ml-ink);
    margin: 0 0 18px;
}
.ml-intro { font-size: 1rem; line-height: 1.68; color: var(--ml-body); margin-bottom: 12px; }

/* ── Controls ── */
.ml-controls {
    background: #fff;
    border: 1px solid var(--ml-rule);
    border-radius: 6px;
    padding: 18px 18px 16px;
    /* Sticky and self-scrolling: the Run button stays reachable however long
       the page of results below gets. */
    position: sticky;
    top: 12px;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.ml-ctl { margin-bottom: 16px; }
.ml-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--ml-muted);
    margin-bottom: 7px;
}
.ml-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid var(--ml-rule);
    color: var(--ml-muted);
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
    cursor: help;
    letter-spacing: 0;
    text-transform: none;
    flex: none;
}
.ml-help:hover { background: var(--ml-ink); border-color: var(--ml-ink); color: #fff; }
/* dbc renders tooltips into <body>, outside .ml-page, so the page-scoped
   --ml-* tokens are not defined here: use the :root token with a literal
   fallback, otherwise the background collapses and white text lands on the
   white page. */
.ml-tooltip .tooltip-inner {
    max-width: 300px;
    text-align: left;
    font-size: 0.8rem;
    line-height: 1.45;
    background-color: var(--ink-color, #161a1f);
    color: #fff;
    padding: 9px 11px;
    border-radius: 5px;
    box-shadow: 0 6px 18px -8px rgba(15, 23, 42, 0.55);
}
.ml-tooltip .tooltip-arrow::before,
.ml-tooltip .arrow::before { border-right-color: var(--ink-color, #161a1f); }
.ml-tooltip.show { opacity: 1; }
.ml-more-toggle, .ml-notes-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    border-top: 1px solid var(--ml-rule);
    padding: 12px 0 2px;
    margin-top: 4px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ml-muted);
    cursor: pointer;
}
.ml-more-toggle:hover, .ml-notes-toggle:hover { color: var(--ml-ink); }
.ml-notes-toggle {
    border-top: none;
    padding: 0;
    margin: 0;
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ml-ink);
}
.ml-more-caret { font-size: 0.9rem; }
.ml-slider { margin-top: 4px; }
.ml-radio .form-check { margin-bottom: 4px; }
.ml-radio .form-check-label { line-height: 1.35; }
.ml-radio .form-check-label { font-size: 0.9rem; color: var(--ml-body); }
.ml-radio .form-check-input:checked { background-color: var(--ml-accent); border-color: var(--ml-accent); }
.ml-controls .Select-control, .ml-controls .form-control { font-size: 0.9rem; }
.ml-run-btn {
    width: 100%;
    margin-top: 2px;
    background: var(--ml-ink);
    border: 1px solid var(--ml-ink);
    color: #fff;
    font-weight: 550;
    border-radius: 4px;
    padding: 11px 18px;
}
.ml-run-btn:hover, .ml-run-btn:focus {
    background: var(--ml-accent);
    border-color: var(--ml-accent);
    color: #fff;
}
.ml-preset-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 2px; }
.ml-controls .ml-preset {
    display: inline-flex;
    align-items: center;
    font-size: 0.8rem;
    font-weight: 500;
    border-radius: 999px;
    padding: 5px 13px;
    border: 1px solid var(--ml-rule);
    background: #fff;
    color: var(--ml-body);
    width: auto;
}
.ml-controls .ml-preset:hover,
.ml-controls .ml-preset:focus { background: var(--ml-ink); border-color: var(--ml-ink); color: #fff; }

/* ── Result blocks ── */
.ml-card {
    background: #fff;
    border: 1px solid var(--ml-rule);
    border-radius: 6px;
    padding: 20px 22px;
    margin-bottom: 16px;
}
.ml-h4 {
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--ml-ink);
    margin-bottom: 10px;
}
.ml-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    background: #fff;
    border-radius: 6px;
    margin-bottom: 16px;
}
.ml-kpi { padding: 18px 18px; border-left: 1px solid var(--ml-rule); }
.ml-kpi:first-child { border-left: none; }
.ml-kpi-label {
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--ml-muted);
    margin-bottom: 6px;
}
.ml-kpi-value {
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 1.45rem;
    font-weight: 600;
    color: var(--ml-ink);
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}
.ml-kpi-sub { font-size: 0.78rem; color: var(--ml-muted); margin-top: 4px; }
.ml-findings {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--ml-body);
    background: #fbfaf8;
    border: 1px solid var(--ml-rule);
    border-left: 3px solid var(--ml-accent);
    border-radius: 4px;
    padding: 16px 20px;
    margin-bottom: 16px;
}
.ml-switch .form-check-label { font-size: 0.82rem; color: var(--ml-muted); }
.ml-switch .form-check-input:checked { background-color: var(--ml-accent); border-color: var(--ml-accent); }

/* The holdings table scrolls inside its own box. Unwrapped, its five columns
   pushed a 360px phone 27px sideways and the whole page panned with it. */
.ml-table-wrap { overflow-x: auto; }
.ml-table { width: 100%; font-size: 0.9rem; border-collapse: collapse; }
.ml-table th {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ml-muted);
    font-weight: 600;
    padding: 6px 8px;
    border-bottom: 1px solid var(--ml-rule);
}
.ml-table td { padding: 6px 8px; border-bottom: 1px solid #f3f2ef; color: var(--ml-body); }
.ml-table td:first-child { color: var(--ml-muted); width: 2.2em; font-variant-numeric: tabular-nums; }
.ml-table tr:hover td { background: #fbfaf8; }

.ml-log { list-style: none; padding: 0; margin: 0; max-height: 460px; overflow-y: auto; }
.ml-log li {
    font-size: 0.88rem;
    line-height: 1.55;
    padding: 8px 0;
    border-bottom: 1px solid #f3f2ef;
}
.ml-log-date {
    display: inline-block;
    min-width: 5.4em;
    font-variant-numeric: tabular-nums;
    color: var(--ml-muted);
    font-weight: 600;
}
.ml-log-plus { color: #15803d; font-weight: 700; }
.ml-log-minus { color: #b91c1c; font-weight: 700; }

.ml-notes-card { margin-top: 24px; }
.ml-notes { padding-left: 18px; margin: 0; }
.ml-notes li { font-size: 0.9rem; line-height: 1.6; color: var(--ml-body); margin-bottom: 8px; }

/* Auto-fit puts a variable number of KPIs on a row, so each cell draws its own
   border and the cells overlap by a hairline. A grid border or gap background
   would otherwise show an empty box where the last row is not filled. */
.ml-kpi { background: #fff; border: 1px solid var(--ml-rule); margin: -0.5px; }

@media (max-width: 991px) {
    .ml-controls { position: static; max-height: none; overflow: visible; }
    .ml-header { padding: 28px 0 20px; }
}

/* Legal pages */
.legal-page {
    max-width: 860px;
    margin: 0 auto;
    padding: 44px 24px 72px;
}

.legal-back-link {
    display: inline-flex;
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 22px;
    text-decoration: none;
}

.legal-back-link:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

.legal-title {
    color: var(--text-primary);
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 24px;
}

.legal-text {
    color: var(--text-secondary);
    line-height: 1.75;
    font-size: 0.96rem;
}

.legal-text h2,
.legal-text h3 {
    color: var(--text-primary);
    margin-top: 28px;
    margin-bottom: 12px;
}

.legal-text strong {
    color: var(--text-primary);
}

.legal-text a {
    color: var(--primary-color);
}

/* Make the sidebar brand feel clickable */
a.sidebar-brand { text-decoration: none; display: block; }
a.sidebar-brand:hover .sidebar-logo { opacity: 0.9; }

/* ===== Apex sidebar/layout refinements ===== */
body.theme-night {
    --content-bg: #0f172a;
    --card-bg: #111827;
    --text-primary: #e5e7eb;
    --text-secondary: #94a3b8;
    --border-color: #263244;
    --input-bg: #111827;
    --input-border: #334155;
}

.sidebar-control-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 14px;
}

.sidebar-user-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.settings-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: var(--sidebar-text);
}

.settings-btn:hover,
.theme-mode-btn:hover {
    background: rgba(99, 102, 241, 0.22);
    color: #fff;
    transform: translateY(-1px);
}

.theme-mode-btn .bi {
    font-size: 1.05rem;
}

#current-user-label {
    width: 100%;
    max-width: 240px;
    min-height: 34px;
    padding: 8px 10px;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.055);
    border-radius: 6px;
    overflow-wrap: anywhere;
    line-height: 1.25;
}
/* Logged out the label is empty; without this the chip renders as a bare box. */
#current-user-label:empty { display: none; }

/* Logged in: one chip holding the name and the logout control. The border
   and background belong to the row, so logout sits inside it rather than
   floating next to a box that wraps only the name. */
.sidebar-user-row {
    align-items: center;
    gap: 6px;
    width: 100%;
    max-width: 240px;
    padding: 4px 6px 4px 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.055);
    border-radius: 6px;
}
.sidebar-user-row #current-user-label {
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 0;
    display: block;
    border: none;
    background: none;
    min-height: 0;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar-logout-btn {
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.78rem;
    padding: 2px 6px;
    text-decoration: none;
    border-radius: 4px;
}
.sidebar-logout-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.clerk-user-button-slot {
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 769px) {
    body {
        overflow: hidden;
    }

    .sidebar-col {
        position: fixed !important;
        top: 0;
        left: 0;
        width: 300px !important;
        max-width: 300px !important;
        flex: 0 0 300px !important;
        height: 100vh;
        z-index: 1020;
    }

    .sidebar {
        height: 100vh;
        min-height: 100vh;
        overflow-y: auto;
        padding: 24px 16px 18px;
    }

    .content-col {
        margin-left: 300px;
        flex: 0 0 calc(100% - 300px) !important;
        max-width: calc(100% - 300px) !important;
        height: 100vh;
        overflow-y: auto;
        min-width: 0;
    }

    .main-content {
        min-height: 100vh;
    }
}

/* ── Real account, nothing synced into it ──
   Replaces the whole dashboard rather than sitting above it: any figure
   left on screen there would be demo data under the real account's name. */
.pa-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 55vh;
    padding: 24px 16px;
}
.pa-empty-inner {
    max-width: 420px;
    text-align: center;
}
.pa-empty-icon {
    font-size: 2.6rem;
    color: var(--text-muted, #94a3b8);
    opacity: 0.7;
}
.pa-empty-title {
    margin-top: 14px;
    font-weight: 700;
}
.pa-empty-body {
    color: var(--text-muted, #94a3b8);
    font-size: 0.92rem;
    margin-bottom: 20px;
}
.pa-empty-link {
    background: none;
    border: 0;
    padding: 0;
    color: var(--text-muted, #94a3b8);
    font-size: 0.85rem;
    text-decoration: underline;
    cursor: pointer;
}
.pa-empty-link:hover { color: inherit; }