/* ---------- Printable reports (ReportLayout): an A4 sheet on screen, the sheet alone on paper ---------- */

@page {
    size: A4;
    margin: 12mm 10mm 16mm;
}

@page landscape {
    size: A4 landscape;
}

.rpt {
    --rpt-ink: #1E2A38;
    --rpt-soft: #5B6775;
    --rpt-line: #D5DBE3;
    --rpt-band: #F3F5F8;
    max-width: 210mm;
    margin: 16px auto 0;
    padding: 12mm 10mm;
    background: #FFFFFF;
    color: var(--rpt-ink);
    border: 1px solid var(--rpt-line);
    border-radius: var(--ft-radius);
    font: 0.82rem/1.45 var(--ft-font-body);
    color-scheme: light;
}

.rpt--landscape {
    max-width: 297mm;
    page: landscape;
}

/* Header: the FT3M wordmark, the title and what it is of, the report number and date. */
.rpt__head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 3px solid var(--ft-apron);
}

.rpt__brand {
    display: flex;
    flex-direction: column;
    padding: 6px 12px;
    border-radius: var(--ft-radius-sm);
    background: var(--ft-apron);
    color: #FFFFFF;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}

.rpt__wordmark {
    font: 700 1.35rem/1 var(--ft-font-display);
    letter-spacing: 0.08em;
}

.rpt__tagline {
    font-size: 0.62rem;
    letter-spacing: 0.04em;
    opacity: 0.85;
}

.rpt__title h1 {
    margin: 0;
    font: 600 1.3rem var(--ft-font-display);
}

.rpt__title p {
    margin: 2px 0 0;
    color: var(--rpt-soft);
    overflow-wrap: anywhere;
}

.rpt__meta {
    display: grid;
    grid-template-columns: auto auto;
    gap: 2px 10px;
    margin: 0;
    font-size: 0.78rem;
}

.rpt__meta dt {
    color: var(--rpt-soft);
}

.rpt__meta dd {
    margin: 0;
    font-weight: 600;
}

/* Sections: a title bar, then facts, a table or signature blocks. */
.rpt-section {
    margin-top: 14px;
}

.rpt-section__title {
    margin: 0 0 6px;
    padding: 4px 8px;
    border-left: 3px solid var(--ft-altimeter);
    background: var(--rpt-band);
    font: 600 0.92rem var(--ft-font-display);
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
    break-after: avoid;
}

.rpt-section__note {
    margin: 4px 0 0;
    color: var(--rpt-soft);
    font-size: 0.72rem;
}

/* Facts read like a table: the label above, its value under it; a long value takes the whole row. */
.rpt-facts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 6px 16px;
    margin: 0;
}

.rpt-facts__item {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 3px 0;
    border-bottom: 1px dotted var(--rpt-line);
    break-inside: avoid;
}

.rpt-facts__item--wide {
    grid-column: 1 / -1;
}

.rpt-facts dt {
    color: var(--rpt-soft);
    font-size: 0.78em;
}

.rpt-facts dd {
    margin: 0;
    overflow-wrap: anywhere;
    white-space: pre-line;
}

.rpt-table-wrap {
    overflow-x: auto;
}

.rpt-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.74rem;
}

.rpt-table thead {
    display: table-header-group;
}

.rpt-table th {
    padding: 4px 6px;
    background: var(--ft-apron);
    color: #FFFFFF;
    font-weight: 600;
    text-align: left;
    vertical-align: bottom;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}

.rpt-table td {
    padding: 3px 6px;
    border-top: 1px solid var(--rpt-line);
    vertical-align: top;
    overflow-wrap: anywhere;
}

.rpt-table tr {
    break-inside: avoid;
}

/* A row of the same group as the one above (another counter of the same installation): no line between them. */
.rpt-table__continued td {
    border-top-color: transparent;
}

.rpt-table__num {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* A date (with its time) stays on one line; long texts wrap. */
.rpt-table__date {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.rpt-signatures {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.rpt-signature {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 10px;
    border: 1px solid var(--rpt-line);
    border-radius: var(--ft-radius-sm);
    break-inside: avoid;
}

.rpt-signature__role {
    font: 600 0.9rem var(--ft-font-display);
}

.rpt-signature__field small,
.rpt-signature__line small {
    display: block;
    color: var(--rpt-soft);
    font-size: 0.68rem;
}

.rpt-signature__field {
    min-height: 2.2em;
}

.rpt-signature__line {
    min-height: 3.2em;
    border-bottom: 1px solid var(--rpt-ink);
}

@media (max-width: 720px) {
    .rpt {
        padding: 16px;
    }

    .rpt__head {
        grid-template-columns: 1fr;
    }

    .rpt-signatures {
        grid-template-columns: 1fr;
    }
}

/* Paper: only the sheet, black on white, edge to edge within the page margins. */
@media print {
    .topbar,
    .drawer,
    .drawer-backdrop,
    .upload-panel,
    .ph,
    .mud-snackbar-provider,
    .mud-popover-provider,
    .mud-overlay {
        display: none !important;
    }

    html,
    body,
    .shell-main {
        background: #FFFFFF !important;
    }

    .shell-main {
        min-height: 0;
        padding-top: 0;
    }

    .ft-page {
        max-width: none;
        padding: 0;
    }

    .rpt,
    .rpt--landscape {
        max-width: none;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
    }

    .rpt-table-wrap {
        overflow: visible;
    }

    /* The widest tables (the item's service history, 13 columns) fit the landscape page: a smaller type and tighter cells on paper. */
    .rpt-table {
        font-size: 0.68rem;
    }

    .rpt-table th,
    .rpt-table td {
        padding: 2px 4px;
    }
}
