:root{
      /* ==== PALET WARNA ==== */
      --primary: #A8BBA3;
      --paper:   #F7F4EA;
      --muted:   #EBD9D1;
      --accent:  #B87C4C;
      --pink:    #F0CAD6;

      /* ==== WARNA TEKS & UI ==== */
      --bg: var(--paper);
      --text: #1f2937;
      --text-muted: #6b7280;
      --border: rgba(0,0,0,0.08);
      --card: #ffffff;
      --shadow: none; /* Flat design */

      /* ==== SIDEBAR ==== */
      --sidebar-bg: #ffffff;
      --sidebar-backdrop: transparent;
      --sidebar-width: 280px;
      --sidebar-width-mini: 80px;

      /* ==== NAV ==== */
      --nav-active-bg: var(--primary);
      --nav-active-text: #0f172a;
      --nav-hover-bg: #f4f7f2;

      /* ==== KOMPONEN ==== */
      --btn-bg: var(--primary);
      --btn-text: #0b1324;
      --btn-hover: #92aa8f;
      
      --radius-xl: 0px; 
    }

    /* ==== RESET ==== */
    *{ box-sizing: border-box; }
    html, body{ height:100%; margin:0; padding:0; overflow: hidden; }
    body{
      background:var(--bg); color:var(--text);
      font-family: Poppins, Roboto, system-ui, -apple-system, sans-serif;
    }
    a{ color:inherit; text-decoration:none; }

    /* ==== APP LAYOUT ==== */
    .app{
      width: 100vw;
      height: 100vh;
      height: 100dvh;
      display:flex;
      gap: 4px;       
      padding: 0;
      overflow: hidden;
    }

    /* ==== SIDEBAR ==== */
    .sidebar{
      width: var(--sidebar-width); 
      flex: 0 0 var(--sidebar-width);
      background:var(--sidebar-bg);
      border-right:1px solid var(--border);
      border-radius: 0;
      box-shadow: none;
      
      padding: 18px;
      height: 100vh;
      height: 100dvh; 
      position: relative; 
      
      /* PENTING: Visible agar tombol chevron bisa 'keluar' dari sidebar */
      overflow: visible; 
      
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      z-index: 50;
      display: flex;
      flex-direction: column;
    }

    /* Collapsed Logic */
    .sidebar.collapsed {
        width: var(--sidebar-width-mini);
        flex: 0 0 var(--sidebar-width-mini);
        padding: 18px 10px;
    }

    /* Hide text when collapsed */
    .sidebar.collapsed .brand span:not(.material-icons),
    .sidebar.collapsed .version-badge,
    .sidebar.collapsed .searchbox input,
    .sidebar.collapsed .nav-title,
    .sidebar.collapsed .nav-text {
        display: none;
        opacity: 0;
    }

    /* Centering items when collapsed */
    .sidebar.collapsed .brand { justify-content: center; margin-bottom: 24px; }
    .sidebar.collapsed .searchbox {
        justify-content: center; border-color: transparent; background: transparent;
        padding: 0; margin-bottom: 24px;
    }
    .sidebar.collapsed .searchbox .material-icons { font-size: 24px; color: var(--text-muted); }
    .sidebar.collapsed .nav a { justify-content: center; padding: 12px 0; }
    .sidebar.collapsed .nav a .material-icons { margin: 0; font-size: 24px; }
    .sidebar.collapsed .divider { margin: 12px 0; }

    /* ==== TOGGLE BUTTON (CHEVRON) ==== */
    .sidebar-toggle-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: -14px;             /* Offset keluar agar terlihat jelas */
        width: 28px;
        height: 28px;
        background: #fff;
        border: 1px solid var(--border);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        /* Shadow agar tombol kontras dengan background konten */
        box-shadow: 2px 1px 6px rgba(0,0,0,0.1); 
        z-index: 100;
        color: var(--text-muted);
        transition: background 0.2s, color 0.2s, transform 0.2s;
    }
    .sidebar-toggle-btn:hover { 
        background: var(--primary); 
        color: #fff; 
        transform: translateY(-50%) scale(1.1);
    }
    @media (max-width: 900px){ .sidebar-toggle-btn { display: none; } }

    /* ==== SIDEBAR CONTENT STYLE ==== */
    .brand{
      display:flex; align-items:center; gap:12px; margin-bottom:14px;
      font-weight:700; letter-spacing:.3px;
      white-space: nowrap; overflow: hidden; flex-shrink: 0;
    }
    .brand .material-icons{ color: var(--accent); flex-shrink: 0; }
    .version-badge{
      font: 600 11px/1 Poppins, sans-serif;
      color:#fff; background:var(--accent);
      padding:4px 8px; border-radius:999px; margin-left:auto;
    }
    .searchbox{
      display:flex; align-items:center; gap:8px;
      border:1px solid var(--border); border-radius:12px; background:#f9fafb;
      padding:8px 10px; margin:10px 0 16px; flex-shrink: 0;
    }
    .searchbox input{ width:100%; border:none; outline:none; background:transparent; font:500 13px Poppins; }
    
    .nav-group{ 
        margin-top:8px; 
        flex: 1; 
        /* Scroll handle di dalam grup nav, bukan seluruh sidebar */
        overflow-y: auto; 
        overflow-x: hidden; 
        scrollbar-width: none; 
    }
    .nav-group::-webkit-scrollbar { display: none; }

    .nav-title{
      font: 700 12px/1 Poppins, sans-serif; color: var(--text-muted);
      text-transform: uppercase; letter-spacing:.12em; margin: 14px 10px 8px;
      white-space: nowrap;
    }
    .nav{ display:flex; flex-direction:column; gap:6px; }
    .nav a{
      display:flex; align-items:center; gap:12px;
      padding:10px 12px; border-radius:12px; border:1px solid transparent;
      transition: all .18s ease;
      white-space: nowrap; overflow: hidden;
      color: var(--text-muted);
    }
    .nav a .material-icons{ font-size:20px; color:inherit; flex-shrink: 0; }
    .nav a:hover{ background: var(--nav-hover-bg); color: var(--text); }
    .nav a.active, .nav a[aria-current="page"]{
      background: var(--nav-active-bg); color: var(--nav-active-text);
    }

    .divider{ height:1px; background:var(--border); margin:16px 0; flex-shrink: 0; }

    /* ==== MAIN & CONTENT ==== */
    .main{
      flex:1; min-width:0; 
      display:flex; flex-direction:column; 
      gap:0; 
      height: 100vh;
      height: 100dvh;
      background: var(--bg);
    }

    /* Desktop: Sembunyikan Topbar agar konten naik penuh ke atas */
    .topbar{
      display: none; 
      flex-shrink: 0;
      align-items:center; gap:8px; 
      background: #fff;
    }

    .menu-toggle{
      display:none; border:none; background:transparent;
      padding:8px; border-radius:8px; cursor:pointer; color: var(--text-muted);
    }
    .menu-toggle:hover { background: rgba(0,0,0,0.05); }

    .content{
      flex: 1; 
      background:var(--card); 
      border: none; border-radius: 0; box-shadow: none; 
      padding:20px;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain; 
    }

    /* ==== OVERLAY (Mobile) ==== */
    .overlay{
      position:fixed; inset:0; 
      background: transparent; 
      opacity:0; pointer-events:none; transition:.25s ease; z-index: 40;
    }
    .overlay.show{ opacity:1; pointer-events:auto; }

    /* ==== RESPONSIVE (Mobile/Tablet < 900px) ==== */
    @media (max-width: 900px){
      /* Kembalikan Topbar untuk Hamburger Menu */
      .topbar {
        display: flex;
        padding: 8px 16px;
        border-bottom: 1px solid var(--border);
        min-height: 50px;
      }

      .sidebar{
        position:fixed; top:0; left:0; bottom:0;
        border-right: none; border-radius:0; 
        box-shadow: 4px 0 12px rgba(0,0,0,0.1);
        width: 86vw; max-width: 320px;
        transform: translateX(-100%);
        z-index: 120;
        overflow: hidden; /* Mobile drawer tetap hidden overflow */
      }
      .sidebar.open{ transform: translateX(0); }
      .menu-toggle{ display:inline-flex; }
      .sidebar.collapsed { width: 86vw; flex: 0 0 auto; } 
    }

    /* ==== TOAST ==== */
    .toast{
      position: fixed; left:50%; bottom:22px; transform: translateX(-50%);
      background:#111827; color:#fff; padding:10px 14px; border-radius:12px;
      font:600 13px/1 Poppins, sans-serif; opacity:0; pointer-events:none; 
      transition:.25s ease; z-index:2000;
    }
    .toast.show{ opacity:1; pointer-events:auto; }

    /* Busy overlay paling awal saat halaman dimuat ulang */
    #twbBusyOverlay{
      position:fixed; inset:0;
      background:rgba(15,23,42,.45);
      display:flex; align-items:center; justify-content:center;
      z-index:3000;
    }
    #twbBusyOverlay .twb-busy-box{
      min-width:320px; background:#fff; border-radius:14px;
      padding:14px 18px; display:flex; flex-direction:column;
      align-items:center; gap:8px;
      box-shadow:0 18px 50px rgba(15,23,42,.22);
    }
    #twbBusyOverlay .twb-busy-spinner{
      width:44px; height:44px; border-radius:999px;
      border:3px solid rgba(148,163,184,.45);
      border-top-color:#A8BBA3;
      animation:twbBusySpin .8s linear infinite;
    }
    #twbBusyOverlay .twb-busy-text{
      font:600 13px Poppins, Roboto, system-ui, sans-serif;
      color:#111827; text-align:center;
    }
    @keyframes twbBusySpin{ to{ transform:rotate(360deg); } }

