:root { --brand:#0d776f; --accent:#ffb703; --ink:#0f172a; --paper:#f8fafc; }
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,'Noto Sans',Arial;color:var(--ink);background:var(--paper)}
.header{position:sticky;top:0;z-index:30;background:#fff;border-bottom:1px solid #e5e7eb}
.container{max-width:1100px;margin:0 auto;padding:1rem}
.btn{display:inline-block;padding:.6rem 1rem;border-radius:.7rem;border:1px solid #e5e7eb;background:#fff;cursor:pointer}
.btn.primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn.danger{background:#ef4444;color:#fff;border-color:#ef4444}
.card{background:#fff;border:1px solid #e5e7eb;border-radius:1rem;padding:1rem;margin:.7rem 0}
.grid{display:grid;gap:1rem}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
label{display:block;margin:.5rem 0 .25rem}
input,select,textarea{width:100%;padding:.55rem .7rem;border:1px solid #e5e7eb;border-radius:.6rem}
table{width:100%;border-collapse:collapse}
th,td{padding:.6rem;border-bottom:1px solid #e5e7eb;text-align:left}
.alert{padding:1rem;border:1px solid #fde68a;background:#fffbeb;border-radius:.8rem}
.nav a{margin-right:1rem;text-decoration:none;color:#334155}
.nav a.active{font-weight:700;color:var(--brand)}
@media print{
  .no-print{display:none!important}
  body{background:#fff}
  .card{border:none;padding:.2rem;margin:0}
  th,td{border:1px solid #000}
}
/* === Penugasan: daftar madrasah (checkbox) === */
.assign-list{
  display:grid;
  gap:.75rem;
  grid-template-columns: 1fr;        /* 1 kolom di mobile */
}
@media (min-width: 900px){
  .assign-list{ grid-template-columns: repeat(2, minmax(0,1fr)); } /* 2 kolom di desktop */
}
.assign-item{
  display:flex;
  align-items:flex-start;
  gap:.75rem;
  padding:.75rem 1rem;
  border:1px solid #e5e7eb;
  border-radius:12px;
  background:#fff;
  width:100%;
  text-align:left;                   /* pastikan tidak ketarik rata kanan */
}
.assign-item:hover{ border-color:#d1d5db; }
.assign-item input[type="checkbox"]{
  margin-top:.2rem;                  /* sejajarkan dengan judul */
  flex:0 0 auto;
}
.assign-main{ flex:1 1 auto; min-width:0; }
.assign-title{ font-weight:700; line-height:1.2; }
.assign-sub{ color:#64748b; font-size:.9rem; }

/* ===== Hard fix tampilan checkbox penugasan ===== */

/* Layout grid: 1 kolom mobile, 2 kolom desktop */
#schoolList{
  display:grid !important;
  gap:.75rem !important;
  grid-template-columns:1fr !important;
}
@media (min-width:900px){
  #schoolList{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}

/* Setiap item jadi flex kiri */
#schoolList > label.assign-item{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  gap:.75rem !important;
  padding:.9rem 1.1rem !important;
  border:1px solid #e5e7eb !important;
  border-radius:12px !important;
  background:#fff !important;
  width:100% !important;
  text-align:left !important;
  overflow:visible !important;   /* jangan sembunyiin konten */
}

/* Checkbox */
#schoolList > label.assign-item > input[type="checkbox"]{
  flex:0 0 auto !important;
  margin-top:.2rem !important;
}

/* Kontainer teks: pastikan terlihat & melebar */
#schoolList > label.assign-item > .assign-main{
  display:block !important;
  flex:1 1 auto !important;
  min-width:0 !important;
  color:#0f172a !important;
  font-size:1rem !important;
  line-height:1.35 !important;
}

/* Baris judul & alamat */
#schoolList .assign-title{
  display:block !important;
  font-weight:700 !important;
  margin:0 0 .15rem 0 !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
}
#schoolList .assign-sub{
  display:block !important;
  color:#64748b !important;
  font-size:.92rem !important;
}

/* Kalau ada style lama yang memusatkan/hilangkan teks, matikan di sini */
#schoolList, #schoolList *{
  text-align:left !important;
  visibility:visible !important;
  opacity:1 !important;
}
/* === HARD FIX: Penugasan (checkbox + teks) pakai GRID yang stabil === */

/* Kontainer list: 1 kolom di mobile, 2 kolom di layar lebar */
#schoolList{
  display:grid !important;
  gap: .9rem !important;
  grid-template-columns: 1fr !important;
}
@media (min-width: 900px){
  #schoolList{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}

/* Tiap item jadi GRID 2 kolom: [checkbox] [teks] */
#schoolList > label.assign-item{
  display:grid !important;
  grid-template-columns: 24px 1fr !important;   /* 24px utk checkbox, sisanya teks */
  align-items:flex-start !important;
  column-gap: .8rem !important;
  padding: .95rem 1.1rem !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  background: #fff !important;
  width: 100% !important;
  text-align: left !important;
  overflow: visible !important;
}

/* Checkbox kolom-1 tetap mungil & rata atas */
#schoolList > label.assign-item > input[type="checkbox"]{
  width: 18px !important;
  height: 18px !important;
  margin: .2rem 0 0 0 !important;
  place-self: start center !important;    /* vertikal atas, horizontal tengah di kolom kecil */
}

/* Kolom-2: teks */
#schoolList > label.assign-item > .assign-main{
  display:block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  color: #0f172a !important;
  font-size: 1rem !important;
  line-height: 1.45 !important;
}

/* Judul & alamat */
#schoolList .assign-title{
  display:block !important;
  font-weight: 700 !important;
  margin: 0 0 .15rem 0 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}
#schoolList .assign-sub{
  display:block !important;
  color: #64748b !important;
  font-size: .92rem !important;
  white-space: normal !important;
}

/* --- RESET kemungkinan gaya lama yang mengganggu --- */
#schoolList, #schoolList *{
  text-align: left !important;
  writing-mode: horizontal-tb !important;
  direction: ltr !important;
  text-indent: 0 !important;
  letter-spacing: normal !important;
  word-spacing: normal !important;
  float: none !important;
  position: static !important;
  transform: none !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.tgl-center{
  text-align:center;
  font-weight:600;           /* opsional: ditebalkan */
}
@media print {
  .tgl-center{ text-align:center; }
}