/* ---------- Tokens / Theme ---------- */
:root{
  --brand:#A8BBA3; --paper:#F7F4EA; --tint:#EBD9D1; --ink:#B87C4C; --rose:#F0CAD6;
  --surface:#fff; --border:rgba(17,17,17,.12); --text:#0f172a; --text-muted:#6b7280;

  --radius:12px;
  --name-col:220px;
  --col-w:120px;

  --z-dropdown:2100;
  --z-popover:2300;
  --z-modal-base:4000;
  --z-modal-top:5000;

  /* Celebrate palette */
  --id-accent:#6aa584;
  --as-accent:#c98e73;
  --gr-accent:#5e9fb0;
  --att-accent:#8d7cc9;
}

/* ---------- Base ---------- */
.mg-container{ background:var(--paper); color:var(--text); font:500 14px/1.35 Poppins, Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif; }
.mg-container *{ box-sizing:border-box; }
.mg-icon{ font-size:18px; }
.mg-inline{ display:flex; align-items:center; gap:8px; }
.muted{ color:var(--text-muted); }
.w-full{ width:100%; }

/* Cards */
.mg-card{
  background:var(--surface); border:1px solid var(--border); border-radius:8px; box-shadow:0 4px 20px rgba(0,0,0,.04);
  padding:12px;
}

