@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* Palet & font resmi pkbm.id (situs utama) -- lihat webapp/BRANDING.md */
:root {
  /* Navy header/brand-bar: KONSTAN, tidak ikut ganti terang/gelap (sama kayak header pkbm.id) */
  --brand-navy:#0e2e4c; --brand-navy-fg:#fff;

  --bg:#f7f9fb; --panel:#fff; --panel2:#eef2f6; --border:#dce3ea;
  --text:#263241; --muted:#57647a;
  --accent:#0e2e4c; --accent-fg:#fff;      /* navy -- tombol/link utama, sama seperti pkbm.id */
  --gold:#dda52d; --gold-dark:#cc9121;      /* aksen emas khas pkbm.id, dipakai buat highlight khusus */
  --ok:#1f9d5c; --ok-bg:#e5f7ee;
  --pending:#b8860b; --pending-bg:#fdf3d8;
  --progress-c:#2293b2; --progress-bg:#e3f2f6;
  --belum:#d23a4f; --belum-bg:#fbe4e8;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#081b2e; --panel:#0e2e4c; --panel2:#123a63; --border:#1f4266;
    --text:#f2f5f8; --muted:#9fb0c4;
    --accent:#dda52d; --accent-fg:#241a04;  /* emas nyala di atas navy gelap */
    --gold:#dda52d; --gold-dark:#f0bb52;
    --ok:#34c37b; --ok-bg:#123524;
    --pending:#e0b83d; --pending-bg:#3a2f10;
    --progress-c:#4fc3de; --progress-bg:#0f3441;
    --belum:#ef5b6f; --belum-bg:#3a1420;
  }
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text);
  font:14px/1.5 'Plus Jakarta Sans', -apple-system,"Segoe UI",Roboto,sans-serif; }
