/* Si ELANG — Administrative HR Blue skin v3 (full variable + dark) */
:root{
  --hr-primary:#2563EB;
  --hr-primary-deep:#1E3A8A;
  --hr-primary-soft:#EFF6FF;
  --hr-border:#DBEAFE;
  --hr-border-soft:#EEF2F7;
  --hr-border-inp:#CBD5E1;
  --hr-bg:#F8FAFC;
  --hr-surface:#FFFFFF;
  --hr-text:#0F172A;
  --hr-text-sec:#334155;
  --hr-muted:#475569;
  --hr-subtle:#94A3B8;
  --hr-neutral:#64748B;
  --hr-teal:#0F766E;
  --hr-teal-soft:#CCFBF1;
  --hr-success:#16A34A;
  --hr-success-soft:#DCFCE7;
  --hr-warning:#D97706;
  --hr-warning-soft:#FEF3C7;
  --hr-danger:#DC2626;
  --hr-danger-soft:#FEE2E2;
  --hr-info:#0284C7;
  --hr-info-soft:#E0F2FE;
  --navy:var(--hr-primary);
  --navy-mid:#3B82F6;
  --navy-lite:#BFDBFE;
  --navy-bg:var(--hr-primary-soft);
  --gold:var(--hr-neutral);
  --gold-lite:#E2E8F0;
  --gold-bg:#F1F5F9;
  --gold-dark:var(--hr-muted);
  --teal:var(--hr-teal);
  --teal-bg:var(--hr-teal-soft);
  --amber:var(--hr-warning);
  --amber-lite:var(--hr-warning-soft);
  --amber-bg:#FFFBEB;
  --red:var(--hr-danger);
  --red-lite:var(--hr-danger-soft);
  --green:var(--hr-success);
  --green-bg:var(--hr-success-soft);
  --bg:var(--hr-bg);
  --white:var(--hr-surface);
  --border:var(--hr-border);
  --border-s:var(--hr-border-soft);
  --text:var(--hr-text);
  --muted:var(--hr-muted);
  --hint:var(--hr-subtle);
  --sb-bg:#FFFFFF;
  --sb-bg2:#F8FAFC;
  --sb-active-bg:var(--hr-primary-soft);
  --sb-active-accent:var(--hr-primary);
  --sb-text:var(--hr-muted);
  --sb-text-hi:var(--hr-text);
  --sb-border:#E2E8F0;
  --r:10px;
  --rl:12px;
  --rx:16px;
  --sidebar:234px;
  --card-bg:var(--hr-surface);
  --shadow-xs:0 1px 2px rgba(15,23,42,.05);
  --shadow-sm:0 8px 22px rgba(15,23,42,.08);
  --shadow-md:0 18px 42px rgba(15,23,42,.12);
}

body{background:var(--hr-bg);color:var(--hr-text);font-size:13.5px;letter-spacing:0}
#app{background:linear-gradient(180deg,var(--hr-bg) 0%,#F1F5F9 100%)}
#content{padding:24px 28px;background:transparent}

