/* ============================================================
   DOCUMENT.CSS v2.0 — Administrasi Ujian
   Clone 100% dari v1 + tambah style Berita Acara Format Narasi
   sesuai spesifikasi PRD v2 halaman 15
   ============================================================ */

:root {
  --ink:        #000000;
  --ink-light:  #000000;
  --line:       #000000;
  --line-light: #000000;
  --accent:     #000000;
  --bg-page:    #d0d0d0;
  --bg-card:    #ffffff;
  --cut-color:  #000000;

  /* ukuran halaman cetak dalam px (96dpi) */
  /* 215mm = 812px  |  330mm = 1247px */
  --page-w: 812px;
  --page-h: 1247px;

  /* ukuran kartu */
  --card-w: 374px;   /* (812 - 2×28 margin - 8 gutter) / 2  ≈ 374px */
  --card-h: 272px;   /* sedikit dikurangi agar bagian bawah tidak terpotong */

  --font-display: 'Times New Roman', Times, serif;
  --font-body:    'Times New Roman', Times, serif;
}

/* Preview wrapper in app */
.preview-paper {
  background: var(--bg-page);
  padding: 24px;
}

/* ============================================================
   HALAMAN CETAK
   ============================================================ */
.print-page {
  width:  var(--page-w);
  height: var(--page-h);
  background: var(--bg-card);
  box-shadow: 0 4px 32px rgba(0,0,0,0.18);
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: var(--card-w) var(--card-w);
  grid-template-rows: var(--card-h) var(--card-h) var(--card-h) var(--card-h);
  padding: 28px;
  gap: 8px;
  font-family: var(--font-body);
  margin: 0 auto 24px;
}

/* Garis Potong */
.cut-v {
  position: absolute;
  left: 50%;
  top: 28px; bottom: 28px;
  transform: translateX(-50%);
  width: 0;
  border-left: 1px dashed var(--cut-color);
  z-index: 10;
  pointer-events: none;
}
.cut-v::after {
  content: '✂';
  font-size: 10px;
  color: var(--cut-color);
  background: var(--bg-card);
  padding: 2px;
  line-height: 1;
  position: absolute;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
}
.cut-h {
  position: absolute;
  left: 28px; right: 28px;
  height: 0;
  border-top: 1px dashed var(--cut-color);
  z-index: 10;
  pointer-events: none;
}
.cut-h:nth-of-type(1) { top: calc(28px + var(--card-h) + 4px); }
.cut-h:nth-of-type(2) { top: calc(28px + var(--card-h)*2 + 8px + 4px); }
.cut-h:nth-of-type(3) { top: calc(28px + var(--card-h)*3 + 16px + 4px); }

/* Hide cut marks when disabled */
.print-page.no-cutmarks .cut-v,
.print-page.no-cutmarks .cut-h {
  display: none;
}

/* ============================================================
   KARTU INDIVIDU
   ============================================================ */
