/* SIAPIYA_KKTP_COMPACT_LIST_UI_V36994
   Remedial & Pengayaan — task-first compact list. Scoped to #siapiyaKktpSpa. */
#siapiyaKktpSpa .spa-module-heading{margin-bottom:14px}
#siapiyaKktpSpa .spa-module-heading h4{letter-spacing:-.015em}
#siapiyaKktpSpa .spa-module-heading p{font-size:.9rem}

/* Filter dibuat lebih padat tanpa mengurangi target sentuh. */
#siapiyaKktpSpa .panel{padding:13px 14px;border-radius:16px;box-shadow:none}
#siapiyaKktpSpa .filters{grid-template-columns:minmax(150px,.85fr) minmax(180px,1fr) minmax(150px,.8fr) minmax(230px,1.35fr) auto;gap:8px}
#siapiyaKktpSpa .filters label small{display:block;margin:0 0 5px;font-size:.72rem;font-weight:750;color:var(--muted)}
#siapiyaKktpSpa .filters .form-control,#siapiyaKktpSpa .filters .form-select{min-height:40px;border-radius:10px;font-size:.9rem}
#siapiyaKktpSpa .filters>.btn{min-height:40px;border-radius:10px;padding-inline:15px;white-space:nowrap}

/* KPI menjadi satu strip ringkas agar tidak mendominasi halaman. */
#siapiyaKktpSpa .metrics{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;margin:11px 0 12px;border:1px solid var(--line);border-radius:15px;overflow:hidden;background:var(--line)}
#siapiyaKktpSpa .metric{min-width:0;border:0;border-radius:0;padding:9px 12px;background:var(--surface);box-shadow:none}
#siapiyaKktpSpa .metric small{display:block;font-size:.7rem;font-weight:750;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#siapiyaKktpSpa .metric strong{font-size:1.18rem;line-height:1.2;margin-top:2px}

#siapiyaKktpSpa .tabs{width:max-content;max-width:100%;margin:10px 0 12px;padding:3px;border:1px solid var(--line);border-radius:12px;background:var(--surface);gap:3px}
#siapiyaKktpSpa .tabbtn{display:inline-flex;align-items:center;gap:7px;border:0;border-radius:9px;padding:7px 11px;background:transparent;font-size:.86rem;font-weight:750;color:var(--muted)}
#siapiyaKktpSpa .tabbtn.active{background:var(--blue);color:#fff;box-shadow:0 2px 7px rgba(9,105,218,.18)}

/* Daftar TP: satu baris per TP, bukan kartu dua kolom. */
#siapiyaKktpSpa .objective-list{display:grid;grid-template-columns:minmax(0,1fr);gap:7px}
#siapiyaKktpSpa .objective-list-item{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,.44fr) auto;gap:16px;align-items:center;padding:13px 14px;border-radius:15px;box-shadow:none;transition:border-color .16s ease,box-shadow .16s ease,background .16s ease}
#siapiyaKktpSpa .objective-list-item:hover{border-color:#c9d5e5;box-shadow:0 5px 16px rgba(15,23,42,.045)}
#siapiyaKktpSpa .objective-list-item.has-remedial{border-left:3px solid #dc3545;padding-left:12px}
#siapiyaKktpSpa .objective-main{min-width:0}
#siapiyaKktpSpa .objective-meta{display:flex;align-items:center;gap:7px;min-width:0;margin-bottom:5px;color:var(--muted);font-size:.73rem;font-weight:650}
#siapiyaKktpSpa .objective-meta span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#siapiyaKktpSpa .objective-meta .meta-separator{flex:0 0 auto;color:#b6c0cd}
#siapiyaKktpSpa .objective-title-line{display:flex;align-items:flex-start;gap:8px;min-width:0}
#siapiyaKktpSpa .objective-code{flex:0 0 auto;margin-top:1px;padding:3px 7px;border-radius:7px;background:#edf4ff;color:#075ec8;font-size:.72rem;font-weight:850;line-height:1.3}
#siapiyaKktpSpa .objective-title-line h2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-width:0;margin:0;font-size:.94rem;line-height:1.38;font-weight:760;color:inherit}
#siapiyaKktpSpa .objective-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:7px;font-size:.73rem}
#siapiyaKktpSpa .objective-foot .tag{padding:4px 7px;font-size:.68rem}
#siapiyaKktpSpa .objective-progress{width:min(380px,100%);margin-top:7px}
#siapiyaKktpSpa .objective-progress .progress{height:4px;margin:0}