/* ════════════ SIDEBAR ════════════ */
#sidebar{background:var(--hr-surface);border-right:1px solid var(--sb-border);box-shadow:1px 0 0 rgba(15,23,42,.02)}
.sb-logo{padding:16px 16px 14px;border-bottom:1px solid var(--hr-border-soft);background:var(--hr-surface)}
.sb-logo-mark{background:var(--hr-primary-soft);border:1px solid var(--hr-border);border-radius:12px}
.sb-sielang{font-family:'DM Sans',system-ui,sans-serif;font-size:13px;letter-spacing:.9px;color:var(--hr-text)}
.sb-sielang span{color:var(--hr-primary)}
.sb-inst{color:var(--hr-neutral);font-size:10px}
.sb-nav{padding:10px 8px}
.sb-sec{padding:16px 10px 6px;color:var(--hr-subtle);font-size:10px;font-weight:800;letter-spacing:.08em}
.sb-item{margin:2px 0;padding:9px 11px;border-left:0;border-radius:10px;color:var(--hr-muted);font-size:12.5px;font-weight:600;gap:10px}
.sb-item:hover{background:var(--hr-bg);color:var(--hr-text);border-left-color:transparent}
.sb-item.active{background:var(--hr-primary-soft);color:var(--hr-primary);border-left-color:transparent;box-shadow:inset 0 0 0 1px var(--hr-border)}
.sb-ic{opacity:.68;color:currentColor}
.sb-item.active .sb-ic{opacity:1}
.sb-bdg,.sb-bdg-w{border-radius:999px;padding:2px 7px;font-size:10px;background:var(--hr-primary);color:#fff;font-weight:700}
.sb-bdg-w{background:var(--hr-warning)}
.sb-foot{border-top:1px solid var(--hr-border-soft);background:var(--hr-surface);padding:12px 14px}
.sb-av{background:var(--hr-primary-soft);border-color:var(--hr-border);color:var(--hr-primary)}
.sb-uname{color:var(--hr-text)}
.sb-urole,.sb-uatasan{color:var(--hr-neutral)}
.ham-btn{z-index:120;top:14px;left:12px;width:32px;height:32px;border-radius:10px;background:var(--hr-surface);border:1px solid var(--hr-border);display:none;cursor:pointer}
.sidebar-overlay{z-index:99;display:none;position:fixed;inset:0;background:rgba(15,23,42,.45)}
.sidebar-overlay.active{display:block}

/* ════════════ TOPBAR ════════════ */
#topbar{height:60px;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--hr-border);box-shadow:none;padding:0 26px}
#topbar::after{display:none}
.tb-title{font-size:14px;color:var(--hr-primary-deep);font-weight:800;letter-spacing:0}
.tb-sub,.tb-date{color:var(--hr-neutral);font-size:10.5px}
.tb-ver{background:var(--gold-bg);color:var(--hr-muted);border-color:var(--hr-border)}
.tb-notif{background:var(--hr-bg);border:1px solid var(--hr-border);border-radius:11px;color:var(--hr-muted);width:35px;height:35px;display:flex;align-items:center;justify-content:center}
.tb-notif:hover{background:var(--hr-primary-soft);border-color:var(--hr-border);color:var(--hr-primary)}
.tb-dot{background:var(--hr-danger);border-color:var(--hr-surface)}

/* ════════════ CARD ════════════ */
.card,.cfb,.modal{background:var(--hr-surface);border:1px solid var(--hr-border);border-radius:16px;box-shadow:0 1px 3px rgba(15,23,42,.05);transition:box-shadow .15s}
.card:hover{box-shadow:0 4px 12px rgba(15,23,42,.06)}
.card{padding:18px}
.ct{font-size:15px;font-weight:800;color:var(--hr-text);margin-bottom:12px;letter-spacing:-.01em}
.ph{margin-bottom:22px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pt,.page-title{font-size:22px;font-weight:850;color:var(--hr-text);letter-spacing:-.02em;line-height:1.2}
.pst,.page-sub{color:var(--hr-neutral);font-size:12.5px;margin-top:3px}

/* ════════════ BUTTON ════════════ */
.btn{border-radius:10px;font-weight:700;min-height:36px;box-shadow:none;letter-spacing:0;padding:7px 16px;font-size:12.5px;font-family:'DM Sans',system-ui,sans-serif;display:inline-flex;align-items:center;gap:5px;transition:all .12s;cursor:pointer;border:none}
.btn svg{width:15px;height:15px}
.bp,.bs{background:var(--hr-primary);color:#fff;box-shadow:0 8px 18px rgba(37,99,235,.18)}
.bp:hover,.bs:hover{background:var(--hr-primary-deep);box-shadow:0 10px 22px rgba(37,99,235,.24);transform:translateY(-1px)}
.bd{background:var(--hr-danger);color:#fff}.bd:hover{background:#B91C1C}
.bo{background:var(--hr-surface);color:var(--hr-muted);border:1px solid var(--hr-border)}
.bo:hover{background:var(--hr-bg);color:var(--hr-primary);border-color:var(--hr-border)}
.bpu{background:var(--hr-teal);color:#fff}.bpu:hover{background:#0B5F59}
.bsm{padding:5px 11px;font-size:11px;min-height:30px}.bxs{padding:3px 9px;font-size:10px;min-height:26px}
.btn:disabled,.btn.busy{opacity:.5;pointer-events:none;transform:none!important;box-shadow:none!important}
.btn:focus-visible{outline:3px solid rgba(37,99,235,.18);outline-offset:1px}
.btn-da{padding:6px 12px;border-radius:10px;border:none;font-weight:700;font-size:11px;cursor:pointer}
.btn-da.acc{background:var(--hr-success-soft);color:#166534}.btn-da.acc:hover{background:#BBF7D0}
.btn-da.tol{background:var(--hr-danger-soft);color:#991B1B}.btn-da.tol:hover{background:#FECACA}

/* ════════════ FORM ════════════ */
.fi,.fs,.fta,.si-inp{border:1px solid var(--hr-border-inp);border-radius:11px;background:var(--hr-surface);color:var(--hr-text);box-shadow:0 1px 1px rgba(15,23,42,.02);padding:0 12px;height:40px;font-size:13px;font-family:'DM Sans',system-ui,sans-serif}
.fi:focus,.fs:focus,.fta:focus,.si-inp:focus{border-color:var(--hr-primary);outline:none;box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.fta{padding:10px 12px;height:auto;min-height:80px;resize:vertical}
.fl{color:var(--hr-text-sec);font-weight:700;font-size:11.5px;text-transform:none;letter-spacing:.01em;margin-bottom:6px;display:block}
.req{color:var(--hr-danger);margin-left:2px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:600px){.g2{grid-template-columns:1fr}}

/* ════════════ ALERT ════════════ */
.alert{border-radius:14px;border:1px solid transparent;padding:12px 14px;line-height:1.45;font-size:12.5px}
.a-inf{background:var(--hr-primary-soft);color:var(--hr-primary-deep);border-color:var(--hr-border)}
.a-ok{background:var(--hr-success-soft);color:#166534;border-color:#BBF7D0}
.a-warn{background:var(--hr-warning-soft);color:#92400E;border-color:#FDE68A}
.a-err{background:var(--hr-danger-soft);color:#991B1B;border-color:#FECACA}

/* ════════════ BADGE ════════════ */
.bdg{border-radius:999px;padding:4px 9px;font-size:11px;font-weight:700;border:1px solid transparent;white-space:nowrap;display:inline-block}
.b-ok{background:var(--hr-success-soft);color:#166534;border-color:#BBF7D0}
.b-err{background:var(--hr-danger-soft);color:#991B1B;border-color:#FECACA}
.b-warn{background:var(--hr-warning-soft);color:#92400E;border-color:#FDE68A}
.b-inf{background:var(--hr-info-soft);color:#075985;border-color:#BAE6FD}
.b-tl{background:var(--hr-teal-soft);color:#115E59;border-color:#99F6E4}
.b-gray{background:#F1F5F9;color:var(--hr-muted);border-color:#E2E8F0}
.b-or{background:#FFEDD5;color:#9A3412;border-color:#FED7AA}
.b-pu{background:#EDE9FE;color:#5B21B6;border-color:#DDD6FE}

/* ════════════ TABLE ════════════ */
table{border-collapse:separate;border-spacing:0;width:100%}
th{background:var(--hr-bg);color:var(--hr-neutral);border-bottom:1px solid #E2E8F0;font-size:10.5px;font-weight:850;letter-spacing:.06em;padding:11px 13px;text-transform:uppercase}
td{border-bottom:1px solid var(--hr-border-soft);color:var(--hr-text-sec);padding:12px 13px;font-size:12.5px;vertical-align:middle}
tr:hover td{background:var(--hr-bg)}.tr-alt td{background:#FCFCFD}
.tw{border-radius:14px;border:1px solid var(--hr-border);background:var(--hr-surface);overflow-x:auto;-webkit-overflow-scrolling:touch}
.tw table thead th{background:var(--hr-bg);color:var(--hr-neutral);border-bottom:1px solid #E2E8F0;position:sticky;top:0}
/* ── M-6: hardening overflow tabel ──────────────────────────────
   Tabel data sudah scroll horizontal via .tw. Tambahan pengaman:
   - string sangat panjang tanpa spasi (token/URL/NIP nyambung) di-break
     supaya tidak memaksa lebar tabel tak terbatas / bocor ke luar layout;
   - .cell-ell : utility opsional untuk truncate kolom nama/teks panjang
     dengan ellipsis (dipakai di kolom yang rawan panjang). */
#content table td{overflow-wrap:break-word;word-break:break-word}
.cell-ell{max-width:240px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ════════════ STEPPER ════════════ */
.stepper-cuti{background:var(--hr-bg);border:1px solid var(--hr-border);border-radius:12px;padding:8px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.stepper-cuti .step{font-size:10.5px;color:var(--hr-neutral);display:inline-flex;align-items:center;gap:4px}
.stepper-cuti .step.done,.stepper-cuti .step.active{color:var(--hr-primary);font-weight:700}
.stepper-cuti .num{background:#E2E8F0;color:var(--hr-muted);border-radius:50%;width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;font-size:9px;font-weight:800}
.stepper-cuti .step.done .num,.stepper-cuti .step.active .num{background:var(--hr-primary);color:#fff}
.stepper-cuti .line{height:2px;background:#E2E8F0;flex:1;min-width:16px;margin:0 2px}.stepper-cuti .line.done{background:var(--hr-primary)}

/* ════════════ TOAST ════════════ */
.toast{border-radius:14px;box-shadow:0 18px 40px rgba(15,23,42,.18);font-weight:700;font-size:12.5px;padding:14px 18px;max-width:360px;bottom:24px;right:24px;z-index:99999}
.t-ok{background:#166534;color:#fff}.t-err{background:#991B1B;color:#fff}
.t-warn{background:#92400E;color:#fff}.t-inf{background:#075985;color:#fff}

/* ════════════ EMPTY & LOADING ════════════ */
.empty{color:var(--hr-neutral);background:var(--hr-bg);border:1px dashed var(--hr-border-inp);border-radius:14px;padding:32px 24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:13px}
.empty svg{width:32px;height:32px;opacity:.45}
.skel-wrap{padding:24px}
.skel{background:linear-gradient(90deg,#E2E8F0 25%,#F1F5F9 50%,#E2E8F0 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:12px}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skel-title{height:28px;width:240px;margin-bottom:20px}
.skel-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:18px}
.skel-card{height:80px}.skel-block{height:40px;margin-bottom:10px}

/* ════════════ MODAL ════════════ */
.modal{border-radius:18px;padding:0;overflow:hidden}
.mh{padding:18px 22px 14px;border-bottom:1px solid var(--hr-border);font-size:16px;font-weight:850;color:var(--hr-text);background:var(--hr-surface)}
.mb{padding:20px 22px;color:var(--hr-text-sec);font-size:13px}
.mf{padding:14px 22px 18px;border-top:1px solid var(--hr-border-soft);display:flex;justify-content:flex-end;gap:8px;background:var(--hr-surface)}
#mo{background:rgba(15,23,42,.45);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}

/* ════════════ CONFIRM ════════════ */
.cfb{border-radius:18px;padding:30px 28px;width:420px;max-width:92vw;text-align:center}
#cfm{font-size:13px;line-height:1.5;margin:12px 0 16px;color:var(--hr-text-sec)}
#cfo-ok,.btn#cfo-ok{margin-right:8px;min-width:80px}

/* ════════════ DASHBOARD ════════════ */
.dash-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:20px}
.dash-card-hd{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--hr-border-soft);font-size:13px;font-weight:800;color:var(--hr-text)}
.kpi-box{background:var(--hr-surface);border:1px solid var(--hr-border);border-radius:16px;padding:18px;display:flex;align-items:center;gap:16px}
.kpi-box .kpi-icon{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--hr-primary-soft)}
.kpi-box .kpi-val{font-size:28px;font-weight:850;line-height:1.1;color:var(--hr-text)}
.kpi-box .kpi-lbl{font-size:11.5px;color:var(--hr-neutral);margin-top:2px}
.gantt-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--hr-border);border-radius:14px;background:var(--hr-surface);padding:14px}
.dash-row{border-bottom:1px solid var(--hr-border-soft)}
.dash-row:last-child{border-bottom:none}
.dash-actions{display:flex;gap:6px}
.dash-row td{padding:10px 13px}

/* ════════════ MONITORING UNIT ════════════ */
.mu-card{background:var(--hr-surface);border:1px solid var(--hr-border);border-radius:16px;padding:16px}

/* ════════════ TAB BAR ════════════ */
.tab-bar{display:flex;gap:6px;margin-bottom:16px;background:var(--hr-surface);padding:4px;border-radius:12px;border:1px solid var(--hr-border)}
.tab-btn{padding:8px 16px;border-radius:10px;border:none;background:transparent;color:var(--hr-muted);font-weight:700;font-size:12px;cursor:pointer;font-family:'DM Sans',system-ui,sans-serif;transition:all .1s;white-space:nowrap}
.tab-btn.active{background:var(--hr-primary);color:#fff;box-shadow:0 4px 10px rgba(37,99,235,.18)}
.tab-btn:hover:not(.active){background:var(--hr-bg);color:var(--hr-text)}

/* ════════════ SEARCH BAR ════════════ */
.si-bar{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.si-inp{flex:1;min-width:160px;height:38px;padding:0 14px}
.si-inp::placeholder{color:var(--hr-subtle)}

/* ════════════ AVATAR ════════════ */
.av{width:40px;height:40px;border-radius:50%;background:var(--hr-primary-soft);border:1.5px solid var(--hr-border);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;color:var(--hr-primary);flex-shrink:0}
.av-n{width:38px;height:38px}

/* ════════════ BANNER ════════════ */
.dbn{background:var(--hr-primary-soft);border:1px solid var(--hr-border);border-radius:14px;padding:14px 16px;display:flex;gap:12px;align-items:flex-start;margin-bottom:16px}
.dbn svg{width:22px;height:22px;flex-shrink:0;color:var(--hr-primary)}

/* ════════════ NOTIFICATION PAGE ════════════ */
.notif-item{display:flex;gap:12px;padding:14px 16px;border-bottom:1px solid var(--hr-border-soft);cursor:pointer;transition:background .1s}
.notif-item:hover{background:var(--hr-bg)}

/* ════════════ GANTT LEGEND ════════════ */
.gantt-lg-item{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--hr-muted);margin-right:14px}
.gantt-lg-sw{width:12px;height:12px;border-radius:4px;display:inline-block}

/* ════════════ LOGIN ════════════ */
#ls-left{background:radial-gradient(120% 90% at 20% 10%,#1E3A8A 0%,#0F2240 55%,#0B172C 100%)}
.ls-brand-text h2{font-family:'DM Sans',system-ui,sans-serif;letter-spacing:2px;font-size:22px;font-weight:800;color:#EFF6FF}
.ls-brand-text p{font-size:12px;color:#93C5FD;margin-top:6px;line-height:1.5}
.ls-brand-inst{font-size:11px;color:#93C5FD;margin-top:10px;font-weight:600}
#ls-btn{background:linear-gradient(90deg,#1D4ED8 0%,#1E40AF 100%);border-radius:10px;box-shadow:0 8px 20px rgba(29,78,216,0.25);height:46px;font-size:13px;border:none;color:#fff;cursor:pointer;font-weight:800;letter-spacing:1.5px}
#ls-btn.loading .ls-td{opacity:0}.ls-input{border-radius:10px;border-color:var(--hr-border-inp);height:44px}
.ls-label{font-size:12px;font-weight:700;color:var(--hr-text-sec)}


/* ════════════ RESPONSIVE ════════════ */
@media(max-width:768px){
  #content{padding:16px;overflow-x:hidden}
  #topbar{padding:0 14px;height:56px}
  #topbar .tb-date{font-size:10px;padding:4px 8px;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .pt,.page-title{font-size:19px}
  .card{padding:14px;border-radius:14px}
  .btn{min-height:38px;font-size:12px}
  .ph{align-items:flex-start;flex-direction:column}
  .tw{max-width:100%;width:100%}
  .tw table{min-width:480px}
  .dash-grid{grid-template-columns:1fr}
  .gantt-wrap{overflow-x:auto}
  .tab-bar{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;gap:4px}
  .tab-btn{white-space:nowrap;padding:7px 12px;font-size:11.5px}
  .si-inp{min-width:120px}
  .stepper-cuti .line{min-width:10px}
  .kpi-box .kpi-val{font-size:24px}
  .ham-btn{display:flex!important}
  #sidebar{position:fixed!important;transform:translateX(-100%)!important;transition:transform .25s ease!important;z-index:120!important;box-shadow:none!important}
  #sidebar.mobile-open{transform:translateX(0)!important;box-shadow:12px 0 40px rgba(0,0,0,.18)!important}

  #main{width:100%}
}
@media(max-width:480px){
  .tw table{min-width:380px}
  .card{padding:12px;border-radius:12px}
  .kpi-box .kpi-val{font-size:22px}
  .kpi-box{flex-direction:column;text-align:center;gap:8px}
}
@media(min-width:769px){
  .ham-btn,.sidebar-overlay{display:none!important}
  #sidebar{position:relative!important;transform:translateX(0)!important}
}
@media print{
  #sidebar,#topbar,.np,.btn,.toast,.tb-notif,.ham-btn,.sidebar-overlay{display:none!important}
  .tw{border:none;background:transparent;box-shadow:none}
  #content{padding:0!important;overflow:visible}
}

/* ══════════════════════════════════════════════════════════════════
   Design polish v1 — PRD_REDESIGN.md (12 Jul 2026)
   Satu blok agar mudah di-review/revert. Urutan: ikon lonceng (R2),
   feedback tekan (R3), focus ring (R4), angka tabular (R5), login (R6),
   tipografi & scrollbar & reduced-motion (R8).
   ══════════════════════════════════════════════════════════════════ */

/* ── R2: lonceng notifikasi SVG ── */
.tb-notif{font-family:inherit;padding:0;cursor:pointer}
.tb-notif svg{width:16px;height:16px;flex-shrink:0}
/* Ada notifikasi belum dibaca → bell filled merah + tint latar
   (badge angka #ndot + denyut tbNotifPulse dari main.css tetap jalan) */
.tb-notif.has-unread{color:var(--hr-danger);background:var(--hr-danger-soft);border-color:#FECACA}
.tb-notif.has-unread:hover{background:#FECACA;color:#B91C1C;border-color:#FCA5A5}
.tb-notif.has-unread svg{fill:currentColor}
/* Goyang sekali saat notif baru masuk (class .ring dipasang notif.js) */
@keyframes bellSwing{0%,100%{transform:rotate(0)}20%{transform:rotate(14deg)}40%{transform:rotate(-12deg)}60%{transform:rotate(8deg)}80%{transform:rotate(-6deg)}}
.tb-notif.ring svg{animation:bellSwing .6s ease;transform-origin:top center}

/* ── R3: feedback tombol ditekan ── */
.btn:active:not(:disabled):not(.busy){transform:translateY(1px);box-shadow:none}
.tab-btn:active,.dash-tab:active,.btn-da:active,.dmtab:active{transform:scale(.96)}

/* ── R4: focus ring keyboard (hanya :focus-visible — klik mouse tanpa ring) ── */
.sb-item:focus-visible{outline:2px solid var(--hr-primary);outline-offset:-2px;border-radius:10px}
.tb-notif:focus-visible,.sb-out:focus-visible,.mc:focus-visible,.tab-btn:focus-visible,.dash-tab:focus-visible{outline:2px solid var(--hr-primary);outline-offset:2px}

/* ── R5: angka tabular — kolom angka sejajar di tabel/KPI ── */
td,.kpi-v,.kpi-box .kpi-val,.dstat-v,.lkv,.nilai-num,.ub-hadir-num,.tb-date{font-variant-numeric:tabular-nums}

/* ── R6: layar login — panel kiri diberi kedalaman, garis pembatas ikut palet biru ── */
#ls-left{background:radial-gradient(120% 90% at 20% 10%,#27459B 0%,#1E3A8A 45%,#16255F 100%)}
.ls-rule{border-top-color:rgba(147,197,253,.3)}

/* ── R8: tipografi ── */
.pt,.page-title,.ct,.mt,.cft{text-wrap:balance}
.pst,.page-sub,.cfm{text-wrap:pretty}

/* ── R8: scrollbar tipis (versi light dari pola dark mode yang dihapus) ── */
#content,.tw,.sb-nav{scrollbar-width:thin;scrollbar-color:rgba(100,116,139,.3) transparent}
#content::-webkit-scrollbar,.tw::-webkit-scrollbar,.sb-nav::-webkit-scrollbar{width:8px;height:8px}
#content::-webkit-scrollbar-track,.tw::-webkit-scrollbar-track,.sb-nav::-webkit-scrollbar-track{background:transparent}
#content::-webkit-scrollbar-thumb,.tw::-webkit-scrollbar-thumb,.sb-nav::-webkit-scrollbar-thumb{background:rgba(100,116,139,.25);border-radius:4px}
#content::-webkit-scrollbar-thumb:hover,.tw::-webkit-scrollbar-thumb:hover,.sb-nav::-webkit-scrollbar-thumb:hover{background:rgba(100,116,139,.4)}

/* ── R8: hormati preferensi "kurangi animasi" (fallback login di main.css tetap ada) ── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ══════════════════════════════════════════════════════════════════
   Design polish v2 — Kalender lebih interaktif (12 Jul 2026)
   ══════════════════════════════════════════════════════════════════ */

/* ── Kalender Cuti: sel tanggal bisa diklik (showKalDay) ── */
.kd:not(.emp){cursor:pointer;transition:box-shadow .15s}
.kd:not(.emp):focus-visible{outline:2px solid var(--hr-primary);outline-offset:-2px}

/* ── Air Datepicker: titik penanda hari libur + warna akhir pekan ──
   -weekend- adalah class bawaan library (tidak diberi warna oleh CSS vendor);
   -holiday- ditandai manual via onRenderCell (app.js initFP) dari data
   api/hari_libur.php. */
.air-datepicker-cell.-weekend-:not(.-other-month-){color:var(--hr-danger,#DC2626);opacity:.8}
.air-datepicker-cell.-holiday-{position:relative}
.air-datepicker-cell.-holiday-::after{content:'';position:absolute;left:50%;bottom:3px;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:var(--hr-danger,#DC2626)}
.air-datepicker-cell.-holiday-.-selected-::after{background:#fff}

/* ══════════════════════════════════════════════════════════════════
   DARK MODE (dipulihkan 12 Agu 2026) — dipicu atribut `data-theme="dark"`
   di <html>, diset inline di index.php (anti-flash) + toggleTheme() di
   theme.js. Menimpa seluruh variabel skin v3 + warna light yang di-hardcode.
   ══════════════════════════════════════════════════════════════════ */
[data-theme="dark"]{
  color-scheme:dark;
  --hr-primary:#60A5FA;
  --hr-primary-deep:#93C5FD;
  --hr-primary-soft:#172554;
  --hr-border:#1E293B;
  --hr-border-soft:#1E293B;
  --hr-border-inp:#334155;
  --hr-bg:#0F172A;
  --hr-surface:#1E293B;
  --hr-text:#F1F5F9;
  --hr-text-sec:#CBD5E1;
  --hr-muted:#94A3B8;
  --hr-subtle:#64748B;
  --hr-neutral:#94A3B8;
  --hr-teal:#5EEAD4;
  --hr-teal-soft:#042F2E;
  --hr-success:#4ADE80;
  --hr-success-soft:#052E16;
  --hr-warning:#FBBF24;
  --hr-warning-soft:#3A2C07;
  --hr-danger:#F87171;
  --hr-danger-soft:#3F0D0D;
  --hr-info:#38BDF8;
  --hr-info-soft:#0C3B56;
  --navy:var(--hr-primary);
  --navy-mid:#3B82F6;
  --navy-lite:#1E3A8A;
  --navy-bg:var(--hr-primary-soft);
  --gold:var(--hr-neutral);
  --gold-lite:#334155;
  --gold-bg:#1E293B;
  --gold-dark:var(--hr-muted);
  --teal:var(--hr-teal);
  --teal-bg:var(--hr-teal-soft);
  --amber:var(--hr-warning);
  --amber-lite:var(--hr-warning-soft);
  --amber-bg:#3A2C07;
  --red:var(--hr-danger);
  --red-lite:var(--hr-danger-soft);
  --green:var(--hr-success);
  --green-bg:var(--hr-success-soft);
  --purple:#A78BFA;
  --purple-bg:#2E1065;
  --purple-lite:#4C1D95;
  --bg:var(--hr-bg);
  --white:var(--hr-surface);
  --border:var(--hr-border);
  --border-s:var(--hr-border-soft);
  --text:var(--hr-text);
  --muted:var(--hr-muted);
  --hint:var(--hr-subtle);
  --sb-bg:#111827;
  --sb-bg2:#0F172A;
  --sb-active-bg:rgba(96,165,250,.15);
  --sb-active-accent:#60A5FA;
  --sb-text:#94A3B8;
  --sb-text-hi:#F1F5F9;
  --sb-border:#1E293B;
  --card-bg:var(--hr-surface);
  --shadow-xs:0 1px 2px rgba(0,0,0,.4);
  --shadow-sm:0 8px 22px rgba(0,0,0,.4);
  --shadow-md:0 18px 42px rgba(0,0,0,.5);
}

/* ── Dark: override warna light yang masih di-hardcode ── */
[data-theme="dark"] #app{background:linear-gradient(180deg,var(--hr-bg) 0%,#0F172A 100%)}
[data-theme="dark"] #topbar{background:rgba(15,23,42,.85);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
[data-theme="dark"] .tr-alt td{background:#182234}
[data-theme="dark"] .tb-notif.has-unread:hover{background:#3F0D0D;color:#FCA5A5;border-color:#7F1D1D}
[data-theme="dark"] .b-gray{background:#334155;color:#CBD5E1;border-color:#475569}
[data-theme="dark"] .b-or{background:#431407;color:#FDBA74;border-color:#7C2D12}
[data-theme="dark"] .b-pu{background:#2E1065;color:#C4B5FD;border-color:#4C1D95}
[data-theme="dark"] .stepper-cuti .num{background:#334155;color:#CBD5E1}
[data-theme="dark"] .stepper-cuti .line{background:#334155}
[data-theme="dark"] .skel{background:linear-gradient(90deg,#1E293B 25%,#0F172A 50%,#1E293B 75%);background-size:200% 100%}
[data-theme="dark"] th{border-bottom-color:#334155}
[data-theme="dark"] .tw table thead th{border-bottom-color:#334155}
[data-theme="dark"] td{border-bottom-color:#263449}
[data-theme="dark"] .toast{box-shadow:0 18px 40px rgba(0,0,0,.55)}
[data-theme="dark"] .sidebar-overlay{background:rgba(0,0,0,.55)}

/* Badge/aksi status berwarna terang di modal (btn-da acc/tol) */
[data-theme="dark"] .btn-da.acc{background:#052E16;color:#86EFAC}
[data-theme="dark"] .btn-da.acc:hover{background:#14532D}
[data-theme="dark"] .btn-da.tol{background:#3F0D0D;color:#FCA5A5}
[data-theme="dark"] .btn-da.tol:hover{background:#7F1D1D}

/* ── Hardcoded backgrounds from main.css ── */
[data-theme="dark"] .modal,
[data-theme="dark"] .mh,
[data-theme="dark"] .mf,
[data-theme="dark"] .cfb,
[data-theme="dark"] .aksi-td{background:var(--hr-surface)}
[data-theme="dark"] .th-sticky-r{background:var(--hr-bg)!important;color:var(--hr-neutral)!important}
[data-theme="dark"] .peg-tbl tbody tr:hover .aksi-td{background:#24304A}
[data-theme="dark"] .aksi-td .aksi-group{background:#16203A;border:1px solid #2A3854}
[data-theme="dark"] .ls-dots span{background:var(--hr-primary)}

/* ── Kalender & Unit chips ── */
[data-theme="dark"] .kd.wkd, [data-theme="dark"] .kd.kd-wkd{background:#141C2B}
[data-theme="dark"] .kd.kd-hl-nasional, [data-theme="dark"] .hl-nasional{background:#3F0D0D;border-color:#7F1D1D}
[data-theme="dark"] .kd.kd-hl-bersama, [data-theme="dark"] .hl-bersama{background:#3A2C07;border-color:#78350F}
[data-theme="dark"] .kc-pimpinan{background:#2E1065;color:#C4B5FD}
[data-theme="dark"] .kc-hakim{background:#052E16;color:#86EFAC}
[data-theme="dark"] .kc-kepaniteraan{background:#3A2C07;color:#FDE68A}
[data-theme="dark"] .kc-kesekretariatan{background:#4C1D95;color:#E9D5FF}
[data-theme="dark"] .kc-more{background:#1E293B;color:#94A3B8}

/* ── PCK Hero Card ── */
[data-theme="dark"] .pck-hero-new{background:#0C3B56;border-color:#0284C7;color:#BAE6FD}
[data-theme="dark"] .pck-hero-new .pck-hero-ic{background:#0284C7;color:#FFF}
[data-theme="dark"] .pck-hero-draft{background:#1E293B;border-color:#334155;color:#CBD5E1}
[data-theme="dark"] .pck-hero-draft .pck-hero-ic{background:#334155;color:#FFF}
[data-theme="dark"] .pck-hero-wait{background:#3A2C07;border-color:#B45309;color:#FDE68A}
[data-theme="dark"] .pck-hero-wait .pck-hero-ic{background:#B45309;color:#FFF}
[data-theme="dark"] .pck-hero-tolak{background:#3F0D0D;border-color:#9F1239;color:#FECACA}
[data-theme="dark"] .pck-hero-tolak .pck-hero-ic{background:#9F1239;color:#FFF}
[data-theme="dark"] .pck-hero-ok{background:#052E16;border-color:#15803D;color:#BBF7D0}
[data-theme="dark"] .pck-hero-ok .pck-hero-ic{background:#15803D;color:#FFF}
[data-theme="dark"] .pck-hero-srhk{background:#172554;border-color:#1E3A8A;color:#BFDBFE}
[data-theme="dark"] .pck-hero-srhk .pck-hero-ic{background:#1E3A8A;color:#FFF}
[data-theme="dark"] .pck-hero-done{background:#052E16;border-color:#16A34A;color:#86EFAC}
[data-theme="dark"] .pck-hero-done .pck-hero-ic{background:#16A34A;color:#FFF}

/* ── Dashboard KPI Stats (dashboard.js hardcoded) ── */
[data-theme="dark"] .su-stat{background:var(--hr-bg)!important}
[data-theme="dark"] .su-stat h4, [data-theme="dark"] .su-stat div{color:var(--hr-text)!important}

/* ── Tombol tema di layar login (pojok kanan atas #ls) ── */
.ls-theme-btn{position:absolute;top:18px;right:18px;z-index:20}

/* ── Dark: ikon tema di tombol toggle ── */
[data-theme="dark"] .tb-theme-icon{color:var(--hr-warning)}

/* ── Dark: Login Screen ── */
[data-theme="dark"] #ls-right{background:var(--hr-bg)}
[data-theme="dark"] #ls-form-wrap{background:var(--hr-surface);border-color:var(--hr-border-soft);box-shadow:0 18px 42px rgba(0,0,0,0.5)}
[data-theme="dark"] .ls-heading{color:var(--hr-text)}
[data-theme="dark"] .ls-subheading{color:var(--hr-neutral)}
[data-theme="dark"] .ls-label{color:var(--hr-text-sec)}
[data-theme="dark"] .ls-input{background:var(--hr-surface);color:var(--hr-text);border-color:var(--hr-border-inp)}
[data-theme="dark"] .ls-input:hover{border-color:var(--hr-border-inp)}
[data-theme="dark"] .ls-input:focus{border-color:var(--hr-primary)}
[data-theme="dark"] .ls-eye{color:var(--hr-muted)}
[data-theme="dark"] .ls-eye:hover{color:var(--hr-text)}
[data-theme="dark"] .ls-forgot a{color:var(--hr-text-sec)}
[data-theme="dark"] #ls-btn{background:var(--hr-primary);color:#fff}
[data-theme="dark"] #ls-btn:hover{background:var(--hr-primary-deep)}
[data-theme="dark"] .ls-foot{color:var(--hr-muted)}
[data-theme="dark"] #le{background:#3F0D0D;border-color:#7F1D1D;color:#FCA5A5}

/* ── Dark: alert inline-style JS yg hardcode warna terang (pck.js dll) ──
   Catatan urutan: selektor `#fff` GENERIK harus dulu, aturan warna spesifik
   (`#fff3cd` dst) setelahnya — krn substring `#fff` juga cocok dgn `#fff3cd`
   (spesifisitas sama, yg terakhir menang). */
[data-theme="dark"] div[style*="background:#fff"],
[data-theme="dark"] div[style*="background: #fff"],
[data-theme="dark"] div[style*="background:#FFFFFF"],
[data-theme="dark"] div[style*="background: #FFFFFF"],
[data-theme="dark"] span[style*="background:#fff"],
[data-theme="dark"] span[style*="background: #fff"],
[data-theme="dark"] span[style*="background:#FFFFFF"],
[data-theme="dark"] span[style*="background: #FFFFFF"]{background:var(--hr-surface)!important}
[data-theme="dark"] div[style*="background:#fff3cd"],
[data-theme="dark"] div[style*="background: #fff3cd"],
[data-theme="dark"] div[style*="background:#fffbeb"],
[data-theme="dark"] div[style*="background: #fffbeb"],
[data-theme="dark"] div[style*="background:#fff8ed"],
[data-theme="dark"] div[style*="background: #fff8ed"],
[data-theme="dark"] div[style*="background:#fff8e1"],
[data-theme="dark"] div[style*="background: #fff8e1"]{background:#3A2C07!important;border-color:#B45309!important;color:#FDE68A!important}
[data-theme="dark"] span[style*="background:#fef3c7"],
[data-theme="dark"] span[style*="background: #fef3c7"]{background:#3A2C07!important;border-color:#B45309!important;color:#FDE68A!important}
[data-theme="dark"] span[style*="background:#fff"],
[data-theme="dark"] span[style*="background: #fff"],
[data-theme="dark"] span[style*="background:#FFFFFF"],
[data-theme="dark"] span[style*="background: #FFFFFF"]{background:var(--hr-surface)!important;border-color:#475569!important;color:var(--hr-text)!important}