/* SIAPIYA_REFLECTION_COMPACT_LIST_UI_V37000
   Refleksi & Tindak Lanjut — true single-column task-first compact list.
   Scoped to page root and body-portal modal host; no runtime style writer. */

#siapiyaReflectionSpa .spa-module-heading{margin-bottom:14px}
#siapiyaReflectionSpa .spa-module-heading h4{letter-spacing:-.015em}
#siapiyaReflectionSpa .spa-module-heading p{font-size:.9rem;max-width:780px}

/* Filter lebih ringkas, tetap menjaga target sentuh. */
#siapiyaReflectionSpa .panel{padding:13px 14px;border-radius:16px;box-shadow:none}
#siapiyaReflectionSpa .filter-grid{grid-template-columns:minmax(145px,.8fr) minmax(145px,.8fr) minmax(170px,.9fr) minmax(220px,1.25fr) auto;gap:8px;align-items:end}
#siapiyaReflectionSpa .filter-grid label small{display:block;margin:0 0 5px;font-size:.72rem;font-weight:750;color:var(--muted)}
#siapiyaReflectionSpa .filter-grid .form-control,
#siapiyaReflectionSpa .filter-grid .form-select{min-height:40px;border-radius:10px;font-size:.9rem}
#siapiyaReflectionSpa .filter-grid>.btn{min-height:40px;border-radius:10px;padding-inline:15px;white-space:nowrap}

/* KPI satu strip seperti Remedial & Pengayaan. */
#siapiyaReflectionSpa>.shell>.summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin:11px 0 12px;border:1px solid var(--line);border-radius:15px;overflow:hidden;background:var(--line)}
#siapiyaReflectionSpa>.shell>.summary-grid .metric{min-width:0;border:0;border-radius:0;padding:9px 12px;background:var(--surface);box-shadow:none}
#siapiyaReflectionSpa>.shell>.summary-grid .metric small{display:block;font-size:.7rem;font-weight:750;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#siapiyaReflectionSpa>.shell>.summary-grid .metric strong{font-size:1.18rem;line-height:1.2;margin-top:2px}

/* Tab menjadi segmented control ringkas. */
#siapiyaReflectionSpa .view-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}
#siapiyaReflectionSpa .view-tab{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)}
#siapiyaReflectionSpa .view-tab.active{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:0 2px 7px rgba(10,102,216,.18)}
#siapiyaReflectionSpa .view-tab.active .badge{background:rgba(255,255,255,.2)!important;color:#fff!important;border-color:transparent!important}

/* Refleksi per jurnal menjadi single-column list. */
#siapiyaReflectionSpa .reflection-journal-list{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:8px;width:100%;min-width:0}
#siapiyaReflectionSpa .reflection-journal-list-item{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.42fr) auto;gap:16px;align-items:center;width:100%;min-width:0;padding:13px 14px;border-radius:15px;box-shadow:none;transition:border-color .16s ease,box-shadow .16s ease,background .16s ease}
#siapiyaReflectionSpa .reflection-journal-list-item:hover{border-color:#c9d5e5;box-shadow:0 5px 16px rgba(15,23,42,.045)}
#siapiyaReflectionSpa .reflection-journal-list-item.has-overdue{border-left:3px solid #dc3545;padding-left:12px}
#siapiyaReflectionSpa .journal-main{min-width:0}
#siapiyaReflectionSpa .journal-meta{display:flex;align-items:center;gap:6px;min-width:0;margin-bottom:5px;color:var(--muted);font-size:.72rem;font-weight:650}
#siapiyaReflectionSpa .journal-meta span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#siapiyaReflectionSpa .journal-title-line{display:flex;align-items:center;gap:8px;min-width:0}
#siapiyaReflectionSpa .journal-title-line h2{min-width:0;margin:0;font-size:.96rem;line-height:1.35;font-weight:780;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:inherit}
#siapiyaReflectionSpa .journal-title-line .tag{flex:0 0 auto}
#siapiyaReflectionSpa .journal-material{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:5px 0 0!important;font-size:.79rem;line-height:1.38;color:var(--muted)}
#siapiyaReflectionSpa .journal-objective{display:flex;align-items:center;gap:6px;min-width:0;margin:5px 0 0!important;font-size:.73rem;line-height:1.35;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#siapiyaReflectionSpa .journal-objective span{flex:0 0 auto;padding:2px 6px;border-radius:6px;background:#edf4ff;color:#075ec8;font-size:.65rem;font-weight:850}
#siapiyaReflectionSpa .journal-foot{display:flex;align-items:center;gap:6px;margin-top:7px;color:var(--muted);font-size:.69rem;font-weight:650}
#siapiyaReflectionSpa .journal-progress{width:min(420px,100%);height:4px!important;margin-top:6px;border-radius:99px;overflow:hidden}

