/* KBM Kontrol (tab di Live Kelas). Dipakai js/kbm-kontrol.js.
   Satu aksen hijau yang diredam. Status selalu berpasangan dengan teks (pill), tidak hanya warna.
   Gerak hanya transform/opacity dengan kurva tanpa pantulan; semua aturan di-scope ke #kbmKontrolPanel. */

#kbmKontrolPanel {
  --kk-accent:#1f7a4d;
  --kk-accent-soft:rgba(31,122,77,.10);
  --kk-accent-edge:rgba(31,122,77,.18);
  --kk-on-accent:#ffffff;
  --kk-rose:#a8434f;
  --kk-rose-soft:rgba(168,67,79,.09);
  --kk-wait:#5b6676;
  --kk-wait-soft:rgba(91,102,118,.10);
  --kk-track:rgba(15,23,42,.09);
  --kk-ink:var(--app-text,#1e293b);
  --kk-dim:var(--app-dim,#64748b);
  --kk-surface:var(--app-card,#ffffff);
  --kk-muted:var(--app-muted,#f1f5f9);
  --kk-line:var(--app-border,rgba(0,0,0,.10));
  --kk-glass:rgba(255,255,255,.72);
  --kk-glass-edge:rgba(255,255,255,.6);
  --kk-ease:cubic-bezier(.16,1,.3,1);
  --kk-mono:ui-monospace,"JetBrains Mono","SFMono-Regular",Menlo,Consolas,monospace;
  --kk-sticky-top:56px;
  display:block;
  color:var(--kk-ink);
  padding:0 16px 18px;
}
#kbmKontrolPanel[hidden] { display:none; }
#liveKelasView[data-theme="dark"] #kbmKontrolPanel {
  --kk-accent:#4fbf8a;
  --kk-accent-soft:rgba(79,191,138,.14);
  --kk-accent-edge:rgba(79,191,138,.22);
  --kk-on-accent:#0f1a14;
  --kk-rose:#e3909b;
  --kk-rose-soft:rgba(227,144,155,.12);
  --kk-wait:#a3adbb;
  --kk-wait-soft:rgba(163,173,187,.12);
  --kk-track:rgba(255,255,255,.10);
  --kk-glass:rgba(48,48,46,.72);
  --kk-glass-edge:rgba(255,255,255,.08);
}

#kbmKontrolPanel .kk-num { font-family:var(--kk-mono); font-variant-numeric:tabular-nums; letter-spacing:0; }
#kbmKontrolPanel .kk-muted { color:var(--kk-dim); }

/* ── Header: lapisan kaca lengket ── */
#kbmKontrolPanel .kk-head {
  position:sticky; top:var(--kk-sticky-top); z-index:5;
  display:flex; align-items:flex-end; justify-content:space-between; gap:12px 16px; flex-wrap:wrap;
  margin:0 -16px; padding:14px 16px 12px;
  background:var(--kk-glass);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  backdrop-filter:blur(20px) saturate(180%);
  box-shadow:inset 0 1px 0 var(--kk-glass-edge);
}
#kbmKontrolPanel .kk-title {
  margin:0; font-size:1.125rem; font-weight:800; line-height:1.1; letter-spacing:-.02em; color:var(--kk-ink);
}
#kbmKontrolPanel .kk-sub { margin:4px 0 0; font-size:.75rem; line-height:1.4; color:var(--kk-dim); }
#kbmKontrolPanel .kk-head-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

