/* ============================================================
   DOCUMENT.CSS — Styling Dokumen Output LKPD
   Portrait A4, hemat tinta, Times New Roman
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Times New Roman', Times, serif;
  font-size: 11pt;
  background: #dde1e7;
  color: #000;
}

:root { --warna-model: #1a365d; }

/* ── HALAMAN A4 ── */
.page {
  width: 210mm;
  min-height: auto;
  height: auto;
  margin: 20px auto;
  background: #fff;
  padding: 12mm 12mm 12mm 15mm;
  box-shadow: 0 2px 12px rgba(0,0,0,0.18);
  overflow: visible;
}

/* ── HEADER DOKUMEN ── */
.lkpd-header { margin-bottom: 12px; }

.lkpd-judul-utama {
  font-size: 14pt;
  font-weight: bold;
  text-align: center;
  letter-spacing: 0.08em;
  color: #000;
}

.lkpd-judul-sub {
  font-size: 11pt;
  font-weight: bold;
  text-align: center;
  color: #333;
  margin-top: 2px;
}

.lkpd-meta {
  display: flex;
  justify-content: center;
  gap: 16px;
  font-size: 9pt;
  color: #555;
  margin-top: 4px;
  flex-wrap: wrap;
}

.lkpd-meta span::before { content: "| "; }
.lkpd-meta span:first-child::before { content: ""; }

.lkpd-border-bawah {
  height: 3px;
  background: var(--warna-model);
  margin-top: 6px;
  margin-bottom: 10px;
}

/* ── IDENTITAS SISWA ── */
.identitas-siswa,
.identitas-kelompok {
  border: 1px solid #ccc;
  padding: 8px 12px;
  margin-bottom: 10px;
  font-size: 10pt;
}

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

.identitas-table td { padding: 3px 6px; }

.identitas-table td.label {
  font-weight: bold;
  width: 120px;
}

.identitas-table td.isian-panjang {
  border-bottom: 1px solid #999;
  min-width: 150px;
}

.identitas-table td.isian-pendek {
  border-bottom: 1px solid #999;
  min-width: 100px;
}

.anggota-label {
  font-weight: bold;
  margin-bottom: 4px;
  font-size: 10pt;
}

.anggota-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 20px;
  margin: 4px 0;
  font-size: 10pt;
}

.anggota-grid div {
  border-bottom: 1px solid #999;
  padding-bottom: 2px;
}

.tanggal-row {
  margin-top: 6px;
  font-size: 10pt;
  border-bottom: 1px solid #999;
  padding-bottom: 2px;
  display: inline-block;
  min-width: 200px;
}

/* ── PETUNJUK UMUM ── */
.petunjuk-box {
  border: 1px solid #ccc;
  padding: 8px 12px;
  margin-bottom: 14px;
  font-size: 9.5pt;
  line-height: 1.6;
  background: #fafafa;
}

.petunjuk-label {
  font-weight: bold;
  font-size: 9pt;
  margin-bottom: 4px;
  color: var(--warna-model);
}

.petunjuk-list {
  padding-left: 18px;
}

.petunjuk-list li { margin-bottom: 2px; }

/* ── SECTION HEADER ── */
.section-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  margin: 12px 0 6px 0;
  border-left: 4px solid var(--warna-model);
  background: #fafafa;
}

.section-emoji { font-size: 12pt; }

.section-judul {
  font-size: 10.5pt;
  font-weight: bold;
  color: var(--warna-model);
}

/* ── KONTEN NARASI ── */
.konten-narasi {
  font-size: 10pt;
  line-height: 1.7;
  margin-bottom: 8px;
  padding: 6px 0;
}

/* ── KOTAK SKENARIO / FENOMENA / TANTANGAN ── */
.kotak-stimulus {
  border: 1.5px solid var(--warna-model);
  padding: 10px 14px;
  margin-bottom: 10px;
  font-size: 9.5pt;
  line-height: 1.7;
  background: #fafafa;
}

.kotak-stimulus-label {
  font-weight: bold;
  color: var(--warna-model);
  font-size: 9pt;
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid #ddd;
}

/* ── PLACEHOLDER GAMBAR ── */
.placeholder-gambar {
  border: 1.5px dashed #bbb;
  height: 180px;
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  background: #fafafa;
}