#siapiyaReflectionSpa .journal-summary{display:grid;grid-template-columns:repeat(4,minmax(68px,1fr));gap:5px;min-width:0}
#siapiyaReflectionSpa .mini-stat{min-width:0;padding:7px 7px;border:1px solid var(--line);border-radius:10px;background:#f8fafc;text-align:center}
#siapiyaReflectionSpa .mini-stat strong{display:block;font-size:.93rem;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#siapiyaReflectionSpa .mini-stat small{display:block;margin-top:2px;color:var(--muted);font-size:.61rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#siapiyaReflectionSpa .mini-stat.is-danger strong{color:#b4232b}
#siapiyaReflectionSpa .mini-stat.is-warning strong{color:#a85b00}
#siapiyaReflectionSpa .mini-stat.is-primary strong{color:#075ec8}

#siapiyaReflectionSpa .reflection-journal-list-item .journal-actions{display:flex;align-items:center;justify-content:flex-end;gap:5px;min-width:0;margin:0}
#siapiyaReflectionSpa .reflection-journal-list-item .journal-actions .btn{min-height:34px;padding:6px 9px;border-radius:9px;font-size:.76rem;white-space:nowrap}#siapiyaReflectionSpa .reflection-journal-list-item .journal-actions .btn:disabled{opacity:.48;box-shadow:none}

/* Tindak lanjut mengikuti ritme list yang sama. */
#siapiyaReflectionSpa .reflection-followup-panel{padding:13px 14px}
#siapiyaReflectionSpa .followup-toolbar{margin-bottom:9px}
#siapiyaReflectionSpa .followup-toolbar h5{font-size:.96rem}
#siapiyaReflectionSpa .followup-toolbar small{font-size:.72rem}
#siapiyaReflectionSpa .siapiya-reflection-status-filter{min-height:38px;max-width:190px;border-radius:10px;font-size:.82rem}
#siapiyaReflectionSpa .followup-list{display:grid;gap:7px}
#siapiyaReflectionSpa .reflection-followup-list-item{display:grid;grid-template-columns:minmax(0,1fr) minmax(270px,.42fr) minmax(120px,auto);gap:16px;align-items:center;padding:13px 14px;border-radius:15px;box-shadow:none}
#siapiyaReflectionSpa .reflection-followup-list-item.overdue{border-left:3px solid #dc3545;padding-left:12px;box-shadow:none}
#siapiyaReflectionSpa .followup-main{min-width:0}
#siapiyaReflectionSpa .followup-meta{display:flex;align-items:center;gap:5px;min-width:0;margin-bottom:5px;color:var(--muted);font-size:.7rem;font-weight:650}
#siapiyaReflectionSpa .followup-meta span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#siapiyaReflectionSpa .followup-title-line{display:flex;align-items:center;gap:8px;min-width:0}
#siapiyaReflectionSpa .followup-title-line h2{min-width:0;margin:0;font-size:.94rem;line-height:1.35;font-weight:780;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#siapiyaReflectionSpa .followup-title-line .tag{flex:0 0 auto}
#siapiyaReflectionSpa .followup-main>p{margin:3px 0 0!important;font-size:.72rem;color:var(--muted)}
#siapiyaReflectionSpa .followup-plan{display:flex;align-items:center;gap:6px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#siapiyaReflectionSpa .followup-plan span{flex:0 0 auto;font-size:.65rem;font-weight:800;color:#075ec8}
#siapiyaReflectionSpa .followup-summary{display:grid;grid-template-columns:repeat(3,minmax(70px,1fr));gap:5px}
#siapiyaReflectionSpa .followup-summary .mini-stat strong{font-size:.78rem}
#siapiyaReflectionSpa .followup-side{display:grid;justify-items:end;gap:6px}
#siapiyaReflectionSpa .followup-due{font-size:.7rem;color:var(--muted);white-space:nowrap}
#siapiyaReflectionSpa .followup-side .btn{min-height:34px;padding:6px 11px;border-radius:9px;font-size:.78rem}
#siapiyaReflectionSpa .tag{padding:5px 8px;font-size:.68rem}

