/*
  APJ CORE CSS V18
  Tema pusat APJ Central: dark navy, cyan, emerald, flat icon, glass card.
  Pakai di semua halaman setelah login: dashboard, inventory, absensi, keuangan, admin.
*/

:root{
  --apj-bg:#020617;
  --apj-bg-2:#0f172a;
  --apj-bg-3:#111827;
  --apj-surface:rgba(15,23,42,.84);
  --apj-surface-2:rgba(2,6,23,.72);
  --apj-surface-3:rgba(30,41,59,.58);
  --apj-border:rgba(51,65,85,.78);
  --apj-border-soft:rgba(148,163,184,.18);
  --apj-text:#f8fafc;
  --apj-muted:#94a3b8;
  --apj-muted-2:#64748b;
  --apj-blue:#2563eb;
  --apj-blue-2:#0ea5e9;
  --apj-cyan:#06b6d4;
  --apj-emerald:#10b981;
  --apj-rose:#f43f5e;
  --apj-amber:#f59e0b;
  --apj-violet:#8b5cf6;
  --apj-sidebar-w:280px;
  --apj-sidebar-collapsed-w:86px;
  --apj-topbar-h:76px;
  --apj-radius-xl:24px;
  --apj-radius-lg:18px;
  --apj-radius-md:14px;
  --apj-shadow:0 24px 90px rgba(0,0,0,.42);
  --apj-shadow-soft:0 16px 42px rgba(0,0,0,.24);
  --apj-focus:0 0 0 4px rgba(37,99,235,.18);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  min-height:100vh;
  margin:0;
  font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--apj-text);
  background:
    radial-gradient(circle at 18% 20%, rgba(37,99,235,.20), transparent 32%),
    radial-gradient(circle at 82% 15%, rgba(6,182,212,.16), transparent 28%),
    radial-gradient(circle at 70% 86%, rgba(16,185,129,.12), transparent 24%),
    linear-gradient(135deg,#020617 0%,#0f172a 52%,#111827 100%);
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(148,163,184,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(148,163,184,.05) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(circle at center,black 0%,transparent 78%);
  z-index:-2;
}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.68}
::selection{background:rgba(6,182,212,.30)}

.apj-app{
  min-height:100vh;
  display:flex;
  width:100%;
}
.apj-main{
  flex:1;
  min-width:0;
  margin-left:var(--apj-sidebar-w);
  transition:margin .22s ease;
}
body.apj-sidebar-collapsed .apj-main{margin-left:var(--apj-sidebar-collapsed-w)}
.apj-page{
  width:100%;
  max-width:1500px;
  margin:0 auto;
  padding:20px clamp(14px,2vw,28px) 34px;
}

