/*
  APJ THEME V18.2
  Dark / Light mode layer. Load after page CSS so this file wins against legacy inline-extracted colors.
  Default tetap dark. Light mode memakai html[data-theme="light"].
*/
:root{
  color-scheme:dark;
}
html[data-theme="dark"]{
  color-scheme:dark;
}
html[data-theme="light"]{
  color-scheme:light;
  --apj-bg:#f6f8fc;
  --apj-bg-2:#ffffff;
  --apj-bg-3:#e2e8f0;
  --apj-surface:rgba(255,255,255,.92);
  --apj-surface-2:rgba(248,250,252,.86);
  --apj-surface-3:rgba(226,232,240,.72);
  --apj-border:rgba(148,163,184,.42);
  --apj-border-soft:rgba(100,116,139,.18);
  --apj-text:#0f172a;
  --apj-muted:#64748b;
  --apj-muted-2:#94a3b8;
  --apj-shadow:0 24px 80px rgba(15,23,42,.14);
  --apj-shadow-soft:0 14px 38px rgba(15,23,42,.10);

  /* Legacy dashboard variables */
  --bg:#f6f8fc;
  --bg-2:#e2e8f0;
  --surface:rgba(255,255,255,.92);
  --surface-solid:#ffffff;
  --surface-soft:rgba(241,245,249,.82);
  --surface-muted:rgba(248,250,252,.72);
  --text:#0f172a;
  --muted:#64748b;
  --muted-2:#94a3b8;
  --border:rgba(148,163,184,.42);
  --border-strong:rgba(37,99,235,.28);
  --shadow:0 24px 70px rgba(15,23,42,.14), inset 0 1px 0 rgba(255,255,255,.72);
  --shadow-soft:0 14px 36px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.66);
  --sidebar-bg:linear-gradient(180deg,rgba(255,255,255,.98),rgba(241,245,249,.96));
  --sidebar-card:rgba(248,250,252,.86);
  --sidebar-border:rgba(148,163,184,.34);
  --sidebar-text:#0f172a;
  --sidebar-muted:rgba(71,85,105,.72);
  --primary-soft:rgba(37,99,235,.10);
}

html[data-theme="light"] body,
html[data-theme="light"] body.apj-theme-light{
  color:var(--text) !important;
  background:
    radial-gradient(circle at 18% 20%, rgba(37,99,235,.13), transparent 32%),
    radial-gradient(circle at 82% 15%, rgba(6,182,212,.10), transparent 28%),
    radial-gradient(circle at 70% 86%, rgba(16,185,129,.08), transparent 24%),
    linear-gradient(135deg,#f8fafc 0%,#eef4ff 50%,#e2e8f0 100%) !important;
}
html[data-theme="light"] body::before{
  background-image:
    linear-gradient(rgba(15,23,42,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(15,23,42,.055) 1px,transparent 1px) !important;
  opacity:.9;
}

/* Toggle */
.apj-theme-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:46px;
  height:46px;
  padding:0 13px;
  border-radius:18px;
  border:1px solid var(--border, var(--apj-border));
  background:rgba(255,255,255,.035);
  color:var(--text, var(--apj-text));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter:blur(14px);
  transition:transform .15s ease, border-color .15s ease, background .15s ease, color .15s ease;
  font-weight:900;
  line-height:1;
}
.apj-theme-toggle:hover{transform:translateY(-1px);border-color:var(--border-strong, rgba(96,165,250,.34));background:rgba(255,255,255,.07)}
.apj-theme-toggle-icon{font-size:18px;line-height:1;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px}
.apj-theme-toggle-text{font-size:12px;font-weight:950;letter-spacing:.02em;white-space:nowrap}
.apj-login-theme-toggle{position:fixed;right:18px;top:18px;z-index:70;min-width:94px;height:42px;border-radius:999px;background:rgba(15,23,42,.64);border-color:rgba(148,163,184,.22);color:#f8fafc}
html[data-theme="light"] .apj-login-theme-toggle{background:rgba(255,255,255,.82);border-color:rgba(148,163,184,.38);color:#0f172a;box-shadow:0 14px 34px rgba(15,23,42,.12)}
@media(max-width:640px){.apj-theme-toggle-text{display:none}.apj-login-theme-toggle{min-width:42px;padding:0;right:14px;top:14px}}

/* Dashboard + inventory legacy light mode */
html[data-theme="light"] .apj-sidebar{
  background:var(--sidebar-bg) !important;
  color:var(--sidebar-text) !important;
  border-right-color:var(--sidebar-border) !important;
  box-shadow:18px 0 48px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.80) !important;
}
html[data-theme="light"] .sidebar-head,
html[data-theme="light"] .sidebar-footer{border-color:rgba(148,163,184,.32) !important}
html[data-theme="light"] .brand-text p:first-child,
html[data-theme="light"] #sidebar .text-white{color:#0f172a !important}
html[data-theme="light"] .brand-text p:last-child,
html[data-theme="light"] #sidebar .text-violet-300{color:#2563eb !important}
html[data-theme="light"] .menu-label{color:rgba(71,85,105,.68) !important}
html[data-theme="light"] .nav-item,
html[data-theme="light"] .nav-group-toggle{color:rgba(51,65,85,.76) !important}
html[data-theme="light"] .nav-item:hover,
html[data-theme="light"] .nav-group-toggle:hover{color:#0f172a !important;background:rgba(37,99,235,.07) !important;border-color:rgba(37,99,235,.14) !important}
html[data-theme="light"] .nav-item.active{color:#0f172a !important;background:linear-gradient(135deg,rgba(37,99,235,.16),rgba(6,182,212,.09)) !important;border-color:rgba(37,99,235,.22) !important;box-shadow:0 12px 26px rgba(37,99,235,.10), inset 0 1px 0 rgba(255,255,255,.72) !important}
html[data-theme="light"] .nav-submenu{border-left-color:rgba(37,99,235,.16) !important}
html[data-theme="light"] .nav-lock{background:rgba(245,158,11,.12) !important;border-color:rgba(245,158,11,.22) !important;color:#92400e !important}
html[data-theme="light"] #sidebar.sidebar-collapsed #dashboardSidebarMenu .menu-label{background:rgba(15,23,42,.18) !important}
html[data-theme="light"] .logout-button{background:rgba(244,63,94,.08) !important;border-color:rgba(244,63,94,.18) !important;color:#be123c !important}
html[data-theme="light"] .logout-button:hover{background:rgba(244,63,94,.13) !important;color:#9f1239 !important}

html[data-theme="light"] .topbar{
  background:rgba(255,255,255,.78) !important;
  border-bottom-color:rgba(148,163,184,.34) !important;
  box-shadow:0 10px 30px rgba(15,23,42,.06) !important;
}
html[data-theme="light"] .topbar-title h2,
html[data-theme="light"] .hero-title,
html[data-theme="light"] .panel-title h3,
html[data-theme="light"] .mini-stat strong,
html[data-theme="light"] .mini-stat .stat-value,
html[data-theme="light"] .quick-menu-title,
html[data-theme="light"] .text-white,
html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3{color:#0f172a !important}
html[data-theme="light"] .topbar-title p,
html[data-theme="light"] .hero-desc,
html[data-theme="light"] .panel-title p,
html[data-theme="light"] .mini-stat p,
html[data-theme="light"] .quick-menu-desc,
html[data-theme="light"] .text-slate-400{color:#64748b !important}
html[data-theme="light"] .topbar-title-mark,
html[data-theme="light"] .icon-button,
html[data-theme="light"] .apj-theme-toggle{
  background:rgba(255,255,255,.72) !important;
  border-color:rgba(148,163,184,.34) !important;
  color:#2563eb !important;
  box-shadow:0 10px 22px rgba(15,23,42,.06), inset 0 1px 0 rgba(255,255,255,.82) !important;
}
html[data-theme="light"] .user-avatar{background:linear-gradient(135deg,#2563eb,#06b6d4) !important;color:#fff !important;box-shadow:0 14px 28px rgba(37,99,235,.22) !important}
html[data-theme="light"] .hero-card,
html[data-theme="light"] .panel,
html[data-theme="light"] .mini-stat,
html[data-theme="light"] .print-action-card{
  background:linear-gradient(180deg,rgba(255,255,255,.90),rgba(248,250,252,.78)) !important;
  border-color:rgba(148,163,184,.34) !important;
  box-shadow:var(--shadow-soft) !important;
}
html[data-theme="light"] .hero-card::before{background:rgba(37,99,235,.11) !important}
html[data-theme="light"] .hero-card::after{background:rgba(6,182,212,.10) !important}
html[data-theme="light"] .soft-badge{background:rgba(37,99,235,.09) !important;color:#1d4ed8 !important;border-color:rgba(37,99,235,.18) !important}
html[data-theme="light"] .info-card{background:rgba(37,99,235,.06) !important;border-color:rgba(37,99,235,.14) !important;color:#475569 !important}
html[data-theme="light"] .form-control,
html[data-theme="light"] .apj-input,
html[data-theme="light"] .apj-select,
html[data-theme="light"] .apj-textarea{
  background:rgba(255,255,255,.82) !important;
  color:#0f172a !important;
  border-color:rgba(148,163,184,.38) !important;
}
html[data-theme="light"] .form-control::placeholder,
html[data-theme="light"] .apj-input::placeholder{color:#94a3b8 !important}
html[data-theme="light"] .table-shell,
html[data-theme="light"] .apj-table-wrap{background:rgba(255,255,255,.74) !important;border-color:rgba(148,163,184,.32) !important}
html[data-theme="light"] .thead-row,
html[data-theme="light"] .apj-table thead{background:rgba(241,245,249,.92) !important;color:#475569 !important;border-color:rgba(148,163,184,.30) !important}
html[data-theme="light"] .modal-content,
html[data-theme="light"] .apj-modal-card{background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(248,250,252,.94)) !important;border-color:rgba(148,163,184,.36) !important;color:#0f172a !important}
html[data-theme="light"] .toast-card,
html[data-theme="light"] .apj-toast-inner{background:rgba(255,255,255,.94) !important;border-color:rgba(148,163,184,.34) !important;color:#0f172a !important;box-shadow:0 20px 50px rgba(15,23,42,.16) !important}

/* Login light mode */
html[data-theme="light"] .apj-login-shell{color:#0f172a !important}
html[data-theme="light"] .apj-card,
html[data-theme="light"] .apj-login-card,
html[data-theme="light"] .apj-feature-card{
  background:linear-gradient(180deg,rgba(255,255,255,.90),rgba(248,250,252,.80)) !important;
  border-color:rgba(148,163,184,.34) !important;
  box-shadow:0 24px 70px rgba(15,23,42,.13), inset 0 1px 0 rgba(255,255,255,.70) !important;
}
html[data-theme="light"] .apj-login-title,
html[data-theme="light"] .apj-login-heading h1,
html[data-theme="light"] .apj-feature-value{color:#0f172a !important}
html[data-theme="light"] .apj-login-text,
html[data-theme="light"] .apj-login-heading p,
html[data-theme="light"] .apj-feature-label,
html[data-theme="light"] .apj-help-text,
html[data-theme="light"] .apj-login-footer{color:#64748b !important}
html[data-theme="light"] .apj-auth-note{background:rgba(37,99,235,.06) !important;border-color:rgba(37,99,235,.16) !important;color:#475569 !important}
html[data-theme="light"] .apj-tab-grid{background:rgba(226,232,240,.70) !important;border-color:rgba(148,163,184,.34) !important}
html[data-theme="light"] .apj-tab-btn{color:#64748b !important}
html[data-theme="light"] .apj-tab-btn.apj-active{background:#ffffff !important;color:#0f172a !important;box-shadow:0 10px 26px rgba(15,23,42,.10) !important}
html[data-theme="light"] .apj-version-pill,
html[data-theme="light"] .apj-kicker{background:rgba(37,99,235,.08) !important;color:#1d4ed8 !important;border-color:rgba(37,99,235,.16) !important}
html[data-theme="light"] .apj-login-logo{background:linear-gradient(145deg,#ffffff,#dbeafe 48%,#2563eb) !important;color:#020617 !important}

/* =========================================================
   APJ THEME V18.3 - Light Mode Contrast Fix
   Patch: dashboard legacy colors + sidebar + generated cards.
   ========================================================= */
html[data-theme="light"]{
  color-scheme: light;
  --bg:#f5f7fb !important;
  --bg-2:#eaf0f8 !important;
  --surface:#ffffff !important;
  --surface-solid:#ffffff !important;
  --surface-soft:rgba(255,255,255,.88) !important;
  --surface-muted:rgba(241,245,249,.88) !important;
  --text:#0f172a !important;
  --muted:#475569 !important;
  --muted-2:#94a3b8 !important;
  --border:rgba(148,163,184,.42) !important;
  --border-strong:rgba(37,99,235,.30) !important;
  --shadow:0 24px 70px rgba(15,23,42,.13), inset 0 1px 0 rgba(255,255,255,.85) !important;
  --shadow-soft:0 14px 36px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.78) !important;
  --sidebar-bg:linear-gradient(180deg,rgba(255,255,255,.98),rgba(241,245,249,.96)) !important;
  --sidebar-card:rgba(255,255,255,.88) !important;
  --sidebar-border:rgba(148,163,184,.36) !important;
  --sidebar-text:#0f172a !important;
  --sidebar-muted:#64748b !important;
  --primary-soft:rgba(37,99,235,.10) !important;
}

html[data-theme="light"] body{
  color:#0f172a !important;
  background:
    radial-gradient(circle at 18% 18%, rgba(37,99,235,.13), transparent 30%),
    radial-gradient(circle at 84% 16%, rgba(6,182,212,.10), transparent 28%),
    radial-gradient(circle at 72% 88%, rgba(16,185,129,.08), transparent 26%),
    linear-gradient(135deg,#f8fafc 0%,#eef4ff 48%,#e2e8f0 100%) !important;
}
html[data-theme="light"] body::before{
  background-image:
    linear-gradient(rgba(15,23,42,.052) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,.052) 1px, transparent 1px) !important;
  opacity:.75 !important;
}

/* Sidebar readable in light mode */
html[data-theme="light"] #sidebar.apj-sidebar,
html[data-theme="light"] .apj-sidebar{
  background:var(--sidebar-bg) !important;
  color:#0f172a !important;
  border-right-color:rgba(148,163,184,.38) !important;
  box-shadow:18px 0 52px rgba(15,23,42,.09), inset 0 1px 0 rgba(255,255,255,.90) !important;
}
html[data-theme="light"] .sidebar-head,
html[data-theme="light"] .sidebar-footer{
  border-color:rgba(148,163,184,.30) !important;
}
html[data-theme="light"] #sidebar .brand-text p:first-child,
html[data-theme="light"] #sidebar .text-white{
  color:#0f172a !important;
}
html[data-theme="light"] #sidebar .brand-text p:last-child,
html[data-theme="light"] #sidebar .text-violet-300{
  color:#2563eb !important;
}
html[data-theme="light"] #sidebar .menu-label{
  color:#64748b !important;
}
html[data-theme="light"] #sidebar .nav-item,
html[data-theme="light"] #sidebar .nav-group-toggle{
  color:#475569 !important;
  background:transparent !important;
  border-color:transparent !important;
}
html[data-theme="light"] #sidebar .nav-item .nav-icon,
html[data-theme="light"] #sidebar .nav-group-toggle .nav-icon,
html[data-theme="light"] #sidebar .nav-chevron{
  color:#64748b !important;
}
html[data-theme="light"] #sidebar .nav-item:hover,
html[data-theme="light"] #sidebar .nav-group-toggle:hover{
  color:#0f172a !important;
  background:rgba(37,99,235,.07) !important;
  border-color:rgba(37,99,235,.16) !important;
}
html[data-theme="light"] #sidebar .nav-item:hover .nav-icon,
html[data-theme="light"] #sidebar .nav-group-toggle:hover .nav-icon{
  color:#2563eb !important;
}
html[data-theme="light"] #sidebar .nav-item.active,
html[data-theme="light"] #sidebar .nav-group.open > .nav-group-toggle{
  color:#0f172a !important;
  background:linear-gradient(135deg,rgba(37,99,235,.15),rgba(6,182,212,.08)) !important;
  border-color:rgba(37,99,235,.22) !important;
  box-shadow:0 12px 26px rgba(37,99,235,.10), inset 0 1px 0 rgba(255,255,255,.84) !important;
}
html[data-theme="light"] #sidebar .nav-item.active .nav-icon,
html[data-theme="light"] #sidebar .nav-group.open > .nav-group-toggle .nav-icon{
  color:#1d4ed8 !important;
}
html[data-theme="light"] #sidebar .nav-submenu{
  border-left-color:rgba(37,99,235,.18) !important;
}
html[data-theme="light"] #sidebar .nav-lock{
  color:#92400e !important;
  background:rgba(245,158,11,.14) !important;
  border-color:rgba(245,158,11,.26) !important;
}
html[data-theme="light"] #sidebar.sidebar-collapsed #dashboardSidebarMenu .menu-label{
  background:rgba(15,23,42,.14) !important;
}
html[data-theme="light"] #sidebar .logout-button{
  color:#be123c !important;
  background:rgba(244,63,94,.08) !important;
  border-color:rgba(244,63,94,.18) !important;
}
html[data-theme="light"] #sidebar .logout-button:hover{
  color:#9f1239 !important;
  background:rgba(244,63,94,.13) !important;
}

/* Dashboard shell */
html[data-theme="light"] .apj-main,
html[data-theme="light"] .dashboard-scroll{
  background:transparent !important;
  color:#0f172a !important;
}
html[data-theme="light"] .topbar{
  background:rgba(255,255,255,.82) !important;
  border-bottom-color:rgba(148,163,184,.34) !important;
  box-shadow:0 12px 34px rgba(15,23,42,.07) !important;
}
html[data-theme="light"] .topbar-title h2,
html[data-theme="light"] .topbar-title .text-white,
html[data-theme="light"] .user-meta .text-white,
html[data-theme="light"] .hero-title,
html[data-theme="light"] .panel-title h3,
html[data-theme="light"] .kpi-label,
html[data-theme="light"] .kpi-value strong,
html[data-theme="light"] .mini-stat strong,
html[data-theme="light"] .row-title,
html[data-theme="light"] .cal-day,
html[data-theme="light"] .agenda-line .row-title,
html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] .text-white{
  color:#0f172a !important;
}
html[data-theme="light"] .topbar-title p,
html[data-theme="light"] .user-meta .text-slate-400,
html[data-theme="light"] .hero-desc,
html[data-theme="light"] .panel-title p,
html[data-theme="light"] .kpi-value span,
html[data-theme="light"] .kpi-footer,
html[data-theme="light"] .mini-stat p,
html[data-theme="light"] .row-sub,
html[data-theme="light"] .cal-head,
html[data-theme="light"] .cal-day.muted,
html[data-theme="light"] .agenda-line .row-sub,
html[data-theme="light"] .text-slate-300,
html[data-theme="light"] .text-slate-400,
html[data-theme="light"] .text-slate-500{
  color:#64748b !important;
}
html[data-theme="light"] .uppercase.tracking-wide{
  color:#64748b !important;
}

/* Surface hierarchy */
html[data-theme="light"] .hero-card{
  background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(239,246,255,.88)) !important;
  border-color:rgba(37,99,235,.20) !important;
  box-shadow:0 24px 70px rgba(15,23,42,.12), inset 0 1px 0 rgba(255,255,255,.90) !important;
}
html[data-theme="light"] .hero-card::before{
  background:rgba(37,99,235,.12) !important;
}
html[data-theme="light"] .hero-card::after{
  background:rgba(6,182,212,.10) !important;
}
html[data-theme="light"] .panel,
html[data-theme="light"] .kpi-card,
html[data-theme="light"] .mini-stat,
html[data-theme="light"] .calendar-card,
html[data-theme="light"] .modal-content{
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(248,250,252,.88)) !important;
  border-color:rgba(148,163,184,.34) !important;
  box-shadow:0 16px 42px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.86) !important;
  color:#0f172a !important;
}
html[data-theme="light"] .soft-row,
html[data-theme="light"] .quick-card,
html[data-theme="light"] .agenda-line{
  background:rgba(255,255,255,.82) !important;
  border-color:rgba(148,163,184,.34) !important;
  color:#0f172a !important;
  box-shadow:0 8px 22px rgba(15,23,42,.055) !important;
}
html[data-theme="light"] .quick-card:hover,
html[data-theme="light"] .soft-row:hover{
  background:#ffffff !important;
  border-color:rgba(37,99,235,.24) !important;
}
html[data-theme="light"] .quick-card.opacity-60,
html[data-theme="light"] .soft-row.opacity-60{
  opacity:.82 !important;
}
html[data-theme="light"] .bar-line{
  background:rgba(148,163,184,.22) !important;
}
html[data-theme="light"] .pill{
  background:rgba(248,250,252,.88) !important;
  border-color:rgba(148,163,184,.34) !important;
  color:#334155 !important;
}
html[data-theme="light"] .pill.tone-blue,
html[data-theme="light"] .tone-blue.pill{color:#1d4ed8 !important;background:rgba(37,99,235,.10) !important;border-color:rgba(37,99,235,.20) !important}
html[data-theme="light"] .pill.tone-emerald,
html[data-theme="light"] .tone-emerald.pill{color:#047857 !important;background:rgba(16,185,129,.10) !important;border-color:rgba(16,185,129,.22) !important}
html[data-theme="light"] .pill.tone-rose,
html[data-theme="light"] .tone-rose.pill{color:#be123c !important;background:rgba(244,63,94,.10) !important;border-color:rgba(244,63,94,.22) !important}
html[data-theme="light"] .pill.tone-amber,
html[data-theme="light"] .tone-amber.pill{color:#b45309 !important;background:rgba(245,158,11,.12) !important;border-color:rgba(245,158,11,.25) !important}
html[data-theme="light"] .soft-badge{
  color:#1d4ed8 !important;
  background:rgba(37,99,235,.09) !important;
  border-color:rgba(37,99,235,.18) !important;
}
html[data-theme="light"] .flat-icon-sm,
html[data-theme="light"] .kpi-icon,
html[data-theme="light"] .topbar-title-mark,
html[data-theme="light"] .icon-button,
html[data-theme="light"] .apj-theme-toggle{
  background:rgba(255,255,255,.78) !important;
  border-color:rgba(148,163,184,.34) !important;
  box-shadow:0 10px 24px rgba(15,23,42,.065), inset 0 1px 0 rgba(255,255,255,.88) !important;
}
html[data-theme="light"] .user-avatar{
  color:#fff !important;
}
html[data-theme="light"] .cal-day.today{
  color:#fff !important;
}

/* Light mode toast/modal/form refinements */
html[data-theme="light"] .toast-card,
html[data-theme="light"] .apj-toast-inner,
html[data-theme="light"] .apj-modal-card{
  background:rgba(255,255,255,.96) !important;
  color:#0f172a !important;
  border-color:rgba(148,163,184,.36) !important;
  box-shadow:0 24px 70px rgba(15,23,42,.16) !important;
}
html[data-theme="light"] .modal-overlay{
  background:rgba(15,23,42,.42) !important;
}
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea,
html[data-theme="light"] .form-control,
html[data-theme="light"] .apj-input,
html[data-theme="light"] .apj-select,
html[data-theme="light"] .apj-textarea{
  background:rgba(255,255,255,.88) !important;
  color:#0f172a !important;
  border-color:rgba(148,163,184,.38) !important;
}
html[data-theme="light"] ::placeholder{
  color:#94a3b8 !important;
}

/* =========================================================
   APP-APJ V1.1 FINAL POLISH
   - Light mode keeps APJ sidebar navy for brand/readability.
   - Body variables are corrected because legacy dashboard also sets
     data-theme on body, not only html.
   - Topbar user identity: name visible, avatar on the right.
   ========================================================= */
html[data-theme="light"],
body[data-theme="light"]{
  --apj-bg:#f6f8fc !important;
  --apj-bg-2:#ffffff !important;
  --apj-bg-3:#e2e8f0 !important;
  --apj-surface:rgba(255,255,255,.92) !important;
  --apj-surface-2:rgba(248,250,252,.88) !important;
  --apj-surface-3:rgba(226,232,240,.72) !important;
  --apj-border:rgba(148,163,184,.42) !important;
  --apj-text:#0f172a !important;
  --apj-muted:#64748b !important;
  --apj-muted-2:#94a3b8 !important;

  --bg:#f6f8fc !important;
  --bg-2:#e2e8f0 !important;
  --surface:rgba(255,255,255,.92) !important;
  --surface-solid:#ffffff !important;
  --surface-soft:rgba(241,245,249,.84) !important;
  --surface-muted:rgba(248,250,252,.76) !important;
  --text:#0f172a !important;
  --muted:#64748b !important;
  --muted-2:#94a3b8 !important;
  --border:rgba(148,163,184,.42) !important;
  --border-strong:rgba(37,99,235,.28) !important;
  --shadow:0 24px 70px rgba(15,23,42,.14), inset 0 1px 0 rgba(255,255,255,.78) !important;
  --shadow-soft:0 14px 36px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.70) !important;

  /* Sidebar sengaja tetap navy di light mode: lebih APJ, lebih terbaca. */
  --sidebar-bg:linear-gradient(180deg,rgba(15,23,42,.96),rgba(2,6,23,.98)) !important;
  --sidebar-card:rgba(15,23,42,.74) !important;
  --sidebar-border:rgba(51,65,85,.76) !important;
  --sidebar-text:#f8fafc !important;
  --sidebar-muted:rgba(203,213,225,.68) !important;
}

html[data-theme="light"] body,
body[data-theme="light"]{
  color:#0f172a !important;
}

/* Sidebar readability in light mode */
html[data-theme="light"] #sidebar.apj-sidebar,
body[data-theme="light"] #sidebar.apj-sidebar,
html[data-theme="light"] .apj-sidebar,
body[data-theme="light"] .apj-sidebar{
  background:linear-gradient(180deg,rgba(15,23,42,.96),rgba(2,6,23,.98)) !important;
  color:#f8fafc !important;
  border-right-color:rgba(51,65,85,.76) !important;
  box-shadow:18px 0 52px rgba(15,23,42,.22), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
html[data-theme="light"] #sidebar .sidebar-head,
html[data-theme="light"] #sidebar .sidebar-footer,
body[data-theme="light"] #sidebar .sidebar-head,
body[data-theme="light"] #sidebar .sidebar-footer{
  border-color:rgba(255,255,255,.08) !important;
}
html[data-theme="light"] #sidebar .brand-text p:first-child,
html[data-theme="light"] #sidebar .text-white,
body[data-theme="light"] #sidebar .brand-text p:first-child,
body[data-theme="light"] #sidebar .text-white{
  color:#ffffff !important;
  opacity:1 !important;
}
html[data-theme="light"] #sidebar .brand-text p:last-child,
html[data-theme="light"] #sidebar .text-violet-300,
body[data-theme="light"] #sidebar .brand-text p:last-child,
body[data-theme="light"] #sidebar .text-violet-300{
  color:#7dd3fc !important;
  opacity:1 !important;
}
html[data-theme="light"] #sidebar .menu-label,
body[data-theme="light"] #sidebar .menu-label{
  color:rgba(203,213,225,.62) !important;
}
html[data-theme="light"] #sidebar .nav-item,
html[data-theme="light"] #sidebar .nav-group-toggle,
body[data-theme="light"] #sidebar .nav-item,
body[data-theme="light"] #sidebar .nav-group-toggle{
  color:rgba(203,213,225,.70) !important;
  background:transparent !important;
  border-color:transparent !important;
}
html[data-theme="light"] #sidebar .nav-item .nav-icon,
html[data-theme="light"] #sidebar .nav-group-toggle .nav-icon,
html[data-theme="light"] #sidebar .nav-chevron,
body[data-theme="light"] #sidebar .nav-item .nav-icon,
body[data-theme="light"] #sidebar .nav-group-toggle .nav-icon,
body[data-theme="light"] #sidebar .nav-chevron{
  color:rgba(203,213,225,.72) !important;
}
html[data-theme="light"] #sidebar .nav-item:hover,
html[data-theme="light"] #sidebar .nav-group-toggle:hover,
body[data-theme="light"] #sidebar .nav-item:hover,
body[data-theme="light"] #sidebar .nav-group-toggle:hover{
  color:#ffffff !important;
  background:rgba(255,255,255,.065) !important;
  border-color:rgba(125,211,252,.16) !important;
}
html[data-theme="light"] #sidebar .nav-item:hover .nav-icon,
html[data-theme="light"] #sidebar .nav-group-toggle:hover .nav-icon,
body[data-theme="light"] #sidebar .nav-item:hover .nav-icon,
body[data-theme="light"] #sidebar .nav-group-toggle:hover .nav-icon{
  color:#93c5fd !important;
}
html[data-theme="light"] #sidebar .nav-item.active,
html[data-theme="light"] #sidebar .nav-group.open > .nav-group-toggle,
body[data-theme="light"] #sidebar .nav-item.active,
body[data-theme="light"] #sidebar .nav-group.open > .nav-group-toggle{
  color:#ffffff !important;
  background:linear-gradient(135deg,rgba(37,99,235,.38),rgba(6,182,212,.15)) !important;
  border-color:rgba(125,211,252,.20) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 12px 28px rgba(37,99,235,.18) !important;
}
html[data-theme="light"] #sidebar .nav-item.active .nav-icon,
html[data-theme="light"] #sidebar .nav-group.open > .nav-group-toggle .nav-icon,
body[data-theme="light"] #sidebar .nav-item.active .nav-icon,
body[data-theme="light"] #sidebar .nav-group.open > .nav-group-toggle .nav-icon{
  color:#93c5fd !important;
}
html[data-theme="light"] #sidebar .nav-submenu,
body[data-theme="light"] #sidebar .nav-submenu{
  border-left-color:rgba(96,165,250,.18) !important;
}
html[data-theme="light"] #sidebar .nav-lock,
body[data-theme="light"] #sidebar .nav-lock{
  color:#fed7aa !important;
  background:rgba(245,158,11,.14) !important;
  border-color:rgba(245,158,11,.26) !important;
}
html[data-theme="light"] #sidebar.sidebar-collapsed #dashboardSidebarMenu .menu-label,
body[data-theme="light"] #sidebar.sidebar-collapsed #dashboardSidebarMenu .menu-label{
  background:rgba(255,255,255,.18) !important;
}
html[data-theme="light"] #sidebar .logout-button,
body[data-theme="light"] #sidebar .logout-button{
  color:#fb7185 !important;
  background:rgba(244,63,94,.12) !important;
  border-color:rgba(244,63,94,.25) !important;
}
html[data-theme="light"] #sidebar .logout-button:hover,
body[data-theme="light"] #sidebar .logout-button:hover{
  color:#fecdd3 !important;
  background:rgba(244,63,94,.20) !important;
}