/* Popup tetap memakai body portal v3.69.98 dan dipadatkan secara aman. */
#siapiyaReflectionModalHost .modal-content{border-radius:20px;border:0}
#siapiyaReflectionModalHost .modal-header{padding:14px 16px}
#siapiyaReflectionModalHost .modal-body{padding:14px 16px}
#siapiyaReflectionModalHost .modal-footer{padding:11px 16px;gap:6px}
#siapiyaReflectionModalHost .modal-title{font-size:1rem}
#siapiyaReflectionModalHost .modal-header small{font-size:.73rem}
#siapiyaReflectionModalHost .reflection-detail-toolbar{display:flex;justify-content:flex-end;margin-bottom:10px}
#siapiyaReflectionModalHost .reflection-detail-toolbar .btn{min-height:36px;border-radius:9px;font-size:.8rem}
#siapiyaReflectionModalHost .reflection-detail-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin:0 0 10px;border:1px solid var(--bs-border-color);border-radius:12px;overflow:hidden;background:var(--bs-border-color)}
#siapiyaReflectionModalHost .reflection-detail-summary .metric{min-width:0;margin:0;padding:8px 9px;border:0;border-radius:0;background:var(--bs-body-bg);box-shadow:none}
#siapiyaReflectionModalHost .reflection-detail-summary .metric small{display:block;color:var(--bs-secondary-color);font-size:.65rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#siapiyaReflectionModalHost .reflection-detail-summary .metric strong{display:block;margin-top:2px;font-size:1rem;line-height:1.2}
#siapiyaReflectionModalHost .reflection-response-list{display:grid;gap:7px}
#siapiyaReflectionModalHost .reflection-response-card{margin:0;padding:12px;border-radius:13px}
#siapiyaReflectionModalHost .reflection-response-card .response-meta{align-items:center}
#siapiyaReflectionModalHost .reflection-response-card .answer{padding:8px 9px;margin-top:6px;border-radius:9px;font-size:.82rem}
#siapiyaReflectionModalHost .reflection-response-card .answer small{margin-bottom:2px;font-size:.66rem}
#siapiyaReflectionModalHost .reflection-response-card .recommendation{padding:9px;margin-top:7px;border-radius:10px}
#siapiyaReflectionModalHost .reflection-response-card .task-form{margin-top:8px;padding-top:9px}
#siapiyaReflectionModalHost .reflection-response-card .task-grid{gap:6px}
#siapiyaReflectionModalHost .reflection-response-card .form-control,
#siapiyaReflectionModalHost .reflection-response-card .form-select{border-radius:8px}

[data-bs-theme="dark"] #siapiyaReflectionSpa .mini-stat{background:#242428;border-color:#3a3a3c}
[data-bs-theme="dark"] #siapiyaReflectionSpa .journal-objective span{background:#153457;color:#8dc0ff}
[data-bs-theme="dark"] #siapiyaReflectionSpa .reflection-journal-list-item:hover{border-color:#52525a;box-shadow:none}
[data-bs-theme="dark"] #siapiyaReflectionModalHost .reflection-detail-summary{background:#3a3a3c;border-color:#3a3a3c}
[data-bs-theme="dark"] #siapiyaReflectionModalHost .reflection-detail-summary .metric{background:#1f1f22}

@media (max-width:1180px){
  #siapiyaReflectionSpa .filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #siapiyaReflectionSpa .filter-grid .wide{grid-column:1/-1}
  #siapiyaReflectionSpa .filter-grid>.btn{justify-self:start}
  #siapiyaReflectionSpa .reflection-journal-list-item{grid-template-columns:minmax(0,1fr) minmax(285px,.52fr)}
  #siapiyaReflectionSpa .reflection-journal-list-item .journal-actions{grid-column:1/-1;display:flex;justify-content:flex-end;min-width:0;margin-top:-3px}
  #siapiyaReflectionSpa .reflection-followup-list-item{grid-template-columns:minmax(0,1fr) minmax(250px,.46fr)}
  #siapiyaReflectionSpa .followup-side{grid-column:1/-1;display:flex;justify-content:flex-end;align-items:center}
}