#kbmKontrolPanel .kk-seg {
  display:inline-flex; padding:3px; gap:2px; border-radius:10px;
  background:var(--kk-muted); box-shadow:inset 0 0 0 1px var(--kk-line);
}
#kbmKontrolPanel .kk-seg button {
  appearance:none; border:0; background:transparent; color:var(--kk-dim);
  font:inherit; font-size:.6875rem; font-weight:700; letter-spacing:.01em;
  min-height:28px; padding:0 10px; border-radius:7px; cursor:pointer; white-space:nowrap;
  transition:transform 100ms ease-out, background-color .25s var(--kk-ease), color .25s var(--kk-ease), box-shadow .25s var(--kk-ease);
}
#kbmKontrolPanel .kk-seg button:hover { color:var(--kk-ink); }
#kbmKontrolPanel .kk-seg button.on {
  background:var(--kk-surface); color:var(--kk-ink);
  box-shadow:0 1px 2px rgba(15,23,42,.08), inset 0 0 0 1px var(--kk-line);
}
#kbmKontrolPanel .kk-icon-btn,
#kbmKontrolPanel .kk-btn {
  appearance:none; display:inline-grid; place-items:center; cursor:pointer;
  border:0; border-radius:10px; font:inherit; color:var(--kk-ink);
  background:var(--kk-muted); box-shadow:inset 0 0 0 1px var(--kk-line);
  transition:transform 100ms ease-out, background-color .25s var(--kk-ease);
}
#kbmKontrolPanel .kk-icon-btn { width:34px; height:34px; }
#kbmKontrolPanel .kk-icon-btn svg { width:18px; height:18px; }
#kbmKontrolPanel .kk-icon-btn.spin svg { animation:kk-spin .9s linear infinite; }
#kbmKontrolPanel .kk-btn { padding:0 14px; min-height:34px; font-size:.75rem; font-weight:700; }
#kbmKontrolPanel button:active { transform:scale(.97); }
#kbmKontrolPanel button:focus-visible,
#kbmKontrolPanel summary:focus-visible { outline:2px solid var(--kk-accent); outline-offset:2px; }

/* ── Ringkasan: grid asimetris ── */
#kbmKontrolPanel .kk-summary {
  display:grid; grid-template-columns:2fr 1fr 1fr; gap:12px; margin:14px 0 6px;
}
#kbmKontrolPanel .kk-stat {
  display:flex; flex-direction:column; gap:6px; min-width:0;
  padding:14px 16px; border-radius:16px;
  background:var(--kk-surface); box-shadow:inset 0 0 0 1px var(--kk-line);
}
#kbmKontrolPanel .kk-stat-main { background:var(--kk-accent-soft); box-shadow:inset 0 0 0 1px var(--kk-accent-edge); }
#kbmKontrolPanel .kk-stat-label { font-size:.6875rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--kk-dim); }
#kbmKontrolPanel .kk-stat-value { display:flex; align-items:baseline; gap:8px; font-size:1.75rem; font-weight:800; line-height:1; letter-spacing:-.02em; }
#kbmKontrolPanel .kk-stat-main .kk-stat-value { color:var(--kk-accent); font-size:2.125rem; }
#kbmKontrolPanel .kk-stat-of { font-size:.8125rem; font-weight:600; letter-spacing:0; color:var(--kk-dim); }
#kbmKontrolPanel .kk-stat.st-belum .kk-stat-value { color:var(--kk-rose); }
#kbmKontrolPanel .kk-stat.st-menunggu .kk-stat-value { color:var(--kk-wait); }
#kbmKontrolPanel .kk-stat-foot { font-size:.6875rem; line-height:1.35; color:var(--kk-dim); }
#kbmKontrolPanel .kk-bar { display:block; height:6px; border-radius:99px; overflow:hidden; background:var(--kk-track); }
#kbmKontrolPanel .kk-bar > span {
  display:block; height:100%; border-radius:inherit; background:var(--kk-accent);
  transform-origin:left center; transition:transform .6s var(--kk-ease);
}

/* ── Daftar ── */
#kbmKontrolPanel .kk-group { margin-top:16px; }
#kbmKontrolPanel .kk-group-title {
  display:flex; align-items:baseline; justify-content:space-between; gap:8px;
  margin:0 2px 8px; font-size:.8125rem; font-weight:800; letter-spacing:-.01em; color:var(--kk-ink);
}
#kbmKontrolPanel .kk-group-count { font-size:.6875rem; font-weight:600; color:var(--kk-dim); }
#kbmKontrolPanel .kk-list { display:flex; flex-direction:column; gap:6px; }