.kartu {
  width:  var(--card-w);
  height: var(--card-h);
  background: var(--bg-card);
  border: 0.5px solid var(--line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.kartu-kop {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 6px;
  border-bottom: 1.5px solid var(--ink);
  flex-shrink: 0;
}
.kop-logo {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: transparent;
}
.kop-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.kop-teks {
  flex: 1;
  text-align: center;
  line-height: 1.2;
}
.kop-sekolah {
  font-family: var(--font-display);
  font-size: 8.5px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.01em;
  display: block;
}
.kop-dinas {
  font-size: 6.5px;
  color: #000;
  letter-spacing: 0.03em;
  display: block;
  margin-bottom: 1px;
}
.kop-alamat {
  font-size: 5.5px;
  color: var(--ink-light);
  display: block;
}

.kartu-judul {
  text-align: center;
  padding: 5px 10px 4px;
  border-bottom: 0.5px solid var(--line);
  flex-shrink: 0;
}
.kartu-judul h2 {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.3;
}
.kartu-judul span {
  font-size: 6.5px;
  color: var(--ink-light);
  letter-spacing: 0.06em;
}

.kartu-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}
.kartu-data {
  flex: 1;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.data-baris {
  display: flex;
  align-items: baseline;
  gap: 0;
  line-height: 1.4;
}
.data-label {
  font-size: 6px;
  color: var(--ink-light);
  width: 52px;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}
.data-titik {
  font-size: 6px;
  color: var(--ink-light);
  width: 10px;
  text-align: center;
  flex-shrink: 0;
}
.data-nilai {
  font-size: 7px;
  color: var(--ink);
  font-weight: 600;
  flex: 1;
  border-bottom: 0.5px solid var(--line-light);
  min-height: 12px;
  padding-bottom: 1px;
}

.kartu-foto {
  width: 72px;
  flex-shrink: 0;
  margin: 8px 8px 8px 0;
  border: 1px dashed #000;
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: #fff;
}
.kartu-foto span {
  font-size: 5px;
  color: #000;
  text-align: center;
  line-height: 1.3;
  padding: 0 4px;
}

.kartu-footer {
  border-top: 0.5px solid var(--line);
  padding: 5px 10px 6px;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  flex-shrink: 0;
  gap: 8px;
}
.ttd-block { text-align: center; }
.ttd-kota {
  font-size: 5.5px;
  color: var(--ink-light);
  margin-bottom: 2px;
}
.ttd-jabatan {
  font-size: 5.5px;
  color: var(--ink-light);
  margin-bottom: 16px;
}
.ttd-nama {
  font-size: 6.5px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 0.5px;
  padding-top: 2px;
  min-width: 100px;
}
.ttd-nip {
  font-size: 5.5px;
  color: var(--ink-light);
}

/* Kartu tanpa foto (toggle OFF) */
.kartu.no-foto .kartu-foto { display: none; }
.kartu.no-foto .kartu-data { padding-right: 10px; }
.kartu.no-foto .data-nilai { font-size: 7.5px; }

/* Print rules — kartu peserta menggunakan named page "kartu" */
@media print {
  /* Hide UI elements */
  .app-header, #tab-navigation, .tab-toolbar, .panel-input, .modal-overlay, .btn, .form-group, .panel-header, .panel-actions, .split-layout > .panel-input {
    display: none !important;
  }
  
  /* Force all containers to show all content */
  body { overflow: visible !important; }
  #app-content, .split-layout, .panel-preview, .preview-container {
    height: auto !important;
    overflow: visible !important;
  }
  
  /* Only apply named page to kartu elements */
  .print-page {
    page: kartu;
    margin: 0 !important;
    page-break-after: always;
  }
  
  .preview-container {
    gap: 0 !important;
  }
  
  .preview-paper {
    padding: 0 !important;
  }

  /* Ensure kartu uses correct page setup */
  @page kartu {
    size: 215mm 330mm portrait;
    margin: 0;
  }
}

/* ============================================================
   DOCUMENT.CSS — Daftar Hadir Peserta
   ============================================================ */

/* ── Sheet container ── */
.sheet-daftar-hadir {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto 40px;
  padding: 32px 40px;
  background: #fff;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--ink);
}

/* Named page per ukuran kertas — dikelola via JS inject saat print */

