:root{
    --brand:#A8BBA3; --paper:#F7F4EA; --tint:#EBD9D1; --ink:#B87C4C; --rose:#F0CAD6;
    --surface:#fff;
    --surface-soft:  color-mix(in srgb, var(--tint) 20%, #fff);
    --surface-softer:color-mix(in srgb, var(--tint) 32%, #fff);
    --border:rgba(17,17,17,.12);
    --text:#0f172a; --text-muted:#6b7280;
    --radius:12px;

    /* Layering konsisten */
    --z-colmenu: 900;
    --z-dropdown: 1200;
    --z-modal-base: 1400;
    --z-modal-top: 1600;

    /* Gap vertikal antar kartu */
    --stack-gap: 14px;

    /* Tinggi tetap kartu daftar siswa & kelompok (desktop) */
    --card-fixed-height: 520px; /* boleh disesuaikan 500–540 kalau mau */
}

  /* Pastikan spinner global Template (twb-modal-backdrop) selalu di atas modal lokal */
  .twb-modal-backdrop{
    z-index: calc(var(--z-modal-top) + 100);
  }

  html,body{
    margin:0;
    background:var(--paper);
    color:var(--text);
    font:500 14px/1.35 Poppins, Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  }

  .group-page{
    min-height:100vh;
    padding:0;
    display:flex;
    flex-direction:column;
  }

  .card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:8px;
    box-shadow:0 4px 20px rgba(0,0,0,.04);
    padding:12px;
  }
  .card-soft{
    background:var(--surface-soft);
  }
  .card + .card{
    margin-top:var(--stack-gap);
  }
  @media (max-width:720px){
    :root{ --stack-gap: 10px; }
  }

  /* ========== Topbar Head (paritas dengan Jurnal/Asesmen) ========== */
  .topbar-head{
    display:block;
    margin:-4px 0 8px;
    background:transparent;
  }
  .topbar-head .head-row{
    display:flex;
    align-items:center;
    gap:8px;
    padding:2px 2px 8px 2px;
  }
  .topbar-head .topbar-icon{
    font-size:20px;
    line-height:1;
    color:#0f172a;
    opacity:.9;
  }
  .topbar-head .topbar-title{
    margin:0;
    font:700 18px/1 Poppins, sans-serif;
    color:#0f172a;
  }
  .topbar-head .head-divider{
    height:1px;
    background:var(--border);
    margin:0;
    border:0;
  }

  /* ========== Toolbar & Filters (paritas Jurnal) ========== */
  .toolbar{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    align-items:flex-end;
  }
  .filters{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    align-items:flex-end;
    flex:1 1 auto;
  }
  .field{
    min-width:220px;
    flex:1 1 220px;
  }
  .field>label{
    display:block;
    font:600 12px/1 Poppins;
    margin-bottom:6px;
    color:#111827;
  }

  .actions-right{
    margin-left:auto;
    display:flex;
    gap:8px;
    align-items:flex-end;
    flex-wrap:wrap;
  }

  @media (max-width:720px){
    .toolbar{
      flex-direction:column;
      align-items:stretch;
    }
    .filters{
      width:100%;
      flex-direction:column;
    }
    .field{
      min-width:100%;
      flex:1 1 100%;
    }
    .actions-right{
      width:100%;
      justify-content:flex-start;
    }
  }

  /* ===== Buttons (paritas Asesmen) ===== */
  .btn{
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:var(--ink);
    color:#fff;
    border:1px solid rgba(0,0,0,.06);
    border-radius:12px;
    padding:8px 12px;
    font:600 13px/1 Poppins, sans-serif;
    cursor:pointer;
    box-shadow:0 3px 10px rgba(0,0,0,.06);
    transition:transform .08s, box-shadow .18s, background .18s, opacity .18s;
  }
  .btn:hover{
    background:#a0643f;
    box-shadow:0 6px 18px rgba(0,0,0,.10);
  }
  .btn:active{
    transform:translateY(1px);
  }
  .btn:focus{
    outline:3px solid rgba(184,124,76,.25);
    outline-offset:2px;
  }
  .btn[disabled]{
    opacity:.55;
    cursor:not-allowed;
    box-shadow:none;
  }

  .btn-ghost{
    background:var(--surface-soft);
    color:#0f172a;
    border:1px solid var(--border);
    border-radius:10px;
    padding:6px 10px;
    cursor:pointer;
    font:600 13px/1 Poppins, sans-serif;
    transition:background .18s, box-shadow .18s, border-color .18s, transform .08s;
    display:inline-flex;
    align-items:center;
    gap:6px;
  }
  .btn-ghost:hover{
    background:#fafafa;
    box-shadow:0 3px 10px rgba(0,0,0,.06);
  }
  .btn-ghost:active{
    transform:translateY(1px);
  }
  .btn-ghost[disabled]{
    opacity:.55;
    cursor:not-allowed;
  }

  .btn-danger{
    background:#b42318;
    color:#fff;
    border:1px solid rgba(0,0,0,.06);
    border-radius:12px;
    padding:8px 12px;
    font:600 13px/1 Poppins, sans-serif;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:6px;
  }

  /* Pressable & focus (tambahan) */
  .btn, .btn-ghost, .btn-danger, .dd-icon{
    position:relative;
    transform:translateY(0);
    transition:transform .06s ease, filter .18s ease, box-shadow .18s ease, background .18s ease;
    will-change:transform;
  }
  .btn:active, .btn-ghost:active, .btn-danger:active,
  .dd-icon:active{
    transform:translateY(1px) scale(0.99);
    filter:brightness(.98);
  }
  .btn:focus-visible, .btn-ghost:focus-visible, .btn-danger:focus-visible,
  .dd-icon:focus-visible{
    outline:2px solid var(--ink);
    outline-offset:2px;
  }
  @media (prefers-reduced-motion:reduce){
    .btn, .btn-ghost, .btn-danger, .dd-icon{ transition:none; }
  }

  /* ===== Combobox (selaras Jurnal/Absensi/Asesmen) ===== */
  .combo{ position:relative; }
  .combo input[type="text"]{
    font-size:13px;
    height:42px;
    border-radius:12px;
    border:1px solid #e5e7eb;
    padding:8px 36px 8px 12px;
    width:100%;
    outline:none;
    background:#fff;
    color:#0f172a;
    transition:box-shadow .16s, border-color .16s;
  }
  .combo input.is-placeholder{ color:#94a3b8; }
  .combo input.is-selected{ color:#0f172a; }
  .combo input:focus{
    border-color:#94a3b8;
    box-shadow:0 0 0 3px rgba(148,163,184,.25);
  }

  .combo .dd-icon{
    position:absolute;
    right:6px;
    top:50%;
    transform:translateY(-50%);
    width:30px;
    height:30px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:0;
    background:transparent;
    border-radius:8px;
    cursor:pointer;
    color:#64748b;
    transition:transform .16s, background .16s;
  }
  .combo .dd-icon .material-icons{
    font-size:20px;
    transition:transform .16s;
  }
  .combo.open .dd-icon .material-icons{
    transform:rotate(180deg);
  }
  .combo .dd-icon:hover{
    background:#f1f5f9;
  }

  .combo-list{
    position:absolute;
    z-index:var(--z-dropdown);
    left:0;
    right:0;
    /* default: muncul di bawah input; JS akan override jika perlu drop-up / portal */
    top:100%;
    margin-top:0;
    background:#fff;
    border:1px solid #eef2f7;
    border-radius:8px;
    box-shadow:0 16px 30px rgba(0,0,0,.08);
    max-height:300px;
    overflow-y:auto;
    padding:6px 0;
  }
  .combo-list[hidden]{ display:none; }

  .combo-option{
    padding:10px 12px;
    font-size:13px;
    cursor:pointer;
    white-space:normal;
  }
  .combo-option:hover,
  .combo-option[aria-selected="true"]{
    background:#f1f5f9;
  }

  .combo-empty{
    padding:10px 12px;
    font-size:13px;
    color:#9ca3af;
    cursor:default;
  }
  .combo-empty[aria-disabled="true"]{
    pointer-events:none;
  }

  .combo-native{
    display:none;
  }

  /* ===== Layout kartu roster & groups ===== */
.layout{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  gap:14px;
  margin-top:14px;
  align-items:stretch;
}

/* Kartu di dalam grid sejajar dan punya tinggi tetap (desktop) */
.layout > .card{
  margin-top:0;
  display:flex;
  flex-direction:column;
  height:var(--card-fixed-height);
  max-height:var(--card-fixed-height);
}

/* Pada layar sempit: kartu kembali mengikuti konten, tapi tetap ada batas scroll internal */
@media (max-width:900px){
  .layout{
    grid-template-columns:minmax(0,1fr);
  }
  .layout > .card{
    height:auto;
    max-height:none;
  }
}

  .card-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin-bottom:8px;
  }
  .card-header-title{
    display:flex;
    flex-direction:column;
    gap:2px;
  }
    .card-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin-bottom:8px;
  }
  .card-header-title{
    display:flex;
    flex-direction:column;
    gap:2px;
  }
  .card-header-title h2{
    margin:0;
    font-size:15px;
    font-weight:600;
  }
  .card-header-title span{
    font-size:11px;
    color:var(--text-muted);
  }

  /* ===== Header actions + kebab ===== */
  .card-header-actions{
    display:flex;
    align-items:center;
    gap:6px;
    position:relative;
  }
  .kebab-wrap{
    position:relative;
  }
  .kebab-menu{
    position:absolute;
    right:0;
    top:100%;
    margin-top:4px;
    min-width:230px;
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:10px;
    box-shadow:0 16px 30px rgba(15,23,42,.15);
    padding:4px 0;
    z-index:var(--z-dropdown);
  }
  .kebab-menu[hidden]{ display:none; }
  .kebab-menu button{
    width:100%;
    border:0;
    background:transparent;
    padding:8px 12px;
    display:flex;
    align-items:center;
    gap:8px;
    font:500 13px/1.3 Poppins, sans-serif;
    color:#111827;
    text-align:left;
    cursor:pointer;
  }
  .kebab-menu button .material-icons{
    font-size:18px;
    color:#64748b;
  }
  .kebab-menu button:hover{
    background:#f3f4f6;
  }
  .kebab-menu button.danger{
    color:#b91c1c;
  }
  .kebab-menu button.danger .material-icons{
    color:#b91c1c;
  }
  .card-toggle-icon{
    border:0;
    background:transparent;
    border-radius:999px;
    padding:4px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
  }
  .card-toggle-icon .material-icons{
    font-size:20px;
    color:#64748b;
  }

  .card-header-title h2{
    margin:0;
    font-size:15px;
    font-weight:600;
  }
  .card-header-title span{
    font-size:11px;
    color:var(--text-muted);
  }
  .card-toggle-icon{
    border:0;
    background:transparent;
    border-radius:999px;
    padding:4px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
  }
  .card-toggle-icon .material-icons{
    font-size:20px;
    color:#64748b;
  }

  .card.collapsed .table-wrap{
    display:none;
  }
  .card.collapsed .card-header-title span{
    display:none;
  }

  /* ===== Tabel roster siswa ===== */
  .table-wrap{
    border-radius:12px;
    border:1px solid var(--border);
    overflow:auto;
    background:var(--surface-soft);
    /* Area scroll mengisi tinggi kartu */
    flex:1 1 auto;
    min-height:0;
  }
  .table-wrap table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    font-size:13px;
  }
  .table-wrap th,
  .table-wrap td{
    white-space:nowrap;
    padding:8px 10px;
    border-bottom:1px solid var(--border);
    vertical-align:middle;
  }
  .table-wrap thead th{
    font:700 12px/1 Poppins;
    color:#334155;
    background:#fff;
    position:sticky;
    top:0;
    z-index:1;
  }
  .table-wrap tbody tr:nth-child(even){
    background:rgba(248,250,252,.6);
  }
  .num{
    width:36px;
    text-align:center;
    color:var(--text-muted);
    font-size:11px;
  }
  .name{
    min-width:160px;
  }
  .name-main{
    font-weight:500;
    font-size:13px;
  }
  .name-sub{
    font-size:11px;
    color:var(--text-muted);
  }
  .action-cell{
    min-width:160px;
  }

  /* >>> MOBILE ADJUSTMENT: tabel tidak lebih lebar dari kartu & tanpa horizontal scroll <<< */
  @media (max-width:720px){
    .table-wrap{
      overflow-x:hidden; /* hilangkan scroll horizontal di dalam kartu */
    }
    .table-wrap th,
    .table-wrap td{
      white-space:normal; /* izinkan wrap teks */
    }
    .name{
      min-width:0;
    }
    .name-main,
    .name-sub{
      white-space:normal;
      overflow-wrap:anywhere; /* jaga kalau ada nama tanpa spasi */
    }
    .action-cell{
      min-width:0;
    }
    .roster-combo{
      max-width:100%; /* dropdown aksi mengecil mengikuti kartu */
    }
  }

  .empty-row{
    text-align:center;
    font-size:12px;
    color:var(--text-muted);
  }

  /* Combobox aksi kelompok di roster */
  .roster-combo{
    max-width:220px;
  }
  .roster-combo input[type="text"]{
    height:36px;
    font-size:12px;
  }

  /* ===== Kartu kelompok ===== */
  .groups-container{
    display:flex;
    flex-direction:column;
    gap:10px;
    overflow:auto;
    padding-right:4px;
    flex:1 1 auto;
    min-height:0;
  }
  .group-card{
    border-radius:10px;
    border:1px solid var(--border);
    padding:8px 10px;
    background:linear-gradient(135deg, #ffffff, #fdf6f0);
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  .group-card_header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
  }
  .group-actions{
    display:flex;
    align-items:center;
    gap:4px;
  }

  .badge{
    display:inline-flex;
    align-items:center;
    padding:3px 10px;
    border-radius:999px;
    background:var(--tint);
    color:var(--ink);
    font-size:11px;
    font-weight:500;
  }
  .badge-count{
    margin-left:6px;
    background:rgba(148,163,184,.18);
    color:var(--text-muted);
  }

  .icon-btn{
    border:none;
    background:transparent;
    padding:3px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
  }
  .icon-btn .material-icons{
    font-size:18px;
    color:var(--text-muted);
  }
  .icon-btn.danger .material-icons{
    color:#b91c1c;
  }
  .icon-btn:hover{
    background:rgba(15,23,42,.06);
  }

  .group-members{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:4px;
  }
  .group-members li{
    display:flex;
    align-items:center;
    gap:6px;
    padding:4px 8px 4px 4px;
    border-radius:999px;
    background:rgba(248,250,252,.95);
    border:1px solid rgba(148,163,184,.4);
    font-size:11px;
  }

  .group-members .avatar{
    width:20px;
    height:20px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:10px;
    font-weight:600;
    background:var(--brand);
    color:#1f2933;
  }
  .group-members .label{
    flex:1;
    min-width:0;
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
  }

  .chip-remove{
    border:none;
    background:transparent;
    padding:0;
    margin-left:2px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
  }
  .chip-remove .material-icons{
    font-size:14px;
    color:#9ca3af;
  }
  .chip-remove:hover .material-icons{
    color:#ef4444;
  }

  .groups-empty{
    font-size:12px;
    color:var(--text-muted);
  }

  /* ===== Modal (paritas Jurnal/Asesmen) ===== */
  .modal[hidden]{ display:none; }
  .modal{
    position:fixed;
    inset:0;
    z-index:var(--z-modal-top);
  }
  .modal-backdrop{
    position:absolute;
    inset:0;
    background:color-mix(in srgb, #000 40%, transparent);
    opacity:0;
    transition:.16s;
  }
  .modal-dialog{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, calc(-50% + 8px)) scale(.98);
    width:min(900px, calc(100vw - 32px));
    background:
      radial-gradient(1200px 500px at 50% -200px,
        var(--surface) 0%,
        var(--surface-soft) 55%,
        var(--surface-softer) 100%);
    border:1px solid var(--border);
    border-radius:14px;
    box-shadow:0 24px 60px rgba(0,0,0,.18);
    opacity:0;
    transition:.16s;
    max-height:min(92dvh, calc(100vh - 24px));
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }
  .modal.show .modal-backdrop{
    opacity:1;
  }
  .modal.show .modal-dialog{
    opacity:1;
    transform:translate(-50%,-50%) scale(1);
  }
  .modal-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 14px;
    border-bottom:1px solid #eef2f7;
  }
  .modal-title{
    font:700 14px/1.2 Poppins;
  }
  .modal-body{
    padding:14px;
    overflow:auto;
    flex:1 1 auto;
  }
  .modal-foot{
    display:flex;
    gap:8px;
    justify-content:flex-end;
    padding:12px 14px;
    border-top:1px solid #eef2f7;
  }
  .modal-close{
    width:32px;
    height:32px;
    border:0;
    background:transparent;
    border-radius:8px;
    cursor:pointer;
    font-size:20px;
  }

  .modal-label{
    margin:6px 0;
    font:600 12px/1 Poppins, sans-serif;
    color:#111827;
  }
  .modal-input{
    width:100%;
    height:38px;
    font:600 13px/1 Poppins, sans-serif;
    border:1px solid var(--border);
    border-radius:8px;
    padding:6px 8px;
    background:#fff;
  }

  /* ===== Modal Asesmen Kelompok ===== */
  .modal-filter-row{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
    margin-top:4px;
    margin-bottom:12px; /* jarak vertikal tambahan sebelum tabel asesmen */
  }
  .modal-filter-row label{
    display:block;
    font:600 12px/1 Poppins;
    color:#374151;
  }
  #asmCombo{
    min-width:260px;
    width:100%;
  }
  @media (max-width:640px){
    #asmCombo{
      min-width:100%;
    }
  }

  .assess-table{
    width:100%;
    border-collapse:collapse;
    font-size:12px;
    margin-top:6px;
  }
  .assess-table th,
  .assess-table td{
    padding:6px 8px;
    border-bottom:1px solid rgba(148,163,184,.3);
  }
  .assess-table th{
    text-align:left;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.04em;
    color:var(--text-muted);
  }
  .assess-table th:nth-child(3){
    text-align:center;
  }
  .assess-score-cell{
    text-align:left;
    font-size:11px;
  }

  .cell-input{
    border:1px solid var(--border);
    border-radius:6px;
    padding:3px 4px;
    font-size:12px;
    outline:none;
  }
  .cell-input:focus,
  .cell-comment:focus{
    border-color:var(--ink);
    box-shadow:0 0 0 1px rgba(184,124,76,.25);
  }
  .cell-comment{
    margin-top:4px;
    width:100%;
    border-radius:6px;
    border:1px solid var(--border);
    padding:5px 6px;
    min-height:26px;
    font-size:11px;
    outline:none;
  }
  /* Tinggi khusus untuk modal asesmen kelompok */
  .ga-score-input{
    min-height:32px;
    padding-top:6px;
    padding-bottom:6px;
  }

  .ga-comment-input{
    min-height:32px;
    padding-top:6px;
    padding-bottom:6px;
  }

  .pct.small.muted{
    font-size:10px;
    color:var(--text-muted);
    margin-top:2px;
  }
  /* Persentase di modal asesmen kelompok */
  .ga-pct{
    text-align:center;   /* "-%" atau "85%" berada di tengah */
  }
  .slash{
    font-size:11px;
    color:var(--text-muted);
  }
  .max{
    font-size:11px;
    color:var(--text-muted);
    min-width:16px;
  }

  .ga-cell-wrap{
    text-align:left;
    width:100%;
  }

  @media (max-width:640px){
    .assess-table th:nth-child(2),
    .assess-table td:nth-child(2){
      width:50%;
    }
    .assess-table th:nth-child(3),
    .assess-table td:nth-child(3){
      width:50%;
    }
  }

  /* ===== Misc ===== */
  .mi{ font-size:18px; color:currentColor; vertical-align:-4px; }
  

  /* === TWB UNIFIED UI TYPOGRAPHY & SPINNER MESSAGE === */
  :root{ --twb-ui-font: Poppins, Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif; }
  body, input, button, select, textarea, table{
    font-family: var(--twb-ui-font) !important;
  }
  body{ font-size:14px; font-weight:500; line-height:1.35; }
  .btn, .btn-ghost, .btn-danger, .mg-btn, .mg-btn-ghost, .btn-ghost-ink,
  button.menu-item, .combo-item{ font-size:13px !important; font-weight:600 !important; }
  .field > label, .modal-label, .rep-name-label{ font-size:12px !important; font-weight:600 !important; }
  .topbar-h2, .topbar-title h2, .topbar-head .topbar-title{ font-size:16px !important; font-weight:700 !important; line-height:1.2 !important; }
  .tbl, .rep-detail{ font-size:13px !important; font-weight:500 !important; }
  #twbBusyText, .twb-busy-text{ font:600 13px/1.25 var(--twb-ui-font) !important; }