/* ==========================================================================
   LEMBARAN OPR  ·  Sistem e-Kokurikulum
   --------------------------------------------------------------------------
   Satu laporan = satu helaian A4 menegak. Reka bentuk ini dipakai dua tempat:
   pratonton di skrin (dikecilkan) dan cetakan sebenar (saiz penuh).

   Nilai di sini sengaja dalam `mm` dan `pt`, bukan token tema. Lembaran ini
   mesti keluar sama pada mana-mana pencetak, tidak kira tetapan pelayar.
   ========================================================================== */

.opr-cetak { display: none; }

/* --------------------------------------------------------------- helaian */
.opr {
  --opr-teks:  #101828;
  --opr-lemah: #667085;
  --opr-garis: #C9CED6;
  --opr-lorek: #F2F4F7;
  --opr-tegas: #1F3A8A;

  box-sizing: border-box;
  width: 210mm;
  min-height: 297mm;
  padding: 11mm 13mm;
  background: #fff;
  color: var(--opr-teks);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 9.6pt;
  line-height: 1.45;
  display: flex;
  flex-direction: column;
}
.opr * { box-sizing: border-box; }
.opr + .opr { margin-top: 8mm; }

/* --------------------------------------------------------------- kepala */
.opr__kepala {
  display: flex;
  align-items: center;
  gap: 5mm;
  padding-bottom: 3mm;
  border-bottom: 1.6pt solid var(--opr-tegas);
}
.opr__logo { width: 16mm; height: 16mm; object-fit: contain; flex: none; }
.opr__sekolah { flex: 1; min-width: 0; }
.opr__sekolah b {
  display: block;
  font-size: 14pt;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.15;
}
.opr__sekolah span { display: block; font-size: 8.4pt; color: var(--opr-lemah); margin-top: .8mm; }
.opr__jenis {
  flex: none;
  text-align: right;
  font-size: 8pt;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--opr-tegas);
  line-height: 1.5;
}
.opr__jenis em { display: block; font-style: normal; font-size: 15pt; letter-spacing: 0; }

/* --------------------------------------------------------------- tajuk */
.opr__tajuk {
  display: flex;
  align-items: flex-end;
  gap: 4mm;
  margin-top: 4mm;
}
.opr__tajuk h1 {
  flex: 1;
  margin: 0;
  font-size: 16pt;
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: 1.15;
}
.opr__tajuk p { margin: 1mm 0 0; font-size: 9pt; color: var(--opr-lemah); font-weight: 500; }
.opr__bil {
  flex: none;
  padding: 2mm 4mm;
  border-radius: 2mm;
  background: var(--opr-tegas);
  color: #fff;
  text-align: center;
  line-height: 1.1;
}
.opr__bil b { display: block; font-size: 17pt; font-weight: 800; }
.opr__bil span { display: block; font-size: 7pt; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }

/* --------------------------------------------------------------- maklumat */
.opr__maklumat {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 4mm;
  border: 1pt solid var(--opr-garis);
  border-radius: 1.5mm;
  overflow: hidden;
}
.opr__medan {
  padding: 2.4mm 3mm;
  border-right: 1pt solid var(--opr-garis);
  border-bottom: 1pt solid var(--opr-garis);
  min-width: 0;
}
.opr__medan:nth-child(4n) { border-right: none; }
.opr__medan--penuh { grid-column: 1 / -1; border-right: none; }
.opr__maklumat > .opr__medan:nth-last-child(-n+1) { border-bottom: none; }
.opr__medan dt {
  font-size: 6.8pt;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--opr-lemah);
}
.opr__medan dd {
  margin: .6mm 0 0;
  font-size: 9.4pt;
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------- seksyen */
.opr__badan { flex: 1; display: flex; flex-direction: column; gap: 3mm; margin-top: 3.5mm; }
.opr__seksyen { break-inside: avoid; }
/* Seksyen yang menelan baki ruang helaian — cth ruang catatan tulisan tangan.
   Tanpa ini, jurang kosong tergantung di tengah lembaran. */
.opr__seksyen--isi { flex: 1; display: flex; flex-direction: column; min-height: 30mm; }
.opr__seksyen--isi > :last-child { flex: 1; }
.opr__label {
  font-size: 7.4pt;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--opr-tegas);
  padding-bottom: 1mm;
  margin-bottom: 1.6mm;
  border-bottom: .8pt solid var(--opr-garis);
}
.opr__teks { margin: 0; white-space: pre-wrap; text-align: justify; }
.opr__teks:empty::before { content: '—'; color: var(--opr-lemah); }

