/* Report print pages (Components/Layout/PrintLayout + Components/Shared/PrintReportShell + the *Print.razor pages).
   Plain CSS on purpose: this is paper / PDF, not themed screen UI, so it is black on white whatever the user's
   dark/light mode is, and it uses only logical properties (inline-start/end) so Arabic mirrors for free (the document
   direction comes from <html dir>). Loaded globally from App.razor because the report body is a RenderFragment that
   component-scoped CSS would not reach. */

/* Text shown ONLY when printing - e.g. the applied filters on the on-screen report pages, so a plain Ctrl+P still has
   context. Hidden on screen. */
.print-only {
    display: none;
}

/* The named page the print sheet opts into (`page: prs`), so these margins and the page-number box apply to the print
   pages only and never change how any other page of the app prints. */
@page prs {
    size: A4;
    margin: 12mm 12mm 18mm;
}

/* ---- On screen: grey desk, white A4-ish sheet, toolbar on top ---- */
.prs-root {
    page: prs;
    --prs-ink: #111;
    --prs-muted: #555;
    --prs-line: #c9c9c9;
    --prs-soft: #f3f3f3;
    color-scheme: light;
    min-height: 100vh;
    background: #e6e8eb;
    color: var(--prs-ink);
    padding: 16px;
    box-sizing: border-box;
    font-size: 11pt;
    line-height: 1.35;
}

.prs-toolbar {
    max-width: 210mm;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.prs-toolbar__hint {
    color: #444;
    font-size: 0.85rem;
}

.prs-paper {
    max-width: 210mm;
    margin: 0 auto;
    background: #fff;
    color: var(--prs-ink);
    padding: 12mm;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
    box-sizing: border-box;
}

.prs-message {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 24px 0;
}

.prs-message--error {
    color: #8a1c1c;
}

/* ---- The sheet: one outer table so thead/tfoot repeat on every printed page ---- */
.prs-sheet {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

.prs-sheet > thead { display: table-header-group; }
.prs-sheet > tfoot { display: table-footer-group; }
.prs-sheet > thead > tr > td,
.prs-sheet > tbody > tr > td,
.prs-sheet > tfoot > tr > td {
    padding: 0;
    border: 0;
    vertical-align: top;
    text-align: start;
}

.prs-foot-space {
    height: 2mm;
}

/* ---- Header ---- */
.prs-header {
    border-block-end: 2px solid var(--prs-ink);
    padding-block-end: 3mm;
    margin-block-end: 4mm;
}

.prs-header__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8mm;
}

.prs-brand {
    display: flex;
    align-items: center;
    gap: 4mm;
    min-width: 0;
}

.prs-logo {
    height: 18mm;
    width: auto;
    max-width: 40mm;
    object-fit: contain;
    flex: none;
}

.prs-school {
    font-size: 21pt;
    font-weight: 700;
    line-height: 1.15;
    color: var(--prs-ink);
    overflow-wrap: anywhere;
}

.prs-title {
    margin: 1mm 0 0;
    font-size: 13.5pt;
    font-weight: 600;
    line-height: 1.25;
    color: var(--prs-muted);
}

.prs-meta {
    margin: 0;
    font-size: 9pt;
    text-align: end;
    flex: none;
}

.prs-meta > div + div {
    margin-block-start: 1mm;
}

.prs-meta dt {
    color: var(--prs-muted);
    display: inline;
}

.prs-meta dt::after {
    content: ": ";
}

.prs-meta dd {
    display: inline;
    margin: 0;
    font-weight: 600;
}

.prs-filters {
    margin-block-start: 3mm;
    padding: 2mm 3mm;
    background: var(--prs-soft);
    border: 1px solid var(--prs-line);
    border-radius: 2mm;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.prs-filters__title {
    font-size: 8pt;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--prs-muted);
    margin-block-end: 1mm;
}

.prs-filters__list {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1mm 8mm;
    font-size: 9.5pt;
}

.prs-filters__list dt {
    display: inline;
    color: var(--prs-muted);
}

.prs-filters__list dt::after {
    content: ": ";
}

.prs-filters__list dd {
    display: inline;
    margin: 0;
    font-weight: 600;
}

/* ---- Body building blocks ---- */
.prs-section-title {
    font-size: 12pt;
    font-weight: 700;
    margin: 4mm 0 2mm;
    break-after: avoid;
}

.prs-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(32mm, 1fr));
    gap: 2mm;
    margin-block-end: 3mm;
}