/* ── Kop Surat ── */
.kop-surat {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 3px double var(--ink);
  margin-bottom: 16px;
}
.kop-surat .kop-logo {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kop-surat .kop-logo img {
  max-width: 56px;
  max-height: 56px;
  object-fit: contain;
}
.kop-surat .kop-teks {
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.kop-surat .kop-dinas {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
}
.kop-surat .kop-sekolah {
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
}
.kop-surat .kop-alamat {
  font-size: 10px;
  color: #333;
}

/* ── Judul Dokumen ── */
.judul-dokumen {
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 12px 0 16px;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ── Info Header Table ── */
.info-header {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 16px;
  font-size: 12px;
}
.info-header td {
  padding: 3px 4px;
  vertical-align: top;
}
.info-label {
  font-weight: 600;
  white-space: nowrap;
  width: 120px;
}
.info-sep {
  width: 12px;
  text-align: center;
}
.info-value {
  min-width: 150px;
}

/* ── Tabel Hadir ── */
.tabel-hadir {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  margin-bottom: 12px;
}
.tabel-hadir thead th {
  background: var(--ink);
  color: #fff;
  font-weight: 600;
  padding: 8px 10px;
  text-align: left;
  border: 1px solid var(--ink);
}
.tabel-hadir tbody td {
  padding: 6px 10px;
  border: 1px solid #ccc;
  vertical-align: middle;
}
.tabel-hadir .col-no {
  width: 40px;
  text-align: center;
}
.tabel-hadir .col-no-ujian {
  width: 100px;
}
.tabel-hadir .col-nis {
  width: 120px;
}
.tabel-hadir .col-nama {
  min-width: 200px;
}
.tabel-hadir .col-ttd {
  width: 160px;
  min-height: 28px;
}

/* ── Rekap Hadir ── */
.rekap-hadir {
  display: flex;
  gap: 32px;
  font-size: 12px;
  margin: 12px 0 32px;
  padding: 8px 0;
  border-top: 1px solid #ccc;
}

/* ── Pengawas Footer ── */
.pengawas-dua {
  display: flex;
  justify-content: space-between;
  padding: 0 40px;
}
.pengawas-satu {
  display: flex;
  justify-content: flex-end;
  padding: 0 40px;
}
.pengawas-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 180px;
  font-size: 12px;
}
.ttd-space {
  height: 50px;
}
.ttd-line {
  font-size: 12px;
}

/* ── Print rules for Daftar Hadir ── */
@media print {
  /* Hide UI elements yang tidak diperlukan untuk daftar hadir */
  body { background: white !important; }
  .app-header,
  .panel-input { display: none !important; }
  .panel-preview { width: 100% !important; overflow: visible !important; background: white !important; }
  .preview-wrapper { padding: 0; background: white !important; }
  .preview-paper { box-shadow: none !important; background: white !important; padding: 0; }
  .preview-container { overflow: visible !important; gap: 0 !important; }
  .print-page {
    box-shadow: none;
    margin: 0 !important;
    page-break-after: always;
  }
  .print-page:last-of-type {
    page-break-after: avoid !important;
    break-after: avoid-page !important;
  }

  /* Styling khusus untuk sheet daftar hadir saat print */
  .sheet-daftar-hadir {
    margin: 0;
    padding: 0;
    box-shadow: none;
    width: 100%;
    min-height: unset;
    max-height: unset;
    overflow: visible;
    page-break-before: avoid;
    page-break-after: always;
    break-before: avoid;
    break-after: always;
  }
  .sheet-daftar-hadir:last-of-type {
    page-break-after: avoid !important;
    break-after: avoid !important;
  }

  /* Kompres spacing vertikal — opsi B + A */
  .sheet-daftar-hadir .tabel-hadir tbody td {
    padding: 4px 8px;
  }
  .sheet-daftar-hadir .tabel-hadir thead th {
    padding: 5px 8px;
  }
  .sheet-daftar-hadir .rekap-hadir {
    margin: 8px 0 12px;
    padding: 6px 0;
  }
  .sheet-daftar-hadir .judul-dokumen {
    margin: 8px 0 10px;
  }
  .sheet-daftar-hadir .kop-surat {
    margin-bottom: 10px;
    padding-bottom: 8px;
  }
  .sheet-daftar-hadir .ttd-space {
    height: 36px;
  }

  /* Default page untuk daftar hadir (akan di-override oleh JS inject) */
  @page {
    margin: 0; /* Default netral agar tidak mempengaruhi kartu */
  }
}

/* ============================================================
   STYLING BERITA ACARA FORMAT NARASI BARU
   Sesuai PRD v2 halaman 15 - template output
   ============================================================ */

.sheet-berita-acara {
  background: white;
  padding: 40px 45px;
  font-family: 'Times New Roman', Times, serif;
  font-size: 11pt;
  line-height: 1.6;
  color: black;
  min-height: 297mm; /* A4 height */
  box-sizing: border-box;
}

/* Kop Surat Berita Acara */
.sheet-berita-acara .kop-surat {
  text-align: center;
  margin-bottom: 12px;
  border-bottom: 2px solid #000;
  padding-bottom: 8px;
}

.sheet-berita-acara .kop-surat .nama-sekolah {
  font-size: 15pt;
  font-weight: bold;
  margin-bottom: 4px;
  font-family: 'Times New Roman', Times, serif;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.3;
}

.sheet-berita-acara .kop-surat .nama-dinas {
  font-size: 11pt;
  margin-bottom: 2px;
  font-weight: normal;
  line-height: 1.4;
}

.sheet-berita-acara .kop-surat .alamat {
  font-size: 9pt;
  margin-bottom: 8px;
  line-height: 1.4;
  color: #000;
}

/* Judul Dokumen */
.sheet-berita-acara .judul-dokumen {
  text-align: center;
  margin-top: 14px;
  margin-bottom: 14px;
  font-family: 'Times New Roman', Times, serif;
  text-decoration: none;
}

.sheet-berita-acara .judul-utama {
  font-size: 12pt;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-decoration: underline;
  line-height: 1.5;
}

.sheet-berita-acara .judul-sub {
  font-size: 11pt;
  font-weight: bold;
  text-transform: uppercase;
  text-decoration: underline;
  line-height: 1.5;
}

/* Nomor Berita Acara (optional) */
.sheet-berita-acara .nomor-dokumen {
  text-align: center;
  margin-bottom: 20px;
  font-size: 12px;
}

/* Narasi Konten */
.sheet-berita-acara .narasi-content {
  margin-bottom: 30px;
  text-align: justify;
  font-size: 11pt;
  font-family: 'Times New Roman', Times, serif;
  line-height: 1.8;
}

.sheet-berita-acara .paragraf {
  margin-bottom: 10px;
  text-align: justify;
}

.sheet-berita-acara .paragraf.indent {
  text-indent: 0;
  display: flex;
  align-items: flex-start;
  line-height: 1.8;
}

.sheet-berita-acara .ba-intro {
  margin-bottom: 12px;
  text-indent: 0;
  line-height: 1.8;
  display: flex;
  align-items: flex-start;
}

.sheet-berita-acara .ba-intro::before {
  content: "1.";
  font-weight: bold;
  margin-right: 8px;
  flex-shrink: 0;
}

.sheet-berita-acara .ba-info {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 10px;
  font-size: 11pt;
  margin-left: 24px;
}

.sheet-berita-acara .ba-info td {
  padding: 2px 4px;
  vertical-align: top;
  line-height: 1.7;
}

.sheet-berita-acara .ba-info .col-no {
  width: 24px;
  font-weight: 600;
  visibility: hidden;
}

.sheet-berita-acara .ba-info .col-label {
  width: 160px;
}

.sheet-berita-acara .ba-info .col-sep {
  width: 16px;
  text-align: center;
}

.sheet-berita-acara .ba-info .col-value {
  width: auto;
}

/* Data Input Fields (titik-titik untuk diisi manual) */
.sheet-berita-acara .input-field {
  display: inline-block;
  min-width: 150px;
  border-bottom: none;
  margin: 0 4px;
  font-weight: normal;
  background-image: repeating-linear-gradient(to right, #000 0, #000 2px, transparent 2px, transparent 6px);
  background-size: 6px 1px;
  background-repeat: repeat-x;
  background-position: bottom;
  height: 1em;
  vertical-align: bottom;
}

.sheet-berita-acara .input-field.wide {
  min-width: 300px;
}

.sheet-berita-acara .input-field.short {
  min-width: 80px;
}

/* Lebarkan garis isian saat template kosong */
.sheet-berita-acara.is-blank .input-field.wide {
  min-width: 380px;
}
.sheet-berita-acara.is-blank .input-field.short {
  min-width: 140px;
}

/* Tabel Rekap Peserta */
.sheet-berita-acara .rekap-table {
  margin: 10px 0;
  border-collapse: collapse;
  width: 100%;
  font-size: 11pt;
}

.sheet-berita-acara .rekap-table td {
  padding: 4px 10px;
  border: 1px solid #000;
  vertical-align: middle;
  text-align: left;
}

.sheet-berita-acara .rekap-table .label {
  font-weight: bold;
  width: 200px;
  background: transparent;
}

/* Catatan Section */
.sheet-berita-acara .catatan-section {
  margin-top: 12px;
  margin-bottom: 12px;
  margin-left: 24px;
}

.sheet-berita-acara .catatan-item {
  margin-bottom: 6px;
  line-height: 1.8;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 11pt;
  padding-left: 0;
}

.sheet-berita-acara .catatan-item::before {
  content: "•";
  position: static;
  font-weight: bold;
  flex-shrink: 0;
}

/* Tanda Tangan Section */
.sheet-berita-acara .ttd-section {
  margin-top: 30px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}

.sheet-berita-acara .ttd-column {
  text-align: center;
  width: 45%;
  flex: 1;
  font-size: 11pt;
}

.sheet-berita-acara .ttd-label {
  font-weight: bold;
  margin-bottom: 2px;
  font-size: 11pt;
  line-height: 1.4;
}

.sheet-berita-acara .ttd-label.tight {
  margin-bottom: 2px;
  line-height: 1.4;
}

.sheet-berita-acara .ttd-line {
  border-bottom: 1px solid #000;
  margin: 40px auto 4px auto;
  width: 80%;
  height: 20px;
}

.sheet-berita-acara .ttd-line.is-hidden {
  visibility: hidden;
}

.sheet-berita-acara .ttd-nama {
  font-size: 11pt;
  font-weight: bold;
  color: #000;
  text-decoration: underline;
  line-height: 1.5;
}

.sheet-berita-acara .ttd-nip {
  font-size: 10pt;
  color: #000;
  display: inline-block;
  min-width: 180px;
  text-align: left;
  line-height: 1.5;
}

.sheet-berita-acara .filled-text {
  font-size: 11pt;
  color: #000;
}

.sheet-berita-acara .filled-text.bold {
  font-weight: bold;
}

/* Print Rules untuk Berita Acara */
@media print {
  /* Hide UI elements spesifik untuk berita acara (tidak mengganggu dokumen lain) */
  .app-header,
  #tab-navigation,
  .tab-toolbar,
  .panel-input,
  .modal-overlay,
  .btn,
  .form-group,
  .panel-header,
  .panel-actions,
  .split-layout > .panel-input {
    display: none !important;
  }
  
  /* Make sure preview container takes full space */
  .panel-preview,
  .preview-fullscreen,
  .preview-container {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: white !important;
  }
  
  /* Styling khusus untuk sheet berita acara saat print */
  .sheet-berita-acara {
    display: block !important;
    visibility: visible !important;
    position: static;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    background: white !important;
    min-height: unset !important;
    overflow: visible !important;
    page-break-after: always;
    break-after: always;
  }
  
  .sheet-berita-acara:last-of-type {
    page-break-after: avoid !important;
    break-after: avoid !important;
  }
  
  /* Optimasi spacing untuk print */
  .sheet-berita-acara .kop-surat {
    margin-bottom: 20px;
  }
  
  .sheet-berita-acara .judul-dokumen {
    margin: 15px 0 20px;
  }
  
  .sheet-berita-acara .narasi-content {
    margin-bottom: 20px;
  }
  
  .sheet-berita-acara .ttd-section {
    margin-top: 20px;
  }
  
  .sheet-berita-acara .ttd-label {
    margin-bottom: 16px;
  }

  /* Override any conflicting styles */
  html, body {
    background: white !important;
    overflow: visible !important;
    height: auto !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Remove all app UI elements completely */
  .app-header,
  #tab-navigation,
  .tab-toolbar,
  .panel-input,
  .modal-overlay,
  .btn,
  .form-group,
  .panel-header,
  .panel-actions,
  .split-layout > .panel-input {
    display: none !important;
  }
  
  /* Make sure preview container takes full space */
  .panel-preview,
  .preview-fullscreen,
  .preview-container {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: white !important;
  }
}