#siapiyaKktpSpa .objective-summary{display:grid;grid-template-columns:repeat(3,minmax(72px,1fr));gap:5px;min-width:0}
#siapiyaKktpSpa .mini-stat{min-width:0;padding:7px 8px;border:1px solid var(--line);border-radius:10px;background:#f8fafc;text-align:center}
#siapiyaKktpSpa .mini-stat strong{display:block;font-size:.98rem;line-height:1.15}
#siapiyaKktpSpa .mini-stat small{display:block;margin-top:2px;color:var(--muted);font-size:.65rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#siapiyaKktpSpa .mini-stat.is-danger strong{color:#b4232b}
#siapiyaKktpSpa .mini-stat.is-success strong{color:#157347}
#siapiyaKktpSpa .mini-stat.is-warning strong{color:#a85b00}

#siapiyaKktpSpa .objective-actions{display:flex;align-items:center;justify-content:flex-end;gap:5px;min-width:0}
#siapiyaKktpSpa .objective-actions .btn{min-height:34px;padding:6px 9px;border-radius:9px;font-size:.78rem;white-space:nowrap}
#siapiyaKktpSpa .objective-actions .btn-primary-action{padding-inline:11px}
#siapiyaKktpSpa .objective-actions .action-label-short{display:none}

/* Rencana tindak lanjut memakai ritme list yang sama. */
#siapiyaKktpSpa .plan-list{display:grid;gap:7px}
#siapiyaKktpSpa .plan-list-item{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,.38fr) minmax(150px,auto);gap:16px;align-items:center;padding:13px 14px;border-radius:15px;box-shadow:none}
#siapiyaKktpSpa .plan-list-item.is-overdue{border-left:3px solid #dc3545;padding-left:12px}
#siapiyaKktpSpa .plan-main{min-width:0}
#siapiyaKktpSpa .plan-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:5px;font-size:.72rem;color:var(--muted)}
#siapiyaKktpSpa .plan-main h2{margin:0;font-size:.94rem;line-height:1.35;font-weight:780}
#siapiyaKktpSpa .plan-objective{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;margin:4px 0 0;font-size:.76rem;line-height:1.35;color:var(--muted)}
#siapiyaKktpSpa .plan-summary{display:grid;grid-template-columns:repeat(3,minmax(65px,1fr));gap:5px}
#siapiyaKktpSpa .plan-side{display:grid;justify-items:end;gap:6px}
#siapiyaKktpSpa .plan-side .plan-due{font-size:.7rem;color:var(--muted);white-space:nowrap}
#siapiyaKktpSpa .plan-side .btn{min-height:34px;padding:6px 10px;border-radius:9px;font-size:.78rem}
#siapiyaKktpSpa .tag{padding:5px 8px;font-size:.69rem}

/* Modal siswa ikut dipadatkan dan header list tetap mudah dipindai. */
#siapiyaKktpSpa #studentList{border:1px solid var(--line);border-radius:13px;overflow:hidden}
#siapiyaKktpSpa .student-row{padding:8px 10px;gap:9px}
#siapiyaKktpSpa .student-row.header{position:sticky;top:0;z-index:1;border-radius:0;border-bottom:1px solid var(--line)}
#siapiyaKktpSpa .student-row.is-remedial{background:rgba(220,53,69,.025)}
#siapiyaKktpSpa .student-row b{font-size:.86rem}
#siapiyaKktpSpa .student-row .muted{font-size:.72rem}
#siapiyaKktpSpa .modal-footer{gap:6px}

