/* Portal Pengawas PAI — tambahan di atas style.css + hoot.css (hijau tua + emas) milik portal pengawas.
   Ramp sekuensial satu warna (terang → gelap) untuk besaran/urutan; dua warna hanya untuk positif vs perlu bimbingan. */
:root{
  --sq1:#D5EFE0; --sq2:#A6DBBE; --sq3:#6CC096; --sq4:#2E9A66; --sq5:#0F6B3E;
  --pos:#1F9D63; --neg:#D9822B; --kosong:#E9EFEB;
}
.pp-filter{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-bottom:16px}
.pp-filter .form-group{margin:0}
.pp-filter label{font-size:11.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;display:block;margin-bottom:4px}
.pp-filter select,.pp-filter input[type=search]{min-width:150px;padding:8px 10px;font-size:13.5px}
.pp-seg{display:inline-flex;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--surface);flex-wrap:wrap}
.pp-seg a{padding:8px 12px;font-size:12.5px;font-weight:600;color:var(--ink);text-decoration:none;white-space:nowrap}
.pp-seg a+a{border-left:1px solid var(--border)}
.pp-seg a[aria-current="true"]{background:var(--primary);color:#fff}
.pp-seg a:hover{text-decoration:none;background:var(--primary-light)}
.pp-seg a[aria-current="true"]:hover{background:var(--primary)}

.pp-kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
@media (max-width:640px){.pp-kpi{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pp-tile{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:13px 15px;min-width:0}
.pp-tile .l{font-size:11.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.pp-tile .v{font-family:var(--font-display);font-size:26px;font-weight:800;line-height:1.2;font-variant-numeric:tabular-nums;color:var(--ink)}
.pp-tile .v small{font-size:13px;color:var(--muted);font-weight:600;font-family:var(--font-body)}
.pp-tile .d{font-size:12px;color:var(--muted);margin-top:2px}

.pp-dua{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
@media (max-width:1000px){.pp-dua{grid-template-columns:1fr}}
.card{min-width:0}
.card h3{font-size:15px;margin:0 0 2px}
.card .sub{font-size:12.5px;color:var(--muted);margin:0 0 12px}

/* Bilah progres cakupan */
.pp-cakup{display:flex;flex-direction:column;gap:9px;font-size:13px}
.pp-cakup-r{display:grid;grid-template-columns:minmax(120px,190px) minmax(0,1fr) 84px;grid-template-areas:"lb bar jl";gap:4px 12px;align-items:center}
.pp-cakup-r .lb{grid-area:lb}.pp-cakup-r .pp-prog{grid-area:bar}.pp-cakup-r .jl{grid-area:jl}
.pp-cakup .lb{color:var(--ink-soft)}
.pp-cakup .jl{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink);font-weight:600}
.pp-prog{height:10px;border-radius:99px;background:var(--kosong);overflow:hidden}
.pp-prog i{display:block;height:100%;background:var(--sq4);border-radius:99px 4px 4px 99px;min-width:2px}

/* Bilah sebaran bertumpuk (nilai, level praktik, status hafalan) */
.pp-sebar{display:flex;height:14px;border-radius:4px;overflow:hidden;background:var(--kosong);gap:2px;min-width:80px}
.pp-sebar i{display:block;height:100%}
.pp-sebar i:first-child{border-radius:4px 0 0 4px}.pp-sebar i:last-child{border-radius:0 4px 4px 0}
.pp-s1{background:var(--sq1)}.pp-s2{background:var(--sq2)}.pp-s3{background:var(--sq3)}.pp-s4{background:var(--sq4)}.pp-s5{background:var(--sq5)}
.pp-pos{background:var(--pos)}.pp-neg{background:var(--neg)}
.pp-legenda{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--ink-soft);margin:8px 0 2px}
.pp-legenda span{display:inline-flex;align-items:center;gap:6px}
.pp-legenda b{display:inline-block;width:11px;height:11px;border-radius:3px}

/* Histogram vertikal sederhana */
.pp-hist{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;align-items:end;height:150px;padding-top:6px}
.pp-hist .k{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-end;height:100%;gap:4px}
.pp-hist .b{background:var(--sq4);border-radius:4px 4px 0 0;min-height:2px}
.pp-hist .t{font-size:11.5px;color:var(--muted);text-align:center;font-variant-numeric:tabular-nums}
.pp-hist .a{font-size:12px;color:var(--ink);font-weight:700;text-align:center;font-variant-numeric:tabular-nums}

/* Tabel */
.pp-t{width:100%;border-collapse:collapse;font-size:13px}
.pp-t th{font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);text-align:left;padding:8px;border-bottom:1px solid var(--border);white-space:nowrap}
.pp-t th[data-k]{cursor:pointer;user-select:none}
.pp-t th[aria-sort="ascending"]::after{content:' ▲';font-size:9px}.pp-t th[aria-sort="descending"]::after{content:' ▼';font-size:9px}
.pp-t td{padding:9px 8px;border-bottom:1px solid var(--border);vertical-align:top;font-variant-numeric:tabular-nums}
.pp-t tr:hover td{background:#F7FAF8}
.pp-t .n{text-align:right;white-space:nowrap}
.pp-t td.n small,.pp-t td small.m{display:block;color:var(--muted);font-size:11px}
.pp-t a{font-weight:600}
.table-wrap{overflow-x:auto}

.pp-chip{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:99px;white-space:nowrap;background:var(--primary-light);color:var(--primary-dark)}
.pp-chip.abu{background:#EEF2EF;color:var(--ink-soft)}
.pp-chip.emas{background:var(--accent-light);color:#7A4E00}
.pp-sinyal{display:inline-block;white-space:normal;font-size:10.5px;font-weight:700;background:#FBE3D6;color:#8A2E07;padding:1px 7px;border-radius:6px;margin:2px 3px 0 0}
.pp-ok{display:inline-block;font-size:10.5px;font-weight:700;background:var(--success-light);color:#14633F;padding:1px 7px;border-radius:6px}
.pp-cek{font-weight:700;color:var(--success)} .pp-tidak{color:#A3B3AA}

.pp-kosong{padding:28px 16px;text-align:center;color:var(--muted);font-size:13.5px}
.pp-kosong strong{display:block;color:var(--ink);font-size:15px;margin-bottom:4px}
.pp-kaki{font-size:11.5px;color:var(--muted);margin:22px 0 4px;text-align:center}

/* Profil guru */
.pp-profil{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}
.pp-avatar{width:48px;height:48px;border-radius:50%;background:var(--primary-light);color:var(--primary-dark);display:grid;place-items:center;font-weight:800;font-family:var(--font-display);flex:0 0 48px}
.pp-profil h2{font-size:19px;margin:0}
.pp-profil .meta{font-size:13px;color:var(--muted);margin-top:2px;line-height:1.6}
.pp-tab{display:flex;gap:4px;border-bottom:1px solid var(--border);margin:6px 0 14px;overflow-x:auto}
.pp-tab a{padding:9px 12px;font-size:13px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap;text-decoration:none}
.pp-tab a[aria-current="true"]{color:var(--primary-dark);border-bottom-color:var(--accent)}
.pp-catatan{border-left:3px solid var(--accent);padding:8px 12px;background:#FFFCF3;border-radius:0 8px 8px 0;margin-bottom:10px;font-size:13px}
.pp-catatan .w{font-size:11.5px;color:var(--muted);margin-bottom:3px}
textarea.pp-ta{width:100%;min-height:84px;padding:10px;border:1px solid var(--border);border-radius:9px;font:inherit;font-size:13.5px}

.pp-pilih-tingkat{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:6px}
.pp-pilih-tingkat label{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--border);border-radius:12px;padding:12px;cursor:pointer;background:var(--surface);font-weight:500;text-transform:none;letter-spacing:0}
.pp-pilih-tingkat label:has(input:checked){border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-light)}
.pp-pilih-tingkat strong{display:block;font-size:13.5px;color:var(--ink)}
.pp-pilih-tingkat small{display:block;font-size:12px;color:var(--muted);line-height:1.45;margin-top:2px}
@media (max-width:560px){.pp-pilih-tingkat{grid-template-columns:1fr}.pp-cakup-r{grid-template-columns:minmax(0,1fr) 84px;grid-template-areas:"lb jl" "bar bar"}}
[hidden]{display:none !important}