{{-- Shared by the admin Reports preview and the teacher schedule viewer so both render the same Class Program / Teachers Individual Program. --}}
<style>
/* Overrides Bootstrap's --bs-table-border-color (a very light gray by
   default), same treatment as the Scheduling grid, so the report's grid
   lines read clearly against the white cells and print legibly. */
.report-table {
    --bs-table-border-color: #334155;
}

.report-table th,
.report-table td {
    vertical-align: middle;
}

.break-cell {
    background: #fef9c3;
    color: #854d0e;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-size: 0.8rem;
}
/* Compact on-screen tables only; print keeps the full-size layout. */
@media screen {
    .report-card .report-table > :not(caption) > * > * {
        padding: 0.3rem 0.5rem;
        font-size: 0.82rem;
    }

    .report-card .report-table .class-program-subhead,
    .report-card .report-table .time-duration {
        font-size: 0.68rem;
    }

    .report-card .class-program-letterhead {
        margin-bottom: 8px;
    }

    .report-card .class-program-logo {
        width: 72px;
        height: 72px;
    }
}

.time-duration {
    font-size: 0.72rem;
    font-weight: 400;
    color: #6b7280;
}

.class-program-letterhead {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    text-align: center;
    margin-bottom: 16px;
}

.class-program-logo {
    width: 90px;
    height: 90px;
    object-fit: contain;
    flex-shrink: 0;
}

.class-program-letterhead-text {
    line-height: 1.3;
}

.class-program-title {
    letter-spacing: 0.35em;
}

.class-program-subhead {
    font-size: 0.68rem;
    font-weight: 600;
    color: #6b7280;
    text-align: center;
    text-transform: uppercase;
}

.class-program-totals-row th {
    background: #f1f5f9;
    text-align: center;
}

/* Matches the reference Teachers Individual Program's maroon/red title. */
.teacher-program-title {
    color: #b91c1c;
    letter-spacing: 0.15em;
}

.teacher-program-meta {
    border-top: 1px solid #111827;
    border-bottom: 1px solid #111827;
    padding: 6px 2px;
}

/* One flat tint for every occupied cell (not the per-subject rainbow the
   Class Program uses) - the reference Teachers Individual Program marks
   "this slot is taken" the same way regardless of subject, since the
   whole page is already scoped to one teacher. */
.teacher-program-cell {
    background: #fdf1d8;
}

/* Active school year/term line under every printable program. */
.report-footer {
    margin-top: 16px;
    text-align: center;
    font-size: 0.75rem;
    color: #9ca3af;
}

/* Signature line under the Teachers Individual Program (print/PDF/Excel
   only): the teacher signs over their printed, underlined name. */
.signature-block {
    display: flex;
    justify-content: space-between;
    gap: 48px;
    margin-top: 32px;
    padding: 0 24px;
    break-inside: avoid;
    page-break-inside: avoid;
}

.signature-block.is-single {
    justify-content: flex-end;
}

.signature-entry {
    min-width: 260px;
    text-align: center;
}

/* "Prepared by:" / "Approved by:" sits above the space left for signing. */
.signature-caption {
    text-align: left;
    font-size: 0.8rem;
    margin-bottom: 36px;
}

.signature-name {
    font-weight: 700;
    text-transform: uppercase;
    padding: 0 12px 2px;
    border-bottom: 1px solid #111827;
}

.signature-label {
    font-size: 0.8rem;
    margin-top: 2px;
}

/* Print: only the report itself (letterhead, title, table, signature,
   footer) - never the sidebar, topbar, report tabs or filters. Those are
   removed from the flow (display: none) rather than just made invisible,
   so the report starts at the top of page 1 and long tables paginate
   normally instead of leaving blank pages or being cut after page 1.
   Landscape because the Class Program's per-day Subject/Teacher columns
   make it far wider than tall. */
@media print {
    @page {
        size: A4 landscape;
        margin: 10mm 10mm 12mm;
    }

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

    * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .sidebar,
    .sidebar-overlay,
    .topbar,
    .no-print,
    .toast-container,
    .modal,
    .modal-backdrop {
        display: none !important;
    }

    .main-content {
        margin-left: 0 !important;
    }

    .page-wrapper,
    .report-card > .card-body {
        padding: 0 !important;
    }

    .content-card,
    .report-card {
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    .printable-report {
        color: #000;
        font-size: 10pt;
    }

    /* Wide tables must not be clipped by the on-screen scroll wrapper. */
    .printable-report .table-responsive {
        overflow: visible !important;
    }

    .printable-report .report-table {
        width: 100%;
        margin-bottom: 8px;
    }

    .printable-report .report-table > :not(caption) > * > * {
        padding: 3px 5px;
        font-size: 9pt;
    }

    /* 15 columns: smaller type so a full week fits one landscape page. */
    #printableClassProgram .report-table > :not(caption) > * > * {
        padding: 2px 3px;
        font-size: 7.5pt;
    }

    #printableClassProgram .class-program-subhead,
    #printableClassProgram .time-duration {
        font-size: 6.5pt;
    }

    .printable-report thead {
        display: table-header-group;
    }

    /* Totals print once, after the last row - not on every page. */
    .printable-report tfoot {
        display: table-row-group;
    }

    .printable-report tr,
    .printable-report .alert {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .printable-report h6 {
        break-after: avoid;
        page-break-after: avoid;
    }

    .class-program-letterhead {
        margin-bottom: 8px;
    }

    .class-program-logo {
        width: 64px;
        height: 64px;
    }

    .report-footer {
        margin-top: 12px;
        color: #6b7280;
    }

    .signature-label,
    .signature-caption {
        font-size: 9pt;
    }
}

.empty-state {
    border: 1px dashed #d1d5db;
    border-radius: 10px;
    padding: 18px 16px;
    font-size: 0.875rem;
    text-align: center;
    color: #6b7280;
    background: #f9fafb;
}
</style>