body {
    background-color: #f7f7f9;
}

.card {
    border: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Drag-and-drop file upload zone — used on /documents and questionnaire
   file_upload questions. */
.dropzone {
    border: 2px dashed #ced4da;
    border-radius: 0.5rem;
    padding: 1.25rem;
    text-align: center;
    background: #fbfbfd;
    color: #6c757d;
    cursor: pointer;
    transition: border-color 120ms, background-color 120ms;
}
.dropzone:hover, .dropzone:focus-within {
    border-color: #0d6efd;
    background: #f1f6ff;
}
.dropzone.is-dragover {
    border-color: #0d6efd;
    background: #e7f1ff;
    color: #0d6efd;
}
.dropzone.is-busy {
    pointer-events: none;
    opacity: 0.7;
}
.dropzone[aria-disabled="true"] {
    pointer-events: none;
    background: #f1f3f5;
    color: #adb5bd;
}
.dropzone-input {
    /* Visually hidden but still focusable / clickable via the label. */
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}
.dropzone-files {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0 0;
    text-align: left;
}
.dropzone-files li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 0.25rem;
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
}
.dropzone-files li .ds-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropzone-files li .ds-state { font-size: 0.75rem; color: #6c757d; }
.dropzone-files li.is-error { border-color: #dc3545; color: #dc3545; }
.dropzone-files li.is-done { border-color: #198754; }

/* ──────────────────────────────────────────────────────────────────────────
   Fund analytics workspace (fund_analytics.html). Report-card pattern is
   used for every chart in the four report sections; the goal is a layout
   that renders cleanly both on-screen (Bootstrap container) and in a
   print-stylesheet view that becomes the HTML/PDF report export.
   ────────────────────────────────────────────────────────────────────── */

.creo-analytics__header {
    background: #fff;
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.creo-analytics__nav {
    gap: 0.25rem;
    position: sticky;
    top: 0;
    z-index: 10;
    background: #fff;
}
.creo-analytics__nav .nav-link {
    font-size: 0.875rem;
    padding: 0.25rem 0.75rem;
}

.creo-cohort-n {
    background: #f1f5f9;
    border-radius: 0.375rem;
    padding: 0.25rem 0.75rem;
    min-width: 64px;
    text-align: center;
}
.creo-cohort-n__value {
    font-weight: 600;
    color: #0f172a;
}
/* Below-min-n: cohort is too small to display meaningful distributions.
   The per-card Phase 2 work will read this from the cohort event. */
.creo-cohort-n--low {
    background: #fef3c7;
}
.creo-cohort-n--low .creo-cohort-n__value {
    color: #92400e;
}

/* Summary Quartile Table (§1.1, Slide 3). Compact rows; tabular numerals
   keep the percentile / value columns aligned. */
.creo-quartile-table {
    font-size: 0.875rem;
}
.creo-quartile-table thead th {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid #e2e8f0;
}
.creo-quartile-table td,
.creo-quartile-table th {
    font-variant-numeric: tabular-nums;
}

.creo-section {
    margin: 2rem 0 1rem;
    scroll-margin-top: 4rem;
}
.creo-section__head {
    margin-bottom: 0.75rem;
}
.creo-section__grid {
    display: grid;
    /* Two cards per row on desktop — wide enough that Apex/D3 axes don't
       collide with adjacent charts. minmax(0, 1fr) is the standard trick
       to let grid items shrink below their intrinsic content width
       (otherwise long axis labels can push a column wider than 50%).
       Falls back to a single column below 900px. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
@media (max-width: 900px) {
    .creo-section__grid {
        grid-template-columns: 1fr;
    }
}

.creo-card {
    background: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    min-height: 320px;
}
.creo-card--placeholder {
    border: 1px dashed #cbd5e1;
    background: #fbfbfd;
    box-shadow: none;
    min-height: 120px;
}
.creo-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.75rem;
}
.creo-card__title-wrap { min-width: 0; flex: 1; }
.creo-card__title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #0f172a;
}
.creo-card__commentary {
    font-size: 0.8125rem;
    color: #64748b;
    margin-top: 0.25rem;
    line-height: 1.35;
}
.creo-card__controls {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.creo-card__dim {
    display: flex;
    flex-direction: column;
    font-size: 0.75rem;
    color: #64748b;
    gap: 0.125rem;
}
.creo-card__dim .form-select-sm { font-size: 0.8125rem; }
.creo-card__body {
    flex: 1;
    min-height: 0;
    /* ApexCharts measures its parent — give it a clean stacking context so
       the SVG fills the body without colliding with the header. */
    position: relative;
}

/* Report header — hidden on screen, only rendered when printing. JS
   populates the fund/cohort/n fields just before window.print() fires so
   the values reflect what's currently on screen. */
.creo-report-header {
    display: none;
}
.creo-report-header__title {
    font-size: 0.8125rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.25rem;
}
.creo-report-header__fund {
    font-size: 1.6rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.1;
}
.creo-report-header__cohort {
    color: #334155;
    margin-top: 0.5rem;
    font-size: 0.95rem;
}
.creo-report-header__meta {
    color: #64748b;
    font-size: 0.8125rem;
    margin-top: 0.25rem;
}

/* Bootstrap-style utility — hide a node only when printing. Used on the
   Export button and any other action that doesn't belong on paper. */
@media print {
    .d-print-none { display: none !important; }
}

/* Print stylesheet — drives the HTML/PDF report export. The user hits
   the "Export report ⤓" button, the workspace's JS stamps the print
   header with the current cohort, then calls window.print(). The user
   picks "Save as PDF" (or a real printer) from there.
   ---
   Layout rules:
   - Single-column grid so every card fills the page width
   - Cards are page-break-safe (won't be cut across pages)
   - Section dividers force a new page for each report section
   - All interactive chrome (navbar, dropdowns, action buttons, CSV
     download buttons) is hidden
   - Apex/D3 charts render to SVG inline so they print at full quality */
@page {
    size: A4 portrait;
    margin: 14mm 12mm;
}
@media print {
    /* Strip interactive chrome. */
    .navbar,
    .creo-analytics__nav,
    .creo-card__controls,
    .creo-cohort-n,
    #fa-actions,
    .impersonation-banner {
        display: none !important;
    }
    /* The cohort selector dropdowns make no sense on paper — hide the
       whole row. The report header (shown above) carries the cohort
       spec in readable form. */
    .creo-analytics__header > div > .d-flex.align-items-end {
        display: none !important;
    }
    /* The fund-identity block at the top of the workspace becomes
       redundant once the print header is showing — collapse it. */
    .creo-analytics__header { display: none !important; }
    /* Show the print-only report header instead. */
    .creo-report-header {
        display: block !important;
        padding-bottom: 1rem;
        margin-bottom: 1rem;
        border-bottom: 2px solid #0f172a;
    }
    /* Reset page background so PDFs don't get a tinted body. */
    body, .creo-analytics, main {
        background: #fff !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    /* Page-break behavior. One section per page; cards stay intact. */
    .creo-section {
        page-break-before: always;
        margin-top: 0;
    }
    .creo-section:first-of-type {
        page-break-before: avoid;
    }
    .creo-section__head {
        margin-bottom: 0.5rem;
    }
    .creo-section__head h2 {
        font-size: 1.2rem;
        color: #0f172a;
    }
    /* Single-column layout — full-width cards print larger and more
       legibly. Override the screen-mode 2-column grid. */
    .creo-section__grid {
        grid-template-columns: 1fr !important;
        gap: 0.4rem !important;
    }
    .creo-card {
        page-break-inside: avoid;
        break-inside: avoid;
        box-shadow: none !important;
        border: 1px solid #cbd5e1 !important;
        padding: 0.5rem 0.75rem !important;
        margin-bottom: 0.25rem !important;
        min-height: 0 !important;
    }
    .creo-card__title {
        font-size: 0.95rem;
    }
    .creo-card__commentary {
        font-size: 0.8125rem;
    }
    .creo-card__body {
        margin-top: 0.25rem;
    }
    /* Apex tooltips can stick around as floating divs after a hover —
       force them invisible when printing. */
    .apexcharts-tooltip,
    .apexcharts-xaxistooltip,
    .apexcharts-yaxistooltip { display: none !important; }
}