/* User identity: nama kiri, avatar kanan */
.user-chip{
  flex-direction:row-reverse !important;
  justify-content:flex-start !important;
  align-items:center !important;
  gap:12px !important;
}
.user-chip .user-meta{
  display:block !important;
  text-align:right !important;
  min-width:0 !important;
  max-width:220px !important;
}
.user-chip #displayNama{
  display:block !important;
  max-width:220px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  color:var(--text,#f8fafc) !important;
  opacity:1 !important;
}
.user-chip #displayLevel{
  display:block !important;
  color:var(--muted,#94a3b8) !important;
  opacity:1 !important;
}
html[data-theme="light"] .user-chip #displayNama,
body[data-theme="light"] .user-chip #displayNama{
  color:#0f172a !important;
  text-shadow:none !important;
}
html[data-theme="light"] .user-chip #displayLevel,
body[data-theme="light"] .user-chip #displayLevel{
  color:#475569 !important;
}
html[data-theme="light"] .topbar,
body[data-theme="light"] .topbar{
  background:rgba(255,255,255,.86) !important;
}
@media(max-width:640px){
  .user-chip .user-meta{display:none !important;}
}

/* =========================================================
   APP-APJ V1.3 — Premium Light Theme Polish
   Tujuan: light mode tetap terang, tapi tidak hambar/polos.
   Layer ini sengaja paling akhir supaya menang dari CSS legacy.
   ========================================================= */
html[data-theme="light"],
body[data-theme="light"]{
  color-scheme:light;
  --apj-light-bg:#eef5ff;
  --apj-light-bg-2:#f7fbff;
  --apj-light-card:#ffffff;
  --apj-light-card-2:#f4f9ff;
  --apj-light-line:#c8d7ea;
  --apj-light-text:#0f172a;
  --apj-light-muted:#5b6f8a;
  --apj-light-soft-blue:rgba(37,99,235,.10);
  --apj-light-soft-cyan:rgba(6,182,212,.10);
  --apj-light-soft-emerald:rgba(16,185,129,.10);
  --apj-light-soft-amber:rgba(245,158,11,.12);
  --apj-light-soft-rose:rgba(244,63,94,.10);
  --bg:#eef5ff !important;
  --bg-2:#dfeafe !important;
  --surface:rgba(255,255,255,.88) !important;
  --surface-solid:#ffffff !important;
  --surface-soft:rgba(247,251,255,.86) !important;
  --surface-muted:rgba(236,244,255,.80) !important;
  --text:#0f172a !important;
  --muted:#5b6f8a !important;
  --muted-2:#8192a8 !important;
  --border:rgba(126,150,184,.35) !important;
  --border-strong:rgba(37,99,235,.32) !important;
  --shadow:0 26px 80px rgba(37,63,103,.13), inset 0 1px 0 rgba(255,255,255,.90) !important;
  --shadow-soft:0 16px 44px rgba(37,63,103,.105), inset 0 1px 0 rgba(255,255,255,.86) !important;
}
html[data-theme="light"] body,
body[data-theme="light"]{
  color:#0f172a !important;
  background:
    radial-gradient(circle at 14% 18%, rgba(37,99,235,.16), transparent 30%),
    radial-gradient(circle at 88% 12%, rgba(6,182,212,.13), transparent 28%),
    radial-gradient(circle at 76% 82%, rgba(16,185,129,.10), transparent 26%),
    linear-gradient(135deg,#f8fbff 0%,#eef5ff 47%,#dbeafe 100%) !important;
}
html[data-theme="light"] body::before,
body[data-theme="light"]::before{
  background-image:
    linear-gradient(rgba(37,63,103,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,63,103,.055) 1px, transparent 1px) !important;
  opacity:.72 !important;
}

/* Topbar premium light */
html[data-theme="light"] .topbar,
body[data-theme="light"] .topbar{
  background:linear-gradient(180deg,rgba(255,255,255,.90),rgba(244,249,255,.82)) !important;
  border-bottom:1px solid rgba(126,150,184,.32) !important;
  box-shadow:0 12px 34px rgba(37,63,103,.08) !important;
}
html[data-theme="light"] .topbar-title h2,
body[data-theme="light"] .topbar-title h2,
html[data-theme="light"] .user-chip #displayNama,
body[data-theme="light"] .user-chip #displayNama{
  color:#0f172a !important;
  opacity:1 !important;
}
html[data-theme="light"] .topbar-title p,
body[data-theme="light"] .topbar-title p,
html[data-theme="light"] .user-chip #displayLevel,
body[data-theme="light"] .user-chip #displayLevel{
  color:#4f647f !important;
  opacity:1 !important;
}
html[data-theme="light"] .topbar-title-mark,
html[data-theme="light"] .icon-button,
html[data-theme="light"] .apj-theme-toggle,
body[data-theme="light"] .topbar-title-mark,
body[data-theme="light"] .icon-button,
body[data-theme="light"] .apj-theme-toggle{
  background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(238,245,255,.86)) !important;
  color:#2563eb !important;
  border:1px solid rgba(126,150,184,.34) !important;
  box-shadow:0 12px 26px rgba(37,63,103,.09), inset 0 1px 0 rgba(255,255,255,.96) !important;
}
html[data-theme="light"] .icon-button:hover,
html[data-theme="light"] .apj-theme-toggle:hover,
body[data-theme="light"] .icon-button:hover,
body[data-theme="light"] .apj-theme-toggle:hover{
  background:linear-gradient(135deg,rgba(219,234,254,.98),rgba(207,250,254,.76)) !important;
  border-color:rgba(37,99,235,.28) !important;
}

/* Sidebar tetap navy, tapi font/icon lebih tegas */
html[data-theme="light"] #sidebar.apj-sidebar,
body[data-theme="light"] #sidebar.apj-sidebar{
  background:linear-gradient(180deg,#111c33 0%,#0b1224 54%,#070d1b 100%) !important;
  box-shadow:20px 0 58px rgba(15,23,42,.26), inset 0 1px 0 rgba(255,255,255,.055) !important;
}
html[data-theme="light"] #sidebar .brand-text p:first-child,
body[data-theme="light"] #sidebar .brand-text p:first-child{
  color:#ffffff !important;
  text-shadow:0 1px 16px rgba(125,211,252,.12) !important;
}
html[data-theme="light"] #sidebar .nav-text,
html[data-theme="light"] #sidebar .nav-group-title,
body[data-theme="light"] #sidebar .nav-text,
body[data-theme="light"] #sidebar .nav-group-title{
  color:inherit !important;
}
html[data-theme="light"] #sidebar .nav-item,
html[data-theme="light"] #sidebar .nav-group-toggle,
body[data-theme="light"] #sidebar .nav-item,
body[data-theme="light"] #sidebar .nav-group-toggle{
  color:rgba(203,213,225,.74) !important;
}
html[data-theme="light"] #sidebar .nav-item.active,
html[data-theme="light"] #sidebar .nav-group.open>.nav-group-toggle,
body[data-theme="light"] #sidebar .nav-item.active,
body[data-theme="light"] #sidebar .nav-group.open>.nav-group-toggle{
  color:#ffffff !important;
  background:linear-gradient(135deg,rgba(37,99,235,.48),rgba(6,182,212,.18)) !important;
  border-color:rgba(125,211,252,.28) !important;
}

/* Page shell + hero: light punya warna, bukan putih polos */
html[data-theme="light"] .page-scroll,
html[data-theme="light"] .dashboard-scroll,
body[data-theme="light"] .page-scroll,
body[data-theme="light"] .dashboard-scroll{
  background:
    radial-gradient(circle at 20% 10%, rgba(37,99,235,.10), transparent 26%),
    radial-gradient(circle at 82% 36%, rgba(6,182,212,.09), transparent 24%),
    radial-gradient(circle at 44% 92%, rgba(16,185,129,.07), transparent 28%) !important;
}
html[data-theme="light"] .hero-card,
body[data-theme="light"] .hero-card{
  background:
    radial-gradient(circle at 86% 16%, rgba(37,99,235,.13), transparent 28%),
    radial-gradient(circle at 8% 95%, rgba(6,182,212,.10), transparent 30%),
    linear-gradient(135deg,rgba(255,255,255,.96),rgba(239,246,255,.88) 54%,rgba(219,234,254,.72)) !important;
  border-color:rgba(96,165,250,.30) !important;
  box-shadow:0 24px 70px rgba(37,63,103,.13), inset 0 1px 0 rgba(255,255,255,.96) !important;
}
html[data-theme="light"] .hero-title,
html[data-theme="light"] .hero-card h1,
body[data-theme="light"] .hero-title,
body[data-theme="light"] .hero-card h1{
  color:#0f172a !important;
}
html[data-theme="light"] .hero-desc,
body[data-theme="light"] .hero-desc{
  color:#526985 !important;
}
html[data-theme="light"] .soft-badge,
body[data-theme="light"] .soft-badge{
  background:linear-gradient(135deg,rgba(37,99,235,.12),rgba(6,182,212,.08)) !important;
  color:#1d4ed8 !important;
  border-color:rgba(37,99,235,.22) !important;
}

/* Cards: putih soft + aksen gradient, bukan abu mati */
html[data-theme="light"] .panel,
html[data-theme="light"] .mini-stat,
html[data-theme="light"] .kpi-card,
html[data-theme="light"] .calendar-card,
html[data-theme="light"] .print-action-card,
body[data-theme="light"] .panel,
body[data-theme="light"] .mini-stat,
body[data-theme="light"] .kpi-card,
body[data-theme="light"] .calendar-card,
body[data-theme="light"] .print-action-card{
  background:
    radial-gradient(circle at 86% 12%, rgba(37,99,235,.065), transparent 28%),
    linear-gradient(180deg,rgba(255,255,255,.96),rgba(247,251,255,.88)) !important;
  border-color:rgba(126,150,184,.34) !important;
  color:#0f172a !important;
  box-shadow:0 16px 42px rgba(37,63,103,.10), inset 0 1px 0 rgba(255,255,255,.92) !important;
}
html[data-theme="light"] .mini-stat:nth-of-type(2n),
body[data-theme="light"] .mini-stat:nth-of-type(2n){
  background:radial-gradient(circle at 86% 20%, rgba(16,185,129,.12), transparent 30%), linear-gradient(180deg,rgba(255,255,255,.96),rgba(240,253,250,.74)) !important;
}
html[data-theme="light"] .mini-stat:nth-of-type(3n),
body[data-theme="light"] .mini-stat:nth-of-type(3n){
  background:radial-gradient(circle at 86% 20%, rgba(245,158,11,.13), transparent 30%), linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,251,235,.76)) !important;
}
html[data-theme="light"] .panel-title h3,
html[data-theme="light"] .mini-stat strong,
html[data-theme="light"] .mini-stat .stat-value,
html[data-theme="light"] .quick-menu-title,
html[data-theme="light"] .row-title,
html[data-theme="light"] .cal-day,
body[data-theme="light"] .panel-title h3,
body[data-theme="light"] .mini-stat strong,
body[data-theme="light"] .mini-stat .stat-value,
body[data-theme="light"] .quick-menu-title,
body[data-theme="light"] .row-title,
body[data-theme="light"] .cal-day{
  color:#0f172a !important;
}
html[data-theme="light"] .panel-title p,
html[data-theme="light"] .mini-stat p,
html[data-theme="light"] .quick-menu-desc,
html[data-theme="light"] .row-sub,
html[data-theme="light"] .cal-head,
html[data-theme="light"] .cal-day.muted,
body[data-theme="light"] .panel-title p,
body[data-theme="light"] .mini-stat p,
body[data-theme="light"] .quick-menu-desc,
body[data-theme="light"] .row-sub,
body[data-theme="light"] .cal-head,
body[data-theme="light"] .cal-day.muted{
  color:#60758f !important;
}
html[data-theme="light"] .quick-card,
html[data-theme="light"] .soft-row,
html[data-theme="light"] .agenda-line,
body[data-theme="light"] .quick-card,
body[data-theme="light"] .soft-row,
body[data-theme="light"] .agenda-line{
  background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(240,247,255,.80)) !important;
  border-color:rgba(126,150,184,.32) !important;
  color:#0f172a !important;
}

/* Forms + table input stok light mode */
html[data-theme="light"] .form-label,
html[data-theme="light"] label,
body[data-theme="light"] .form-label,
body[data-theme="light"] label{
  color:#526985 !important;
}
html[data-theme="light"] .form-control,
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea,
body[data-theme="light"] .form-control,
body[data-theme="light"] input,
body[data-theme="light"] select,
body[data-theme="light"] textarea{
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(245,249,255,.88)) !important;
  color:#0f172a !important;
  border-color:rgba(126,150,184,.38) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95) !important;
}
html[data-theme="light"] input:focus,
html[data-theme="light"] select:focus,
html[data-theme="light"] textarea:focus,
html[data-theme="light"] .form-control:focus,
body[data-theme="light"] input:focus,
body[data-theme="light"] select:focus,
body[data-theme="light"] textarea:focus,
body[data-theme="light"] .form-control:focus{
  border-color:rgba(37,99,235,.60) !important;
  box-shadow:0 0 0 4px rgba(37,99,235,.12), inset 0 1px 0 rgba(255,255,255,.95) !important;
}
html[data-theme="light"] .info-card,
body[data-theme="light"] .info-card{
  background:linear-gradient(135deg,rgba(37,99,235,.07),rgba(6,182,212,.055)) !important;
  border-color:rgba(37,99,235,.18) !important;
  color:#526985 !important;
}
html[data-theme="light"] .table-shell,
body[data-theme="light"] .table-shell{
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(241,247,255,.84)) !important;
  border-color:rgba(126,150,184,.34) !important;
  box-shadow:0 16px 42px rgba(37,63,103,.09), inset 0 1px 0 rgba(255,255,255,.90) !important;
}
html[data-theme="light"] .thead-row,
html[data-theme="light"] .table-shell thead,
body[data-theme="light"] .thead-row,
body[data-theme="light"] .table-shell thead{
  background:linear-gradient(180deg,#edf5ff,#e3eefc) !important;
  color:#435873 !important;
  border-color:rgba(126,150,184,.34) !important;
}
html[data-theme="light"] .table-shell tbody,
body[data-theme="light"] .table-shell tbody{
  background:rgba(255,255,255,.72) !important;
}
html[data-theme="light"] .table-shell tbody tr,
body[data-theme="light"] .table-shell tbody tr{
  background:rgba(255,255,255,.76) !important;
  color:#0f172a !important;
  border-color:rgba(126,150,184,.22) !important;
}
html[data-theme="light"] .table-shell tbody tr:nth-child(even),
body[data-theme="light"] .table-shell tbody tr:nth-child(even){
  background:rgba(240,247,255,.72) !important;
}
html[data-theme="light"] .table-shell td,
html[data-theme="light"] .table-shell th,
body[data-theme="light"] .table-shell td,
body[data-theme="light"] .table-shell th{
  border-color:rgba(126,150,184,.22) !important;
}
html[data-theme="light"] .table-shell .bg-slate-950\/60,
body[data-theme="light"] .table-shell .bg-slate-950\/60{
  background:linear-gradient(180deg,rgba(237,245,255,.88),rgba(226,238,252,.88)) !important;
  border-color:rgba(126,150,184,.30) !important;
}
html[data-theme="light"] #btnTambahBaris,
body[data-theme="light"] #btnTambahBaris{
  color:#1d4ed8 !important;
}
html[data-theme="light"] .text-slate-500,
html[data-theme="light"] .text-slate-400,
html[data-theme="light"] .text-slate-300,
body[data-theme="light"] .text-slate-500,
body[data-theme="light"] .text-slate-400,
body[data-theme="light"] .text-slate-300{
  color:#60758f !important;
}
html[data-theme="light"] .text-white,
body[data-theme="light"] .text-white{
  color:#0f172a !important;
}
html[data-theme="light"] #sidebar .text-white,
body[data-theme="light"] #sidebar .text-white{
  color:#ffffff !important;
}
html[data-theme="light"] .text-blue-200,
body[data-theme="light"] .text-blue-200{
  color:#1d4ed8 !important;
}
html[data-theme="light"] .text-cyan-200,
body[data-theme="light"] .text-cyan-200{
  color:#0891b2 !important;
}

