/* 🎨 GLOBAL & LAYOUT STYLE */
* { box-sizing: border-box; }
body { font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; background: #f4f6f9; padding: 10px; margin: 0; color: #333; }
.container { max-width: 900px; margin: 15px auto; background: white; padding: 20px; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); }
h2, h3, h4 { color: #2c3e50; margin-bottom: 15px; }
hr { border: 0; border-top: 1px solid #eee; margin: 25px 0; }

/* ✍️ FORM ELEMENTS */
input, select, textarea, button { width: 100%; margin-top: 12px; padding: 12px; border: 1px solid #ccc; border-radius: 8px; font-size: 15px; outline: none; transition: all 0.3s ease; }
input:focus, select:focus, textarea:focus { border-color: #3498db; box-shadow: 0 0 5px rgba(52, 152, 219, 0.3); }
button { background: #3498db; color: white; border: none; font-weight: bold; cursor: pointer; }
button:active { transform: scale(0.98); }
.btn-danger { background: #e74c3c; padding: 6px 12px; width: auto; margin: 0; }
.btn-edit { background: #f1c40f; color:#333; padding: 6px 12px; width: auto; margin: 0; }
.btn-excel { background: #2ecc71; margin-top: 15px; }
.btn-pdf { background: #9b59b6; margin-top: 15px; }
.btn-reset-data { background: #d35400; margin-top: 12px; color: white; font-weight: bold; }

/* TABS SYSTEM */
.tab-container { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 20px; border-bottom: 2px solid #ddd; padding-bottom: 5px; }
.tab-btn { background: #f8f9fa; color: #555; border: 1px solid #ddd; width: auto; margin: 0; padding: 10px 15px; border-radius: 8px 8px 0 0; font-size: 14px; flex-grow: 1; text-align: center; text-decoration: none; cursor: pointer; display: inline-block; }
.tab-btn.active { background: #3498db; color: white; border-color: #3498db; font-weight: bold; }
.tab-content { display: none; animation: fadeIn 0.3s; }
.tab-content.active { display: block; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* MODULE BOXES */
.module-box { padding: 15px; margin-top: 15px; border-radius: 8px; border: 1px solid; }
.bg-light { background: #f8f9fa; border-color: #e2e8f0; }
.bg-blue { background: #eaf2f8; border-color: #b9d7ea; }
.bg-green { background: #f4fbf7; border-color: #c2ebd4; }
.bg-purple { background: #fdf5ff; border-color: #f0daf7; }
.bg-yellow { background: #fef9e7; border-color: #f1c40f; }
.bg-red { background: #fdedec; border-color: #f5b7b1; border-width: 2px; }

/* TABLE SYSTEM */
table { width: 100%; border-collapse: collapse; margin-top: 15px; }
th, td { border: 1px solid #e0e0e0; padding: 10px; text-align: left; font-size: 13px; }
th { background: #f8f9fa; color: #555; }
.aksi-buttons { display: flex; gap: 5px; flex-wrap: wrap; }
.radio-group { display: flex; gap: 10px; justify-content: center; }
.radio-group label { display: flex; align-items: center; gap: 3px; font-weight: bold; cursor: pointer; font-size: 12px;}
.radio-group input { width: auto; margin: 0; }

@media screen and (max-width: 600px) {
  .tab-btn { flex-basis: 45%; }
  .dpl-tgl-range { flex-direction: column; gap: 12px; }
  table, thead, tbody, th, td, tr { display: block; }
  thead tr { position: absolute; top: -9999px; left: -9999px; }
  tr { background: #fff; border: 1px solid #ddd; border-radius: 8px; margin-bottom: 15px; padding: 8px; }
  td { border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 45%; text-align: right; }
  td:before { position: absolute; top: 10px; left: 10px; width: 40%; text-align: left; font-weight: bold; color: #7f8c8d; }
  /* Auto-labels for responsive tables - Needs specific classes per table */
  /* Label spesifik untuk masing-masing tabel di tampilan HP */
  #tabelRiwayatGuru tr td:nth-of-type(1):before { content: "Waktu"; }
  #tabelRiwayatGuru tr td:nth-of-type(2):before { content: "Jenis"; }
  #tabelRiwayatGuru tr td:nth-of-type(3):before { content: "Hadir"; }
  #tabelRiwayatGuru tr td:nth-of-type(4):before { content: "Materi"; }
  #tabelRiwayatGuru tr td:nth-of-type(5):before { content: "Aksi"; }

  #tabelRiwayatAdmin tr td:nth-of-type(1):before { content: "Waktu"; }
  #tabelRiwayatAdmin tr td:nth-of-type(2):before { content: "Guru/Mapel"; }
  #tabelRiwayatAdmin tr td:nth-of-type(3):before { content: "Hadir"; }
  #tabelRiwayatAdmin tr td:nth-of-type(4):before { content: "Materi"; }
  #tabelRiwayatAdmin tr td:nth-of-type(5):before { content: "Aksi"; }

  #tabelDaftarSiswa tr td:nth-of-type(1):before { content: "No"; }
  #tabelDaftarSiswa tr td:nth-of-type(2):before { content: "Nama Siswa"; }
  #tabelDaftarSiswa tr td:nth-of-type(3):before { content: "Kelas"; }
  #tabelDaftarSiswa tr td:nth-of-type(4):before { content: "Aksi"; }

  /* #tabelNilaiSiswa kolomnya dinamis (kolom penilaian bisa ditambah/dihapus guru), jadi
     labelnya dari atribut data-label yang digenerate JS, bukan nth-of-type tetap. */
  #tabelNilaiSiswa td:before { content: attr(data-label); }

  #tabelDaftarGuruAdmin tr td:nth-of-type(1):before { content: "Username"; }
  #tabelDaftarGuruAdmin tr td:nth-of-type(2):before { content: "PIN"; }
  #tabelDaftarGuruAdmin tr td:nth-of-type(3):before { content: "Nama Guru"; }
  #tabelDaftarGuruAdmin tr td:nth-of-type(4):before { content: "Mapel"; }
  #tabelDaftarGuruAdmin tr td:nth-of-type(5):before { content: "Aksi"; }

  #bodyAbsensi tr td:nth-of-type(1):before { content: "No"; }
  #bodyAbsensi tr td:nth-of-type(2):before { content: "Nama Siswa"; }
  #bodyAbsensi tr td:nth-of-type(3):before { content: "Kelas"; }
  #bodyAbsensi tr td:nth-of-type(4):before { content: "Kehadiran"; }

  #tabelMasterSiswa tr td:nth-of-type(1):before { content: "Nama Siswa"; }
  #tabelMasterSiswa tr td:nth-of-type(2):before { content: "Kelas"; }
  #tabelMasterSiswa tr td:nth-of-type(3):before { content: "Aksi"; }

  .tbl-peserta-sckir tr td:nth-of-type(1):before { content: "No"; }
  .tbl-peserta-sckir tr td:nth-of-type(2):before { content: "Nama"; }
  .tbl-peserta-sckir tr td:nth-of-type(3):before { content: "Kelas"; }
  .tbl-peserta-sckir tr td:nth-of-type(4):before { content: "Mapel"; }
  .tbl-peserta-sckir tr td:nth-of-type(5):before { content: "Pembimbing"; }

  .tbl-rekap-preview tr td:nth-of-type(1):before { content: "No"; }
  .tbl-rekap-preview tr td:nth-of-type(2):before { content: "Nama Guru"; }
  .tbl-rekap-preview tr td:nth-of-type(3):before { content: "Reguler"; }
  .tbl-rekap-preview tr td:nth-of-type(4):before { content: "Persentase"; }
  .tbl-rekap-preview tr td:nth-of-type(5):before { content: "Lomba"; }
  .tbl-rekap-preview tr td:nth-of-type(6):before { content: "Total"; }
  .tbl-rekap-preview tr td:nth-of-type(7):before { content: "Status"; }
  .tbl-rekap-preview tr td:nth-of-type(8):before { content: "Respon Guru"; }

  /* Pengecualian: tabel Detail Kehadiran (popup) cuma 3 kolom sempit (No/Nama/Status),
     tetap dibuat tabel biasa karena lebih enak dibaca dibanding kartu per baris. */
  #tabelDetailAbsensi, #tabelDetailAbsensi thead, #tabelDetailAbsensi tbody, #tabelDetailAbsensi tr, #tabelDetailAbsensi th, #tabelDetailAbsensi td { display: revert; }
  #tabelDetailAbsensi thead tr { position: static; left: auto; top: auto; }
  #tabelDetailAbsensi tr { background: none; border: none; margin: 0; padding: 0; }
  #tabelDetailAbsensi td:before { content: none; }

  .tbl-absensi-preview tr td:nth-of-type(1):before { content: "Tanggal"; }
  .tbl-absensi-preview tr td:nth-of-type(2):before { content: "Guru"; }
  .tbl-absensi-preview tr td:nth-of-type(3):before { content: "Nama Siswa"; }
  .tbl-absensi-preview tr td:nth-of-type(4):before { content: "Kelas"; }
  .tbl-absensi-preview tr td:nth-of-type(5):before { content: "Kehadiran"; }
}

/* Pilihan lomba di Input Bimbingan: dropdown + tombol, aman dari overflow di HP */
.lomba-picker-row{display:flex;gap:8px;margin-top:4px;flex-wrap:wrap;}
.lomba-picker-row select{flex:1 1 160px;min-width:0;margin-top:0;}
.lomba-picker-row button{width:auto;margin:0;white-space:nowrap;}
@media screen and (max-width:600px) {
  .lomba-picker-row select{flex:1 1 100%;}
}

/* === Daftar Periksa Lomba (DPL) === */
.dpl-badge{font-size:11px;font-weight:bold;padding:3px 9px;border-radius:999px;display:inline-block;}
.dpl-qrow{border-top:1px solid #eee;padding:8px 0;}
.dpl-act{display:flex;gap:5px;flex-wrap:wrap;}
.dpl-act button{width:auto;margin:0;padding:5px 10px;font-size:12px;}

/* Rentang tanggal pelaksanaan lomba: Mulai/Selesai berdampingan, aman dari overflow di HP */
.dpl-tgl-range{display:flex;gap:10px;margin-top:4px;}
.dpl-tgl-range .fld{flex:1;min-width:0;}
.dpl-tgl-range .fld label{font-size:12px;color:#7f8c8d;font-weight:bold;display:block;margin-bottom:2px;}
.dpl-tgl-range .fld input{margin-top:0;width:100%;}

/* Daftar santri peserta lomba: klik nama -> modal ceklis */
.dpl-santri-list{border:1px solid #e0e0e0;border-radius:8px;margin-top:10px;background:#fff;overflow:hidden;}
.dpl-santri-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid #f0f0f0;cursor:pointer;transition:background 0.15s;}
.dpl-santri-row:last-child{border-bottom:none;}
.dpl-santri-row:hover{background:#f8f9fa;}
.dpl-santri-row.ikut{background:#f4fbf7;}
.dpl-santri-info{flex:1;display:flex;flex-direction:column;}
.dpl-santri-info .nm{font-weight:bold;font-size:14px;}
.dpl-santri-info .kls{font-size:12px;color:#7f8c8d;}
.dpl-santri-status{font-size:12px;color:#16a085;white-space:nowrap;font-weight:bold;}
.dpl-santri-row:not(.ikut) .dpl-santri-status{color:#999;font-weight:normal;}
.dpl-santri-row .btn-danger{width:auto;margin:0;padding:5px 10px;font-size:12px;}

/* === Pilih Siswa dari Data Master (search + checklist) === */
.pilih-siswa-filter{display:flex;gap:10px;}
.pilih-siswa-filter input, .pilih-siswa-filter select{margin-top:0;}
.pilih-siswa-list{max-height:260px;overflow-y:auto;border:1px solid #e0e0e0;border-radius:8px;margin-top:10px;background:#fff;}
.pilih-siswa-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid #f0f0f0;font-size:13px;}
.pilih-siswa-item:last-child{border-bottom:none;}
.pilih-siswa-item input[type="checkbox"]{width:auto;margin:0;}
.pilih-siswa-item .nm{flex:1;}
.pilih-siswa-item .kls{color:#7f8c8d;font-size:12px;}
.pilih-siswa-item.sudah{opacity:0.55;}
.pilih-siswa-empty{padding:14px;text-align:center;color:#999;font-size:13px;}
.pilih-siswa-count{font-size:12px;color:#555;margin-top:8px;}

/* === Filter Kelas Absensi (ceklis, bisa gabung beberapa kelas) === */
.kelas-filter-chips{display:flex;flex-wrap:wrap;gap:8px;}
.kelas-filter-chip{display:flex;align-items:center;gap:5px;background:#f0f4f2;border:1px solid #dfe6e2;border-radius:20px;padding:5px 12px;font-size:12px;font-weight:bold;cursor:pointer;}
.kelas-filter-chip input[type="checkbox"]{width:auto;margin:0;}

/* === SOP & Panduan (PDF) === */
.sop-card-list{display:flex;flex-direction:column;gap:8px;margin-top:10px;}
.sop-card{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #e0e0e0;border-radius:8px;background:#fff;cursor:pointer;transition:background 0.15s;}
.sop-card:hover{background:#f8f9fa;}
.sop-card .icon{font-size:24px;line-height:1;}
.sop-card .info{flex:1;min-width:0;}
.sop-card .info .judul{font-weight:bold;font-size:14px;}
.sop-card .info .meta{font-size:11px;color:#7f8c8d;margin-top:2px;}
.sop-viewer-wrap{margin-top:10px;border:1px solid #e0e0e0;border-radius:8px;overflow:hidden;background:#f4f6f9;}
.sop-viewer-wrap iframe{width:100%;height:65vh;border:none;display:block;}