#kbmKontrolPanel .kk-row {
  border-radius:14px; background:var(--kk-surface); box-shadow:inset 0 0 0 1px var(--kk-line);
}
#kbmKontrolPanel .kk-row.st-belum { box-shadow:inset 3px 0 0 var(--kk-rose), inset 0 0 0 1px var(--kk-line); }
#kbmKontrolPanel .kk-body.kk-enter .kk-row,
#kbmKontrolPanel .kk-body.kk-enter .kk-stat {
  animation:kk-in .55s var(--kk-ease) both;
  animation-delay:calc(var(--i, 0) * 28ms);
}
#kbmKontrolPanel .kk-row-main {
  appearance:none; width:100%; border:0; background:transparent; color:inherit; font:inherit; text-align:left;
  display:grid; grid-template-columns:3.25rem minmax(0,1fr) auto auto 1rem; align-items:center; gap:12px;
  padding:10px 14px; border-radius:14px; cursor:pointer;
  transition:transform 100ms ease-out, background-color .25s var(--kk-ease);
}
#kbmKontrolPanel .kk-row-main:hover { background:var(--app-hover, rgba(127,127,127,.06)); }
#kbmKontrolPanel .kk-row-main:active { transform:scale(.99); }
#kbmKontrolPanel .kk-row-kelas {
  display:grid; place-items:center; height:2.25rem; border-radius:10px;
  background:var(--kk-muted); font-size:.8125rem; font-weight:700; color:var(--kk-ink);
}
#kbmKontrolPanel .kk-row-info { display:flex; flex-direction:column; gap:3px; min-width:0; }
#kbmKontrolPanel .kk-row-mapel {
  display:flex; align-items:center; gap:6px; min-width:0;
  font-size:.875rem; font-weight:700; line-height:1.25; letter-spacing:-.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#kbmKontrolPanel .kk-row-meta {
  display:flex; align-items:center; gap:4px 10px; flex-wrap:wrap; min-width:0;
  font-size:.71875rem; line-height:1.35; color:var(--kk-dim);
}
#kbmKontrolPanel .kk-row-guru { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
#kbmKontrolPanel .kk-row-jam { font-size:.6875rem; }
#kbmKontrolPanel .kk-tag {
  flex:none; padding:1px 6px; border-radius:6px; font-size:.5625rem; font-weight:800; letter-spacing:.06em;
  color:var(--kk-dim); background:var(--kk-muted); box-shadow:inset 0 0 0 1px var(--kk-line);
}
#kbmKontrolPanel .kk-tag.inval { color:var(--kk-wait); background:var(--kk-wait-soft); box-shadow:none; }

/* Indikator kolom: penuh = isi aksen, sebagian = cincin progres, kosong = lingkar tipis. Kolom wajib diberi garis bawah. */
#kbmKontrolPanel .kk-row-kolom { display:flex; gap:5px; padding-bottom:4px; }
#kbmKontrolPanel .kk-dot {
  position:relative; isolation:isolate; display:grid; place-items:center; width:24px; height:24px; border-radius:50%;
  font-family:var(--kk-mono); font-size:.625rem; font-weight:700; color:var(--kk-dim);
  background:conic-gradient(var(--kk-accent) calc(var(--p, 0) * 1%), var(--kk-track) 0);
}
#kbmKontrolPanel .kk-dot::before {
  content:""; position:absolute; inset:2.5px; z-index:-1; border-radius:50%; background:var(--kk-surface);
}
#kbmKontrolPanel .kk-dot.full { background:var(--kk-accent); color:var(--kk-on-accent); }
#kbmKontrolPanel .kk-dot.full::before { display:none; }
#kbmKontrolPanel .kk-dot.part { color:var(--kk-ink); }
#kbmKontrolPanel .kk-dot.req::after {
  content:""; position:absolute; left:50%; bottom:-5px; width:10px; height:2px; margin-left:-5px; border-radius:2px;
  background:var(--kk-dim); opacity:.55;
}
#kbmKontrolPanel .kk-dot.req.full::after { background:var(--kk-accent); opacity:1; }
#kbmKontrolPanel .kk-row.st-belum .kk-dot.req:not(.full)::after { background:var(--kk-rose); opacity:1; }