/* Input stok preparation block */
html[data-theme="light"] #itemTableBody [class*="border-blue"],
body[data-theme="light"] #itemTableBody [class*="border-blue"],
html[data-theme="light"] #itemTableBody .rounded-2xl,
body[data-theme="light"] #itemTableBody .rounded-2xl{
  background:linear-gradient(135deg,rgba(239,246,255,.92),rgba(224,242,254,.70)) !important;
  border-color:rgba(37,99,235,.22) !important;
  color:#0f172a !important;
}
html[data-theme="light"] #itemTableBody .bg-slate-950\/70,
html[data-theme="light"] #itemTableBody .bg-slate-900\/70,
html[data-theme="light"] #itemTableBody .bg-slate-900,
body[data-theme="light"] #itemTableBody .bg-slate-950\/70,
body[data-theme="light"] #itemTableBody .bg-slate-900\/70,
body[data-theme="light"] #itemTableBody .bg-slate-900{
  background:rgba(255,255,255,.82) !important;
  border-color:rgba(126,150,184,.26) !important;
  color:#0f172a !important;
}

/* Buttons keep color energy in light mode */
html[data-theme="light"] .btn-primary,
body[data-theme="light"] .btn-primary{
  background:linear-gradient(135deg,#2563eb,#0ea5e9) !important;
  color:#ffffff !important;
  border-color:transparent !important;
  box-shadow:0 16px 32px rgba(37,99,235,.24) !important;
}
html[data-theme="light"] .btn-emerald,
body[data-theme="light"] .btn-emerald{
  background:linear-gradient(135deg,rgba(16,185,129,.14),rgba(6,182,212,.09)) !important;
  border-color:rgba(16,185,129,.26) !important;
  color:#047857 !important;
}
html[data-theme="light"] .pill,
body[data-theme="light"] .pill{
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(240,247,255,.82)) !important;
  border-color:rgba(126,150,184,.34) !important;
  color:#334155 !important;
}

/* Modal help/print/logout light mode: readable + colored accents */
html[data-theme="light"] .modal-overlay,
body[data-theme="light"] .modal-overlay{
  background:rgba(15,23,42,.42) !important;
}
html[data-theme="light"] .help-modal-card,
html[data-theme="light"] .modal-content,
html[data-theme="light"] .apj-modal-card,
body[data-theme="light"] .help-modal-card,
body[data-theme="light"] .modal-content,
body[data-theme="light"] .apj-modal-card{
  background:
    radial-gradient(circle at 88% 2%, rgba(37,99,235,.14), transparent 27%),
    radial-gradient(circle at 8% 100%, rgba(6,182,212,.10), transparent 30%),
    linear-gradient(180deg,rgba(255,255,255,.98),rgba(244,249,255,.94)) !important;
  color:#0f172a !important;
  border-color:rgba(96,165,250,.28) !important;
  box-shadow:0 30px 90px rgba(15,23,42,.22), inset 0 1px 0 rgba(255,255,255,.96) !important;
}
html[data-theme="light"] .help-modal-card h3,
html[data-theme="light"] .modal-content h3,
html[data-theme="light"] .apj-modal-title,
body[data-theme="light"] .help-modal-card h3,
body[data-theme="light"] .modal-content h3,
body[data-theme="light"] .apj-modal-title{
  color:#0f172a !important;
}
html[data-theme="light"] .help-modal-card p,
html[data-theme="light"] .modal-content p,
body[data-theme="light"] .help-modal-card p,
body[data-theme="light"] .modal-content p{
  color:#5b6f8a !important;
}
html[data-theme="light"] .help-step,
body[data-theme="light"] .help-step{
  background:linear-gradient(135deg,rgba(255,255,255,.86),rgba(239,246,255,.76)) !important;
  border-color:rgba(96,165,250,.22) !important;
  box-shadow:0 10px 24px rgba(37,63,103,.07) !important;
}
html[data-theme="light"] .help-step .text-white,
body[data-theme="light"] .help-step .text-white{
  color:#0f172a !important;
}
html[data-theme="light"] .help-step-number,
body[data-theme="light"] .help-step-number{
  background:linear-gradient(135deg,rgba(37,99,235,.14),rgba(6,182,212,.09)) !important;
  border-color:rgba(37,99,235,.26) !important;
  color:#1d4ed8 !important;
}
html[data-theme="light"] #inputHelpModal .rounded-2xl.border-amber-500\/22,
body[data-theme="light"] #inputHelpModal .rounded-2xl.border-amber-500\/22{
  background:linear-gradient(135deg,rgba(255,251,235,.94),rgba(254,243,199,.70)) !important;
  border-color:rgba(245,158,11,.30) !important;
}
html[data-theme="light"] #inputHelpModal .text-amber-100,
body[data-theme="light"] #inputHelpModal .text-amber-100{
  color:#92400e !important;
}
html[data-theme="light"] .modal-content button[class*="bg-slate-800"],
body[data-theme="light"] .modal-content button[class*="bg-slate-800"]{
  background:#e8f0fb !important;
  color:#334155 !important;
  border-color:rgba(126,150,184,.36) !important;
}
html[data-theme="light"] .modal-content input,
html[data-theme="light"] .modal-content select,
html[data-theme="light"] .modal-content textarea,
body[data-theme="light"] .modal-content input,
body[data-theme="light"] .modal-content select,
body[data-theme="light"] .modal-content textarea{
  background:#ffffff !important;
  color:#0f172a !important;
  border-color:rgba(126,150,184,.38) !important;
}
html[data-theme="light"] .modal-content .bg-slate-950\/70,
body[data-theme="light"] .modal-content .bg-slate-950\/70{
  background:rgba(239,246,255,.78) !important;
  border-color:rgba(126,150,184,.30) !important;
}

/* Mobile card tables in light */
@media screen and (max-width:768px){
  html[data-theme="light"] .table-scroll tr,
  body[data-theme="light"] .table-scroll tr{
    background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(239,246,255,.86)) !important;
    border-color:rgba(126,150,184,.34) !important;
  }
  html[data-theme="light"] .table-scroll td::before,
  body[data-theme="light"] .table-scroll td::before{
    color:#526985 !important;
  }
}



/* =========================================================
   APP-APJ V1.4 — Light Mode Final Polish
   Tujuan: light mode nyaman, jelas, tidak polos putih, dan tetap selaras brand APJ.
   Layer ini sengaja diletakkan paling akhir agar menang dari CSS legacy per halaman.
   ========================================================= */
html[data-theme="light"],
html[data-theme="light"] body{
  --apj-light-bg:#edf5ff;
  --apj-light-bg-2:#f6fbff;
  --apj-light-panel:#ffffff;
  --apj-light-panel-2:#f7fbff;
  --apj-light-ink:#0b1220;
  --apj-light-text:#0f172a;
  --apj-light-muted:#566b85;
  --apj-light-soft:#7a8da7;
  --apj-light-line:rgba(99,123,160,.28);
  --apj-light-line-2:rgba(37,99,235,.16);
  --apj-light-blue:#2563eb;
  --apj-light-cyan:#0891b2;
  --apj-light-emerald:#059669;
  --apj-light-amber:#d97706;
  --apj-light-rose:#e11d48;
  --apj-light-shadow:0 18px 48px rgba(21,45,86,.13), inset 0 1px 0 rgba(255,255,255,.92);
  --apj-light-shadow-soft:0 10px 28px rgba(21,45,86,.09), inset 0 1px 0 rgba(255,255,255,.88);
  color:#0f172a !important;
}

html[data-theme="light"] body,
body[data-theme="light"]{
  background:
    radial-gradient(circle at 12% 12%, rgba(37,99,235,.16), transparent 30%),
    radial-gradient(circle at 82% 14%, rgba(6,182,212,.13), transparent 28%),
    radial-gradient(circle at 76% 85%, rgba(16,185,129,.10), transparent 24%),
    linear-gradient(135deg,#f8fbff 0%,#eef6ff 44%,#e6f0fb 100%) !important;
  color:#0f172a !important;
}
html[data-theme="light"] body::before,
body[data-theme="light"]::before{
  background-image:
    linear-gradient(rgba(37,99,235,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(37,99,235,.055) 1px,transparent 1px) !important;
  opacity:.92 !important;
}
html[data-theme="light"] main,
html[data-theme="light"] .apj-main,
body[data-theme="light"] main,
body[data-theme="light"] .apj-main{
  background:
    linear-gradient(90deg,rgba(255,255,255,.30),rgba(255,255,255,0) 16%,rgba(255,255,255,.18)),
    radial-gradient(circle at 40% 4%, rgba(37,99,235,.08), transparent 34%) !important;
}
html[data-theme="light"] .page-scroll,
body[data-theme="light"] .page-scroll{
  background:transparent !important;
}

/* -------- Navy sidebar remains brand anchor in Light Mode -------- */
html[data-theme="light"] #sidebar,
html[data-theme="light"] .apj-sidebar,
body[data-theme="light"] #sidebar,
body[data-theme="light"] .apj-sidebar{
  background:
    radial-gradient(circle at 30% 0%, rgba(37,99,235,.22), transparent 26%),
    linear-gradient(180deg,#17223a 0%,#0f1a30 48%,#091226 100%) !important;
  border-right-color:rgba(147,197,253,.18) !important;
  color:#eaf2ff !important;
  box-shadow:18px 0 56px rgba(15,23,42,.30), inset 0 1px 0 rgba(255,255,255,.07) !important;
}
html[data-theme="light"] #sidebar .brand-text p:first-child,
html[data-theme="light"] #sidebar .text-white,
html[data-theme="light"] #sidebar .nav-text,
body[data-theme="light"] #sidebar .brand-text p:first-child,
body[data-theme="light"] #sidebar .text-white,
body[data-theme="light"] #sidebar .nav-text{
  color:#eaf2ff !important;
}
html[data-theme="light"] #sidebar .brand-text p:last-child,
html[data-theme="light"] #sidebar .text-violet-300,
body[data-theme="light"] #sidebar .brand-text p:last-child,
body[data-theme="light"] #sidebar .text-violet-300{
  color:#60a5fa !important;
}
html[data-theme="light"] #sidebar .menu-label,
body[data-theme="light"] #sidebar .menu-label{
  color:rgba(203,213,225,.68) !important;
}
html[data-theme="light"] #sidebar .nav-item,
html[data-theme="light"] #sidebar .nav-group-toggle,
body[data-theme="light"] #sidebar .nav-item,
body[data-theme="light"] #sidebar .nav-group-toggle{
  color:rgba(203,213,225,.75) !important;
  border-color:transparent !important;
}
html[data-theme="light"] #sidebar .nav-item:hover,
html[data-theme="light"] #sidebar .nav-group-toggle:hover,
body[data-theme="light"] #sidebar .nav-item:hover,
body[data-theme="light"] #sidebar .nav-group-toggle:hover{
  color:#ffffff !important;
  background:linear-gradient(135deg,rgba(37,99,235,.20),rgba(6,182,212,.10)) !important;
  border-color:rgba(125,211,252,.18) !important;
}
html[data-theme="light"] #sidebar .nav-item.active,
body[data-theme="light"] #sidebar .nav-item.active{
  color:#ffffff !important;
  background:linear-gradient(135deg,rgba(37,99,235,.34),rgba(6,182,212,.18)) !important;
  border-color:rgba(125,211,252,.30) !important;
  box-shadow:0 12px 28px rgba(37,99,235,.18), inset 0 1px 0 rgba(255,255,255,.10) !important;
}
html[data-theme="light"] #sidebar .nav-submenu,
body[data-theme="light"] #sidebar .nav-submenu{
  border-left-color:rgba(96,165,250,.22) !important;
}
html[data-theme="light"] #sidebar .nav-lock,
body[data-theme="light"] #sidebar .nav-lock{
  color:#fed7aa !important;
  background:rgba(245,158,11,.14) !important;
  border-color:rgba(245,158,11,.24) !important;
}
html[data-theme="light"] #sidebar .logout-button,
body[data-theme="light"] #sidebar .logout-button{
  color:#fb7185 !important;
  background:rgba(244,63,94,.12) !important;
  border-color:rgba(244,63,94,.26) !important;
}
html[data-theme="light"] #sidebar .logout-button:hover,
body[data-theme="light"] #sidebar .logout-button:hover{
  color:#fecdd3 !important;
  background:rgba(244,63,94,.19) !important;
}
html[data-theme="light"] #dashboardSidebarMenu::-webkit-scrollbar-thumb,
body[data-theme="light"] #dashboardSidebarMenu::-webkit-scrollbar-thumb{
  background:rgba(148,163,184,.38) !important;
}

/* -------- Topbar: clean, readable, not washed out -------- */
html[data-theme="light"] .topbar,
body[data-theme="light"] .topbar{
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(248,252,255,.86)) !important;
  border-bottom:1px solid rgba(99,123,160,.24) !important;
  box-shadow:0 10px 30px rgba(21,45,86,.08), inset 0 1px 0 rgba(255,255,255,.96) !important;
  color:#0f172a !important;
}
html[data-theme="light"] .topbar-title h2,
html[data-theme="light"] .topbar .user-meta p:first-child,
html[data-theme="light"] #displayNama,
body[data-theme="light"] .topbar-title h2,
body[data-theme="light"] .topbar .user-meta p:first-child,
body[data-theme="light"] #displayNama{
  color:#0b1220 !important;
  text-shadow:none !important;
}
html[data-theme="light"] .topbar-title p,
html[data-theme="light"] .topbar .user-meta p:last-child,
html[data-theme="light"] #displayLevel,
body[data-theme="light"] .topbar-title p,
body[data-theme="light"] .topbar .user-meta p:last-child,
body[data-theme="light"] #displayLevel{
  color:#516680 !important;
}
html[data-theme="light"] .topbar-title-mark,
html[data-theme="light"] .icon-button,
html[data-theme="light"] .apj-theme-toggle,
body[data-theme="light"] .topbar-title-mark,
body[data-theme="light"] .icon-button,
body[data-theme="light"] .apj-theme-toggle{
  background:linear-gradient(180deg,#ffffff,#f0f7ff) !important;
  border:1px solid rgba(99,123,160,.28) !important;
  color:#2563eb !important;
  box-shadow:0 10px 24px rgba(21,45,86,.09), inset 0 1px 0 rgba(255,255,255,.95) !important;
}
html[data-theme="light"] .user-avatar,
body[data-theme="light"] .user-avatar{
  background:linear-gradient(135deg,#2563eb,#0ea5e9) !important;
  color:#fff !important;
  box-shadow:0 16px 32px rgba(37,99,235,.25), inset 0 1px 0 rgba(255,255,255,.18) !important;
}

/* -------- General text safety inside main content -------- */
html[data-theme="light"] main .text-white,
html[data-theme="light"] .page-scroll .text-white,
html[data-theme="light"] .modal-content .text-white,
html[data-theme="light"] .help-modal-card .text-white,
html[data-theme="light"] .apj-modal-card .text-white,
body[data-theme="light"] main .text-white,
body[data-theme="light"] .page-scroll .text-white,
body[data-theme="light"] .modal-content .text-white,
body[data-theme="light"] .help-modal-card .text-white,
body[data-theme="light"] .apj-modal-card .text-white{
  color:#0b1220 !important;
}
html[data-theme="light"] main .text-slate-300,
html[data-theme="light"] main .text-slate-400,
html[data-theme="light"] main .text-slate-500,
html[data-theme="light"] .page-scroll .text-slate-300,
html[data-theme="light"] .page-scroll .text-slate-400,
html[data-theme="light"] .page-scroll .text-slate-500,
html[data-theme="light"] .modal-content .text-slate-300,
html[data-theme="light"] .modal-content .text-slate-400,
html[data-theme="light"] .modal-content .text-slate-500,
body[data-theme="light"] main .text-slate-300,
body[data-theme="light"] main .text-slate-400,
body[data-theme="light"] main .text-slate-500,
body[data-theme="light"] .page-scroll .text-slate-300,
body[data-theme="light"] .page-scroll .text-slate-400,
body[data-theme="light"] .page-scroll .text-slate-500,
body[data-theme="light"] .modal-content .text-slate-300,
body[data-theme="light"] .modal-content .text-slate-400,
body[data-theme="light"] .modal-content .text-slate-500{
  color:#5b6f8a !important;
}
html[data-theme="light"] main .text-blue-200,
html[data-theme="light"] .page-scroll .text-blue-200,
html[data-theme="light"] .modal-content .text-blue-200,
body[data-theme="light"] main .text-blue-200,
body[data-theme="light"] .page-scroll .text-blue-200,
body[data-theme="light"] .modal-content .text-blue-200{
  color:#1d4ed8 !important;
}
html[data-theme="light"] main .text-cyan-200,
html[data-theme="light"] .page-scroll .text-cyan-200,
body[data-theme="light"] main .text-cyan-200,
body[data-theme="light"] .page-scroll .text-cyan-200{
  color:#0891b2 !important;
}
html[data-theme="light"] .hero-title,
html[data-theme="light"] .panel-title h3,
html[data-theme="light"] .mini-stat strong,
html[data-theme="light"] .mini-stat .stat-value,
html[data-theme="light"] .quick-menu-title,
body[data-theme="light"] .hero-title,
body[data-theme="light"] .panel-title h3,
body[data-theme="light"] .mini-stat strong,
body[data-theme="light"] .mini-stat .stat-value,
body[data-theme="light"] .quick-menu-title{
  color:#0b1220 !important;
}
html[data-theme="light"] .hero-desc,
html[data-theme="light"] .panel-title p,
html[data-theme="light"] .mini-stat p,
html[data-theme="light"] .quick-menu-desc,
body[data-theme="light"] .hero-desc,
body[data-theme="light"] .panel-title p,
body[data-theme="light"] .mini-stat p,
body[data-theme="light"] .quick-menu-desc{
  color:#566b85 !important;
}

/* -------- Pastel premium cards: color, but not noisy -------- */
html[data-theme="light"] .hero-card,
body[data-theme="light"] .hero-card{
  background:
    radial-gradient(circle at 90% 8%,rgba(37,99,235,.16),transparent 32%),
    radial-gradient(circle at 3% 100%,rgba(6,182,212,.10),transparent 30%),
    linear-gradient(135deg,rgba(255,255,255,.96),rgba(232,242,255,.86)) !important;
  border:1px solid rgba(96,165,250,.24) !important;
  box-shadow:0 20px 56px rgba(37,63,103,.13), inset 0 1px 0 rgba(255,255,255,.98) !important;
}
html[data-theme="light"] .hero-card::before,
body[data-theme="light"] .hero-card::before{
  background:rgba(37,99,235,.12) !important;
}
html[data-theme="light"] .hero-card::after,
body[data-theme="light"] .hero-card::after{
  background:rgba(6,182,212,.10) !important;
}
html[data-theme="light"] .panel,
html[data-theme="light"] .mini-stat,
html[data-theme="light"] .print-action-card,
body[data-theme="light"] .panel,
body[data-theme="light"] .mini-stat,
body[data-theme="light"] .print-action-card{
  background:
    radial-gradient(circle at 100% 0%,rgba(37,99,235,.055),transparent 32%),
    linear-gradient(180deg,rgba(255,255,255,.96),rgba(247,251,255,.88)) !important;
  border:1px solid rgba(99,123,160,.28) !important;
  color:#0f172a !important;
  box-shadow:var(--apj-light-shadow-soft) !important;
}
html[data-theme="light"] .mini-stat:nth-child(3n+1),
body[data-theme="light"] .mini-stat:nth-child(3n+1){background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(232,242,255,.88)) !important}
html[data-theme="light"] .mini-stat:nth-child(3n+2),
body[data-theme="light"] .mini-stat:nth-child(3n+2){background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(229,250,245,.88)) !important}
html[data-theme="light"] .mini-stat:nth-child(3n),
body[data-theme="light"] .mini-stat:nth-child(3n){background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(255,247,226,.88)) !important}
html[data-theme="light"] .soft-badge,
body[data-theme="light"] .soft-badge{
  background:linear-gradient(135deg,rgba(37,99,235,.11),rgba(6,182,212,.07)) !important;
  border-color:rgba(37,99,235,.22) !important;
  color:#1d4ed8 !important;
  box-shadow:0 8px 18px rgba(37,99,235,.08), inset 0 1px 0 rgba(255,255,255,.80) !important;
}
html[data-theme="light"] .info-card,
body[data-theme="light"] .info-card{
  background:linear-gradient(135deg,rgba(239,246,255,.92),rgba(224,242,254,.72)) !important;
  border-color:rgba(96,165,250,.24) !important;
  color:#435873 !important;
}
html[data-theme="light"] .rounded-2xl.border.border-blue-500\/20,
body[data-theme="light"] .rounded-2xl.border.border-blue-500\/20{
  background:linear-gradient(135deg,rgba(219,234,254,.92),rgba(224,242,254,.72)) !important;
  border-color:rgba(96,165,250,.26) !important;
  color:#1e3a8a !important;
}
html[data-theme="light"] #namaPetugas,
body[data-theme="light"] #namaPetugas{
  color:#0b1220 !important;
}