/* Sidebar */
.apj-sidebar{
  position:fixed;
  inset:0 auto 0 0;
  width:var(--apj-sidebar-w);
  z-index:80;
  display:flex;
  flex-direction:column;
  color:var(--apj-text);
  background:linear-gradient(180deg,rgba(2,6,23,.98),rgba(15,23,42,.96));
  border-right:1px solid rgba(51,65,85,.86);
  box-shadow:18px 0 60px rgba(0,0,0,.38);
  transition:width .22s ease, transform .22s ease;
}
.apj-sidebar-brand{
  min-height:76px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 16px;
  border-bottom:1px solid rgba(51,65,85,.66);
}
.apj-brand-icon{
  width:46px;height:46px;border-radius:16px;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(37,99,235,.28),rgba(6,182,212,.18));
  border:1px solid rgba(59,130,246,.30);
  color:#93c5fd;
  flex:0 0 auto;
}
.apj-brand-text{min-width:0;line-height:1.1}
.apj-brand-title{font-weight:900;letter-spacing:.02em;font-size:1rem;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.apj-brand-subtitle{margin-top:4px;font-size:.68rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#67e8f9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.apj-sidebar-toggle{
  margin-left:auto;width:36px;height:36px;border-radius:12px;border:1px solid rgba(148,163,184,.18);
  background:rgba(15,23,42,.72);color:#cbd5e1;display:inline-flex;align-items:center;justify-content:center;
}
.apj-sidebar-toggle:hover{background:rgba(37,99,235,.18);border-color:rgba(59,130,246,.34);color:#fff}
.apj-nav{
  flex:1;
  overflow-y:auto;
  padding:14px 10px;
  scrollbar-width:thin;
  scrollbar-color:rgba(148,163,184,.28) transparent;
}
.apj-nav::-webkit-scrollbar{width:8px}.apj-nav::-webkit-scrollbar-thumb{background:rgba(148,163,184,.25);border-radius:999px}
.apj-nav-section{margin:8px 0 12px}
.apj-nav-section-label{
  padding:10px 12px 8px;
  color:#64748b;
  font-size:.67rem;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.apj-nav-link,.apj-nav-group-btn{
  width:100%;
  min-height:44px;
  display:flex;
  align-items:center;
  gap:10px;
  border-radius:14px;
  padding:10px 12px;
  margin:4px 0;
  border:1px solid transparent;
  color:#cbd5e1;
  background:transparent;
  transition:background .18s ease,border .18s ease,color .18s ease,transform .18s ease;
}
.apj-nav-link:hover,.apj-nav-group-btn:hover{background:rgba(15,23,42,.84);border-color:rgba(148,163,184,.14);color:#fff}
.apj-nav-link.apj-active{background:linear-gradient(135deg,rgba(37,99,235,.30),rgba(6,182,212,.16));border-color:rgba(59,130,246,.36);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.apj-nav-icon{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;color:currentColor}
.apj-nav-text{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:800;font-size:.88rem}
.apj-lock-badge{
  display:inline-flex;align-items:center;gap:4px;padding:3px 7px;border-radius:999px;
  background:rgba(244,63,94,.12);border:1px solid rgba(244,63,94,.20);color:#fecdd3;
  font-size:.64rem;font-weight:900;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;
}
.apj-nav-link.apj-locked{opacity:.72}.apj-nav-link.apj-locked:hover{opacity:1;background:rgba(244,63,94,.08);border-color:rgba(244,63,94,.16)}
.apj-chevron{transition:transform .18s ease;color:#94a3b8}.apj-nav-group.apj-open .apj-chevron{transform:rotate(180deg)}
.apj-subnav{display:none;padding-left:10px;margin:2px 0 8px}.apj-nav-group.apj-open .apj-subnav{display:block}
.apj-subnav .apj-nav-link{min-height:40px;padding-left:14px;border-radius:12px}.apj-subnav .apj-nav-text{font-size:.82rem}
.apj-sidebar-footer{padding:12px 10px 16px;border-top:1px solid rgba(51,65,85,.66)}
.apj-btn-guide,.apj-btn-logout{
  width:100%;min-height:42px;border-radius:14px;border:1px solid rgba(148,163,184,.16);
  background:rgba(15,23,42,.74);color:#e2e8f0;font-weight:900;display:flex;align-items:center;justify-content:center;gap:8px;margin-top:8px;
}
.apj-btn-guide:hover{background:rgba(6,182,212,.12);border-color:rgba(6,182,212,.28);color:#cffafe}
.apj-btn-logout{background:rgba(244,63,94,.12);border-color:rgba(244,63,94,.24);color:#fecdd3}.apj-btn-logout:hover{background:rgba(244,63,94,.20);border-color:rgba(244,63,94,.38);color:#fff}
body.apj-sidebar-collapsed .apj-sidebar{width:var(--apj-sidebar-collapsed-w)}
body.apj-sidebar-collapsed .apj-brand-text,
body.apj-sidebar-collapsed .apj-nav-text,
body.apj-sidebar-collapsed .apj-nav-section-label,
body.apj-sidebar-collapsed .apj-lock-badge,
body.apj-sidebar-collapsed .apj-chevron,
body.apj-sidebar-collapsed .apj-btn-guide span,
body.apj-sidebar-collapsed .apj-btn-logout span{display:none}
body.apj-sidebar-collapsed .apj-sidebar-brand{justify-content:center;padding-left:10px;padding-right:10px}
body.apj-sidebar-collapsed .apj-sidebar-toggle{margin-left:0;position:absolute;right:-16px;top:20px;background:#0f172a}
body.apj-sidebar-collapsed .apj-nav-link,
body.apj-sidebar-collapsed .apj-nav-group-btn{justify-content:center;padding-left:10px;padding-right:10px}
body.apj-sidebar-collapsed .apj-subnav{padding-left:0}
body.apj-sidebar-collapsed .apj-nav-group.apj-open .apj-subnav{display:none}

/* Topbar */
.apj-topbar{
  position:sticky;top:0;z-index:55;
  min-height:var(--apj-topbar-h);
  display:flex;align-items:center;gap:14px;justify-content:space-between;
  padding:14px clamp(14px,2vw,28px);
  background:rgba(2,6,23,.68);
  border-bottom:1px solid rgba(51,65,85,.46);
  backdrop-filter:blur(18px);
}
.apj-mobile-menu-btn{display:none;width:44px;height:44px;border-radius:14px;border:1px solid rgba(148,163,184,.18);background:rgba(15,23,42,.82);color:#fff;align-items:center;justify-content:center}
.apj-topbar-title{min-width:0}
.apj-greeting{font-size:1.08rem;font-weight:900;color:#fff;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.apj-page-subtitle{font-size:.80rem;color:#94a3b8;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.apj-topbar-actions{display:flex;align-items:center;gap:10px;min-width:0}
.apj-user-chip{display:flex;align-items:center;gap:10px;min-width:0;padding:9px 12px;border-radius:16px;background:rgba(15,23,42,.70);border:1px solid rgba(148,163,184,.16)}
.apj-user-avatar{width:34px;height:34px;border-radius:12px;background:linear-gradient(135deg,rgba(37,99,235,.35),rgba(16,185,129,.22));border:1px solid rgba(59,130,246,.28);display:flex;align-items:center;justify-content:center;font-weight:900;color:#dbeafe;flex:0 0 auto}
.apj-user-info{min-width:0}.apj-user-name{font-size:.82rem;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.apj-user-meta{font-size:.68rem;color:#94a3b8;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Cards, sections, hero */
.apj-hero,.apj-card,.apj-panel,.apj-modal-card{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,rgba(15,23,42,.88),rgba(2,6,23,.88));
  border:1px solid var(--apj-border);
  box-shadow:var(--apj-shadow-soft), inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter:blur(18px);
  border-radius:var(--apj-radius-xl);
}
.apj-hero::before,.apj-card::before,.apj-panel::before,.apj-modal-card::before{
  content:"";position:absolute;inset:-1px;pointer-events:none;border-radius:inherit;padding:1px;
  background:linear-gradient(120deg,rgba(37,99,235,.28),transparent 28%,transparent 65%,rgba(6,182,212,.18));
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:.72;
}
.apj-hero{padding:clamp(18px,3vw,28px);margin-bottom:18px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center}
.apj-kicker{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(59,130,246,.25);background:rgba(37,99,235,.10);color:#bfdbfe;border-radius:999px;padding:7px 12px;font-size:.72rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em}
.apj-kicker-dot{width:8px;height:8px;border-radius:999px;background:#34d399;box-shadow:0 0 0 4px rgba(16,185,129,.12)}
.apj-hero-title{margin:12px 0 0;font-size:clamp(1.45rem,3.2vw,2.35rem);line-height:1.08;font-weight:950;letter-spacing:-.035em;color:#fff}
.apj-hero-text{margin:10px 0 0;max-width:720px;color:#cbd5e1;line-height:1.65;font-size:.94rem}
.apj-card,.apj-panel{padding:18px}.apj-card-title,.apj-panel-title{font-weight:950;color:#fff;font-size:1rem;margin:0}.apj-card-subtitle,.apj-panel-subtitle{margin:6px 0 0;color:#94a3b8;font-size:.82rem;line-height:1.45}
.apj-grid{display:grid;gap:16px}.apj-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.apj-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.apj-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.apj-kpi{padding:16px;border-radius:20px;border:1px solid rgba(148,163,184,.16);background:rgba(15,23,42,.58);display:flex;gap:12px;align-items:flex-start;min-width:0}.apj-kpi-icon{width:42px;height:42px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:rgba(37,99,235,.14);border:1px solid rgba(59,130,246,.20);color:#93c5fd;flex:0 0 auto}.apj-kpi-label{font-size:.74rem;color:#94a3b8;font-weight:800;text-transform:uppercase;letter-spacing:.06em}.apj-kpi-value{font-size:1.45rem;font-weight:950;color:#fff;margin-top:3px;line-height:1}.apj-kpi-note{font-size:.72rem;color:#64748b;margin-top:5px}

/* Forms */
.apj-form-grid{display:grid;gap:14px}.apj-form-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.apj-form-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.apj-field label,.apj-label{display:block;color:#94a3b8;font-size:.72rem;font-weight:900;text-transform:uppercase;letter-spacing:.09em;margin:0 0 7px}
.apj-input,.apj-select,.apj-textarea{
  width:100%;min-height:44px;border-radius:14px;border:1px solid rgba(71,85,105,.86);
  background:rgba(2,6,23,.72);color:#fff;padding:10px 12px;outline:none;transition:border .18s ease,box-shadow .18s ease,background .18s ease;
}
.apj-textarea{min-height:96px;resize:vertical;line-height:1.55}.apj-input::placeholder,.apj-textarea::placeholder{color:#64748b}
.apj-input:focus,.apj-select:focus,.apj-textarea:focus{border-color:rgba(59,130,246,.95);box-shadow:var(--apj-focus);background:rgba(2,6,23,.88)}
.apj-select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#94a3b8 50%),linear-gradient(135deg,#94a3b8 50%,transparent 50%);background-position:calc(100% - 18px) 19px,calc(100% - 13px) 19px;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:34px}
.apj-help-text{font-size:.76rem;color:#64748b;margin-top:6px;line-height:1.45}.apj-error-text{font-size:.76rem;color:#fecdd3;margin-top:6px}

/* Buttons */
.apj-btn{min-height:42px;border:1px solid transparent;border-radius:14px;padding:10px 14px;font-size:.86rem;font-weight:950;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform .18s ease,filter .18s ease,background .18s ease,border .18s ease,color .18s ease;white-space:nowrap}.apj-btn:hover{transform:translateY(-1px)}.apj-btn:active{transform:translateY(0)}
.apj-btn-primary{background:linear-gradient(135deg,#2563eb,#0ea5e9);color:#fff;box-shadow:0 16px 32px rgba(37,99,235,.22)}
.apj-btn-success{background:linear-gradient(135deg,#059669,#10b981);color:#fff;box-shadow:0 16px 32px rgba(16,185,129,.18)}
.apj-btn-danger{background:rgba(244,63,94,.14);border-color:rgba(244,63,94,.28);color:#fecdd3}.apj-btn-danger:hover{background:rgba(244,63,94,.22);color:#fff}
.apj-btn-warning{background:rgba(245,158,11,.14);border-color:rgba(245,158,11,.26);color:#fde68a}.apj-btn-warning:hover{background:rgba(245,158,11,.22);color:#fff}
.apj-btn-ghost{background:rgba(15,23,42,.68);border-color:rgba(148,163,184,.16);color:#e2e8f0}.apj-btn-ghost:hover{background:rgba(37,99,235,.14);border-color:rgba(59,130,246,.26);color:#fff}
.apj-btn-sm{min-height:34px;border-radius:12px;padding:7px 10px;font-size:.78rem}.apj-btn-block{width:100%}

/* Tables */
.apj-table-wrap{width:100%;overflow-x:auto;border-radius:18px;border:1px solid rgba(148,163,184,.16);background:rgba(2,6,23,.48)}
.apj-table{width:100%;border-collapse:collapse;color:#e5e7eb;font-size:.84rem;min-width:720px}.apj-table th{background:rgba(15,23,42,.92);color:#94a3b8;font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;font-weight:950;text-align:left;padding:12px 13px;border-bottom:1px solid rgba(148,163,184,.16);white-space:nowrap}.apj-table td{padding:12px 13px;border-bottom:1px solid rgba(148,163,184,.10);vertical-align:middle}.apj-table tr:hover td{background:rgba(37,99,235,.06)}.apj-table tr:last-child td{border-bottom:0}
.apj-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border-radius:999px;border:1px solid rgba(148,163,184,.16);background:rgba(15,23,42,.76);font-size:.68rem;font-weight:900;color:#cbd5e1;white-space:nowrap}.apj-badge-success{background:rgba(16,185,129,.12);border-color:rgba(16,185,129,.25);color:#bbf7d0}.apj-badge-danger{background:rgba(244,63,94,.12);border-color:rgba(244,63,94,.25);color:#fecdd3}.apj-badge-warning{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.25);color:#fde68a}.apj-badge-info{background:rgba(6,182,212,.12);border-color:rgba(6,182,212,.25);color:#cffafe}

/* Modals and Toast */
.apj-modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(2,6,23,.72);backdrop-filter:blur(10px)}.apj-modal.apj-show{display:flex}.apj-modal-card{width:min(560px,100%);max-height:min(86vh,760px);overflow:auto;padding:20px}.apj-modal-lg{width:min(860px,100%)}.apj-modal-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}.apj-modal-title{font-size:1.1rem;font-weight:950;margin:0;color:#fff}.apj-modal-subtitle{font-size:.82rem;color:#94a3b8;margin:5px 0 0;line-height:1.5}.apj-modal-close{width:36px;height:36px;border-radius:12px;border:1px solid rgba(148,163,184,.16);background:rgba(15,23,42,.78);color:#e2e8f0;display:flex;align-items:center;justify-content:center;flex:0 0 auto}.apj-modal-close:hover{background:rgba(244,63,94,.14);border-color:rgba(244,63,94,.26);color:#fecdd3}.apj-modal-footer{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid rgba(148,163,184,.12)}
.apj-toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,18px) scale(.98);z-index:9999;max-width:min(520px,calc(100vw - 28px));width:max-content;opacity:0;pointer-events:none;transition:opacity .22s ease,transform .22s cubic-bezier(.16,1,.3,1)}.apj-toast.apj-show{opacity:1;transform:translate(-50%,0) scale(1);pointer-events:auto}.apj-toast-inner{display:flex;align-items:center;gap:12px;border-radius:18px;padding:13px 15px;border:1px solid rgba(148,163,184,.18);background:rgba(15,23,42,.96);box-shadow:0 18px 58px rgba(0,0,0,.42);backdrop-filter:blur(18px);color:#e2e8f0}.apj-toast-icon{width:36px;height:36px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}.apj-toast-message{font-size:.86rem;font-weight:850;line-height:1.45}.apj-toast-success .apj-toast-icon{background:rgba(16,185,129,.14);border:1px solid rgba(16,185,129,.25);color:#86efac}.apj-toast-error .apj-toast-icon{background:rgba(244,63,94,.14);border:1px solid rgba(244,63,94,.25);color:#fecdd3}.apj-toast-info .apj-toast-icon{background:rgba(6,182,212,.14);border:1px solid rgba(6,182,212,.25);color:#cffafe}.apj-toast-warning .apj-toast-icon{background:rgba(245,158,11,.14);border:1px solid rgba(245,158,11,.25);color:#fde68a}

/* Access denied */
.apj-access-denied{min-height:calc(100vh - 120px);display:flex;align-items:center;justify-content:center;padding:24px}.apj-denied-card{max-width:560px;text-align:center;padding:28px}.apj-denied-icon{width:76px;height:76px;margin:0 auto 16px;border-radius:26px;background:rgba(244,63,94,.12);border:1px solid rgba(244,63,94,.25);display:flex;align-items:center;justify-content:center;color:#fecdd3}.apj-denied-title{font-size:1.45rem;font-weight:950;margin:0;color:#fff}.apj-denied-text{color:#94a3b8;line-height:1.65;margin:10px 0 18px}

/* Utilities */
.apj-hidden{display:none!important}.apj-flex{display:flex}.apj-items-center{align-items:center}.apj-justify-between{justify-content:space-between}.apj-gap-2{gap:8px}.apj-gap-3{gap:12px}.apj-gap-4{gap:16px}.apj-mt-2{margin-top:8px}.apj-mt-3{margin-top:12px}.apj-mt-4{margin-top:16px}.apj-mb-4{margin-bottom:16px}.apj-text-muted{color:#94a3b8}.apj-text-danger{color:#fecdd3}.apj-text-success{color:#bbf7d0}.apj-text-right{text-align:right}.apj-text-center{text-align:center}.apj-w-full{width:100%}

/* Mobile */
.apj-mobile-backdrop{position:fixed;inset:0;z-index:70;background:rgba(2,6,23,.66);backdrop-filter:blur(3px);display:none}.apj-mobile-backdrop.apj-show{display:block}
@media (max-width:1180px){.apj-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}.apj-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){
  :root{--apj-topbar-h:68px}
  .apj-sidebar{transform:translateX(-102%);width:min(88vw,320px)}
  body.apj-sidebar-mobile-open .apj-sidebar{transform:translateX(0)}
  body.apj-sidebar-collapsed .apj-sidebar{width:min(88vw,320px)}
  body.apj-sidebar-collapsed .apj-brand-text,
  body.apj-sidebar-collapsed .apj-nav-text,
  body.apj-sidebar-collapsed .apj-nav-section-label,
  body.apj-sidebar-collapsed .apj-lock-badge,
  body.apj-sidebar-collapsed .apj-chevron,
  body.apj-sidebar-collapsed .apj-btn-guide span,
  body.apj-sidebar-collapsed .apj-btn-logout span{display:initial}
  body.apj-sidebar-collapsed .apj-sidebar-brand{justify-content:flex-start;padding:16px}
  body.apj-sidebar-collapsed .apj-sidebar-toggle{position:static;margin-left:auto}
  body.apj-sidebar-collapsed .apj-nav-link,body.apj-sidebar-collapsed .apj-nav-group-btn{justify-content:flex-start;padding:10px 12px}
  .apj-main,body.apj-sidebar-collapsed .apj-main{margin-left:0}
  .apj-mobile-menu-btn{display:flex}.apj-topbar{padding:12px 14px}.apj-user-info{display:none}.apj-user-chip{padding:7px}.apj-page{padding:14px 12px 26px}.apj-hero{grid-template-columns:1fr;padding:18px}.apj-form-grid-2,.apj-form-grid-3,.apj-grid-2,.apj-grid-3,.apj-grid-4{grid-template-columns:1fr}.apj-topbar-actions{gap:6px}.apj-btn{white-space:normal}.apj-modal{padding:12px;align-items:flex-end}.apj-modal-card{max-height:88vh;border-radius:22px 22px 18px 18px}.apj-modal-footer{justify-content:stretch}.apj-modal-footer .apj-btn{flex:1}.apj-toast{bottom:14px}.apj-toast-inner{padding:12px 13px}.apj-toast-message{font-size:.82rem}
  /* Mobile table to card. Add class apj-responsive-table to table. JS will set data-label automatically. */
  .apj-table-wrap.apj-mobile-card{overflow:visible;border:0;background:transparent}.apj-table.apj-responsive-table{min-width:0;border-collapse:separate;border-spacing:0 12px}.apj-table.apj-responsive-table thead{display:none}.apj-table.apj-responsive-table tbody,.apj-table.apj-responsive-table tr,.apj-table.apj-responsive-table td{display:block;width:100%}.apj-table.apj-responsive-table tr{border:1px solid rgba(148,163,184,.16);background:rgba(15,23,42,.72);border-radius:18px;padding:10px;margin-bottom:12px;box-shadow:0 12px 28px rgba(0,0,0,.18)}.apj-table.apj-responsive-table td{border:0!important;padding:8px 8px 8px 46%;position:relative;min-height:34px}.apj-table.apj-responsive-table td::before{content:attr(data-label);position:absolute;left:8px;top:8px;width:40%;color:#94a3b8;font-size:.68rem;font-weight:950;text-transform:uppercase;letter-spacing:.06em;white-space:normal}.apj-table.apj-responsive-table tr:hover td{background:transparent}
}
@media (max-width:480px){.apj-greeting{font-size:.96rem}.apj-page-subtitle{font-size:.72rem}.apj-hero-title{font-size:1.35rem}.apj-card,.apj-panel{padding:14px}.apj-kpi{padding:13px}.apj-kpi-value{font-size:1.25rem}.apj-table.apj-responsive-table td{padding-left:42%}.apj-table.apj-responsive-table td::before{width:36%}}

@media print{
  body{background:#fff!important;color:#000!important}.apj-sidebar,.apj-topbar,.apj-btn,.apj-toast,.apj-modal,.apj-mobile-backdrop{display:none!important}.apj-main{margin-left:0!important}.apj-page{max-width:none;padding:0}.apj-card,.apj-panel,.apj-hero{box-shadow:none!important;border:1px solid #ddd!important;background:#fff!important;color:#000!important}.apj-table-wrap{overflow:visible;border:0}.apj-table{min-width:0;color:#000}.apj-table th,.apj-table td{border:1px solid #ddd!important;color:#000!important;background:#fff!important}
}

/* Login page APJ Central - memakai token APJ Core */
.apj-login-shell{
  min-height:100vh;
  min-height:100svh;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(14px,2.4vw,30px);
  position:relative;
  z-index:1;
}
.apj-login-grid{
  width:100%;
  max-width:1120px;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(360px,.85fr);
  gap:clamp(18px,3vw,32px);
  align-items:center;
}
.apj-login-left{min-width:0}.apj-login-title{margin:24px 0 0;font-size:clamp(2.3rem,4.2vw,4.15rem);line-height:1.02;font-weight:950;letter-spacing:-.06em;color:#fff}.apj-login-text{margin:18px 0 0;max-width:640px;color:#cbd5e1;line-height:1.75;font-size:1rem}.apj-login-card{width:100%;max-width:460px;margin:0 auto;padding:clamp(18px,2.6vw,30px)}.apj-login-logo{width:58px;height:58px;border-radius:20px;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(37,99,235,.25),rgba(6,182,212,.16));border:1px solid rgba(59,130,246,.30);box-shadow:0 18px 44px rgba(37,99,235,.18);color:#93c5fd}.apj-login-heading{text-align:center;margin-bottom:22px}.apj-login-heading h1{margin:12px 0 0;font-size:1.65rem;font-weight:950;letter-spacing:-.035em;color:#fff;text-transform:uppercase}.apj-login-heading p{margin:7px 0 0;color:#94a3b8;font-size:.82rem;line-height:1.55}.apj-version-pill{display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(6,182,212,.20);background:rgba(6,182,212,.10);color:#cffafe;border-radius:999px;padding:5px 10px;font-size:.66rem;font-weight:950;text-transform:uppercase;letter-spacing:.10em;margin-top:13px}.apj-version-pill::before{content:"";width:7px;height:7px;border-radius:999px;background:#67e8f9}.apj-tab-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;border-radius:18px;padding:5px;background:rgba(2,6,23,.48);border:1px solid rgba(148,163,184,.08);margin-bottom:18px}.apj-tab-btn{min-height:38px;border:1px solid rgba(71,85,105,.64);border-radius:14px;background:rgba(15,23,42,.64);color:#94a3b8;font-size:.78rem;font-weight:950;transition:background .18s ease,border .18s ease,color .18s ease,transform .18s ease}.apj-tab-btn:hover{color:#e0f2fe;border-color:rgba(6,182,212,.30)}.apj-tab-btn.apj-active{color:#fff;background:linear-gradient(135deg,rgba(37,99,235,.92),rgba(14,165,233,.88));border-color:rgba(125,211,252,.26);box-shadow:0 12px 26px rgba(37,99,235,.20)}.apj-feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:28px}.apj-feature-card{border:1px solid rgba(148,163,184,.16);background:rgba(15,23,42,.55);border-radius:20px;padding:14px;min-width:0}.apj-feature-icon{width:42px;height:42px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:rgba(37,99,235,.13);border:1px solid rgba(59,130,246,.20);color:#93c5fd;margin-bottom:10px}.apj-feature-label{font-size:.74rem;color:#94a3b8;font-weight:800}.apj-feature-value{font-size:.86rem;color:#fff;font-weight:950;margin-top:4px}.apj-inline-link{border:0;background:transparent;color:#7dd3fc;font-size:.78rem;font-weight:950;display:inline-flex;align-items:center;gap:6px;padding:0}.apj-inline-link:hover{color:#e0f2fe;transform:translateY(-1px)}.apj-auth-note{border:1px solid rgba(245,158,11,.25);background:rgba(245,158,11,.10);border-radius:18px;padding:12px;color:#fde68a;font-size:.78rem;line-height:1.55}.apj-date-grid{display:grid;grid-template-columns:.85fr 1.25fr 1fr;gap:10px}.apj-login-footer{margin-top:24px;padding-top:18px;border-top:1px solid rgba(148,163,184,.12);text-align:center}.apj-login-footer p:first-child{font-size:.68rem;color:#64748b;text-transform:uppercase;letter-spacing:.12em;font-weight:900}.apj-login-footer p:last-child{font-size:.72rem;color:#64748b;margin-top:7px;line-height:1.5}.apj-password-row{display:flex;align-items:center;gap:8px}.apj-password-row .apj-input{flex:1}.apj-spinner{width:18px;height:18px;border-radius:999px;border:3px solid rgba(255,255,255,.28);border-top-color:#fff;animation:apjSpin .85s linear infinite;display:inline-block}.apj-mobile-intro-copy{text-align:center}.apj-mobile-intro-icon{width:58px;height:58px;margin:0 auto 14px;border-radius:20px;display:flex;align-items:center;justify-content:center;background:rgba(6,182,212,.12);border:1px solid rgba(6,182,212,.25);color:#cffafe}.apj-mobile-intro-copy h2{margin:0;font-size:1.45rem;font-weight:950;letter-spacing:-.04em;color:#fff}.apj-mobile-intro-copy p{margin:10px 0 0;color:#cbd5e1;font-size:.88rem;line-height:1.65}.apj-login-mobile-hero{display:none;text-align:center;margin-bottom:12px}.apj-login-mobile-hero h2{font-size:1.9rem;line-height:1.08;margin:13px 0 0;font-weight:950;letter-spacing:-.05em;color:#fff}.apj-login-mobile-hero p{max-width:420px;margin:10px auto 0;color:#cbd5e1;line-height:1.6;font-size:.88rem}@keyframes apjSpin{to{transform:rotate(360deg)}}
@media(max-width:980px){.apj-login-grid{grid-template-columns:1fr;max-width:560px}.apj-login-left{display:none}.apj-login-mobile-hero{display:block}.apj-login-card{max-width:520px}.apj-login-shell{align-items:flex-start}.apj-feature-grid{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:620px){.apj-login-shell{padding:12px}.apj-login-card{padding:17px;border-radius:22px}.apj-login-heading h1{font-size:1.45rem}.apj-form-grid-2,.apj-date-grid{grid-template-columns:1fr}.apj-feature-grid{display:none}.apj-login-mobile-hero h2{font-size:1.65rem}.apj-modal{align-items:flex-end}.apj-login-footer{margin-top:18px}}


/* Login modal fit fix v18.1
   Merapikan popup Login Pusat: tidak ada horizontal scrollbar, card pas di desktop/HP,
   dan form grid tidak melebar karena min-width bawaan input/select. */
.apj-modal{
  overflow:hidden;
  padding:clamp(12px,2vw,22px);
}
.apj-modal.apj-show{
  display:flex;
}
.apj-modal-card{
  width:min(540px, calc(100vw - 32px));
  max-width:calc(100vw - 32px);
  max-height:calc(100svh - 42px);
  overflow-y:auto;
  overflow-x:hidden;
  padding:clamp(18px,2.4vw,26px);
  scrollbar-width:thin;
  scrollbar-color:rgba(148,163,184,.34) transparent;
}
.apj-modal-card::-webkit-scrollbar{width:8px;height:0}
.apj-modal-card::-webkit-scrollbar-track{background:transparent}
.apj-modal-card::-webkit-scrollbar-thumb{background:rgba(148,163,184,.30);border-radius:999px}
.apj-modal-card > *{
  position:relative;
  z-index:1;
  min-width:0;
}
.apj-modal-header{
  min-width:0;
}
.apj-modal-header > div{
  min-width:0;
}
.apj-form-grid,
.apj-form-grid > *,
.apj-field,
.apj-password-row,
.apj-date-grid,
.apj-date-grid > *,
.apj-tab-grid,
.apj-tab-grid > *{
  min-width:0;
}
.apj-input,
.apj-select,
.apj-textarea{
  min-width:0;
  max-width:100%;
}
.apj-date-grid{
  grid-template-columns:minmax(0,.85fr) minmax(0,1.2fr) minmax(0,1fr);
}
.apj-modal .apj-btn-block{
  min-width:0;
}
.apj-modal .apj-auth-note{
  word-break:normal;
  overflow-wrap:anywhere;
}
.apj-modal .apj-help-text{
  overflow-wrap:anywhere;
}

@media(max-width:860px){
  .apj-modal{
    align-items:center;
    justify-content:center;
    padding:12px;
  }
  .apj-modal-card{
    width:100%;
    max-width:560px;
    max-height:calc(100svh - 24px);
    border-radius:22px;
  }
}
@media(max-width:620px){
  .apj-modal{
    align-items:flex-end;
    padding:10px;
  }
  .apj-modal-card{
    max-width:100%;
    max-height:calc(100svh - 20px);
    padding:16px;
    border-radius:22px 22px 18px 18px;
  }
  .apj-modal-header{
    gap:10px;
  }
  .apj-date-grid{
    grid-template-columns:1fr;
    gap:10px;
  }
  .apj-password-row{
    gap:6px;
  }
  .apj-password-row .apj-btn{
    padding-left:10px;
    padding-right:10px;
  }
}

/* Login modal no-scrollbar polish v18.2
   Modal tetap responsif, tapi scrollbar bawaan Windows/Edge disembunyikan agar tampilan lebih profesional. */
.apj-modal{
  overflow:hidden !important;
}
.apj-modal-card{
  overflow-x:hidden !important;
  overflow-y:auto !important;
  -ms-overflow-style:none !important;
  scrollbar-width:none !important;
  overscroll-behavior:contain;
}
.apj-modal-card::-webkit-scrollbar{
  width:0 !important;
  height:0 !important;
  display:none !important;
}
.apj-modal-card::-webkit-scrollbar-track,
.apj-modal-card::-webkit-scrollbar-thumb,
.apj-modal-card::-webkit-scrollbar-corner{
  background:transparent !important;
  display:none !important;
}

/* Desktop popup login dibuat sedikit lebih lega dan tidak memaksa scroll jika isi masih muat. */
@media(min-width:621px){
  .apj-modal-card{
    max-height:min(92svh, 720px) !important;
  }
  #profileModal .apj-modal-card,
  #forgotModal .apj-modal-card{
    padding:26px 28px !important;
  }
}

/* HP tetap bisa scroll jika konten panjang, tetapi tanpa bar putih/abu-abu. */
@media(max-width:620px){
  .apj-modal-card{
    max-height:calc(100svh - 18px) !important;
    padding:18px !important;
  }
}

/* =========================================================
   APJ CORE V18 FOUNDATION - compatibility aliases
   Tambahan ini sengaja ringan: menjaga class lama dan class baru bisa hidup bareng.
   ========================================================= */
:root{
  --bg:var(--apj-bg-2);
  --bg-2:var(--apj-bg-3);
  --surface:var(--apj-surface);
  --surface-solid:var(--apj-bg-2);
  --surface-soft:rgba(2,6,23,.46);
  --surface-muted:rgba(15,23,42,.62);
  --text:var(--apj-text);
  --muted:var(--apj-muted);
  --muted-2:var(--apj-muted-2);
  --border:var(--apj-border);
  --border-strong:rgba(96,165,250,.34);
  --shadow:0 26px 90px rgba(0,0,0,.50), inset 0 1px 0 rgba(255,255,255,.04);
  --shadow-soft:0 18px 46px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.035);
  --primary:var(--apj-blue);
  --primary-2:var(--apj-blue-2);
  --accent:var(--apj-cyan);
  --blue:var(--apj-blue);
  --emerald:var(--apj-emerald);
  --rose:var(--apj-rose);
  --amber:var(--apj-amber);
  --violet:var(--apj-violet);
  --sky:var(--apj-cyan);
}
.apj-hidden{display:none!important}.apj-show{display:flex!important}.apj-text-muted{color:var(--apj-muted)}.apj-text-center{text-align:center}
.apj-flex{display:flex}.apj-items-center{align-items:center}.apj-gap-2{gap:.5rem}.apj-gap-3{gap:.75rem}.apj-mt-2{margin-top:.5rem}.apj-mt-3{margin-top:.75rem}.apj-mt-4{margin-top:1rem}
.apj-card{border:1px solid var(--apj-border);background:linear-gradient(180deg,rgba(15,23,42,.84),rgba(2,6,23,.78));box-shadow:var(--apj-shadow-soft);backdrop-filter:blur(18px);border-radius:var(--apj-radius-xl)}
.apj-access-denied{min-height:calc(100vh - 120px);display:flex;align-items:center;justify-content:center;padding:24px}.apj-denied-card{max-width:520px;padding:28px;text-align:center}.apj-denied-icon{font-size:42px;margin-bottom:12px}.apj-denied-title{font-size:28px;font-weight:950;margin:0}.apj-denied-text{color:var(--apj-muted);line-height:1.6;margin:10px 0 0}


/* APJ Permission Sync V180/V181 */
.nav-item.nav-locked{opacity:.58;cursor:not-allowed;filter:saturate(.75);}
.nav-item.nav-locked .nav-text{color:var(--muted,#94a3b8)!important;}
.nav-lock-badge,.nav-soon{margin-left:auto;border-radius:999px;padding:.12rem .42rem;font-size:.62rem;font-weight:900;letter-spacing:.02em;line-height:1;border:1px solid rgba(148,163,184,.28);background:rgba(148,163,184,.12);color:#cbd5e1;white-space:nowrap;}
.nav-lock-badge{background:rgba(244,63,94,.12);border-color:rgba(244,63,94,.28);color:#fecdd3;}
.hr-tab.hr-tab-locked{opacity:.55;cursor:not-allowed;filter:saturate(.75);}
.hr-tab-lock-badge{margin-left:.35rem;font-size:.72em;opacity:.9;}
.apj-permission-denied{min-height:calc(100dvh - 72px);display:flex;align-items:center;justify-content:center;padding:2rem;}
.apj-permission-denied-card{width:min(560px,100%);border:1px solid rgba(148,163,184,.24);background:rgba(15,23,42,.86);box-shadow:0 24px 80px rgba(0,0,0,.35);border-radius:28px;padding:2rem;text-align:center;color:#e5e7eb;}
.apj-denied-lock{width:64px;height:64px;margin:0 auto 1rem;border-radius:24px;display:flex;align-items:center;justify-content:center;background:rgba(56,189,248,.12);border:1px solid rgba(56,189,248,.25);font-size:1.8rem;}
.apj-permission-denied-card h1{font-size:1.55rem;font-weight:900;margin:.25rem 0 .65rem;}
.apj-permission-denied-card p{margin:0 auto;color:#94a3b8;line-height:1.65;font-size:.95rem;}
.apj-denied-meta{margin:1rem auto 1.25rem;display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .75rem;border-radius:999px;background:rgba(148,163,184,.1);border:1px solid rgba(148,163,184,.18);font-size:.78rem;color:#cbd5e1;}
.apj-denied-back{border:0;border-radius:16px;padding:.78rem 1rem;background:#0ea5e9;color:white;font-weight:900;cursor:pointer;}
html[data-theme="light"] .apj-permission-denied-card{background:rgba(255,255,255,.94);color:#0f172a;box-shadow:0 24px 80px rgba(15,23,42,.14);} 
html[data-theme="light"] .apj-permission-denied-card p{color:#64748b;}