@media (max-width:820px){
  #siapiyaReflectionSpa .reflection-journal-list-item,
  #siapiyaReflectionSpa .reflection-followup-list-item{grid-template-columns:minmax(0,1fr);gap:10px}
  #siapiyaReflectionSpa .journal-summary{grid-template-columns:repeat(4,minmax(0,1fr))}
  #siapiyaReflectionSpa .followup-summary{grid-template-columns:repeat(3,minmax(0,1fr))}
  #siapiyaReflectionSpa .reflection-journal-list-item .journal-actions{grid-column:auto;justify-content:flex-start}
  #siapiyaReflectionSpa .followup-side{grid-column:auto;justify-content:flex-start;justify-items:start}
  #siapiyaReflectionModalHost .reflection-detail-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:560px){
  #siapiyaReflectionSpa .shell{padding:12px}
  #siapiyaReflectionSpa .filter-grid{grid-template-columns:1fr}
  #siapiyaReflectionSpa .filter-grid .wide{grid-column:auto}
  #siapiyaReflectionSpa .filter-grid>.btn{width:100%;justify-self:stretch}
  #siapiyaReflectionSpa>.shell>.summary-grid{grid-template-columns:repeat(2,minmax(0,1fr));border-radius:12px}
  #siapiyaReflectionSpa>.shell>.summary-grid .metric{padding:8px 9px}
  #siapiyaReflectionSpa>.shell>.summary-grid .metric strong{font-size:1.02rem}
  #siapiyaReflectionSpa .view-tabs{width:100%;display:grid;grid-template-columns:1fr 1fr}
  #siapiyaReflectionSpa .view-tab{justify-content:center;padding-inline:7px;font-size:.76rem}
  #siapiyaReflectionSpa .reflection-journal-list-item,
  #siapiyaReflectionSpa .reflection-followup-list-item{padding:11px;border-radius:13px}
  #siapiyaReflectionSpa .reflection-journal-list-item.has-overdue,
  #siapiyaReflectionSpa .reflection-followup-list-item.overdue{padding-left:9px}
  #siapiyaReflectionSpa .teacher-meta{display:none}
  #siapiyaReflectionSpa .journal-title-line{align-items:flex-start;flex-wrap:wrap}
  #siapiyaReflectionSpa .journal-title-line h2{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  #siapiyaReflectionSpa .journal-summary{gap:4px}
  #siapiyaReflectionSpa .journal-summary .mini-stat{padding:6px 3px}
  #siapiyaReflectionSpa .journal-summary .mini-stat strong{font-size:.84rem}
  #siapiyaReflectionSpa .journal-summary .mini-stat small{font-size:.55rem}
  #siapiyaReflectionSpa .reflection-journal-list-item .journal-actions{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:4px}
  #siapiyaReflectionSpa .reflection-journal-list-item .journal-actions .btn{width:100%;padding-inline:5px;font-size:.7rem}
  #siapiyaReflectionSpa .followup-title-line{align-items:flex-start;flex-wrap:wrap}
  #siapiyaReflectionSpa .followup-summary{gap:4px}
  #siapiyaReflectionSpa .followup-summary .mini-stat{padding:6px 4px}
  #siapiyaReflectionSpa .followup-side{display:grid;grid-template-columns:1fr auto;width:100%;align-items:center}
  #siapiyaReflectionSpa .followup-side .btn{width:auto}
  #siapiyaReflectionSpa .followup-toolbar{align-items:stretch}
  #siapiyaReflectionSpa .siapiya-reflection-status-filter{max-width:none;width:100%}
  #siapiyaReflectionModalHost .modal-dialog{margin:8px}
  #siapiyaReflectionModalHost .modal-content{border-radius:16px}
  #siapiyaReflectionModalHost .reflection-detail-toolbar .btn{width:100%}
  #siapiyaReflectionModalHost .reflection-detail-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
}