/* -------- Inputs / selects: never gray washed-out -------- */
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea,
html[data-theme="light"] .form-control,
html[data-theme="light"] .apj-input,
html[data-theme="light"] .apj-select,
html[data-theme="light"] .apj-textarea,
body[data-theme="light"] input,
body[data-theme="light"] select,
body[data-theme="light"] textarea,
body[data-theme="light"] .form-control,
body[data-theme="light"] .apj-input,
body[data-theme="light"] .apj-select,
body[data-theme="light"] .apj-textarea{
  background:linear-gradient(180deg,#ffffff,#f7fbff) !important;
  border:1px solid rgba(99,123,160,.34) !important;
  color:#0b1220 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.98) !important;
}
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder,
body[data-theme="light"] input::placeholder,
body[data-theme="light"] textarea::placeholder{
  color:#8aa0bb !important;
}
html[data-theme="light"] input:focus,
html[data-theme="light"] select:focus,
html[data-theme="light"] textarea:focus,
html[data-theme="light"] .form-control:focus,
body[data-theme="light"] input:focus,
body[data-theme="light"] select:focus,
body[data-theme="light"] textarea:focus,
body[data-theme="light"] .form-control:focus{
  border-color:rgba(37,99,235,.60) !important;
  box-shadow:0 0 0 4px rgba(37,99,235,.13), inset 0 1px 0 rgba(255,255,255,.98) !important;
  outline:none !important;
}
html[data-theme="light"] input:disabled,
html[data-theme="light"] select:disabled,
body[data-theme="light"] input:disabled,
body[data-theme="light"] select:disabled{
  background:#eef4fb !important;
  color:#71849f !important;
}

/* -------- Table: bright, clear, branded -------- */
html[data-theme="light"] .table-shell,
html[data-theme="light"] .table-scroll,
html[data-theme="light"] .apj-table-wrap,
body[data-theme="light"] .table-shell,
body[data-theme="light"] .table-scroll,
body[data-theme="light"] .apj-table-wrap{
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(240,247,255,.90)) !important;
  border-color:rgba(99,123,160,.30) !important;
  box-shadow:0 18px 46px rgba(21,45,86,.10), inset 0 1px 0 rgba(255,255,255,.94) !important;
}
html[data-theme="light"] .thead-row,
html[data-theme="light"] .table-shell thead,
html[data-theme="light"] .apj-table thead,
body[data-theme="light"] .thead-row,
body[data-theme="light"] .table-shell thead,
body[data-theme="light"] .apj-table thead{
  background:linear-gradient(180deg,#e8f2ff,#dbeafe) !important;
  color:#405670 !important;
  border-bottom:1px solid rgba(99,123,160,.30) !important;
}
html[data-theme="light"] .table-shell th,
body[data-theme="light"] .table-shell th{
  color:#405670 !important;
}
html[data-theme="light"] .table-shell tbody tr.item-row,
html[data-theme="light"] #itemTableBody tr.item-row,
body[data-theme="light"] .table-shell tbody tr.item-row,
body[data-theme="light"] #itemTableBody tr.item-row{
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,252,255,.92)) !important;
  border-bottom:1px solid rgba(99,123,160,.22) !important;
  color:#0b1220 !important;
}
html[data-theme="light"] .table-shell tbody tr.item-row:hover,
html[data-theme="light"] #itemTableBody tr.item-row:hover,
body[data-theme="light"] .table-shell tbody tr.item-row:hover,
body[data-theme="light"] #itemTableBody tr.item-row:hover{
  background:linear-gradient(180deg,#ffffff,#eef6ff) !important;
}
html[data-theme="light"] .table-shell td,
body[data-theme="light"] .table-shell td{
  border-color:rgba(99,123,160,.18) !important;
}
html[data-theme="light"] #itemTableBody .label-stok,
body[data-theme="light"] #itemTableBody .label-stok{
  color:#059669 !important;
}
html[data-theme="light"] #itemTableBody .label-satuan-stok,
body[data-theme="light"] #itemTableBody .label-satuan-stok{
  color:#1d4ed8 !important;
}
html[data-theme="light"] #itemTableBody .label-satuan-beli,
body[data-theme="light"] #itemTableBody .label-satuan-beli{
  color:#60758f !important;
}
html[data-theme="light"] #itemTableBody button,
body[data-theme="light"] #itemTableBody button{
  color:#be123c !important;
}
html[data-theme="light"] .table-shell .bg-slate-950\/60,
body[data-theme="light"] .table-shell .bg-slate-950\/60,
html[data-theme="light"] .table-shell > div:last-child,
body[data-theme="light"] .table-shell > div:last-child{
  background:linear-gradient(180deg,rgba(232,242,255,.92),rgba(219,234,254,.78)) !important;
  border-top:1px solid rgba(99,123,160,.26) !important;
}
html[data-theme="light"] #btnTambahBaris,
body[data-theme="light"] #btnTambahBaris{
  color:#1d4ed8 !important;
}
html[data-theme="light"] #btnTambahBaris:hover,
body[data-theme="light"] #btnTambahBaris:hover{
  color:#0891b2 !important;
}

/* Preparation area: no dark gray blocks in light mode */
html[data-theme="light"] #itemTableBody tr.prep-row,
body[data-theme="light"] #itemTableBody tr.prep-row{
  background:linear-gradient(180deg,rgba(232,242,255,.82),rgba(240,249,255,.80)) !important;
  border-bottom:1px solid rgba(96,165,250,.22) !important;
}
html[data-theme="light"] #itemTableBody tr.prep-row > td > div,
body[data-theme="light"] #itemTableBody tr.prep-row > td > div{
  background:
    radial-gradient(circle at 100% 0%,rgba(37,99,235,.08),transparent 32%),
    linear-gradient(135deg,rgba(239,246,255,.96),rgba(224,242,254,.84)) !important;
  border-color:rgba(96,165,250,.26) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.86) !important;
}
html[data-theme="light"] #itemTableBody tr.prep-row label,
body[data-theme="light"] #itemTableBody tr.prep-row label{
  background:linear-gradient(180deg,#ffffff,#f7fbff) !important;
  border-color:rgba(99,123,160,.26) !important;
  color:#0b1220 !important;
}
html[data-theme="light"] #itemTableBody tr.prep-row .text-blue-300,
body[data-theme="light"] #itemTableBody tr.prep-row .text-blue-300{
  color:#1d4ed8 !important;
}
html[data-theme="light"] #itemTableBody tr.prep-row .text-slate-400,
body[data-theme="light"] #itemTableBody tr.prep-row .text-slate-400{
  color:#5b6f8a !important;
}
html[data-theme="light"] #itemTableBody tr.prep-row .prep-total.text-emerald-300,
body[data-theme="light"] #itemTableBody tr.prep-row .prep-total.text-emerald-300{
  color:#059669 !important;
}
html[data-theme="light"] #itemTableBody tr.prep-row .prep-total.text-amber-300,
body[data-theme="light"] #itemTableBody tr.prep-row .prep-total.text-amber-300{
  color:#d97706 !important;
}

/* Buttons with personality */
html[data-theme="light"] .btn-primary,
body[data-theme="light"] .btn-primary{
  background:linear-gradient(135deg,#2563eb 0%,#0ea5e9 100%) !important;
  color:#ffffff !important;
  border:0 !important;
  box-shadow:0 16px 34px rgba(37,99,235,.26), inset 0 1px 0 rgba(255,255,255,.20) !important;
}
html[data-theme="light"] .btn-primary:hover,
body[data-theme="light"] .btn-primary:hover{
  filter:brightness(1.04) !important;
  transform:translateY(-1px) !important;
}
html[data-theme="light"] .btn-emerald,
body[data-theme="light"] .btn-emerald,
html[data-theme="light"] button.form-control.text-emerald-300,
body[data-theme="light"] button.form-control.text-emerald-300{
  background:linear-gradient(135deg,rgba(16,185,129,.16),rgba(6,182,212,.10)) !important;
  border-color:rgba(16,185,129,.30) !important;
  color:#047857 !important;
  box-shadow:0 10px 22px rgba(16,185,129,.10), inset 0 1px 0 rgba(255,255,255,.82) !important;
}
html[data-theme="light"] button.form-control.text-emerald-300:hover,
body[data-theme="light"] button.form-control.text-emerald-300:hover{
  background:linear-gradient(135deg,rgba(16,185,129,.22),rgba(6,182,212,.14)) !important;
}

/* Dashboard right rail / quick cards / list rows */
html[data-theme="light"] .quick-menu-item,
html[data-theme="light"] .quick-card,
html[data-theme="light"] .category-row,
html[data-theme="light"] .activity-row,
html[data-theme="light"] .location-row,
html[data-theme="light"] .soft-row,
body[data-theme="light"] .quick-menu-item,
body[data-theme="light"] .quick-card,
body[data-theme="light"] .category-row,
body[data-theme="light"] .activity-row,
body[data-theme="light"] .location-row,
body[data-theme="light"] .soft-row{
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(242,248,255,.88)) !important;
  border-color:rgba(99,123,160,.28) !important;
  color:#0b1220 !important;
  box-shadow:0 10px 26px rgba(21,45,86,.08), inset 0 1px 0 rgba(255,255,255,.86) !important;
}
html[data-theme="light"] .quick-menu-item:hover,
html[data-theme="light"] .quick-card:hover,
body[data-theme="light"] .quick-menu-item:hover,
body[data-theme="light"] .quick-card:hover{
  background:linear-gradient(180deg,#ffffff,#edf6ff) !important;
  border-color:rgba(37,99,235,.24) !important;
  transform:translateY(-1px) !important;
}
html[data-theme="light"] .calendar-card,
html[data-theme="light"] .calendar,
body[data-theme="light"] .calendar-card,
body[data-theme="light"] .calendar{
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(244,250,255,.90)) !important;
  border-color:rgba(99,123,160,.28) !important;
  color:#0b1220 !important;
}
html[data-theme="light"] .calendar-day,
body[data-theme="light"] .calendar-day{
  color:#0b1220 !important;
}
html[data-theme="light"] .calendar-day.today,
body[data-theme="light"] .calendar-day.today{
  background:linear-gradient(135deg,#2563eb,#0ea5e9) !important;
  color:#fff !important;
  box-shadow:0 10px 22px rgba(37,99,235,.24) !important;
}

/* Modals: guide / print / logout / login */
html[data-theme="light"] .modal-overlay,
body[data-theme="light"] .modal-overlay{
  background:rgba(15,23,42,.38) !important;
  backdrop-filter:blur(8px) !important;
}
html[data-theme="light"] .help-modal-card,
html[data-theme="light"] .modal-content,
html[data-theme="light"] .apj-modal-card,
body[data-theme="light"] .help-modal-card,
body[data-theme="light"] .modal-content,
body[data-theme="light"] .apj-modal-card{
  background:
    radial-gradient(circle at 92% 4%,rgba(37,99,235,.16),transparent 30%),
    radial-gradient(circle at 0% 100%,rgba(6,182,212,.11),transparent 30%),
    linear-gradient(180deg,rgba(255,255,255,.98),rgba(245,250,255,.96)) !important;
  border:1px solid rgba(96,165,250,.30) !important;
  color:#0b1220 !important;
  box-shadow:0 28px 88px rgba(15,23,42,.22), inset 0 1px 0 rgba(255,255,255,.96) !important;
}
html[data-theme="light"] .help-modal-card::before,
body[data-theme="light"] .help-modal-card::before{
  background:rgba(37,99,235,.13) !important;
}
html[data-theme="light"] .help-modal-card h2,
html[data-theme="light"] .help-modal-card h3,
html[data-theme="light"] .modal-content h3,
html[data-theme="light"] .apj-modal-title,
body[data-theme="light"] .help-modal-card h2,
body[data-theme="light"] .help-modal-card h3,
body[data-theme="light"] .modal-content h3,
body[data-theme="light"] .apj-modal-title{
  color:#0b1220 !important;
}
html[data-theme="light"] .help-modal-card p,
html[data-theme="light"] .modal-content p,
html[data-theme="light"] .apj-modal-subtitle,
body[data-theme="light"] .help-modal-card p,
body[data-theme="light"] .modal-content p,
body[data-theme="light"] .apj-modal-subtitle{
  color:#526985 !important;
}
html[data-theme="light"] .help-step,
body[data-theme="light"] .help-step{
  background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(239,246,255,.78)) !important;
  border-color:rgba(96,165,250,.22) !important;
  color:#0b1220 !important;
}
html[data-theme="light"] .help-step-number,
body[data-theme="light"] .help-step-number{
  background:linear-gradient(135deg,rgba(37,99,235,.15),rgba(6,182,212,.10)) !important;
  border-color:rgba(37,99,235,.25) !important;
  color:#1d4ed8 !important;
}
html[data-theme="light"] #inputHelpModal .rounded-2xl.border-amber-500\/22,
body[data-theme="light"] #inputHelpModal .rounded-2xl.border-amber-500\/22{
  background:linear-gradient(135deg,#fff7ed,#fef3c7) !important;
  border-color:rgba(245,158,11,.34) !important;
}
html[data-theme="light"] #inputHelpModal .text-amber-100,
body[data-theme="light"] #inputHelpModal .text-amber-100{
  color:#92400e !important;
}
html[data-theme="light"] .modal-content button[class*="bg-slate-800"],
html[data-theme="light"] .modal-content button[class*="bg-slate-700"],
body[data-theme="light"] .modal-content button[class*="bg-slate-800"],
body[data-theme="light"] .modal-content button[class*="bg-slate-700"]{
  background:#eaf2fb !important;
  color:#334155 !important;
  border-color:rgba(99,123,160,.30) !important;
}
html[data-theme="light"] .modal-content .bg-slate-950\/70,
html[data-theme="light"] .modal-content .bg-slate-900,
body[data-theme="light"] .modal-content .bg-slate-950\/70,
body[data-theme="light"] .modal-content .bg-slate-900{
  background:rgba(239,246,255,.86) !important;
  border-color:rgba(99,123,160,.28) !important;
}
html[data-theme="light"] .modal-close,
html[data-theme="light"] .apj-modal-close,
html[data-theme="light"] button[aria-label="Tutup"],
body[data-theme="light"] .modal-close,
body[data-theme="light"] .apj-modal-close,
body[data-theme="light"] button[aria-label="Tutup"]{
  background:#eaf2fb !important;
  color:#334155 !important;
  border-color:rgba(99,123,160,.30) !important;
}

/* Login page premium light */
html[data-theme="light"] .apj-login-shell,
html[data-theme="light"] .apj-auth-shell,
body[data-theme="light"] .apj-login-shell,
body[data-theme="light"] .apj-auth-shell{
  background:
    radial-gradient(circle at 16% 22%,rgba(37,99,235,.13),transparent 30%),
    radial-gradient(circle at 86% 18%,rgba(6,182,212,.10),transparent 28%),
    linear-gradient(135deg,#f8fbff,#eef6ff 54%,#e6f0fb) !important;
  color:#0b1220 !important;
}
html[data-theme="light"] .apj-card,
html[data-theme="light"] .apj-login-card,
html[data-theme="light"] .apj-feature-card,
body[data-theme="light"] .apj-card,
body[data-theme="light"] .apj-login-card,
body[data-theme="light"] .apj-feature-card{
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(244,250,255,.88)) !important;
  border-color:rgba(99,123,160,.28) !important;
  color:#0b1220 !important;
  box-shadow:0 22px 60px rgba(21,45,86,.13), inset 0 1px 0 rgba(255,255,255,.94) !important;
}
html[data-theme="light"] .apj-login-title,
html[data-theme="light"] .apj-login-heading h1,
html[data-theme="light"] .apj-feature-value,
body[data-theme="light"] .apj-login-title,
body[data-theme="light"] .apj-login-heading h1,
body[data-theme="light"] .apj-feature-value{
  color:#0b1220 !important;
}
html[data-theme="light"] .apj-login-text,
html[data-theme="light"] .apj-login-heading p,
html[data-theme="light"] .apj-feature-label,
html[data-theme="light"] .apj-help-text,
html[data-theme="light"] .apj-login-footer,
body[data-theme="light"] .apj-login-text,
body[data-theme="light"] .apj-login-heading p,
body[data-theme="light"] .apj-feature-label,
body[data-theme="light"] .apj-help-text,
body[data-theme="light"] .apj-login-footer{
  color:#566b85 !important;
}

/* Toast light readability */
html[data-theme="light"] .toast,
html[data-theme="light"] .apj-toast,
body[data-theme="light"] .toast,
body[data-theme="light"] .apj-toast{
  color:#0b1220 !important;
}
html[data-theme="light"] .toast-card,
html[data-theme="light"] .apj-toast-inner,
body[data-theme="light"] .toast-card,
body[data-theme="light"] .apj-toast-inner{
  background:rgba(255,255,255,.96) !important;
  border:1px solid rgba(99,123,160,.30) !important;
  color:#0b1220 !important;
  box-shadow:0 20px 54px rgba(15,23,42,.18), inset 0 1px 0 rgba(255,255,255,.92) !important;
}

