:root{
  /* Tema DEFAULT AbsenKu — selaras dengan default CMS (--em:#1E68B0).
     Dipakai bila pengguna tak terikat site (mis. superadmin) atau kantornya
     belum punya theme_color. Kantor ber-tema akan menimpa --brand* lewat applyTheme(). */
  --brand-900:#0e3559; --brand-700:#175189; --brand:#1e68b0; --accent:#2e86d6;
  --accent-2:#22c1c3; --bg:#f1f5f9; --card:#ffffff; --ink:#1f2937; --muted:#6b7280;
  --line:#e5e7eb; --ok:#16a34a; --warn:#f59e0b; --err:#e11d48; --info:#2563eb;
  --radius:14px; --shadow:0 4px 14px rgba(20,35,62,.10);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:var(--ink);
  /* rona biru lembut, senada palet AbsenKu (dulu ungu/cyan — bentrok dgn brand) */
  background:radial-gradient(1200px 600px at 10% -10%,#dbe9f7 0,transparent 60%),
             radial-gradient(1000px 500px at 110% 0,#e6f0f9 0,transparent 55%),var(--bg);
  /* JANGKAR ke viewport + no-repeat: cegah "pita"/seam gradient saat konten lebih
     tinggi dari layar & halaman di-scroll (body height:100% -> area cat = 1 layar). */
  background-attachment:fixed;
  background-repeat:no-repeat;
  min-height:100%;
}
.hidden{display:none!important}
.muted{color:var(--muted)} .small{font-size:12px} .center{text-align:center}
.spacer{flex:1}
a{color:var(--brand);text-decoration:none}
h1,h2,h3{font-family:'Sora',sans-serif;margin:0}

/* ---------- buttons / inputs ---------- */
.btn{background:linear-gradient(135deg,var(--brand),var(--accent));color:#fff;border:0;
  padding:11px 16px;border-radius:12px;font-weight:700;cursor:pointer;font-size:14px;transition:.15s}
.btn:hover{filter:brightness(1.05);transform:translateY(-1px)}
.btn:disabled{opacity:.6;cursor:not-allowed}
.btn-block{width:100%;margin-top:6px}
.btn-sm{padding:7px 12px;font-size:13px;border-radius:10px}
.btn-ghost{background:rgba(255,255,255,.5);border:1px solid var(--line);color:var(--ink);
  padding:8px 13px;border-radius:10px;font-weight:600;cursor:pointer;font-size:13px}
.btn-ghost:hover{background:#fff}
.btn-outline{background:transparent;border:1.5px solid var(--brand);color:var(--brand)}
.btn-danger{background:rgba(224,49,72,.08);border:1px solid rgba(224,49,72,.35);color:#c0303f;
  padding:8px 13px;border-radius:10px;font-weight:600;cursor:pointer;font-size:13px;transition:.15s}
.btn-danger:hover{background:rgba(224,49,72,.14);border-color:#c0303f}
.input,select.input,textarea.input{width:100%;padding:11px 13px;border:1px solid var(--line);
  border-radius:11px;font:inherit;background:#fff;outline:none}
.input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(30,104,176,.15)}
.field{margin-bottom:12px} .field label{display:block;font-size:12.5px;font-weight:600;margin-bottom:5px;color:var(--muted)}

/* ---------- login ---------- */
.login{min-height:100vh;display:grid;place-items:center;padding:20px}
.login-card{width:100%;max-width:380px;background:rgba(255,255,255,.75);backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.6);border-radius:22px;box-shadow:var(--shadow);padding:28px}
.brand{text-align:center;margin-bottom:18px}
.brand img{width:62px;height:62px;border-radius:16px;box-shadow:var(--shadow)}
.brand h1{font-size:22px;margin:10px 0 2px} .brand p{margin:0;color:var(--muted);font-size:13px}
.seg{display:flex;background:#e9f0f7;border-radius:12px;padding:4px;margin-bottom:16px}
.seg-btn{flex:1;border:0;background:transparent;padding:9px;border-radius:9px;font-weight:600;cursor:pointer;color:var(--muted)}
.seg-btn.active{background:#fff;color:var(--brand);box-shadow:0 2px 8px rgba(0,0,0,.06)}

/* ---------- app shell ---------- */
#app{display:flex;min-height:100vh}
.sidebar{width:248px;flex-shrink:0;background:linear-gradient(180deg,var(--brand-900),var(--brand));
  color:#fff;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.side-brand{display:flex;align-items:center;gap:11px;padding:20px 18px 16px}
.side-brand img{width:40px;height:40px;border-radius:11px}
.sb-title{font-family:'Sora';font-weight:700;font-size:16px} .sb-sub{font-size:11px;opacity:.7}
.side-nav{flex:1;overflow:auto;padding:8px 12px}
.nav-item{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:11px;color:#d6e6f5;
  cursor:pointer;font-weight:600;font-size:14px;margin-bottom:3px;transition:.12s}
.nav-item .ic{font-size:17px;width:22px;text-align:center}
.nav-item:hover{background:rgba(255,255,255,.1)}
.nav-item.active{background:rgba(255,255,255,.18);color:#fff}
/* Dropdown "Aplikasi Kerja" di sidebar */
.nav-group-head .caret{margin-left:auto;font-size:11px;opacity:.75;transition:transform .2s}
.nav-group.open .nav-group-head .caret{transform:rotate(180deg)}
.nav-sub{overflow:hidden;max-height:0;transition:max-height .22s ease}
.nav-group.open .nav-sub{max-height:60vh}
.nav-subitem{display:flex;align-items:center;gap:10px;padding:9px 13px 9px 34px;border-radius:11px;
  color:#cfe0f2;cursor:pointer;font-weight:600;font-size:13.5px;margin-bottom:3px;transition:.12s}
.nav-subitem:hover{background:rgba(255,255,255,.1);color:#fff}
.nav-subitem .ic{font-size:15px;width:20px;text-align:center;display:grid;place-items:center}
.nav-subitem .ic img{width:20px;height:20px;object-fit:cover;border-radius:6px}
.side-foot{padding:14px;border-top:1px solid rgba(255,255,255,.12)}
.me{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.ava{width:38px;height:38px;border-radius:50%;background:var(--accent);display:grid;place-items:center;font-weight:700}
.me-name{font-size:13.5px;font-weight:700} .me-role{font-size:11px;opacity:.7;text-transform:capitalize}

.main-wrap{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{display:flex;align-items:center;gap:12px;padding:14px 22px;background:rgba(255,255,255,.7);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.hamb{display:none;border:0;background:transparent;font-size:20px;cursor:pointer}
.page-title{font-family:'Sora';font-weight:700;font-size:18px}
.clock{font-variant-numeric:tabular-nums;font-weight:700;color:var(--brand);font-size:14px}
.bell{position:relative;border:0;background:transparent;font-size:19px;cursor:pointer}
.badge{position:absolute;top:-4px;right:-6px;background:var(--err);color:#fff;font-size:10px;
  min-width:16px;height:16px;border-radius:9px;display:grid;place-items:center;padding:0 3px}
.content{padding:22px;max-width:1180px;width:100%}

/* ---------- cards / grid ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.pad{padding:18px}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)}
.stat{padding:18px;border-radius:var(--radius);color:#fff;box-shadow:var(--shadow)}
.stat .n{font-family:'Sora';font-size:30px;font-weight:700;line-height:1}
.stat .l{font-size:13px;opacity:.9;margin-top:6px}
.s-blue{background:linear-gradient(135deg,#2b34d6,#5b6bff)}
.s-green{background:linear-gradient(135deg,#0f9d58,#34d399)}
.s-amber{background:linear-gradient(135deg,#e8910c,#fbbf24)}
.s-violet{background:linear-gradient(135deg,#7c3aed,#a78bfa)}
.s-rose{background:linear-gradient(135deg,#e11d48,#fb7185)}
.s-teal{background:linear-gradient(135deg,#0d9488,#2dd4bf)}
.sect-title{font-family:'Sora';font-size:16px;font-weight:700;margin:6px 0 12px;display:flex;align-items:center;gap:8px}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:end;margin-bottom:14px}
.toolbar .field{margin:0;min-width:150px}

/* ---------- table ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th,.tbl td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line)}
.tbl th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);background:#fafbff}
.tbl tr:hover td{background:#fafbff}
.tbl .rank{font-weight:800;color:var(--brand)}

/* ---------- chips ---------- */
.chip{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700}
.c-A{background:#dcfce7;color:#15803d} .c-Bp{background:#dbeafe;color:#1d4ed8}
.c-B{background:#e0e7ff;color:#4338ca} .c-C{background:#fef3c7;color:#b45309}
.c-D{background:#ffe4e6;color:#be123c} .c-x{background:#eef0fb;color:#6b7090}
.pill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:600}
/* HIJAU = sukses · KUNING = pending · MERAH = gagal */
.p-ok{background:#dcfce7;color:#15803d} .p-warn{background:#fef3c7;color:#b45309}
.p-fail{background:#fee2e2;color:#b91c1c} .p-info{background:#dbeafe;color:#1d4ed8}
.p-pend{background:#fef3c7;color:#b45309} /* alias lama -> kini kuning, bukan merah */

/* ---------- radar / score ---------- */
.score-big{font-family:'Sora';font-size:44px;font-weight:800;line-height:1}
.rate{display:flex;gap:4px} .rate button{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);
  background:#fff;font-weight:700;cursor:pointer}
.rate button.on{background:var(--brand);color:#fff;border-color:var(--brand)}

/* ---------- toast / sheet ---------- */
#toast{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:9px;z-index:120}
.toast{background:#222;color:#fff;padding:12px 16px;border-radius:12px;box-shadow:var(--shadow);
  font-size:13.5px;font-weight:600;animation:slideIn .25s;max-width:330px}
.toast.success{background:linear-gradient(135deg,#0f9d58,#34d399)}
.toast.error{background:linear-gradient(135deg,#e11d48,#fb7185)}
.toast.warning{background:linear-gradient(135deg,#d97706,#fbbf24)}
.toast.info{background:linear-gradient(135deg,#2563eb,#60a5fa)}
@keyframes slideIn{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
@keyframes fadeUp{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}
.content>*{animation:fadeUp .25s}
.sheet-bg{position:fixed;inset:0;background:rgba(15,18,38,.45);display:flex;justify-content:flex-end;z-index:100}
.sheet{width:380px;max-width:90vw;background:#fff;height:100%;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.sheet .hd{display:flex;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line)}
.sheet .hd .h{font-family:'Sora';font-weight:700;flex:1} .sheet .x{border:0;background:transparent;font-size:18px;cursor:pointer}
#sheetBody{flex:1;overflow:auto;padding:8px 0} .sheet-foot{padding:12px 16px;border-top:1px solid var(--line)}
.notif{padding:12px 18px;border-bottom:1px solid var(--line)} .notif.unread{background:#f5f7ff}
.notif .t{font-weight:700;font-size:13.5px} .notif .m{font-size:12.5px;color:var(--muted);margin-top:2px}
.notif .d{font-size:11px;color:var(--muted);margin-top:4px}

/* ---------- skeleton ---------- */
.sk{background:linear-gradient(90deg,#eef0f8 25%,#f7f8fd 37%,#eef0f8 63%);background-size:400% 100%;
  animation:sh 1.2s infinite;border-radius:8px}
@keyframes sh{from{background-position:100% 0}to{background-position:-100% 0}}

/* ---------- modal generik (di tengah layar) ---------- */
.modal-bg{position:fixed;inset:0;background:rgba(15,18,38,.45);display:flex;align-items:center;
  justify-content:center;z-index:120;padding:20px}
.modal{width:520px;max-width:100%;max-height:85vh;background:#fff;border-radius:14px;
  display:flex;flex-direction:column;box-shadow:var(--shadow);animation:mdIn .16s ease-out}
.modal.wide{width:900px}
@keyframes mdIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.modal .hd{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line)}
.modal .hd .h{font-family:'Sora';font-weight:700;flex:1;font-size:15px}
.modal .x{border:0;background:transparent;font-size:18px;cursor:pointer;line-height:1}
#modalBody{flex:1;overflow:auto;padding:16px 18px}

.backdrop{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:25}
.empty{text-align:center;color:var(--muted);padding:34px}

/* ---------- Detail Pegawai (modal) ---------- */
.pg-head{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:16px;
  padding-bottom:16px;
  border-bottom:1px solid var(--line);
}
.pg-ava{
  width:64px;
  height:64px;
  flex-shrink:0;
  border-radius:50%;
  background:var(--brand);
  color:#fff;
  display:grid;
  place-items:center;
  font-size:24px;
  font-weight:700;
  overflow:hidden; /* contain img */
}
.pg-ava img{width:100%;height:100%;object-fit:cover}
.pg-info{flex:1}
.pg-nama{font-family:'Sora',sans-serif;font-size:18px;font-weight:700}
.pg-sub{font-size:13px;color:var(--muted);margin-top:2px}
.pg-row{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid var(--line);font-size:13px}
.pg-row:nth-child(-n+2){border-top:none}
.pg-row span:first-child{color:var(--muted);flex-shrink:0}
.pg-row span:last-child{text-align:right;font-weight:600}

/* ---------- responsive ---------- */
@media(max-width:880px){
  .sidebar{position:fixed;left:0;top:0;z-index:30;transform:translateX(-100%);transition:.22s}
  .sidebar.open{transform:none}
  .hamb{display:block}
  .g4{grid-template-columns:repeat(2,1fr)} .g3,.g2{grid-template-columns:1fr}
  .content{padding:16px}
}

/* ---------- layar sedang (881–1099px): laptop kecil/tablet landscape ----------
   Sidebar penuh (248px) + content max 1180px sudah pas mulai ~1100px. Di bawah itu,
   sidebar dipersempit jadi rail ikon (tooltip via title="") supaya konten dapat ruang,
   dan grid 3-4 kolom di-reflow supaya kartu tidak mepet/kepotong sebelum masuk mode mobile. */
@media(min-width:881px) and (max-width:1099px){
  .sidebar{width:84px}
  .side-brand{justify-content:center;padding:16px 8px}
  .side-brand .sb-title,.side-brand .sb-sub{display:none}
  .nav-item{justify-content:center;padding:12px 6px}
  .nav-item .nav-label{display:none}
  .nav-item .ic{width:auto;font-size:20px}
  .nav-group-head .caret{display:none}                 /* rail: tanpa panah */
  .nav-subitem{justify-content:center;padding:10px 6px}
  .nav-subitem .nav-label{display:none}
  .nav-subitem .ic{width:auto;font-size:18px}
  .me{justify-content:center}
  .me-name,.me-role{display:none}
  #logoutBtn{font-size:11px;padding:7px 4px}
  .content{padding:16px;max-width:100%}
  .g4{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:repeat(2,1fr)}
}

/* ---------- layar besar (>=1440px): manfaatkan ruang kosong di kanan ----------
   Konten dibiarkan mengikuti sidebar (bukan dipusatkan penuh) supaya masih selaras
   dengan topbar di atasnya, tapi max-width naik bertahap sesuai lebar layar. */
@media(min-width:1440px){ .content{max-width:1400px} }
@media(min-width:1800px){ .content{max-width:1640px} }

/* ============================================================
   SUPER APP "AbsenKu" — launcher, overlay aplikasi, bottom-nav
   Semua memakai var(--brand) supaya ikut tema per-site.
   ============================================================ */

/* ---------- Home launcher ---------- */
.home-hero{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.home-hero img{width:52px;height:52px;border-radius:14px;object-fit:contain;background:#fff;
  padding:5px;box-shadow:var(--shadow)}
.home-hero .hh-t{font-family:'Sora';font-weight:700;font-size:20px;line-height:1.2}
.home-hero .hh-s{color:var(--muted);font-size:13px;margin-top:2px}

.app-sec{margin:22px 0 10px;display:flex;align-items:center;gap:8px}
.app-sec .t{font-family:'Sora';font-weight:700;font-size:14px}
.app-sec .l{flex:1;height:1px;background:var(--line)}

.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:12px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:14px 10px;
  display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;text-align:center;
  transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease}
.tile:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--brand)}
.tile:active{transform:translateY(0)}
.tile .ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;font-size:24px;
  background:color-mix(in srgb,var(--brand) 12%,#fff);color:var(--brand)}
.tile .ic img{width:100%;height:100%;object-fit:cover;border-radius:14px}   /* logo app: square terisi, selaras ikon */
.tile .lb{font-size:12.5px;font-weight:600;line-height:1.25}
.tile .ext{font-size:10px;color:var(--muted)}

/* ---------- Overlay aplikasi (iframe) ---------- */
/* Overlay aplikasi (iframe). DIKUNCI ke viewport dgn position:fixed — bukan
   absolute — supaya tingginya = tinggi layar, TIDAK ikut meninggi mengikuti
   konten Beranda di belakangnya. Kalau absolute, iframe jadi setinggi konten
   -> nav position:fixed milik Absensi menempel di dasar iframe raksasa
   ("di bawah sendiri"). left mengikuti lebar sidebar agar sidebar tetap tampak. */
.appframe{position:fixed;top:0;right:0;bottom:0;left:248px;z-index:35;background:var(--card);display:flex;flex-direction:column}
/* Override left HARUS setelah aturan dasar di atas: media query tak menambah
   specificity, jadi yang menang adalah urutan sumber paling akhir. */
@media(min-width:881px) and (max-width:1099px){ .appframe{left:84px} }  /* rail sidebar */
@media(max-width:880px){ .appframe{left:0} }                            /* HP: overlay penuh */
.af-head{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);
  background:var(--card)}
.af-back{border:0;background:transparent;font-size:20px;cursor:pointer;width:34px;height:34px;
  border-radius:9px;line-height:1}
.af-back:hover{background:var(--line)}
.af-logo{width:24px;height:24px;border-radius:7px;object-fit:contain}
.af-title{font-family:'Sora';font-weight:700;font-size:14px}
.af-ext{text-decoration:none;color:var(--muted);font-size:18px;width:34px;height:34px;border-radius:9px;
  display:grid;place-items:center}
.af-ext:hover{background:var(--line);color:var(--brand)}
.af-body{position:relative;flex:1;min-height:0}
.af-body iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff}
.af-loading{position:absolute;inset:0;display:grid;place-items:center;gap:8px;color:var(--muted);
  font-size:13px;background:var(--card);z-index:1}
.af-spin{width:22px;height:22px;border:3px solid var(--line);border-top-color:var(--brand);
  border-radius:50%;animation:afspin .8s linear infinite;display:inline-block;margin-right:8px;
  vertical-align:middle}
@keyframes afspin{to{transform:rotate(360deg)}}

/* main-wrap jadi acuan posisi overlay */
.main-wrap{position:relative}

/* ---------- Bottom-nav (mobile) ---------- */
.bottom-nav{display:none;position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:var(--card);border-top:1px solid var(--line);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom));}
.bottom-nav button{flex:1;border:0;background:transparent;cursor:pointer;display:flex;
  flex-direction:column;align-items:center;gap:2px;padding:6px 2px;color:var(--muted);
  font-size:11px;font-weight:600;position:relative}
.bottom-nav button .ic{font-size:19px;line-height:1}
.bottom-nav button.active{color:var(--brand)}
.bn-badge{position:absolute;top:2px;right:calc(50% - 20px);background:var(--err);color:#fff;
  font-size:9px;min-width:15px;height:15px;border-radius:8px;display:grid;place-items:center;padding:0 3px}

/* ---------- Responsif: hybrid ---------- */
@media(max-width:880px){
  /* sidebar & hamburger dipensiunkan di HP — navigasi lewat Beranda/dashboard + bottom-nav */
  .sidebar{display:none}
  .hamb{display:none}
  .bottom-nav{display:flex}
  .bell{display:none}                    /* hindari tombol notif dobel: cukup di bottom-nav */
  .content{padding-bottom:78px}          /* ruang utk bottom-nav */
  .tiles{grid-template-columns:repeat(auto-fill,minmax(98px,1fr));gap:10px}
  .tile .ic{width:44px;height:44px;font-size:21px}
}

/* ---------- Akordeon Beranda (Top 5 / Ringkasan bersebelahan) ----------
   Eksklusif: membuka satu menutup yang lain, sehingga panel lain "naik". */
.acc-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;margin-top:16px}
.acc{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden}
.acc-hd{width:100%;display:flex;align-items:center;gap:8px;padding:14px 16px;border:0;
  background:transparent;cursor:pointer;font:inherit;text-align:left}
.acc-hd:hover{background:#fafbff}
.acc-t{flex:1;font-family:'Sora';font-size:15px;font-weight:700}
.acc-x{color:var(--muted);transition:transform .2s ease}
.acc.open .acc-x{transform:rotate(180deg);color:var(--brand)}
.acc-bd{display:none;padding:0 16px 16px}
.acc.open .acc-bd{display:block}
@media(max-width:880px){ .acc-row{grid-template-columns:1fr} }

/* ---------- Tabel: COMPACT di HP (kartu bertumpuk, tanpa geser ke kanan) ----------
   Di desktop tabel tetap tabel biasa. Di HP tiap baris jadi satu kartu, dan tiap
   sel menampilkan nama kolomnya sendiri (dari data-label yang disisipkan JS),
   sehingga seluruh isi terbaca tanpa scroll mendatar. */
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
@media(max-width:880px){
  .content{overflow-x:hidden}                 /* body tak boleh geser mendatar */
  .tbl-scroll{overflow-x:visible}             /* tak perlu scroll lagi */
  .tbl,.tbl thead,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%}
  .tbl thead{display:none}                    /* judul kolom pindah ke tiap sel */
  .tbl tr{
    background:var(--card);border:1px solid var(--line);border-radius:12px;
    box-shadow:var(--shadow);padding:6px 12px;margin-bottom:10px}
  .tbl tr:hover td{background:transparent}
  .tbl td{
    display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
    padding:7px 0;border-bottom:1px dashed var(--line);text-align:right;font-size:13px}
  .tbl tr td:last-child{border-bottom:0}
  .tbl td::before{
    content:attr(data-label);flex:0 0 40%;text-align:left;
    font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
    color:var(--muted)}
  .tbl td:empty{display:none}                 /* sel kosong (mis. kolom aksi) disembunyikan */
  /* Sel AKSI (header kosong -> tanpa data-label): jangan sisakan label 40% yang
     menjepit tombol. Beri lebar penuh, tombol rata kanan & boleh wrap rapi di
     layar sangat sempit (mis. 21:9 potrait). */
  .tbl td:not([data-label]){justify-content:flex-end;flex-wrap:wrap;gap:8px;padding-top:10px}
  .tbl td:not([data-label])::before{display:none}
}

/* ============================================================
   BERANDA — dua wajah dari satu markup
   DESKTOP: Top 5 & Ringkasan = kartu biasa (selalu terbuka, berdampingan);
            "Menu Tersedia" disembunyikan (navigasi sudah di sidebar).
   HP     : "Menu Tersedia" naik ke ATAS panel; panel jadi akordeon berjejer.
   ============================================================ */
.home{display:flex;flex-direction:column}
.home-hero  {order:1}
.home-stats {order:2}
.home-news-top{order:2}          /* Pegawai: berita panel penuh di ATAS daftar aplikasi */
.home-apps  {order:3;display:none}   /* desktop: Aplikasi Kerja pindah ke dropdown sidebar */
.home-combined{order:3}
/* Berita (slideshow) + widget manajer sekarang bersebelahan dalam .home-row */
.home-row   {order:4}
.home-menus {order:5}
.home-panels{order:6}

/* Berita pegawai = panel penuh biasa (bukan slide carousel .home-row).
   Override .home-news{flex:0 0 300px/82%} yg dipakai varian manajer. */
.home .home-news-top{flex:none;max-width:none;width:100%}
/* Seksi gabungan Aplikasi+Menu: hanya di HP (desktop pakai sidebar). */
.home-combined{display:none}

/* ---------- Widget List (dipakai di Beranda & panel lain) ---------- */
.home-widgets{display:contents} /* di HP: lebur ke .home-row supaya tiap card jadi slide sendiri (lihat media query di bawah) */
/* Card widget = kolom flex, link "Lihat Semua »" dkk. didorong margin-top:auto ke
   dasar card -- posisinya jadi SAMA di semua card walau jumlah barisnya beda. */
.home-widgets .card{display:flex;flex-direction:column}
.widget-list{
  list-style:none;
  padding:0;
  margin:0;
}
.widget-list li{
  padding:8px 0;
  border-bottom:1px dashed var(--line);
  font-size:13px;
}
.widget-list li:last-child{ border-bottom:0 }
.wl-main{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-weight:600;
  gap:8px;
}
.wl-sub{ font-size:12px; color:var(--muted); margin-top:2px }
.widget-link{ display:block; text-align:right; font-size:12px; font-weight:600; margin-top:auto; padding-top:10px }

/* ---- DESKTOP (>880px) ---- */
@media(min-width:881px){
  .home-menus{display:none}                 /* sudah ada sidebar */
  /* margin-top:0 -> dulu widget ditumpuk di bawah Apps, sekarang jadi kolom di .home-row */
  .home-widgets{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-top:0 }
  .acc-hd{cursor:default;pointer-events:none}  /* bukan dropdown lagi */
  .acc-x{display:none}                      /* tanpa tanda panah */
  .acc-bd{display:block}                    /* kedua kartu selalu terbuka */
  /* Kedua kartu selalu terbuka -> tingginya harus sama. `align-items:start`
     hanya dibutuhkan mode akordeon di HP (agar panel tertutup bisa "naik"). */
  .acc-row{align-items:stretch}
  .acc{display:flex;flex-direction:column}
  .acc-bd{flex:1}
}

/* ---- HP (<=880px): akordeon berjejer seperti tombol pilihan login ----
   .acc dibuat display:contents supaya header & badan jadi item grid langsung:
   dua header di baris 1 (bersebelahan), badan yang terbuka di baris 2 (penuh). */
@media(max-width:880px){
  .acc-row{grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
  .acc{display:contents}
  .acc>.acc-hd{
    background:var(--card);border:1px solid var(--line);border-radius:12px;
    box-shadow:var(--shadow);padding:12px;justify-content:center;text-align:center}
  .acc:nth-child(1)>.acc-hd{grid-row:1;grid-column:1}
  .acc:nth-child(2)>.acc-hd{grid-row:1;grid-column:2}
  .acc.open>.acc-hd{border-color:var(--brand);color:var(--brand);background:#fff}
  .acc>.acc-bd{
    grid-row:2;grid-column:1 / -1;background:var(--card);border:1px solid var(--line);
    border-radius:var(--radius);box-shadow:var(--shadow);padding:14px}
  .acc-t{font-size:13px;flex:0 1 auto}
  .acc-x{margin-left:4px}
}

/* ---------- Berita & Pengumuman (Beranda) — slideshow satu kartu ----------
   Cuma 1 berita tampil sekaligus, otomatis pindah tiap 7 detik (lihat loadNews() di
   app.js), bisa juga digeser manual lewat tombol ‹ › atau titik indikator. Ditaruh
   bersebelahan dengan widget manajer lewat .home-row, bukan lagi baris sendiri. */
.home-row{display:flex;flex-direction:column;gap:16px;margin-top:20px}
@media(min-width:881px){
  /* stretch -> News & grup Widget disamakan tingginya, jadi baris ini simetris
     walau isi masing-masing kartu beda banyak (news 1 slide vs kontrak 5 baris) */
  .home-row{flex-direction:row;align-items:stretch}
  .home-news{flex:0 0 300px;display:flex;flex-direction:column}
  .home-widgets{flex:1}
}
/* ---- HP (<=880px): News + tiap widget jadi "slide" yang bisa digeser horizontal ----
   Dulu .home-widgets{display:none} di HP -> Persetujuan/Kontrak/Kehadiran tak pernah
   muncul sama sekali di mobile. Sekarang .home-widgets melebur (display:contents, lihat
   di atas) supaya tiap .card jadi child langsung .home-row, dan baris ini di-scroll
   horizontal dgn snap per-card -- News tetap slide pertama, lalu widget lain digeser. */
@media(max-width:880px){
  /* HP: Aplikasi Kerja & Menu Tersedia terpisah -> disatukan jadi .home-combined */
  .home-apps{display:none}
  .home-menus{display:none}
  .home-combined{display:block;order:4}     /* tiles DI BAWAH carousel berita+widget */
  /* berita pegawai tetap panel penuh (bukan ikut carousel .home-row) */
  .home .home-news-top{flex:none;max-width:none;width:100%}
  /* Carousel berita + widget (bisa di-slide horizontal) — DI ATAS daftar Aplikasi & Menu.
     Urutan flex .home: hero1 · statistik2 · carousel3 · tiles4 · panel6. */
  .home-row{
    order:3;
    flex-direction:row;align-items:stretch;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;padding-bottom:6px;margin-bottom:-6px;
  }
  .home-row::-webkit-scrollbar{display:none}
  /* Tiap slide PENUH selebar layar & rata kiri-kanan — hanya SATU kartu tampil
     sekaligus, kartu berikutnya benar-benar tersembunyi (tak ada bagian terpotong
     mengintip di tepi). Digeser -> pindah satu kartu penuh dgn snap ke tepi kiri. */
  .home-row{gap:0}
  .home-news, .home-widgets .card{
    flex:0 0 100%;max-width:none;scroll-snap-align:start;
  }
  .home-news{display:flex;flex-direction:column}
}
/* flex:1 -> mengisi penuh tinggi .home-news (yang sudah di-stretch setinggi widget
   lain oleh .home-row) — tanpa ini kartunya cuma setinggi isinya, nyisa kosong di bawah */
.news-slide-card{flex:1;display:flex;flex-direction:column;width:100%}
#newsSlide{flex:1;display:flex}
.news-slide{flex:1;display:flex;flex-direction:column;text-align:left;width:100%;padding:0;
  overflow:hidden;cursor:pointer;background:transparent;border:1px solid var(--line);
  border-radius:14px;transition:border-color .14s ease;animation:newsFade .35s ease}
.news-slide:hover{border-color:var(--brand)}
@keyframes newsFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.news-nav{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:10px}
.news-dots{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center}
.news-dot{width:7px;height:7px;border-radius:50%;background:var(--line);cursor:pointer;transition:.15s}
.news-dot.active{background:var(--brand);width:18px;border-radius:4px}
.nc-nav{flex-shrink:0;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);
  background:#fff;box-shadow:var(--shadow);cursor:pointer;font-size:17px;line-height:1;
  display:grid;place-items:center;color:var(--brand)}
.nc-nav:hover{background:var(--brand);color:#fff;border-color:var(--brand)}
.nc-img{width:100%;height:130px;object-fit:cover;display:block;flex-shrink:0}
.nc-noimg{display:grid;place-items:center;font-size:32px;
  background:color-mix(in srgb,var(--brand) 10%,#fff);color:var(--brand)}
.nc-body{padding:10px 12px 12px;flex:1;display:flex;flex-direction:column}
.nc-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.nc-title{font-weight:700;font-size:13.5px;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* isi berita (HTML dari editor CMS) */
.news-body{font-size:14px;line-height:1.6}
.news-body img{max-width:100%;height:auto;border-radius:10px}
.news-body p{margin:0 0 10px}
.news-body h1,.news-body h2,.news-body h3{font-family:'Sora';margin:14px 0 8px}

/* ---------- Judul kolom bisa diklik untuk mengurutkan (ala Windows Explorer) ---------- */
.th-sort{cursor:pointer;user-select:none;position:relative;padding-right:22px!important}
.th-sort:hover{color:var(--brand);background:#f2f7fc}
.th-sort::after{content:"⇅";position:absolute;right:8px;opacity:.35;font-size:11px}
.th-sort.th-active{color:var(--brand)}
.th-sort.th-active[data-dir="asc"]::after{content:"▲";opacity:1;font-size:9px}
.th-sort.th-active[data-dir="desc"]::after{content:"▼";opacity:1;font-size:9px}

/* ---------- Chart Evaluasi Absensi (Chart.js perlu induk position:relative + tinggi
   pasti supaya maintainAspectRatio:false bisa mengecilkan/membesarkan mengikuti lebar
   kolom, bukan cuma ikut aspect-ratio bawaan yang bisa meluber di layar sempit). ---------- */
.eval-chart-box{position:relative;height:150px}
@media(max-width:880px){ .eval-chart-box{height:170px} }  /* HP: 1 kolom, muat lebih tinggi */

/* ---------- Pelatihan (Training) ---------- */
.tr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.tr-card{display:flex;flex-direction:column}
.tr-card.tr-off{opacity:.6}
.tr-banner{width:100%;height:130px;object-fit:cover;border-radius:10px;margin-bottom:10px;display:block}
/* di modal detail, banner boleh lebih tinggi */
.modal .tr-banner{height:auto;max-height:240px}
.tr-head{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.tr-title{font-weight:700;font-size:15px;line-height:1.3}
.tr-desc{color:var(--muted);flex:1;min-height:0}
.tr-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap}
.tr-materi{margin:10px 0;padding:10px 12px;background:var(--bg);border-radius:10px;font-size:14px;line-height:1.5;max-height:340px;overflow:auto}
/* form aspek */
.tf-aspek{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:14px}
.tf-aspek .tf-as{padding:4px 6px}
/* editor kuis */
.qz-item{border:1px solid rgba(0,0,0,.1);border-radius:10px;padding:10px;margin-bottom:10px;display:flex;flex-direction:column;gap:6px}
.qz-item .qz-q{font-weight:600}
/* pengerjaan kuis */
.qz-take{padding:10px 0;border-bottom:1px solid rgba(0,0,0,.06)}
.qz-take .qz-q{font-weight:600;margin-bottom:6px}
.qz-opt{display:block;padding:6px 8px;border-radius:8px;cursor:pointer}
.qz-opt:hover{background:var(--bg)}
.qz-opt input{margin-right:8px}
/* usulan di panel Gap */
.gap-usul{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid rgba(0,0,0,.06);font-size:14px}

/* ---------- Tim otomatis dari Hak Lihat Site ---------- */
.at-grouphead{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin:10px 0 6px}
.auto-team{border:1px solid var(--line);border-radius:12px;margin-bottom:8px;background:var(--card)}
.auto-team>summary{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px;cursor:pointer;list-style:none;font-size:14px}
.auto-team>summary::-webkit-details-marker{display:none}
.auto-team>summary::before{content:"▸";color:var(--muted);font-size:12px;transition:transform .15s}
.auto-team[open]>summary::before{transform:rotate(90deg)}
.at-name{font-weight:700}
.at-members{display:flex;flex-wrap:wrap;gap:6px;padding:2px 12px 12px 26px}
.at-chip{background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:3px 10px;font-size:12.5px}

/* ---------- Picker logo aplikasi kerja (upload + kompres + square) ---------- */
.logo-upload{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px}
.logo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:10px}
.logo-pick{border:1px solid var(--line);background:var(--card);border-radius:12px;padding:6px;cursor:pointer;transition:.12s}
.logo-pick:hover{border-color:var(--brand);box-shadow:var(--shadow)}
.logo-pick img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;display:block}   /* square + rounded */
.logo-pick .small{margin-top:4px;line-height:1.2;text-align:center}
/* picker pegawai (cakupan app) */
.emp-pick{display:flex;align-items:center;gap:8px;padding:6px 4px;border-bottom:1px solid var(--line);font-size:13.5px;cursor:pointer}
.emp-pick:last-child{border-bottom:0}

/* ---------- Halaman Profil ---------- */
.prof-page{max-width:900px;margin:0 auto}
.pf-head-card{margin-bottom:14px}
.pf-grid{display:grid;gap:14px;grid-template-columns:1fr}
.pf-side{display:grid;gap:14px;align-content:start}
@media(min-width:820px){ .pf-grid-2{grid-template-columns:1.35fr 1fr;align-items:start} }
.pf-name{font-weight:700;font-size:18px}
.me-click{cursor:pointer;border-radius:10px;padding:6px;margin-left:-6px;margin-right:-6px;transition:background .12s}
.me-click:hover{background:rgba(255,255,255,.1)}
.pf-head{display:flex;align-items:center;gap:16px}
.pf-ava-wrap{position:relative;flex-shrink:0}
.pf-ava{width:84px;height:84px;border-radius:50%;object-fit:cover;display:block}
.pf-ava-init{background:var(--brand);color:#fff;display:grid;place-items:center;font-size:32px;font-weight:700}
.pf-edit{position:absolute;bottom:0;right:0;background:var(--brand);color:#fff;border-radius:50%;width:28px;height:28px;
  display:grid;place-items:center;font-size:13px;cursor:pointer;border:2px solid var(--card)}
.pf-sec{font-size:11px;font-weight:700;letter-spacing:.5px;color:var(--muted);margin:14px 0 2px}
.pf-row{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid var(--line);font-size:13px}
.pf-row .k{color:var(--muted);font-size:12px;flex-shrink:0}
.pf-row .v{text-align:right}

/* ---------- Dashboard Monitor (Command Center, read-only) ---------- */
.mon-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.mon-ctl{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mon-ctl .input{width:auto}
.mon-kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px}
.mon-kpi .stat{padding:14px 16px}
.mon-kpi .stat .n{font-size:26px}
.mon-chart{position:relative;height:210px}
.mon-ul{list-style:none;margin:0;padding:0}
.mon-ul li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 0;border-bottom:1px dashed var(--line);font-size:13px}
.mon-ul li:last-child{border-bottom:0}
.mon-ul li.ml-hidden{display:none}
.mon-ul.ml-open li.ml-hidden{display:flex}
/* Aplikasi Kerja di dashboard monitor: HANYA di HP (desktop pakai sidebar) supaya rapi & tak dobel */
.mon-apps{display:none;margin:20px 0 14px}   /* jarak atas dari KPI supaya tak mepet */
@media(max-width:880px){ .mon-apps{display:block} }
/* Widget dashboard sebagai pintasan menu: bisa diklik, ada umpan-balik hover/fokus.
   Flex-column + widget-link (margin-top:auto; text-align:right) -> link "Buka …" selalu
   di pojok BAWAH-KANAN tiap widget, konsisten. */
.mon-widget{cursor:pointer;transition:transform .12s ease, box-shadow .12s ease;display:flex;flex-direction:column}
.mon-widget:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.09)}
.mon-widget:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
/* Tinggi minimum tetap + area konten yang MENGEMBANG (flex:1) supaya tombol "Buka …"
   selalu terdorong ke dasar kartu, walau isinya kosong/sedikit -> posisi konsisten.
   (display:flex ditegaskan di sini juga, tak hanya via .mon-widget.) */
.mon-list-card{display:flex;flex-direction:column;min-height:230px}
.mon-list-card > .mon-ul,
.mon-list-card > .empty{flex:1 1 auto}
.mon-list-card > .empty{display:flex;align-items:center;justify-content:center;text-align:center}

/* ---------- Beranda PEGAWAI: kartu diri A/B/C/G (Fase 2) ---------- */
.emp-self{margin-bottom:14px;order:1}   /* pegawai: kartu diri jadi blok teratas (gantikan hero) */
.es-grid{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:720px){ .es-grid{grid-template-columns:repeat(3,1fr)} }
.es-grid .es-id{grid-column:1 / -1}
/* Board (hanya identitas + berkas): berdampingan di desktop, identitas tak span penuh → tak ada kolom kosong. */
@media(min-width:720px){ .es-grid.es-slim{grid-template-columns:1fr 1fr} .es-grid.es-slim .es-id{grid-column:auto} }
.es-h{font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:8px}
/* A. Identitas */
.es-id{display:flex;align-items:center;gap:14px}
.es-ava{width:56px;height:56px;border-radius:50%;flex-shrink:0;overflow:hidden;display:grid;place-items:center;
  background:var(--accent);color:#fff;font-weight:800;font-size:20px}
.es-ava img{width:100%;height:100%;object-fit:cover}
.es-hello{margin-bottom:3px}
.es-name{font-weight:800;font-size:17px;line-height:1.2}
.es-sub{font-size:13px;color:var(--ink);margin-top:2px}
.es-meta{margin-top:3px}
/* B. Absen hari ini */
.es-absen{border-left:4px solid var(--line)}
.es-absen.es-todo{border-left-color:var(--warn)}
.es-absen.es-half{border-left-color:var(--info)}
.es-absen.es-done{border-left-color:var(--ok)}
.es-absen.es-off{border-left-color:var(--muted)}
.es-absen-st{font-weight:700;font-size:14px;margin-bottom:10px}
.es-absen .btn{margin-top:2px}
/* C. Rekap bulan ini — flex-wrap + min-width: 3 atau 4 stat tetap rapi & TAK terpotong
   (mode cuti on/off), membungkus ke baris berikutnya bila kartu sempit. */
.es-stats{display:flex;gap:10px;flex-wrap:wrap}
.es-stat{flex:1 1 70px;text-align:center;background:#f7f9fc;border:1px solid var(--line);border-radius:10px;padding:10px 6px}
.es-stat b{display:block;font-size:20px;font-weight:800;color:var(--brand);line-height:1}
.es-stat span{font-size:11px;color:var(--muted)}
/* A. tautan "Lihat data pribadi" di kartu identitas */
.es-detail-link{margin-top:6px;background:transparent;border:0;color:var(--brand);font-weight:600;font-size:12px;cursor:pointer;padding:0}
.es-detail-link:hover{text-decoration:underline}
/* G. Kelengkapan berkas */
.es-doc-top{font-size:13px;color:var(--ink);margin-bottom:8px}
.es-doc-top b{color:var(--brand);font-size:16px}
.es-doc-list{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.es-doc{font-size:12px;padding:3px 9px;border-radius:999px;border:1px solid var(--line);white-space:nowrap}
.es-doc.ok{color:var(--ok);border-color:rgba(22,163,74,.35);background:rgba(22,163,74,.08)}
.es-doc.no{color:var(--muted);background:#f7f9fc}