#kbmKontrolPanel .kk-pill {
  justify-self:end; min-width:5.25rem; text-align:center; white-space:nowrap;
  padding:4px 10px; border-radius:99px; font-size:.6875rem; font-weight:800; letter-spacing:.01em;
}
#kbmKontrolPanel .kk-pill.st-sudah { color:var(--kk-accent); background:var(--kk-accent-soft); }
#kbmKontrolPanel .kk-pill.st-belum { color:var(--kk-rose); background:var(--kk-rose-soft); }
#kbmKontrolPanel .kk-pill.st-menunggu { color:var(--kk-wait); background:var(--kk-wait-soft); }
#kbmKontrolPanel .kk-pill.st-na { color:var(--kk-dim); background:var(--kk-muted); }
#kbmKontrolPanel .kk-pill.st-menunggu::before {
  content:""; display:inline-block; width:6px; height:6px; margin-right:6px; border-radius:50%;
  background:currentColor; vertical-align:1px; animation:kk-breathe 2.4s var(--kk-ease) infinite;
}
#kbmKontrolPanel .kk-chev { display:grid; place-items:center; color:var(--kk-dim); transition:transform .35s var(--kk-ease); }
#kbmKontrolPanel .kk-chev svg { width:16px; height:16px; }
#kbmKontrolPanel .kk-row.open .kk-chev { transform:rotate(90deg); }

/* Detail: buka/tutup lewat jalur yang sama (grid-rows), bisa dibalik di tengah transisi. */
#kbmKontrolPanel .kk-row-detail {
  display:grid; grid-template-rows:0fr; opacity:0;
  transition:grid-template-rows .4s var(--kk-ease), opacity .3s var(--kk-ease);
}
#kbmKontrolPanel .kk-row.open .kk-row-detail { grid-template-rows:1fr; opacity:1; }
#kbmKontrolPanel .kk-row-detail-inner { min-height:0; overflow:hidden; padding:0 14px 0 calc(14px + 3.25rem + 12px); }
#kbmKontrolPanel .kk-row.open .kk-row-detail-inner { padding-bottom:14px; }
#kbmKontrolPanel .kk-note { margin:0 0 8px; font-size:.75rem; line-height:1.5; color:var(--kk-dim); max-width:65ch; }
#kbmKontrolPanel .kk-missing-title { margin:0 0 6px; font-size:.6875rem; font-weight:800; color:var(--kk-ink); }
#kbmKontrolPanel .kk-missing { display:flex; flex-wrap:wrap; gap:4px; margin:0 0 10px; padding:0; list-style:none; }
#kbmKontrolPanel .kk-missing li {
  padding:3px 8px; border-radius:7px; font-size:.6875rem; color:var(--kk-ink); background:var(--kk-muted);
}
#kbmKontrolPanel .kk-link {
  appearance:none; display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border:0; border-radius:9px; cursor:pointer;
  font:inherit; font-size:.71875rem; font-weight:700; color:var(--kk-accent); background:var(--kk-accent-soft);
  transition:transform 100ms ease-out;
}
#kbmKontrolPanel .kk-link svg { width:14px; height:14px; }

#kbmKontrolPanel .kk-extra { margin-top:18px; font-size:.75rem; color:var(--kk-dim); }
#kbmKontrolPanel .kk-extra summary { cursor:pointer; font-weight:700; padding:4px 2px; }
#kbmKontrolPanel .kk-extra[open] summary { margin-bottom:8px; }

/* ── State: kosong, error, skeleton ── */
#kbmKontrolPanel .kk-empty,
#kbmKontrolPanel .kk-error {
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin-top:14px; padding:22px 20px; border-radius:16px;
  background:var(--kk-muted); box-shadow:inset 0 0 0 1px var(--kk-line);
}
#kbmKontrolPanel .kk-empty > svg,
#kbmKontrolPanel .kk-error > svg { flex:none; width:28px; height:28px; color:var(--kk-dim); }
#kbmKontrolPanel .kk-error > svg { color:var(--kk-rose); }
#kbmKontrolPanel .kk-error > div { flex:1 1 220px; }
#kbmKontrolPanel .kk-empty-title { font-size:.875rem; font-weight:800; letter-spacing:-.01em; color:var(--kk-ink); }
#kbmKontrolPanel .kk-empty-text { margin-top:2px; font-size:.75rem; line-height:1.5; color:var(--kk-dim); }
#kbmKontrolPanel .kk-inline-error {
  display:flex; align-items:center; gap:8px; margin-top:12px; padding:8px 12px; border-radius:10px;
  font-size:.71875rem; color:var(--kk-rose); background:var(--kk-rose-soft);
}
#kbmKontrolPanel .kk-inline-error svg { flex:none; width:16px; height:16px; }