/* Mobile responsive cards in light */
@media screen and (max-width:768px){
  html[data-theme="light"] .table-scroll tr,
  body[data-theme="light"] .table-scroll tr{
    background:linear-gradient(180deg,#ffffff,#f0f7ff) !important;
    border-color:rgba(99,123,160,.30) !important;
    color:#0b1220 !important;
  }
  html[data-theme="light"] .table-scroll td,
  body[data-theme="light"] .table-scroll td{
    border-bottom-color:rgba(99,123,160,.18) !important;
  }
  html[data-theme="light"] .table-scroll td::before,
  body[data-theme="light"] .table-scroll td::before{
    color:#526985 !important;
  }
}

/* =========================================================
   APP-APJ V1.5 - LIGHT/DARK HARMONY FINAL LAYER
   Tujuan: Light mode tidak polos, teks jelas, toast/notifikasi terbaca,
   dan komponen legacy tetap selaras untuk halaman baru berikutnya.
   Load terakhir di apj-theme.css supaya menang dari CSS lama/Tailwind.
   ========================================================= */

:root{
  --apj-theme-blue:#2563eb;
  --apj-theme-cyan:#06b6d4;
  --apj-theme-emerald:#10b981;
  --apj-theme-amber:#f59e0b;
  --apj-theme-rose:#f43f5e;
}

html[data-theme="light"]{
  color-scheme:light;
  --apj-light-bg:#eef5ff;
  --apj-light-bg-2:#f8fbff;
  --apj-light-card:#ffffff;
  --apj-light-card-2:#f3f8ff;
  --apj-light-card-3:#eaf4ff;
  --apj-light-text:#0b1220;
  --apj-light-title:#111827;
  --apj-light-muted:#50637d;
  --apj-light-muted-2:#7a8da6;
  --apj-light-border:#c9d7ea;
  --apj-light-border-2:#b9cbe2;
  --apj-light-shadow:0 22px 55px rgba(31,55,92,.12), inset 0 1px 0 rgba(255,255,255,.92);

  --bg:#eef5ff !important;
  --bg-2:#dceaf8 !important;
  --surface:rgba(255,255,255,.94) !important;
  --surface-solid:#ffffff !important;
  --surface-soft:rgba(239,247,255,.90) !important;
  --surface-muted:rgba(232,241,252,.92) !important;
  --text:#0b1220 !important;
  --muted:#50637d !important;
  --muted-2:#7a8da6 !important;
  --border:rgba(151,170,196,.46) !important;
  --border-strong:rgba(37,99,235,.32) !important;
  --shadow:0 24px 72px rgba(31,55,92,.14), inset 0 1px 0 rgba(255,255,255,.92) !important;
  --shadow-soft:0 16px 42px rgba(31,55,92,.11), inset 0 1px 0 rgba(255,255,255,.86) !important;

  --apj-bg:#eef5ff !important;
  --apj-bg-2:#f8fbff !important;
  --apj-bg-3:#dceaf8 !important;
  --apj-surface:rgba(255,255,255,.94) !important;
  --apj-surface-2:rgba(239,247,255,.90) !important;
  --apj-surface-3:rgba(219,234,254,.74) !important;
  --apj-border:rgba(151,170,196,.46) !important;
  --apj-border-soft:rgba(37,99,235,.15) !important;
  --apj-text:#0b1220 !important;
  --apj-muted:#50637d !important;
  --apj-muted-2:#7a8da6 !important;
}

html[data-theme="light"] body{
  color:var(--apj-light-text) !important;
  background:
    radial-gradient(circle at 16% 17%, rgba(37,99,235,.16), transparent 30%),
    radial-gradient(circle at 84% 13%, rgba(6,182,212,.13), transparent 28%),
    radial-gradient(circle at 77% 82%, rgba(16,185,129,.10), transparent 26%),
    radial-gradient(circle at 12% 88%, rgba(245,158,11,.08), transparent 26%),
    linear-gradient(135deg,#f8fbff 0%,#eef6ff 48%,#e3edf8 100%) !important;
}
html[data-theme="light"] body::before{
  background-image:
    linear-gradient(rgba(37,99,235,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,99,235,.045) 1px, transparent 1px) !important;
  opacity:.9 !important;
}

/* Topbar light: terang tapi tetap berwarna, bukan polos */
html[data-theme="light"] .topbar,
html[data-theme="light"] .apj-topbar{
  background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(239,247,255,.88)) !important;
  border-bottom:1px solid rgba(151,170,196,.44) !important;
  box-shadow:0 12px 34px rgba(31,55,92,.08), inset 0 1px 0 rgba(255,255,255,.95) !important;
  color:#0b1220 !important;
}
html[data-theme="light"] .topbar-title h2,
html[data-theme="light"] .apj-topbar-title,
html[data-theme="light"] .apj-user-name,
html[data-theme="light"] .user-meta p:first-child{
  color:#0b1220 !important;
}
html[data-theme="light"] .topbar-title p,
html[data-theme="light"] .apj-page-subtitle,
html[data-theme="light"] .apj-user-meta,
html[data-theme="light"] .user-meta p:last-child{
  color:#50637d !important;
}
html[data-theme="light"] .topbar-title-mark,
html[data-theme="light"] .icon-button,
html[data-theme="light"] .apj-theme-toggle{
  background:linear-gradient(135deg,#ffffff,#edf6ff) !important;
  border:1px solid rgba(151,170,196,.44) !important;
  color:#2563eb !important;
  box-shadow:0 12px 24px rgba(31,55,92,.08), inset 0 1px 0 rgba(255,255,255,.96) !important;
}
html[data-theme="light"] .topbar-title-mark:hover,
html[data-theme="light"] .icon-button:hover,
html[data-theme="light"] .apj-theme-toggle:hover{
  background:linear-gradient(135deg,#ffffff,#e1f2ff) !important;
  border-color:rgba(37,99,235,.32) !important;
}

/* Sidebar tetap navy di light mode: brand kuat, teks jelas */
html[data-theme="light"] #sidebar.apj-sidebar,
html[data-theme="light"] .apj-sidebar{
  background:linear-gradient(180deg,#0f1b31 0%,#111c33 48%,#0a1224 100%) !important;
  border-right:1px solid rgba(148,163,184,.18) !important;
  box-shadow:18px 0 58px rgba(15,23,42,.24), inset 0 1px 0 rgba(255,255,255,.06) !important;
  color:#f8fafc !important;
}
html[data-theme="light"] #sidebar .brand-text p:first-child,
html[data-theme="light"] #sidebar .text-white{color:#f8fafc !important}
html[data-theme="light"] #sidebar .brand-text p:last-child,
html[data-theme="light"] #sidebar .text-violet-300{color:#38bdf8 !important}
html[data-theme="light"] #sidebar .menu-label{color:rgba(203,213,225,.64) !important}
html[data-theme="light"] #sidebar .nav-item,
html[data-theme="light"] #sidebar .nav-group-toggle{color:rgba(203,213,225,.72) !important}
html[data-theme="light"] #sidebar .nav-item:hover,
html[data-theme="light"] #sidebar .nav-group-toggle:hover{color:#fff !important;background:rgba(37,99,235,.16) !important;border-color:rgba(96,165,250,.22) !important}
html[data-theme="light"] #sidebar .nav-item.active,
html[data-theme="light"] #sidebar .nav-group.open > .nav-group-toggle{
  color:#fff !important;
  background:linear-gradient(135deg,rgba(37,99,235,.35),rgba(6,182,212,.16)) !important;
  border-color:rgba(125,211,252,.28) !important;
  box-shadow:0 12px 28px rgba(37,99,235,.18), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
html[data-theme="light"] #sidebar .nav-submenu{border-left-color:rgba(59,130,246,.24) !important}
html[data-theme="light"] #sidebar .nav-lock{
  background:rgba(245,158,11,.16) !important;
  border-color:rgba(245,158,11,.28) !important;
  color:#fbbf24 !important;
}
html[data-theme="light"] #sidebar .logout-button{
  background:rgba(244,63,94,.13) !important;
  border-color:rgba(244,63,94,.28) !important;
  color:#fb7185 !important;
}
html[data-theme="light"] #sidebar .logout-button:hover{background:rgba(244,63,94,.20) !important;color:#fecdd3 !important}

/* Main surfaces: premium light dengan warna pemanis */
html[data-theme="light"] .page-scroll,
html[data-theme="light"] .apj-page,
html[data-theme="light"] .apj-main{
  color:#0b1220 !important;
}
html[data-theme="light"] .hero-card,
html[data-theme="light"] .apj-hero{
  background:
    radial-gradient(circle at 80% 12%,rgba(37,99,235,.14),transparent 34%),
    radial-gradient(circle at 18% 88%,rgba(6,182,212,.10),transparent 30%),
    linear-gradient(135deg,rgba(255,255,255,.96),rgba(232,242,255,.88)) !important;
  border-color:rgba(151,170,196,.46) !important;
  box-shadow:0 22px 58px rgba(31,55,92,.13), inset 0 1px 0 rgba(255,255,255,.92) !important;
  color:#0b1220 !important;
}
html[data-theme="light"] .panel,
html[data-theme="light"] .mini-stat,
html[data-theme="light"] .print-action-card,
html[data-theme="light"] .info-card,
html[data-theme="light"] .apj-panel,
html[data-theme="light"] .apj-card,
html[data-theme="light"] .stat-card,
html[data-theme="light"] .kpi-card,
html[data-theme="light"] .soft-row,
html[data-theme="light"] .quick-menu-card,
html[data-theme="light"] .calendar-card{
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(241,248,255,.86)) !important;
  border:1px solid rgba(151,170,196,.42) !important;
  box-shadow:0 16px 42px rgba(31,55,92,.10), inset 0 1px 0 rgba(255,255,255,.92) !important;
  color:#0b1220 !important;
}
html[data-theme="light"] .mini-stat:nth-child(2n),
html[data-theme="light"] .stat-card:nth-child(2n){background:linear-gradient(180deg,#ffffff,#eefdf8) !important}
html[data-theme="light"] .mini-stat:nth-child(3n),
html[data-theme="light"] .stat-card:nth-child(3n){background:linear-gradient(180deg,#ffffff,#fff4e5) !important}
html[data-theme="light"] .mini-stat:nth-child(4n),
html[data-theme="light"] .stat-card:nth-child(4n){background:linear-gradient(180deg,#ffffff,#eff6ff) !important}

html[data-theme="light"] .hero-title,
html[data-theme="light"] .panel-title h3,
html[data-theme="light"] .mini-stat strong,
html[data-theme="light"] .mini-stat .stat-value,
html[data-theme="light"] .quick-menu-title,
html[data-theme="light"] .form-title,
html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4{color:#0b1220 !important}
html[data-theme="light"] .hero-desc,
html[data-theme="light"] .panel-title p,
html[data-theme="light"] .mini-stat p,
html[data-theme="light"] .quick-menu-desc,
html[data-theme="light"] .text-slate-400,
html[data-theme="light"] .text-slate-500,
html[data-theme="light"] .text-slate-300{color:#50637d !important}
html[data-theme="light"] .soft-badge,
html[data-theme="light"] .apj-kicker,
html[data-theme="light"] .apj-version-pill{
  background:linear-gradient(135deg,rgba(37,99,235,.10),rgba(6,182,212,.07)) !important;
  border-color:rgba(37,99,235,.22) !important;
  color:#1d4ed8 !important;
}

/* Forms/tables light: bukan abu kusam */
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea,
html[data-theme="light"] .form-control,
html[data-theme="light"] .apj-input,
html[data-theme="light"] .apj-select,
html[data-theme="light"] .apj-textarea{
  background:linear-gradient(180deg,#ffffff,#f3f8ff) !important;
  border:1px solid rgba(151,170,196,.48) !important;
  color:#0b1220 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92) !important;
}
html[data-theme="light"] input:focus,
html[data-theme="light"] select:focus,
html[data-theme="light"] textarea:focus,
html[data-theme="light"] .form-control:focus{
  border-color:rgba(37,99,235,.55) !important;
  box-shadow:0 0 0 4px rgba(37,99,235,.13), inset 0 1px 0 rgba(255,255,255,.95) !important;
}
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder{color:#8aa0ba !important}
html[data-theme="light"] label,
html[data-theme="light"] .form-label{color:#42556f !important}

html[data-theme="light"] .table-shell,
html[data-theme="light"] .table-wrap,
html[data-theme="light"] .table-scroll,
html[data-theme="light"] .apj-table-wrap{
  background:linear-gradient(180deg,#ffffff,#f4f9ff) !important;
  border-color:rgba(151,170,196,.44) !important;
  box-shadow:0 14px 36px rgba(31,55,92,.08), inset 0 1px 0 rgba(255,255,255,.92) !important;
}
html[data-theme="light"] .thead-row,
html[data-theme="light"] thead,
html[data-theme="light"] .apj-table thead{
  background:linear-gradient(180deg,#edf6ff,#e6f0fb) !important;
  color:#42556f !important;
  border-color:rgba(151,170,196,.40) !important;
}
html[data-theme="light"] tbody tr,
html[data-theme="light"] .apj-table tbody tr{
  background:rgba(255,255,255,.82) !important;
  color:#0b1220 !important;
}
html[data-theme="light"] tbody tr:nth-child(even){background:rgba(241,248,255,.86) !important}
html[data-theme="light"] td,
html[data-theme="light"] th{border-color:rgba(151,170,196,.32) !important}

/* Input stok: area preparasi dan print modal lebih jelas */
html[data-theme="light"] #itemsContainer,
html[data-theme="light"] #inputTable,
html[data-theme="light"] .prep-container,
html[data-theme="light"] [id*="prep"],
html[data-theme="light"] [class*="preparasi"],
html[data-theme="light"] .preparation-panel{
  color:#0b1220 !important;
}
html[data-theme="light"] .apj-main .bg-slate-950,
html[data-theme="light"] .apj-main .bg-slate-950\/70,
html[data-theme="light"] .apj-main .bg-slate-900,
html[data-theme="light"] .apj-main .bg-slate-800,
html[data-theme="light"] .modal-content .bg-slate-950,
html[data-theme="light"] .modal-content .bg-slate-950\/70,
html[data-theme="light"] .modal-content .bg-slate-900,
html[data-theme="light"] .modal-content .bg-slate-800{
  background:linear-gradient(180deg,#ffffff,#eef6ff) !important;
  color:#0b1220 !important;
  border-color:rgba(151,170,196,.40) !important;
}
html[data-theme="light"] .apj-main .border-slate-700,
html[data-theme="light"] .apj-main .border-slate-600,
html[data-theme="light"] .modal-content .border-slate-700,
html[data-theme="light"] .modal-content .border-slate-600{border-color:rgba(151,170,196,.42) !important}
html[data-theme="light"] .apj-main .text-white:not(button):not(.btn-primary),
html[data-theme="light"] .modal-content .text-white:not(button):not(.btn-primary){color:#0b1220 !important}
html[data-theme="light"] .apj-main .text-blue-300,
html[data-theme="light"] .modal-content .text-blue-300{color:#1d4ed8 !important}
html[data-theme="light"] .apj-main .text-emerald-300,
html[data-theme="light"] .modal-content .text-emerald-300{color:#047857 !important}
html[data-theme="light"] .apj-main .text-amber-100,
html[data-theme="light"] .modal-content .text-amber-100{color:#92400e !important}
html[data-theme="light"] button[class*="bg-blue-600"],
html[data-theme="light"] button[class*="bg-emerald-600"]{color:#fff !important}
html[data-theme="light"] button[class*="bg-blue-600\/15"]{background:linear-gradient(135deg,#dbeafe,#eef6ff) !important;color:#1d4ed8 !important;border-color:rgba(37,99,235,.32) !important}
html[data-theme="light"] button[class*="bg-emerald-600\/15"]{background:linear-gradient(135deg,#d1fae5,#eefdf8) !important;color:#047857 !important;border-color:rgba(16,185,129,.32) !important}
html[data-theme="light"] button[class*="bg-slate-800"]{background:linear-gradient(135deg,#f8fbff,#e8f1fb) !important;color:#334155 !important;border-color:rgba(151,170,196,.42) !important}

/* Modal premium + readable */
html[data-theme="light"] .modal-content,
html[data-theme="light"] .apj-modal-card{
  background:
    radial-gradient(circle at 84% 8%,rgba(37,99,235,.10),transparent 34%),
    linear-gradient(180deg,rgba(255,255,255,.98),rgba(242,248,255,.96)) !important;
  border:1px solid rgba(151,170,196,.44) !important;
  color:#0b1220 !important;
  box-shadow:0 28px 86px rgba(31,55,92,.20), inset 0 1px 0 rgba(255,255,255,.96) !important;
}
html[data-theme="light"] .modal-overlay,
html[data-theme="light"] .apj-modal{
  --tw-backdrop-blur: blur(18px);
}
html[data-theme="light"] .apj-modal-title,
html[data-theme="light"] .modal-content h3,
html[data-theme="light"] .modal-content h2{color:#0b1220 !important}
html[data-theme="light"] .apj-modal-subtitle,
html[data-theme="light"] .modal-content p{color:#50637d !important}

/* Toast / notification: jelas di light dan dark, termasuk customToast lama */
#customToast.toast,
.toast,
.apj-toast{
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
}
html[data-theme="light"] #customToast.toast,
body[data-theme="light"] #customToast.toast{
  background:linear-gradient(135deg,#ffffff 0%,#fff1f4 100%) !important;
  border:1px solid rgba(244,63,94,.36) !important;
  color:#7f1d1d !important;
  box-shadow:0 24px 72px rgba(127,29,29,.18), inset 0 1px 0 rgba(255,255,255,.92) !important;
}
html[data-theme="light"] #customToast[class*="bg-emerald"],
body[data-theme="light"] #customToast[class*="bg-emerald"]{
  background:linear-gradient(135deg,#ffffff 0%,#ecfdf5 100%) !important;
  border-color:rgba(16,185,129,.36) !important;
  color:#064e3b !important;
  box-shadow:0 24px 72px rgba(6,95,70,.16), inset 0 1px 0 rgba(255,255,255,.92) !important;
}
html[data-theme="light"] #customToast p,
body[data-theme="light"] #customToast p{color:inherit !important}
html[data-theme="light"] #customToast .text-white,
body[data-theme="light"] #customToast .text-white{color:#7f1d1d !important}
html[data-theme="light"] #customToast[class*="bg-emerald"] .text-white,
body[data-theme="light"] #customToast[class*="bg-emerald"] .text-white{color:#064e3b !important}
html[data-theme="light"] #customToast #toastMessage,
body[data-theme="light"] #customToast #toastMessage{color:#9f1239 !important;font-weight:750 !important}
html[data-theme="light"] #customToast[class*="bg-emerald"] #toastMessage,
body[data-theme="light"] #customToast[class*="bg-emerald"] #toastMessage{color:#047857 !important}
html[data-theme="light"] #customToast [class*="bg-blue"],
body[data-theme="light"] #customToast [class*="bg-blue"]{
  background:rgba(244,63,94,.10) !important;
  border-color:rgba(244,63,94,.22) !important;
  color:#be123c !important;
}
html[data-theme="light"] #customToast[class*="bg-emerald"] [class*="bg-blue"],
body[data-theme="light"] #customToast[class*="bg-emerald"] [class*="bg-blue"]{
  background:rgba(16,185,129,.10) !important;
  border-color:rgba(16,185,129,.22) !important;
  color:#047857 !important;
}
html[data-theme="dark"] #customToast[class*="bg-rose"],
body[data-theme="dark"] #customToast[class*="bg-rose"]{
  background:linear-gradient(135deg,rgba(127,29,29,.96),rgba(76,5,25,.96)) !important;
  border-color:rgba(251,113,133,.34) !important;
  color:#ffe4e6 !important;
  box-shadow:0 26px 80px rgba(0,0,0,.50),0 0 0 1px rgba(255,255,255,.03) inset !important;
}
html[data-theme="dark"] #customToast[class*="bg-emerald"],
body[data-theme="dark"] #customToast[class*="bg-emerald"]{
  background:linear-gradient(135deg,rgba(6,78,59,.96),rgba(2,44,34,.96)) !important;
  border-color:rgba(110,231,183,.30) !important;
  color:#d1fae5 !important;
}
html[data-theme="dark"] #customToast .text-white,
body[data-theme="dark"] #customToast .text-white{color:#ffffff !important}
html[data-theme="dark"] #customToast #toastMessage,
body[data-theme="dark"] #customToast #toastMessage{color:rgba(255,255,255,.86) !important}

html[data-theme="light"] .apj-toast-inner,
body[data-theme="light"] .apj-toast-inner,
html[data-theme="light"] .toast-card,
body[data-theme="light"] .toast-card{
  background:linear-gradient(135deg,#ffffff,#eef6ff) !important;
  border:1px solid rgba(151,170,196,.42) !important;
  color:#0b1220 !important;
  box-shadow:0 22px 62px rgba(31,55,92,.16), inset 0 1px 0 rgba(255,255,255,.94) !important;
}
html[data-theme="light"] .apj-toast-error .apj-toast-inner,
body[data-theme="light"] .apj-toast-error .apj-toast-inner{background:linear-gradient(135deg,#fff,#fff1f4) !important;color:#7f1d1d !important;border-color:rgba(244,63,94,.34) !important}
html[data-theme="light"] .apj-toast-success .apj-toast-inner,
body[data-theme="light"] .apj-toast-success .apj-toast-inner{background:linear-gradient(135deg,#fff,#ecfdf5) !important;color:#064e3b !important;border-color:rgba(16,185,129,.34) !important}
html[data-theme="light"] .apj-toast-warning .apj-toast-inner,
body[data-theme="light"] .apj-toast-warning .apj-toast-inner{background:linear-gradient(135deg,#fff,#fffbeb) !important;color:#78350f !important;border-color:rgba(245,158,11,.34) !important}
html[data-theme="light"] .apj-toast-info .apj-toast-inner,
body[data-theme="light"] .apj-toast-info .apj-toast-inner{background:linear-gradient(135deg,#fff,#eff6ff) !important;color:#1e3a8a !important;border-color:rgba(37,99,235,.30) !important}
html[data-theme="light"] .apj-toast-message,
body[data-theme="light"] .apj-toast-message{color:inherit !important}

/* Light mobile and collapsed sidebar safeguards */
html[data-theme="light"] #sidebar.sidebar-collapsed .nav-chevron,
html[data-theme="light"] #sidebar.sidebar-collapsed .nav-lock,
html[data-theme="light"] #sidebar.sidebar-collapsed .nav-text{display:none !important}
@media(max-width:980px){
  html[data-theme="light"] .toast{left:50% !important;right:auto !important;bottom:18px !important;top:auto !important}
  html[data-theme="light"] #customToast.toast{max-width:calc(100vw - 28px) !important}
}

/* =========================================================
   APP-APJ V1.6 - INDEX AUTH TAB LIGHT FIX
   Fokus: tombol Masuk/Daftar di index.html harus jelas di Light Mode.
   Layer ini sengaja paling akhir supaya menang dari core/legacy CSS.
   ========================================================= */
html[data-theme="light"] .apj-tab-grid,
body[data-theme="light"] .apj-tab-grid{
  background:linear-gradient(135deg,rgba(219,234,254,.78),rgba(224,242,254,.50)) !important;
  border:1px solid rgba(96,165,250,.28) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.88),0 10px 24px rgba(37,63,103,.07) !important;
}
html[data-theme="light"] .apj-tab-btn,
body[data-theme="light"] .apj-tab-btn{
  background:linear-gradient(180deg,#f8fbff,#eaf3ff) !important;
  color:#1e3a8a !important;
  border:1px solid rgba(96,165,250,.22) !important;
  opacity:1 !important;
  filter:none !important;
  text-shadow:none !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92) !important;
}
html[data-theme="light"] .apj-tab-btn:hover,
body[data-theme="light"] .apj-tab-btn:hover{
  color:#1d4ed8 !important;
  background:linear-gradient(180deg,#ffffff,#dbeafe) !important;
  border-color:rgba(37,99,235,.32) !important;
  transform:translateY(-1px);
}
html[data-theme="light"] .apj-tab-btn.apj-active,
body[data-theme="light"] .apj-tab-btn.apj-active{
  background:linear-gradient(135deg,#2563eb,#0ea5e9) !important;
  color:#ffffff !important;
  border-color:rgba(37,99,235,.20) !important;
  box-shadow:0 12px 26px rgba(37,99,235,.22), inset 0 1px 0 rgba(255,255,255,.24) !important;
}
html[data-theme="light"] .apj-tab-btn:disabled,
body[data-theme="light"] .apj-tab-btn:disabled{
  opacity:.72 !important;
  color:#50637d !important;
  background:linear-gradient(180deg,#eef4fb,#e2eaf5) !important;
}
html[data-theme="light"] .apj-tab-btn.apj-active:disabled,
body[data-theme="light"] .apj-tab-btn.apj-active:disabled{
  opacity:.86 !important;
  color:#ffffff !important;
  background:linear-gradient(135deg,#2563eb,#0ea5e9) !important;
}
html[data-theme="dark"] .apj-tab-btn:not(.apj-active),
body[data-theme="dark"] .apj-tab-btn:not(.apj-active){
  background:rgba(15,23,42,.64) !important;
  color:#cbd5e1 !important;
  border-color:rgba(71,85,105,.64) !important;
}
html[data-theme="dark"] .apj-tab-btn:not(.apj-active):hover,
body[data-theme="dark"] .apj-tab-btn:not(.apj-active):hover{
  color:#e0f2fe !important;
  border-color:rgba(6,182,212,.30) !important;
}

/* Login/auth text safety */
html[data-theme="light"] .apj-login-card .apj-tab-btn,
body[data-theme="light"] .apj-login-card .apj-tab-btn{
  font-weight:950 !important;
  letter-spacing:.01em !important;
}
html[data-theme="light"] .apj-login-card .apj-inline-link,
body[data-theme="light"] .apj-login-card .apj-inline-link{
  color:#0891b2 !important;
  font-weight:950 !important;
}
html[data-theme="light"] .apj-login-card .apj-inline-link:hover,
body[data-theme="light"] .apj-login-card .apj-inline-link:hover{
  color:#1d4ed8 !important;
}


/* =========================================================
   APP-APJ V1.7 - OUTPUT STOK LIGHT POLISH
   Light mode output-stok: rose accent tetap nyaman dibaca.
   ========================================================= */
html[data-theme="light"] .output-mode-note,
body[data-theme="light"] .output-mode-note{
  background:linear-gradient(135deg,rgba(255,241,242,.82),rgba(239,246,255,.88)) !important;
  border-color:rgba(244,63,94,.20) !important;
  color:#475569 !important;
}
html[data-theme="light"] .output-mode-note b,
body[data-theme="light"] .output-mode-note b{color:#be123c !important}
html[data-theme="light"] .btn-rose,
body[data-theme="light"] .btn-rose{
  background:linear-gradient(135deg,#e11d48,#f43f5e) !important;
  color:#ffffff !important;
  box-shadow:0 16px 34px rgba(244,63,94,.22) !important;
}
html[data-theme="light"] .btn-rose:hover,
body[data-theme="light"] .btn-rose:hover{filter:brightness(1.04) !important;transform:translateY(-1px)}
html[data-theme="light"] .text-rose-300,
body[data-theme="light"] .text-rose-300{color:#e11d48 !important}
html[data-theme="light"] .text-rose-100,
body[data-theme="light"] .text-rose-100{color:#9f1239 !important}
html[data-theme="light"] .apj-main .bg-rose-500\/10,
body[data-theme="light"] .apj-main .bg-rose-500\/10{
  background:linear-gradient(135deg,rgba(255,241,242,.86),rgba(255,255,255,.78)) !important;
  color:#9f1239 !important;
}
html[data-theme="light"] .apj-main .border-rose-500\/20,
body[data-theme="light"] .apj-main .border-rose-500\/20{border-color:rgba(244,63,94,.22) !important}
html[data-theme="light"] #tableHead,
body[data-theme="light"] #tableHead{color:#475569 !important}
html[data-theme="light"] #itemTableBody tr,
body[data-theme="light"] #itemTableBody tr{border-color:rgba(151,170,196,.36) !important}
html[data-theme="light"] #btnTambahBaris,
body[data-theme="light"] #btnTambahBaris{color:#e11d48 !important}


/* =========================================================
   APP-APJ V1.8 - TRANSFER PRODUK OUTLET LIGHT POLISH
   Transfer Produk Outlet: light mode tetap berwarna, jelas, dan tidak polos.
   ========================================================= */
html[data-theme="light"] .print-action-card,
body[data-theme="light"] .print-action-card{
  background:linear-gradient(135deg,rgba(236,253,245,.94),rgba(239,246,255,.90)) !important;
  border-color:rgba(16,185,129,.24) !important;
  box-shadow:0 18px 42px rgba(21,45,86,.10), inset 0 1px 0 rgba(255,255,255,.96) !important;
}
html[data-theme="light"] .print-action-title,
body[data-theme="light"] .print-action-title{color:#0f172a !important}
html[data-theme="light"] .print-action-desc,
body[data-theme="light"] .print-action-desc{color:#64748b !important}
html[data-theme="light"] .btn-violet,
body[data-theme="light"] .btn-violet{
  background:linear-gradient(135deg,#7c3aed,#2563eb) !important;
  color:#ffffff !important;
  box-shadow:0 16px 34px rgba(124,58,237,.22) !important;
}
html[data-theme="light"] .surat-modal-card,
body[data-theme="light"] .surat-modal-card{
  background:linear-gradient(180deg,#ffffff,#f1f7ff) !important;
  border-color:rgba(96,165,250,.30) !important;
  color:#0f172a !important;
  box-shadow:0 28px 86px rgba(31,55,92,.18), inset 0 1px 0 rgba(255,255,255,.96) !important;
}
html[data-theme="light"] .surat-modal-card h2,
html[data-theme="light"] .surat-modal-card h3,
body[data-theme="light"] .surat-modal-card h2,
body[data-theme="light"] .surat-modal-card h3{color:#0f172a !important}
html[data-theme="light"] .surat-modal-card p,
body[data-theme="light"] .surat-modal-card p{color:#64748b !important}
html[data-theme="light"] .sidebar-guide-button,
body[data-theme="light"] .sidebar-guide-button,
html[data-theme="light"] .sidebar-help-button,
body[data-theme="light"] .sidebar-help-button{
  background:rgba(37,99,235,.13) !important;
  border-color:rgba(96,165,250,.25) !important;
  color:#93c5fd !important;
}
html[data-theme="light"] .sidebar-guide-button:hover,
body[data-theme="light"] .sidebar-guide-button:hover,
html[data-theme="light"] .sidebar-help-button:hover,
body[data-theme="light"] .sidebar-help-button:hover{
  background:rgba(37,99,235,.22) !important;
  color:#dbeafe !important;
}
html[data-theme="light"] .transfer-chip,
body[data-theme="light"] .transfer-chip,
html[data-theme="light"] .soft-badge,
body[data-theme="light"] .soft-badge{
  background:linear-gradient(135deg,rgba(219,234,254,.82),rgba(207,250,254,.70)) !important;
  color:#1d4ed8 !important;
  border-color:rgba(96,165,250,.30) !important;
}
html[data-theme="light"] .btn-primary,
body[data-theme="light"] .btn-primary{
  background:linear-gradient(135deg,#2563eb,#0ea5e9) !important;
  color:#ffffff !important;
}


/* =========================================================
   APP-APJ V1.9 - cleanup output/transfer after migration
   - Hide accidental escaped comments if any legacy file still carries them.
   - Make guide modal cleaner in dark/light mode.
   - Keep toast readable and avoid covering guide modal content.
========================================================= */

body > :not(script):not(style) {
  overflow-wrap: anywhere;
}

/* Modal panduan lebih rapi dan tidak bikin scrollbar kasar */
#outputHelpModal,
#transferHelpModal{
  padding: clamp(14px, 2vw, 24px) !important;
}

#outputHelpModal .help-modal-card,
#transferHelpModal .help-modal-card{
  width: min(880px, calc(100vw - 36px)) !important;
  max-width: min(880px, calc(100vw - 36px)) !important;
  max-height: calc(100dvh - 54px) !important;
  border-radius: 30px !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(96,165,250,.45) transparent;
}

#outputHelpModal .help-modal-card::-webkit-scrollbar,
#transferHelpModal .help-modal-card::-webkit-scrollbar{
  width: 8px;
}
#outputHelpModal .help-modal-card::-webkit-scrollbar-track,
#transferHelpModal .help-modal-card::-webkit-scrollbar-track{
  background: transparent;
}
#outputHelpModal .help-modal-card::-webkit-scrollbar-thumb,
#transferHelpModal .help-modal-card::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(37,99,235,.45), rgba(6,182,212,.38));
  border-radius: 999px;
}

#outputHelpModal .modal-overlay,
#transferHelpModal .modal-overlay{
  background: rgba(15, 23, 42, .62) !important;
  backdrop-filter: blur(10px) saturate(130%) !important;
}

#outputHelpModal .help-step,
#transferHelpModal .help-step{
  min-height: 92px;
  align-items: flex-start;
}

#outputHelpModal .help-step-number,
#transferHelpModal .help-step-number{
  flex: 0 0 auto;
}

/* Saat panduan terbuka, notifikasi jangan menabrak isi modal. */
body:has(#outputHelpModal:not(.hidden)) #customToast.toast,
body:has(#transferHelpModal:not(.hidden)) #customToast.toast{
  top: auto !important;
  bottom: 22px !important;
  left: 50% !important;
  right: auto !important;
  transform: translate(-50%, 12px) scale(.98) !important;
  max-width: min(520px, calc(100vw - 32px)) !important;
  z-index: 70 !important;
}
body:has(#outputHelpModal:not(.hidden)) #customToast.toast.show,
body:has(#transferHelpModal:not(.hidden)) #customToast.toast.show{
  transform: translate(-50%, 0) scale(1) !important;
}

html[data-theme="light"] #outputHelpModal .help-modal-card,
html[data-theme="light"] #transferHelpModal .help-modal-card,
body[data-theme="light"] #outputHelpModal .help-modal-card,
body[data-theme="light"] #transferHelpModal .help-modal-card{
  background:
    radial-gradient(circle at 92% 0%, rgba(37,99,235,.16), transparent 34%),
    radial-gradient(circle at 8% 100%, rgba(6,182,212,.14), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(239,246,255,.97)) !important;
  border-color: rgba(147,197,253,.70) !important;
  box-shadow: 0 34px 90px rgba(15,23,42,.22), inset 0 1px 0 rgba(255,255,255,.86) !important;
}

html[data-theme="light"] #outputHelpModal .help-step,
html[data-theme="light"] #transferHelpModal .help-step,
body[data-theme="light"] #outputHelpModal .help-step,
body[data-theme="light"] #transferHelpModal .help-step{
  background: linear-gradient(135deg, rgba(255,255,255,.88), rgba(239,246,255,.72)) !important;
  border-color: rgba(147,197,253,.60) !important;
  box-shadow: 0 18px 42px rgba(37,99,235,.08) !important;
}

html[data-theme="light"] #outputHelpModal .help-modal-card h3,
html[data-theme="light"] #transferHelpModal .help-modal-card h3,
body[data-theme="light"] #outputHelpModal .help-modal-card h3,
body[data-theme="light"] #transferHelpModal .help-modal-card h3{
  color: #0f172a !important;
}

html[data-theme="light"] #outputHelpModal .help-modal-card p,
html[data-theme="light"] #transferHelpModal .help-modal-card p,
body[data-theme="light"] #outputHelpModal .help-modal-card p,
body[data-theme="light"] #transferHelpModal .help-modal-card p{
  color: #52657d !important;
}

html[data-theme="light"] #outputHelpModal .help-modal-card .text-white,
html[data-theme="light"] #transferHelpModal .help-modal-card .text-white,
body[data-theme="light"] #outputHelpModal .help-modal-card .text-white,
body[data-theme="light"] #transferHelpModal .help-modal-card .text-white{
  color: #0f172a !important;
}

html[data-theme="light"] #outputHelpModal .help-modal-card .text-slate-400,
html[data-theme="light"] #transferHelpModal .help-modal-card .text-slate-400,
body[data-theme="light"] #outputHelpModal .help-modal-card .text-slate-400,
body[data-theme="light"] #transferHelpModal .help-modal-card .text-slate-400{
  color: #64748b !important;
}

html[data-theme="light"] #outputHelpModal .help-modal-card button[aria-label],
html[data-theme="light"] #transferHelpModal .help-modal-card button[aria-label],
body[data-theme="light"] #outputHelpModal .help-modal-card button[aria-label],
body[data-theme="light"] #transferHelpModal .help-modal-card button[aria-label]{
  background: rgba(255,255,255,.78) !important;
  color: #334155 !important;
  border-color: rgba(148,163,184,.30) !important;
  box-shadow: 0 12px 30px rgba(15,23,42,.10) !important;
}

@media (max-width: 760px){
  #outputHelpModal .help-modal-card,
  #transferHelpModal .help-modal-card{
    width: calc(100vw - 22px) !important;
    max-width: calc(100vw - 22px) !important;
    max-height: calc(100dvh - 28px) !important;
    border-radius: 24px !important;
  }
  #outputHelpModal .help-step,
  #transferHelpModal .help-step{
    min-height: auto;
  }
}

/* =========================================================
   APP-APJ V2.0 - Transfer Surat Jalan modal + safe toast
   Tujuan: modal surat jalan selaras dark/light, toast tidak lagi di tengah.
   ========================================================= */

/* Toast lama per halaman dipaksa jadi pojok kanan, bukan tengah. */
#customToast.toast,
.toast#customToast{
  position: fixed !important;
  top: 96px !important;
  right: 22px !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 99999 !important;
  width: min(420px, calc(100vw - 32px)) !important;
  min-width: 300px !important;
  max-width: min(420px, calc(100vw - 32px)) !important;
  border-radius: 20px !important;
  padding: 14px 16px !important;
  transform: translate3d(18px, -8px, 0) scale(.98) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .22s ease, transform .22s cubic-bezier(.16,1,.3,1) !important;
}
#customToast.toast.show,
.toast#customToast.show{
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
  pointer-events: auto !important;
}
body.apj-surat-modal-open #customToast.toast,
body:has(#suratJalanModal.flex) #customToast.toast,
body:has(#suratJalanModal:not(.hidden)) #customToast.toast{
  top: 22px !important;
  right: 22px !important;
  left: auto !important;
  bottom: auto !important;
  transform: translate3d(18px, -8px, 0) scale(.98) !important;
}
body.apj-surat-modal-open #customToast.toast.show,
body:has(#suratJalanModal.flex) #customToast.toast.show,
body:has(#suratJalanModal:not(.hidden)) #customToast.toast.show{
  transform: translate3d(0, 0, 0) scale(1) !important;
}
#customToast .w-9.h-9{
  width: 38px !important;
  height: 38px !important;
  border-radius: 14px !important;
  font-weight: 950 !important;
  flex: 0 0 auto !important;
}
#customToast .font-extrabold{font-weight: 950 !important;letter-spacing: -.01em !important;}
#customToast #toastMessage{font-weight: 800 !important;line-height: 1.45 !important;}

html[data-theme="dark"] #customToast.toast,
body[data-theme="dark"] #customToast.toast{
  background: linear-gradient(135deg, rgba(15,23,42,.98), rgba(2,6,23,.96)) !important;
  border-color: rgba(96,165,250,.24) !important;
  color: #e2e8f0 !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
html[data-theme="dark"] #customToast.apj-toast-success,
body[data-theme="dark"] #customToast.apj-toast-success,
html[data-theme="dark"] #customToast[class*="bg-emerald"],
body[data-theme="dark"] #customToast[class*="bg-emerald"]{
  background: linear-gradient(135deg, rgba(6,78,59,.98), rgba(2,44,34,.96)) !important;
  border-color: rgba(52,211,153,.38) !important;
  color: #d1fae5 !important;
}
html[data-theme="dark"] #customToast.apj-toast-error,
body[data-theme="dark"] #customToast.apj-toast-error,
html[data-theme="dark"] #customToast[class*="bg-rose"],
body[data-theme="dark"] #customToast[class*="bg-rose"]{
  background: linear-gradient(135deg, rgba(127,29,29,.98), rgba(76,5,25,.96)) !important;
  border-color: rgba(251,113,133,.44) !important;
  color: #ffe4e6 !important;
}
html[data-theme="dark"] #customToast.apj-toast-warning,
body[data-theme="dark"] #customToast.apj-toast-warning{
  background: linear-gradient(135deg, rgba(120,53,15,.98), rgba(69,26,3,.96)) !important;
  border-color: rgba(251,191,36,.44) !important;
  color: #fef3c7 !important;
}
html[data-theme="dark"] #customToast .text-white,
body[data-theme="dark"] #customToast .text-white,
html[data-theme="dark"] #customToast #toastMessage,
body[data-theme="dark"] #customToast #toastMessage{color: inherit !important;}
html[data-theme="dark"] #customToast .w-9.h-9,
body[data-theme="dark"] #customToast .w-9.h-9{
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.18) !important;
  color: currentColor !important;
}

html[data-theme="light"] #customToast.toast,
body[data-theme="light"] #customToast.toast{
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(239,246,255,.96)) !important;
  border-color: rgba(96,165,250,.34) !important;
  color: #0f172a !important;
  box-shadow: 0 22px 62px rgba(30,64,175,.18), inset 0 1px 0 rgba(255,255,255,.96) !important;
}
html[data-theme="light"] #customToast.apj-toast-success,
body[data-theme="light"] #customToast.apj-toast-success,
html[data-theme="light"] #customToast[class*="bg-emerald"],
body[data-theme="light"] #customToast[class*="bg-emerald"]{
  background: linear-gradient(135deg, #ffffff, #ecfdf5 62%, #dcfce7) !important;
  border-color: rgba(16,185,129,.38) !important;
  color: #065f46 !important;
}
html[data-theme="light"] #customToast.apj-toast-error,
body[data-theme="light"] #customToast.apj-toast-error,
html[data-theme="light"] #customToast[class*="bg-rose"],
body[data-theme="light"] #customToast[class*="bg-rose"]{
  background: linear-gradient(135deg, #ffffff, #fff1f2 62%, #ffe4e6) !important;
  border-color: rgba(244,63,94,.38) !important;
  color: #881337 !important;
}
html[data-theme="light"] #customToast.apj-toast-warning,
body[data-theme="light"] #customToast.apj-toast-warning{
  background: linear-gradient(135deg, #ffffff, #fffbeb 62%, #fef3c7) !important;
  border-color: rgba(245,158,11,.38) !important;
  color: #78350f !important;
}
html[data-theme="light"] #customToast.apj-toast-info,
body[data-theme="light"] #customToast.apj-toast-info{
  background: linear-gradient(135deg, #ffffff, #eff6ff 62%, #dbeafe) !important;
  border-color: rgba(37,99,235,.34) !important;
  color: #1e3a8a !important;
}
html[data-theme="light"] #customToast .text-white,
body[data-theme="light"] #customToast .text-white,
html[data-theme="light"] #customToast #toastMessage,
body[data-theme="light"] #customToast #toastMessage{color: inherit !important;}
html[data-theme="light"] #customToast .w-9.h-9,
body[data-theme="light"] #customToast .w-9.h-9{
  background: rgba(37,99,235,.10) !important;
  border-color: rgba(37,99,235,.22) !important;
  color: currentColor !important;
}

/* Surat Jalan modal: jangan campur dark header dengan body light. */
#suratJalanModal{z-index: 90 !important;}
#suratJalanModal .absolute.inset-0{
  background: rgba(2,6,23,.68) !important;
  backdrop-filter: blur(14px) saturate(128%) !important;
}
#suratJalanModal .surat-modal-card{
  border-radius: 30px !important;
  overflow: hidden !important;
  border: 1px solid rgba(96,165,250,.28) !important;
  box-shadow: 0 34px 96px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
#suratJalanModal .surat-modal-card > .sticky{
  border-bottom-width: 1px !important;
  padding: 18px 22px !important;
}
#suratJalanModal .surat-modal-card > .space-y-4{padding: 22px !important;}
#suratJalanModal .surat-modal-card label{
  font-size: 11px !important;
  font-weight: 950 !important;
  letter-spacing: .08em !important;
}
#suratJalanModal .form-control{
  min-height: 54px !important;
  border-radius: 18px !important;
  font-weight: 750 !important;
}
#suratJalanModal button{
  border-radius: 16px !important;
  font-weight: 950 !important;
}
#suratJalanModal #printLoadStatus,
#suratJalanModal #printQueueList{
  border-radius: 18px !important;
  font-weight: 750 !important;
  line-height: 1.55 !important;
}

html[data-theme="dark"] #suratJalanModal .surat-modal-card,
body[data-theme="dark"] #suratJalanModal .surat-modal-card{
  background:
    radial-gradient(circle at 92% 4%, rgba(37,99,235,.20), transparent 34%),
    radial-gradient(circle at 10% 96%, rgba(6,182,212,.14), transparent 36%),
    linear-gradient(180deg, rgba(15,23,42,.98), rgba(2,6,23,.98)) !important;
  color: #f8fafc !important;
  border-color: rgba(96,165,250,.28) !important;
}
html[data-theme="dark"] #suratJalanModal .surat-modal-card > .sticky,
body[data-theme="dark"] #suratJalanModal .surat-modal-card > .sticky{
  background: linear-gradient(135deg, rgba(15,23,42,.98), rgba(30,41,59,.92)) !important;
  border-color: rgba(96,165,250,.20) !important;
}
html[data-theme="dark"] #suratJalanModal h3,
body[data-theme="dark"] #suratJalanModal h3{color:#ffffff !important;}
html[data-theme="dark"] #suratJalanModal p,
body[data-theme="dark"] #suratJalanModal p{color:#94a3b8 !important;}
html[data-theme="dark"] #suratJalanModal label,
body[data-theme="dark"] #suratJalanModal label{color:#93c5fd !important;}
html[data-theme="dark"] #suratJalanModal .form-control,
body[data-theme="dark"] #suratJalanModal .form-control{
  background: rgba(2,6,23,.70) !important;
  border-color: rgba(96,165,250,.22) !important;
  color:#f8fafc !important;
}
html[data-theme="dark"] #suratJalanModal #printLoadStatus,
body[data-theme="dark"] #suratJalanModal #printLoadStatus,
html[data-theme="dark"] #suratJalanModal #printQueueList,
body[data-theme="dark"] #suratJalanModal #printQueueList{
  background: rgba(2,6,23,.72) !important;
  border-color: rgba(96,165,250,.18) !important;
  color:#cbd5e1 !important;
}

html[data-theme="light"] #suratJalanModal .absolute.inset-0,
body[data-theme="light"] #suratJalanModal .absolute.inset-0{
  background: rgba(15,23,42,.42) !important;
}
html[data-theme="light"] #suratJalanModal .surat-modal-card,
body[data-theme="light"] #suratJalanModal .surat-modal-card{
  background:
    radial-gradient(circle at 92% 0%, rgba(37,99,235,.14), transparent 34%),
    radial-gradient(circle at 0% 100%, rgba(16,185,129,.10), transparent 32%),
    linear-gradient(180deg, #ffffff, #eef6ff) !important;
  color: #0f172a !important;
  border-color: rgba(147,197,253,.78) !important;
  box-shadow: 0 34px 92px rgba(30,64,175,.22), inset 0 1px 0 rgba(255,255,255,.96) !important;
}
html[data-theme="light"] #suratJalanModal .surat-modal-card > .sticky,
body[data-theme="light"] #suratJalanModal .surat-modal-card > .sticky{
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(219,234,254,.94)) !important;
  border-color: rgba(147,197,253,.70) !important;
}
html[data-theme="light"] #suratJalanModal h3,
body[data-theme="light"] #suratJalanModal h3{color:#0f172a !important;}
html[data-theme="light"] #suratJalanModal p,
body[data-theme="light"] #suratJalanModal p{color:#52657d !important;}
html[data-theme="light"] #suratJalanModal .text-violet-300,
body[data-theme="light"] #suratJalanModal .text-violet-300{color:#2563eb !important;}
html[data-theme="light"] #suratJalanModal label,
body[data-theme="light"] #suratJalanModal label{color:#475569 !important;}
html[data-theme="light"] #suratJalanModal .form-control,
body[data-theme="light"] #suratJalanModal .form-control{
  background: rgba(255,255,255,.86) !important;
  border-color: rgba(148,163,184,.36) !important;
  color:#0f172a !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92) !important;
}
html[data-theme="light"] #suratJalanModal .form-control:focus,
body[data-theme="light"] #suratJalanModal .form-control:focus{
  border-color: rgba(37,99,235,.58) !important;
  box-shadow: 0 0 0 4px rgba(37,99,235,.12) !important;
}
html[data-theme="light"] #suratJalanModal #printLoadStatus,
body[data-theme="light"] #suratJalanModal #printLoadStatus{
  background: linear-gradient(135deg, rgba(239,246,255,.98), rgba(224,242,254,.90)) !important;
  border-color: rgba(125,211,252,.48) !important;
  color:#334155 !important;
}
html[data-theme="light"] #suratJalanModal #printQueueList,
body[data-theme="light"] #suratJalanModal #printQueueList{
  background: linear-gradient(135deg, rgba(248,250,252,.98), rgba(239,246,255,.94)) !important;
  border-color: rgba(147,197,253,.62) !important;
  color:#475569 !important;
}
html[data-theme="light"] #suratJalanModal button[onclick="closeSuratJalanModal()"],
body[data-theme="light"] #suratJalanModal button[onclick="closeSuratJalanModal()"]{
  background: #ffffff !important;
  color:#334155 !important;
  border-color: rgba(148,163,184,.34) !important;
  box-shadow: 0 10px 24px rgba(15,23,42,.10) !important;
}
html[data-theme="light"] #suratJalanModal button[onclick="printSavedSuratJalan('58')"],
body[data-theme="light"] #suratJalanModal button[onclick="printSavedSuratJalan('58')"],
html[data-theme="light"] #suratJalanModal button[onclick="clearPrintQueue()"],
body[data-theme="light"] #suratJalanModal button[onclick="clearPrintQueue()"]{
  background: linear-gradient(135deg,#ffffff,#eef6ff) !important;
  color:#334155 !important;
  border-color: rgba(148,163,184,.34) !important;
}

@media (max-width: 760px){
  #customToast.toast,
  .toast#customToast{
    top: auto !important;
    right: 14px !important;
    bottom: 16px !important;
    width: calc(100vw - 28px) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 28px) !important;
  }
  #suratJalanModal .surat-modal-card{
    max-height: calc(100dvh - 26px) !important;
    border-radius: 24px !important;
  }
  #suratJalanModal .surat-modal-card > .sticky,
  #suratJalanModal .surat-modal-card > .space-y-4{
    padding: 16px !important;
  }
}


/* =========================================================
   APP-APJ V2.2 - FINAL CONSISTENCY LAYER
   - APJ image logo black/white.
   - Guide modals responsive, compact, no internal scrollbar.
   - Toast fixed top-center so it never blocks modal forms/content.
   - Applies to current pages and future pages using same classes.
   ========================================================= */

:root{
  --apj-logo-black-url: url("https://i.imgur.com/o7DoKSz.png");
  --apj-logo-white-url: url("https://i.imgur.com/6ili5IW.png");
}

.logo-mark,
.apj-login-logo,
.apj-logo-box{
  overflow:hidden;
}

.logo-mark .apj-brand-logo-img,
.apj-login-logo .apj-logo-img,
.apj-logo-box .apj-logo-img{
  display:block;
  width:78%;
  height:78%;
  object-fit:contain;
  object-position:center;
  margin:auto;
  filter:none;
}

.logo-mark .apj-brand-logo-img{
  width:82%;
  height:82%;
}

.apj-login-logo .apj-logo-img--white,
.apj-logo-box .apj-logo-img--white{
  display:none;
}

html[data-theme="dark"] .apj-login-logo .apj-logo-img--black,
html[data-theme="dark"] .apj-logo-box .apj-logo-img--black,
body[data-theme="dark"] .apj-login-logo .apj-logo-img--black,
body[data-theme="dark"] .apj-logo-box .apj-logo-img--black{
  display:none;
}

html[data-theme="dark"] .apj-login-logo .apj-logo-img--white,
html[data-theme="dark"] .apj-logo-box .apj-logo-img--white,
body[data-theme="dark"] .apj-login-logo .apj-logo-img--white,
body[data-theme="dark"] .apj-logo-box .apj-logo-img--white{
  display:block;
}

html[data-theme="light"] .logo-mark,
body[data-theme="light"] .logo-mark,
html[data-theme="dark"] .logo-mark,
body[data-theme="dark"] .logo-mark{
  background:linear-gradient(145deg, rgba(255,255,255,.96), rgba(224,242,254,.94) 48%, rgba(37,99,235,.80)) !important;
  border:1px solid rgba(125,211,252,.25) !important;
}

/* Toast: always top center. This is the global standard from V2.2 onward. */
#customToast.toast,
.toast#customToast,
.apj-toast{
  position:fixed !important;
  top:18px !important;
  left:50% !important;
  right:auto !important;
  bottom:auto !important;
  z-index:100000 !important;
  transform:translate(-50%,-16px) scale(.98) !important;
  max-width:min(520px, calc(100vw - 28px)) !important;
  min-width:min(340px, calc(100vw - 28px)) !important;
  pointer-events:none;
}

#customToast.toast.show,
.toast#customToast.show,
.apj-toast.apj-show,
.apj-toast.show{
  transform:translate(-50%,0) scale(1) !important;
  pointer-events:auto;
}

body.apj-surat-modal-open #customToast.toast,
body:has(#suratJalanModal.flex) #customToast.toast,
body:has(#suratJalanModal:not(.hidden)) #customToast.toast,
body:has(#inputHelpModal:not(.hidden)) #customToast.toast,
body:has(#outputHelpModal:not(.hidden)) #customToast.toast,
body:has(#transferHelpModal:not(.hidden)) #customToast.toast,
body:has(#produkHelpModal:not(.hidden)) #customToast.toast,
body:has(#opnameHelpModal:not(.hidden)) #customToast.toast{
  top:18px !important;
  left:50% !important;
  right:auto !important;
  bottom:auto !important;
  transform:translate(-50%,-16px) scale(.98) !important;
}

body.apj-surat-modal-open #customToast.toast.show,
body:has(#suratJalanModal.flex) #customToast.toast.show,
body:has(#suratJalanModal:not(.hidden)) #customToast.toast.show,
body:has(#inputHelpModal:not(.hidden)) #customToast.toast.show,
body:has(#outputHelpModal:not(.hidden)) #customToast.toast.show,
body:has(#transferHelpModal:not(.hidden)) #customToast.toast.show,
body:has(#produkHelpModal:not(.hidden)) #customToast.toast.show,
body:has(#opnameHelpModal:not(.hidden)) #customToast.toast.show{
  transform:translate(-50%,0) scale(1) !important;
}

/* Guide modal: compact responsive standard. No internal scrollbar. */
#inputHelpModal,
#outputHelpModal,
#transferHelpModal,
#produkHelpModal{
  align-items:center !important;
  justify-content:center !important;
  padding:clamp(10px, 2vw, 18px) !important;
}

#inputHelpModal .help-modal-card,
#outputHelpModal .help-modal-card,
#transferHelpModal .help-modal-card,
#produkHelpModal .help-modal-card,
.help-modal-card.apj-guide-fit{
  width:min(940px, calc(100vw - 28px)) !important;
  max-width:940px !important;
  max-height:calc(100dvh - 28px) !important;
  overflow:hidden !important;
  padding:clamp(14px, 1.7vw, 22px) !important;
  border-radius:28px !important;
  display:flex !important;
  flex-direction:column !important;
}

#inputHelpModal .help-modal-card > .relative,
#outputHelpModal .help-modal-card > .relative,
#transferHelpModal .help-modal-card > .relative,
#produkHelpModal .help-modal-card > .relative{
  display:flex !important;
  flex-direction:column !important;
  min-height:0 !important;
  height:auto !important;
}

#inputHelpModal .help-modal-card .mb-5,
#outputHelpModal .help-modal-card .mb-5,
#transferHelpModal .help-modal-card .mb-5,
#produkHelpModal .help-modal-card .mb-5{
  margin-bottom:clamp(10px, 1.3vw, 14px) !important;
}

#inputHelpModal .help-modal-card h3,
#outputHelpModal .help-modal-card h3,
#transferHelpModal .help-modal-card h3,
#produkHelpModal .help-modal-card h3{
  margin-top:10px !important;
  font-size:clamp(24px, 2.35vw, 34px) !important;
  line-height:1.08 !important;
  letter-spacing:-.045em !important;
}

#inputHelpModal .help-modal-card h3 + p,
#outputHelpModal .help-modal-card h3 + p,
#transferHelpModal .help-modal-card h3 + p,
#produkHelpModal .help-modal-card h3 + p{
  margin-top:8px !important;
  font-size:clamp(12px, 1.05vw, 14px) !important;
  line-height:1.55 !important;
}

#inputHelpModal .help-modal-card .grid,
#outputHelpModal .help-modal-card .grid,
#transferHelpModal .help-modal-card .grid,
#produkHelpModal .help-modal-card .grid{
  gap:10px !important;
}

#inputHelpModal .help-step,
#outputHelpModal .help-step,
#transferHelpModal .help-step,
#produkHelpModal .help-step{
  padding:clamp(10px, 1.15vw, 14px) !important;
  border-radius:18px !important;
  min-height:auto !important;
  align-items:flex-start !important;
}

#inputHelpModal .help-step-number,
#outputHelpModal .help-step-number,
#transferHelpModal .help-step-number,
#produkHelpModal .help-step-number{
  width:30px !important;
  height:30px !important;
  min-width:30px !important;
  border-radius:11px !important;
  font-size:13px !important;
}

#inputHelpModal .help-step p,
#outputHelpModal .help-step p,
#transferHelpModal .help-step p,
#produkHelpModal .help-step p{
  line-height:1.42 !important;
}

#inputHelpModal .help-step p:first-child,
#outputHelpModal .help-step p:first-child,
#transferHelpModal .help-step p:first-child,
#produkHelpModal .help-step p:first-child{
  font-size:clamp(12px, .98vw, 14px) !important;
  margin:0 !important;
}

#inputHelpModal .help-step p:last-child,
#outputHelpModal .help-step p:last-child,
#transferHelpModal .help-step p:last-child,
#produkHelpModal .help-step p:last-child{
  font-size:clamp(11px, .9vw, 12px) !important;
  margin-top:4px !important;
}

#inputHelpModal .help-modal-card .rounded-2xl,
#outputHelpModal .help-modal-card .rounded-2xl,
#transferHelpModal .help-modal-card .rounded-2xl,
#produkHelpModal .help-modal-card .rounded-2xl{
  border-radius:18px !important;
}

#inputHelpModal .help-modal-card .rounded-2xl.p-4,
#outputHelpModal .help-modal-card .rounded-2xl.p-4,
#transferHelpModal .help-modal-card .rounded-2xl.p-4,
#produkHelpModal .help-modal-card .rounded-2xl.p-4,
#inputHelpModal .help-modal-card div[class*="bg-cyan-500/10"],
#outputHelpModal .help-modal-card div[class*="bg-cyan-500/10"],
#transferHelpModal .help-modal-card div[class*="bg-cyan-500/10"],
#produkHelpModal .help-modal-card div[class*="bg-cyan-500/10"],
#inputHelpModal .help-modal-card div[class*="bg-amber-500/10"],
#outputHelpModal .help-modal-card div[class*="bg-amber-500/10"],
#transferHelpModal .help-modal-card div[class*="bg-amber-500/10"],
#produkHelpModal .help-modal-card div[class*="bg-amber-500/10"]{
  padding:clamp(10px, 1.1vw, 14px) !important;
  margin-bottom:clamp(10px, 1.1vw, 12px) !important;
}