/* ---------- Header & Filter Bar ---------- */
.mg-header{
  position:static !important; top:auto !important;
  background:linear-gradient(180deg, color-mix(in srgb, var(--paper) 92%, #fff), var(--paper));
  border-bottom:1px solid color-mix(in srgb, var(--border) 65%, transparent);
  backdrop-filter:saturate(1.1) blur(6px);
}
.mg-header-out{ padding:12px 12px 8px; }
.mg-title{ display:flex; align-items:center; gap:8px; }
.mg-title h2{ margin:0; font:700 18px/1.1 Poppins, sans-serif; }

.mg-filters{
  display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:10px 12px; align-items:end; margin-top:10px;
}
.mg-field{ grid-column: span 3; display:flex; flex-direction:column; gap:6px; min-width:180px; }
.mg-field-rowfull{ grid-column:1 / -1; }
.mg-field>label{ font:600 12px/1 Poppins, sans-serif; color:#111827; }
.mg-field-shell{ display:flex; align-items:center; gap:6px; }

.mg-input, .mg-select{
  height:38px; border:1px solid var(--border); border-radius:10px; padding:6px 10px; background:#fff;
  font:600 13px/1 Poppins, sans-serif; color:var(--text); outline:none;
}
.mg-input:focus, .mg-select:focus{
  border-color:#cbd5e1; box-shadow:0 0 0 4px rgba(182,172,212,.15);
}

/* ---------- Buttons ---------- */
.mg-btn{
  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;
}
.mg-btn:hover{ background:#a0643f; box-shadow:0 6px 18px rgba(0,0,0,.10); }
.mg-btn:active{ transform:translateY(1px); }
.mg-btn:focus{ outline:3px solid rgba(184,124,76,.25); outline-offset:2px; }
.mg-btn[disabled]{ opacity:.55; cursor:not-allowed; box-shadow:none; }

.mg-btn-ghost{
  background:#fff; color:var(--text); border:1px solid var(--border); border-radius:10px; padding:6px 10px;
  font:600 13px/1 Poppins, sans-serif; cursor:pointer; transition:background .18s, box-shadow .18s, border-color .18s, transform .08s;
}
.mg-btn-ghost:hover{ background:#fafafa; box-shadow:0 3px 10px rgba(0,0,0,.06); }
.mg-btn-ghost:active{ transform:translateY(1px); }

.mg-iconbtn{
  width:32px; height:32px; border:1px solid var(--border); background:#fff; border-radius:8px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; line-height:1; font-size:16px;
  transition:background .18s, transform .08s, border-color .18s;
}
.mg-iconbtn:hover{ background:#f3f4f6; transform:translateY(-1px); }

.mg-actions-inline{ display:flex; gap:8px; flex-wrap:wrap; }

/* ---------- Classbar / Combobox ---------- */
.mg-classbar{ display:flex; gap:8px; align-items:center; min-width:0; }
.mg-combo{ position:relative; flex:1 1 360px; min-width:260px; --combo-w:100%; }
.mg-combo .mg-input{ padding-right:84px; height:42px; border-radius:12px; min-width:0; }
.mg-combo-ctrl{ position:absolute; right:6px; top:50%; transform:translateY(-50%); display:flex; gap:6px; white-space:nowrap; }
.mg-combo-list{
  position:absolute; z-index:var(--z-dropdown); left:0; width:var(--combo-w, 100%); margin-top:4px;
  background:#fff; border:1px solid #eef2f7; border-radius:10px; box-shadow:0 16px 30px rgba(0,0,0,.08);
  max-height:300px; overflow:auto; padding:6px 0; display:none;
}
.mg-combo.open .mg-combo-list{ display:block; }
.mg-combo-item{ padding:10px 12px; font-size:13px; cursor:pointer; }
.mg-combo-item:hover, .mg-combo-item[aria-selected="true"]{ background:#f1f5c9; }

/* ---------- Panel TP di halaman ---------- */
.mg-grid{ display:none; grid-template-columns:1fr; gap:12px; margin-top:12px; align-items:start; }
.mg-grid.is-open{ display:grid; }
.mg-grid > main.mg-card{ display:none !important; }

.mg-list{ display:flex; flex-direction:column; gap:6px; }
.mg-item{ display:grid; grid-template-columns: 40px 1fr auto; gap:10px; align-items:center; border:1px solid var(--border); border-radius:10px; padding:8px 10px; background:#fff; }
.mg-item .idx{ width:28px; height:28px; display:grid; place-items:center; border:1px solid var(--border); border-radius:8px; font:700 12px/1 Poppins; color:#475569; }
.mg-item h4{ margin:0 0 4px; font:700 13px/1.2 Poppins; }
.mg-item small{ color:var(--text-muted); }
.mg-item .row-actions button{ margin-left:6px; }

/* ---------- Table shell ---------- */
.mg-table-wrap{
  margin-top:12px; background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:0 4px 20px rgba(0,0,0,.04);
  overflow-x:hidden;
  overflow-y:visible;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  overscroll-behavior-y:auto;
}

.mg-table{ width:100%; table-layout:auto; border-collapse:separate; border-spacing:0; font-size:13px; }
.mg-table th, .mg-table td{ padding:8px 10px; border-bottom:1px solid #eef2f7; white-space:nowrap; vertical-align:middle; }

/* ---------- Daftar Siswa Kelas: kapsul ---------- */
#mg-class-table thead{ display:none; }
#mg-class-table tbody{ display:flex; flex-direction:column; gap:10px; padding:10px; }
#mg-class-table tbody tr{
  display:grid;
  grid-template-columns: 48px 1fr auto;
  align-items:center; gap:12px; background:#fff; border:1px solid var(--border); border-radius:16px; padding:10px 12px; box-shadow:0 6px 18px rgba(0,0,0,.06);
}
#mg-class-table tbody td{ border-bottom:0; padding:0; background:transparent; }
#mg-class-table tbody td:nth-child(1){ grid-column:1; text-align:center; }
#mg-class-table tbody td:nth-child(2){ grid-column:2; }
#mg-class-table tbody td:nth-child(5){ grid-column:3; justify-self:end; }

#mg-class-table th:nth-child(3), #mg-class-table td:nth-child(3),
#mg-class-table th:nth-child(4), #mg-class-table td:nth-child(4){ display:none; }

#mg-class-table .mg-idx{ width:28px;height:28px;display:grid;place-items:center; border:1px solid var(--border); border-radius:8px; font:700 12px/1 Poppins; color:#475569; background:#fff; }
#mg-class-table .mg-namecell h4{ margin:0 0 4px; font:700 13px/1.2 Poppins; }
#mg-class-table .mg-namecell small{ display:block; color:var(--text-muted); }
.mg-iconbtn-soft{ min-width:32px;height:32px;padding:0 8px; display:inline-flex;align-items:center;justify-content:center; border:1px solid var(--border);border-radius:10px;background:#fff; font-size:16px;line-height:1;cursor:pointer; transition:background .18s, transform .08s, border-color .18s, box-shadow .18s; }
.mg-iconbtn-soft:hover{ background:#f3f4f6; transform:translateY(-1px); }

@media (max-width:480px){
  #mg-class-table tbody tr{ grid-template-columns: 40px 1fr auto; border-radius:14px; padding:10px; }
  #mg-class-table .mg-idx{ width:26px; height:26px; border-radius:8px; }
  #mg-class-table .mg-namecell h4{ font-size:13px; }
  #mg-class-table .mg-namecell small{ font-size:12px; }
  #mg-class-table td .mg-inline{ justify-content:center; gap:6px; }
}

/* Penanda non-aktif */
#mg-class-table .is-inactive h4{ color:#9ca3af; text-decoration:line-through; }
#mg-class-table .is-inactive small{ color:#9ca3af; }

/* Badge "Tidak Aktif" */
.mg-badge{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--border); border-radius:999px;
  font:700 11px/1 Poppins, sans-serif; padding:4px 8px;
}
.mg-badge-inactive{
  background:color-mix(in srgb, var(--rose) 40%, #fff);
  border-color:color-mix(in srgb, var(--border) 60%, transparent);
  color:#9a3a3a;
}

/* ---------- Float Menus ---------- */
.mg-menu{
  position:fixed; z-index:var(--z-popover);
  inline-size:max-content; max-width:min(320px, calc(100vw - 16px)); min-width:180px;
  background:#fff; border:1px solid var(--border); border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.12); padding:6px;
  max-height:min(70vh, calc(100dvh - 16px)); overflow-y:auto; overscroll-behavior:contain;
}
.mg-menu[hidden]{ display:none; }
.mg-menu button{
  width:100%; text-align:left; background:#fff; border:1px solid transparent; border-radius:10px; padding:8px 10px; cursor:pointer;
  font:600 13px/1.25 Poppins, sans-serif; transition:background .18s, border-color .18s, transform .08s;
  white-space:normal; word-break:break-word; overflow-wrap:anywhere;
}
.mg-menu button:hover{ background:#fafafa; transform:translateY(-1px); }
.mg-menu button.danger{ color:#b42318; }
.mg-menu hr{ height:1px; background:#eef2f7; margin:6px 4px; border:0; }
@supports (padding: max(0px)) { .mg-menu{ padding-bottom:max(6px, env(safe-area-inset-bottom)); } }

/* ---------- Dialog / Modal ---------- */
.mg-modal{ border:0; padding:0; background:transparent; z-index:var(--z-modal-top); }
.mg-modal[open]::backdrop{ background:color-mix(in srgb, #000 40%, transparent); animation: mgFade .12s ease both; z-index:var(--z-modal-base); }
@keyframes mgFade{ from{ opacity:0; } to{ opacity:1; } }

.mg-modal-card{
  width:min(720px, calc(100vw - 32px)); max-height:min(92dvh, calc(100vh - 24px));
  background:#fff; border:1px solid var(--border); border-radius:14px; box-shadow:0 24px 60px rgba(0,0,0,.18);
  display:flex; flex-direction:column; overflow:hidden;
}
.mg-modal-card.wide{ width:min(980px, calc(100vw - 32px)); }
.mg-modal-card header, .mg-modal-card footer{ padding:12px 14px; border-bottom:1px solid #eef2f7; }
.mg-modal-card footer{ border-bottom:0; border-top:1px solid #eef2f7; display:flex; gap:8px; justify-content:flex-end; }
.mg-modal-card header h3{ margin:0; font:700 14px/1.2 Poppins, sans-serif; }
.mg-modal-card section{ padding:14px; overflow:auto; -webkit-overflow-scrolling:touch; }

/* Deskripsi konfirmasi dengan line-break */
#mg-confirm-desc { white-space: pre-line; margin: 0; line-height: 1.5; }

/* ---------- Forms inside modal ---------- */
.mg-form{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px; }
.mg-form .col-1{ grid-column:1 / -1; }
.mg-form label{ font:600 12px/1 Poppins, sans-serif; color:#111827; }
.mg-form input, .mg-form select, .mg-form textarea{
  width:100%; font:600 13px/1.1 Poppins, sans-serif; color:var(--text);
  border:1px solid var(--border); border-radius:8px; background:#fff; padding:6px 8px;
}
.mg-form textarea{ min-height:72px; }

/* ---------- Toast ---------- */
.mg-toast{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%) translateY(8px);
  background:#111827; color:#fff; padding:8px 12px; border-radius:999px; font:700 12px/1 Poppins; opacity:0; pointer-events:none;
  box-shadow:0 10px 30px rgba(0,0,0,.18); transition:transform .12s, opacity .12s;
}
.mg-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ---------- Accessibility ---------- */
.mg-select:focus-visible, .mg-input:focus-visible, .mg-btn:focus-visible, .mg-btn-ghost:focus-visible, .mg-iconbtn:focus-visible{
  outline:3px solid rgba(184,124,76,.25); outline-offset:2px;
}
[role="menu"] [role="menuitem"]:focus-visible{ outline:2px solid var(--ink); border-radius:10px; }

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .mg-filters{ grid-template-columns: repeat(6, minmax(0,1fr)); }
  .mg-field{ grid-column: span 3; }
  .mg-grid{ grid-template-columns:1fr; }
}
@media (max-width: 560px){
  .mg-filters{ grid-template-columns: repeat(4, minmax(0,1fr)); gap:8px; }
  .mg-field{ grid-column: span 4; min-width:0; }
  .mg-combo{ min-width:0; }
  .mg-modal-card section{ padding:10px; }
}

/* ---------- Dark Mode ---------- */
@media (prefers-color-scheme:dark){
  .mg-container{ background:#0b1324; color:#e5e7eb; }
  .mg-card{ background:#0f172a; border-color:#253047; }
  .mg-field>label{ color:#e5e7eb; }
  .mg-input, .mg-select{ background:#0f172a; color:#e5e7eb; border-color:#253047; }
  .mg-combo-list{ background:#0f172a; border-color:#253047; box-shadow:0 16px 30px rgba(0,0,0,.45); }
  .mg-combo-item:hover{ background:#1a2336; }
  .mg-table-wrap{ background:#0f172a; }
  .mg-modal-card{ background:#0f172a; border-color:#253047; }
  .mg-modal-card header, .mg-modal-card footer{ border-color:#1f2937; }
  .mg-item{ background:#0f172a; }
  .mg-btn-ghost{ background:#0f172a; color:#e5e7eb; border-color:#253047; }
}

/* === Width guard === */
.mg-root, .mg-container{ overflow-x:hidden; }
.mg-card, .mg-table-wrap{ width:100%; max-width:100%; margin-inline:0; }
.mg-table-wrap{ overflow-x:hidden; overflow-y:visible; -webkit-overflow-scrolling:touch; overscroll-behavior-y:auto; }

/* Nama siswa boleh membungkus */
#mg-class-table td:nth-child(2) .mg-namecell{ white-space:normal; overflow-wrap:anywhere; }

/* ===== Mobile tweaks (≤480px) ===== */
@media (max-width:480px){
  #mg-class-table tbody tr{ grid-template-columns: 32px 1fr auto; }
  #mg-class-table tbody td:nth-child(1){ justify-self:center; }
  #mg-class-table .mg-idx{ width:24px; height:24px; font-size:11px; }
  #mg-class-table tbody td:nth-child(6){ max-width:84px; }
  #mg-class-table .mg-namecell h4{ font-size:13px; }
  #mg-class-table .mg-namecell small{ font-size:12px; }
}

.mg-header-out{ padding-left:12px; padding-right:12px; }
.mg-table-wrap{ margin-top:12px; }

.mg-table-caption{ font:700 13px/1.2 Poppins, sans-serif; color:#111827; margin:10px 10px 6px; }

/* === Combobox mobile layout === */
@media (max-width: 480px){
  #mg-class-combo.mg-combo{
    display:grid; grid-template-columns:minmax(0,1fr) max-content;
    grid-template-rows:auto auto; column-gap:8px; row-gap:6px;
    flex:1 1 100%; min-width:0; max-width:100%; position:static;
  }
  #mg-class-input.mg-input{
    grid-column:1; grid-row:1; width:100%;
    padding-right:10px !important; height:42px; text-overflow:ellipsis; min-width:0;
  }
  #mg-class-combo .mg-combo-ctrl{
    grid-column:2; grid-row:1; position:static !important; transform:none !important;
    display:flex; align-items:center; gap:6px; white-space:nowrap;
  }
  #mg-class-list.mg-combo-list{
    grid-column:1; grid-row:2; position:static; width:100% !important;
    display:none; max-height:40vh; overflow:auto; margin-top:0;
    border:1px solid #eef2f7; border-radius:10px; box-shadow:0 8px 18px rgba(0,0,0,.06);
  }
  #mg-class-combo.mg-combo.open #mg-class-list{ display:block; }
}

.mg-field-shell > .mg-select{ flex:1 1 auto; min-width:0; }
#mg-tp-menu-btn{ flex:0 0 auto; }

#mg-year-panel .mg-card-head{
  display:grid;
  grid-template-columns: 1fr max-content;
  align-items:end;
  gap:10px;
}
#mg-year-panel .mg-card-head .mg-inline{ display:flex; gap:8px; align-items:center; }
#mg-year-panel .mg-card-head .mg-inline .mg-input{ min-width:260px; }
#mg-year-panel .mg-card-head .mg-inline .mg-iconbtn{ flex:0 0 auto; }
@media (max-width:560px){
  #mg-year-panel .mg-card-head{ display:block; }
  #mg-year-panel .mg-card-head > div:first-child{ margin-bottom:6px; }
  #mg-year-panel .mg-card-head .mg-inline{ width:100%; margin-top:6px; }
  #mg-year-panel .mg-card-head .mg-inline .mg-input{ width:100%; flex:1 1 auto; min-width:0; }
}

/* Checkbox */
.mg-check{ display:flex; align-items:center; gap:8px; }
.mg-check input[type="checkbox"]{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  width:16px; height:16px; border:1.5px solid var(--border);
  border-radius:4px; background:#fff; display:inline-grid; place-items:center;
  cursor:pointer; position:relative; outline:none; transition:border-color .18s, box-shadow .18s, background .18s;
}
.mg-check input[type="checkbox"]:focus{ box-shadow:0 0 0 4px rgba(184,124,76,.18); }
.mg-check input[type="checkbox"]::after{
  content:""; width:10px; height:10px; transform:scale(0); transition:transform .18s;
  clip-path:polygon(14% 54%, 0 68%, 43% 100%, 100% 22%, 86% 8%, 40% 72%);
  background:var(--ink);
}
.mg-check input[type="checkbox"]:checked{ border-color:color-mix(in srgb, var(--ink) 70%, #000 0%); background:#fff; }
.mg-check input[type="checkbox"]:checked::after{ transform:scale(1); }
.mg-check label{ margin:0; cursor:pointer; }

/* Custom dropdown */
.mg-combo.mg-selectlike{ --combo-w:100%; min-width:180px; }
.mg-combo.mg-selectlike .mg-input{ cursor:pointer; user-select:none; background:#fff; }
.mg-combo.mg-selectlike .mg-combo-list{ position:absolute; top:calc(100% + 4px); left:0; width:var(--combo-w,100%); display:none; }
.mg-combo.mg-selectlike.open .mg-combo-list{ display:block; }
.mg-combo.mg-selectlike{ position:relative; }
.mg-combo.mg-selectlike .mg-combo-ctrl{ position:absolute; right:6px; top:50%; transform:translateY(-50%); display:flex; gap:6px; }
@media (max-width:480px){
  .mg-combo.mg-selectlike{ width:100%; min-width:0; }
  .mg-combo.mg-selectlike .mg-combo-list{ position:absolute; top:calc(100% + 4px); left:0; width:100%; }
}

/* Clipboard table */
.mg-clip-scroller{ overflow:auto; border:1px solid var(--border); border-radius:10px; }
table.mg-table.mg-clip{ table-layout:fixed; width:auto; max-width:100%; }
table.mg-table.mg-clip thead th{ position:sticky; top:0; background:var(--surface); z-index:1; }
table.mg-table.mg-clip th, table.mg-table.mg-clip td{
  width:220px; max-width:240px; white-space:normal; overflow-wrap:anywhere; word-break:break-word;
}

#mg-class-combo.mg-combo{ flex:1 1 420px; max-width:560px; }
#mg-class-input.mg-input{ height:42px; padding-right:86px; }
@media (max-width:900px){
  #mg-class-combo.mg-combo{ flex:1 1 360px; max-width:100%; }
}

#mg-class-combo.mg-combo{ position:relative; }
#mg-class-list.mg-combo-list{
  position:absolute; top:calc(100% + 4px) !important; left:0 !important;
  width:var(--combo-w, 100%) !important; margin-top:0 !important;
}

.mg-btn-square{
  width:38px; height:38px; padding:0; display:inline-grid; place-items:center; border-radius:10px;
}
@media (max-width:480px){ .mg-btn-square{ width:36px; height:36px; } }

#mg-class-table tbody .mg-empty,
#mg-class-table tbody .mg-loading{
  padding:12px; text-align:center; color:var(--text-muted);
  border:1px dashed var(--border); border-radius:12px; background:#fff;
  font:600 13px/1.3 Poppins, sans-serif;
}
#mg-class-table tbody tr.mg-state-row{
  display:block;
  border:0;
  box-shadow:none;
  padding:0;
  background:transparent;
}
#mg-class-table tbody tr.mg-state-row td{
  display:block;
  width:100%;
  padding:0;
}

.mg-inline{margin: 8px;}
#mg-tp-label{margin-top: -8px;}

#busyTitle{ font:600 13px/1.4 Poppins, system-ui, sans-serif; color:#111827; }


  /* === 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; }
  /* === FIX: halaman Manajemen harus scroll sebagai satu halaman, bukan scroll di dalam kartu tabel === */
.main{
  min-height:0;
  overflow:hidden;
}

.content{
  min-height:0;
  overflow-y:auto !important;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:auto;
  touch-action:pan-y;
}

.mg-container,
.mg-root{
  min-height:100%;
  overflow-y:visible;
}

.mg-table-wrap{
  overflow-x:hidden !important;
  overflow-y:visible !important;
  overscroll-behavior-y:auto !important;
  touch-action:pan-y;
}