/* =========================================================
 * rapot.css — Format Cetak Rapot Resmi Kuttab Darul Ulum
 * Desain Kop Royal Blue (#1B4F9C), Font Script & Aturan Print A4
 * ========================================================= */

@page {
  size: A4 portrait;
  margin: 0mm !important;
}

/* Kontainer Kertas Standar A4 Presisi (Screen Preview) */
.a4-print-page {
  width: 210mm;
  min-height: 297mm;
  max-height: 297mm;
  box-sizing: border-box;
  margin: 0 auto 24px;
  background: #ffffff !important;
  color: #000000;
  overflow: hidden;
  position: relative;
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
}

.rapot-page {
  width: 210mm;
  min-height: 297mm;
  max-height: 297mm;
  margin: 0 auto;
  background: #ffffff !important;
  color: #000000;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 9.5pt;
  line-height: 1.25;
  padding: 10mm 14mm;
  box-sizing: border-box;
  overflow: hidden;
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
}

.rapot-print-container {
  width: 210mm;
  margin: 0 auto;
  background: #ffffff;
}

.rapot-screen .rapot-page {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  border-radius: 4px;
  margin-bottom: 24px;
}

.rapot-page table {
  border-collapse: collapse;
  width: 100%;
}

.rapot-page .c { text-align: center; }
.rapot-page .r { text-align: right; }
.rapot-page .b { font-weight: 700; }

/* =========================================================
 * KOP RAPOT RESMI KUTTAB DARUL ULUM (WARNA BIRU #1B4F9C)
 * ========================================================= */
.r-kop {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  border-bottom: 3px double #1B4F9C !important;
  padding-bottom: 5px;
  margin-bottom: 7px;
  background: #ffffff !important;
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
}

.r-kop-logo {
  flex: 0 0 78px;
  width: 78px;
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.r-logo {
  width: 78px !important;
  height: 78px !important;
  max-width: 78px !important;
  max-height: 78px !important;
  object-fit: contain;
  display: block;
}

.r-kop-text {
  flex: 1;
  text-align: center;
  color: #1B4F9C !important;
}

/* Baris 1: Serif Bold Uppercase 13.5pt */
.r-kop-1 {
  font-family: 'Times New Roman', Times, serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 13.5pt;
  letter-spacing: 0.5px;
  color: #1B4F9C !important;
  margin: 0 0 1px 0;
  line-height: 1.15;
}

/* Baris 2: Serif Regular/Medium Uppercase 20pt */
.r-kop-2 {
  font-family: 'Times New Roman', Times, serif;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 20pt;
  line-height: 1.1;
  letter-spacing: 0.6px;
  color: #1B4F9C !important;
  margin: 0 0 1px 0;
}

/* Baris 3: Script Latin Sambung 17pt */
.r-kop-3 {
  font-family: 'Great Vibes', 'Pinyon Script', 'Edwardian Script ITC', cursive;
  font-size: 17pt;
  line-height: 1.15;
  color: #1B4F9C !important;
  margin: 0 0 1px 0;
}

/* Baris 4: Serif Bold Italic 9.5pt */
.r-kop-4 {
  font-family: 'Times New Roman', Times, serif;
  font-weight: 700;
  font-style: italic;
  font-size: 9.5pt;
  line-height: 1.2;
  color: #1B4F9C !important;
  margin: 0;
}

/* =========================================================
 * IDENTITAS & TABEL RAPOT (COMPACT 1 LEMBAR A4)
 * ========================================================= */
.r-ident {
  margin-bottom: 2mm;
  font-size: 9.5pt;
  line-height: 1.2;
}

.r-ident td {
  padding: 0.4mm 1mm;
  vertical-align: top;
}

.r-ident .l {
  width: 24mm;
  white-space: nowrap;
}

.r-ident .s {
  width: 3mm;
}

.r-ident .v {
  font-size: 9.5pt;
}

.r-sec {
  font-weight: 700;
  margin: 2mm 0 1mm;
  font-size: 9.5pt;
  letter-spacing: 0.2px;
  color: #000;
}

.r-table th, .r-table td {
  border: 1px solid #000;
  padding: 2px 5px !important;
  vertical-align: middle;
  font-size: 8.8pt;
  line-height: 1.2;
}

.r-table th {
  background: #f1f5f9;
  font-weight: 700;
  text-align: center;
  padding: 2.5px 5px !important;
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
}

.r-table .ck {
  font-size: 10pt;
  font-weight: 700;
}

.r-table tfoot td {
  background: #f8fafc;
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
}

.r-catatan {
  font-size: 7.8pt;
  margin-top: 1mm;
  color: #333;
  line-height: 1.15;
}

.r-hadir {
  width: 60% !important;
}

.r-keterangan {
  margin: 2mm 0 1.5mm;
  padding: 1.5mm 3mm;
  border: 1.5px solid #000;
  font-size: 9.5pt;
  display: inline-block;
}

.r-keterangan b {
  letter-spacing: 0.5px;
}

.r-next {
  font-weight: 600;
}

.r-pesan {
  border: 1px solid #000;
  margin-top: 2mm;
  padding: 1.5mm 3mm;
  min-height: 11mm;
  border-radius: 1mm;
  font-size: 8.8pt;
  line-height: 1.2;
}

.r-pesan-t {
  font-weight: 700;
  margin-bottom: 0.5mm;
}

.r-pesan-b {
  font-style: italic;
}

.r-sah {
  margin-top: 2.5mm;
  page-break-inside: avoid;
  break-inside: avoid;
}

.r-sah-top {
  display: flex;
  justify-content: flex-end;
  font-size: 8.8pt;
  line-height: 1.15;
}

.r-sah-top table {
  width: auto;
}

.r-sah-top td {
  padding: 0.2mm 1mm;
}

.r-sah-mid {
  text-align: center;
  margin: 1mm 0 0.5mm;
  font-size: 8.8pt;
}

.r-sah-cols {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  text-align: center;
  gap: 3mm;
  font-size: 8.8pt;
}

.r-ttd {
  height: 13mm;
}

.r-nm {
  white-space: nowrap;
  font-size: 8.8pt;
}

.r-table, .r-sec, .r-pesan, .r-keterangan {
  page-break-inside: avoid;
  break-inside: avoid;
}

.page-break-before {
  page-break-before: always;
  break-before: page;
  height: 0;
}

/* =========================================================
 * KWITANSI SYAHRIYAH
 * ========================================================= */
.kw-page {
  width: 190mm;
  margin: 0 auto 8mm;
  font-family: Arial, sans-serif;
  font-size: 10pt;
  color: #000;
  border: 1.5px solid #065f46;
  border-radius: 3mm;
  padding: 6mm 8mm;
  page-break-inside: avoid;
  break-inside: avoid;
  background: #fff;
}

.kw-head {
  display: flex;
  align-items: center;
  gap: 4mm;
  border-bottom: 2px solid #065f46;
  padding-bottom: 3mm;
  margin-bottom: 3mm;
}

.kw-head img {
  width: 15mm;
  height: 15mm;
}

.kw-head h2 {
  margin: 0;
  font-size: 14pt;
  color: #065f46;
}

.kw-head p {
  margin: 0;
  font-size: 8.5pt;
}

.kw-title {
  margin-left: auto;
  text-align: right;
}

.kw-title b {
  display: block;
  font-size: 12pt;
  letter-spacing: 1px;
}

.kw-page table {
  width: 100%;
  border-collapse: collapse;
}

.kw-page .kw-grid th, .kw-page .kw-grid td {
  border: 1px solid #555;
  padding: 1.2mm 2mm;
}

.kw-page .kw-grid th {
  background: #e7f3ee;
}

.kw-page .r { text-align: right; }
.kw-page .c { text-align: center; }

.kw-sign {
  display: flex;
  justify-content: space-between;
  margin-top: 5mm;
  text-align: center;
}

.kw-sign div {
  width: 45%;
}

.kw-sign .sp {
  height: 15mm;
}

/* =========================================================
 * ATURAN PRINT (PENGHAPUS TANGGAL & URL OTOMATIS BROWSER)
 * ========================================================= */
#print-root {
  display: none;
}