/* ── DUAL PLACEHOLDER GAMBAR (SIDE-BY-SIDE) ── */
.placeholder-gambar-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}

.placeholder-gambar-container .placeholder-gambar {
  margin-bottom: 0;
  height: 160px;
}

.placeholder-gambar-container .gambar-upload {
  height: 160px;
  max-height: 160px;
}

.placeholder-inner {
  font-size: 9pt;
  color: #aaa;
  text-align: center;
  font-style: italic;
}

.gambar-upload {
  width: 100%;
  height: auto;
  max-height: 300px;
  object-fit: contain;
  border-radius: 4px;
  aspect-ratio: 16/9;
}

/* ── INSTRUKSI ── */
.instruksi-teks {
  font-size: 9.5pt;
  color: #555;
  margin-bottom: 5px;
  font-style: italic;
}

/* ── TABEL LKPD ── */
.tabel-lkpd {
  width: 100%;
  border-collapse: collapse;
  font-size: 9.5pt;
  margin-bottom: 10px;
}

.tabel-lkpd th {
  background: #f8f8f8;
  color: var(--warna-model);
  font-weight: bold;
  padding: 5px 7px;
  border: 1px solid #ccc;
  text-align: center;
  font-size: 9pt;
}

.tabel-lkpd td {
  padding: 5px 7px;
  border: 1px solid #ccc;
  vertical-align: top;
  height: 24px;
}

.tabel-lkpd td.no {
  text-align: center;
  width: 28px;
  background: #fafafa;
  font-weight: bold;
  color: #666;
  vertical-align: middle;
}

.tabel-lkpd tr:nth-child(even) td { background: #fafafa; }
.tabel-lkpd tr:nth-child(even) td.no { background: #f5f5f5; }

/* ── PERTANYAAN & RUANG JAWABAN ── */
.pertanyaan-item { margin-bottom: 10px; }

.pertanyaan-teks {
  font-size: 10pt;
  font-weight: bold;
  margin-bottom: 4px;
  line-height: 1.5;
}

.ruang-jawaban {
  margin-left: 12px;
  margin-top: 4px;
  margin-bottom: 4px;
}

.garis-isian {
  border-bottom: 1px solid #bbb;
  height: 22px;
  min-height: 22px;
  margin-bottom: 2px;
  display: block;
  width: 100%;
}

/* ── ISIAN BEBAS ── */
.label-isian {
  font-size: 10pt;
  font-weight: bold;
  margin-bottom: 4px;
}

.ruang-isian {
  margin-bottom: 8px;
  margin-top: 4px;
}

/* ── MONITORING ── */
.monitoring-item {
  border: 1px solid #ddd;
  margin-bottom: 8px;
  border-radius: 4px;
  overflow: hidden;
}

.monitoring-header {
  background: #f8f8f8;
  padding: 5px 10px;
  font-weight: bold;
  font-size: 9.5pt;
  border-bottom: 1px solid #ddd;
  display: flex;
  gap: 20px;
}

.monitoring-body {
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.monitoring-field { font-size: 9.5pt; }

.monitoring-field .field-label {
  font-weight: bold;
  margin-bottom: 2px;
}

.monitoring-dua-kolom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* ── REFLEKSI ── */
.refleksi-box {
  background: #fafafa;
  border: 1px solid #e0e0e0;
  padding: 8px 12px;
  border-radius: 4px;
}

/* ── HIPOTESIS BOX (Inquiry) ── */
.hipotesis-box {
  border: 1px solid #ddd;
  padding: 10px 12px;
  margin-bottom: 10px;
  background: #fafafa;
}

.hipotesis-label {
  font-weight: bold;
  font-size: 9pt;
  color: var(--warna-model);
  margin-bottom: 6px;
}

/* ── SOLUSI BOX (PBL) ── */
.solusi-box {
  border: 1px solid #ddd;
  padding: 8px 12px;
  margin-bottom: 8px;
}

.solusi-header {
  font-weight: bold;
  font-size: 9pt;
  color: var(--warna-model);
  margin-bottom: 6px;
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 3px;
}

/* ── PRINT ── */
@media print {
  body { background: #fff; }
  .page {
    margin: 0;
    box-shadow: none;
    padding: 10mm 12mm 10mm 15mm;
  }
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}