/**
 * DFO Dashboard — Print & Report Mode Styles
 * PRESENTATION-QUALITY PDF output — PowerPoint/deck grade
 * Each page = one slide, big readable numbers, generous whitespace
 *
 * IMPORTANT: This stylesheet produces client-facing PDF output.
 * Do not add casual styling, emojis, or consumer-app patterns.
 */


/* ================================================================
   1. REPORT CHROME — HIDDEN BY DEFAULT ON SCREEN
   ================================================================ */

.report-header,
.report-footer {
    display: none;
}


/* ================================================================
   2. UTILITY CLASSES — SCREEN VS PRINT VISIBILITY
   ================================================================ */

.print-hide { display: block; }
.print-only { display: none; }

.print-page-break { page-break-before: always; }
.print-no-break  { page-break-inside: avoid; }


/* ================================================================
   3. REPORT MODE (body.report-mode) — ON-SCREEN PREVIEW
   Mirrors print layout so users can preview before PDF export
   ================================================================ */

body.report-mode {
    /* Force light theme */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fb;
    --bg-card: #ffffff;
    --bg-card-hover: #ffffff;
    --bg-glass: rgba(255,255,255,1);
    --bg-nav: #ffffff;
    --text-primary: #000000;
    --text-secondary: #4a5568;
    --text-muted: #718096;
    --text-tertiary: #a0aec0;
    --border: #e2e8f0;
    --border-light: #edf2f7;
    --accent: #2563eb;
    --green: #059669;
    --red: #dc2626;
    --orange: #d97706;
    background: white;
    color: black;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 11pt;
}

/* Hide interactive chrome */
body.report-mode .nav,
body.report-mode #nav-mount,
body.report-mode .theme-toggle,
body.report-mode .search-box,
body.report-mode .period-selector,
body.report-mode .report-mode-btn,
body.report-mode .sub-nav,
body.report-mode .freshness-badge,
body.report-mode .password-overlay,
body.report-mode button:not(.print-keep),
body.report-mode .btn:not(.print-keep),
body.report-mode .page-intro,
body.report-mode .filter-bar,
body.report-mode .toggle-group {
    display: none !important;
}

/* Show report chrome */
body.report-mode .report-header,
body.report-mode .report-footer {
    display: flex;
}

body.report-mode .main-content {
    padding-top: 0;
}

body.report-mode .container {
    max-width: 100%;
    padding: 0;
}

/* Report mode cards — clean with subtle backgrounds */
body.report-mode .card,
body.report-mode .data-card,
body.report-mode .chart-card,
body.report-mode .summary-card,
body.report-mode .section-card,
body.report-mode .entity-card,
body.report-mode .metric {
    box-shadow: none;
    border: none;
    background: white;
    border-radius: 0;
}

/* Report mode hero — large and centered */
body.report-mode .nw-hero {
    background: white;
    color: black;
    padding: 0;
    margin: 0 0 24px 0;
    border-radius: 0;
    box-shadow: none;
}

body.report-mode .nw-hero::before,
body.report-mode .nw-hero::after {
    display: none;
}

body.report-mode .nw-hero-value {
    color: #000 !important;
    font-size: 36px !important;
}

body.report-mode .nw-hero-label {
    color: #4a5568 !important;
}

body.report-mode .nw-hero-timestamp {
    color: #718096 !important;
}

body.report-mode .nw-change-amount {
    color: #000 !important;
}

body.report-mode .nw-hero .pos {
    color: #059669 !important;
}

body.report-mode .nw-hero .neg {
    color: #dc2626 !important;
}

body.report-mode .nw-change-label {
    color: #718096 !important;
}

body.report-mode .nw-change-pct {
    color: #4a5568 !important;
}


/* ================================================================
   4. @MEDIA PRINT — THE MAIN EVENT
   Presentation-quality: each page = one slide
   ================================================================ */