[data-bs-theme="dark"] #siapiyaKktpSpa .mini-stat{background:#242428;border-color:#3a3a3c}
[data-bs-theme="dark"] #siapiyaKktpSpa .objective-code{background:#153457;color:#8dc0ff}
[data-bs-theme="dark"] #siapiyaKktpSpa .objective-list-item:hover{border-color:#52525a;box-shadow:none}
[data-bs-theme="dark"] #siapiyaKktpSpa .student-row.is-remedial{background:rgba(220,53,69,.07)}

@media (max-width:1180px){
  #siapiyaKktpSpa .filters{grid-template-columns:repeat(2,minmax(0,1fr))}
  #siapiyaKktpSpa .filters .wide{grid-column:1/-1}
  #siapiyaKktpSpa .filters>.btn{justify-self:start}
  #siapiyaKktpSpa .objective-list-item{grid-template-columns:minmax(0,1fr) minmax(230px,.5fr)}
  #siapiyaKktpSpa .objective-actions{grid-column:1/-1;justify-content:flex-end;margin-top:-3px}
  #siapiyaKktpSpa .plan-list-item{grid-template-columns:minmax(0,1fr) minmax(220px,.42fr)}
  #siapiyaKktpSpa .plan-side{grid-column:1/-1;display:flex;justify-content:flex-end;align-items:center}
}
@media (max-width:820px){
  #siapiyaKktpSpa .metrics{grid-template-columns:repeat(3,minmax(0,1fr))}
  #siapiyaKktpSpa .objective-list-item,#siapiyaKktpSpa .plan-list-item{grid-template-columns:minmax(0,1fr);gap:10px}
  #siapiyaKktpSpa .objective-summary,#siapiyaKktpSpa .plan-summary{grid-template-columns:repeat(3,minmax(0,1fr))}
  #siapiyaKktpSpa .objective-actions,#siapiyaKktpSpa .plan-side{grid-column:auto;justify-content:flex-start}
  #siapiyaKktpSpa .plan-side{justify-items:start}
}
@media (max-width:560px){
  #siapiyaKktpSpa .filters{grid-template-columns:1fr}
  #siapiyaKktpSpa .filters .wide{grid-column:auto}
  #siapiyaKktpSpa .filters>.btn{width:100%;justify-self:stretch}
  #siapiyaKktpSpa .metrics{grid-template-columns:repeat(3,minmax(0,1fr));border-radius:12px}
  #siapiyaKktpSpa .metric{padding:8px 7px;text-align:center}
  #siapiyaKktpSpa .metric small{font-size:.62rem}
  #siapiyaKktpSpa .metric strong{font-size:1.02rem}
  #siapiyaKktpSpa .tabs{width:100%;display:grid;grid-template-columns:1fr 1fr}
  #siapiyaKktpSpa .tabbtn{justify-content:center;padding-inline:7px;font-size:.78rem}
  #siapiyaKktpSpa .objective-list-item,#siapiyaKktpSpa .plan-list-item{padding:11px;border-radius:13px}
  #siapiyaKktpSpa .objective-list-item.has-remedial,#siapiyaKktpSpa .plan-list-item.is-overdue{padding-left:9px}
  #siapiyaKktpSpa .objective-meta{gap:5px}
  #siapiyaKktpSpa .objective-meta .teacher-meta{display:none}
  #siapiyaKktpSpa .objective-title-line h2,#siapiyaKktpSpa .plan-main h2{font-size:.9rem}
  #siapiyaKktpSpa .objective-summary,#siapiyaKktpSpa .plan-summary{gap:4px}
  #siapiyaKktpSpa .mini-stat{padding:6px 4px}
  #siapiyaKktpSpa .mini-stat strong{font-size:.9rem}
  #siapiyaKktpSpa .mini-stat small{font-size:.6rem}
  #siapiyaKktpSpa .objective-actions{display:grid;grid-template-columns:1.3fr 1fr 1fr;width:100%;gap:4px}
  #siapiyaKktpSpa .objective-actions .btn{width:100%;padding-inline:5px;font-size:.72rem}
  #siapiyaKktpSpa .plan-side{display:grid;grid-template-columns:auto 1fr auto;width:100%;justify-items:start;gap:7px}
  #siapiyaKktpSpa .plan-side .btn{justify-self:end}
  #siapiyaKktpSpa .student-row{padding:8px}
}