/* ============================================================
   Safwan Land - Report Print Stylesheet (A4)
   Rules that apply both on screen and on print, plus an @media
   print block that hides the rest of the dashboard chrome and
   forces a clean, repeatable A4 layout.
   ============================================================ */

/* ---------- Shared (screen + print) ---------- */
.sl-report-page {
    background: var(--sl-surface);
    color: var(--sl-ink);
    font-family: var(--sl-font);
}

.sl-report-summary {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    border: 1.5px solid var(--sl-border);
    border-radius: var(--sl-radius);
    background: linear-gradient(180deg, #ffffff 0%, #faf8f3 100%);
    padding: 14px 18px;
    margin-bottom: 14px;
}
.sl-report-summary .sl-report-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--sl-ink);
    margin: 0 0 4px;
}
.sl-report-summary .sl-report-meta {
    font-size: 12.5px;
    color: var(--sl-ink-soft);
    margin: 0;
}
.sl-report-totals {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}
.sl-report-total {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--sl-bg);
    border: 1px solid var(--sl-border);
    border-radius: var(--sl-radius);
    padding: 8px 14px;
    min-width: 130px;
}
.sl-report-total .sl-report-total-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--sl-ink-soft);
    text-transform: none;
}
.sl-report-total .sl-report-total-value {
    font-size: 16px;
    font-weight: 800;
    color: var(--sl-teal-deep);
}
.sl-report-total.sl-report-total-gold .sl-report-total-value {
    color: var(--sl-gold-deep);
}

/* The repeating print "page" container: rendered as one DOM block per A4 page. */
.sl-report-sheet {
    background: var(--sl-surface);
    border: 1px solid var(--sl-border);
    border-radius: var(--sl-radius);
    padding: 14px 16px;
    margin-bottom: 14px;
}
.sl-report-sheet + .sl-report-sheet { margin-top: 0; }

/* Plain table (no MudTable) so we can fully control print output. */
table.sl-report-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--sl-font);
    font-size: 12.5px;
    color: var(--sl-ink);
}
table.sl-report-table thead th {
    background: linear-gradient(180deg, #1B4541 0%, #143531 100%);
    color: #F4F1E8;
    font-weight: 700;
    font-size: 12px;
    text-align: start;
    padding: 8px 10px;
    border-bottom: 2px solid var(--sl-gold);
}
table.sl-report-table tbody td {
    padding: 8px 10px;
    border-bottom: 1px dashed var(--sl-border);
    vertical-align: middle;
}
table.sl-report-table tbody tr:nth-child(even) td {
    background: rgba(63, 168, 154, 0.04);
}
table.sl-report-table .num { text-align: end; font-variant-numeric: tabular-nums; }

.sl-report-footer-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed var(--sl-border);
    font-size: 11.5px;
    color: var(--sl-ink-soft);
}
.sl-report-footer-meta .sl-report-page-num { font-weight: 700; color: var(--sl-ink); }

/* ---------- Print-only ---------- */
@media print {
    @page {
        size: A4 portrait;
        /* Generous, equal margins so content never sits on the paper edge,
           even on browsers that override @page sizing. */
        margin: 18mm 16mm 18mm 16mm;
    }

    /* Hide the entire dashboard shell. */
    .mud-appbar,
    .mud-drawer,
    .sl-appbar,
    .sl-drawer,
    .sl-report-no-print,
    .mud-snackbar-provider,
    .mud-popover-provider,
    .mud-overlay-provider {
        display: none !important;
        visibility: hidden !important;
    }

    .mud-main-content,
    .mud-layout,
    .mud-container,
    .mud-main-content .mud-container {
        padding: 0 !important;
        margin: 0 !important;
        background: #ffffff !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    body, html {
        background: #ffffff !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    body::before,
    body::after { display: none !important; }

    /* Reveal the report container and apply a defensive inner padding
       so the content stays clear of the paper edge even if the user
       picks "Minimum margins" in the browser print dialog. */
    .sl-report-page {
        display: block !important;
        width: 100%;
        margin: 0;
        padding: 6mm 6mm 6mm 6mm !important;
        background: #ffffff !important;
        box-sizing: border-box;
    }

    /* The summary is shown once at the top of the printed document. */
    .sl-report-summary {
        background: #ffffff !important;
        border: 1.5px solid #555 !important;
        margin: 0 0 6mm !important;
        padding: 6mm 6mm 5mm !important;
        page-break-inside: avoid;
        break-inside: avoid;
    }

    /* Each "sheet" is exactly one printed page (rows fit A4 portrait).
       A small inner padding keeps the table border off the sheet edge. */
    .sl-report-sheet {
        border: none !important;
        border-radius: 0 !important;
        padding: 2mm 2mm !important;
        margin: 0 !important;
        page-break-after: always;
        break-after: page;
        page-break-inside: avoid;
        break-inside: avoid;
    }
    .sl-report-sheet:last-child {
        page-break-after: auto;
        break-after: auto;
    }

    table.sl-report-table {
        font-size: 11px;
        color: #000;
    }
    table.sl-report-table thead {
        display: table-header-group;
    }
    table.sl-report-table thead th {
        background: #143531 !important;
        color: #ffffff !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        padding: 5px 6px !important;
    }
    table.sl-report-table tbody td {
        padding: 5px 6px !important;
        border-bottom: 1px solid #cccccc !important;
        background: #ffffff !important;
    }
    table.sl-report-table tbody tr {
        page-break-inside: avoid;
        break-inside: avoid;
    }

    .sl-report-footer-meta {
        margin-top: 4mm;
        font-size: 10px;
        color: #444;
    }
}