@media print {

    /* ----------------------------------------
       4a. PAGE SETUP
       ---------------------------------------- */
    @page {
        size: letter landscape;
        margin: 0.6in 0.75in;
    }

    /* ----------------------------------------
       4b. FORCE LIGHT THEME
       ---------------------------------------- */
    :root,
    [data-theme="dark"] {
        --bg-primary: #ffffff !important;
        --bg-secondary: #f5f7fa !important;
        --bg-card: #ffffff !important;
        --bg-card-hover: #ffffff !important;
        --bg-glass: rgba(255,255,255,1) !important;
        --bg-nav: #ffffff !important;
        --text-primary: #1a1a2e !important;
        --text-secondary: #4a5568 !important;
        --text-muted: #718096 !important;
        --text-tertiary: #a0aec0 !important;
        --text-nav: #000000 !important;
        --text-nav-active: #000000 !important;
        --border: #e2e8f0 !important;
        --border-light: #edf2f7 !important;
        --border-accent: rgba(37,99,235,0.2) !important;
        --accent: #2563eb !important;
        --accent-hover: #1d4ed8 !important;
        --accent-light: rgba(37,99,235,0.06) !important;
        --green: #059669 !important;
        --green-light: rgba(5,150,105,0.06) !important;
        --red: #dc2626 !important;
        --red-light: rgba(220,38,38,0.06) !important;
        --orange: #d97706 !important;
        --orange-light: rgba(217,119,6,0.06) !important;
        --purple: #7c3aed !important;
        --purple-light: rgba(124,58,237,0.06) !important;
        --viz-blue: #3b82f6 !important;
        --viz-purple: #8b5cf6 !important;
        --viz-green: #10b981 !important;
        --viz-orange: #f59e0b !important;
        --viz-pink: #ec4899 !important;
        --viz-indigo: #6366f1 !important;
        --viz-teal: #14b8a6 !important;
        --viz-cyan: #06b6d4 !important;
        --entity-llc: #3b82f6 !important;
        --entity-llc-light: rgba(59,130,246,0.08) !important;
        --entity-llc-text: #1d4ed8 !important;
        --entity-tom: #8b5cf6 !important;
        --entity-tom-light: rgba(139,92,246,0.08) !important;
        --entity-tom-text: #6d28d9 !important;
        --entity-taf: #10b981 !important;
        --entity-taf-light: rgba(16,185,129,0.08) !important;
        --entity-taf-text: #047857 !important;
        --shadow-sm: none !important;
        --shadow-md: none !important;
        --shadow-lg: none !important;
        --shadow-xl: none !important;
        --shadow-glow: none !important;
        --shadow-card: none !important;
    }

    /* ----------------------------------------
       4c. BODY & BASE LAYOUT
       Presentation font size: 11pt base (readable)
       ---------------------------------------- */
    body {
        background: white !important;
        color: #1a1a2e !important;
        font-size: 11pt !important;
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
        line-height: 1.5 !important;
        margin: 0 !important;
        padding: 0 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .main-content {
        padding: 0 !important;
        padding-top: 56px !important;
        padding-bottom: 44px !important;
    }

    .container {
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* ----------------------------------------
       4d. HIDE INTERACTIVE ELEMENTS
       ---------------------------------------- */
    .nav,
    #nav-mount,
    .theme-toggle,
    .password-overlay,
    .search-box,
    .report-mode-btn,
    .period-selector,
    .sub-nav,
    .freshness-badge,
    .page-intro,
    .print-disclaimer,
    #dfo-freshness-badge,
    .market-status-badge,
    .live-pricing-warning,
    button:not(.print-keep),
    .btn:not(.print-keep),
    [role="navigation"],
    .mobile-nav,
    .hamburger,
    .nav-toggle,
    .toast,
    .tooltip,
    .modal-backdrop,
    .modal,
    .dropdown-menu,
    input[type="search"],
    .filter-bar,
    .toggle-group,
    .footer {
        display: none !important;
    }

    .print-hide { display: none !important; }
    .print-only { display: block !important; }

    /* Hide CIO strip interactive elements */
    .cio-strip-link,
    .cio-strip-badges,
    .cio-sev-badge {
        display: none !important;
    }

    .cio-strip {
        border: none !important;
        box-shadow: none !important;
        padding: 12px 0 !important;
    }

    .cio-strip-item a {
        display: none !important;
    }

    /* ----------------------------------------
       4e. REPORT HEADER — BRANDED BAR
       Three-segment: org name | report title | date
       ---------------------------------------- */
    .report-header {
        display: flex !important;
        justify-content: space-between;
        align-items: baseline;
        padding: 0 0 10px 0;
        border-bottom: 3px solid #1a1a2e;
        margin-bottom: 24px;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background: white;
        z-index: 1000;
    }

    .report-header .org-name {
        font-size: 12pt;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 2.5px;
        color: #1a1a2e !important;
        flex: none;
    }

    .report-header .report-title {
        text-align: center;
        font-size: 11pt;
        font-weight: 600;
        color: #4a5568 !important;
        flex: 1;
    }

    .report-header .report-date {
        font-size: 10pt;
        color: #718096 !important;
        text-align: right;
        flex: none;
    }

    /* ----------------------------------------
       4f. REPORT FOOTER — BRANDED BAR
       CONFIDENTIAL | Prepared by... | Page X
       ---------------------------------------- */
    .report-footer {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        padding-top: 8px;
        border-top: 1.5px solid #cbd5e0;
        font-size: 8pt;
        color: #718096 !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: white;
    }

    .report-footer .confidential {
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        color: #4a5568 !important;
    }

    .report-footer .firm-name {
        color: #718096 !important;
        text-align: center;
    }

    .report-footer .page-number::after {
        content: "Page " counter(page) " of " counter(pages);
        color: #718096 !important;
    }

    /* ----------------------------------------
       4g. TYPOGRAPHY — PRESENTATION GRADE
       Big, readable, dramatic hierarchy
       ---------------------------------------- */
    .page-header {
        margin-top: 0 !important;
        padding-top: 0 !important;
        margin-bottom: 24px !important;
    }

    .page-header h1 {
        font-size: 22pt !important;
        font-weight: 800 !important;
        color: #1a1a2e !important;
        margin-bottom: 4px !important;
        letter-spacing: -0.5px;
    }

    .page-header .subtitle {
        font-size: 10pt !important;
        color: #4a5568 !important;
    }

    .page-header .date {
        font-size: 9pt !important;
        color: #718096 !important;
        margin-top: 4px !important;
    }

    .section-title,
    .section-header .section-title {
        font-size: 14pt !important;
        font-weight: 700 !important;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        color: #1a1a2e !important;
        border-bottom: 2px solid #1a1a2e;
        padding-bottom: 6px;
        margin-bottom: 16px !important;
    }

    h2 {
        font-size: 13pt !important;
        font-weight: 700 !important;
        color: #1a1a2e !important;
    }

    h3 {
        font-size: 12pt !important;
        font-weight: 600 !important;
        color: #2d3748 !important;
    }

    h4 {
        font-size: 11pt !important;
        font-weight: 600 !important;
        color: #2d3748 !important;
    }

    /* ----------------------------------------
       4h. LINKS — NO DECORATION
       ---------------------------------------- */
    a {
        color: #1a1a2e !important;
        text-decoration: none !important;
    }

    a[href]::after {
        content: none !important;
    }

    /* ----------------------------------------
       4i. SUMMARY CARDS — BIG KPI TILES
       PowerPoint-style: large numbers, clear labels
       ---------------------------------------- */
    .summary-grid {
        display: flex !important;
        flex-wrap: nowrap;
        gap: 0 !important;
        margin-bottom: 28px !important;
        padding: 0;
    }

    .summary-card {
        flex: 1 1 0;
        min-width: 0;
        background: #f5f7fa !important;
        border: none !important;
        border-right: 2px solid #ffffff !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 16px 20px !important;
        margin: 0 !important;
        transform: none !important;
    }

    .summary-card:last-child {
        border-right: none !important;
    }

    .summary-card.highlight {
        background: #eef2ff !important;
        border-left: 4px solid #2563eb !important;
    }

    .summary-card .label {
        font-size: 8pt !important;
        font-weight: 700 !important;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: #718096 !important;
        margin-bottom: 4px !important;
    }

    .summary-card .value {
        font-size: 22pt !important;
        font-weight: 800 !important;
        color: #1a1a2e !important;
        letter-spacing: -0.5px;
        line-height: 1.1;
    }

    .summary-card .change,
    .summary-card .sub {
        font-size: 9pt !important;
        margin-top: 4px !important;
        font-weight: 500;
    }

    .summary-card .change.positive,
    .summary-card .sub.positive {
        color: #059669 !important;
    }

    .summary-card .change.negative,
    .summary-card .sub.negative {
        color: #dc2626 !important;
    }

    /* ----------------------------------------
       4i-b. DATA CARDS & STAT STRIPS
       Clean containers with subtle backgrounds
       ---------------------------------------- */
    .data-card {
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: white !important;
        overflow: visible !important;
        margin-bottom: 20px !important;
    }

    .data-card-header {
        padding: 0 !important;
        border-bottom: 2px solid #1a1a2e !important;
        margin-bottom: 12px !important;
    }

    .data-card-title {
        font-size: 12pt !important;
        font-weight: 700 !important;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: #1a1a2e !important;
    }

    .data-card-body {
        padding: 0 !important;
    }

    .stat-strip {
        border: none !important;
        border-radius: 0 !important;
        background: #f5f7fa !important;
        overflow: visible !important;
    }

    .stat-strip-item {
        padding: 12px 20px !important;
        border-right: 2px solid #ffffff !important;
    }

    .stat-strip-item:last-child {
        border-right: none !important;
    }

    .stat-strip-label {
        font-size: 8pt !important;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #718096 !important;
        margin-bottom: 2px !important;
    }

    .stat-strip-value {
        font-size: 16pt !important;
        font-weight: 700;
        color: #1a1a2e !important;
    }

    .stat-strip-sub {
        font-size: 8pt !important;
    }

    /* ----------------------------------------
       4j. TABLES — PRESENTATION GRADE
       Readable font size, generous padding
       ---------------------------------------- */
    .addepar-table {
        font-size: 10pt;
        width: 100%;
        border-collapse: collapse;
        border-spacing: 0;
    }

    .addepar-table th {
        font-size: 8pt;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        padding: 8px 10px;
        border-bottom: 2px solid #1a1a2e;
        color: #4a5568 !important;
        background: white !important;
        text-align: left;
        white-space: nowrap;
    }

    .addepar-table td {
        padding: 6px 10px;
        border-bottom: 1px solid #e2e8f0;
        font-variant-numeric: tabular-nums;
        color: #1a1a2e !important;
        vertical-align: middle;
        line-height: 1.4;
    }

    .addepar-table .total-row td {
        border-top: 2px solid #1a1a2e;
        border-bottom: none;
        font-weight: 700;
        padding-top: 8px;
        font-size: 10pt;
    }

    .addepar-table .subtotal-row td {
        border-top: 1px solid #1a1a2e;
        font-weight: 600;
    }

    /* Numeric alignment */
    .addepar-table .num,
    .addepar-table .number,
    .addepar-table [data-type="number"],
    .addepar-table [data-type="currency"],
    .addepar-table [data-type="percent"] {
        font-family: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace;
        text-align: right;
        font-size: 9pt;
    }

    .addepar-table th.num,
    .addepar-table th.number,
    .addepar-table th[data-type="number"],
    .addepar-table th[data-type="currency"],
    .addepar-table th[data-type="percent"] {
        text-align: right;
    }

    /* Clean white rows — subtle alternating */
    .addepar-table tbody tr:nth-child(even) {
        background: #fafbfc !important;
    }

    .addepar-table tbody tr:nth-child(odd) {
        background: white !important;
    }

    .addepar-table tbody tr:hover {
        background: white !important;
    }

    /* Repeat headers on page break */
    .addepar-table thead,
    thead {
        display: table-header-group;
    }

    .addepar-table tfoot,
    tfoot {
        display: table-footer-group;
    }

    /* Generic tables — same presentation style */
    table:not(.addepar-table) {
        font-size: 10pt;
        border-collapse: collapse;
        width: 100%;
    }

    table:not(.addepar-table) th {
        font-size: 8pt;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-bottom: 2px solid #1a1a2e;
        padding: 6px 10px;
        color: #4a5568 !important;
    }

    table:not(.addepar-table) td {
        padding: 6px 10px;
        border-bottom: 1px solid #edf2f7;
        font-variant-numeric: tabular-nums;
        color: #1a1a2e !important;
    }

    /* Total rows in generic tables */
    table:not(.addepar-table) .total td,
    table:not(.addepar-table) tr.total td {
        border-top: 2px solid #1a1a2e;
        border-bottom: none;
        font-weight: 700;
        padding-top: 8px;
    }

    /* Positive/negative colors */
    .pos, .positive { color: #059669 !important; }
    .neg, .negative { color: #dc2626 !important; }

    /* ----------------------------------------
       4k. NW HERO — LARGE CENTERED DISPLAY
       Like a title slide hero number
       ---------------------------------------- */
    .nw-hero {
        background: white !important;
        color: #1a1a2e !important;
        padding: 20px 0 !important;
        margin: 0 0 24px 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        border: none !important;
        border-bottom: 1px solid #e2e8f0 !important;
        text-align: center;
    }

    .nw-hero::before,
    .nw-hero::after {
        display: none !important;
    }

    .nw-hero-top {
        margin-bottom: 8px !important;
    }

    .nw-hero-label {
        color: #718096 !important;
        font-size: 9pt !important;
        text-transform: uppercase;
        letter-spacing: 2px;
        font-weight: 600;
    }

    .nw-hero-value {
        color: #1a1a2e !important;
        font-size: 36pt !important;
        font-weight: 800 !important;
        letter-spacing: -2px;
        margin-bottom: 8px !important;
    }

    .nw-hero-changes {
        gap: 32px !important;
        justify-content: center !important;
    }

    .nw-change-amount {
        color: #1a1a2e !important;
        font-size: 14pt !important;
        font-weight: 600;
    }

    .nw-change-pct {
        font-size: 10pt !important;
    }

    .nw-change-label {
        color: #718096 !important;
        font-size: 8pt !important;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .nw-hero .pos { color: #059669 !important; }
    .nw-hero .neg { color: #dc2626 !important; }

    .nw-hero-timestamp {
        color: #718096 !important;
        font-size: 8pt !important;
        margin-top: 8px;
    }

    /* ----------------------------------------
       4l. CARDS & SECTIONS — CLEAN CONTAINERS
       Subtle backgrounds for visual grouping
       ---------------------------------------- */
    .card,
    .chart-card,
    .section-card,
    .entity-card,
    .metric,
    .stat-card,
    .kpi-card,
    .insight-card {
        box-shadow: none !important;
        border: none !important;
        background: white !important;
        border-radius: 0 !important;
        page-break-inside: avoid;
        margin-bottom: 16px;
    }

    /* Card headers — clean bold treatment */
    .card-header,
    .card-title {
        font-size: 10pt !important;
        font-weight: 700 !important;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        color: #1a1a2e !important;
        border-bottom: 1px solid #e2e8f0;
        padding-bottom: 6px;
        margin-bottom: 12px;
    }

    .section {
        margin-bottom: 24px;
    }

    .section-header {
        margin-bottom: 12px !important;
    }

    /* ----------------------------------------
       4m. PAGE BREAKS — SECTION-BASED
       Each major section starts on a new page
       PowerPoint = one story per slide
       ---------------------------------------- */
    .page-break,
    .print-page-break {
        page-break-before: always;
    }

    .no-break,
    .print-no-break {
        page-break-inside: avoid;
    }

    /* Major sections get page breaks — one story per slide */
    .section,
    .benchmark-section,
    .split-panel {
        page-break-before: always;
        page-break-inside: avoid;
    }

    /* First section after summary cards — no break (stays on overview slide) */
    .summary-grid + .section,
    .summary-grid + div + .section {
        page-break-before: auto;
    }

    /* Data cards — avoid breaking inside, auto breaks */
    .data-card {
        page-break-before: auto;
        page-break-inside: avoid;
    }

    /* Sections after small data-cards (stat strips) — flow together */
    .data-card + .section {
        page-break-before: auto;
    }

    /* Small end-sections (Crypto, RE, Cash) — flow together */
    .section + .section {
        page-break-before: auto;
    }

    /* Avoid orphan headers */
    h1, h2, h3, h4,
    .section-title,
    .card-header,
    .section-header {
        page-break-after: avoid;
    }

    /* Keep together */
    .addepar-table thead,
    .addepar-table .total-row,
    .waterfall-container,
    .chart-card,
    .summary-grid,
    figure {
        page-break-inside: avoid;
    }

    /* ----------------------------------------
       4n. CHARTS — PROMINENT DISPLAY
       Charts should be big and readable
       ---------------------------------------- */
    canvas {
        max-height: 280px !important;
        page-break-inside: avoid;
    }

    .chart-card {
        padding: 12px 0 !important;
    }

    .chart-card h3 {
        font-size: 11pt !important;
        font-weight: 700 !important;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        color: #1a1a2e !important;
        margin-bottom: 12px !important;
    }

    .chart-wrapper {
        max-height: 280px !important;
    }

    .chart-legend,
    .legend {
        font-size: 9pt !important;
    }

    /* ----------------------------------------
       4o. GRID LAYOUTS — SPACIOUS
       ---------------------------------------- */
    .entity-strip {
        display: flex !important;
        gap: 0 !important;
        background: #f5f7fa !important;
    }

    .entity-strip > * {
        flex: 1 1 0;
        border-right: 2px solid #ffffff;
        padding: 10px 16px;
    }

    .entity-strip > *:last-child {
        border-right: none;
    }

    .metrics-bar {
        display: flex !important;
        gap: 0 !important;
        background: #f5f7fa !important;
    }

    .metrics-bar > * {
        flex: 1 1 0;
        border-right: 2px solid #ffffff;
        padding: 10px 16px;
    }

    .metrics-bar > *:last-child {
        border-right: none;
    }

    .two-col,
    .charts-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 24px !important;
    }

    .three-col {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 16px !important;
    }

    .four-col {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 12px !important;
    }

    .stat-grid,
    .chart-grid {
        gap: 12px !important;
    }

    /* Split panels — side by side */
    .split-panel {
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }

    .split-panel-header {
        border-bottom: 2px solid #1a1a2e !important;
        padding: 0 0 6px 0 !important;
        margin-bottom: 16px !important;
        background: white !important;
    }

    .split-panel-title {
        font-size: 14pt !important;
        font-weight: 700 !important;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        color: #1a1a2e !important;
    }

    /* ----------------------------------------
       4p. ENTITY BADGES — VISIBLE BUT CLEAN
       ---------------------------------------- */
    .entity-badge,
    .entity-tag {
        font-size: 8pt !important;
        padding: 2px 8px !important;
        border-radius: 3px !important;
    }

    /* ----------------------------------------
       4q. BADGES & TAGS — READABLE
       ---------------------------------------- */
    .badge,
    .tag,
    .pill {
        border: 1px solid #cbd5e0 !important;
        background: #f5f7fa !important;
        color: #2d3748 !important;
        font-size: 8pt !important;
        padding: 2px 8px !important;
        border-radius: 3px !important;
        font-weight: 600;
    }

    .badge.green, .badge.success, .badge-success {
        color: #059669 !important;
        border-color: #059669 !important;
        background: rgba(5,150,105,0.06) !important;
    }

    .badge.red, .badge.danger, .badge-danger {
        color: #dc2626 !important;
        border-color: #dc2626 !important;
        background: rgba(220,38,38,0.06) !important;
    }

    .badge.orange, .badge.warning, .badge-warning {
        color: #d97706 !important;
        border-color: #d97706 !important;
        background: rgba(217,119,6,0.06) !important;
    }

    /* ----------------------------------------
       4r. BENCHMARK CARDS — PRESENTATION SIZE
       ---------------------------------------- */
    .benchmark-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 16px !important;
    }

    .bench-card {
        border: 1px solid #e2e8f0 !important;
        border-radius: 0 !important;
        padding: 16px !important;
        box-shadow: none !important;
        background: #f5f7fa !important;
        page-break-inside: avoid;
    }

    .bench-card.highlight {
        background: #eef2ff !important;
        border-color: #2563eb !important;
        border-width: 2px !important;
    }

    .bench-card h4 {
        font-size: 11pt !important;
        font-weight: 700 !important;
        margin-bottom: 4px !important;
    }

    .bench-card .period {
        font-size: 8pt !important;
        color: #718096 !important;
        margin-bottom: 8px !important;
    }

    .bench-row {
        font-size: 10pt !important;
        padding: 4px 0 !important;
        display: flex;
        justify-content: space-between;
    }

    .bench-row .val {
        font-weight: 700;
        font-size: 11pt !important;
    }

    .bench-row.result {
        border-top: 1px solid #cbd5e0;
        padding-top: 6px !important;
        margin-top: 4px;
    }

    .benchmark-header-box {
        background: white !important;
        border: none !important;
        padding: 0 !important;
        margin-top: 16px !important;
    }

    .benchmark-header-box h3 {
        font-size: 11pt !important;
        margin-bottom: 8px !important;
    }

    /* ----------------------------------------
       4s. BAR CHARTS (CSS BARS)
       Bigger, more readable
       ---------------------------------------- */
    .bar-row {
        margin-bottom: 10px !important;
    }

    .bar-label {
        font-size: 9pt !important;
        font-weight: 600;
        width: 100px !important;
        color: #4a5568 !important;
    }

    .bar-track {
        height: 10px !important;
        border-radius: 5px !important;
        background: #edf2f7 !important;
    }

    .bar-fill {
        border-radius: 5px !important;
    }

    .bar-value {
        font-size: 10pt !important;
        font-weight: 700;
        width: 70px !important;
        color: #1a1a2e !important;
    }

    /* ----------------------------------------
       4t. TOM TOOLS — EACH SECTION = SLIDE
       ---------------------------------------- */
    /* Hide controls/sliders */
    .sr-controls,
    .sr-controls-row,
    #sr-controls,
    .realloc-controls,
    .ji-controls,
    .tom-controls,
    input[type="range"],
    input[type="number"],
    select {
        display: none !important;
    }

    /* Sell Reco summary — big KPI strip */
    .sr-summary-grid {
        display: flex !important;
        gap: 0 !important;
        background: #f5f7fa;
        margin-bottom: 16px;
    }

    .sr-summary-grid > * {
        flex: 1 1 0;
        border-right: 2px solid #ffffff;
        padding: 12px 16px;
        text-align: center;
    }

    .sr-summary-grid > *:last-child {
        border-right: none;
    }

    /* Joint Income summary — big KPI strip */
    .ji-summary-grid {
        display: flex !important;
        gap: 0 !important;
        background: #f5f7fa;
        margin-bottom: 16px;
    }

    .ji-summary-grid > * {
        flex: 1 1 0;
        border-right: 2px solid #ffffff;
        padding: 12px 16px;
        text-align: center;
    }

    .ji-summary-grid > *:last-child {
        border-right: none;
    }

    /* Score chips — readable */
    .score-chip,
    .reco-badge {
        font-size: 8pt !important;
        padding: 2px 6px !important;
        border-radius: 3px !important;
        font-weight: 700;
    }

    .tom-tool-header {
        page-break-after: avoid;
    }

    .tom-tool-section {
        page-break-before: always;
    }

    /* Divider between sections */
    .divider {
        border-top: 2px solid #1a1a2e !important;
        margin: 24px 0 !important;
    }

    /* ----------------------------------------
       4u. STOCK PAGES — READABLE
       ---------------------------------------- */
    .stock-header {
        page-break-after: avoid;
        margin-bottom: 16px !important;
    }

    .stock-ticker {
        font-size: 22pt !important;
        font-weight: 800;
    }

    .stock-price {
        font-size: 18pt !important;
        font-weight: 700;
    }

    .stock-change {
        font-size: 11pt !important;
    }

    /* AI summary */
    .ai-summary {
        border-left: 4px solid #2563eb !important;
        padding: 10px 16px !important;
        font-size: 10pt !important;
        font-style: italic;
        color: #4a5568 !important;
        margin-bottom: 20px !important;
        background: #f5f7fa !important;
    }

    /* Metrics row — horizontal strip with backgrounds */
    .metrics-row {
        display: flex !important;
        gap: 0 !important;
        background: #f5f7fa !important;
    }

    .metrics-row > * {
        flex: 1 1 0;
        border-right: 2px solid #ffffff;
        padding: 10px 14px;
        text-align: center;
    }

    .metrics-row > *:last-child {
        border-right: none;
    }

    .stock-metrics {
        page-break-inside: avoid;
    }

    .stock-section {
        page-break-inside: avoid;
    }

    /* Position summary — horizontal strip */
    .position-summary {
        display: flex !important;
        gap: 0 !important;
        background: #f5f7fa !important;
    }

    .position-summary > * {
        flex: 1 1 0;
        border-right: 2px solid #ffffff;
        padding: 10px 14px;
    }

    .position-summary > *:last-child {
        border-right: none;
    }

    /* 52-week range bar */
    .range-bar,
    .context-bar {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* ----------------------------------------
       4v. CONCENTRATION & ANALYTICS
       ---------------------------------------- */
    .concentration-bar {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        page-break-inside: avoid;
    }

    .heatmap-cell {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* ----------------------------------------
       4w. PROGRESS BARS & GAUGES
       ---------------------------------------- */
    .progress-bar,
    .gauge {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* ----------------------------------------
       4x. SPARKLINES
       ---------------------------------------- */
    .sparkline {
        height: 16px !important;
        width: 60px !important;
    }

    /* ----------------------------------------
       4y. SCROLLBAR & OVERFLOW CLEANUP
       ---------------------------------------- */
    ::-webkit-scrollbar {
        display: none;
    }

    * {
        overflow: visible !important;
    }

    .table-container,
    .table-wrapper {
        overflow: visible !important;
        max-height: none !important;
    }

    /* ----------------------------------------
       4z. STATEMENT MODE — ACCOUNT STATEMENTS
       When body.statement-mode is active, hide dashboard
       and show the injected #account-statement container
       ---------------------------------------- */
    body.statement-mode .main-content,
    body.statement-mode .nav,
    body.statement-mode #nav-mount,
    body.statement-mode .report-header,
    body.statement-mode .report-footer,
    body.statement-mode .nw-hero,
    body.statement-mode .container,
    body.statement-mode .footer,
    body.statement-mode .password-overlay {
        display: none !important;
    }

    body.statement-mode #account-statement {
        display: block !important;
    }

    /* Statement page container */
    .stmt-page {
        page-break-after: always;
        padding: 0;
        position: relative;
    }

    .stmt-page:last-child {
        page-break-after: auto;
    }

    /* ---- Masthead ---- */
    .stmt-masthead {
        text-align: center;
        padding: 12px 0 12px 0;
        border-bottom: 3px solid #1a1a2e;
        margin-bottom: 14px;
    }

    .stmt-logo {
        font-size: 11pt;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 4px;
        color: #718096 !important;
        margin-bottom: 6px;
    }

    .stmt-entity-name {
        font-size: 22pt;
        font-weight: 800;
        color: #1a1a2e !important;
        letter-spacing: -0.5px;
        margin-bottom: 2px;
    }

    .stmt-doc-type {
        font-size: 12pt;
        font-weight: 600;
        color: #4a5568 !important;
        text-transform: uppercase;
        letter-spacing: 2px;
        margin-bottom: 4px;
    }

    .stmt-period {
        font-size: 10pt;
        color: #718096 !important;
    }

    /* ---- Net Worth Summary Box ---- */
    .stmt-nw-summary {
        border: 2px solid #1a1a2e;
        padding: 12px 24px;
        margin-bottom: 12px;
    }

    .stmt-nw-row {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        margin-bottom: 8px;
        padding-bottom: 8px;
        border-bottom: 1px solid #e2e8f0;
    }

    .stmt-nw-label {
        font-size: 11pt;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: #4a5568 !important;
    }

    .stmt-nw-value {
        font-size: 24pt;
        font-weight: 800;
        color: #1a1a2e !important;
        letter-spacing: -1px;
    }

    .stmt-change-row {
        display: flex;
        gap: 32px;
    }

    .stmt-change-item {
        display: flex;
        flex-direction: column;
    }

    .stmt-change-label {
        font-size: 8pt;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #718096 !important;
        margin-bottom: 2px;
    }

    .stmt-change-value {
        font-size: 11pt;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
    }

    .stmt-change-value.pos { color: #059669 !important; }
    .stmt-change-value.neg { color: #dc2626 !important; }

    /* ---- Section titles ---- */
    .stmt-section {
        margin-bottom: 10px;
    }

    .stmt-section-title {
        font-size: 10pt;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        color: #1a1a2e !important;
        border-bottom: 2px solid #1a1a2e;
        padding-bottom: 4px;
        margin-bottom: 8px;
    }

    .stmt-page-title {
        font-size: 14pt;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        color: #1a1a2e !important;
        border-bottom: 3px solid #1a1a2e;
        padding-bottom: 8px;
        margin-bottom: 20px;
    }

    /* ---- Statement tables ---- */
    .stmt-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 9.5pt;
        font-variant-numeric: tabular-nums;
    }

    .stmt-table th {
        font-size: 7.5pt;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        padding: 6px 8px;
        border-bottom: 2px solid #1a1a2e;
        color: #4a5568 !important;
        background: white !important;
        text-align: left;
        white-space: nowrap;
    }

    .stmt-table th.num {
        text-align: right;
    }

    .stmt-table td {
        padding: 5px 8px;
        border-bottom: 1px solid #edf2f7;
        color: #1a1a2e !important;
        vertical-align: middle;
        line-height: 1.3;
    }

    .stmt-table td.num {
        text-align: right;
        font-family: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace;
        font-size: 8.5pt;
    }

    .stmt-table tbody tr:nth-child(even) {
        background: #f8f9fb !important;
    }

    .stmt-table tbody tr:nth-child(odd) {
        background: white !important;
    }

    .stmt-table tr.total td {
        border-top: 2px solid #1a1a2e;
        border-bottom: none;
        font-weight: 700;
        padding-top: 8px;
        background: white !important;
    }

    /* Holdings-specific columns */
    .stmt-rank {
        color: #a0aec0 !important;
        font-size: 8pt;
        width: 24px;
        text-align: center;
    }

    .stmt-ticker {
        font-weight: 700;
        font-size: 9pt;
        letter-spacing: 0.3px;
    }

    .stmt-name {
        font-size: 8.5pt;
        color: #4a5568 !important;
        max-width: 180px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Holdings table — smaller font for many columns */
    .stmt-holdings-table {
        font-size: 8.5pt;
    }

    .stmt-holdings-table th {
        font-size: 7pt;
        padding: 5px 6px;
    }

    .stmt-holdings-table td {
        padding: 4px 6px;
    }

    .stmt-holdings-table td.num {
        font-size: 8pt;
    }

    /* ---- Metrics strip ---- */
    .stmt-metrics {
        display: flex;
        gap: 0;
        background: #f5f7fa !important;
        margin-bottom: 16px;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .stmt-metric {
        flex: 1 1 0;
        padding: 12px 16px;
        text-align: center;
        border-right: 2px solid #ffffff;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .stmt-metric:last-child {
        border-right: none;
    }

    .stmt-metric-label {
        font-size: 7.5pt;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #718096 !important;
        margin-bottom: 2px;
    }

    .stmt-metric-value {
        font-size: 13pt;
        font-weight: 700;
        color: #1a1a2e !important;
    }

    /* ---- Performance clone ---- */
    .stmt-perf-clone {
        margin-bottom: 24px;
    }

    .stmt-perf-clone table {
        width: 100%;
        border-collapse: collapse;
        font-size: 9.5pt;
    }

    .stmt-perf-clone th {
        font-size: 7.5pt;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        padding: 6px 8px;
        border-bottom: 2px solid #1a1a2e;
        color: #4a5568 !important;
        background: white !important;
    }

    .stmt-perf-clone td {
        padding: 5px 8px;
        border-bottom: 1px solid #edf2f7;
        color: #1a1a2e !important;
    }

    .stmt-perf-clone tbody tr:nth-child(even) {
        background: #f8f9fb !important;
    }

    /* ---- Disclaimer ---- */
    .stmt-disclaimer {
        margin-top: 32px;
        padding: 16px 20px;
        border: 1px solid #e2e8f0;
        font-size: 7.5pt;
        color: #718096 !important;
        line-height: 1.6;
        font-style: italic;
    }

    /* ---- Statement footer ---- */
    .stmt-footer {
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
        padding-top: 8px;
        border-top: 1.5px solid #cbd5e0;
        font-size: 7.5pt;
        color: #718096 !important;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    /* ---- CIO Observations ---- */
    .stmt-observations {
        margin-bottom: 24px;
    }

    .stmt-obs-item {
        padding: 7px 12px;
        margin-bottom: 6px;
        border-left: 4px solid #cbd5e0;
        background: #f8f9fb !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .stmt-obs-item:last-child {
        margin-bottom: 0;
    }

    .stmt-obs-item.stmt-sev-high {
        border-left-color: #dc2626;
        background: rgba(220,38,38,0.04) !important;
    }

    .stmt-obs-item.stmt-sev-medium {
        border-left-color: #d97706;
        background: rgba(217,119,6,0.04) !important;
    }

    .stmt-obs-item.stmt-sev-low {
        border-left-color: #2563eb;
        background: rgba(37,99,235,0.04) !important;
    }

    .stmt-obs-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 3px;
    }

    .stmt-obs-title {
        font-size: 9.5pt;
        font-weight: 700;
        color: #1a1a2e !important;
    }

    .stmt-obs-badge {
        font-size: 6.5pt;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        padding: 2px 8px;
        border-radius: 2px;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .stmt-obs-badge.stmt-sev-high {
        color: #dc2626 !important;
        background: rgba(220,38,38,0.08) !important;
        border: 1px solid rgba(220,38,38,0.2);
    }

    .stmt-obs-badge.stmt-sev-medium {
        color: #d97706 !important;
        background: rgba(217,119,6,0.08) !important;
        border: 1px solid rgba(217,119,6,0.2);
    }

    .stmt-obs-badge.stmt-sev-low {
        color: #2563eb !important;
        background: rgba(37,99,235,0.08) !important;
        border: 1px solid rgba(37,99,235,0.2);
    }

    .stmt-obs-detail {
        font-size: 8.5pt;
        color: #4a5568 !important;
        line-height: 1.5;
    }

    .stmt-obs-metric {
        font-size: 8pt;
        font-weight: 600;
        color: #718096 !important;
        margin-top: 2px;
        font-variant-numeric: tabular-nums;
    }

    /* ---- Contributors / Detractors (Opp Fund) ---- */
    .stmt-contrib-grid {
        display: flex;
        gap: 32px;
        margin-top: 16px;
    }

    .stmt-contrib-col {
        flex: 1 1 0;
    }

    .stmt-contrib-header {
        font-size: 9pt;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        padding-bottom: 6px;
        border-bottom: 2px solid #1a1a2e;
        margin-bottom: 8px;
    }

    .stmt-contrib-header.pos {
        color: #059669 !important;
    }

    .stmt-contrib-header.neg {
        color: #dc2626 !important;
    }

    /* ---- Notable Holdings (Concentration) ---- */
    .stmt-notable {
        font-size: 8.5pt;
        color: #4a5568 !important;
        line-height: 1.7;
        padding: 10px 14px;
        background: #f5f7fa !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .stmt-notable strong {
        color: #1a1a2e !important;
        font-weight: 700;
    }

}  /* End @media print */


/* ================================================================
   5. STATEMENT MODE — SCREEN VISIBILITY
   Hide the injected statement container on screen.
   Only visible during print via the @media print block above.
   ================================================================ */

#account-statement {
    display: none;
}