:root{--green:#16a34a;--ink:#111827;--bg:#f8fafc;}
*{box-sizing:border-box}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;margin:0;background:var(--bg);color:var(--ink)}
a{color:var(--green);text-decoration:none}
.nav{display:flex;gap:12px;align-items:center;padding:12px 16px;background:#fff;border-bottom:1px solid #e5e7eb;position:sticky;top:0;z-index:10}
.nav .brand{font-weight:800;color:var(--green)}
.container{max-width:1100px;margin:0 auto;padding:16px}
.btn{display:inline-block;padding:8px 12px;border:1px solid #d1d5db;border-radius:8px;background:#fff;color:#111}
.btn.primary{background:var(--green);border-color:var(--green);color:#fff}
.card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:16px;margin-bottom:16px}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border:1px solid #e5e7eb;padding:8px;font-size:14px}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
.col-6{grid-column:span 6}
.col-12{grid-column:span 12}
@media (max-width:768px){.col-6{grid-column:span 12}}
input,select,textarea{width:100%;padding:8px;border:1px solid #d1d5db;border-radius:8px}
.label{font-size:12px;color:#6b7280;margin-bottom:6px}
.form-row{margin-bottom:12px}
.badge{display:inline-block;background:#eafff1;border:1px solid #b7f0c2;color:#065f46;border-radius:9999px;padding:2px 8px;font-size:12px}
.footer{padding:24px;color:#6b7280;font-size:12px;text-align:center}
/* --- Layout grid dua kolom responsif --- */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 900px) {
  .grid-2 { grid-template-columns: 1fr; }
}

/* --- Form field --- */
.form-row { display: grid; grid-template-columns: 160px 1fr; align-items: center; gap: 10px; }
.form-row .label { color:#374151; font-weight:600; }
.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="password"],
.form-row input[type="date"],
.form-row select,
.form-row textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #999999;
  border-radius: 10px;
  background:#fff;
  font-size: 14px;
}
.form-row small.muted { grid-column: 2 / span 1; color:#6b7280; }

/* --- Kartu --- */
.card { border-radius: 14px; padding: 20px; background:#fff; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.card h3 { margin: 0 0 14px; }

/* --- Tombol --- */
.btn { padding: 10px 14px; border-radius: 10px; border:1px solid #10b981; color:#fff; background:#10b981; }
.btn.secondary { background:#f3f4f6; color:#111827; border-color:#e5e7eb; }
.btn.block { width: 100%; }

/* --- Teks bantuan/monospace --- */
.code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background:#f3f4f6; padding:2px 6px; border-radius:6px; }

/* --- Tabel responsif --- */
.table-responsive { overflow: auto; }
.table { width:100%; border-collapse: collapse; }
.table th, .table td { padding:10px 12px; border-bottom:1px solid #eee; }
.table .tight { width:1%; white-space:nowrap; }

/* --- Kolom kecil untuk select role --- */
.w-120 { max-width: 120px; }
/* Grid daftar sekolah */
.school-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px 14px;
  margin-top: 10px;
}

/* Kartu kecil untuk checkbox */
.check-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  transition: border-color .15s, box-shadow .15s, background .15s;
  cursor: pointer;
}
.check-card:hover { border-color: #c7cad1; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.check-card input { width: 18px; height: 18px; }
.check-card .label {
  line-height: 1.25;
  color: #111827;
}

/* Bar alat di atas grid */
.school-tools {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
}
.school-tools .search {
  flex: 1 1 280px;
}
.school-tools input[type="text"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
}

/* Badge jumlah terpilih */
.badge {
  display:inline-block; border-radius:9999px; padding:4px 10px;
  font-size:12px; background:#eef2ff; color:#3730a3; border:1px solid #c7d2fe;
}
.btn.danger {
  background:#fee2e2;
  border:1px solid #fecaca;
  color:#b91c1c;
}
.btn.danger:hover {
  background:#fecaca;
}