:root{
    /* warna tema (diselaraskan dengan Absensi) */
    --brand: #A8BBA3;
    --paper: #F7F4EA;
    --tint:  #EBD9D1;
    --ink:   #B87C4C;
    --rose:  #F0CAD6;

    --surface: #fff;
    --border: rgba(17,17,17,.12);
    --text:   #0f172a;
    --text-muted: #6b7280;
    --danger:#b42318;

    /* lapisan permukaan lembut */
    --surface-soft:  color-mix(in srgb, var(--tint) 20%, var(--surface));
    --surface-softer:color-mix(in srgb, var(--tint) 32%, var(--surface));

    /* ukuran umum */
    --radius: 12px;

    /* z-index layering */
    --z-colmenu: 900;
    --z-dropdown: 1200;
    --z-popover: 1300;
    --z-modal-base: 1400;
    --z-modal-top: 1500;
    --busy-title-size: 16px;
  }

  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;
  }

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

  /* ====== Topbar ala Absensi ====== */
  .card-topbar{
    margin-bottom:12px;
    background:var(--surface-soft);
  }

  .toolbar{
    display:flex;
    align-items:flex-end;
    gap:12px;
    flex-wrap:wrap;
  }
  .field{
    min-width:260px;
    display:block;
  }
  .field > label{
    display:block;
    font:600 12px/1 Poppins, sans-serif;
    margin-bottom:6px;
    color:#111827;
  }
  .toolbar-actions{
    margin-left:auto;
    display:flex;
    gap:8px;
    align-items:flex-end;
  }

  .topbar-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin:-2px 0 8px;
    padding-bottom:6px;
    border-bottom:1px solid rgba(17,17,17,.08);
  }
  .topbar-title{
    display:flex;
    align-items:center;
    gap:8px;
  }
  .topbar-title .material-icons{
    font-size:20px;
    line-height:1;
    color:#111827;
  }
  .topbar-h2{
    margin:0;
    font:700 16px/1.2 Poppins, sans-serif;
    letter-spacing:.2px;
    color:#111827;
  }
  .topbar-subtitle{
    margin:2px 0 0;
    font-size:.82rem;
    color:var(--text-muted);
  }

  .filters{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    align-items:flex-end;
  }
  .filters .field{
    min-width:260px;
  }

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

  /* ===========================
     DASHBOARD LAYOUT
     =========================== */

  .dashboard-page{
    padding:0;
    display:flex;
    flex-direction:column;
    gap:14px;
    width:100%;
    margin:0 auto;
    box-sizing:border-box;
    min-height:calc(100vh - 96px); /* kira-kira tinggi header di Template */
  }

  .page-header{
    margin-bottom:4px;
  }
  .page-header h1{
    margin:0 0 4px;
    font-size:1.35rem;
    font-weight:700;
    color:var(--text);
  }
  .page-header p{
    margin:0;
    font-size:.86rem;
    color:var(--text-muted);
  }

  .card-header{
    margin-bottom:6px;
  }
  .card-header h2{
    margin:0;
    font-size:1.05rem;
    font-weight:600;
    color:var(--text);
  }
  .card-subtitle{
    margin:4px 0 0;
    font-size:.82rem;
    color:var(--text-muted);
  }
  .card-empty{
    margin:12px 0 0;
    font-size:.9rem;
    color:var(--text-muted);
  }

  .filter-summary{
    margin:4px 0 0;
    font-size:.8rem;
    color:var(--text-muted);
  }

  /* Grid grafik */
  .dash-grid{
    display:grid;
    grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
    gap:14px;
    align-items:stretch;
  }
  @media (max-width:960px){
    .dash-grid{
      grid-template-columns:minmax(0,1fr);
    }
  }

  canvas#chart-nilai,
  canvas#chart-hadir{
    width:100%;
    max-height:260px;
    margin-top:8px;
  }

  /* Tabel siswa di bawah KKTP */
  .table-wrapper{
    margin-top:10px;
    max-height:360px;
    overflow:auto;
    border-radius:12px;
    border:1px solid var(--border);
    background:var(--surface-soft);
  }
  #kktp-table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    font-size:.9rem;
    background:#fff;
  }
  #kktp-table thead{
    position:sticky;
    top:0;
    background:#fff;
    z-index:1;
  }
  #kktp-table th,
  #kktp-table td{
    padding:6px 10px;
    border-bottom:1px solid var(--border);
    text-align:left;
    white-space:nowrap;
    vertical-align:top;
  }
  #kktp-table th{
    font-weight:600;
    font-size:.8rem;
    color:#334155;
  }
  #kktp-table td{
    font-size:.86rem;
  }
  #kktp-table td.tests-cell{
    white-space:pre-line;
    font-size:.82rem;
  }
  #kktp-table tbody tr:nth-child(even){
    background:rgba(249,250,251,.7);
  }

  .student-name{
    font-weight:500;
    display:inline-block;
  }

  /* Alert error */
  .dash-alert{
    border-radius:10px;
    padding:8px 10px;
    font-size:.82rem;
  }
  .dash-alert-error{
    background:#fee2e2;
    color:#b91c1c;
    border:1px solid #fecaca;
  }

  /* =========================
     BUTTONS
     ========================= */
  .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 ease, box-shadow .18s ease, background .18s ease, opacity .18s ease;
    display:inline-flex;
    align-items:center;
    gap:4px;
  }
  .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-outline{
    background:var(--surface-soft);
    color:#0f172a;
    border:1px solid var(--border);
    border-radius:10px;
    padding:6px 12px;
    font:600 13px/1 Poppins, system-ui, sans-serif;
    display:inline-flex;
    align-items:center;
    gap:4px;
    cursor:pointer;
  }
  .btn-outline .material-icons{
    font-size:18px;
  }

  .btn-link{
    border:none;
    padding:0;
    margin:2px 0 0;
    background:none;
    font-size:.78rem;
    color:#2563eb;
    cursor:pointer;
  }
  .btn-link:hover{
    text-decoration:underline;
  }

  .btn-icon{
    border-radius:999px;
    border:1px solid var(--border);
    padding:4px 8px;
    background:#fff;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    font-size:.8rem;
  }
  .btn-icon .material-icons{
    font-size:1rem;
  }
  .btn,
  .btn-outline,
  .btn-icon{
    position:relative;
    transform:translateY(0);
    transition:transform .06s ease, filter .18s ease, box-shadow .18s ease;
    will-change:transform;
  }
  .btn:active,
  .btn-outline:active,
  .btn-icon:active{
    transform:translateY(1px) scale(.99);
    filter:brightness(.98);
  }
  .btn:focus-visible,
  .btn-outline:focus-visible,
  .btn-icon:focus-visible{
    outline:2px solid var(--ink);
    outline-offset:2px;
  }

  /* =========================
     COMBOBOX (pola Absensi)
     ========================= */
  .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;
  }
  .combo input[type="text"].is-placeholder{
    color:#94a3b8;
  }
  .combo input[type="text"].is-selected{
    color:#0f172a;
  }
  .combo input[type="text"]:focus{
    border-color:#cbd5e1;
    box-shadow:0 0 0 4px rgba(182,172,212,.15);
  }
  .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;
  }
  .combo .dd-icon:hover{
    background:#f1f5f9;
  }
  .combo .dd-icon .material-icons{
    font-size:20px;
    transition:transform .18s;
  }
  .combo.open .dd-icon .material-icons{
    transform:rotate(180deg);
  }

  .combo-list{
    position:absolute;
    z-index:calc(var(--z-dropdown) + 1);
    left:0;
    right:0;
    margin-top:2px;
    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-item,
  .combo-option{
    padding:10px 12px;
    font-size:13px;
    cursor:pointer;
    white-space:normal;
  }
  .combo-item:hover,
  .combo-item[aria-selected="true"],
  .combo-option:hover,
  .combo-option.is-active{
    background:#f1f5f9;
  }
  .combo-empty{
    padding:10px 12px;
    font-size:13px;
    color:#9ca3af;
    cursor:default;
  }
  .combo-empty[aria-disabled="true"]{
    pointer-events:none;
  }

  /* ===========================
     MODAL DETAIL SISWA
     =========================== */
  .dash-modal{
    position:fixed;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:var(--z-modal-top);
  }
  .dash-modal[hidden]{
    display:none;
  }
  .dash-modal-backdrop{
    position:absolute;
    inset:0;
    background:color-mix(in srgb,#000 40%,transparent);
  }
  .dash-modal-dialog{
    position:relative;
    background:radial-gradient(1200px 500px at 50% -200px,
      var(--surface) 0%,
      var(--surface-soft) 55%,
      var(--surface-softer) 100%);
    border-radius:16px;
    max-width:720px;
    width:min(720px,96vw);
    max-height:min(86vh,640px);
    display:flex;
    flex-direction:column;
    box-shadow:0 24px 60px rgba(15,23,42,.4);
    padding:10px 14px 12px;
  }
  .dash-modal-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding-bottom:4px;
    border-bottom:1px solid #eef2f7;
  }
  .dash-modal-header h3{
    margin:0;
    font-size:1rem;
  }
  .dash-modal-close{
    border:none;
    background:transparent;
    font-size:1.3rem;
    line-height:1;
    cursor:pointer;
  }
  .dash-modal-body{
    padding:8px 12px 8px 0;
    overflow:auto;
    flex:1 1 auto;
  }
  .detail-meta{
    font-size:.82rem;
    color:var(--text-muted);
  }
  .detail-section{
    margin:10px 0;
  }
  .detail-section h4{
    margin:4px 0;
    font-size:.9rem;
  }
  .detail-section + .detail-section{
    margin-top:16px;
  }
  #detail-summary-grade,
  #detail-summary-att{
    font-size:.82rem;
    margin:2px 0 4px;
  }

  .detail-table-wrapper{
    margin-top:4px;
    border-radius:12px;
    border:1px solid var(--border);
    padding:2px 0;
    overflow:auto;
    background:var(--surface-soft);
  }
  .detail-table{
    width:100%;
    min-width:640px;
    border-collapse:separate;
    border-spacing:0;
    font-size:.82rem;
    background:#fff;
  }
  @media (max-width:480px){
    .detail-table{
      min-width:520px;
    }
  }
  .detail-table thead{
    position:sticky;
    top:0;
    background:#fff;
    z-index:1;
  }
  .detail-table th,
  .detail-table td{
    padding:4px 6px;
    border-bottom:1px solid var(--border);
    text-align:left;
    vertical-align:top;
  }
  .detail-table th{
    font-weight:600;
    color:#374151;
  }

  .dash-modal-footer{
    display:flex;
    justify-content:flex-end;
    gap:8px;
    padding-top:6px;
    border-top:1px solid #eef2f7;
  }

  /* warna dinamis nilai & absensi (di-set via style) */
  .cell-grade{
    background:var(--grade-bg,transparent);
  }
  .att-status-cell{
    background:var(--att-bg,transparent);
    font-weight:600;
  }
  

  /* === 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; }

  /* ====== Ringkasan Prioritas Dashboard ====== */
  .dash-overview-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:14px;
  }
  .dash-overview-card{
    display:flex;
    align-items:flex-start;
    gap:10px;
    min-height:92px;
  }
  .dash-overview-icon{
    width:36px;
    height:36px;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--surface-soft);
    border:1px solid rgba(17,17,17,.08);
    flex:0 0 auto;
  }
  .dash-overview-icon .material-icons{
    font-size:20px;
    color:#111827;
  }
  .dash-overview-label{
    margin:0 0 4px;
    font-size:.76rem;
    font-weight:600;
    color:var(--text-muted);
  }
  .dash-overview-card h2{
    margin:0;
    font-size:1.05rem;
    line-height:1.25;
    font-weight:700;
    color:var(--text);
  }
  .dash-overview-meta{
    margin:5px 0 0;
    font-size:.78rem;
    line-height:1.35;
    color:var(--text-muted);
  }

  .dash-priority-grid{
    display:grid;
    grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);
    gap:14px;
  }
  .dash-warning-list{
    margin:8px 0 0;
    padding-left:18px;
    font-size:.84rem;
    color:#334155;
  }
  .dash-warning-list li + li{
    margin-top:5px;
  }
  .dash-quick-actions{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:8px;
    margin-top:10px;
  }
  .dash-quick-actions .btn-outline{
    justify-content:center;
    text-decoration:none;
    min-height:38px;
  }

  @media (max-width:1100px){
    .dash-overview-grid{
      grid-template-columns:repeat(2, minmax(0,1fr));
    }
  }
  @media (max-width:760px){
    .dash-overview-grid,
    .dash-priority-grid{
      grid-template-columns:minmax(0,1fr);
    }
    .dash-quick-actions{
      grid-template-columns:minmax(0,1fr);
    }
  }