#kbmKontrolPanel .kk-skel {
  display:block; height:10px; border-radius:6px;
  background:linear-gradient(90deg, var(--kk-track) 0%, rgba(127,127,127,.04) 50%, var(--kk-track) 100%);
  background-size:200% 100%; animation:kk-shimmer 1.4s linear infinite;
}
#kbmKontrolPanel .kk-skel.tall { height:26px; }
#kbmKontrolPanel .kk-skel.w12 { width:3.25rem; height:2.25rem; border-radius:10px; flex:none; }
#kbmKontrolPanel .kk-skel.w20 { width:20%; }
#kbmKontrolPanel .kk-skel.w30 { width:30%; }
#kbmKontrolPanel .kk-skel.w45 { width:45%; }
#kbmKontrolPanel .kk-skel.w50 { width:50%; }
#kbmKontrolPanel .kk-skel.w60 { width:60%; }
#kbmKontrolPanel .kk-skel.w100 { width:100%; }
#kbmKontrolPanel .kk-skel-row {
  display:flex; align-items:center; gap:14px; padding:10px 14px; border-radius:14px;
  background:var(--kk-surface); box-shadow:inset 0 0 0 1px var(--kk-line);
}
#kbmKontrolPanel .kk-skel-row .w20 { margin-left:auto; }

@keyframes kk-in { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
@keyframes kk-fade { from { opacity:0; } to { opacity:1; } }
@keyframes kk-spin { to { transform:rotate(360deg); } }
@keyframes kk-shimmer { from { background-position:200% 0; } to { background-position:-200% 0; } }
@keyframes kk-breathe { 0%, 100% { opacity:1; } 50% { opacity:.35; } }

/* ── Ponsel: satu kolom ── */
@media (max-width:767px) {
  #kbmKontrolPanel { padding:0 12px 16px; }
  #kbmKontrolPanel .kk-head { margin:0 -12px; padding:12px; align-items:flex-start; }
  #kbmKontrolPanel .kk-head-actions { width:100%; }
  #kbmKontrolPanel .kk-seg { flex:1 1 auto; }
  #kbmKontrolPanel .kk-seg button { flex:1 1 0; padding:0 6px; }
  #kbmKontrolPanel .kk-summary { grid-template-columns:1fr 1fr; }
  #kbmKontrolPanel .kk-stat-main { grid-column:1 / -1; }
  #kbmKontrolPanel .kk-row-main {
    grid-template-columns:2.75rem minmax(0,1fr) auto 1rem;
    grid-template-areas:"kelas info info chev" "kelas kolom pill pill";
    row-gap:8px; padding:10px 12px;
  }
  #kbmKontrolPanel .kk-row-kelas { grid-area:kelas; align-self:start; }
  #kbmKontrolPanel .kk-row-info { grid-area:info; }
  #kbmKontrolPanel .kk-chev { grid-area:chev; align-self:start; margin-top:6px; }
  #kbmKontrolPanel .kk-row-kolom { grid-area:kolom; align-items:center; }
  #kbmKontrolPanel .kk-pill { grid-area:pill; min-width:0; }
  #kbmKontrolPanel .kk-row-detail-inner { padding-left:12px; padding-right:12px; }
}

/* ── Aksesibilitas ── */
@media (prefers-reduced-motion:reduce) {
  #kbmKontrolPanel .kk-body.kk-enter .kk-row,
  #kbmKontrolPanel .kk-body.kk-enter .kk-stat { animation:kk-fade .2s ease both; animation-delay:0s; }
  #kbmKontrolPanel .kk-row-detail { transition:opacity .2s ease; }
  #kbmKontrolPanel .kk-bar > span,
  #kbmKontrolPanel .kk-chev { transition:none; }
  #kbmKontrolPanel .kk-pill.st-menunggu::before,
  #kbmKontrolPanel .kk-icon-btn.spin svg,
  #kbmKontrolPanel .kk-skel { animation:none; }
  #kbmKontrolPanel button:active { transform:none; }
}
@media (prefers-reduced-transparency:reduce) {
  #kbmKontrolPanel .kk-head { background:var(--kk-surface); -webkit-backdrop-filter:none; backdrop-filter:none; }
}
@media (prefers-contrast:more) {
  #kbmKontrolPanel { --kk-line:currentColor; --kk-glass:var(--kk-surface); }
  #kbmKontrolPanel .kk-head { -webkit-backdrop-filter:none; backdrop-filter:none; border-bottom:1px solid currentColor; }
}