.prs-stat {
    border: 1px solid var(--prs-line);
    border-radius: 2mm;
    padding: 2mm 3mm;
    break-inside: avoid;
}

.prs-stat__label {
    font-size: 8.5pt;
    color: var(--prs-muted);
}

.prs-stat__value {
    font-size: 15pt;
    font-weight: 700;
    line-height: 1.2;
}

.prs-stat__detail {
    font-size: 8pt;
    color: var(--prs-muted);
}

.prs-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5mm;
    margin-block-end: 3mm;
    font-size: 9pt;
}

.prs-chip {
    border: 1px solid var(--prs-line);
    border-radius: 3mm;
    padding: 0.5mm 2.5mm;
    break-inside: avoid;
}

.prs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 9.5pt;
}

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

.prs-table th,
.prs-table td {
    border-block-end: 1px solid var(--prs-line);
    padding: 1.4mm 2mm;
    text-align: start;
    vertical-align: top;
}

.prs-table th {
    background: var(--prs-soft);
    border-block-start: 1px solid var(--prs-ink);
    border-block-end: 1px solid var(--prs-ink);
    font-weight: 700;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

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

.prs-table .prs-num {
    text-align: end;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.prs-table .prs-narrow {
    width: 9mm;
    white-space: nowrap;
}

/* Horizontal data bar (the printable stand-in for the on-screen bar chart: pure CSS, so it prints exactly as drawn). */
.prs-bar {
    display: block;
    height: 3.2mm;
    min-width: 0.6mm;
    background: #555;
    border-radius: 0.8mm;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.prs-bar-cell {
    width: 28mm;
}

.prs-note {
    margin-block-start: 4mm;
    font-size: 8.5pt;
    color: var(--prs-muted);
}

.prs-empty {
    padding: 6mm 0;
    color: var(--prs-muted);
}

/* ---- Printing: just the sheet, black on white ---- */
@media print {
    .print-only {
        display: block;
    }

    html,
    body {
        background: #fff !important;
        color: #000 !important;
    }

    .prs-root {
        background: #fff;
        padding: 0;
        min-height: 0;
        font-size: 10.5pt;
    }

    .prs-paper {
        max-width: none;
        margin: 0;
        padding: 0;
        box-shadow: none;
    }

    /* A short report still puts the footer line at the bottom of its page: the table is at least one page content-area tall
       (A4 297mm minus the 12mm and 18mm page margins, less a hair so it never spills onto a second page). */
    .prs-sheet {
        height: 265mm;
    }

    .prs-toolbar,
    .no-print,
    #blazor-error-ui,
    #components-reconnect-modal {
        display: none !important;
    }
}

/* The print-only filter line on the ON-SCREEN report pages (Ctrl+P fallback). */
.prs-inline-filters {
    margin: 0 0 4mm;
    padding: 2mm 3mm;
    border: 1px solid #999;
    border-radius: 2mm;
    font-size: 10pt;
    color: #000;
}

.prs-inline-filters b {
    font-weight: 700;
}

.prs-inline-filters span + span::before {
    content: " \00b7  ";
}

/* ---- Footer: logo mark + wordmark + copyright, one line ---- */
.prs-footer {
    break-inside: avoid;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.5mm;
    flex-wrap: nowrap;
    white-space: nowrap;
    margin-block-start: 4mm;
    padding-block-start: 2mm;
    border-block-start: 1px solid var(--prs-line);
    font-size: 8.5pt;
    color: var(--prs-muted);
}

.prs-footer__logo {
    height: 6mm;
    width: auto;
}

.prs-footer__wordmark {
    font-size: 9.5pt;
    color: #581c87;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}


.prs-count {
    margin-block-end: 2mm;
    font-size: 9pt;
    color: var(--prs-muted);
}