#inputHelpModal .help-modal-card div[class*="bg-cyan-500/10"] p,
#outputHelpModal .help-modal-card div[class*="bg-cyan-500/10"] p,
#transferHelpModal .help-modal-card div[class*="bg-cyan-500/10"] p,
#produkHelpModal .help-modal-card div[class*="bg-cyan-500/10"] p,
#inputHelpModal .help-modal-card div[class*="bg-amber-500/10"] p,
#outputHelpModal .help-modal-card div[class*="bg-amber-500/10"] p,
#transferHelpModal .help-modal-card div[class*="bg-amber-500/10"] p,
#produkHelpModal .help-modal-card div[class*="bg-amber-500/10"] p{
  line-height:1.45 !important;
}

#inputHelpModal .help-modal-card .flex.flex-col.sm\:flex-row,
#outputHelpModal .help-modal-card .flex.flex-col.sm\:flex-row,
#transferHelpModal .help-modal-card .flex.flex-col.sm\:flex-row,
#produkHelpModal .help-modal-card .flex.flex-col.sm\:flex-row{
  gap:10px !important;
}

/* Soft page backdrop when guide is open; cleaner than heavy blur. */
#inputHelpModal .modal-overlay,
#outputHelpModal .modal-overlay,
#transferHelpModal .modal-overlay,
#produkHelpModal .modal-overlay{
  background:rgba(15,23,42,.58) !important;
  backdrop-filter:blur(8px) !important;
}