.brand-bar { background:var(--brand-navy); padding:14px 24px; display:flex; align-items:center; gap:12px; }
.brand-bar img { height:32px; display:block; }
.brand-bar .brand-name { color:#fff; font-weight:700; font-size:14px; letter-spacing:.02em; }

header.page-head { padding:22px 24px 8px; }
header.page-head h1 { font-size:20px; margin:0 0 3px; }
header.page-head .sub { color:var(--muted); font-size:12.5px; }
.wrap { padding:16px 24px 48px; max-width:1400px; margin:0 auto; }
.wrap.narrow { max-width:640px; }
a { color:var(--accent); }

.stats { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.stat { background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:10px 18px; min-width:120px; }
.stat .n { font-size:22px; font-weight:700; }
.stat .l { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.03em; }
.stat.total .n { color:var(--accent); }
.stat.siswa .n { color:var(--belum); }
.stat.admin .n { color:var(--pending); }
.stat.selesai .n { color:var(--ok); }

.tabs { display:flex; gap:6px; margin-bottom:14px; flex-wrap:wrap; }
.tab { background:var(--panel); border:1px solid var(--border); color:var(--muted);
  padding:8px 14px; border-radius:999px; font-size:12.5px; font-weight:600; text-decoration:none; }
.tab.active { background:var(--accent); border-color:var(--accent); color:var(--accent-fg); }
.tab .count { opacity:.75; font-weight:500; margin-left:3px; }

input[type=text], input[type=search], input[type=tel], input[type=date], textarea, select {
  background:var(--panel); border:1px solid var(--border); color:var(--text);
  padding:9px 12px; border-radius:8px; font-size:13.5px; font-family:inherit;
}
input:focus, textarea:focus, select:focus { outline:none; border-color:var(--accent); }
input#q { width:100%; max-width:420px; margin-bottom:14px; }

.card-list { display:flex; flex-direction:column; gap:10px; }
.card { background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:14px 16px; }
.card-top { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; }
.name { font-weight:600; font-size:14.5px; }
.meta { color:var(--muted); font-size:12px; margin-top:2px; }
.badge-type { font-size:10.5px; padding:3px 8px; border-radius:999px; font-weight:600; white-space:nowrap; }
.badge-type.siswa { background:var(--belum-bg); color:var(--belum); }
.badge-type.admin { background:var(--pending-bg); color:var(--pending); }
.badge-type.done { background:var(--ok-bg); color:var(--ok); }

.progress-txt { font-size:12px; color:var(--muted); margin-left:auto; }
.btn { background:var(--accent); color:var(--accent-fg); border:none; padding:9px 16px; border-radius:8px;
  font-size:13px; font-weight:600; cursor:pointer; text-decoration:none; display:inline-block; }
.btn.secondary { background:var(--panel2); color:var(--text); border:1px solid var(--border); }
.btn.wa { background:#25D366; color:#04340f; }
.btn.disabled, .btn:disabled { background:var(--panel2); color:var(--muted); cursor:default; }
.btn.small { padding:6px 11px; font-size:12px; }
.btn.danger { background:var(--belum); }

.items { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.item { font-size:11px; padding:4px 8px; border-radius:6px; display:flex; align-items:center; gap:4px; font-weight:600; }
.item.ok { background:var(--ok-bg); color:var(--ok); }
.item.pending { background:var(--pending-bg); color:var(--pending); }
.item.progress { background:var(--progress-bg); color:var(--progress-c); }
.item.belum { background:var(--belum-bg); color:var(--belum); }

.legend { display:flex; gap:14px; flex-wrap:wrap; font-size:11.5px; color:var(--muted); margin:10px 0 16px; }
.legend span.item-legend { display:inline-flex; align-items:center; gap:5px; }
.dot { width:9px; height:9px; border-radius:50%; display:inline-block; }

.panel { background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:20px; }
.panel + .panel { margin-top:14px; }
.field { margin-bottom:14px; }
.field label { display:block; font-size:12.5px; font-weight:600; margin-bottom:5px; }
.field .hint { color:var(--muted); font-size:11.5px; margin-top:4px; }
.field input, .field textarea, .field select { width:100%; }
.field textarea { min-height:70px; resize:vertical; }

.alert { padding:12px 14px; border-radius:8px; font-size:13px; margin-bottom:14px; }
.alert.error { background:var(--belum-bg); color:var(--belum); }
.alert.info { background:var(--progress-bg); color:var(--progress-c); }
.alert.warn { background:var(--pending-bg); color:var(--pending); }
.alert.success { background:var(--ok-bg); color:var(--ok); }

table.admin-table { width:100%; border-collapse:collapse; font-size:13px; }
table.admin-table th, table.admin-table td { text-align:left; padding:9px 10px; border-bottom:1px solid var(--border); }
table.admin-table th { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.02em; }
table.admin-table th.sortable { cursor:pointer; user-select:none; }
table.admin-table th.sortable:hover { color:var(--text); }
table.admin-table th .sort-ind { color:var(--accent); font-size:9px; margin-left:2px; }
table.admin-table tr:hover td { background:var(--panel2); }

.badge-step { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px;
  border-radius:50%; background:var(--panel2); color:var(--muted); font-weight:700; font-size:12px; }
.badge-step.active { background:var(--accent); color:var(--accent-fg); }
.badge-step.done { background:var(--ok); color:#fff; }

.compare { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.compare .col { background:var(--panel2); border-radius:8px; padding:10px 12px; }
.compare .col .l { font-size:10.5px; color:var(--muted); text-transform:uppercase; margin-bottom:4px; }
.compare .col.new { border:1px solid var(--accent); }

.topbar { display:flex; justify-content:space-between; align-items:center; padding:12px 24px; background:var(--brand-navy); }
.topbar .brand { display:flex; align-items:center; gap:10px; color:#fff; font-weight:700; }
.topbar .brand img { height:26px; display:block; }
.topbar nav a { color:rgba(255,255,255,.75); text-decoration:none; font-size:13px; margin-left:16px; }
.topbar nav a.active, .topbar nav a:hover { color:#fff; }

/* Modal (mis. lihat dokumen bukti) */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:1000;
  align-items:center; justify-content:center; padding:20px; }
.modal-overlay.open { display:flex; }
.modal-box { background:var(--panel); border-radius:12px; width:100%; max-width:720px; max-height:88vh;
  display:flex; flex-direction:column; overflow:hidden; }
.modal-box .modal-head { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; border-bottom:1px solid var(--border); }
.modal-box .modal-head strong { font-size:13.5px; }
.modal-box .modal-close { background:none; border:none; color:var(--muted); font-size:20px; cursor:pointer; line-height:1; padding:4px; }
.modal-box .modal-close:hover { color:var(--text); }
.modal-box .modal-body { flex:1; overflow:auto; background:var(--panel2); display:flex; align-items:center; justify-content:center; }
.modal-box .modal-body iframe, .modal-box .modal-body img { width:100%; max-height:76vh; border:none; display:block; }