/* jadual dalam lembaran cetakan — takwim, senarai ahli, pencapaian */
.opr__jadual { width: 100%; border-collapse: collapse; font-size: 8.6pt; }
.opr__jadual th {
  text-align: left;
  padding: 1.4mm 2mm;
  background: var(--opr-lorek);
  border: .8pt solid var(--opr-garis);
  font-size: 7pt;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--opr-lemah);
}
.opr__jadual td { padding: 1.3mm 2mm; border: .8pt solid var(--opr-garis); }
.opr__jadual tbody tr:nth-child(even) td { background: #FAFBFC; }
.opr__jadual .num { text-align: right; font-variant-numeric: tabular-nums; }

/* Senarai panjang dipecah dua lajur supaya kekal sehelai. */
.opr__dwiruang { display: grid; grid-template-columns: 1fr 1fr; gap: 4mm; align-items: start; }

/* senarai objektif bernombor */
.opr__senarai { margin: 0; padding-left: 5mm; }
.opr__senarai li { margin-bottom: .8mm; }

/* --------------------------------------------------------------- kehadiran */
.opr__stat { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.5mm; }
.opr__kotak {
  padding: 2.5mm 3mm;
  border: 1pt solid var(--opr-garis);
  border-radius: 1.5mm;
  background: var(--opr-lorek);
}
.opr__kotak dt {
  font-size: 6.8pt;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--opr-lemah);
}
.opr__kotak dd { margin: .5mm 0 0; font-size: 15pt; font-weight: 800; line-height: 1.1; }
.opr__kotak--tegas { background: var(--opr-tegas); border-color: var(--opr-tegas); color: #fff; }
.opr__kotak--tegas dt { color: rgba(255,255,255,.78); }

/* --------------------------------------------------------------- gambar */
/* Ruang yang tinggal pada helaian bergantung pada bilangan gambar. Semakin
   banyak gambar, semakin kecil setiap satu — supaya laporan kekal SEHELAI. */
.opr__gambar { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.5mm; }
.opr__gambar figure { margin: 0; break-inside: avoid; }
.opr__gambar img {
  display: block;
  width: 100%;
  height: 42mm;
  object-fit: cover;
  border: 1pt solid var(--opr-garis);
  border-radius: 1.5mm;
  background: var(--opr-lorek);
}
.opr__gambar--1 { grid-template-columns: 1fr; }
.opr__gambar--1 img { height: 52mm; }
.opr__gambar--2 img { height: 44mm; }
.opr__gambar--3 { grid-template-columns: repeat(3, 1fr); }
.opr__gambar--3 img { height: 33mm; }
.opr__gambar--4 { grid-template-columns: repeat(4, 1fr); }
.opr__gambar--4 img { height: 22mm; }
.opr__gambar figcaption {
  margin-top: 1mm;
  font-size: 7.6pt;
  color: var(--opr-lemah);
  text-align: center;
}
.opr__gambar--kosong {
  grid-column: 1 / -1;
  padding: 8mm;
  text-align: center;
  font-size: 8.4pt;
  color: var(--opr-lemah);
  border: 1pt dashed var(--opr-garis);
  border-radius: 1.5mm;
}

/* ==========================================================================
   LEMBARAN PERJUMPAAN (OPR)

   Susun atur ini mengikut laporan Canva yang sekolah sudah guna, kerana ia
   yang diterima oleh pentadbir dan pejabat pelajaran. Yang berubah hanyalah
   cara ia dihasilkan.

   Warna navy dan emas diambil terus dari laporan asal sekolah — ia bukan
   tema aplikasi, dan sengaja tidak mengikut `--accent`.
   ========================================================================== */
.opr--perjumpaan {
  --navy: #16225C;
  --navy-2: #1E2E73;
  --emas: #C39B4E;
  --merah: #E8342A;
  padding: 0;
}

.oprp__kepala { background: var(--navy); padding: 4mm 6mm; display: flex; align-items: center; gap: 4mm; }
.oprp__tahun {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: 23pt; font-weight: 800; color: #fff; letter-spacing: .06em; line-height: 1;
}
.oprp__tajuk { flex: 1; min-width: 0; }
.oprp__tajuk b { display: block; font-size: 26pt; font-weight: 800; color: var(--merah); line-height: 1.05; letter-spacing: -.01em; }
.oprp__tajuk i { display: block; font-style: normal; font-size: 18pt; font-weight: 700; color: var(--emas); letter-spacing: .22em; line-height: 1.3; }
.oprp__tajuk span { display: block; font-size: 24pt; font-weight: 800; color: #fff; letter-spacing: .16em; line-height: 1.15; }
.oprp__cop {
  align-self: flex-start; flex: none;
  background: var(--emas); color: var(--navy);
  padding: 1.5mm 3.5mm; border-radius: 1mm;
  font-size: 9pt; font-weight: 800; letter-spacing: .08em;
}
.oprp__jalur { height: 2.5mm; background: var(--emas); }

.oprp__unit { display: flex; align-items: center; gap: 4mm; padding: 4mm 7mm 0; }
.oprp__logo { height: 13mm; object-fit: contain; }
.oprp__pil {
  background: var(--navy); color: var(--emas);
  padding: 2mm 6mm; border-radius: 1mm;
  font-size: 13pt; font-weight: 800; letter-spacing: .1em;
}

.oprp__badan { display: grid; grid-template-columns: 46mm 1fr; gap: 5mm; padding: 4mm 7mm 0; flex: 1; }

/* lajur maklumat kiri */
.oprp__sisi { background: var(--navy); border-radius: 2mm; padding: 4mm 3mm 6mm; align-self: start; }
.oprp__medan + .oprp__medan { margin-top: 3mm; }
.oprp__medan dt {
  background: var(--emas); color: var(--navy);
  padding: 1.6mm 2mm; border-radius: .8mm; text-align: center;
  font-size: 9pt; font-weight: 800; letter-spacing: .06em;
}
/* pre-line supaya hari boleh diletak pada baris kedua di bawah tarikh */
.oprp__medan dd { margin: 2mm 0 0; color: #fff; text-align: center; font-size: 9.4pt; font-weight: 600; line-height: 1.35; white-space: pre-line; }

/* gambar */
.oprp__gambar { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5mm; }
.oprp__gambar img {
  width: 100%; height: 33mm; object-fit: cover;
  border: 1.2pt solid var(--emas); border-radius: 1mm; background: var(--opr-lorek);
}
.oprp__gambar--kosong {
  grid-column: 1 / -1; padding: 10mm; text-align: center;
  font-size: 8.4pt; color: var(--opr-lemah);
  border: 1pt dashed var(--opr-garis); border-radius: 1.5mm;
}

/* Seksyen berlabel emas.
   Dua lajur BEBAS, bukan grid — dalam grid, sel pendek di sebelah kiri
   terpaksa menunggu sel panjang di sebelah kanan dan meninggalkan jurang
   kosong yang besar. */
.oprp__grid { display: flex; gap: 5mm; margin-top: 3.5mm; align-items: flex-start; }
.oprp__lajur { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3mm; }
.oprp__seksyen { break-inside: avoid; }
.oprp__seksyen--penuh { margin-top: 3mm; }
.oprp__label {
  display: inline-block;
  background: var(--emas); color: var(--navy);
  padding: 1mm 3mm; border-radius: .8mm; margin-bottom: 1.5mm;
  font-size: 8.4pt; font-weight: 800; font-style: italic; letter-spacing: .02em;
}
.oprp__isi { margin: 0; padding-left: 4.5mm; font-size: 9pt; }
.oprp__isi li { margin-bottom: .6mm; }
.oprp__isi--kosong { list-style: none; padding-left: 0; color: var(--opr-lemah); }
.oprp__kiraan { font-size: 13pt; font-weight: 800; padding-left: 1mm; }

/* --------------------------------------------------------------- tandatangan */
.opr__tandatangan {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12mm;
  margin-top: 4mm;
  padding-top: 1mm;
  break-inside: avoid;
}
/* Tiga penandatangan: guru penasihat, PK Kokurikulum, Guru Besar. */
.opr__tandatangan--tiga { grid-template-columns: repeat(3, 1fr); gap: 6mm; text-align: center; padding: 0 7mm; }
.opr__tandatangan--tiga .opr__ttd { font-size: 8pt; }
.opr__tandatangan--tiga .garis { height: 8mm; border-bottom: none; }
.opr__tandatangan--tiga .titik { border-top: 1pt dotted var(--opr-teks); margin-bottom: 1mm; }
.opr__tandatangan--tiga .peranan { display: block; font-weight: 400; text-transform: none; color: var(--opr-teks); }

.oprp__kaki {
  margin-top: auto; background: var(--navy);
  padding: 3mm; text-align: center;
  font-size: 13pt; font-weight: 800; letter-spacing: .06em; color: var(--emas);
}
.opr__ttd { font-size: 8.6pt; }
.opr__ttd .garis {
  height: 10mm;
  border-bottom: .8pt solid var(--opr-teks);
  margin-bottom: 1.5mm;
}
.opr__ttd b { display: block; font-weight: 700; text-transform: uppercase; }
.opr__ttd span { display: block; color: var(--opr-lemah); }

.opr__kaki {
  margin-top: 4mm;
  padding-top: 2mm;
  border-top: .8pt solid var(--opr-garis);
  display: flex;
  justify-content: space-between;
  font-size: 7.2pt;
  color: var(--opr-lemah);
}

/* ==========================================================================
   PRATONTON DI SKRIN
   Helaian ditunjuk dalam bekas berskala supaya muat pada telefon.
   ========================================================================== */
.opr-pratonton {
  overflow: auto;
  padding: var(--s4);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.opr-pratonton .opr {
  box-shadow: var(--sh-2);
  border: 1px solid var(--line);
  margin-inline: auto;
  transform-origin: top center;
}

/* ==========================================================================
   CETAKAN
   Semasa mencetak, hanya lembaran OPR yang keluar — bukan antara muka.
   ========================================================================== */
@page { size: A4 portrait; margin: 0; }

@media print {
  body.mod-cetak .app { display: none !important; }
  body.mod-cetak .opr-cetak { display: block !important; }
  body.mod-cetak { background: #fff; }

  /* Jarak antara helaian hanya untuk pratonton. Dalam cetakan ia menolak
     helaian kedua keluar dan mencipta halaman kosong. */
  .opr, .opr + .opr {
    width: 210mm;
    min-height: 296mm;
    margin: 0;
    box-shadow: none;
    border: none;
    break-after: page;
    transform: none !important;
  }
  .opr:last-child { break-after: auto; }

  /* Latar berwarna mesti kekal — tanpa ini kotak statistik jadi putih. */
  .opr, .opr * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}