html[data-theme="light"] #inputHelpModal .modal-overlay,
html[data-theme="light"] #outputHelpModal .modal-overlay,
html[data-theme="light"] #transferHelpModal .modal-overlay,
html[data-theme="light"] #produkHelpModal .modal-overlay,
body[data-theme="light"] #inputHelpModal .modal-overlay,
body[data-theme="light"] #outputHelpModal .modal-overlay,
body[data-theme="light"] #transferHelpModal .modal-overlay,
body[data-theme="light"] #produkHelpModal .modal-overlay{
  background:rgba(71,85,105,.42) !important;
  backdrop-filter:blur(7px) !important;
}

@media (max-width: 760px){
  #inputHelpModal .help-modal-card,
  #outputHelpModal .help-modal-card,
  #transferHelpModal .help-modal-card,
  #produkHelpModal .help-modal-card,
  .help-modal-card.apj-guide-fit{
    width:calc(100vw - 20px) !important;
    max-height:calc(100dvh - 20px) !important;
    border-radius:22px !important;
    padding:14px !important;
  }
  #inputHelpModal .help-modal-card .flex.items-start.justify-between,
  #outputHelpModal .help-modal-card .flex.items-start.justify-between,
  #transferHelpModal .help-modal-card .flex.items-start.justify-between,
  #produkHelpModal .help-modal-card .flex.items-start.justify-between{
    gap:10px !important;
    margin-bottom:10px !important;
  }
  #inputHelpModal .help-modal-card h3,
  #outputHelpModal .help-modal-card h3,
  #transferHelpModal .help-modal-card h3,
  #produkHelpModal .help-modal-card h3{
    font-size:22px !important;
  }
}

@media (max-height: 720px){
  #inputHelpModal .help-modal-card,
  #outputHelpModal .help-modal-card,
  #transferHelpModal .help-modal-card,
  #produkHelpModal .help-modal-card{
    padding:12px 16px !important;
  }
  #inputHelpModal .help-modal-card h3,
  #outputHelpModal .help-modal-card h3,
  #transferHelpModal .help-modal-card h3,
  #produkHelpModal .help-modal-card h3{
    font-size:24px !important;
    margin-top:7px !important;
  }
  #inputHelpModal .help-step,
  #outputHelpModal .help-step,
  #transferHelpModal .help-step,
  #produkHelpModal .help-step{
    padding:9px 11px !important;
  }
  #inputHelpModal .help-step p:last-child,
  #outputHelpModal .help-step p:last-child,
  #transferHelpModal .help-step p:last-child,
  #produkHelpModal .help-step p:last-child{
    line-height:1.32 !important;
  }
}

@media (max-height: 650px){
  #inputHelpModal .help-step p:last-child,
  #outputHelpModal .help-step p:last-child,
  #transferHelpModal .help-step p:last-child,
  #produkHelpModal .help-step p:last-child{
    display:none !important;
  }
  #inputHelpModal .help-modal-card div[class*="bg-cyan-500/10"] p:last-child,
  #outputHelpModal .help-modal-card div[class*="bg-cyan-500/10"] p:last-child,
  #transferHelpModal .help-modal-card div[class*="bg-cyan-500/10"] p:last-child,
  #produkHelpModal .help-modal-card div[class*="bg-cyan-500/10"] p:last-child,
  #inputHelpModal .help-modal-card div[class*="bg-amber-500/10"] p:last-child,
  #outputHelpModal .help-modal-card div[class*="bg-amber-500/10"] p:last-child,
  #transferHelpModal .help-modal-card div[class*="bg-amber-500/10"] p:last-child,
  #produkHelpModal .help-modal-card div[class*="bg-amber-500/10"] p:last-child{
    display:block !important;
    font-size:11px !important;
  }
}


/* =========================================================
   APP-APJ V2.3 — Stok Opname consistency layer
   - Guide modal compact without internal scroll.
   - Toast remains top center.
   - Light/Dark polish for opname table, modal, and buttons.
   ========================================================= */
