/* ═══════════════════════════════════════════════════════════════
   Formulize — Print Report Styles
   Used both for the in-dialog preview and for the print window.
   ═══════════════════════════════════════════════════════════════ */

/* ── Preview container (inside the dialog) ───────────────────── */

.print-preview {
    font-family: 'Roboto', Arial, sans-serif;
    font-size: 13px;
    color: #1a1a1a;
    width: 100%;
    color-scheme: light;
}

.print-page {
    display: block; /* explicit reset — compact mode overrides to grid */
    background: white;
    width: 210mm;
    min-height: 297mm;
    margin: 0 auto 24px auto;
    padding: 15mm 15mm 20mm 15mm;
    box-shadow: 0 2px 10px rgba(0,0,0,0.25);
    box-sizing: border-box;
    position: relative;
}

/* ── Compact mode ────────────────────────────────────────────── */

/*
 * 2-column grid on the page container.
 * - Header and every .print-section default to grid-column: 1 / -1  (full width).
 * - Only .print-chart-section spans a single column, so two consecutive
 *   chart sections share one row without affecting anything else.
 * - Content *inside* each grid item (tables, graphics, headers) renders
 *   exactly as in non-compact mode — no flex/width interference.
 */
.print-compact .print-page {
    padding: 10mm;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 4mm;
    align-items: start;
    align-content: start;
}

.print-compact .print-header,
.print-compact .print-section {
    grid-column: 1 / -1;
}

.print-compact .print-section.print-chart-section,
.print-compact .print-section.print-graphic-section {
    grid-column: span 1;
}

.print-compact .print-table {
    font-size: 10px;
}

.print-compact .print-header {
    margin-bottom: 4px;
}

.print-compact .print-header-rule {
    margin: 2px 0 4px 0;
}

.print-compact .print-header-calc-row {
    margin-top: 2px;
    font-size: 11px;
}

.print-compact .print-section {
    margin-bottom: 6px;
}

.print-compact .print-section-title {
    font-size: 11px;
    margin-bottom: 2px;
}

/* ── Page header ─────────────────────────────────────────────── */

.print-header {
    margin-bottom: 14px;
}

.print-header-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #aaa;
    font-size: 11px;
    table-layout: fixed;
}

.print-header-table td {
    padding: 3px 7px;
    border: 1px solid #ccc;
    vertical-align: middle;
    word-break: break-word;
}

.print-label {
    font-weight: 600;
    white-space: nowrap;
    width: 70px;
    color: #333;
}

.print-header-logo {
    text-align: center;
    width: 130px;
    padding: 4px !important;
    border-left: 1.5px solid #aaa !important;
}

.print-header-logo img {
    max-width: 120px;
    max-height: 75px;
    object-fit: contain;
}

.print-header-calc-row {
    margin-top: 5px;
    font-size: 12px;
}

.print-header-rule {
    border: none;
    border-top: 1.5px solid #333;
    margin: 6px 0 12px 0;
}

/* ── Section wrapper ─────────────────────────────────────────── */

.print-section {
    margin-bottom: 18px;
    page-break-inside: avoid;
}

.print-section-title {
    font-size: 12.5px;
    font-weight: 600;
    margin: 0 0 4px 0;
    padding-bottom: 2px;
    border-bottom: 1px solid #888;
    color: #222;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.print-table-badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 3px;
    letter-spacing: 0.4px;
    color: white;
    white-space: nowrap;
    flex-shrink: 0;
}