/* [FIX UTAMA] Override padding #content dari Template.html
     agar sticky header menempel sempurna di tepi atas viewport */
  #content {
    padding: 0 !important;
  }

  :root{
    /* warna tema */
    --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;

    /* lebar kolom nama (sticky kiri) */
    --name-col: 172px;
    --col-w: 96px;

    /* ukuran sel kalender laporan */
    --cal-col-gap: 8px;
    --cal-row-gap: 2px;
    --cal-col-w: 68px;
    --cal-row-h: 44px;

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

  /* =========================
     LAYOUT & BASICS
     ========================= */
  html, body{
    margin:0; padding:0;
    background: var(--paper);
    color: var(--text);
    font: 500 14px/1.35 Poppins, Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
    touch-action: pan-x pan-y pinch-zoom;
  }

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

  /* [FIX] Tambahkan margin manual karena padding #content dihapus */
  .card-topbar{
    margin: 20px 20px 12px 20px;
    background: var(--surface-soft);
  }
  .card-table{
    margin: 0 20px 20px 20px;
    padding: 0;
    background: var(--surface-soft);
    border-radius: 8px;
    /* Pastikan overflow visible agar sticky bekerja di dalam card */
    overflow: visible; 
  }
  /* Responsif: margin lebih kecil di mobile */
  @media (max-width: 600px){
    .card-topbar { margin: 12px 12px 8px 12px; }
    .card-table { margin: 0 12px 12px 12px; }
  }

  .tbl-tip{ padding: 8px 12px; }

  .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; }
  .muted{ color: var(--text-muted); }
  .small{ font-size: 12px; }

  /* Topbar title */
  .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;
  }

  /* Scroll wrapper */
  .scroll-wrap{
    overflow: auto !important;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain;
    background: var(--surface-softer);
  }

  /* ==== Split table: sticky head ==== */
  .table-stack { position: relative; width: max-content; }

  /* [FIX] Header table & Scroller Sticky */
  .head-scroller{
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--surface-soft);
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); /* Shadow lebih tegas saat nempel */
    overflow: hidden;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }
  
  #absenHeadTable{
    background: var(--surface-soft);
  }

  #absenHeadTable, #absenBodyTable{
    table-layout: fixed;
    width: auto;
    display: inline-table;
  }
  @supports (width: max-content){
    #absenHeadTable, #absenBodyTable{ width: max-content; display: table; }
  }

  /* =========================
     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;
  }
  .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 ease, box-shadow .18s ease, border-color .18s ease, transform .08s ease;
  }
  .btn-ghost:hover{ background:#faf6f1; box-shadow: 0 3px 10px rgba(0,0,0,.06); }
  .btn-ghost:active{ transform: translateY(1px); }

  .btn-danger{
    background: var(--danger);
    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,.08);
    transition: transform .08s ease, box-shadow .18s ease, background .18s ease, opacity .18s ease;
  }
  .btn-danger:hover{
    background: color-mix(in srgb, var(--danger) 92%, #000 8%);
    box-shadow:0 6px 18px rgba(0,0,0,.12);
  }
  .btn-danger:active{ transform: translateY(1px); }
  .btn-danger:focus{ outline:3px solid color-mix(in srgb, var(--danger) 35%, transparent); outline-offset:2px; }
  .btn-danger[disabled]{ opacity:.55; cursor:not-allowed; box-shadow:none; }

  #addDateBtn .material-icons,
  #saveBtn .material-icons,
  #exportCsvBtn .material-icons{
    font-size:18px;
    line-height:1;
    vertical-align:-2px;
  }

  /* =========================
     COMBOBOX (kelas) & LIST
     ========================= */
  .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{ padding:10px 12px; font-size:13px; cursor:pointer; white-space:normal; }
  .combo-item:hover, .combo-item[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; }

  /* =========================
     TABLE (Absensi)
     ========================= */
  .tbl{
    width: 100%; table-layout: auto; border-collapse: separate; border-spacing: 0;
    font-size: 13px;
  }
  .tbl th, .tbl td{ white-space: nowrap; vertical-align: top; box-sizing: border-box; }

  /* PERF: spacer-baris untuk virtualisasi */
  .row-spacer > td{
    padding:0 !important;
    border:0 !important;
    height: var(--row-spacer-h, 0px) !important;
  }

  /* Sticky kiri (kolom nama) + lebar tetap */
  .tbl .sticky-left,
  .tbl thead th:first-child,
  .tbl tbody td:first-child{
    position: sticky; left: 0;
    background: var(--surface-soft);
    z-index: 3;
    width: var(--name-col) !important;
    min-width: var(--name-col) !important;
    max-width: var(--name-col) !important;
    box-sizing: border-box;
    backface-visibility: hidden;
    transform: translateZ(0);
    contain: layout paint size;
  }
  .tbl thead .sticky-left{ z-index: 4; }

  /* Header Nama & sel nama */
  .tbl .hdr-nama, .tbl .cell-nama{
    width: var(--name-col) !important;
    min-width: var(--name-col) !important;
    max-width: var(--name-col) !important;
  }
  /* CHANGE: sejajarkan teks nama dengan nomor urut */
  .tbl .cell-nama{
    position:relative;
    padding: 6px 36px 9px 34px; /* top 6px = sejajar dgn .row-no {top:6px} */
    white-space: normal;
  }
  .tbl .cell-nama .nama{
    display:flex;               /* pastikan konten rata secara vertikal */
    align-items:center;         /* baris pertama sejajar dgn badge (20px) */
    min-height:20px;            /* tinggi minimal = tinggi badge */
    overflow-wrap:anywhere;
    word-break: break-word;
    line-height:1.25;
  }

  /* Kolom tanggal (grid) */
  .tbl th.th-date,
  .tbl th.th-date-sub,
  .tbl td:not(.sticky-left){
    width: 96px; min-width: 96px; max-width: 96px;
    text-align: center !important; padding: 4px 6px; overflow: visible;
  }

  /* Kolom aktif */
  .tbl .th-date.active{ outline:2px solid var(--ink); outline-offset:-4px; border-radius:12px; background: var(--surface); }
  .tbl .th-date .pick-col{ font:600 12px/1 Poppins, sans-serif; }
  .tbl .th-date-sub{ font:500 11px/1.2 Poppins, sans-serif; color:#6b7280; }

  /* Sel nilai + komentar */
  .cell-wrap{ display:flex; gap:4px; align-items:center; justify-content:center; }
  .cell-select-btn{
    width:100%; min-width:58px; font-size: 12px; padding:4px 6px;
    border:1px solid var(--border); border-radius:8px; background: color-mix(in srgb, #fff 85%, var(--tint));
    display:flex; align-items:center; justify-content:center; gap:6px;
    transition: background .15s ease, border-color .15s ease, transform .08s ease;
  }
  .cell-select-btn:hover{ background: color-mix(in srgb, #fff 78%, var(--tint)); transform: translateY(-1px); }

  .cell-comment-wrap{ margin-top:4px; }
  .cell-comment{
    width:100%; min-width:58px; font-size: 11px; font-style: normal;
    padding:4px 6px; border:1px solid var(--border); border-radius:8px; background: color-mix(in srgb, #fff 90%, var(--tint));
  }
  .cell-comment:focus{ outline: 3px solid rgba(184,124,76,.20); outline-offset: 1px; border-color: rgba(184,124,76,.40); }
  .cell-comment::placeholder{
    font-family: Poppins, Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
    font-size: 11px; font-style: italic; color: var(--text-muted); opacity: .85;
  }
  .cell-comment:placeholder-shown{
    font-family: Poppins, Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
    font-size: 11px; font-style: italic; color: var(--text-muted);
  }

  /* Spacer kolom untuk virtualisasi */
  .tbl .spacer{
    padding:0 !important; border:0 !important; background:transparent !important;
    width:0; min-width:0;
  }

  /* Ikon laporan di sel nama */
  .report-btn{
    position:absolute; right:6px; top:6px;
    width:28px; height:28px;
    display:inline-flex; align-items:center; justify-content:center;
    border:1px solid var(--border); border-radius:8px; background:#fff; cursor:pointer;
    transition: background .18s ease, transform .08s ease, border-color .18s ease;
  }
  .report-btn .material-icons{ font-size:18px; color:#475569; }
  .report-btn:hover{ background:#f3f4f6; transform: translateY(-1px); border-color:#d1d5db; }

  /* Nomor urut (badge) */
  .row-no{
    position: absolute;
    left: 6px; top: 6px;
    width: 20px; height: 20px;
    border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    font: 700 11px/1 Poppins, sans-serif;
    color: #fff;
    background: #B87C4C;
    opacity: .95;
  }

  /* =========================
     MENU KOLUM AKTIF
     ========================= */
  .col-menu{
    position:absolute; z-index: var(--z-colmenu);
    background:#fff; border:1px solid var(--border); border-radius:12px;
    box-shadow: 0 10px 30px rgba(0,0,0,.12); padding:6px; width:max-content; max-width:min(420px, calc(100vw - 24px));
  }
  .col-menu[style*="display: none"]{ display:none !important; }
  .menu-item{
    display:flex; gap:8px; align-items:center; width:100%; text-align:left;
    background:#fff; border:1px solid transparent; border-radius:10px; padding:8px 10px; cursor:pointer;
    font:600 13px/1.1 Poppins, sans-serif; transition: background .18s ease, border-color .18s ease, transform .08s ease;
  }
  .menu-item span.material-icons{ font-size:18px; }
  .menu-item:hover{ background:#fafafa; transform: translateY(-1px); }
  .menu-item.danger{ color:#b42318; }
  .menu-sep{ height:1px; background:#eef2f7; margin:6px 4px; }

  /* =========================
     DROPDOWN ABSENSI
     ========================= */
  #absenDropdown{ z-index: var(--z-dropdown); }
  #absenDropdown{
    overflow-y: visible !important;
    max-height: none !important;
  }

  /* =========================
     MODAL (Generic)
     ========================= */
  .modal[hidden]{ display:none; }
  .modal{ position: fixed; inset:0; }
  .modal-backdrop{
    position:absolute; inset:0;
    background: color-mix(in srgb, #000 40%, transparent);
    opacity:0; transition: opacity .16s ease;
  }
  .modal-dialog{
    position:absolute; left:50%; top:50%; transform: translate(-50%, calc(-50% + 8px)) scale(.98);
    width: min(820px, calc(100vw - 32px));
    background:#fff; border:1px solid var(--border); border-radius:14px;
    box-shadow: 0 24px 60px rgba(0,0,0,.18);
    opacity:0; transition: opacity .16s ease, transform .16s ease;

    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, sans-serif; }
  .modal-close{
    width:32px;height:32px;border:0;background:transparent;border-radius:8px;cursor:pointer;font-size:20px;line-height:1;
  }
  .modal-close:hover{ background:#f3f4f6; }

  .modal-body{ padding:14px; flex: 1 1 auto; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
  .modal-foot{ display:flex; gap:8px; justify-content:flex-end; padding:12px 14px; border-top:1px solid #eef2f7; }

  /* Hirarki modal */
  #studentReportModal.modal{ z-index: var(--z-modal-base); }
  #editDateModal.modal{ z-index: var(--z-modal-top); }
  #addDateModal.modal{ z-index: var(--z-modal-top); }
  #celeModal.modal{ z-index: calc(var(--z-modal-top) + 20); }
  #deleteColModal.modal{ z-index: calc(var(--z-modal-top) + 40); }

  /* =========================
     LAPORAN SISWA — RINGKASAN
     ========================= */
  .rep-head{
    align-items:flex-end;
    gap:12px;
    flex-wrap:wrap;
  }
  .rep-head-left{
    flex:1 1 auto;
    min-width:0;
  }
  .rep-head-right{
    flex:0 0 auto;
    min-width:220px;
  }
  @media (max-width: 600px){
    .rep-head-right{ width:100%; }
  }

  .rep-sum{ display:grid; grid-template-columns: repeat(auto-fit,minmax(120px,1fr)); gap:8px; }
  .rep-chip{
    border:1px solid var(--border); border-radius:12px; padding:8px 10px;
    display:flex; align-items:center; justify-content:space-between; gap:8px; background:#fff;
  }
  .rep-chip .k{ font:700 12px/1 Poppins, sans-serif; }
  .rep-chip .v{ font:700 12px/1 Poppins, sans-serif; color:#111827; }
  .rep-chip .p{ font:700 12px/1 Poppins, sans-serif; color:#6b7280; }

  /* Tinggi tetap area grafik ringkasan siswa */
  #repChartWrap{
    height: 180px;              
    position: relative;
  }
  #repChartWrap canvas{
    width: 100% !important;
    height: 100% !important;    
    display: block;
  }

  /* =========================
     LAPORAN SISWA — KALENDER
     ========================= */
  .rep-cals-wrap{ margin-top:8px; }
  .rep-month-title{ font:700 14px/1.2 Poppins, sans-serif; text-align:center; margin-bottom:6px; }
  .rep-cals .rep-month{ margin-top:6px; }
  .rep-cals .rep-month + .rep-month{ margin-top:14px; }
  .rep-cals .rep-divider{ height:1px; background:#e5e7eb; margin:10px 0 8px; border:0; }

  .rep-cal{
    width:100%; table-layout: fixed;
    border-collapse: separate; border-spacing: var(--cal-col-gap) var(--cal-row-gap);
    font:600 12px/1.3 Poppins, sans-serif;
  }
  .rep-cal th, .rep-cal td{ border:0 !important; text-align:center; }
  .rep-cal th{ background:#fafafa; position:static !important; top:0; z-index:1; padding: 4px 2px; }
  .rep-cal td{ padding:0; height:var(--cal-row-h); }
  .cal-box{
    width:100%; height:100%;
    display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
    border-radius:8px; background:#e5e7eb; gap:2px; padding:2px 4px;
  }
  .cal-day{ font-weight:700; font-size:11px; line-height:1; color:#111827; }
  .cal-code{
    color:#fff !important; font:700 11px/1 Poppins, sans-serif;
    text-shadow: 0 1px 2px rgba(0,0,0,.25); padding:1px 4px; border-radius:6px;
  }

  /* =========================
     LAPORAN SISWA — CATATAN
     ========================= */
  .rep-notes-wrap{ margin-top:10px; }
  .rep-notes-title{ font:700 12px/1 Poppins, sans-serif; margin-bottom:6px; }
  .rep-notes{ margin:0; padding-left:18px; font:500 12px/1.5 Poppins, sans-serif; color:#374151; }
  .rep-notes li + li{ margin-top:4px; }

  /* =========================
     RESPONSIVE & PREFERENCES
     ========================= */
  @supports (-webkit-overflow-scrolling: touch){
    .tbl .sticky-left{ transform: translate3d(0,0,0); }
  }

  @media (max-width: 625px){
    .tbl{ table-layout: fixed; }
    .tbl thead th:first-child,
    .tbl tbody td:first-child{
      width: var(--name-col) !important;
      min-width: var(--name-col) !important;
      max-width: var(--name-col) !important;
    }
    .modal-body{ padding: 10px; }
  }

  /* ====== MG styles ====== */
  .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;
    display:inline-flex; align-items:center; gap:6px;
  }
  .mg-btn:hover{ background:#a0643f; box-shadow:0 6px 18px rgba(0,0,0,.10); }
  .mg-btn:active{ transform:translateY(1px); }
  .mg-btn[disabled]{ opacity:.55; cursor:not-allowed; box-shadow:none; }

  .mg-btn-ghost{
    background:#fff; 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 ease;
    display:inline-flex; align-items:center; gap:6px;
  }
  .mg-btn-ghost:hover{ background:#fafafa; box-shadow:0 3px 10px rgba(0,0,0,.06); }
  .mg-btn-ghost:active{ transform:translateY(1px); }

  .mg-input{
    height:36px; border:1px solid var(--border); border-radius:8px; padding:0 10px;
    background:#fff; font:600 13px/1.2 Poppins,sans-serif; width:100%; max-width:260px;
  }

  .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;
  }
  @keyframes mgFade{ from{opacity:0} to{opacity:1} }
  .mg-modal-card{
    width:min(420px, 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 > header{ padding:12px 14px; border-bottom:1px solid #eef2f7; }
  .mg-modal-card > section{ padding:14px; }
  .mg-modal-card > footer{
    display:flex; gap:8px; justify-content:flex-end; padding:12px 14px; border-top:1px solid #eef2f7;
  }

  /* Safari: italic placeholder */
  @supports (-webkit-touch-callout: none) {
    .cell-comment:placeholder-shown { font-style: italic; }
  }

  /* OVERRIDE: Modal "Ubah Tanggal" & "Tambah Kolom" */
  #editDateModal .modal-dialog,
  #addDateModal .modal-dialog{
    width: min(420px, calc(100vw - 32px));
  }
  #editDateModal .modal-head,
  #addDateModal .modal-head{
    padding: 14px 16px;
    border-bottom: 1px solid rgba(17,17,17,.08);
  }
  #editDateModal .modal-title,
  #addDateModal .modal-title{
    font: 700 15px/1.2 Poppins, sans-serif;
    letter-spacing: .2px;
  }
  #editDateModal .modal-body,
  #addDateModal .modal-body{ padding: 16px; }
  #editDateModal .modal-label,
  #addDateModal .modal-label{
    margin-bottom: 6px;
    font: 600 12px/1 Poppins, sans-serif;
    color: #111827;
  }

  /* Input tanggal */
  #editDateInput,
  #addDateInput{
    border: 1px solid var(--border);
    background: #fff;
    font: 600 13px/1 Poppins, sans-serif;
    box-shadow: inset 0 1px 0 rgba(0,0,0,.02);
  }
  #editDateInput:focus,
  #addDateInput:focus{
    outline: 3px solid rgba(184,124,76,.22);
    outline-offset: 2px;
    border-color: rgba(184,124,76,.45);
  }
  #editDateInput::-webkit-calendar-picker-indicator,
  #addDateInput::-webkit-calendar-picker-indicator{
    opacity: .85; cursor: pointer; margin-right: 2px;
  }
  #editDateInput::-webkit-calendar-picker-indicator:hover,
  #addDateInput::-webkit-calendar-picker-indicator:hover{ opacity: 1; }

  #editDateModal .modal-foot,
  #addDateModal .modal-foot{
    padding: 12px 16px;
    border-top: 1px solid rgba(17,17,17,.08);
  }

  /* Modal (terbuka) tetap izinkan pinch */
  .modal, .modal-dialog{ touch-action: pan-x pan-y pinch-zoom; }

  /* Perbaikan scroll kartu tabel absensi */
  #scrollWrap{
    overflow-x: auto !important;
    overflow-y: visible !important;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto !important;
    touch-action: pan-x pan-y pinch-zoom !important;
    -webkit-overflow-scrolling: touch !important;
  }
  @media (pointer: coarse), (hover: none) {
    #scrollWrap{
      touch-action: auto !important;
      overflow-y: visible !important;
      overscroll-behavior-y: auto !important;
      -webkit-overflow-scrolling: touch !important;
    }
  }

  /* Breakpoints lebar kolom nama */
  @media (min-width: 1024px) { :root { --name-col: 200px; } }
  @media (min-width: 1280px) { :root { --name-col: 220px; } }
  @media (min-width: 1600px) { :root { --name-col: 300px; } }

  /* Pastikan selector kolom nama mengikuti variabel */
  :is(#absenHeadTable,#absenBodyTable) .hdr-nama,
  :is(#absenHeadTable,#absenBodyTable) .cell-nama,
  :is(#absenHeadTable,#absenBodyTable) thead th:first-child,
  :is(#absenHeadTable,#absenBodyTable) tbody td:first-child{
    width: var(--name-col) !important;
    min-width: var(--name-col) !important;
    max-width: var(--name-col) !important;
  }

  /* PLACEHOLDERS (tanpa spinner) */
  .abs-placeholder{
    display:none; padding:18px; text-align:center;
    color: var(--text-muted);
  }
  .abs-placeholder[hidden]{ display:none !important; }
  .mg-loading{ display:block; }
  .abs-loading-box{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:10px; min-height:180px; font-weight:600;
  }
  .abs-loading-spinner{
    width:38px; height:38px; border-radius:999px;
    border:3px solid rgba(148,163,184,.35);
    border-top-color:var(--ink);
    animation:twbBusySpin .8s linear infinite;
  }
  #absTableCard[aria-busy="true"] #absPlaceholderLoading:not([hidden]){ display:block; }
  #absTableCard[data-empty="true"] #absPlaceholderEmpty:not([hidden]){ display:block; }

  /* Filters layout meniru toolbar */
  .filters{ display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; }
  .filters .field{ min-width:260px; }

  /* Tabel hidden saat loading/empty/error */
  #absTableCard[aria-busy="true"] .scroll-wrap,
  #absTableCard[data-empty="true"] .scroll-wrap{ display:none !important; }
  #absTableCard[aria-busy="true"] .tbl-tip{ display:none !important; }

  .head-scroller .tbl{ width: max-content; }
  #absenHeadTable thead, #absenHeadTable thead th{
    position: sticky; top: 0; z-index: 11; background: var(--surface-soft);
  }

  /* Layering header */
  #absenHeadTable thead th { z-index: 5; }
  #absenHeadTable thead th.th-date,
  #absenHeadTable thead th.th-date-sub { z-index: 5; }
  #absenHeadTable thead th.sticky-left,
  #absenHeadTable thead .sticky-left { z-index: 7 !important; background: var(--surface-soft); }
  #absenHeadTable .th-date.active { z-index: 5; }

  /* Icon size tweaks */
  #menuExportPdf .material-icons,
  #repExportPdfBtn .material-icons{
    font-size:16px !important; line-height:1; vertical-align:-2px;
  }

  /* State ERROR */
  #absTableCard[data-error="true"] #absPlaceholderError:not([hidden]){ display:block; }
  #absTableCard[aria-busy="true"] #headScroller,
  #absTableCard[data-empty="true"] #headScroller,
  #absTableCard[data-error="true"] #headScroller{ display:none !important; }
  #absTableCard[data-error="true"] .scroll-wrap{ display:none !important; }
  #absTableCard[data-error="true"] .tbl-tip{ display:none !important; }
  .mg-error{ display:block; }

  

  /* === 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: tampilkan topbar halaman Absensi === */
.topbar{
  display:flex !important;
  align-items:center;
  gap:8px;
  flex-shrink:0;
  padding:8px 20px;
  min-height:50px;
  background:#fff;
  border-bottom:1px solid var(--border);
}

/* Desktop: hamburger wajib disembunyikan */
.topbar .menu-toggle{
  display:none !important;
  align-items:center;
  justify-content:center;
}

/* Mobile/tablet: hamburger baru ditampilkan */
@media (max-width: 900px){
  .topbar{
    padding:8px 16px;
  }

  .topbar .menu-toggle{
    display:inline-flex !important;
  }
}

.topbar-page-title{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:1px;
  line-height:1.15;
}

.topbar-page-title .topbar-page-kicker{
  font:600 10px/1.1 Poppins, system-ui, sans-serif;
  color:var(--text-muted);
  letter-spacing:.04em;
}

.topbar-page-title strong{
  display:block;
  max-width:calc(100vw - 96px);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--text);
  font:700 15px/1.2 Poppins, system-ui, sans-serif;
}

@media (max-width:900px){
  .topbar{
    padding:8px 16px;
  }
}