/* n-epi — Print Stylesheet */
@media print {
    /* Neutralise the dark theme for print: redefine the design tokens so any
       element coloured via a CSS variable prints as dark text on white paper
       (the app boots data-theme="dark", so this is the default print path). */
    :root,
    html[data-theme="dark"],
    html[data-theme="light"] {
        --bg-base: #fff;
        --bg-surface: #fff;
        --bg-elevated: #f5f5f5;
        --bg-hover: #eee;
        --text-primary: #000;
        --text-secondary: #222;
        --text-tertiary: #444;
        --accent: #0b5b6b;
        --accent-muted: #e6f6f9;
        --border: #ccc;
        --border-strong: #999;
    }

    body {
        background: white;
        color: #000;
        font-size: 11pt;
        line-height: 1.5;
    }

    /* Hide interactive elements */
    .sidebar,
    .mobile-nav,
    .mobile-header,
    .sidebar-overlay,
    .skip-link,
    .btn,
    .r-script-btn,
    .theme-toggle,
    .chart-actions,
    .preset-group,
    .filter-tags,
    .search-box,
    .ne-toast,
    .cmd-palette-overlay,
    .shortcuts-modal-overlay,
    .breadcrumb,
    .module-footer,
    .r-script-overlay,
    .sidebar-fav-star,
    .tabs,
    .expandable-header,
    .copy-btn {
        display: none !important;
    }

    /* Show expandable content */
    .expandable-body,
    .learn-body {
        display: block !important;
        max-height: none !important;
    }

    .main-content {
        margin-left: 0;
        padding: 0;
        max-width: 100%;
    }

    .app-layout {
        display: block;
    }

    /* Cards */
    .card {
        box-shadow: none;
        border: 1px solid #ccc;
        page-break-inside: avoid;
        margin-bottom: 12pt;
        padding: 10pt;
    }

    .card-title {
        color: #000;
        font-size: 12pt;
        border-bottom: 1px solid #999;
        padding-bottom: 4pt;
        margin-bottom: 8pt;
    }

    /* Results */
    .result-panel {
        border-left: 3px solid #000;
        background: #f5f5f5;
        page-break-inside: avoid;
        padding: 8pt;
    }

    .result-value {
        color: #000;
        font-size: 16pt;
    }

    .result-grid {
        page-break-inside: avoid;
    }

    .result-item {
        border: 1px solid #ddd;
        background: #fafafa;
    }

    /* Tables */
    .data-table {
        font-size: 9pt;
        page-break-inside: auto;
    }

    .data-table th,
    .data-table td {
        border: 1px solid #ccc;
        padding: 3pt 6pt;
    }

    .data-table th {
        background: #eee !important;
        color: #000 !important;
    }

    .data-table tr {
        page-break-inside: avoid;
    }

    /* Charts — force a light backing and print the raster so charts aren't
       dropped as ink-heavy dark rectangles. (A full light re-render of the
       canvas pixels requires a beforeprint JS hook; this is the CSS fallback.) */
    canvas {
        max-width: 100%;
        page-break-inside: avoid;
        background: #fff !important;
        border: 1px solid #ccc;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .chart-container {
        page-break-inside: avoid;
        margin: 8pt 0;
    }

    /* Links */
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }

    /* Headers */
    .module-header h1 {
        color: #000;
        border-bottom: 2px solid #000;
        padding-bottom: 6pt;
        font-size: 16pt;
    }

    .module-header .module-subtitle {
        color: #333;
    }

    /* Form elements (read-only print) — force dark text so entered values
       (e.g. the diagnostic 2x2 counts and sample-size inputs) are legible. */
    .form-input, .form-select, textarea.form-input,
    .table-2x2 input, input, select, textarea {
        color: #000 !important;
        background: #fff !important;
        border: 1px solid #999 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Accent-coloured result values would be near-invisible cyan on white. */
    .result-item-value, .result-value--small,
    .trial-card-name {
        color: #000 !important;
    }

    /* Text outputs */
    .text-output {
        border: 1px solid #ddd;
        background: #f9f9f9;
        font-size: 10pt;
    }

    /* Page breaks */
    h1, h2, h3 {
        page-break-after: avoid;
    }

    .result-panel, .card {
        page-break-before: auto;
    }

    /* Footer */
    @page {
        margin: 1.5cm;
        @bottom-center {
            content: "n-epi — rkalani1.github.io/n-epi";
            font-size: 8pt;
            color: #999;
        }
    }
}