/* ---------- Animasi transisi halaman ---------- */
#pageLoadBar{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--brand-yellow,#C9971E),var(--accent));z-index:9999;
  box-shadow:0 0 8px rgba(201,151,30,.6);transition:width .25s ease,opacity .25s ease;opacity:0;pointer-events:none}
#pageLoadBar.pageload-active{opacity:1}
/* PENTING: fill-mode TIDAK boleh "both"/"forwards" di sini - transform yang tertinggal pada .content
   (walau translateY(0), tetap dianggap "ada transform" oleh CSS) akan membuat modal (position:fixed)
   di dalamnya salah posisi/terpotong, karena elemen ber-transform membentuk containing block baru
   untuk descendant fixed. Animasi berhenti otomatis & transform kembali normal setelah selesai. */
@keyframes pageContentFadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.content{animation:pageContentFadeIn .4s ease}
.content.page-fade-out{animation:pageContentFadeOut .18s ease}
@keyframes pageContentFadeOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-6px)}}
.modal-overlay.open .modal{animation:modalPopIn .22s cubic-bezier(.34,1.56,.64,1) both}
@keyframes modalPopIn{from{opacity:0;transform:scale(.94) translateY(6px)}to{opacity:1;transform:scale(1) translateY(0)}}

/* ---------- Konfigurasi Kolom (tombol "Kolom" di toolbar admin/HR) ---------- */
.colcfg-wrap{position:relative}
.colcfg-dropdown{display:none;position:absolute;right:0;top:calc(100% + 6px);background:var(--surface);
  border:1px solid var(--border);border-radius:12px;padding:12px;min-width:220px;max-height:320px;overflow-y:auto;
  box-shadow:0 10px 28px rgba(0,0,0,.14);z-index:60}
.colcfg-dropdown.open{display:block}
.colcfg-title{font-size:11.5px;font-weight:700;color:var(--text-mute);text-transform:uppercase;letter-spacing:.02em;margin-bottom:8px}
.colcfg-item{display:flex;align-items:center;gap:8px;font-size:13px;padding:4px 2px;cursor:pointer;white-space:nowrap}
.colcfg-actions{margin-top:8px;border-top:1px solid var(--border);padding-top:8px}

/* HCIntegra - Design System v4: clean minimalist (mengikuti referensi "Niond" dashboard) -
   putih bersih, kartu pastel lembut, aksen lime-green solid dgn teks gelap, shadow tipis/hairline
   border (flat), bukan shadow tebal. Struktur sidebar & semua halaman existing TIDAK dibongkar. */
:root{
  --bg:#ffffff; --surface:#ffffff; --surface-alt:#f6f4f5; --border:#d8d8d8; --text:#171b22; --text-mute:#857b7c;
  --accent:#ad1723; --accent-dark:#69040b; --accent-soft:#f6dee0;
  --lime:#dc4047; --lime-dark:#ad1723; --lime-ink:#2e1317;
  --dark:#171b22; --dark-soft:#3a2226;
  --pastel-purple:#e6e0fb; --pastel-purple-ink:#4a3f8a;
  --pastel-blue:#dcedfd; --pastel-blue-ink:#2a5f96;
  --pastel-green:#dff5e3; --pastel-green-ink:#1f7a44;
  --pastel-pink:#fbe1ef; --pastel-pink-ink:#a13e78;
  --pastel-teal:#d9f3ee; --pastel-teal-ink:#1f7a6c;
  --green:#16a34a; --green-soft:#e8f7ee; --red:#e5484d; --red-soft:#fdecec;
  --amber:#d97706; --amber-soft:#fff4e0;
  --orange:#ea580c; --orange-soft:#fff0e6;
  --brand-yellow:#C9971E; --brand-navy:#171b22;
  --radius:18px; --radius-sm:12px; --radius-lg:22px;
  --shadow:0 1px 2px rgba(15,25,20,.03), 0 4px 14px rgba(15,25,20,.04);
  --sidebar-w:238px;
}
*{box-sizing:border-box}
/* Scrollbar tipis konsisten di seluruh aplikasi (sama seperti card "Rekan Satu Tim") */
*{scrollbar-width:thin;scrollbar-color:var(--border) transparent}
*::-webkit-scrollbar{width:6px;height:6px}
*::-webkit-scrollbar-thumb{background:var(--border);border-radius:100px}
*::-webkit-scrollbar-track{background:transparent}
/* 2026-08-26 (bugfix mobile - "navbar bawah ikut terskrol"): pengaman ekstra, overflow-x:hidden di body -
   kalau ada elemen yg bikin halaman lebih lebar dari viewport (mis. grid overflow), Safari/Chrome mobile
   bisa membuat elemen position:fixed "ikut" tergeser saat digulir horizontal. Tabel lebar tetap aman krn
   sudah dibungkus .table-wrap{overflow-x:auto} sendiri (lihat baris terkait di bawah). */
body{margin:0;font-family:'Inter',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;background:var(--bg);color:var(--text);font-size:14.5px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--accent);text-decoration:none}
h1,h2,h3{margin:0 0 4px}
::selection{background:var(--accent-soft);color:var(--accent-dark)}