.print-table-badge-pass    { background: #2e7d32; }
.print-table-badge-warning { background: #e65100; }
.print-table-badge-fail    { background: #b71c1c; }

/* ── Result table ────────────────────────────────────────────── */

.print-table-wrapper {
    width: 100%;
    border: 2px solid #888;
}

.print-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11.5px;
}

.print-table th {
    background: #eeeeee;
    padding: 4px 6px;
    border: 1px solid #bbb;
    font-weight: 600;
    text-align: left;
    color: #111;
}

.print-table td {
    padding: 3px 6px;
    border: 1px solid #e0e0e0;
    vertical-align: middle;
}

.print-table tr:nth-child(even) td {
    background: #fafafa;
}

/* Group start: thick top border on each data row */
.print-data-row td {
    border-top: 2px solid #888 !important;
}

/* Remove separators between equation rows and between message rows */
.print-eq-row td,
.print-msg-row td {
    border-top: none !important;
    border-bottom: none !important;
}

/* Group end: thick bottom border on last row of each group (must come after eq/msg rules) */
.print-group-end td {
    border-bottom: 2px solid #888 !important;
}

/* Column widths for result tables */
.print-th-desc   { width: 36%; }
.print-th-sym    { width: 12%; text-align: center; }
.print-th-val    { width: 12%; text-align: center; }
.print-th-unit   { width: 10%; text-align: center; }
.print-th-ref    { width: 10%; text-align: center; }
.print-th-status { width: 8%;  text-align: center; }

.print-td-center { text-align: center; }
.print-td-pass   { text-align: center; color: #1b5e20; font-weight: 600; }
.print-td-fail   { text-align: center; color: #b71c1c; font-weight: 600; }

/* ── Equation rows ───────────────────────────────────────────── */

.print-eq-row td {
    background: #f5f5f5 !important;
    font-size: 10.5px;
    padding: 1px 10px;
    color: #555;
    border-top: none !important;
    font-style: italic;
}

.print-eq-result td {
    background: #eef4fb !important;
    font-style: normal;
    font-weight: 500;
    color: #1a1a1a;
}

.print-eq-symbol {
    font-weight: 600;
    font-style: normal;
    font-family: 'Courier New', monospace;
}

.print-eq-equals {
    font-style: normal;
    color: #555;
    margin: 0 2px;
}

.print-eq-text {
    font-family: 'Courier New', monospace;
}

.print-eq-comparison {
    color: #555;
    margin-left: 6px;
}

.print-eq-pass {
    color: #1b5e20;
    font-weight: 700;
    margin-left: 6px;
}

.print-eq-fail {
    color: #b71c1c;
    font-weight: 700;
    margin-left: 6px;
}

/* ── Message rows (Info / Warning / Error) ───────────────────── */

.print-msg-row td {
    font-size: 10px;
    padding: 2px 10px;
    border-top: none !important;
}

.print-msg-info td    { background: #e8f5e9 !important; color: #1b5e20; }
.print-msg-warning td { background: #fff8e1 !important; color: #e65100; }
.print-msg-error td   { background: #ffebee !important; color: #b71c1c; }

.print-msg-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 1px 5px;
    border-radius: 3px;
    margin-right: 6px;
    letter-spacing: 0.5px;
}

.print-msg-info    .print-msg-badge { background: #2e7d32; color: white; }
.print-msg-warning .print-msg-badge { background: #e65100; color: white; }
.print-msg-error   .print-msg-badge { background: #b71c1c; color: white; }

/* ── Watermark ───────────────────────────────────────────────── */

.print-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    pointer-events: none;
    user-select: none;
    z-index: 10;
}

.print-watermark-main {
    display: block;
    font-size: 208px;
    font-weight: 900;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: rgba(200, 0, 0, 0.12);
    white-space: nowrap;
    line-height: 1;
}

.print-watermark-sub {
    display: block;
    font-size: 42px;
    font-weight: 900;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(200, 0, 0, 0.12);
    white-space: nowrap;
    line-height: 1;
    margin-top: 8px;
    text-align: center;
}

/* ── Copyright footer ───────────────────────────────────────── */

.print-page-copyright {
    position: absolute;
    bottom: 5mm;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 9px;
    color: #999;
}

/* ── Charts and graphics ─────────────────────────────────────── */

.print-chart-container,
.print-graphic-container,
.print-custom-container {
    width: 100%;
    page-break-inside: avoid;
}

/* SVG engineering graphics: always render with black-on-white in print context,
   regardless of dark mode. The invert filter applied by .mud-dark breaks print. */
.print-preview .calc-svg-graphic {
    filter: none !important;
    background: white;
}

/* ── ApexCharts legend ────────────────────────────────────────── */

/* ApexCharts' own CSS is not loaded in the print popup, so its
   position:relative on .apexcharts-canvas is absent. Without it the
   legend's position:absolute resolves against a distant ancestor and
   the legend floats to the wrong place. Restore it globally here. */
.apexcharts-canvas {
    position: relative;
}

/* ═══════════════════════════════════════════════════════════════
   @page  —  A4 paper size; margins are handled by .print-page padding
   ═══════════════════════════════════════════════════════════════ */

@page {
    size: A4 portrait;
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
   @media print  —  applied only when sent to printer / PDF
   ═══════════════════════════════════════════════════════════════ */

@media print {
    body.print-body {
        margin: 0;
        padding: 0;
        background: white;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Each page div is exactly 297mm tall (set via inline style in buildPages).
       We rely on natural CSS flow rather than page-break-after: because when a
       297mm div already fills the page exactly, page-break-after:always fires a
       second break at the same boundary and produces a blank page between every
       real page. With break-inside:avoid the browser keeps each div intact and
       the next 297mm div naturally starts at the top of the next sheet. */
    .print-page {
        box-shadow: none;
        margin: 0 auto;
        width: 210mm;
        padding: 15mm 15mm 20mm 15mm;
        box-sizing: border-box;
        overflow: hidden;
        break-inside: avoid;
        position: relative;
    }

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

    .print-section-title {
        page-break-after: avoid;
        break-after: avoid;
    }

    .print-chart-container,
    .print-graphic-container,
    .print-custom-container {
        page-break-inside: avoid;
        break-inside: avoid;
    }

    .print-table thead {
        display: table-header-group;
    }

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

    .print-table th {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .print-td-pass,
    .print-td-fail {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .calc-svg-graphic {
        filter: none !important;
        background: white;
    }

    /* ── Compact mode: fully continuous flow ─────────────────────
       Every break-inside/avoid rule set above for normal mode must be
       explicitly undone here so the browser paginates naturally, filling
       each printer sheet without forced gaps or jumps.
       The rigid 297mm-per-page-div structure is non-compact only. */

    .print-compact .print-page {
        min-height: 0;
        overflow: visible;
        break-inside: auto;
        page-break-inside: auto;
    }

    .print-compact .print-section {
        break-inside: auto;
        page-break-inside: auto;
    }

    .print-compact .print-section-title {
        break-after: auto;
        page-break-after: auto;
    }

    .print-compact .print-chart-container,
    .print-compact .print-graphic-container,
    .print-compact .print-custom-container {
        break-inside: auto;
        page-break-inside: auto;
    }

    .print-compact .print-table tr {
        break-inside: auto;
        page-break-inside: auto;
    }

    .print-watermark {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* The legend's absolute pixel positions were calculated at screen resolution
       and shift when the browser scales content for the paper. Switch to
       relative flow so it always sits below the chart SVG, centred, regardless
       of print scaling. Applies to every ApexCharts chart on every calc. */
    .apexcharts-legend {
        position: relative !important;
        bottom: auto !important;
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        display: flex !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        padding: 4px 0 !important;
    }
}