#ai-report-generate-btn {
    color: #fff;
}

.ai-report-output {
    line-height: 1.6;
    font-size: 15px;
}

.ai-report-paragraph {
    white-space: pre-wrap;
    margin: 0 0 1rem;
}

.ai-report-heading {
    font-weight: 700;
    font-size: 1.15em;
    margin: 1.5rem 0 0.5rem;
}

.ai-report-heading:first-child {
    margin-top: 0;
}

.ai-report-visual {
    margin: 0.5rem 0 1.5rem;
}

.ai-report-bullet-icon {
    font-size: 1.05em;
    vertical-align: -3px;
    margin-right: 6px;
}

.ai-report-bullet-icon--protect {
    color: #16a34a;
}

.ai-report-bullet-icon--improve {
    color: #d90606;
}

.ai-report-bullet-icon--investigate {
    color: #0d6efd;
}

.ai-report-cache-note {
    font-size: 13px;
    font-style: italic;
    color: #6c757d;
    margin: 0 0 1rem;
}

.ai-report-cursor {
    display: inline-block;
    width: 2px;
    height: 1em;
    background: currentColor;
    margin-left: 2px;
    vertical-align: text-bottom;
    animation: ai-report-blink 1s step-end infinite;
}

@keyframes ai-report-blink {
    50% {
        opacity: 0;
    }
}

/* Printing the page should only print the report card, not the rest of the
   dashboard (nav, sidebar, other charts). d-print-none (Bootstrap) then
   hides the button row within that isolated card. */
@media print {
    /* .main-content wraps the entire dashboard (nav, sidebar content, every
       card) and carries min-height: 100vh in the main stylesheet. Hiding its
       contents with visibility doesn't collapse that height, so without this
       the browser still paginates the full (invisible) page length, leaving
       several blank pages after the one real page of report content.
       .main-content has no `position` of its own, so it isn't the containing
       block for .ai-report-print-area below — collapsing it can't clip the
       report itself. */
    .main-content {
        height: 0 !important;
        min-height: 0 !important;
    }

    body * {
        visibility: hidden;
    }

    .ai-report-print-area,
    .ai-report-print-area * {
        visibility: visible;
    }

    .ai-report-print-area {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
    }

    .ai-report-cursor {
        display: none;
    }

    /* CSS alone can't reliably resize ApexCharts' SVG for print — it bakes
       its own width/height as fixed pixel values, and browsers' print
       engines don't consistently rescale that from a plain CSS override (see
       pharmacy-ai-report.js's beforeprint/afterprint handling, which actually
       fixes the chart size by asking ApexCharts to redraw itself at a
       print-safe width). overflow stays visible so a browser that doesn't
       apply that JS in time shows an oversized chart rather than silently
       losing content off the edge. */
    .ai-report-visual {
        overflow: visible;
        page-break-inside: avoid;
    }

    /* The card itself still stretches to the full page width by default —
       only the chart inside it is resized for print (see
       pharmacy-ai-report.js) — so without this, a narrower chart leaves a
       large empty gap on the right of its card. Shrinking the card to fit
       its content pulls the border in to match. Scoped to the chart cards
       only (not .ai-report-visual generally) so the prescription-sources
       table card, which has no such mismatch, still spans the full width. */
    .ai-report-chart-visual {
        width: fit-content;
        max-width: 100%;
    }
}