/* ---------- Login ---------- */
.login-body{position:relative;display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;overflow:hidden;
  background:#fff}
.login-main{position:relative;z-index:1;flex:1;display:flex;align-items:center;justify-content:center;padding:24px 16px;min-height:0}
/* 2026-08-29 (permintaan user - "beri efek blur 30% pada background"): gambar background BUKAN di
   .login-body langsung (percobaan pertama pakai CSS var --login-bg-url di background shorthand ternyata
   bikin background hilang di sebagian browser - "background malah hilang, perbaiki") - sekarang pakai
   <div class="login-bg-blur"> terpisah dgn inline background-image langsung (lihat login.php), cara ini
   sudah terbukti jalan sebelumnya. inset:-24px = area lebih lebar dari viewport supaya tepi hasil blur
   tidak terlihat. */
.login-bg-blur{position:absolute;inset:-24px;z-index:0;pointer-events:none;
  background-size:cover;background-position:center;background-repeat:no-repeat;filter:blur(10px)}
.login-footer{position:relative;z-index:1;flex-shrink:0;font-size:11.5px;color:#000;text-align:center;margin:0;padding:6px 16px 16px}
.login-card{position:relative;z-index:1;overflow:hidden;background:var(--surface);border-radius:var(--radius-lg);width:100%;max-width:304px;
  box-shadow:0 24px 55px rgba(20,16,10,.24),0 6px 16px rgba(20,16,10,.12);transition:background .2s;
  animation:loginCardIn .5s cubic-bezier(.22,1,.36,1) both}
@keyframes loginCardIn{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
.login-card.login-card-photo{background:#152A54}
.login-card-content{position:relative;z-index:1;padding:26px 24px;display:flex;flex-direction:column}
.login-card-photo .login-card-content{min-height:464px}

/* Foto full-card (mode quick login) + scrim gelap supaya teks tetap terbaca, meniru desain AssetHub */
#wbPhotoBg{position:absolute;inset:0;z-index:0;overflow:hidden}
#wbPhotoBgImg{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.wb-photobg-fallback{position:absolute;inset:0;background:linear-gradient(160deg,var(--brand-navy) 0%,#0a1730 100%);display:flex;align-items:center;justify-content:center;color:#fff;font-size:42px;font-weight:700}
.wb-photobg-scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom, rgba(10,15,30,.6) 0%, rgba(10,15,30,.18) 38%, rgba(10,15,30,.74) 65%, rgba(10,15,30,.92) 100%)}
#wbGantiRow{position:absolute;top:13px;right:14px;z-index:20}
.wb-ganti-btn{white-space:nowrap;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.15);backdrop-filter:blur(8px);
  padding:5px 13px;border-radius:100px;font-weight:500;font-size:9px;cursor:pointer;color:#fff;letter-spacing:.02em;transition:background .15s}
.wb-ganti-btn:hover{background:rgba(255,255,255,.28)}

.login-brand{text-align:left;margin-bottom:19px}
.brand-mark{width:64px;height:64px;object-fit:contain;display:block;margin:0 auto 14px}
.login-brand .brand-mark{width:176px;height:auto;max-width:100%;margin:0 0 14px}
.login-brand h1{font-size:16px}
.login-brand p{color:var(--text-mute);font-size:10px;margin:3px 0 0}
.login-brand p.brand-sub{font-size:9px;letter-spacing:.04em;text-transform:uppercase;font-weight:600}
.brand-hc{color:var(--brand-yellow)}
.brand-integra{color:var(--brand-navy)}

/* Mark kecil putih (mode quick login), di pojok kiri atas atas foto */
.login-mark{display:flex;align-items:center;gap:6px;margin-bottom:auto;color:rgba(255,255,255,.9);font-size:8px;font-weight:700;letter-spacing:.14em}
.login-mark-logo{height:45px;width:auto;object-fit:contain;filter:brightness(0) invert(1) drop-shadow(0 2px 4px rgba(0,0,0,.35))}

.wb-name-big{font-size:18px;font-weight:700;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.5);line-height:1.2}
.wb-role-big{font-size:10px;color:rgba(255,255,255,.75);letter-spacing:.08em;text-transform:uppercase;margin-top:3px}
#wbUserInfo{margin-top:auto;margin-bottom:14px}

.login-form{display:flex;flex-direction:column;gap:5px}
.login-form label{font-size:10px;font-weight:600;color:var(--text-mute);margin-top:6px}
.login-form input{width:100%;padding:9px 11px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:11px;background:var(--surface-alt);box-sizing:border-box}
.login-form input:focus{outline:none;border-color:var(--accent);background:#fff}
.login-arrow-btn{width:42px;height:42px;border-radius:50%;background:var(--accent);color:#fff;border:none;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 8px 20px rgba(20,16,10,.28);transition:background .15s,transform .15s}
.login-arrow-btn:hover{background:var(--accent-dark);transform:translateX(3px)}
.login-arrow-btn svg{width:18px;height:18px}
.login-hint{text-align:center;margin-top:14px}

/* Password di baris yang sama dengan tombol masuk (panah bulat) */
.pass-input-row{display:flex;align-items:center;gap:8px}
.pass-input-inner{position:relative;flex:1;min-width:0}

/* Kolom password + tombol lihat/sembunyikan */
.pass-wrap input{padding-right:34px}
.pass-toggle{position:absolute;right:5px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text-mute);cursor:pointer;width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:6px}
.pass-toggle:hover{color:var(--accent);background:var(--surface-alt)}
.pass-toggle svg{width:14px;height:14px}

/* "Lupa password?" bergaya pill */
.login-hint-pill{display:inline-block;padding:6px 14px;border-radius:100px;font-size:10px;font-weight:600;color:var(--text);
  border:1.5px solid var(--border);background:#fff;text-decoration:none;transition:border-color .15s,color .15s}
.login-hint-pill:hover{border-color:var(--accent);color:var(--accent-dark)}

/* Warna input/label saat mode quick login (di atas foto gelap) */
.login-card-photo #passLabel{color:rgba(255,255,255,.75)}
.login-card-photo .login-form input{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28);color:#fff}
.login-card-photo .login-form input::placeholder{color:rgba(255,255,255,.5)}
.login-card-photo .pass-toggle{color:rgba(255,255,255,.75)}
.login-card-photo .pass-toggle:hover{color:#fff;background:rgba(255,255,255,.15)}
.login-card-photo .login-hint-pill{border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.15);color:#fff;backdrop-filter:blur(8px)}
.login-card-photo .login-hint-pill:hover{background:rgba(255,255,255,.28);border-color:rgba(255,255,255,.5)}

.login-recent{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:11px}
.login-recent-item{display:flex;flex-direction:column;align-items:center;gap:4px;width:45px;cursor:pointer}
.login-recent-avatar{width:32px;height:32px;border-radius:50%;overflow:hidden;background:var(--accent-soft);color:var(--accent-dark);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:10px;border:2px solid transparent;transition:border-color .15s}
.login-recent-item:hover .login-recent-avatar{border-color:var(--accent)}
.login-recent-avatar img{width:100%;height:100%;object-fit:cover}
.login-recent-name{font-size:8px;color:var(--text-mute);text-align:center;line-height:1.2;max-width:45px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.login-card-photo .login-recent-name{color:rgba(255,255,255,.75)}
.alert{padding:10px 14px;border-radius:var(--radius-sm);font-size:13px;margin-bottom:10px}
.alert-error{background:var(--red-soft);color:var(--red)}
.alert-success{background:var(--green-soft);color:var(--green)}

/* ---------- App shell ---------- */
.app{display:flex;min-height:100vh}
.sidebar{width:var(--sidebar-w);background:var(--surface);position:fixed;top:0;left:0;bottom:0;display:flex;flex-direction:column;z-index:40;transition:transform .2s,width .2s;box-shadow:1px 0 0 var(--border)}
.sidebar-brand{position:relative;display:flex;align-items:center;gap:10px;padding:22px 20px 14px}
.sidebar-brand .brand-mark-full{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);height:38px;width:auto;max-width:190px;object-fit:contain}
.sidebar-brand .brand-mark-icon{display:none;width:34px;height:34px;margin:0;flex-shrink:0;object-fit:contain}
.sidebar-brand span{font-weight:700;font-size:15.5px}
.sidebar-collapse-btn{margin-left:auto;background:none;border:none;color:var(--text-mute);cursor:pointer;padding:6px;border-radius:var(--radius-sm);display:flex}
.sidebar-collapse-btn:hover{background:var(--bg);color:var(--text)}
/* 2026-08-25: 2 ikon chevron ditumpuk, hanya salah satu tampil sesuai status (lihat toggle di dalam
   @media body.sidebar-collapsed di bawah) - default (sidebar terbuka) tampilkan panah kiri. */
.sidebar-collapse-btn .collapse-icon-collapsed{display:none}
.nav{flex:1;padding:14px 14px 6px;overflow-y:auto}
.nav-group-label{font-size:10.5px;font-weight:700;letter-spacing:.08em;color:var(--text-mute);text-transform:uppercase;padding:14px 10px 6px}
.nav a{position:relative;display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:100px;color:var(--text-mute);font-weight:500;font-size:13.8px;margin-bottom:3px;transition:background .15s,color .15s;white-space:nowrap}
.nav a:hover{background:var(--surface-alt);color:var(--text)}
.nav a.active{background:var(--lime);color:var(--lime-ink);font-weight:700}
.nav a.active .nav-dot{display:inline-block}
.nav-dot{display:none;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-left:auto;flex-shrink:0}
.nav .nav-icon{width:18px;display:inline-flex;justify-content:center;flex-shrink:0;position:relative}
.nav-group-label svg{margin-right:2px}
.nav a.nav-sub{padding-left:22px}
body.sidebar-collapsed .nav a.nav-sub{padding-left:8px}

/* 2026-08-25 (permintaan user - "tambahkan bubble+count number...untuk halaman yang memiliki pekerjaan
   dalam proses", lalu revisi "buat badge count menempel menyatu di atas icon, seperti badge count pada
   lonceng pesan"): bubble angka kecil menempel di pojok kanan-atas ikon menu - PERSIS pola .notif-badge
   yang sudah ada di lonceng topbar (lihat position:absolute;top:2px;right:2px di sana), cuma diskalakan
   lebih kecil krn ikon sidebar jauh lebih kecil (18px) drpd tombol lonceng (42px). HTML-nya sengaja
   ditaruh DI DALAM span.nav-icon (lihat includes/layout_top.php) supaya position:relative pada .nav-icon
   jadi acuan penempatannya - berlaku otomatis sama persis di mode expand MAUPUN collapse, tidak perlu
   override terpisah lagi seperti sebelumnya. */
.nav-badge{position:absolute;top:-5px;right:-7px;min-width:15px;height:15px;padding:0 3px;border-radius:100px;background:var(--red);color:#fff;font-size:9.5px;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1;z-index:2;border:1.5px solid var(--surface)}

/* 2026-08-25 (permintaan user - "untuk sub menu ada garis penghubung", adopsi lampiran): garis vertikal
   penghubung di kiri daftar submenu, dari induk turun ke tiap anak - CSS murni via ::before di container,
   bukan per-item, supaya garisnya menyambung utuh dari atas ke bawah kelompok. */
.nav-parent-children{position:relative}
.nav-parent-children::before{content:'';position:absolute;left:23px;top:2px;bottom:2px;width:1px;background:var(--border)}
.nav-parent .nav-parent-children a.nav-sub{padding-left:30px}

/* ==== Nav: menu induk collapsible (mis. "Perintah Dinas", "Absensi") ==== */
.nav-parent{margin-bottom:3px}
.nav-parent-btn{width:100%;text-align:left;background:none;border:none;font:inherit;cursor:pointer;position:relative;display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:100px;color:var(--text-mute);font-weight:500;font-size:13.8px;transition:background .15s,color .15s;white-space:nowrap}
.nav-parent-btn:hover{background:var(--surface-alt);color:var(--text)}
.nav-parent.has-active>.nav-parent-btn{color:var(--text);font-weight:600}
.nav-caret{margin-left:auto;flex-shrink:0;display:inline-flex;transition:transform .15s}
.nav-parent.open>.nav-parent-btn .nav-caret{transform:rotate(90deg)}
.nav-parent-children{max-height:0;overflow:hidden;transition:max-height .2s ease}
.nav-parent.open>.nav-parent-children{max-height:420px}
/* Mode collapse: tampilkan semua icon submenu (jangan disembunyikan) - abaikan status open/close */
body.sidebar-collapsed .nav-parent-children{display:block;max-height:none;overflow:visible}
body.sidebar-collapsed .nav-parent-btn{justify-content:center;padding:12px 8px}
body.sidebar-collapsed .nav-caret{display:none}
.sidebar-user{padding:16px 18px;margin:10px 14px 16px;font-size:13px;background:var(--surface-alt);border-radius:var(--radius)}
.sidebar-user .u-name{font-weight:600}
.sidebar-user .u-role{color:var(--text-mute);font-size:12px;text-transform:capitalize}
.sidebar-user a{font-size:12.5px;color:var(--text-mute)}
.sidebar-user a:hover{color:var(--accent)}

.main{margin-left:var(--sidebar-w);flex:1;min-width:0;transition:margin-left .2s}

/* ---------- Sidebar collapsed (desktop only) ---------- */
@media (min-width: 901px){
  body.sidebar-collapsed .sidebar{width:80px}
  body.sidebar-collapsed .main{margin-left:80px}
  body.sidebar-collapsed .sidebar-brand{justify-content:center;padding:20px 10px 14px}
  body.sidebar-collapsed .sidebar-brand .brand-mark-full{display:none}
body.sidebar-collapsed .sidebar-brand .brand-mark-icon{display:block}
  body.sidebar-collapsed .nav-group-label{display:none}
  body.sidebar-collapsed .sidebar-collapse-btn{position:absolute;right:-13px;top:22px;background:#fff;border:1px solid var(--border);border-radius:50%;box-shadow:var(--shadow);margin-left:0}
  body.sidebar-collapsed .sidebar-collapse-btn .collapse-icon-expanded{display:none}
  body.sidebar-collapsed .sidebar-collapse-btn .collapse-icon-collapsed{display:flex}
  body.sidebar-collapsed .nav a{justify-content:center;padding:12px 8px}
  body.sidebar-collapsed .nav-label, body.sidebar-collapsed .nav-dot{display:none}
  body.sidebar-collapsed .sidebar-user{display:flex;flex-direction:column;align-items:center;margin:10px 8px 16px;padding:12px 8px}
  body.sidebar-collapsed .sidebar-user-info,
  body.sidebar-collapsed .sidebar-user-links a:first-child{display:none}
  body.sidebar-collapsed .sidebar-user-links{margin-top:10px !important}

  /* 2026-08-25 (permintaan user - "saat di collapse sub menu muncul popup seperti lampiran2", adopsi
     lampiran): submenu SEBELUMNYA tampil rata/flat terus-menerus saat sidebar diciutkan (lihat aturan lama
     "body.sidebar-collapsed .nav-parent-children{display:block;...}" di atas, masih berlaku di lebar <901px
     - HANYA ditimpa di sini utk layar desktop). Sekarang jadi popup melayang ke kanan, muncul saat hover
     ATAU saat diklik (pakai class .open yang SUDAH ada dari toggleNavParent(), tidak perlu JS baru).
     left:100% (nempel, tanpa jarak/gap) supaya kursor tidak "kehilangan" hover saat pindah dari tombol ke
     popup - jarak visualnya didapat dari padding di dalam, bukan gap/margin di luar. */
  body.sidebar-collapsed .nav-parent{position:relative}
  body.sidebar-collapsed .nav-parent-children{
    display:none;
    position:absolute;
    left:100%;
    top:-6px;
    min-width:210px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:8px;
    z-index:60;
  }
  /* 2026-08-25 (permintaan user - "masih...saat collapse saja tumpang tindih"): SENGAJA cuma pakai
     :hover/:focus-within, BUKAN class ".open" - ".open" dipakai bareng utk accordion mode expand dan
     BISA aktif di lebih dari 1 grup sekaligus (mis. grup berisi halaman aktif + grup lain yg status
     terbukanya kesimpan dari sesi lalu) - kalau dipakai juga sbg pemicu popup collapse, 2 popup bisa
     muncul bertumpuk barengan (persis bug di screenshot user). :hover/:focus-within otomatis eksklusif
     (cuma 1 elemen yang bisa di-hover/focus dalam satu waktu) jadi popup collapse selalu cuma 1 yang tampil. */
  body.sidebar-collapsed .nav-parent:hover .nav-parent-children,
  body.sidebar-collapsed .nav-parent:focus-within .nav-parent-children{display:block}
  body.sidebar-collapsed .nav-parent-children .nav-label{display:inline}
  body.sidebar-collapsed .nav-parent-children::before{left:9px}
  body.sidebar-collapsed .nav-parent .nav-parent-children a.nav-sub{justify-content:flex-start;padding:9px 10px 9px 22px}
}

/* 2026-08-26 (bugfix - laporan user "saat collapse pada mode mobile tampilan seharusnya mengecil namun
   tidak"): blok di atas SENGAJA dibatasi "desktop only" (min-width:901px) krn di mobile sidebar sudah
   punya mekanisme SENDIRI (drawer overlay, buka/tutup penuh via class .sidebar.open + transform, lihat
   @media max-width:900px di bawah - beda dari body.sidebar-collapsed yg aslinya utk sidebar PERMANEN-
   tampil di desktop yg mau diciutkan jadi rel ikon). Tapi tombol ciutkan (.sidebar-collapse-btn) tetap
   bisa dipencet saat drawer mobile terbuka, dan user mengharapkan efek yg sama (menciut jadi rel ikon
   80px) - SEBELUMNYA tidak ada efek sama sekali krn semua aturan lebar/label ada di dalam media query
   desktop-only. Ditambahkan versi ringkas KHUSUS mobile di sini (subset aman drpd blok desktop - TIDAK
   termasuk .main{margin-left} krn di mobile .main selalu margin-left:0/sidebar cuma overlay, dan TIDAK
   termasuk popup flyout submenu hover/focus-within krn hover tidak natural di layar sentuh - submenu di
   mobile+collapsed tetap pakai perilaku flat/selalu-tampil yg SUDAH ADA sebelumnya, lihat
   "body.sidebar-collapsed .nav-parent-children{display:block;...}" jauh di atas, itu memang sengaja
   TIDAK dibatasi media query supaya berlaku di semua lebar layar). */
@media (max-width:900px){
  body.sidebar-collapsed .sidebar{width:80px}
  body.sidebar-collapsed .sidebar-brand{justify-content:center;padding:20px 10px 14px}
  body.sidebar-collapsed .sidebar-brand .brand-mark-full{display:none}
body.sidebar-collapsed .sidebar-brand .brand-mark-icon{display:block}
  body.sidebar-collapsed .nav-group-label{display:none}
  body.sidebar-collapsed .sidebar-collapse-btn{position:absolute;right:-13px;top:22px;background:#fff;border:1px solid var(--border);border-radius:50%;box-shadow:var(--shadow);margin-left:0}
  body.sidebar-collapsed .sidebar-collapse-btn .collapse-icon-expanded{display:none}
  body.sidebar-collapsed .sidebar-collapse-btn .collapse-icon-collapsed{display:flex}
  body.sidebar-collapsed .nav a{justify-content:center;padding:12px 8px}
  body.sidebar-collapsed .nav-label,body.sidebar-collapsed .nav-dot{display:none}
  body.sidebar-collapsed .sidebar-user{display:flex;flex-direction:column;align-items:center;margin:10px 8px 16px;padding:12px 8px}
  body.sidebar-collapsed .sidebar-user-info,
  body.sidebar-collapsed .sidebar-user-links a:first-child{display:none}
  body.sidebar-collapsed .sidebar-user-links{margin-top:10px !important}
}
.topbar{background:rgba(255,255,255,.1);backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%);border:1px solid rgba(255,255,255,.35);box-shadow:var(--shadow);border-radius:var(--radius-lg);padding:16px 22px;margin:14px 28px 6px;display:flex;align-items:center;justify-content:space-between;gap:16px;position:sticky;top:14px;z-index:30;flex-wrap:wrap}
.topbar h2{font-size:20px}
.menu-toggle{display:none;background:none;border:none;padding:6px;border-radius:var(--radius-sm);cursor:pointer;color:var(--text)}
.menu-toggle:hover{background:var(--surface-alt)}
.content{padding:8px 28px 28px}

.topbar-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.topbar-search{display:flex;align-items:center;gap:8px;background:var(--surface);border-radius:100px;padding:10px 16px;box-shadow:var(--shadow);color:var(--text-mute);min-width:220px}
.topbar-search input{border:none;background:none;outline:none;font-size:13.5px;width:100%;color:var(--text)}

/* ---------- Pencarian "Informasi Aplikasi" (dokumentasi.php) - dropdown daftar segmen alur ---------- */
.topbar-search-info{position:relative}
.topbar-search-info-dropdown{display:none;position:absolute;top:calc(100% + 10px);left:0;width:300px;max-height:360px;overflow-y:auto;background:var(--surface);border-radius:16px;box-shadow:var(--shadow);padding:10px;z-index:50}
.topbar-search-info-dropdown.open{display:block}
.tsi-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;cursor:pointer;font-size:12.5px;color:var(--text)}
.tsi-item:hover{background:var(--accent-soft)}
.tsi-item-num{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:var(--accent-soft);color:var(--accent-dark);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.tsi-empty{padding:14px;text-align:center;color:var(--text-mute);font-size:12.5px}
input[type="search"]{-webkit-appearance:none;appearance:none}
input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none;height:14px;width:14px;margin-left:6px;cursor:pointer;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9a9a' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E")}
.topbar-quick-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mobile-quick-dock{display:none} /* hanya tampil ≤520px - lihat @media, markup di includes/layout_top.php di LUAR .topbar */
.topbar-clockpill{display:flex;align-items:center;gap:8px;background:var(--surface);border-radius:100px;padding:8px 16px;box-shadow:var(--shadow);color:var(--text);font-weight:700;font-size:13.5px;font-variant-numeric:tabular-nums}
.topbar-clockpill svg{color:var(--text-mute);flex-shrink:0}
.topbar-datepill{display:flex;align-items:center;gap:10px;background:var(--surface);border-radius:100px;padding:8px 16px 8px 8px;box-shadow:var(--shadow)}
.topbar-datepill .dp-day{width:34px;height:34px;border-radius:50%;background:var(--dark);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px}
.topbar-datepill .dp-txt{font-size:12px;line-height:1.3;color:var(--text-mute)}
.topbar-datepill .dp-txt b{display:block;color:var(--text);font-size:13px}
/* 2026-08-25 (permintaan user - "pindahkan card waktu solat di antara jam dan pill tanggal, buat bentuk
   pill waktu solat sebesar pill tanggal namun tetap dengan warna hijau"): dimensi/bentuk 100% REUSE
   .topbar-datepill di atas (padding/border-radius/box-shadow sama, lingkaran ikon 34px = .dp-day, teks 2
   baris = .dp-txt) - beda cuma warna dasar (hijau, bukan var(--surface)) & isi teksnya putih/transparan
   putih supaya kontras di atas hijau. Markup & logika JS di includes/sholat_widget.php (di-require dari
   includes/layout_top.php). sp-icon-red dipakai saat hitung mundur <=15 menit (lihat sholatRenderCard()). */
.topbar-sholatpill{display:flex;align-items:center;gap:10px;background:linear-gradient(135deg,var(--green) 0%,#0f6e37 100%);border-radius:100px;padding:8px 16px 8px 8px;box-shadow:0 10px 24px rgba(15,110,55,.3);cursor:pointer}
.topbar-sholatpill .sp-icon{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.22);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.topbar-sholatpill .sp-icon.sp-icon-red{background:#fff;color:var(--red)}
.topbar-sholatpill .sp-txt{font-size:12px;line-height:1.3;color:rgba(255,255,255,.88)}
.topbar-sholatpill .sp-txt b{display:block;color:#fff;font-size:13px}
.notif-wrap{position:relative}
.topbar-bell{position:relative;display:flex;align-items:center;justify-content:center;width:42px;height:42px;background:var(--surface);border:none;border-radius:50%;box-shadow:var(--shadow);color:var(--text);cursor:pointer}
.topbar-bell:hover{color:var(--accent)}
.notif-badge{position:absolute;top:2px;right:2px;min-width:16px;height:16px;padding:0 4px;border-radius:100px;background:var(--accent);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1}
.notif-dropdown{display:none;position:absolute;top:calc(100% + 10px);right:0;width:328px;max-height:420px;overflow-y:auto;background:var(--surface);border-radius:18px;box-shadow:var(--shadow);padding:14px;z-index:50}
.notif-dropdown.open{display:block}
.notif-dropdown-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.notif-dropdown-title{font-size:14px;font-weight:700}
.notif-dropdown-count{font-size:11px;color:var(--accent-dark);font-weight:600;background:var(--accent-soft);padding:2px 9px;border-radius:100px}

/* ---------- Notification items: avatar + message + read/unread state ---------- */
.notif-item{position:relative;display:flex;gap:10px;padding:10px 32px 10px 14px;border-radius:12px;margin-bottom:2px;transition:background .15s;cursor:default}
.notif-item-menu-btn{position:absolute;top:6px;right:4px;background:none;border:none;cursor:pointer;color:var(--text-mute);padding:4px;border-radius:6px;line-height:0}
.notif-item-menu-btn:hover{background:var(--surface);color:var(--text)}
.notif-item-menu{display:none;position:absolute;top:30px;right:4px;z-index:5;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow);min-width:175px;overflow:hidden}
.notif-item-menu.open{display:block}
.notif-menu-item{padding:10px 12px;font-size:12.5px;font-weight:500;cursor:pointer;border-bottom:1px solid var(--border);white-space:nowrap;color:var(--text)}
.notif-menu-item:last-child{border-bottom:none}
.notif-menu-item:hover{background:var(--accent-soft)}
.notif-menu-item.danger{color:var(--red)}
.notif-item:hover{background:var(--surface-alt)}
.notif-item.unread{background:var(--accent-soft)}
.notif-item.unread:hover{background:var(--accent-soft)}
.notif-item.unread::before{content:'';position:absolute;left:2px;top:10px;bottom:10px;width:3px;border-radius:3px;background:var(--accent)}
.notif-item-clickable{cursor:pointer}
.notif-item-clickable:hover{background:var(--surface-alt)}
.notif-item-clickable.unread:hover{background:var(--accent-soft);filter:brightness(0.97)}
.notif-item-avatar{flex-shrink:0;width:36px;height:36px;border-radius:50%;background:var(--dark);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13.5px;font-weight:700}
.notif-item.unread .notif-item-avatar{background:var(--accent)}
.notif-item-body{flex:1;min-width:0}
.notif-item-top{display:flex;align-items:center;gap:6px;min-width:0}
.notif-item-top b{min-width:0;font-size:12.5px;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.notif-unread-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex-shrink:0}
/* Notifikasi jenis "Informasi" (blast HC Management, lihat informasi.php) - background oranye muda +
   dot beranimasi, sengaja beda dari notifikasi umum supaya langsung terlihat mencolok. */
.notif-item.notif-item-informasi{background:var(--orange-soft)}
.notif-item.notif-item-informasi:hover{background:var(--orange-soft);filter:brightness(0.97)}
.notif-item.notif-item-informasi::before{content:'';position:absolute;left:2px;top:10px;bottom:10px;width:3px;border-radius:3px;background:var(--orange)}
.notif-item.notif-item-informasi .notif-item-avatar{background:var(--orange);font-size:15px}
.notif-unread-dot-informasi{background:var(--orange);animation:notifDotPulse 1.1s ease-in-out infinite}
@keyframes notifDotPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.7);opacity:.45}}
.notif-item-time{font-size:10px;color:var(--text-mute);margin-left:auto;white-space:nowrap;flex-shrink:0;padding-left:6px}
.notif-item-msg{font-size:12px;color:var(--text-mute);margin-top:3px;line-height:1.42;word-break:break-word}
.notif-item.unread .notif-item-msg{color:var(--text);font-weight:500}
/* 2026-08-20: Notifikasi jenis "karyawan_baru" (blast otomatis begitu PKWT pertama selesai bermeterai) -
   hijau (beda dari oranye "Informasi") + bisa diklik utk buka detail+kirim ucapan (lihat notifikasi.js). */
.notif-item.notif-item-karyawan-baru{background:var(--green-soft)}
.notif-item.notif-item-karyawan-baru:hover{background:var(--green-soft);filter:brightness(0.97)}
.notif-item.notif-item-karyawan-baru::before{content:'';position:absolute;left:2px;top:10px;bottom:10px;width:3px;border-radius:3px;background:var(--green)}
.notif-item.notif-item-karyawan-baru .notif-item-avatar{background:var(--green);font-size:15px}
.notif-unread-dot-karyawan-baru{background:var(--green);animation:notifDotPulse 1.1s ease-in-out infinite}
.notif-item-hint{font-size:10.5px;color:var(--green);margin-top:4px;font-weight:600}

/* ---------- Cards / Grid ---------- */
.grid{display:grid;gap:16px}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
/* Kartu tinggi bervariasi (mis. halaman Pengaturan) - CSS grid biasa menyisakan celah kosong besar kalau
   1 baris berisi kartu tinggi & pendek berdampingan (tinggi baris ikut kartu tertinggi). CSS multi-column
   ("masonry" tanpa JS) mengalirkan kartu mengisi kolom pertama sampai penuh baru lanjut ke kolom ke-2,
   jadi tidak ada celah kosong menganga di bawah kartu pendek. */
.settings-columns{column-count:2;column-gap:16px}
.settings-columns>.card{break-inside:avoid;margin:0 0 16px;display:block}
@media (max-width:900px){.settings-columns{column-count:1}}
.grid-profil-row{grid-template-columns:1.9fr 1fr}
.grid-profil-row-3col{grid-template-columns:1.5fr 1fr 1fr;grid-template-rows:320px 230px}
/* Baris ke-2: kartu Kalender melebar hanya sebatas kolom 1-2 (lebar profil-header + absen-card,
   berakhir tepat di kartu absensi) - kolom 3 (Rekan Satu Tim) menyatu jadi 1 kartu tinggi yg
   menyambung sampai batas bawah kartu Kalender. */
.grid-profil-row-3col>:nth-child(1){grid-column:1;grid-row:1}
.grid-profil-row-3col>:nth-child(2){grid-column:2;grid-row:1}
.grid-profil-row-3col>:nth-child(3){grid-column:3;grid-row:1 / 3}
.grid-profil-row-3col>:nth-child(4){grid-column:1 / 3;grid-row:2}
/* min-height:0 - cegah grid item "menolak" mengecil sesuai grid-template-rows tetap di atas gara2
   ukuran minimum konten bawaan (min-height:auto default pada grid item), penyebab tinggi kartu
   Kalender & Rekan Satu Tim jadi tidak sinkron. */
.grid-profil-row-3col>*{min-height:0;overflow:hidden}
.grid-dash-hero{grid-template-columns:.3fr .7fr}
.card{background:var(--surface);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);border:1px solid var(--border);transition:box-shadow .15s}
.stat-card .stat-label{color:var(--text-mute);font-size:13px;font-weight:500}
.stat-card .stat-value{font-size:27px;font-weight:700;margin-top:4px}
.stat-card .stat-sub{font-size:12.5px;color:var(--text-mute);margin-top:4px}
.gaji-legend summary{list-style:none}
.gaji-legend summary::-webkit-details-marker{display:none}
.gaji-legend summary::before{content:'▸ ';color:var(--text-mute)}
.gaji-legend[open] summary::before{content:'▾ '}
.legend-table{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:4px}
.legend-table td{padding:6px 4px;border-bottom:1px solid var(--border);white-space:normal}
.legend-table tr:last-child td{border-bottom:none}
.legend-table td:last-child{text-align:right;font-weight:600;color:var(--text)}
.stat-card.hero{background:var(--dark);color:#fff}
.stat-card.hero .stat-label{color:rgba(255,255,255,.65)}
.stat-card.hero .stat-sub{color:rgba(255,255,255,.55)}
.card-title{font-size:15px;font-weight:600;margin-bottom:14px}

/* ---------- Dot-matrix mini chart ---------- */
.dotgrid{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;margin-top:10px}
.dotgrid .dot{width:100%;padding-top:100%;border-radius:50%;background:var(--border)}
.dotgrid .dot.filled{background:var(--accent)}
.stat-card.hero .dotgrid .dot{background:rgba(255,255,255,.14)}
.stat-card.hero .dotgrid .dot.filled{background:var(--accent)}

/* ---------- Mini calendar (dashboard) ---------- */
/* 2026-08-12 (permintaan user - "semua kalendar responsif stabil seperti kalendar profil di mode apapun"):
   min-width:0 wajib supaya grid 7-kolom ini bisa MENGECIL mengikuti container flex-nya (.cal-row/
   .ruang-cal-row di bawah) - tanpa ini, item flex punya batas bawah min-width:auto = lebar konten,
   sehingga di layar sempit (mis. sidebar terbuka + jendela medium) kalender bisa meluber alih-alih menyusut. */
.mini-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;min-width:0}
.mini-cal .mc-dow{font-size:10px;color:var(--text-mute);text-align:center;font-weight:600;padding-bottom:2px}
.mini-cal .mc-day,.mini-cal .mc-empty{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:11px;border-radius:5px;position:relative}
.mini-cal .mc-day{background:var(--surface-alt);cursor:default}
.mini-cal .mc-today{outline:1.5px solid var(--dark)}
.mini-cal .mc-holiday{background:var(--red-soft);color:var(--red);font-weight:800}
.mini-cal .mc-birthday{background:var(--accent-soft);color:var(--accent-dark)}
.mini-cal .mc-birthday::after{content:'';position:absolute;bottom:2px;width:4px;height:4px;border-radius:50%;background:var(--accent)}
#kalAgenda{margin-top:10px;max-height:120px;overflow-y:auto}
.mc-agenda-row{display:grid;grid-template-columns:20px 1fr auto auto;gap:6px;align-items:center;padding:4px 0;font-size:11.5px;border-bottom:1px solid var(--border)}
.mc-agenda-row b{color:var(--text-mute);font-weight:500}
.mc-agenda-row span{font-weight:500}
.mc-agenda-row em{font-style:normal;color:var(--text-mute);font-size:10.5px;font-weight:500}
.mc-agenda-row em.tag-libur{color:var(--red)}
.btn-ucapan{background:var(--accent-soft);color:var(--accent-dark);border:none;border-radius:100px;padding:4px 10px;font-size:10.5px;font-weight:600;cursor:pointer;white-space:nowrap}
.btn-ucapan:hover{background:var(--accent);color:#fff}

/* ---------- Ucapkan Selamat: modal emoji picker + speech-bubble toast ---------- */
.emoji-row{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.emoji-btn{background:var(--surface-alt);border:none;border-radius:8px;font-size:18px;padding:4px 7px;cursor:pointer;line-height:1}
.emoji-btn:hover{background:var(--accent-soft)}
.uc-toast{position:fixed;top:24px;left:50%;transform:translateX(-50%) translateY(-12px);background:var(--dark);color:#fff;padding:12px 20px;border-radius:16px 16px 16px 4px;font-size:13.5px;font-weight:500;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:200;max-width:90vw}
.uc-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- Mini calendar: small variant, grid left / keterangan right (profil karyawan) ----------
   Dipendekkan sebatas ukuran kalender itu sendiri (bukan lagi kartu full-width) - card lain (Rekan
   Satu Tim) mengikuti tinggi ini karena keduanya berbagi baris grid yg sama di profil.php. */
.cal-card-sm{padding:14px 16px}
.cal-card-sm .card-title{font-size:14px;margin-bottom:6px}
.cal-title-row{display:flex;align-items:center;justify-content:space-between}
.cal-nav{display:flex;gap:4px}
.cal-nav button{background:none;border:none;cursor:pointer;color:var(--text-mute);display:flex;align-items:center;padding:2px;border-radius:6px}
.cal-nav button:hover{background:var(--surface-alt);color:var(--text)}
/* 2026-08-12: flex-wrap:wrap + flex:1 1 <basis> (bukan flex:0 0 auto;width:Npx tetap) - kalender & agenda
   otomatis turun ke tampilan bertumpuk begitu ruang tersedia kurang dari basis-nya, MENGIKUTI LEBAR
   CONTAINER SEBENARNYA (bukan cuma breakpoint lebar layar) - tetap stabil walau sidebar terbuka memakan
   ruang di jendela ukuran sedang/tablet, tanpa perlu breakpoint tambahan. max-width menjaga ukuran desktop
   tetap identik seperti semula (tidak melebar berlebihan di layar sangat lebar). */
.cal-row{display:flex;gap:15px;align-items:flex-start;flex-wrap:wrap}
.cal-row .mini-cal{flex:1 1 186px;max-width:186px;gap:2px}
.cal-row .mini-cal .mc-dow{font-size:8.5px;padding-bottom:1px}
.cal-row .mini-cal .mc-day,.cal-row .mini-cal .mc-empty{font-size:9.5px;border-radius:4px}
.cal-row .mini-cal .mc-birthday::after{width:3px;height:3px}
.cal-row #kalAgenda{flex:2 1 200px;min-width:0;max-height:150px;font-size:10.5px;margin-top:0;border-left:1px solid var(--border);padding-left:15px}
.cal-row .mc-agenda-row{font-size:10.5px;padding:3px 0}

/* ---------- Reservasi Ruang: kalender penuh kiri, agenda tanggal terpilih kanan ---------- */
.ruang-cal-row{display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap}
.ruang-cal-row .ruang-mini-cal{flex:1 1 300px;max-width:340px;gap:4px}
.ruang-cal-row .ruang-mini-cal .mc-dow{font-size:11px}
.ruang-cal-row .ruang-mini-cal .mc-day,.ruang-cal-row .ruang-mini-cal .mc-empty{font-size:13px;border-radius:8px}
.ruang-cal-row .ruang-mini-cal .mc-day{cursor:pointer;transition:background .12s}
.ruang-cal-row .ruang-mini-cal .mc-day:hover{background:var(--accent-soft)}
.ruang-cal-row .ruang-mini-cal .mc-day.mc-selected{outline:2px solid var(--accent);background:var(--accent-soft);color:var(--accent-dark);font-weight:700}
.ruang-cal-row .ruang-mini-cal .mc-day.mc-hasbooking::after{content:'';position:absolute;bottom:3px;width:5px;height:5px;border-radius:50%;background:var(--accent)}
.ruang-cal-row .ruang-mini-cal .mc-day.mc-hasbooking.mc-selected::after{background:var(--accent-dark)}
.ruang-agenda{flex:2 1 240px;min-width:0;border-left:1px solid var(--border);padding-left:22px}
.ruang-agenda-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.ruang-agenda-head b{font-size:14px}
.ruang-booking-item{padding:10px 0;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:flex-start;gap:10px;font-size:12.8px}
.ruang-booking-item:last-child{border-bottom:none}

/* ---------- Absensi: map fills entire card, text/buttons float on top ---------- */
.absen-card{position:relative;padding:0;overflow:hidden;min-height:230px}
.absen-card::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom, rgba(255,255,255,.72) 0%, rgba(255,255,255,.28) 34%, rgba(255,255,255,.28) 58%, rgba(255,255,255,.78) 100%)}
#absenMap{position:absolute;inset:0;height:100%;background:var(--surface-alt);z-index:0;isolation:isolate}
.absen-pin{width:16px;height:16px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);box-shadow:0 2px 6px rgba(20,16,10,.35);border:2px solid #fff}
.absen-overlay{position:relative;z-index:2;display:flex;flex-direction:column;height:100%;padding:16px;pointer-events:none}
.absen-overlay .card-title{color:#111;text-shadow:0 1px 3px rgba(255,255,255,.6);margin-bottom:0}
.absen-status{font-size:12px;color:#111;text-shadow:0 1px 3px rgba(255,255,255,.6);margin-top:6px}
.absen-substatus{font-size:11px;color:#111;text-shadow:0 1px 3px rgba(255,255,255,.6);margin-top:3px;opacity:.9}
.pill-red{pointer-events:auto;align-self:flex-start;margin-top:9px;background:var(--red);color:#fff;border:none;border-radius:999px;padding:7px 16px;font-size:12px;font-weight:700;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.pill-red:hover{opacity:.88}
.absen-btn-row{display:flex;gap:8px;margin-top:auto;pointer-events:auto}
.absen-btn-row .btn{flex:1;justify-content:center;padding:9px 10px;font-size:12.5px}
.absen-btn-row .btn:disabled{opacity:.45;cursor:not-allowed}

/* ---------- Presensi: modal edit peta (admin) ---------- */
.presensi-map-edit{height:320px;border-radius:14px;overflow:hidden;background:var(--surface-alt);box-shadow:inset 0 0 0 1px var(--border);position:relative;z-index:0;isolation:isolate}
.presensi-loc-toggle{display:flex;gap:16px;margin-top:16px;font-size:13px}
.presensi-loc-toggle label{display:flex;align-items:center;gap:6px;cursor:pointer}
.dot-masuk,.dot-keluar{display:inline-block;width:9px;height:9px;border-radius:50%}
.dot-masuk{background:var(--accent)}
.dot-keluar{background:var(--dark)}

/* ---------- Dashboard: compact cards (more data per screen) ---------- */
.dash .grid{gap:12px}
.dash .card{padding:13px}
.dash .card-title{font-size:13px;margin-bottom:6px}
.dash .stat-card .stat-label{font-size:12px}
.dash .stat-card .stat-value{font-size:20px;margin-top:2px}
.dash .stat-card .stat-sub{font-size:11px;margin-top:2px}
.dash .dotgrid{gap:3px;margin-top:6px}

/* ---------- Table ---------- */
.table-wrap{overflow-x:auto;background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow)}
table{width:100%;border-collapse:collapse;font-size:13.8px}
th{text-align:left;padding:13px 16px;background:var(--surface-alt);color:var(--text-mute);font-weight:600;border-bottom:1px solid var(--border);white-space:nowrap}
td{padding:12px 16px;border-bottom:1px solid var(--border);white-space:nowrap}
tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--surface-alt)}
th.col-aksi, td.col-aksi{position:sticky;right:0;white-space:nowrap;box-shadow:-6px 0 6px -6px rgba(16,24,40,.12)}
th.col-aksi{background:var(--surface-alt);z-index:3}
td.col-aksi{background:#fff;z-index:2}
tbody tr:hover td.col-aksi{background:var(--surface-alt)}
.badge{display:inline-block;padding:3px 11px;border-radius:100px;font-size:12px;font-weight:600}
.badge-green{background:var(--green-soft);color:var(--green)}
.badge-red{background:var(--red-soft);color:var(--red)}
.badge-amber{background:var(--amber-soft);color:var(--amber)}
.badge-gray{background:#f1f0ec;color:var(--text-mute)}
.badge-orange{background:var(--orange-soft);color:var(--orange)}
.badge-lime{background:var(--lime);color:var(--lime-ink)}

/* ---------- Toolbar / Forms ---------- */
.toolbar{display:flex;gap:10px;align-items:center;margin-bottom:16px;flex-wrap:wrap}
.toolbar input, .toolbar select{padding:10px 14px;border:1px solid var(--border);border-radius:100px;font-size:13.5px;background:var(--surface)}
.btn{padding:10px 18px;border-radius:100px;font-weight:600;font-size:13.8px;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:background .12s,border-color .12s,transform .06s}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--lime);color:#fff}
.btn-primary:hover{background:var(--lime-dark);color:#fff}
.btn-outline{background:#fff;color:var(--text);border:1px solid var(--border)}
.btn-outline:hover{background:var(--surface-alt)}
.btn-danger{background:var(--red-soft);color:var(--red)}
.btn-sm{padding:6px 12px;font-size:12.5px}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
/* 2026-08-25 (permintaan user - "frame edit karyawan masih terpotong di bagian kanan, buat responsif agar
   lebar tidak perlu skrol"): akar masalahnya BUKAN di .modal (sudah dibatasi max-width:100% sebelumnya) -
   grid item (.form-group) & elemen <select> secara default punya min-width:auto, jadi kalau isi <select>
   (mis. nama Bank yang panjang, opsi kdselect, dst) lebih lebar dari kolom 1fr-nya, GRID TRACK-nya yang
   dipaksa melebar mengikuti isi (bukan isinya yang menyempit) - itu yang bikin seluruh .modal ikut melebar
   & butuh discroll ke kanan. min-width:0 di sini yang mematahkan rantai itu (grid item BOLEH menyempit di
   bawah lebar isinya) + width:100% di select supaya select tetap penuh 1 kolom & teks panjangnya sendiri
   yang terpotong/ellipsis di dalam kotaknya, bukan kotaknya yang melebar keluar modal. */
.form-group{display:flex;flex-direction:column;gap:5px;min-width:0}
.form-group.full{grid-column:1/-1}
.form-group label{font-size:12.8px;font-weight:600;color:var(--text-mute)}
.form-group input,.form-group select,.form-group textarea{padding:10px 13px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:13.8px;background:var(--surface-alt);font-family:inherit;width:100%;min-width:0;max-width:100%}
.money-field{text-align:right;font-variant-numeric:tabular-nums}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--accent);background:#fff}
/* 2026-08-25 (permintaan user - "pada halaman edit karyawan tombol terpotong, buat responsif"): flex-wrap
   ditambahkan supaya tombol Batal/Simpan pindah ke baris baru kalau lebar modal sempit (mis. di HP), bukan
   kepotong diam-diam - sebelumnya baris tombol ini TIDAK bisa wrap sama sekali. */
.form-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;margin-top:18px;grid-column:1/-1}

/* ---------- Modal ---------- */
.modal-overlay{position:fixed;inset:0;background:rgba(20,16,10,.45);display:flex;align-items:center;justify-content:center;z-index:100;padding:20px;
  opacity:0;visibility:hidden;transition:opacity .2s ease,visibility 0s linear .2s}
.modal-overlay.open{opacity:1;visibility:visible;transition:opacity .2s ease,visibility 0s linear 0s}
.modal-overlay .modal{opacity:0;transition:opacity .18s ease}
.modal-overlay.open .modal{opacity:1}
/* overflow-x:hidden diset EKSPLISIT (bukan cuma andalkan overflow-y:auto) - kalau overflow-x tidak diset,
   spec CSS otomatis menghitungnya jadi 'auto' juga (bukan 'visible') begitu overflow-y bukan 'visible' -
   itu artinya .modal ini SENDIRI bisa punya scrollbar horizontal internal kalau ada anak yang melebar,
   terlepas dari .modal-overlay{overflow-x:hidden} yang taunya cuma membatasi di luar kotak .modal, bukan
   di dalamnya. Jaring pengaman terakhir di atas fix akar (min-width:0) di .form-group/select-input di atas. */
.modal{background:#fff;border-radius:var(--radius-lg);max-width:720px;width:100%;max-height:88vh;overflow-y:auto;overflow-x:hidden;padding:26px}
.modal.modal-sm{max-width:420px}
/* 2026-08-25 (permintaan user - "buat semua judul popup frame...dan tombol-tombol...dalam frame di semua
   halaman fix tidak ter-skrol"): .modal-head & .form-actions (KHUSUS yg di dalam .modal - lihat selector
   ".modal .form-actions" di bawah, supaya form di halaman biasa/bukan popup TIDAK ikut berubah) dibuat
   position:sticky ke tepi atas/bawah .modal (yang tetap jadi elemen yang di-scroll, overflow-y:auto di
   atas TIDAK diubah) - pakai trik margin negatif = padding .modal (26px) supaya sticky-nya nempel pas di
   tepi kartu modal (bukan nyangkut di tengah padding), lalu padding balik ditambahkan lagi di elemen ini
   sendiri supaya jarak visual konten persis sama seperti sebelumnya. Berlaku otomatis ke SEMUA modal di
   aplikasi ini krn keduanya class bersama (dipakai di karyawan.php, dan modal2 lain yang pakai pola sama). */
.modal-head{display:flex;justify-content:space-between;align-items:center;position:sticky;top:-26px;margin:-26px -26px 16px;padding:26px 26px 14px;background:#fff;z-index:5;border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.modal .form-actions{position:sticky;bottom:-26px;margin:18px -26px -26px;padding:14px 26px 26px;background:#fff;z-index:5;border-radius:0 0 var(--radius-lg) var(--radius-lg)}
.modal-close{background:var(--surface-alt);border:none;width:32px;height:32px;border-radius:50%;cursor:pointer;color:var(--text-mute);display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* ---------- Tabs ---------- */
/* 2026-08-26 (permintaan user - "buat tab berbentuk kuping folder seperti referensi", lalu revisi "tab
   aktif hilangkan garis di bawah title"): gaya "kuping folder" (folder tab/dog-ear) - tiap tab jadi kotak
   bersudut atas membulat (border-radius atas saja) dgn border penuh, tab non-aktif berlatar abu-abu lembut
   & tampak "di belakang" (border bawahnya masih ada, jadi tetap terpisah dari konten oleh garis .tabs
   {border-bottom}). Tab aktif berlatar putih (SAMA dgn --surface, warna latar .card/halaman) dan border-
   bottom-nya DIHAPUS TOTAL (bukan cuma disamarkan warnanya) + digeser turun 1px (margin-bottom:-1px) supaya
   menutupi garis pembatas tepat di bawahnya - efeknya tab aktif terlihat "menyatu"/nempel ke konten di
   bawahnya persis seperti kuping map folder fisik. padding-bottom:10px (bukan 9px spt tab lain) supaya
   tinggi tab aktif tetap sama walau border bawahnya hilang. Ini class SHARED (dipakai ~19 halaman:
   karyawan.php, lembur.php, tugas.php, presensi.php, profil.php, kalender.php, dst) jadi restyle ini
   otomatis berlaku konsisten ke semuanya sekaligus. */
/* overflow-y:hidden WAJIB ditulis eksplisit di sini - kalau cuma overflow-x:auto tanpa overflow-y, browser
   otomatis menghitung overflow-y jadi auto juga (aturan CSS: overflow-x non-visible tanpa overflow-y akan
   membuat overflow-y ikut auto) - akibatnya scrollbar VERTIKAL kecil ikut muncul di ujung kanan tab
   terakhir (kelihatan spt "panah") walau kontennya cuma overflow ke SAMPING, bukan ke bawah. */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:18px;width:fit-content;max-width:100%;overflow-x:auto;overflow-y:hidden}
.tab{padding:9px 20px;font-size:13.5px;font-weight:600;color:var(--text-mute);cursor:pointer;background:var(--surface-alt);border:1px solid var(--border);border-radius:var(--radius-sm) var(--radius-sm) 0 0;white-space:nowrap;transition:background .15s,color .15s}
.tab:hover{color:var(--text)}
.tab.active{color:var(--text);background:var(--surface);border-color:var(--border);border-bottom:none;padding-bottom:10px;margin-bottom:-1px;position:relative;z-index:1}

.pagination{display:flex;gap:6px;justify-content:flex-end;margin-top:14px}
.pagination button{padding:7px 13px;border:1px solid var(--border);background:#fff;border-radius:100px;cursor:pointer;font-size:13px}
.pagination button.active{background:var(--dark);color:#fff;border-color:var(--dark)}
.pagination button:disabled{opacity:.4;cursor:default}
.form-group input[readonly], .form-group textarea[readonly]{background:var(--surface-alt);color:var(--text-mute);cursor:not-allowed}

.empty-state{text-align:center;padding:50px 20px;color:var(--text-mute);animation:pageContentFadeIn .3s ease both}
.loading{text-align:center;padding:40px;color:var(--text-mute);font-size:13.5px}
.loading::before{content:'';display:inline-block;width:16px;height:16px;margin-right:8px;vertical-align:-3px;
  border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Avatar ---------- */
.avatar{border-radius:50%;object-fit:cover;flex-shrink:0}
.avatar-sm{width:32px;height:32px;font-size:12px}
.avatar-md{width:48px;height:48px;font-size:15px}
.avatar-lg{width:84px;height:84px;font-size:24px}
.avatar-placeholder{display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;letter-spacing:.5px;background:var(--accent)}

/* ---------- Profil: photo frame flush top/bottom/left, follows card's own rounded shape ---------- */
.profil-header{display:flex;align-items:stretch;gap:20px;padding:0 20px 0 0;overflow:hidden}
.profil-photo-wrap{position:relative;flex-shrink:0;display:flex}
.profil-photo-frame{width:240px;height:100%;flex-shrink:0;border-radius:var(--radius) 0 0 var(--radius);object-fit:cover;background:var(--surface);display:block}
.profil-photo-placeholder{display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:48px;letter-spacing:.5px;background:var(--accent)}
.profil-photo-edit{position:absolute;bottom:12px;right:12px;width:32px;height:32px;border-radius:50%;background:var(--dark);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 8px rgba(20,16,10,.3);transition:transform .15s}
.profil-photo-edit:hover{transform:scale(1.08)}
/* 2026-08-20 (permintaan user - "tambahkan remove/reset photo pada profile"): tombol hapus foto, sengaja
   ditaruh DI SEBELAH KIRI tombol ganti foto (bukan menimpa) - warna merah menandakan aksi destruktif,
   beda dari .profil-photo-edit yang netral. */
.profil-photo-remove{position:absolute;bottom:12px;right:52px;width:32px;height:32px;border-radius:50%;background:var(--red);color:#fff;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 8px rgba(20,16,10,.3);transition:transform .15s}
.profil-photo-remove:hover{transform:scale(1.08)}
.profil-header-text{padding:20px 0;display:flex;flex-direction:column;justify-content:flex-start;flex:1;min-width:0}
.profil-name-block{padding-bottom:16px;border-bottom:1px solid var(--border);min-width:0}
.profil-name-block>div{max-width:100%}
.profil-jabatan-line{color:var(--text-mute);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.profil-badges-row{margin-top:8px;display:flex;flex-direction:column;gap:5px;font-size:12px}
.profil-badges-row .badge{border-radius:6px;padding:3px 9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box}
.profil-badges-row.profil-badges-meta{flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:14px;row-gap:4px}
.profil-badges-meta .badge-lime{background:transparent;color:var(--text-mute);padding:0;border-radius:0;font-weight:600;white-space:normal;overflow:visible;text-overflow:clip}
@media (max-width:640px){
  .profil-badges-row.profil-badges-meta{flex-direction:column;column-gap:0;row-gap:5px}
}

/* ---------- Profil: rekan satu unit (avatar grid, wrap saat penuh) ---------- */
.tim-unit{margin-top:16px}
.tim-unit-label{font-size:11px;color:var(--text-mute);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
.tim-unit-avatars{display:flex;flex-wrap:wrap;gap:10px;max-height:126px;overflow-y:auto;padding-right:2px}
.tim-unit-avatars::-webkit-scrollbar{width:6px}
.tim-unit-avatars::-webkit-scrollbar-thumb{background:var(--border);border-radius:100px}
.tim-unit-avatar{display:flex;position:relative}
.tim-unit-avatar .avatar{border:2px solid var(--surface);box-shadow:0 1px 4px rgba(20,16,10,.18);cursor:pointer}
.tim-unit-atasan .avatar{border:2px solid var(--accent);box-shadow:0 1px 4px rgba(255,91,61,.35)}
.tim-unit-atasan::after{content:'';position:absolute;top:-2px;right:-2px;width:9px;height:9px;border-radius:50%;background:var(--accent);border:2px solid var(--surface)}

/* ---------- Profil: "Informasi Penting" - reuse feed notifikasi in-app (PKWT akan habis, perpanjangan
   PKWT, penilaian kinerja, dsb) menggantikan grid avatar "Rekan Satu Unit" yg sebelumnya di sini. ---------- */
.info-penting{margin-top:16px}
.info-penting-list{max-height:126px;overflow-y:auto;padding-right:2px}
.info-penting-list::-webkit-scrollbar{width:6px}
.info-penting-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:100px}
.info-penting-item{display:flex;align-items:flex-start;gap:8px;padding:6px 4px;border-radius:var(--radius-sm)}
.info-penting-item.clickable{cursor:pointer;transition:background .12s}
.info-penting-item.clickable:hover{background:var(--surface-alt)}
.info-penting-dot{width:7px;height:7px;border-radius:50%;background:var(--border);margin-top:5px;flex-shrink:0}
.info-penting-dot.unread{background:var(--accent)}
.info-penting-body{min-width:0}
.info-penting-msg{font-size:12.5px;color:var(--text);line-height:1.35}
.info-penting-time{font-size:11px;color:var(--text-mute);margin-top:2px}
.info-penting-empty{color:var(--text-mute);font-size:12.5px;padding:6px 4px}

/* ---------- Profil: kartu "Team Member" (list rekan satu unit, meniru referensi Niond) ---------- */
.team-card{display:flex;flex-direction:column}
/* 2026-08-12: "Rekan Sesama Manager" digabung di kartu yang sama, di atas "Rekan Satu Tim" (bukan
   kartu/grid-item terpisah, supaya nth-child .grid-profil-row-3col & posisi kartu Kalender tidak berubah -
   lihat profil.php). Tiap section dapat porsi tinggi yg sama (flex:1 1 0) & list-nya scroll sendiri2. */
.team-card-section{display:flex;flex-direction:column;min-height:0;flex:1 1 0}
.team-card-section+.team-card-section{margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}
.team-card-section .card-title{font-size:13px;margin-bottom:4px}
.team-card-list{flex:1;min-height:0;overflow-y:auto;padding-right:2px}
.team-card-list::-webkit-scrollbar{width:6px}
.team-card-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:100px}
.team-card-list::-webkit-scrollbar-track{background:transparent}
.team-card-row{display:flex;align-items:center;gap:10px;padding:9px 4px;border-radius:var(--radius-sm);cursor:pointer;transition:background .12s}
.team-card-row:hover{background:var(--surface-alt)}
.team-card-row .avatar{flex-shrink:0}
.team-card-info{flex:1;min-width:0}
.team-card-name{font-size:13.3px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.team-card-role{font-size:11.5px;color:var(--text-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.team-card-row .chevron{color:var(--text-mute);flex-shrink:0}
.team-card-more{text-align:center;font-size:12px;color:var(--text-mute);margin-top:4px}
.team-card-empty{color:var(--text-mute);font-size:12.5px;padding:8px 4px}

.nav-icon svg, .btn svg{display:block}

/* ==========================================================================
   Theme "Gold" (nama class dipertahankan agar tidak perlu ganti HTML di semua
   halaman) — sekarang disamakan dgn aksen hijau mint global (Design System v3,
   mengikuti referensi desain terbaru yang diberikan user). Efek hover-lift
   kartu di bawah ini tetap dipakai di semua halaman yang pakai class ini.
   ========================================================================== */
.theme-gold{--accent:#ad1723;--accent-dark:#69040b;--accent-soft:#f6dee0}
.theme-gold .card{transition:transform .18s ease,box-shadow .18s ease}
.theme-gold .card:hover{transform:translateY(-3px);box-shadow:0 4px 10px rgba(20,16,10,.06),0 18px 34px rgba(20,16,10,.1)}

/* Hero welcome heading */
.hero-welcome{margin-bottom:18px}
.hero-welcome h1{font-size:25px;font-weight:800;letter-spacing:-.02em}
.hero-welcome p{color:var(--text-mute);font-size:13.5px;margin-top:2px}

/* KPI row: kartu pastel lembut (meniru referensi "Niond" - Total/Average Earning, Conversion Rate) */
.kpi-row{display:flex;gap:14px;align-items:stretch;flex-wrap:wrap;margin-bottom:16px}
.stat-pill-group{display:flex;gap:14px;flex-wrap:wrap;flex:1;min-width:260px}
.stat-pill{display:flex;align-items:center;gap:10px;background:var(--pastel-blue);color:var(--pastel-blue-ink);border-radius:var(--radius);padding:14px 14px 14px 18px;min-width:160px;flex:1}
.stat-pill-label{font-size:12px;color:inherit;opacity:.75;white-space:nowrap}
.stat-pill-track{flex:1;height:22px;border-radius:100px;background:rgba(0,0,0,.08);overflow:hidden;min-width:50px}
.stat-pill-fill{height:100%;width:0;border-radius:100px;background:var(--pastel-blue-ink);display:flex;align-items:center;justify-content:flex-end;padding-right:9px;color:#fff;font-size:11px;font-weight:700;white-space:nowrap;transition:width 1.1s cubic-bezier(.22,1,.36,1)}
.counter-group{display:flex;gap:12px;flex-wrap:wrap;flex:1}
/* 2026-08-22 (permintaan user - "kenapa seperti ini designnya, buat seperti lampiran3", lalu "berikan
   icon pada mini card sesuai kebutuhan menunya"): kartu kompak lebar tetap, ikon SEKARANG elemen ASLI
   (.counter-item-icon, bukan ::before kosong lagi) supaya bisa diberi ikon berbeda2 sesuai konteks tiap
   kartu (Kuota/Terpakai/Sisa, dst) - lihat markup di masing2 halaman. Badge di-tint pakai ::before
   background:currentColor terpisah DI BELAKANG svg ikon (svg z-index:1) supaya warna badge otomatis
   ikut warna kartu (nth-child ungu/biru/hijau ATAU inline style semantik hijau/amber/merah yg sudah ada
   di sebagian halaman) tanpa ikut memudarkan ikonnya sendiri. Class ini dipakai banyak halaman (cuti,
   restitusi, sppd, penilaian_saya, pkwt, dst) via HTML yang mirip - 1 perubahan CSS ini otomatis berlaku
   di semua halaman tsb utk bentuk kartu; markup ikon ditambahkan per-halaman sesuai kebutuhan menunya. */
.counter-item{position:relative;display:flex;flex-direction:column;gap:8px;flex:0 0 168px;width:168px;background:var(--surface);color:var(--pastel-purple-ink);border:1px solid var(--border);border-radius:16px;padding:14px;transition:transform .12s,box-shadow .12s}
.counter-item:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(20,16,10,.08)}
.counter-item.clickable,.stat-pill.clickable{cursor:pointer;transition:transform .15s ease,opacity .15s ease,box-shadow .15s ease}
.counter-item.clickable:hover,.stat-pill.clickable:hover{opacity:1;transform:translateY(-2px);box-shadow:0 8px 18px rgba(20,16,10,.08)}
.counter-item.clickable.active{box-shadow:0 0 0 2px currentColor inset}
.stat-pill.clickable.active{box-shadow:0 0 0 2px currentColor inset}
.counter-item-icon{position:relative;width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:inherit;flex-shrink:0;overflow:hidden}
.counter-item-icon::before{content:'';position:absolute;inset:0;background:currentColor;opacity:.15}
.counter-item-icon svg{position:relative;z-index:1}
.counter-item-value{font-size:19px;font-weight:800;line-height:1.1;color:inherit}
.counter-item-label{font-size:11.3px;color:var(--text-mute);line-height:1.3;margin-top:1px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Variasi warna aksen per kartu berurutan (purple/blue/green) - tanpa perlu ubah markup di semua halaman */
.counter-group .counter-item:nth-child(2){color:var(--pastel-blue-ink)}
.counter-group .counter-item:nth-child(3){color:var(--pastel-green-ink)}
@media (max-width:480px){.counter-item{flex:1 1 100%;width:auto}}
.stat-pill-group .stat-pill:nth-child(2){background:var(--pastel-green);color:var(--pastel-green-ink)}
.stat-pill-group .stat-pill:nth-child(2) .stat-pill-fill{background:var(--pastel-green-ink)}

/* Spotlight card: photo fills card, name/role chip float on bottom */
.spotlight-card{position:relative;padding:0;overflow:hidden;min-height:190px;display:flex;align-items:flex-end;background:var(--dark)}
.spotlight-card .spotlight-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;transition:transform .4s ease}
.spotlight-card:hover .spotlight-photo{transform:scale(1.06)}
.spotlight-card::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(21,22,26,.94) 15%,rgba(21,22,26,.2) 78%)}
.spotlight-body{position:relative;z-index:1;padding:16px;color:#fff;display:flex;align-items:center;justify-content:space-between;width:100%;gap:10px}
.spotlight-name{font-weight:700;font-size:14.5px}
.spotlight-role{font-size:11.5px;color:rgba(255,255,255,.65)}
.spotlight-chip{background:var(--lime);color:var(--lime-ink);font-weight:700;font-size:12px;padding:5px 13px;border-radius:100px;white-space:nowrap;flex-shrink:0}

/* Pill-style search/toolbar (Data Karyawan) */
.theme-gold .toolbar select{border:none;box-shadow:var(--shadow)}
.toolbar-search-pill{display:flex;align-items:center;gap:8px;background:var(--surface);box-shadow:var(--shadow);border-radius:100px;padding:0 16px;min-width:240px}
.toolbar-search-pill svg{color:var(--text-mute);flex-shrink:0}
.toolbar-search-pill input{border:none !important;box-shadow:none !important;background:none !important;padding:10px 0 !important;width:100%}

/* Dot-style status badge (matches referensi "● Invited") */
.badge-dot{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600}
.badge-dot::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor;flex-shrink:0}
.badge-dot.dot-green{color:var(--green)}
.badge-dot.dot-red{color:var(--red)}
.badge-dot.dot-gray{color:var(--text-mute)}

/* Baris tabel fade-in halus saat data dimuat */
@keyframes rowFadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.theme-gold tbody tr{animation:rowFadeIn .3s ease both}

@media (max-width: 640px){
  .kpi-row{flex-direction:column;align-items:stretch}
  .counter-group{justify-content:space-between}
}

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0)}
  .main{margin-left:0}
  .menu-toggle{display:block}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .grid-profil-row,.grid-profil-row-3col{grid-template-columns:1fr;grid-template-rows:auto}
  .grid-profil-row-3col>*{grid-column:auto !important;grid-row:auto !important}
  /* 2026-08-12: mobile - kartu "Team Member" tidak lagi dibatasi tinggi grid-row 320+230px (jadi auto),
     jadi tiap section (Rekan Sesama Manager / Rekan Satu Tim) dibatasi max-height sendiri supaya tetap
     scrollable & ringkas, tidak bikin halaman jadi sangat panjang. Kalender TIDAK disentuh (tetap seperti semula). */
  .team-card-section{flex:none}
  .team-card-list{max-height:220px}
  .grid-dash-hero{grid-template-columns:1fr 1.4fr}
  .form-grid{grid-template-columns:1fr}
  .topbar-search{min-width:0;flex:1}
  .ruang-cal-row{flex-direction:column}
  .ruang-cal-row .ruang-mini-cal{width:100%;max-width:none}
  .ruang-agenda{border-left:none;padding-left:0;border-top:1px solid var(--border);padding-top:14px;margin-top:14px;flex-basis:auto}
  /* 2026-08-25 (permintaan user - "bagian kanan frame masih terpotong, buat isi responsif"): jarak
     .modal-overlay & padding .modal dipersempit di layar sempit supaya kartu modal punya lebih banyak
     ruang, dan max-width dipaksa 100% (bukan cuma andalkan width:100%+max-width:720px) sbg jaring
     pengaman ekstra supaya modal TIDAK PERNAH lebih lebar dari layar. overflow-x:hidden di overlay
     jadi jaring pengaman terakhir kalau ada konten anak yang nekat melebar (mis. teks panjang tanpa spasi). */
  .modal-overlay{padding:12px;overflow-x:hidden}
  .modal{max-width:100%}
}
@media (max-width: 520px){
  .grid-4,.grid-2,.grid-3,.grid-profil-row,.grid-profil-row-3col,.grid-dash-hero{grid-template-columns:1fr}
  /* 2026-08-12 (permintaan user, revisi): sempat dicoba jadi bar mengambang tapi .topbar-quick-actions ada
     DI DALAM .topbar yang punya backdrop-filter - itu membuat position:fixed anaknya menempel ke .topbar
     (dekat ATAS halaman), bukan ke viewport, jadi malah menutupi konten atas. Solusinya: sembunyikan versi
     ini di mobile (kembali seperti semula), ganti dgn #mobile-quick-dock (markup TERPISAH di layout_top.php,
     di LUAR .topbar) khusus utk mobile - lihat style-nya di bawah. */
  .content{padding:8px 14px calc(14px + 64px)}
  .topbar{padding:12px 16px;margin:10px 14px 6px}
  .topbar-datepill .dp-txt{display:none}
  .topbar-sholatpill .sp-txt{display:none} /* 2026-08-25: sama pola dgn .dp-txt di atas - sisakan lingkaran ikon saja di mobile */
  .topbar-quick-actions{display:none}
  .topbar-clockpill{display:none}
  /* 2026-08-12 (permintaan user - "transparan & blur PERSIS seperti header"): nilai disamakan 1:1 dgn
     .topbar (background rgba(255,255,255,.1), blur(14px) saturate(150%), border rgba(255,255,255,.35),
     box-shadow var(--shadow)) - hanya posisi/bentuknya beda (dock nempel penuh di bawah, topbar kartu
     melayang di atas), warna kacanya harus identik. */
  .mobile-quick-dock{
    display:flex;justify-content:space-around;align-items:center;position:fixed;left:0;right:0;bottom:0;
    padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px));
    background:rgba(255,255,255,.1);backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%);
    border-top:1px solid rgba(255,255,255,.35);box-shadow:var(--shadow);z-index:70;
  }
  .mobile-quick-dock a{
    display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;
    background:rgba(255,255,255,.55);color:var(--text);flex-shrink:0;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  }
  .mobile-quick-dock a.mqd-zoom{background:rgba(45,140,255,.85);color:#fff}
  /* 2026-08-12 (permintaan user - "tombol signout tertutup dock menu"): dock (z-index:70) menutupi tombol
     Keluar/Ganti Password di bawah sidebar (.sidebar-user) saat drawer sidebar dibuka di mobile - karena
     posisinya sama2 nempel di bawah layar. Sembunyikan dock selagi sidebar terbuka (sidebar & .main adalah
     sibling langsung di dalam .app - lihat includes/layout_top.php), sidebar sendiri sudah punya semua link
     yang sama jadi dock tidak dibutuhkan lagi saat drawer terbuka. */
  .sidebar.open ~ .main .mobile-quick-dock{display:none}
  .notif-dropdown{width:260px;max-width:calc(100vw - 24px);right:-40px;padding:12px}
  .notif-item{padding:9px 6px 9px 12px;gap:8px}
  .notif-item-avatar{width:30px;height:30px;font-size:12px}
  .cal-row{flex-direction:column}
  .cal-row .mini-cal{width:100%;max-width:none;gap:4px}
  /* 2026-08-26 (permintaan user - "keterangan libur disesuaikan ukuran layar jangan terlalu kecil"):
     .cal-row .mini-cal/#kalAgenda sebelumnya pakai ukuran font versi SEMPIT (utk layout 2 kolom
     berdampingan di layar desktop non-mobile, lihat aturan .cal-row di atas) - di mobile kalender sudah
     full-width satu kolom (flex-direction:column di atas) jadi font boleh & harus dibesarkan lagi. */
  .cal-row .mini-cal .mc-dow{font-size:11px}
  .cal-row .mini-cal .mc-day,.cal-row .mini-cal .mc-empty{font-size:13px;border-radius:6px}
  .cal-row .mini-cal .mc-birthday::after{width:4px;height:4px}
  .cal-row #kalAgenda{border-left:none;padding-left:0;border-top:1px solid var(--border);padding-top:10px;margin-top:10px;flex-basis:auto;font-size:12.5px}
  .cal-row .mc-agenda-row{font-size:12.5px;padding:5px 0}

  /* 2026-08-26 v3 (permintaan user - "foto diperbesar mengikuti ukuran frame, bagian bawah digradasi
     putih supaya tulisan kebaca"): v2 pakai tinggi TETAP 200px - sekarang diganti aspect-ratio (4/3)
     supaya foto ikut membesar mengikuti lebar frame/kartu (makin lebar layar HP, foto makin tinggi jg,
     proporsional - bukan angka tetap lagi). Gradasi diganti dari GELAP jadi PUTIH (via ::after di photo-
     wrap, BUKAN di panel teks lagi) supaya teks yg nangkring di atasnya pakai warna GELAP normal (bukan
     putih) - blend mulus ke background kartu putih di bawahnya (Pesan Terbaru). */
  .profil-header{flex-direction:column;padding:0;border-radius:var(--radius);overflow:hidden}
  .profil-photo-wrap{width:100%;aspect-ratio:4/3;height:auto;position:relative}
  .profil-photo-frame{width:100%;height:100%;border-radius:0}
  .profil-photo-placeholder{font-size:52px}
  /* Scrim putih menempel di bagian BAWAH foto (bukan di panel teks) - "to top" berarti stop 0% ada di
     BAWAH kotak: putih pekat di bawah, memudar transparan ke arah atas foto. */
  .profil-photo-wrap::after{
    content:'';position:absolute;left:0;right:0;bottom:0;height:78%;pointer-events:none;
    background:linear-gradient(to top, rgba(255,255,255,.98) 0%, rgba(255,255,255,.82) 45%, rgba(255,255,255,0) 100%);
  }
  .profil-photo-edit{top:10px;bottom:auto;right:10px;width:30px;height:30px;z-index:3}
  .profil-photo-remove{top:10px;bottom:auto;right:46px;width:30px;height:30px;z-index:3}
  .profil-header-text{padding:0 14px 14px}
  /* Panel salam+nama+jabatan+badge ditarik naik (margin-top negatif) supaya nangkring di atas scrim
     putih tsb - TANPA background/panel sendiri lagi (cukup mengandalkan scrim putih di belakangnya,
     yg render duluan krn .profil-photo-wrap lebih dulu di urutan dokumen), teks jadi warna GELAP normal
     (var(--text)/var(--text-mute) bawaan class, tidak perlu override putih lagi). */
  .profil-header-text .profil-name-block{position:relative;z-index:2;margin-top:-86px;padding:0 2px}
  /* Pesan Terbaru di bawah foto, background terang normal spt biasa. */
  .profil-header-text .info-penting{margin-top:14px}
}

/* 2026-08-26 v2 (permintaan user - "mobile tetap pakai mode awal, tapi frame login diperbesar mengikuti
   aspect ratio device, tulisan footer tetap ada"): versi FULL SCREEN sebelumnya (edge-to-edge, tanpa
   shadow/radius, footer dipindah jadi bar fixed) DIBATALKAN - kembali ke mode kartu melayang ASLI
   (rounded, shadow, .login-footer di posisi normalnya/absolute bawah .login-body - TIDAK disentuh sama
   sekali di sini, otomatis balik ke perilaku aslinya krn blok override-nya dihapus). Yang berubah HANYA
   ukuran kartu - dibesarkan dari max-width:304px (kecil banget di layar HP modern) memakai vw/vh supaya
   proporsinya ikut menyesuaikan rasio layar device (HP lebar & tinggi dapat ukuran kartu beda,
   bukan angka mati). */
@media (max-width:520px){
  .login-card{width:92vw;max-width:440px;min-height:58vh;min-height:58dvh;display:flex;flex-direction:column;justify-content:center}
  .login-card-content{padding:36px 26px}
  /* Mode foto quick-login sebelumnya py tinggi tetap 464px (min-height) - disesuaikan jadi persentase
     tinggi layar (vh) supaya kartu foto jg ikut membesar/mengecil mengikuti rasio device, bukan angka
     tetap yg bisa kelihatan kependekan di HP layar tinggi atau kepanjangan di HP layar pendek. */
  .login-card-photo .login-card-content{min-height:64vh;min-height:64dvh}
  /* 2026-08-29 (permintaan user - "buat frame lebih tinggi, footer tetap terlihat, background fit/
     stretch tinggi halaman di mode mobile"): kartu login dikasih tinggi minimum (di atas) supaya lebih
     mengisi layar (tidak kecil "mengambang"). Background dipaksa stretch penuh (bukan cover/crop) biar
     benar2 mengisi tinggi halaman di layar mobile yang rasionya jauh lebih tinggi dari gambar aslinya. */
  .login-bg-blur{background-size:100% 100%}
}

/* ==== Slip Gaji (Template) ==== */
/* width/padding disamakan pola A4 + margin 2cm seperti dokumen cetak lain (lihat includes/pkwt_render.php)
   supaya pratinjau layar = hasil print persis. */
.slip-gaji-doc{position:relative;background:#fff;color:#1a1a1a;border:1.5px solid #222;padding:20mm;font-size:13px;width:210mm;min-height:297mm;margin:0 auto;overflow:hidden}
.sg-watermark{position:absolute;top:50%;left:50%;width:160%;transform:translate(-50%,-50%) rotate(-30deg);transform-origin:center;text-align:center;font-size:30px;font-weight:800;letter-spacing:.15em;color:rgba(0,0,0,.07);white-space:nowrap;line-height:1;z-index:50;pointer-events:none;user-select:none}
.sg-header{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:2px solid #222;padding-bottom:10px}
.sg-header-left{display:flex;align-items:center;gap:10px}
.sg-logo{height:40px;max-width:120px;object-fit:contain}
.sg-company-name{font-weight:800;font-size:16px;letter-spacing:.02em}
.sg-confidential{font-size:10.5px;color:#888;text-align:right;max-width:220px;font-weight:600}
.sg-regno{text-align:right;font-size:11px;color:#666;margin-top:6px}
.sg-title{text-align:center;margin:10px 0 14px}
.sg-title-main{font-weight:800;font-size:17px;letter-spacing:.03em}
.sg-title-sub{font-size:12.5px;color:#555;margin-top:2px}
.sg-infogrid{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;margin-bottom:10px}
.sg-info-col{width:100%;border-collapse:collapse;font-size:12.5px}
.sg-info-col td{padding:2.5px 6px 2.5px 0;vertical-align:top}
.sg-info-col td:first-child{color:#666;white-space:nowrap;width:1%}
.sg-info-col td:nth-child(2){font-weight:600}
.sg-npwp{font-size:12.5px;margin:6px 0 14px}
.sg-section-title{background:#efefef;font-weight:700;font-size:12px;letter-spacing:.05em;padding:6px 10px;margin-bottom:10px}
.sg-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;text-align:center;margin-bottom:6px}
.sg-summary div{display:flex;flex-direction:column;gap:2px}
.sg-summary span{font-size:11px;color:#666}
.sg-summary b{font-size:14px}
.sg-terbilang{text-align:center;font-style:italic;font-size:12px;color:#444;margin-bottom:16px}
.sg-detail-head{display:grid;grid-template-columns:1fr 1fr;gap:24px;font-weight:700;font-size:12px;border-bottom:1.5px solid #222;padding-bottom:4px;margin-bottom:4px}
.sg-detail-body{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.sg-col{width:100%;border-collapse:collapse;font-size:12.5px}
.sg-col td{padding:4px 0;border-bottom:1px dotted #ddd}
.sg-num{text-align:right;font-weight:600}
.sg-jumlah{display:grid;grid-template-columns:1fr 1fr;gap:24px;font-weight:700;font-size:12.5px;border-top:1.5px solid #222;margin-top:4px;padding-top:6px}
.sg-jumlah div:last-child{text-align:right}
.sg-footer{display:flex;justify-content:space-between;align-items:flex-start;margin-top:22px;padding-top:12px;border-top:1px solid #ccc;font-size:12px}
.sg-note-label{color:#888;font-size:11px}
.sg-zakat{margin-top:14px;font-size:11.5px;color:#555;background:#faf7ec;border:1px dashed #d8c98a;padding:8px 10px;border-radius:4px}
.sg-catatan{margin-top:10px;font-size:11.5px;color:#555;white-space:pre-line}
/* PENTING: "body *{visibility:hidden}" di bawah ini di-scope KHUSUS ke halaman yang benar2 punya
   .slip-gaji-doc (pakai :has()) - sebelumnya TANPA scope ini, aturan itu berlaku di SEMUA halaman yang
   memuat style.css (termasuk halaman cetak lain spt cetak_pkwt.php/cetak_pkwt_perpanjangan.php yang
   TIDAK punya .slip-gaji-doc), bikin SELURUH dokumennya ikut disembunyikan saat print -> tampil blank
   putih total. Trik "body *{visibility:hidden}" ini memang perlu utk slip_gaji.php (halaman dgn
   sidebar/topbar app, supaya cuma slip yg ke-print), tapi harus dibatasi hanya utk halaman itu. */
@media print{
  body:has(.slip-gaji-doc) *{visibility:hidden}
  body:has(.slip-gaji-doc) .slip-gaji-doc, body:has(.slip-gaji-doc) .slip-gaji-doc *{visibility:visible}
  .slip-gaji-doc{position:absolute;left:0;top:0;border:none;margin:0}
  .no-print{display:none!important}
}

/* Dokumen PKWT (Perjanjian Kerja Waktu Tertentu) - lihat includes/pkwt_render.php.
   Tiap ".pkwt-page" berukuran persis A4 (210x297mm, margin 2cm/20mm semua sisi - sama dengan @page di
   cetak_pkwt.php) supaya tampilan REVIEW di layar identik (WYSIWYG) dengan hasil print/simpan PDF.
   Jumlah & isi tiap halaman dihitung DINAMIS oleh skrip pagination di akhir render_pkwt_html() (lihat
   komentar di sana), bukan di-hardcode. Footer tiap halaman pakai grid 3 kolom: kiri kosong (penyeimbang)
   - tengah "Halaman N dari TOTAL" - kanan kotak paraf PIHAK 1/2, supaya kedua elemen berdampingan di
   baris footer yang sama tanpa saling menimpa. */
.pkwt-doc{background:#e8e8e8;display:flex;flex-direction:column;align-items:center;gap:14px;padding:14px 0}
.pkwt-doc *{box-sizing:border-box}
/* SENGAJA BUKAN display:flex - kombinasi flex + CSS columns (.pkwt-columns) dikenal bikin Chrome
   menghitung tinggi kolom BEDA antara render layar biasa vs render print/PDF (flex-resolved height
   tidak konsisten diteruskan ke multi-column context saat print), yang bikin 1 halaman logis meluber
   jadi berhalaman-halaman cuma pas di-print (padahal di layar pas 1 halaman). Tanpa flex, .pkwt-page-body
   & .pkwt-columns di dalamnya pakai perhitungan tinggi block-flow standar yang SAMA persis di layar & print.
   Footer (.pkwt-page-footer) sebagai gantinya di-pin ke dasar halaman via position:absolute. */
.pkwt-page{background:#fff;color:#1a1a1a;font-size:11px;line-height:1.5;text-align:justify;
  width:210mm;min-height:297mm;padding:20mm;box-shadow:0 1px 6px rgba(0,0,0,.25);
  position:relative}
.pkwt-page-body{padding-bottom:24px}
.pkwt-header{margin-bottom:6px}
.pkwt-logo{height:38px;max-width:100%;object-fit:contain}
/* font-size di sini & beberapa selector .pkwt-* di bawah (nomor/pasal/ayat-no/sub-no) SENGAJA pakai "em"
   (relatif thd .pkwt-page-body yg basisnya 11px), BUKAN px absolut - supaya shrink-to-fit dinamis
   (lihat pg.body.style.fontSize di includes/pkwt_render.php) ikut mengecilkan SEMUA elemen ini secara
   proporsional. Kalau px absolut, elemen ini TIDAK ikut mengecil walau body-nya di-shrink (font-size
   px tidak terpengaruh font-size ancestor), bikin halaman yg di-shrink tetap meluber di bagian ini. */
.pkwt-title{text-align:center;font-size:1.273em;font-weight:700;letter-spacing:.4px;text-decoration:underline;margin-bottom:4px}
.pkwt-nomor{text-align:center;font-size:1.091em;font-weight:600;margin-bottom:14px}
.pkwt-intro{margin-bottom:6px}
.pkwt-para{margin:0 0 10px}
.pkwt-id-block{display:flex;gap:8px;margin-bottom:4px}
.pkwt-id-roman{flex:0 0 16px;font-weight:700}
.pkwt-id-rows{flex:1;min-width:0}
.pkwt-id-row{display:flex;gap:6px;flex-wrap:wrap}
.pkwt-id-label{flex:0 0 130px}
.pkwt-id-colon{flex:0 0 8px}
.pkwt-id-value{flex:1;min-width:120px}
/* Jumlah Pasal per ".pkwt-columns" sekarang ditentukan JS (lihat skrip pagination di pkwt_render.php)
   berdasarkan tinggi render sesungguhnya, jadi cukup "balance" saja disini. */
.pkwt-columns{column-count:2;column-gap:26px;column-fill:balance}
.pkwt-pasal{font-size:1.091em;font-weight:700;text-align:center;margin:12px 0 6px;break-after:avoid}
/* SENGAJA BUKAN break-inside:avoid-column - beberapa ayat (mis. Pasal 6 ayat 1) berisi daftar
   bersub-huruf panjang (10+ item); kalau dipaksa tidak boleh terpotong kolom, 1 blok itu jadi
   ratusan mm tak terbagi & bikin algoritma balance kolom membuang banyak ruang kosong (bug lama:
   1 halaman preview bisa melar sampai >400mm). Wajar & umum di dokumen legal kalau 1 ayat terpotong
   pindah kolom/halaman selama teksnya tetap utuh & berurutan (tidak ada baris kepotong di tengah). */
.pkwt-ayat{display:flex;gap:5px;margin-bottom:7px}
.pkwt-ayat-no{flex:0 0 24px;font-size:0.955em;color:#333}
.pkwt-ayat-txt{flex:1;min-width:0}
.pkwt-sub{display:flex;gap:5px;margin:5px 0 0 22px}
.pkwt-sub-no{flex:0 0 14px;font-size:0.955em}
.pkwt-sub-txt{flex:1;min-width:0}
.pkwt-dash{display:flex;gap:6px;margin:4px 0 0 14px}
.pkwt-dash-no{flex:0 0 8px}
.pkwt-closing{column-span:all;margin-top:16px}
.pkwt-ttd-row{display:flex;flex-wrap:wrap;justify-content:space-between;text-align:center;margin-top:22px;padding:0 30px;gap:12px}
/* width dipersempit dari 45% -> 37% (sengaja) supaya ada ruang kosong cukup lebar (~40mm) persis di
   tengah antara kedua kolom TTD untuk tempat e-Materai (lihat api/pkwt_emeterai_api.php) - materai resmi
   perlu ruang yang cukup supaya QR/serial-nya tetap terbaca, 16mm (lebar gap sebelumnya) terlalu sempit. */
.pkwt-ttd-col{width:37%;min-width:150px}
/* 2026-08-19 (permintaan user - "perbesar ukuran esign 50%"): 70px->105px, sinkron dgn .pkwt-esign-img
   di bawah (66px->99px) - naik proporsional bareng supaya gambar E-Sign tidak terpotong/kepentok kotaknya.
   2026-08-20a (permintaan user - "perbesar 100%..."): sempat dinaikkan dobel (99px->198px) - ternyata
   KETERLALUAN, tandatangan sampai menutupi label "PIHAK PERTAMA," di atasnya.
   2026-08-20b (permintaan user - "kurangi esign 50%, turunkan posisi esign 20%, naikkan text nama 30%"):
   gambar dikembalikan ke 99px (separuh dari 198px), lalu digeser TURUN 20% dari tinggi gambar sendiri via
   transform (tidak mengubah tinggi kotak, tidak ikut mempengaruhi ukuran box pagination) supaya tetap
   sedikit menyentuh nama tanpa menutup label di atas. */
.pkwt-ttd-space{height:140px;display:flex;align-items:flex-end;justify-content:center;overflow:visible}
/* Ruang tandatangan utama PKWT (Pihak Pertama/Kedua) HANYA menampilkan gambar E-Sign polos, TANPA
   stempel/watermark teks apapun (beda dgn kotak paraf kecil per halaman, lihat .pkwt-paraf-stamp). */
/* 2026-08-20e (permintaan user - "turunkan posisi esign 20%, posisi nama naikkan 20%"): tambahan
   turun 20% dari netto -60% -> netto -40% naik dari posisi asli.
   2026-08-20f (permintaan user - "perbesar esign 20%"): 99px -> 119px.
   2026-08-20h (permintaan user - "turunkan posisi esign 10%, perbesar esign 10%"): -40%->-30% turun,
   119px->131px besar.
   2026-08-20i (permintaan user - "ganti pendekatan": persen dari tinggi elemen sendiri hasilnya nyaris
   tak kelihatan/tidak konsisten -> pindah ke satuan px tetap = 3x font-size dasar dokumen (11px -> 33px),
   jauh lebih jelas & mudah diprediksi. "turunkan 3 karakter font" + "perbesar 10%" -> 131px->144px besar,
   translateY 33px turun.
   2026-08-20j (permintaan user - "naikkan posisi esign 2 karakter font"): 33px - 22px(2x11px) = 11px.
   2026-08-20k (permintaan user - "naikkan posisi esign 2 karakter font" lagi): 11px - 22px(2x11px) = -11px
   (sekarang NEGATIF - esign naik sedikit MELEWATI posisi dasar/original, bukan cuma mengurangi turunnya). */
.pkwt-esign-img{display:block;max-height:144px;max-width:90%;object-fit:contain;transform:translateY(-11px)}
/* 2026-08-20e: tambahan naik 20% lagi dari netto -110% -> netto -130% naik dari posisi asli.
   2026-08-20g (permintaan user - "naikkan posisi nama di pkwt 30%"): tambahan naik 30% lagi -> netto -160%.
   2026-08-20h (permintaan user - "naikkan posisi nama 30% lagi"): -160% -> -190%.
   2026-08-20i (permintaan user - "ganti pendekatan", pindah ke satuan px tetap = 3x font-size dasar
   dokumen (11px -> 33px) - lihat .pkwt-esign-img di atas utk alasan lengkap). */
.pkwt-ttd-col > b:last-child{display:inline-block;transform:translateY(-33px)}
/* E-Sign generik (gambar tanda tangan + watermark "Approved by system") dipakai halaman cetak lain
   (SPPD, Cuti, Restitusi, Surat Tugas dst, lihat render_stempel_approval() di functions.php) - PKWT
   sengaja TIDAK memakai watermark ini di ruang tandatangan utamanya (lihat .pkwt-esign-img di atas). */
.esign-wrap{display:block;width:100%;height:100%}
.esign-wrap img{display:block;margin:0 auto;max-height:106px;max-width:100%;object-fit:contain}
.esign-watermark,.esign-textbadge{position:absolute;left:50%;bottom:4px;transform:translateX(-50%);font-size:10px;line-height:1.4;text-align:center;font-weight:700;letter-spacing:.3px;color:rgba(190,30,30,.75);border:1px solid rgba(190,30,30,.75);border-radius:4px;padding:5px 10px;white-space:nowrap;pointer-events:none;background:rgba(255,255,255,.75)}
/* Footer per halaman: grid 3 kolom - spacer kiri (penyeimbang visual) - teks halaman di TENGAH -
   kotak paraf di KANAN BAWAH. align-items:end supaya sejajar di baris dasar footer yang sama.
   position:absolute (bukan lagi ikut flex .pkwt-page) - lihat catatan di .pkwt-page di atas. Inset
   20mm supaya sejajar dgn padding .pkwt-page (footer selalu menempel dasar halaman fisik). */
.pkwt-page-footer{position:absolute;left:20mm;right:20mm;bottom:20mm;display:grid;grid-template-columns:1fr auto 1fr;align-items:end;padding-top:8px}
.pkwt-page-footer-spacer{}
.pkwt-page-footer-text{text-align:center;font-size:10px;color:#333}
/* width:auto WAJIB di-override eksplisit - ada aturan global "table{width:100%}" (style.css) yang
   kalau tidak dilawan bikin kotak paraf kecil ini melebar penuh dan selnya jadi berantakan. */
.pkwt-paraf-table{justify-self:end;width:auto;margin:0;border-collapse:collapse;border:1px solid #333;font-size:9px}
.pkwt-paraf-table td{border:1px solid #333;padding:4px 16px;height:18px;min-width:46px;text-align:center;white-space:nowrap}
.pkwt-paraf-table td.pkwt-paraf-approved{white-space:normal;padding:2px 6px}
/* 2026-08-20a: sekarang 3 baris (APPROVE BY SYSTEM/NIK/waktu, sama pola dgn .pkwt-paraf-stamp-hc di bawah) -
   font & max-width disamakan dgn stamp-hc supaya tetap muat di kotak paraf sempit, warna hijau dipertahankan.
   2026-08-20b (permintaan user - "samakan ukuran stamp", box Pihak1/2 kelihatan beda besar krn panjang
   teks NIK/tanggal beda-beda per dokumen, max-width dulu bikin salah satu bisa wrap ke baris ke-4 &
   jadi lebih tinggi): width DIPAKSA sama persis (bukan max-width lagi) via .pkwt-paraf-stamp-base di
   bawah supaya kedua kotak SELALU sama ukuran fisiknya apapun isi tekstnya. */
.pkwt-paraf-stamp,.pkwt-paraf-stamp-hc{display:inline-block;width:58px;box-sizing:border-box;font-size:4.8px;line-height:1.35;font-weight:700;letter-spacing:.1px;border-radius:3px;padding:2px 3px;transform:rotate(-6deg);text-transform:uppercase;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:clip}
.pkwt-paraf-stamp{color:#0a7a2f;border:1.2px solid #0a7a2f}
/* 2026-08-19: stempel paraf Pihak 1 (Manager HC "mengetahui") - 3 baris (INITIALED BY / NIK / tgl+jam). */
.pkwt-paraf-stamp-hc{color:#0a5ea8;border:1.2px solid #0a5ea8}
/* "screen and" WAJIB di sini - tanpa itu, media query ini juga match saat PRINT (lebar 1 halaman A4
   ~794px, di bawah 900px), jadi ikut memaksa tampilan mobile (1 kolom, dimensi halaman dibuang) ke
   hasil print/PDF, padahal query ini harusnya cuma utk layar HP/tablet kecil. */
@media screen and (max-width:900px){
  .pkwt-page{width:100%;min-height:0;padding:16px;box-shadow:none}
  .pkwt-columns{column-count:1}
  .pkwt-id-label{flex-basis:110px}
  .pkwt-ttd-row{padding:0}
  .pkwt-ttd-col{width:100%}
  .pkwt-page-footer{grid-template-columns:1fr auto;grid-template-areas:"text paraf"}
  .pkwt-page-footer-spacer{display:none}
  .pkwt-page-footer-text{grid-area:text;text-align:left}
  .pkwt-paraf-table{grid-area:paraf}
}
@media print{
  .pkwt-doc{background:#fff;padding:0;gap:0}
  /* Reassert eksplisit (bukan cuma andalkan aturan dasar di atas) supaya dimensi & layout kolom
     PASTI identik dgn pratinjau layar (desktop) - defensif thd media query lain yg bisa saja
     ikut match saat print (lihat kasus ".pkwt-columns{column-count:1}" yang sempat bocor ke print). */
  .pkwt-page{width:210mm;min-height:297mm;padding:20mm;box-shadow:none;margin:0;page-break-after:always;break-after:page;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .pkwt-page:last-child{page-break-after:auto;break-after:auto}
  .pkwt-columns{column-count:2;column-gap:26px;column-fill:balance}
  .pkwt-ttd-row{padding:0 30px}
  .pkwt-ttd-col{width:37%}
  .pkwt-page-footer{grid-template-columns:1fr auto 1fr}
  .pkwt-page-footer-spacer{display:block}
  .pkwt-page-footer-text{text-align:center}
  .no-print{display:none!important}
}

/* ==== Request Driver: pencarian lokasi + peta ==== */
.loc-field{position:relative}
.loc-suggest{display:none;position:absolute;left:0;right:0;top:100%;z-index:20;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow);max-height:220px;overflow-y:auto;margin-top:2px}
.loc-suggest-item{padding:9px 12px;font-size:12.5px;cursor:pointer;border-bottom:1px solid var(--border)}
.loc-suggest-item:last-child{border-bottom:none}
.loc-suggest-item:hover{background:var(--accent-soft)}
.loc-hint{font-size:11px;color:var(--text-mute);margin-top:4px}

/* ==== Popup Avatar: list menu (mis. "Instruksi Lembur") ==== */
.avatar-menu{border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden}
.avatar-menu-item{padding:13px 14px;font-size:13.5px;font-weight:600;cursor:pointer;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.avatar-menu-item:last-child{border-bottom:none}
.avatar-menu-item:hover{background:var(--accent-soft)}
.avatar-menu-item::after{content:'›';color:var(--text-mute);font-size:16px}

.wf-stage{border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px;background:var(--surface-alt);cursor:default}
.wf-stage.wf-dragging{opacity:.4}
.wf-stage.wf-dragover{border-color:var(--accent)}
.wf-stage-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.wf-drag{cursor:grab;color:var(--text-mute);font-size:15px;user-select:none}
.wf-urutan{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-size:11.5px;font-weight:700;flex-shrink:0}
.wf-nama{flex:1;min-width:160px;padding:8px 11px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:13.5px;font-weight:600;background:#fff}
.wf-field-jabatan,.wf-field-divisi,.wf-field-nik{display:none}
.loc-hint a{font-weight:600}
.loc-map-wrap{position:relative;margin-top:8px}
.loc-map{width:100%;height:220px;border-radius:var(--radius-lg);border:1px solid var(--border);box-shadow:0 2px 10px rgba(20,16,10,.06),0 14px 32px rgba(20,16,10,.09);overflow:hidden;filter:saturate(1.05)}
.loc-map .leaflet-control-attribution{display:none!important}
.loc-map .leaflet-control-zoom{border:none!important;box-shadow:0 4px 14px rgba(20,16,10,.14)!important;border-radius:12px!important;overflow:hidden;margin:0 10px 10px 0!important}
.loc-map .leaflet-control-zoom a{border-radius:0!important;width:30px!important;height:30px!important;line-height:30px!important;color:var(--text)!important;border-bottom:1px solid var(--border)!important}
.loc-map .leaflet-control-zoom a:last-child{border-bottom:none!important}
.loc-map .leaflet-control-zoom a:hover{background:var(--accent-soft)!important;color:var(--accent-dark)!important}

.loc-gps-badge{display:inline-flex;align-items:center;gap:6px;margin-left:8px;padding:2px 10px 2px 8px;border-radius:100px;font-size:10.5px;font-weight:600;background:var(--surface-alt);color:var(--text-mute);vertical-align:middle}
.loc-gps-dot{width:7px;height:7px;border-radius:50%;background:var(--text-mute);flex-shrink:0}
.loc-gps-badge.loc-gps-loading{background:var(--accent-soft);color:var(--accent-dark)}
.loc-gps-badge.loc-gps-loading .loc-gps-dot{background:var(--accent);animation:locBlink 1s infinite}
.loc-gps-badge.loc-gps-locked{background:var(--green-soft);color:var(--green)}
.loc-gps-badge.loc-gps-locked .loc-gps-dot{background:var(--green)}
.loc-gps-badge.loc-gps-error{background:var(--red-soft);color:var(--red)}
.loc-gps-badge.loc-gps-error .loc-gps-dot{background:var(--red)}
.loc-gps-badge.loc-gps-manual{background:var(--amber-soft);color:var(--amber)}
.loc-gps-badge.loc-gps-manual .loc-gps-dot{background:var(--amber)}
@keyframes locBlink{0%,100%{opacity:1}50%{opacity:.25}}

.loc-map-fab{position:absolute;top:10px;right:10px;z-index:15;width:34px;height:34px;border-radius:50%;border:none;background:var(--surface);color:var(--accent);box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .12s}
.loc-map-fab:hover{transform:scale(1.08)}

.loc-pulse-marker{position:relative;width:22px;height:22px;display:flex;align-items:center;justify-content:center}
.loc-pulse-dot{width:12px;height:12px;border-radius:50%;background:#2563eb;border:2px solid #fff;box-shadow:0 0 0 1px rgba(37,99,235,.4);z-index:2}
.loc-pulse-ring{position:absolute;width:22px;height:22px;border-radius:50%;background:rgba(37,99,235,.35);animation:locPulseRing 1.8s ease-out infinite}
@keyframes locPulseRing{0%{transform:scale(.4);opacity:1}100%{transform:scale(1.8);opacity:0}}

.loc-pin-marker{width:26px;height:34px;position:relative}
.loc-pin-marker::before{content:'';position:absolute;left:3px;top:0;width:20px;height:20px;border-radius:50% 50% 50% 0;background:var(--accent);transform:rotate(-45deg);box-shadow:0 2px 6px rgba(0,0,0,.25)}
.loc-pin-marker::after{content:'';position:absolute;left:9px;top:6px;width:8px;height:8px;border-radius:50%;background:#fff}

/* ================= Dokumentasi Aplikasi (dokumentasi.php) - FAQ/panduan internal per segmen alur ================= */
.doc-toc{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 4px}
.doc-toc a{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;padding:5px 12px 5px 5px;border-radius:100px;background:none;border:1px solid var(--border);color:var(--text-mute);text-decoration:none;transition:border-color .15s,color .15s,background .15s}
.doc-toc a:hover{border-color:transparent;background:var(--accent-soft);color:var(--accent-dark)}
.doc-toc-num{width:18px;height:18px;border-radius:50%;background:var(--surface-alt);color:var(--text-mute);font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s,color .15s}
.doc-toc a:hover .doc-toc-num{background:var(--accent);color:#fff}
.doc-segment{scroll-margin-top:110px;padding-top:6px}
.doc-segment + .doc-segment{margin-top:26px;border-top:1px solid var(--border);padding-top:26px}
.doc-segment-head{display:flex;align-items:center;gap:12px;margin-bottom:4px}
.doc-segment-icon{flex-shrink:0;width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;background:var(--accent-soft);color:var(--accent-dark)}
.doc-segment-num{font-size:11px;font-weight:700;color:var(--text-mute);letter-spacing:.04em}
.doc-segment h2{margin:2px 0 0;font-size:18px}
.doc-segment-intro{color:var(--text-mute);font-size:13px;margin:8px 0 0;line-height:1.6}

/* Flowchart sederhana: kotak tahap + panah, murni CSS (bukan gambar/canva) - ringan & konsisten tema. */
.flow{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:18px 0;opacity:0;transform:translateY(10px);transition:opacity .5s,transform .5s}
.flow.in-view{opacity:1;transform:translateY(0)}
.flow-step{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;min-width:104px;padding:10px 12px;border-radius:14px;background:var(--surface-alt);opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s}
.flow.in-view .flow-step{opacity:1;transform:translateY(0)}
.flow.in-view .flow-step:nth-child(3){transition-delay:.08s}
.flow.in-view .flow-step:nth-child(5){transition-delay:.16s}
.flow.in-view .flow-step:nth-child(7){transition-delay:.24s}
.flow.in-view .flow-step:nth-child(9){transition-delay:.32s}
.flow-step-icon{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.05);color:var(--text-mute)}
.flow-step-label{font-size:11.5px;font-weight:700;color:var(--text)}
.flow-step-sub{font-size:10px;color:var(--text-mute)}
.flow-step.start .flow-step-icon{background:var(--accent);color:#fff}
.flow-step.approve .flow-step-icon{background:var(--amber);color:#fff}
.flow-step.warn .flow-step-icon{background:var(--red);color:#fff}
.flow-step.end .flow-step-icon{background:var(--green);color:#fff}
.flow-arrow{flex-shrink:0;display:flex;align-items:center;color:var(--text-mute);opacity:.6;animation:flowArrowPulse 1.4s ease-in-out infinite}
@keyframes flowArrowPulse{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
@media (max-width:700px){.flow{flex-direction:column;align-items:stretch}.flow-step{min-width:0}.flow-arrow{transform:rotate(90deg);align-self:center}}

.doc-rule-card{display:flex;gap:12px;background:var(--surface-alt);border-radius:14px;padding:14px 16px;margin:12px 0}
.doc-rule-card-icon{flex-shrink:0;font-size:18px}
.doc-rule-card b{display:block;font-size:13px;margin-bottom:3px}
.doc-rule-card p{margin:0;font-size:12.5px;color:var(--text-mute);line-height:1.6}
.doc-rule-card.warn{background:var(--red-soft)}
.doc-rule-card.warn b{color:var(--red)}
.doc-rule-card.tip{background:var(--accent-soft)}
.doc-rule-card.tip b{color:var(--accent-dark)}


/* ================= Broadcast running text (informasi.php "Start Broadcast") - tampil di atas SEMUA halaman ================= */
.broadcast-ticker{display:none;position:sticky;top:0;z-index:60;background:rgba(255,255,255,0);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);color:var(--orange);align-items:center;gap:10px;padding:7px 0;overflow:hidden;white-space:nowrap}
.broadcast-ticker.show{display:flex}
.broadcast-ticker-icon{flex-shrink:0;margin-left:18px;display:flex;align-items:center;animation:flowArrowPulse 1.4s ease-in-out infinite}
.broadcast-ticker-track{display:inline-block;white-space:nowrap;padding-left:100%;animation:tickerScroll 32s linear infinite}
.broadcast-ticker-track:hover{animation-play-state:paused}
.broadcast-ticker-track a{color:inherit;text-decoration:none;font-weight:500;font-size:12.5px;margin-right:56px}
.broadcast-ticker-track a b{font-weight:700}
.broadcast-ticker-track a:hover{text-decoration:underline}
.broadcast-ticker-attach{display:inline-flex;align-items:center;margin-left:5px;opacity:.75;vertical-align:-2px}

/* ================= AI Agent "HC Integra Assistant" (FAB + mini chat) - lihat includes/layout_top.php ================= */
.ai-fab{position:fixed;z-index:90;display:flex;align-items:center;gap:10px;cursor:grab;user-select:none}
.ai-fab.dragging{cursor:grabbing}
.ai-fab.dragging .ai-fab-bubble{display:none}
.ai-fab-btn{width:56px;height:56px;border-radius:50%;border:none;background:var(--red);color:#fff;box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:transform .15s}
.ai-fab-btn:hover{transform:scale(1.06)}
.ai-fab-bubble{background:var(--orange-soft);color:var(--text);padding:10px 14px;border-radius:14px 14px 14px 4px;border:1px solid var(--border);box-shadow:0 2px 6px rgba(15,25,20,.08),0 8px 20px rgba(15,25,20,.07);font-size:12px;font-weight:600;max-width:190px;line-height:1.4;animation:aiBubbleFloat 3s ease-in-out infinite}
.ai-fab.chat-open .ai-fab-bubble{display:none}
@keyframes aiBubbleFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

.ai-chat-panel{display:none;position:fixed;z-index:95;width:340px;max-width:calc(100vw - 24px);height:480px;max-height:calc(100vh - 110px);background:var(--surface);border-radius:20px;box-shadow:var(--shadow);flex-direction:column;overflow:hidden}
.ai-chat-panel.open{display:flex}
.ai-chat-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:var(--accent);color:#fff;flex-shrink:0}
.ai-chat-avatar{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ai-chat-title{font-size:13px;font-weight:700}
.ai-chat-sub{font-size:10.5px;opacity:.85}
.ai-chat-close{background:none;border:none;color:#fff;cursor:pointer;display:flex;padding:5px;border-radius:50%}
.ai-chat-close:hover{background:rgba(255,255,255,.18)}
.ai-chat-body{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;background:var(--surface-alt)}
.ai-msg{max-width:85%;padding:9px 12px;border-radius:14px;font-size:12.5px;line-height:1.55;white-space:normal}
.ai-msg-bot{align-self:flex-start;background:var(--surface);box-shadow:var(--shadow);border-bottom-left-radius:4px}
.ai-msg-user{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:4px}
.ai-msg-link{display:inline-block;margin-top:4px;font-size:11px;font-weight:700;color:var(--accent-dark);text-decoration:none}
.ai-menu-row{display:flex;flex-wrap:wrap;gap:6px}
.ai-menu-btn{font-size:10.5px;font-weight:600;padding:6px 11px;border-radius:100px;border:1px solid var(--border);background:var(--surface);color:var(--text-mute);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.ai-menu-btn:hover{background:var(--accent-soft);color:var(--accent-dark);border-color:transparent}
.ai-chat-typing{align-self:flex-start;display:flex;gap:3px;padding:11px 14px;background:var(--surface);border-radius:14px;border-bottom-left-radius:4px;box-shadow:var(--shadow)}
.ai-chat-typing span{width:6px;height:6px;border-radius:50%;background:var(--text-mute);animation:aiTypingDot 1.2s infinite}
.ai-chat-typing span:nth-child(2){animation-delay:.15s}
.ai-chat-typing span:nth-child(3){animation-delay:.3s}
@keyframes aiTypingDot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.ai-chat-input-row{display:flex;gap:8px;padding:12px;border-top:1px solid var(--border);background:var(--surface);flex-shrink:0}
.ai-chat-input-row input{flex:1;border:1px solid var(--border);border-radius:100px;padding:9px 14px;font-size:12.5px;outline:none;background:var(--surface-alt);min-width:0}
.ai-chat-input-row input:focus{border-color:var(--accent)}
.ai-chat-send{width:36px;height:36px;border-radius:50%;border:none;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
@media (max-width:480px){.ai-fab-bubble{display:none}.ai-chat-panel{width:calc(100vw - 24px)}}
@keyframes tickerScroll{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}
@media (max-width:700px){.broadcast-ticker-icon{margin-left:10px}}

/* Kalender Jadwal Shift (jadwal_shift.php) - responsif mobile (2026-08-11, permintaan user): di layar
   sempit sel tanggal disederhanakan jadi cuma angka tanggal + titik indikator kecil (menandai ada berapa
   karyawan terjadwal, tanpa detail nama/shift penuh) - klik tanggal TETAP membuka modal Kelola Jadwal yang
   sudah ada (pilih shift, ubah, hapus, dst) persis seperti di desktop, tidak ada perubahan fungsi. */
.js-cal-mobile-dot{display:none}
@media (max-width:640px){
  #jsCalGrid{gap:3px}
  .js-cal-cell{min-height:36px!important;padding:4px 2px!important;display:flex;flex-direction:column;align-items:center;justify-content:center}
  .js-cal-cell .js-cal-daynum{font-size:12px}
  .js-cal-detail{display:none}
  .js-cal-mobile-dot{display:flex;gap:2px;margin-top:3px;flex-wrap:wrap;justify-content:center;max-width:100%}
  .js-cal-mobile-dot span{width:5px;height:5px;border-radius:50%;flex:none}
}

/* Kalender Shift - scroll horizontal di layar sempit (2026-08-11, revisi permintaan user: "buat kalendar
   shift ini bisa di geser/skrol namun tetap di dalam frame, sehingga tampilan tidak berantakan"). Berlaku
   utk KEDUA kalender shift: #jsCalGrid (jadwal_shift.php, tampilan KARO/ASMAN/Manager/Admin) & #jysCalGrid
   (jadwal_saya.php, tampilan self-service karyawan - INI yang dilaporkan berantakan, chip "Saya"/status
   pengisi/chip rekan perlu tetap terbaca penuh, jadi TIDAK dipadatkan/disembunyikan spt #jsCalGrid, cukup
   digeser). Sel mempertahankan lebar nyaman (grid dipaksa min-width, kolom 1fr terbagi rata di dalamnya) -
   kalau lebar layar kurang, wrapper-nya (id ...Scroll) yang jadi area geser/scroll, BUKAN halaman
   keseluruhan - jadi kartu kalender tetap rapi "di dalam frame"-nya sendiri. Tidak berlaku >640px (desktop
   sama sekali tidak berubah). */
@media (max-width:640px){
  #jsCalGridScroll,#jysCalGridScroll{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px}
  #jsCalGrid,#jysCalGrid{min-width:630px}
}