{{-- Gaya cetak "modern profesional" yang dipakai SEMUA dokumen cetak FK.
     Pastikan konsisten: kartu kertas, kop resmi, tabel header biru, zebra striping.
     Parameter opsional: $printOrientation = 'portrait' (default) | 'landscape'. --}}
@php $printOrientation = $printOrientation ?? 'portrait'; @endphp
<style>
    * { box-sizing: border-box; }
    :root {
        --ink: #0f172a;
        --navy: #1e3a8a;
        --blue: #1d4ed8;
        --head: #1769d2;
        --line: #dbe3ee;
        --muted: #64748b;
    }
    body { margin: 0; padding: 22px; background: #eef2f7; color: var(--ink); font: 10pt/1.5 "Segoe UI", Inter, Arial, sans-serif; }
    .paper { max-width: 1100px; margin: 0 auto; padding: 34px 40px; background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; box-shadow: 0 12px 34px rgb(15 23 42 / 8%); }

    h1, .doc-title { margin: 18px 0 4px; color: var(--navy); font-size: 15pt; font-weight: 800; line-height: 1.35; text-align: center; text-transform: uppercase; letter-spacing: .02em; }
    .subtitle { margin: 0 0 6px; text-align: center; color: var(--muted); font-size: 11pt; }
    .doc-rule { width: 72px; height: 3px; margin: 8px auto 20px; background: var(--blue); border-radius: 2px; }

    .details { width: 100%; margin-bottom: 18px; border: 1px solid var(--line); border-radius: 12px; border-collapse: separate; border-spacing: 0; overflow: hidden; }
    .details td { padding: 7px 12px; border-bottom: 1px solid #eef2f7; vertical-align: top; }
    .details tr:last-child td { border-bottom: 0; }
    .details td:first-child { width: 150px; color: #475569; font-weight: 600; }
    .details td:nth-child(2) { width: 14px; color: var(--muted); }
    /* Varian 2 kolom: label-nilai bersebelahan (Nama kegiatan | Waktu, Hari,Tanggal | Tempat). */
    .details--2col td:nth-child(1) { width: 120px; }
    .details--2col td:nth-child(2) { width: 12px; }
    .details--2col td:nth-child(3) { width: 34%; }
    .details--2col td:nth-child(4) { width: 100px; color: #475569; font-weight: 600; padding-left: 18px; }
    .details--2col td:nth-child(5) { width: 12px; color: var(--muted); }

    .formtable, .attendance, .rab, .data-table { width: 100%; border: 1px solid var(--line); border-collapse: separate; border-spacing: 0; overflow: hidden; border-radius: 10px; }
    .formtable th, .attendance th, .rab th, .data-table th { background: var(--head); color: #fff; font-size: 9pt; font-weight: 700; letter-spacing: .03em; text-align: center; padding: 8px 10px; }
    .formtable td, .attendance td, .rab td, .data-table td { padding: 7px 10px; border-top: 1px solid #eef2f7; border-right: 1px solid #eef2f7; vertical-align: top; }
    .formtable tr > :last-child, .attendance tr > :last-child, .rab tr > :last-child, .data-table tr > :last-child { border-right: 0; }
    .formtable tbody tr:nth-child(even), .attendance tbody tr:nth-child(even), .rab tbody tr:nth-child(even), .data-table tbody tr:nth-child(even) { background: #f8fafc; }
    .rab tfoot th, .data-table tfoot th, .total th, .total td { background: #f1f5f9; color: var(--ink); font-weight: 700; }
    .empty { padding: 16px; text-align: center; color: var(--muted); }

    .section-title, h2 { margin: 16px 0 6px; padding-bottom: 5px; border-bottom: 1px solid #dbeafe; color: var(--blue); font-size: 11pt; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
    .content { color: #334155; }
    .content p { margin: 5px 0; }
    .content table { width: 100%; border-collapse: collapse; }
    .content th, .content td { padding: 6px 8px; border: 1px solid #cbd5e1; }
    .content th { background: #eff6ff; color: var(--navy); }

    .center { text-align: center; }
    .right { text-align: right; }
    .sig { font-weight: 700; font-style: italic; }
    .name { font-weight: 700; text-decoration: underline; }

    .signature { width: 42%; margin: 30px 0 0 auto; border-collapse: collapse; color: #334155; }
    .signature td { padding: 2px; }
    .signature--split { width: 100%; margin: 32px 0 0 0; }
    .signature--split td { width: 50%; text-align: center; }

    .print-action { max-width: 1100px; margin: 0 auto 12px; text-align: right; }
    .print-action button { padding: 9px 16px; border: 0; border-radius: 10px; background: var(--blue); color: #fff; font: 600 10pt "Segoe UI", Inter, Arial, sans-serif; cursor: pointer; box-shadow: 0 4px 12px rgb(29 78 216 / 25%); }

    @media print {
        @page { size: A4 {{ $printOrientation }}; margin: 12mm 14mm; }
        body { padding: 0; background: #fff; }
        .print-action { display: none; }
        .paper { max-width: none; padding: 0; border: 0; border-radius: 0; box-shadow: none; }
        .fk-letterhead, tr, .signature { break-inside: avoid; }
        th, .details, .details tr, .rab tfoot th, .total th, .total td, .content th { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
    }
</style>