@media print {
  @page {
    size: A4 portrait;
    margin: 0mm !important;
  }
  html, body {
    width: 210mm;
    height: 297mm;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .no-print, nav, aside, header, footer, button, .print\:hidden,
  body > *:not(#print-root),
  #app,
  .panel-shell,
  .sidebar,
  .topbar,
  .site-nav,
  .site-footer,
  .btn,
  .icon-btn,
  .actions,
  .filter-bar,
  .wa-float,
  #modal-root,
  #toast-root {
    display: none !important;
    visibility: hidden !important;
  }

  /* Tampilkan #print-root secara mutlak dan terlihat jika dipakai */
  #print-root {
    display: block !important;
    visibility: visible !important;
    position: static !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
  }

  #print-root, #print-root * {
    visibility: visible !important;
  }

  .rapot-print-container {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  /* Kontainer Dokumen A4 Presisi (Rapot & Surat Otomatis) */
  .a4-print-page {
    width: 210mm !important;
    height: 297mm !important;
    max-height: 297mm !important;
    padding: 10mm 14mm !important; /* Padding khusus agar rapi di dalam kertas A4 */
    margin: 0 auto !important;
    box-shadow: none !important;
    border: none !important;
    page-break-after: always;
    page-break-inside: avoid;
    overflow: hidden;
    box-sizing: border-box !important;
    background: #ffffff !important;
  }

  .a4-print-page.surat-paper {
    padding: 15mm 20mm !important;
  }

  .a4-print-page:last-child {
    page-break-after: auto;
    break-after: auto;
  }

  /* Pertahankan warna biru Kop Rapot */
  .r-kop {
    display: flex !important;
    align-items: center !important;
    border-bottom: 3px double #1B4F9C !important;
    padding-bottom: 5px !important;
    margin-bottom: 7px !important;
    background: #ffffff !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .r-kop-logo {
    flex: 0 0 78px !important;
    width: 78px !important;
    height: 78px !important;
  }

  .r-logo {
    width: 78px !important;
    height: 78px !important;
    max-width: 78px !important;
    max-height: 78px !important;
    object-fit: contain !important;
  }

  .r-kop-1, .r-kop-2, .r-kop-3, .r-kop-4 {
    color: #1B4F9C !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .r-table th {
    background: #f1f5f9 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .r-table, .r-sec, .r-pesan, .r-keterangan, .r-sah {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .kw-page {
    width: auto !important;
  }
}

.pdf-holder {
  position: fixed;
  left: -10000px;
  top: 0;
  width: 210mm;
  background: #fff;
}

.pdf-holder .rapot-page {
  width: 210mm;
  padding: 12mm 15mm;
}

@media (max-width: 820px) {
  .rapot-screen {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }
  .rapot-screen .rapot-page {
    width: 210mm;
    max-width: none;
  }
}