#opnameHelpModal{
  align-items:center !important;
  justify-content:center !important;
  padding:clamp(10px, 2vw, 18px) !important;
}
#opnameHelpModal .help-modal-card,
#opnameHelpModal .help-modal-card.apj-guide-fit{
  width:min(940px, calc(100vw - 28px)) !important;
  max-width:940px !important;
  max-height:calc(100dvh - 28px) !important;
  overflow:hidden !important;
  padding:clamp(14px, 1.7vw, 22px) !important;
  border-radius:28px !important;
  display:flex !important;
  flex-direction:column !important;
}
#opnameHelpModal .help-modal-card > .relative{display:flex !important;flex-direction:column !important;min-height:0 !important;height:auto !important;}
#opnameHelpModal .help-modal-card .mb-5{margin-bottom:clamp(10px, 1.3vw, 14px) !important;}
#opnameHelpModal .help-modal-card h3{margin-top:10px !important;font-size:clamp(24px, 2.35vw, 34px) !important;line-height:1.08 !important;letter-spacing:-.045em !important;}
#opnameHelpModal .help-modal-card h3 + p{margin-top:8px !important;font-size:clamp(12px, 1.05vw, 14px) !important;line-height:1.55 !important;}
#opnameHelpModal .help-modal-card .grid{gap:10px !important;}
#opnameHelpModal .help-step{padding:clamp(10px, 1.15vw, 14px) !important;border-radius:18px !important;min-height:auto !important;align-items:flex-start !important;}
#opnameHelpModal .help-step-number{width:30px !important;height:30px !important;min-width:30px !important;border-radius:11px !important;font-size:13px !important;}
#opnameHelpModal .help-step p{line-height:1.42 !important;}
#opnameHelpModal .help-step p:first-child{font-size:clamp(12px, .98vw, 14px) !important;margin:0 !important;}
#opnameHelpModal .help-step p:last-child{font-size:clamp(11px, .9vw, 12px) !important;margin-top:4px !important;}
#opnameHelpModal .help-modal-card .rounded-2xl{border-radius:18px !important;}
#opnameHelpModal .help-modal-card .rounded-2xl.p-4,
#opnameHelpModal .help-modal-card div[class*="bg-emerald-500/10"],
#opnameHelpModal .help-modal-card div[class*="bg-amber-500/10"]{padding:clamp(10px, 1.1vw, 14px) !important;margin-bottom:clamp(10px, 1.1vw, 12px) !important;}
#opnameHelpModal .modal-overlay{background:rgba(15,23,42,.58) !important;backdrop-filter:blur(8px) !important;}
html[data-theme="light"] #opnameHelpModal .modal-overlay,
body[data-theme="light"] #opnameHelpModal .modal-overlay{background:rgba(71,85,105,.42) !important;backdrop-filter:blur(7px) !important;}
body:has(#opnameHelpModal:not(.hidden)) #customToast.toast{top:18px !important;left:50% !important;right:auto !important;bottom:auto !important;transform:translate(-50%,-16px) scale(.98) !important;}
body:has(#opnameHelpModal:not(.hidden)) #customToast.toast.show{transform:translate(-50%,0) scale(1) !important;}

html[data-theme="light"] .btn-opname,
body[data-theme="light"] .btn-opname{
  background:linear-gradient(135deg,#f59e0b,#f97316) !important;
  color:#fff !important;
  box-shadow:0 16px 34px rgba(245,158,11,.22) !important;
}
html[data-theme="light"] .help-modal-card,
body[data-theme="light"] .help-modal-card,
html[data-theme="light"] .produk-modal-card,
body[data-theme="light"] .produk-modal-card{
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(239,246,255,.94)) !important;
  border-color:rgba(147,197,253,.45) !important;
  color:#0f172a !important;
  box-shadow:0 28px 90px rgba(37,63,103,.17), inset 0 1px 0 rgba(255,255,255,.92) !important;
}
html[data-theme="light"] .table-shell tbody tr,
body[data-theme="light"] .table-shell tbody tr{
  background:rgba(255,255,255,.74) !important;
  border-color:rgba(148,163,184,.22) !important;
}
html[data-theme="light"] .item-row:hover,
body[data-theme="light"] .item-row:hover{background:rgba(219,234,254,.42) !important;}
html[data-theme="light"] .item-row select,
html[data-theme="light"] .item-row input,
body[data-theme="light"] .item-row select,
body[data-theme="light"] .item-row input{
  background:rgba(255,255,255,.94) !important;
  color:#0f172a !important;
  border-color:rgba(148,163,184,.38) !important;
}
html[data-theme="light"] .label-stok-sistem,
html[data-theme="light"] .label-selisih,
body[data-theme="light"] .label-stok-sistem,
body[data-theme="light"] .label-selisih{color:#475569 !important;}

@media (max-width: 760px){
  #opnameHelpModal .help-modal-card,
  #opnameHelpModal .help-modal-card.apj-guide-fit{
    width:calc(100vw - 20px) !important;
    max-height:calc(100dvh - 20px) !important;
    border-radius:22px !important;
    padding:14px !important;
  }
  #opnameHelpModal .help-modal-card h3{font-size:22px !important;}
}
@media (max-height: 720px){
  #opnameHelpModal .help-modal-card{padding:12px 16px !important;}
  #opnameHelpModal .help-step{padding:9px 10px !important;}
  #opnameHelpModal .help-modal-card h3{font-size:23px !important;}
}


/* =========================================================
   APP-APJ V2.4 — Lihat Stok consistency layer
   - Guide modal compact without internal scroll.
   - Toast remains top center.
   - Light/Dark polish for stock table, print modal, and cards.
   ========================================================= */
#lihatStokHelpModal{
  align-items:center !important;
  justify-content:center !important;
  padding:clamp(10px, 2vw, 18px) !important;
}
#lihatStokHelpModal .help-modal-card,
#lihatStokHelpModal .help-modal-card.apj-guide-fit{
  width:min(920px, calc(100vw - 28px)) !important;
  max-width:920px !important;
  max-height:calc(100dvh - 28px) !important;
  overflow:hidden !important;
  padding:clamp(14px, 1.7vw, 22px) !important;
  border-radius:28px !important;
  display:flex !important;
  flex-direction:column !important;
}
#lihatStokHelpModal .help-modal-card > .relative{display:flex !important;flex-direction:column !important;min-height:0 !important;height:auto !important;}
#lihatStokHelpModal .help-modal-card .mb-5{margin-bottom:clamp(10px, 1.3vw, 14px) !important;}
#lihatStokHelpModal .help-modal-card h3{margin-top:10px !important;font-size:clamp(24px, 2.35vw, 34px) !important;line-height:1.08 !important;letter-spacing:-.045em !important;}
#lihatStokHelpModal .help-modal-card h3 + p{margin-top:8px !important;font-size:clamp(12px, 1.05vw, 14px) !important;line-height:1.55 !important;}
#lihatStokHelpModal .help-modal-card .grid{gap:10px !important;}
#lihatStokHelpModal .help-step{padding:clamp(10px, 1.15vw, 14px) !important;border-radius:18px !important;min-height:auto !important;align-items:flex-start !important;}
#lihatStokHelpModal .help-step-number{width:30px !important;height:30px !important;min-width:30px !important;border-radius:11px !important;font-size:13px !important;}
#lihatStokHelpModal .help-step p{line-height:1.42 !important;}
#lihatStokHelpModal .help-step p:first-child{font-size:clamp(12px, .98vw, 14px) !important;margin:0 !important;}
#lihatStokHelpModal .help-step p:last-child{font-size:clamp(11px, .9vw, 12px) !important;margin-top:4px !important;}
#lihatStokHelpModal .help-modal-card .rounded-2xl{border-radius:18px !important;}
#lihatStokHelpModal .help-modal-card .rounded-2xl.p-4,
#lihatStokHelpModal .help-modal-card div[class*="bg-cyan-500/10"],
#lihatStokHelpModal .help-modal-card div[class*="bg-amber-500/10"]{padding:clamp(10px, 1.1vw, 14px) !important;margin-bottom:clamp(10px, 1.1vw, 12px) !important;}
#lihatStokHelpModal .modal-overlay{background:rgba(15,23,42,.58) !important;backdrop-filter:blur(8px) !important;}
html[data-theme="light"] #lihatStokHelpModal .modal-overlay,
body[data-theme="light"] #lihatStokHelpModal .modal-overlay{background:rgba(71,85,105,.42) !important;backdrop-filter:blur(7px) !important;}
body:has(#lihatStokHelpModal:not(.hidden)) #customToast.toast{top:18px !important;left:50% !important;right:auto !important;bottom:auto !important;transform:translate(-50%,-16px) scale(.98) !important;}
body:has(#lihatStokHelpModal:not(.hidden)) #customToast.toast.show{transform:translate(-50%,0) scale(1) !important;}

html[data-theme="light"] #tbodyStok tr,
body[data-theme="light"] #tbodyStok tr{background:rgba(255,255,255,.78) !important;border-color:rgba(148,163,184,.22) !important;}
html[data-theme="light"] #tbodyStok tr:hover,
body[data-theme="light"] #tbodyStok tr:hover{background:rgba(219,234,254,.50) !important;}
html[data-theme="light"] .table-shell,
body[data-theme="light"] .table-shell{background:rgba(255,255,255,.78) !important;border-color:rgba(147,197,253,.34) !important;box-shadow:0 18px 54px rgba(37,63,103,.10) !important;}
html[data-theme="light"] .thead-row,
body[data-theme="light"] .thead-row{background:linear-gradient(135deg,rgba(219,234,254,.94),rgba(236,253,245,.82)) !important;color:#334155 !important;border-color:rgba(147,197,253,.35) !important;}
html[data-theme="light"] #modalPrint .modal-card,
body[data-theme="light"] #modalPrint .modal-card,
html[data-theme="light"] #logoutModal .modal-card,
body[data-theme="light"] #logoutModal .modal-card{background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(239,246,255,.94)) !important;color:#0f172a !important;border-color:rgba(147,197,253,.40) !important;box-shadow:0 28px 90px rgba(37,63,103,.18) !important;}
html[data-theme="light"] .status-kosong,
body[data-theme="light"] .status-kosong{background:rgba(244,63,94,.10) !important;color:#be123c !important;border-color:rgba(244,63,94,.20) !important;}
html[data-theme="light"] .status-aman,
body[data-theme="light"] .status-aman{background:rgba(16,185,129,.10) !important;color:#047857 !important;border-color:rgba(16,185,129,.20) !important;}
html[data-theme="light"] .status-kritis,
body[data-theme="light"] .status-kritis{background:rgba(245,158,11,.12) !important;color:#b45309 !important;border-color:rgba(245,158,11,.24) !important;}

@media (max-width: 760px){
  #lihatStokHelpModal .help-modal-card,
  #lihatStokHelpModal .help-modal-card.apj-guide-fit{width:calc(100vw - 20px) !important;max-height:calc(100dvh - 20px) !important;border-radius:22px !important;padding:14px !important;}
  #lihatStokHelpModal .help-modal-card h3{font-size:22px !important;}
}
@media (max-height: 720px){
  #lihatStokHelpModal .help-modal-card{padding:12px 16px !important;}
  #lihatStokHelpModal .help-step{padding:9px 10px !important;}
  #lihatStokHelpModal .help-modal-card h3{font-size:23px !important;}
}
@media (max-height: 650px){
  #lihatStokHelpModal .help-step p:last-child{display:none !important;}
  #lihatStokHelpModal .help-modal-card div[class*="bg-cyan-500/10"] p:last-child,
  #lihatStokHelpModal .help-modal-card div[class*="bg-amber-500/10"] p:last-child{display:block !important;font-size:11px !important;}
}


/* =========================================================
   APP-APJ V2.5 - sidebar coming soon + universal guide fit + riwayat
   ========================================================= */
.nav-soon,
.apj-soon-badge{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  padding:4px 8px;border-radius:999px;
  background:rgba(6,182,212,.12);border:1px solid rgba(6,182,212,.24);
  color:#67e8f9;font-size:9px;font-weight:950;text-transform:uppercase;letter-spacing:.055em;
  white-space:nowrap;line-height:1;
}
.nav-coming-soon,.apj-coming-soon{opacity:.82;cursor:not-allowed;}
.nav-coming-soon:hover,.apj-coming-soon:hover{opacity:1;background:rgba(6,182,212,.07) !important;border-color:rgba(6,182,212,.18) !important;transform:none !important;}
html[data-theme="light"] #sidebar .nav-soon,
body[data-theme="light"] #sidebar .nav-soon,
html[data-theme="light"] .apj-soon-badge,
body[data-theme="light"] .apj-soon-badge{
  background:linear-gradient(135deg,rgba(219,234,254,.92),rgba(207,250,254,.86)) !important;
  color:#075985 !important;border-color:rgba(14,165,233,.30) !important;
}
#sidebar.sidebar-collapsed .nav-soon,
#sidebar.sidebar-collapsed .apj-soon-badge{display:none !important;}

#customToast.toast,
.toast#customToast,
.apj-toast{
  top:18px !important;left:50% !important;right:auto !important;bottom:auto !important;
  transform:translate(-50%,-14px) scale(.98) !important;
  z-index:10020 !important;max-width:min(520px,calc(100vw - 32px)) !important;
}
#customToast.toast.show,
.toast#customToast.show,
.apj-toast.apj-show{transform:translate(-50%,0) scale(1) !important;}
body.apj-surat-modal-open #customToast.toast,
body:has(#suratJalanModal.flex) #customToast.toast,
body:has(#suratJalanModal:not(.hidden)) #customToast.toast,
body:has(.help-modal-card:not(.hidden)) #customToast.toast{top:18px !important;left:50% !important;right:auto !important;bottom:auto !important;}

#inputHelpModal,#outputHelpModal,#transferHelpModal,#produkHelpModal,#opnameHelpModal,#lihatStokHelpModal,#riwayatHelpModal{align-items:center !important;justify-content:center !important;padding:clamp(10px,2vw,18px) !important;}
#inputHelpModal .help-modal-card,#outputHelpModal .help-modal-card,#transferHelpModal .help-modal-card,#produkHelpModal .help-modal-card,#opnameHelpModal .help-modal-card,#lihatStokHelpModal .help-modal-card,#riwayatHelpModal .help-modal-card,
.help-modal-card.apj-guide-fit{
  width:min(930px,calc(100vw - 28px)) !important;max-width:930px !important;
  max-height:calc(100dvh - 28px) !important;overflow:hidden !important;
  padding:clamp(14px,1.6vw,22px) !important;border-radius:28px !important;
  display:flex !important;flex-direction:column !important;
}
.help-modal-card.apj-guide-fit > .relative{display:flex !important;flex-direction:column !important;min-height:0 !important;}
.help-modal-card.apj-guide-fit .mb-5{margin-bottom:clamp(9px,1.1vw,13px) !important;}
.help-modal-card.apj-guide-fit h3{margin-top:10px !important;font-size:clamp(22px,2.25vw,33px) !important;line-height:1.08 !important;letter-spacing:-.045em !important;}
.help-modal-card.apj-guide-fit h3 + p{margin-top:7px !important;font-size:clamp(12px,1vw,14px) !important;line-height:1.48 !important;}
.help-modal-card.apj-guide-fit .grid{gap:10px !important;}
.help-modal-card.apj-guide-fit .help-step{padding:clamp(10px,1.08vw,14px) !important;border-radius:18px !important;min-height:auto !important;align-items:flex-start !important;}
.help-modal-card.apj-guide-fit .help-step-number{width:30px !important;height:30px !important;min-width:30px !important;border-radius:11px !important;font-size:13px !important;}
.help-modal-card.apj-guide-fit .help-step p{line-height:1.38 !important;}
.help-modal-card.apj-guide-fit .help-step p:first-child{font-size:clamp(12px,.98vw,14px) !important;margin:0 !important;}
.help-modal-card.apj-guide-fit .help-step p:last-child{font-size:clamp(11px,.9vw,12px) !important;margin-top:4px !important;}
.help-modal-card.apj-guide-fit .rounded-2xl{border-radius:18px !important;}
.help-modal-card.apj-guide-fit .rounded-2xl.p-4,
.help-modal-card.apj-guide-fit div[class*="bg-cyan-500/10"],
.help-modal-card.apj-guide-fit div[class*="bg-amber-500/10"]{padding:clamp(10px,1.05vw,14px) !important;margin-bottom:clamp(9px,1.05vw,12px) !important;}
.help-modal-card.apj-guide-fit .flex.flex-col.sm\:flex-row{margin-top:auto !important;padding-top:8px !important;}
@media (max-width:760px){
  .help-modal-card.apj-guide-fit{width:calc(100vw - 20px) !important;max-height:calc(100dvh - 20px) !important;border-radius:22px !important;padding:14px !important;}
  .help-modal-card.apj-guide-fit h3{font-size:22px !important;}
  .help-modal-card.apj-guide-fit .grid{grid-template-columns:1fr !important;}
}
@media (max-height:720px){
  .help-modal-card.apj-guide-fit{padding:12px 16px !important;}
  .help-modal-card.apj-guide-fit .help-step{padding:8px 10px !important;}
  .help-modal-card.apj-guide-fit h3{font-size:22px !important;}
  .help-modal-card.apj-guide-fit h3 + p{display:none !important;}
}
@media (max-height:650px){
  .help-modal-card.apj-guide-fit .help-step p:last-child{display:none !important;}
  .help-modal-card.apj-guide-fit div[class*="bg-cyan-500/10"] p:last-child,
  .help-modal-card.apj-guide-fit div[class*="bg-amber-500/10"] p:last-child{display:block !important;font-size:11px !important;}
}

html[data-theme="light"] #tbodyRiwayat tr,
body[data-theme="light"] #tbodyRiwayat tr{background:rgba(255,255,255,.82) !important;border-color:rgba(148,163,184,.20) !important;}
html[data-theme="light"] #tbodyRiwayat tr:hover,
body[data-theme="light"] #tbodyRiwayat tr:hover{background:rgba(219,234,254,.48) !important;}
html[data-theme="light"] #jenisBadges .badge,
body[data-theme="light"] #jenisBadges .badge{background:rgba(37,99,235,.08) !important;border-color:rgba(37,99,235,.18) !important;color:#1e3a8a !important;}
html[data-theme="light"] .print-card,
body[data-theme="light"] .print-card{background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(239,246,255,.86)) !important;border-color:rgba(147,197,253,.34) !important;}


/* APP-APJ V2.6 - unified lock and denied states */
.nav-item.nav-locked{
  opacity:.86;
  cursor:not-allowed;
  border-color:rgba(244,63,94,.18) !important;
}
.nav-item.nav-locked:hover{
  transform:none !important;
  background:rgba(244,63,94,.08) !important;
  border-color:rgba(244,63,94,.26) !important;
}
.nav-lock{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:20px;
  padding:3px 8px;
  border-radius:999px;
  border:1px solid rgba(244,63,94,.34);
  background:rgba(244,63,94,.12);
  color:#fecdd3;
  font-size:9px;
  font-weight:950;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
}
body.apj-sidebar-collapsed .nav-lock,
#sidebar.sidebar-collapsed .nav-lock{display:none !important;}
[data-theme="light"] .nav-lock{
  color:#be123c;
  background:#ffe4e6;
  border-color:#fecdd3;
}
.apj-unified-denied{
  width:100%;
  padding:22px 24px;
}
.apj-unified-denied-card{
  display:flex;
  align-items:flex-start;
  gap:16px;
  width:100%;
  border-radius:28px;
  padding:24px 26px;
  border:1px solid rgba(244,63,94,.40);
  background:linear-gradient(135deg, rgba(244,63,94,.16), rgba(251,113,133,.10), rgba(255,255,255,.02));
  box-shadow:0 22px 70px rgba(15,23,42,.18), inset 0 1px 0 rgba(255,255,255,.18);
}
.apj-unified-denied-icon{
  width:52px;
  height:52px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  border:1px solid rgba(244,63,94,.32);
  background:rgba(244,63,94,.12);
  color:#fb7185;
  font-size:22px;
}
.apj-unified-denied-copy h2{
  margin:0 0 7px;
  color:var(--text,#f8fafc);
  font-size:21px;
  font-weight:950;
  letter-spacing:-.03em;
}
.apj-unified-denied-copy p{
  margin:0;
  color:#fb7185;
  font-size:15px;
  line-height:1.6;
  font-weight:700;
}
[data-theme="light"] .apj-unified-denied-card{
  background:linear-gradient(135deg, #fff1f2, #ffe4e6 34%, #f8fbff);
  border-color:#fb7185;
  box-shadow:0 24px 70px rgba(190,18,60,.13), inset 0 1px 0 rgba(255,255,255,.86);
}
[data-theme="light"] .apj-unified-denied-icon{
  background:#ffe4e6;
  border-color:#fb7185;
  color:#e11d48;
}
[data-theme="light"] .apj-unified-denied-copy h2{color:#111827;}
[data-theme="light"] .apj-unified-denied-copy p{color:#e11d48;}
@media(max-width:720px){
  .apj-unified-denied{padding:16px;}
  .apj-unified-denied-card{padding:18px;border-radius:22px;gap:12px;}
  .apj-unified-denied-icon{width:44px;height:44px;border-radius:15px;}
  .apj-unified-denied-copy h2{font-size:18px;}
  .apj-unified-denied-copy p{font-size:13px;}
}


/* =========================================================
   APJ V27 Global Header User Chip Fix
   Nama/level di kiri, foto/avatar di kanan. Konsisten semua halaman.
   ========================================================= */
.user-chip{
  flex-direction:row !important;
  justify-content:flex-end !important;
  align-items:center !important;
}
.user-chip .user-meta{
  order:0 !important;
  text-align:right !important;
  display:block !important;
}
.user-chip .user-avatar{
  order:1 !important;
  flex:0 0 auto !important;
}
@media(max-width:640px){
  .user-chip .user-meta{display:none !important;}
}


/* APP V10.50 / V181 - Sidebar Lock Badge Fix
   Satu menu terkunci hanya menampilkan satu badge tulisan Lock. */
.apj-dashboard-v3 .nav-locked::after,
#dashboardSidebarMenu .nav-locked::after,
#sidebar .nav-locked::after{
  content:none !important;
  display:none !important;
}
#dashboardSidebarMenu .nav-lock-badge,
#sidebar .nav-lock-badge,
#dashboardSidebarMenu .apj-lock-badge,
#sidebar .apj-lock-badge{
  display:none !important;
}
#dashboardSidebarMenu .nav-item.nav-locked .nav-lock,
#sidebar .nav-item.nav-locked .nav-lock{
  margin-left:auto;
  flex:0 0 auto;
}

/* =========================================================
   APP V10.50 / V182 - Permission Notice Modal
   Khusus notifikasi: Terkunci, Segera Hadir, Dalam Perbaikan.
   Tidak mengubah toast normal untuk sukses/error form.
   ========================================================= */
.apj-permission-notice{
  position:fixed;
  inset:0;
  z-index:10080;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .22s ease, visibility .22s ease;
}
.apj-permission-notice.apj-show{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.apj-permission-notice-backdrop{
  position:absolute;
  inset:0;
  background:rgba(2,6,23,.72);
  backdrop-filter:blur(14px) saturate(1.06);
  -webkit-backdrop-filter:blur(14px) saturate(1.06);
}
.apj-permission-notice-card{
  position:relative;
  width:min(440px, calc(100vw - 32px));
  border-radius:28px;
  padding:26px 24px 22px;
  border:1px solid rgba(148,163,184,.18);
  background:
    radial-gradient(circle at 18% 0%, rgba(56,189,248,.18), transparent 32%),
    linear-gradient(145deg, rgba(15,23,42,.98), rgba(2,6,23,.96));
  box-shadow:0 30px 90px rgba(0,0,0,.56), inset 0 1px 0 rgba(255,255,255,.06);
  color:#e5eefc;
  text-align:center;
  transform:translateY(16px) scale(.96);
  transition:transform .24s cubic-bezier(.16,1,.3,1);
  overflow:hidden;
}
.apj-permission-notice.apj-show .apj-permission-notice-card{transform:translateY(0) scale(1);}
.apj-permission-notice-card::before{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  top:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(125,211,252,.55), transparent);
}
.apj-permission-notice-x{
  position:absolute;
  right:14px;
  top:14px;
  width:34px;
  height:34px;
  border-radius:13px;
  border:1px solid rgba(148,163,184,.18);
  background:rgba(15,23,42,.62);
  color:#cbd5e1;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  line-height:1;
  cursor:pointer;
}
.apj-permission-notice-x:hover{background:rgba(244,63,94,.16);border-color:rgba(244,63,94,.32);color:#fecdd3;}
.apj-permission-notice-icon{
  width:76px;
  height:76px;
  margin:2px auto 14px;
  border-radius:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:34px;
  background:linear-gradient(135deg, rgba(244,63,94,.20), rgba(245,158,11,.14));
  border:1px solid rgba(251,113,133,.30);
  box-shadow:0 18px 46px rgba(244,63,94,.16);
}
.apj-permission-notice-kicker{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:26px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(125,211,252,.20);
  background:rgba(14,165,233,.10);
  color:#7dd3fc;
  font-size:.72rem;
  font-weight:950;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:10px;
}
.apj-permission-notice-title{
  margin:0;
  color:#f8fafc;
  font-size:1.35rem;
  line-height:1.15;
  font-weight:950;
  letter-spacing:-.03em;
}
.apj-permission-notice-message{
  margin:10px auto 0;
  color:#b6c5d8;
  font-size:.95rem;
  line-height:1.55;
  font-weight:700;
  max-width:34rem;
}
.apj-permission-notice-meta{
  margin:16px auto 0;
  width:max-content;
  max-width:100%;
  border-radius:14px;
  padding:9px 12px;
  background:rgba(15,23,42,.74);
  border:1px solid rgba(148,163,184,.16);
  color:#cbd5e1;
  font-size:.78rem;
  font-weight:850;
  overflow-wrap:anywhere;
}
.apj-permission-notice-actions{
  margin-top:18px;
  display:flex;
  justify-content:center;
}
.apj-permission-notice-ok{
  min-width:132px;
  height:42px;
  border:0;
  border-radius:16px;
  background:linear-gradient(135deg, #0ea5e9, #2563eb);
  color:white;
  font-weight:950;
  letter-spacing:.01em;
  box-shadow:0 14px 36px rgba(37,99,235,.28);
  cursor:pointer;
}
.apj-permission-notice-ok:hover{filter:brightness(1.08);transform:translateY(-1px);}
.apj-permission-notice-soon .apj-permission-notice-icon{
  background:linear-gradient(135deg, rgba(245,158,11,.22), rgba(234,179,8,.13));
  border-color:rgba(251,191,36,.34);
  box-shadow:0 18px 46px rgba(245,158,11,.16);
}
.apj-permission-notice-soon .apj-permission-notice-kicker{
  background:rgba(245,158,11,.12);
  border-color:rgba(245,158,11,.26);
  color:#fcd34d;
}
.apj-permission-notice-repair .apj-permission-notice-icon{
  background:linear-gradient(135deg, rgba(168,85,247,.22), rgba(14,165,233,.13));
  border-color:rgba(168,85,247,.34);
  box-shadow:0 18px 46px rgba(168,85,247,.16);
}
.apj-permission-notice-repair .apj-permission-notice-kicker{
  background:rgba(168,85,247,.12);
  border-color:rgba(168,85,247,.26);
  color:#d8b4fe;
}
.nav-item.nav-maintenance,
.nav-item.apj-maintenance{
  opacity:.78;
  cursor:not-allowed;
  border-color:rgba(168,85,247,.20) !important;
  background:rgba(168,85,247,.055) !important;
}
#dashboardSidebarMenu .nav-item.nav-maintenance .nav-repair,
#sidebar .nav-item.nav-maintenance .nav-repair{
  margin-left:auto;
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:21px;
  padding:2px 9px;
  border-radius:999px;
  font-size:.66rem;
  line-height:1;
  font-weight:950;
  letter-spacing:.01em;
  background:rgba(168,85,247,.16);
  color:#e9d5ff;
  border:1px solid rgba(168,85,247,.30);
}
body.apj-permission-notice-open #customToast.toast,
body.apj-permission-notice-open .apj-toast{
  pointer-events:none;
}

html[data-theme="light"] .apj-permission-notice-backdrop,
body[data-theme="light"] .apj-permission-notice-backdrop{
  background:rgba(15,23,42,.30);
  backdrop-filter:blur(14px) saturate(1.08);
  -webkit-backdrop-filter:blur(14px) saturate(1.08);
}
html[data-theme="light"] .apj-permission-notice-card,
body[data-theme="light"] .apj-permission-notice-card{
  background:
    radial-gradient(circle at 18% 0%, rgba(14,165,233,.16), transparent 32%),
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(248,250,252,.96));
  border-color:rgba(30,41,59,.12);
  color:#0f172a;
  box-shadow:0 30px 90px rgba(15,23,42,.20), inset 0 1px 0 rgba(255,255,255,.88);
}
html[data-theme="light"] .apj-permission-notice-title,
body[data-theme="light"] .apj-permission-notice-title{color:#0f172a;}
html[data-theme="light"] .apj-permission-notice-message,
body[data-theme="light"] .apj-permission-notice-message{color:#475569;}
html[data-theme="light"] .apj-permission-notice-meta,
body[data-theme="light"] .apj-permission-notice-meta{
  background:#f8fafc;
  border-color:rgba(15,23,42,.10);
  color:#334155;
}
html[data-theme="light"] .apj-permission-notice-x,
body[data-theme="light"] .apj-permission-notice-x{
  background:#f8fafc;
  color:#475569;
  border-color:rgba(15,23,42,.10);
}
html[data-theme="light"] #dashboardSidebarMenu .nav-item.nav-maintenance .nav-repair,
html[data-theme="light"] #sidebar .nav-item.nav-maintenance .nav-repair,
body[data-theme="light"] #dashboardSidebarMenu .nav-item.nav-maintenance .nav-repair,
body[data-theme="light"] #sidebar .nav-item.nav-maintenance .nav-repair{
  background:#f3e8ff;
  color:#6b21a8;
  border-color:#e9d5ff;
}
@media (max-width:520px){
  .apj-permission-notice{padding:16px;}
  .apj-permission-notice-card{border-radius:24px;padding:24px 18px 20px;}
  .apj-permission-notice-icon{width:66px;height:66px;border-radius:24px;font-size:30px;}
  .apj-permission-notice-title{font-size:1.18rem;}
  .apj-permission-notice-message{font-size:.88rem;}
  .apj-permission-notice-meta{font-size:.72rem;}
}


/* =============================================================================
   APP V10.50 / V183 - Dashboard Absensi Light Hero Sync
   Selaraskan kartu Selamat Datang Absensi di light mode dengan hero Inventory:
   permukaan terang, teks hitam/biru, badge dan meta pill terang.
   ============================================================================= */
html[data-theme="light"] .apj-dashboard-v3[data-dashboard-mode="absensi"] .absensi-greeting-card,
body[data-theme="light"] .apj-dashboard-v3[data-dashboard-mode="absensi"] .absensi-greeting-card{
  background:
    radial-gradient(circle at 80% 12%,rgba(37,99,235,.16),transparent 34%),
    radial-gradient(circle at 18% 88%,rgba(6,182,212,.11),transparent 30%),
    linear-gradient(135deg,rgba(255,255,255,.97),rgba(232,242,255,.88)) !important;
  border:1px solid rgba(151,170,196,.46) !important;
  box-shadow:0 22px 58px rgba(31,55,92,.13), inset 0 1px 0 rgba(255,255,255,.94) !important;
  color:#0b1220 !important;
}
html[data-theme="light"] .apj-dashboard-v3[data-dashboard-mode="absensi"] .absensi-greeting-card:before,
body[data-theme="light"] .apj-dashboard-v3[data-dashboard-mode="absensi"] .absensi-greeting-card:before{
  background:rgba(37,99,235,.12) !important;
  opacity:.72 !important;
}
html[data-theme="light"] .apj-dashboard-v3[data-dashboard-mode="absensi"] .absensi-greeting-card:after,
body[data-theme="light"] .apj-dashboard-v3[data-dashboard-mode="absensi"] .absensi-greeting-card:after{
  background:rgba(6,182,212,.10) !important;
  opacity:.52 !important;
}
html[data-theme="light"] .apj-dashboard-v3[data-dashboard-mode="absensi"] .absensi-greeting-card h1,
html[data-theme="light"] .apj-dashboard-v3[data-dashboard-mode="absensi"] .absensi-greeting-card h1 span:first-child,
body[data-theme="light"] .apj-dashboard-v3[data-dashboard-mode="absensi"] .absensi-greeting-card h1,
body[data-theme="light"] .apj-dashboard-v3[data-dashboard-mode="absensi"] .absensi-greeting-card h1 span:first-child{
  color:#0b1220 !important;
  text-shadow:none !important;
}
html[data-theme="light"] .apj-dashboard-v3[data-dashboard-mode="absensi"] .absensi-greeting-card h1 span#welcomeNama,
html[data-theme="light"] .apj-dashboard-v3[data-dashboard-mode="absensi"] .absensi-greeting-card h1 span:last-child,
body[data-theme="light"] .apj-dashboard-v3[data-dashboard-mode="absensi"] .absensi-greeting-card h1 span#welcomeNama,
body[data-theme="light"] .apj-dashboard-v3[data-dashboard-mode="absensi"] .absensi-greeting-card h1 span:last-child{
  color:#2563eb !important;
  text-shadow:none !important;
}
html[data-theme="light"] .apj-dashboard-v3[data-dashboard-mode="absensi"] .absensi-greeting-card .soft-badge,
body[data-theme="light"] .apj-dashboard-v3[data-dashboard-mode="absensi"] .absensi-greeting-card .soft-badge{
  background:linear-gradient(135deg,rgba(37,99,235,.13),rgba(6,182,212,.08)) !important;
  border-color:rgba(37,99,235,.24) !important;
  color:#1d4ed8 !important;
  box-shadow:0 12px 24px rgba(37,99,235,.08), inset 0 1px 0 rgba(255,255,255,.78) !important;
}
html[data-theme="light"] .apj-dashboard-v3[data-dashboard-mode="absensi"] .absensi-greeting-meta span,
body[data-theme="light"] .apj-dashboard-v3[data-dashboard-mode="absensi"] .absensi-greeting-meta span{
  background:rgba(255,255,255,.74) !important;
  color:#334155 !important;
  border-color:rgba(151,170,196,.42) !important;
  box-shadow:0 12px 24px rgba(31,55,92,.09), inset 0 1px 0 rgba(255,255,255,.92) !important;
}
html[data-theme="light"] .apj-dashboard-v3[data-dashboard-mode="absensi"] .absensi-greeting-card p,
body[data-theme="light"] .apj-dashboard-v3[data-dashboard-mode="absensi"] .absensi-greeting-card p{
  color:#526985 !important;
}