/* DESKTOP_CLEAN_V19 - PC only */
@media (min-width:901px){

  html,
  body{
    margin:0!important;
    padding:0!important;
    background:#f4f7fb!important;
    font-family:Arial, sans-serif!important;
    font-size:14px!important;
    line-height:1.45!important;
    overflow-x:hidden!important;
  }

  .mobile-topbar,
  .mobile-drawer-backdrop{
    display:none!important;
  }

  body > .nav .mobile-view-mode-v12,
  body > .nav .view-mode-title,
  body > .nav .view-mode-buttons{
    display:none!important;
  }

  body > .nav{
    position:fixed!important;
    top:0!important;
    left:0!important;
    bottom:0!important;
    width:280px!important;
    max-width:280px!important;
    min-width:280px!important;
    height:100vh!important;
    padding:24px 16px 26px 16px!important;
    box-sizing:border-box!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    background:linear-gradient(180deg,#174f80 0%,#123d66 48%,#0f2742 100%)!important;
    box-shadow:8px 0 28px rgba(15,23,42,.14)!important;
  }

  body > .nav .nav-title,
  body > .nav .brand-text{
    margin:0 0 6px 0!important;
    padding:0!important;
  }

  body > .nav .brand-jom,
  body > .nav .brand-silat{
    display:inline!important;
    font-size:30px!important;
    line-height:1!important;
    font-weight:950!important;
    letter-spacing:.4px!important;
    color:#fff!important;
  }

  body > .nav .nav-sub{
    display:block!important;
    font-size:10.5px!important;
    line-height:1.25!important;
    letter-spacing:.8px!important;
    color:#dbeafe!important;
    margin:2px 0 20px 0!important;
    white-space:normal!important;
  }

  body > .nav .nav-group{
    margin:0 0 9px 0!important;
  }

  body > .nav .nav-group-title{
    display:block!important;
    font-size:10.5px!important;
    line-height:1.25!important;
    letter-spacing:.8px!important;
    margin:15px 0 8px 0!important;
    color:#bfdbfe!important;
    font-weight:900!important;
    text-transform:uppercase!important;
  }

  body > .nav .nav-item,
  body > .nav summary,
  body > .nav .nav-group-toggle{
    min-height:40px!important;
    height:auto!important;
    width:100%!important;
    padding:10px 12px!important;
    margin:4px 0!important;
    border-radius:11px!important;
    font-size:13.5px!important;
    line-height:1.3!important;
    color:#e5eef8!important;
    background:rgba(255,255,255,.06)!important;
    border:1px solid rgba(255,255,255,.05)!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
    box-sizing:border-box!important;
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
    text-decoration:none!important;
  }

  body > .nav .nav-item:hover,
  body > .nav summary:hover,
  body > .nav .nav-group-toggle:hover{
    background:rgba(255,255,255,.10)!important;
  }

  body > .nav .nav-item.active{
    background:#2563eb!important;
    color:#fff!important;
    border-color:rgba(255,255,255,.18)!important;
    box-shadow:0 8px 18px rgba(37,99,235,.22)!important;
  }

  body > .nav .cute-menu-icon{
    flex:0 0 25px!important;
    width:25px!important;
    height:25px!important;
    border-radius:8px!important;
    font-size:13px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    background:rgba(255,255,255,.12)!important;
  }

  body > .nav .cute-menu-label{
    flex:1 1 auto!important;
    min-width:0!important;
    white-space:normal!important;
    overflow:visible!important;
  }

  body > .nav .nav-caret{
    margin-left:auto!important;
    flex:0 0 auto!important;
  }

  body > .nav .sidebar-user-fixed-v4{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    width:100%!important;
    max-width:100%!important;
    margin:22px 0 0 0!important;
    padding:12px!important;
    box-sizing:border-box!important;
    border-radius:16px!important;
    background:rgba(255,255,255,.08)!important;
    border:1px solid rgba(255,255,255,.12)!important;
    box-shadow:none!important;
  }

  body > .nav .sidebar-user-name-v4{
    width:100%!important;
    min-height:34px!important;
    padding:9px 11px!important;
    margin:0 0 9px 0!important;
    border-radius:10px!important;
    background:#fff!important;
    color:#0f172a!important;
    font-size:12.5px!important;
    font-weight:900!important;
    box-sizing:border-box!important;
  }

  body > .nav .sidebar-user-buttons-v4{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
    margin:0!important;
  }

  body > .nav .sidebar-settings-v4,
  body > .nav .sidebar-logout-v4{
    min-height:34px!important;
    padding:8px 9px!important;
    border-radius:999px!important;
    font-size:12.5px!important;
    font-weight:900!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-decoration:none!important;
  }

  body > .nav .sidebar-settings-v4{
    background:#fff!important;
    color:#0f172a!important;
  }

  body > .nav .sidebar-logout-v4{
    background:#fee2e2!important;
    color:#7f1d1d!important;
  }

  body > .nav .sidebar-settings-v4 .cute-menu-icon,
  body > .nav .sidebar-logout-v4 .cute-menu-icon{
    display:none!important;
  }

  body > .nav .sidebar-mazagroup-footer-v2{
    margin-top:10px!important;
    text-align:center!important;
    opacity:1!important;
  }

  body > .nav .sidebar-mazagroup-logo-v2{
    font-size:10px!important;
    color:#cbd5e1!important;
    font-weight:800!important;
  }

  body > .nav .sidebar-mazagroup-text-v2{
    font-size:9px!important;
    color:#94a3b8!important;
  }

  .page-shell{
    margin-left:280px!important;
    width:calc(100% - 280px)!important;
    max-width:none!important;
    min-width:0!important;
    padding:26px 32px!important;
    box-sizing:border-box!important;
  }

  .page-topbar{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    min-height:76px!important;
    margin:0 0 22px 0!important;
    padding:18px 22px!important;
    border-radius:16px!important;
    background:#fff!important;
    border:1px solid #e5e7eb!important;
    box-shadow:0 8px 24px rgba(15,23,42,.06)!important;
  }

  .page-topbar h1,
  .page-title{
    font-size:21px!important;
    line-height:1.2!important;
    font-weight:900!important;
    margin:0!important;
    color:#111827!important;
  }

  .page-meta{
    font-size:12.5px!important;
    color:#64748b!important;
    margin-top:4px!important;
  }

  .box,
  .card,
  .stat-card,
  .alert-card,
  .panel,
  .section-card,
  .side-panel{
    width:100%!important;
    max-width:none!important;
    background:#fff!important;
    border:1px solid #e5e7eb!important;
    border-radius:16px!important;
    box-shadow:0 8px 24px rgba(15,23,42,.06)!important;
    padding:22px!important;
    margin:0 0 22px 0!important;
    box-sizing:border-box!important;
  }

  .box h1,
  h1{
    font-size:22px!important;
    font-weight:900!important;
    margin:0 0 12px 0!important;
  }

  .box h2,
  h2{
    font-size:19px!important;
    font-weight:900!important;
    margin:0 0 14px 0!important;
  }

  .small,
  small,
  .muted,
  .text-muted,
  .stat-sub{
    font-size:13px!important;
    color:#64748b!important;
  }

  .dashboard-cards{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:18px!important;
  }

  .stat-card{
    min-height:128px!important;
  }

  .stat-label{
    font-size:11.5px!important;
    letter-spacing:.9px!important;
    font-weight:900!important;
    color:#64748b!important;
  }

  .stat-value{
    font-size:31px!important;
    line-height:1.1!important;
    margin:8px 0!important;
    font-weight:900!important;
  }

  form .row,
  form .row2{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:18px!important;
    align-items:end!important;
  }

  form .row3{
    display:grid!important;
    grid-template-columns:1fr 1fr 1fr!important;
    gap:18px!important;
    align-items:end!important;
  }

  label{
    font-size:13px!important;
    font-weight:800!important;
    color:#334155!important;
    margin-bottom:6px!important;
    display:block!important;
  }

  input,
  select,
  textarea{
    width:100%!important;
    min-height:42px!important;
    padding:10px 12px!important;
    border-radius:10px!important;
    font-size:13.5px!important;
    border:1px solid #cbd5e1!important;
    box-sizing:border-box!important;
    background:#fff!important;
  }

  button,
  .btn,
  a.link-btn,
  input[type=submit]{
    min-height:42px!important;
    padding:10px 15px!important;
    border-radius:10px!important;
    font-size:13.5px!important;
    font-weight:800!important;
  }

  .table-wrap{
    width:100%!important;
    border-radius:14px!important;
    border:1px solid #e5e7eb!important;
    overflow:auto!important;
    background:#fff!important;
    box-shadow:none!important;
  }

  .table-wrap::after{
    display:none!important;
  }

  table{
    width:100%!important;
    min-width:0!important;
    border-collapse:separate!important;
    border-spacing:0!important;
  }

  th{
    background:#f8fafc!important;
    color:#334155!important;
    font-size:12.5px!important;
    font-weight:900!important;
    padding:13px!important;
    border-bottom:1px solid #e5e7eb!important;
  }

  td{
    font-size:13px!important;
    padding:13px!important;
    border-bottom:1px solid #eef2f7!important;
  }

  tr:last-child td{
    border-bottom:0!important;
  }
}

/* TOUCH_MOBILE_GUARD_V20 */
/* Phone/tablet must stay mobile even if browser requests desktop viewport */
@media (hover:none), (pointer:coarse){

  html,
  body{
    margin:0!important;
    padding:0!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-x:hidden!important;
    background:#f3f6fa!important;
    font-size:15px!important;
    line-height:1.5!important;
    -webkit-text-size-adjust:100%!important;
  }

  body{
    padding-top:68px!important;
  }

  .mobile-topbar{
    display:flex!important;
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    height:68px!important;
    z-index:5000!important;
    align-items:center!important;
    justify-content:space-between!important;
    padding:10px 14px!important;
    box-sizing:border-box!important;
    background:linear-gradient(135deg,#0f172a,#174a78)!important;
    color:#fff!important;
  }

  .mobile-brand-main{
    font-size:19px!important;
    font-weight:950!important;
    line-height:1.05!important;
    color:#fff!important;
  }

  .mobile-brand-sub{
    font-size:9.5px!important;
    font-weight:800!important;
    color:#dbeafe!important;
    white-space:nowrap!important;
  }

  .mobile-menu-btn{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:48px!important;
    min-width:48px!important;
    height:44px!important;
    border-radius:14px!important;
    background:rgba(255,255,255,.12)!important;
    color:#fff!important;
    font-size:24px!important;
  }

  body > .nav{
    position:fixed!important;
    top:0!important;
    left:0!important;
    bottom:0!important;
    width:92vw!important;
    max-width:370px!important;
    height:100vh!important;
    z-index:6000!important;
    transform:translateX(-105%)!important;
    transition:transform .22s ease!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding:18px 14px 28px 14px!important;
    box-sizing:border-box!important;
    background:linear-gradient(180deg,#123d66,#0f2742)!important;
  }

  body.js-nav-open > .nav{
    transform:translateX(0)!important;
  }

  .mobile-drawer-backdrop{
    z-index:5500!important;
  }

  .page-shell{
    margin-left:0!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    padding:14px 12px!important;
    box-sizing:border-box!important;
  }

  .page-topbar{
    display:none!important;
  }

  .dashboard-cards{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:16px!important;
  }

  .box,
  .card,
  .stat-card,
  .alert-card,
  .panel,
  .section-card,
  .side-panel{
    width:100%!important;
    max-width:100%!important;
    padding:20px 18px!important;
    margin:0 0 16px 0!important;
    border-radius:18px!important;
    box-sizing:border-box!important;
  }

  .stat-value{
    font-size:42px!important;
  }

  .table-wrap{
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch!important;
  }

  table{
    min-width:720px!important;
  }
}

/* MOBILE_DRAWER_FOOTER_STICKY_V22 */
@media (hover:none), (pointer:coarse), (max-width:900px){

  body > .nav{
    padding-bottom:190px!important;
  }

  body > .nav .sidebar-user-fixed-v4{
    position:fixed!important;
    left:14px!important;
    bottom:18px!important;
    width:calc(92vw - 28px)!important;
    max-width:342px!important;
    margin:0!important;
    padding:12px!important;
    box-sizing:border-box!important;
    border-radius:18px!important;
    background:rgba(18,61,102,.96)!important;
    border:1px solid rgba(255,255,255,.14)!important;
    box-shadow:0 -10px 28px rgba(15,23,42,.24)!important;
    backdrop-filter:blur(10px)!important;
    z-index:6500!important;
  }

  body:not(.js-nav-open) > .nav .sidebar-user-fixed-v4{
    display:none!important;
  }

  body > .nav .sidebar-user-name-v4{
    width:100%!important;
    min-height:46px!important;
    display:flex!important;
    align-items:center!important;
    padding:12px 14px!important;
    margin:0 0 10px 0!important;
    border-radius:14px!important;
    background:#ffffff!important;
    color:#0f172a!important;
    font-size:15px!important;
    font-weight:900!important;
    box-sizing:border-box!important;
  }

  body > .nav .sidebar-user-buttons-v4{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
    margin:0!important;
  }

  body > .nav .sidebar-settings-v4,
  body > .nav .sidebar-logout-v4{
    min-height:48px!important;
    border-radius:999px!important;
    font-size:15px!important;
    font-weight:900!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-decoration:none!important;
    box-sizing:border-box!important;
  }

  body > .nav .sidebar-settings-v4{
    background:#ffffff!important;
    color:#0f172a!important;
    border:1px solid rgba(255,255,255,.75)!important;
  }

  body > .nav .sidebar-logout-v4{
    background:#fee2e2!important;
    color:#7f1d1d!important;
    border:1px solid #fecaca!important;
  }

  body > .nav .sidebar-mazagroup-footer-v2{
    margin-top:12px!important;
    text-align:center!important;
    opacity:1!important;
  }

  body > .nav .sidebar-mazagroup-logo-v2{
    color:#cbd5e1!important;
    font-size:12px!important;
    font-weight:900!important;
  }

  body > .nav .sidebar-mazagroup-text-v2{
    color:#94a3b8!important;
    font-size:11px!important;
    font-weight:800!important;
  }
}

/* DISABLE_PHONE_DESKTOP_TOGGLE_V23 */
@media (hover:none), (pointer:coarse), (max-width:900px){

  .view-mode-buttons.single{
    display:grid!important;
    grid-template-columns:1fr!important;
  }

  .view-mode-buttons button[data-view-mode-btn="desktop"],
  .view-mode-buttons button.disabled{
    display:none!important;
  }

  html.jom-desktop-view,
  body.jom-desktop-view{
    min-width:0!important;
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
  }

  body.jom-desktop-view .mobile-topbar{
    display:flex!important;
  }

  body.jom-desktop-view > .nav{
    width:92vw!important;
    max-width:370px!important;
    transform:translateX(-105%)!important;
  }

  body.jom-desktop-view.js-nav-open > .nav{
    transform:translateX(0)!important;
  }

  body.jom-desktop-view .page-shell{
    margin-left:0!important;
    width:100%!important;
    max-width:100%!important;
    padding:14px 12px!important;
  }
}

/* QUICK_LOGOUT_TOP_V24 */
@media (hover:none), (pointer:coarse), (max-width:900px){

  body > .nav .quick-logout-v24{
    display:block!important;
    margin:12px 0 16px 0!important;
    padding:12px!important;
    border-radius:18px!important;
    background:rgba(255,255,255,.08)!important;
    border:1px solid rgba(255,255,255,.14)!important;
    box-sizing:border-box!important;
  }

  body > .nav .quick-user-v24{
    width:100%!important;
    min-height:44px!important;
    display:flex!important;
    align-items:center!important;
    padding:11px 14px!important;
    margin:0 0 10px 0!important;
    border-radius:14px!important;
    background:#ffffff!important;
    color:#0f172a!important;
    font-size:15px!important;
    font-weight:900!important;
    box-sizing:border-box!important;
  }

  body > .nav .quick-actions-v24{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
  }

  body > .nav .quick-settings-v24,
  body > .nav .quick-logout-btn-v24{
    min-height:46px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:999px!important;
    font-size:15px!important;
    font-weight:900!important;
    text-decoration:none!important;
    box-sizing:border-box!important;
  }

  body > .nav .quick-settings-v24{
    background:#ffffff!important;
    color:#0f172a!important;
  }

  body > .nav .quick-logout-btn-v24{
    background:#fee2e2!important;
    color:#7f1d1d!important;
    border:1px solid #fecaca!important;
  }

  /* Sembunyikan footer lama di mobile supaya tidak mengganggu */
  body > .nav .sidebar-user-fixed-v4{
    display:none!important;
  }
}

@media(min-width:901px){
  body > .nav .quick-logout-v24{
    display:none!important;
  }
}

/* DESKTOP_SITE_SUPPORT_V25 */
/* If user chooses browser Desktop site, allow real desktop layout even on touch device */
body.jom-desktop-view{
  padding-top:0!important;
  min-width:1180px!important;
  overflow-x:auto!important;
}

body.jom-desktop-view .mobile-topbar,
body.jom-desktop-view .mobile-drawer-backdrop{
  display:none!important;
}

body.jom-desktop-view > .nav{
  display:block!important;
  visibility:visible!important;
  transform:none!important;
  position:fixed!important;
  top:0!important;
  left:0!important;
  bottom:0!important;
  width:280px!important;
  max-width:280px!important;
  min-width:280px!important;
  height:100vh!important;
  z-index:1000!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding:24px 16px 26px 16px!important;
}

body.jom-desktop-view .page-shell{
  margin-left:280px!important;
  width:calc(1180px - 280px)!important;
  max-width:none!important;
  min-width:0!important;
  padding:26px 32px!important;
  box-sizing:border-box!important;
}

body.jom-desktop-view .page-topbar{
  display:flex!important;
}

/* Desktop mode quick logout in sidebar */
body.jom-desktop-view > .nav .quick-logout-v24{
  display:block!important;
  margin:12px 0 16px 0!important;
  padding:10px!important;
  border-radius:14px!important;
  background:rgba(255,255,255,.08)!important;
  border:1px solid rgba(255,255,255,.12)!important;
}

body.jom-desktop-view > .nav .quick-user-v24{
  min-height:34px!important;
  padding:8px 10px!important;
  margin:0 0 8px 0!important;
  border-radius:10px!important;
  background:#fff!important;
  color:#0f172a!important;
  font-size:12.5px!important;
  font-weight:900!important;
}

body.jom-desktop-view > .nav .quick-actions-v24{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:8px!important;
}

body.jom-desktop-view > .nav .quick-settings-v24,
body.jom-desktop-view > .nav .quick-logout-btn-v24{
  min-height:34px!important;
  border-radius:999px!important;
  font-size:12.5px!important;
  font-weight:900!important;
  text-decoration:none!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}

body.jom-desktop-view > .nav .quick-settings-v24{
  background:#fff!important;
  color:#0f172a!important;
}

body.jom-desktop-view > .nav .quick-logout-btn-v24{
  background:#fee2e2!important;
  color:#7f1d1d!important;
}

/* ACCOUNT_LOGOUT_SAFE_V28 */
body > .nav .direct-account-v28{
  display:block!important;
  margin:12px 0 16px 0!important;
  padding:12px!important;
  border-radius:16px!important;
  background:rgba(255,255,255,.08)!important;
  border:1px solid rgba(255,255,255,.14)!important;
  box-sizing:border-box!important;
}

body > .nav .direct-account-user-v28{
  width:100%!important;
  min-height:40px!important;
  display:flex!important;
  align-items:center!important;
  padding:10px 12px!important;
  margin:0 0 9px 0!important;
  border-radius:12px!important;
  background:#ffffff!important;
  color:#0f172a!important;
  font-size:13px!important;
  font-weight:900!important;
  box-sizing:border-box!important;
}

body > .nav .direct-account-actions-v28{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:8px!important;
}

body > .nav .direct-settings-v28,
body > .nav .direct-logout-v28{
  min-height:40px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:999px!important;
  font-size:13px!important;
  font-weight:900!important;
  text-decoration:none!important;
  box-sizing:border-box!important;
}

body > .nav .direct-settings-v28{
  background:#ffffff!important;
  color:#0f172a!important;
}

body > .nav .direct-logout-v28{
  background:#fee2e2!important;
  color:#7f1d1d!important;
  border:1px solid #fecaca!important;
}

/* Sembunyikan block lama yang hardcoded admin */
body > .nav .quick-logout-v24,
body > .nav .sidebar-user-fixed-v4,
body > .nav .direct-account-v26{
  display:none!important;
}

@media (hover:none), (pointer:coarse), (max-width:900px){
  body > .nav .direct-account-v28{
    margin:12px 0 16px 0!important;
    padding:12px!important;
    border-radius:18px!important;
  }

  body > .nav .direct-account-user-v28{
    min-height:46px!important;
    font-size:15px!important;
    padding:12px 14px!important;
    border-radius:14px!important;
  }

  body > .nav .direct-settings-v28,
  body > .nav .direct-logout-v28{
    min-height:46px!important;
    font-size:15px!important;
  }
}

/* STANDALONE_MOBILE_MENU_V29 */
@media (hover:none), (pointer:coarse), (max-width:900px){

  body.standalone-mobile-v29{
    padding-top:74px!important;
    background:#f3f6fa!important;
    overflow-x:hidden!important;
  }

  .standalone-mobile-topbar-v29{
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:0!important;
    height:74px!important;
    z-index:7000!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    padding:12px 18px!important;
    box-sizing:border-box!important;
    background:linear-gradient(135deg,#0f172a,#174a78)!important;
    color:#fff!important;
    box-shadow:0 8px 20px rgba(15,23,42,.16)!important;
  }

  .standalone-brand-main-v29{
    font-size:21px!important;
    font-weight:950!important;
    line-height:1!important;
    letter-spacing:.8px!important;
  }

  .standalone-brand-sub-v29{
    font-size:9.5px!important;
    font-weight:800!important;
    letter-spacing:.6px!important;
    color:#dbeafe!important;
    margin-top:4px!important;
  }

  .standalone-menu-btn-v29{
    width:52px!important;
    height:48px!important;
    border-radius:16px!important;
    border:1px solid rgba(255,255,255,.18)!important;
    background:rgba(255,255,255,.12)!important;
    color:#fff!important;
    font-size:28px!important;
    font-weight:900!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
  }

  .standalone-backdrop-v29{
    display:none!important;
    position:fixed!important;
    inset:0!important;
    z-index:7100!important;
    background:rgba(15,23,42,.52)!important;
  }

  .standalone-menu-open-v29 .standalone-backdrop-v29{
    display:block!important;
  }

  .standalone-drawer-v29{
    position:fixed!important;
    top:0!important;
    left:0!important;
    bottom:0!important;
    width:92vw!important;
    max-width:370px!important;
    z-index:7200!important;
    transform:translateX(-105%)!important;
    transition:transform .22s ease!important;
    overflow-y:auto!important;
    padding:22px 16px 28px 16px!important;
    box-sizing:border-box!important;
    background:linear-gradient(180deg,#123d66,#0f2742)!important;
    color:#fff!important;
  }

  .standalone-menu-open-v29 .standalone-drawer-v29{
    transform:translateX(0)!important;
  }

  .standalone-drawer-title-v29{
    font-size:34px!important;
    line-height:.95!important;
    font-weight:950!important;
    letter-spacing:.8px!important;
  }

  .standalone-drawer-sub-v29{
    font-size:11px!important;
    font-weight:800!important;
    color:#dbeafe!important;
    margin:8px 0 18px 0!important;
  }

  .standalone-account-v29{
    margin:12px 0 16px 0!important;
    padding:12px!important;
    border-radius:18px!important;
    background:rgba(255,255,255,.08)!important;
    border:1px solid rgba(255,255,255,.14)!important;
  }

  .standalone-user-v29{
    min-height:46px!important;
    display:flex!important;
    align-items:center!important;
    padding:12px 14px!important;
    border-radius:14px!important;
    background:#fff!important;
    color:#0f172a!important;
    font-size:15px!important;
    font-weight:900!important;
    margin-bottom:10px!important;
  }

  .standalone-actions-v29{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
  }

  .standalone-actions-v29 a{
    min-height:46px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:999px!important;
    text-decoration:none!important;
    font-size:15px!important;
    font-weight:900!important;
  }

  .standalone-actions-v29 a:first-child{
    background:#fff!important;
    color:#0f172a!important;
  }

  .standalone-actions-v29 a:last-child{
    background:#fee2e2!important;
    color:#7f1d1d!important;
  }

  .standalone-nav-item-v29{
    display:flex!important;
    align-items:center!important;
    width:100%!important;
    min-height:56px!important;
    padding:14px 16px!important;
    margin:8px 0!important;
    border-radius:16px!important;
    background:rgba(255,255,255,.07)!important;
    border:1px solid rgba(255,255,255,.08)!important;
    color:#e5eef8!important;
    font-size:16px!important;
    font-weight:900!important;
    text-decoration:none!important;
    box-sizing:border-box!important;
  }
}

@media(min-width:901px){
  .standalone-mobile-topbar-v29,
  .standalone-backdrop-v29,
  .standalone-drawer-v29{
    display:none!important;
  }
}

/* STANDALONE_MENU_JS_V30 */
@media (hover:none), (pointer:coarse), (max-width:900px){

  body.standalone-mobile-v30{
    padding-top:74px!important;
    background:#f3f6fa!important;
    overflow-x:hidden!important;
  }

  .standalone-mobile-topbar-v30{
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:0!important;
    height:74px!important;
    z-index:7000!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    padding:12px 18px!important;
    box-sizing:border-box!important;
    background:linear-gradient(135deg,#0f172a,#174a78)!important;
    color:#fff!important;
    box-shadow:0 8px 20px rgba(15,23,42,.16)!important;
  }

  .standalone-brand-main-v30{
    font-size:21px!important;
    font-weight:950!important;
    line-height:1!important;
    letter-spacing:.8px!important;
  }

  .standalone-brand-sub-v30{
    font-size:9.5px!important;
    font-weight:800!important;
    letter-spacing:.6px!important;
    color:#dbeafe!important;
    margin-top:4px!important;
  }

  .standalone-menu-btn-v30{
    width:52px!important;
    height:48px!important;
    border-radius:16px!important;
    border:1px solid rgba(255,255,255,.18)!important;
    background:rgba(255,255,255,.12)!important;
    color:#fff!important;
    font-size:28px!important;
    font-weight:900!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
  }

  .standalone-backdrop-v30{
    display:none!important;
    position:fixed!important;
    inset:0!important;
    z-index:7100!important;
    background:rgba(15,23,42,.52)!important;
  }

  .standalone-menu-open-v30 .standalone-backdrop-v30{
    display:block!important;
  }

  .standalone-drawer-v30{
    position:fixed!important;
    top:0!important;
    left:0!important;
    bottom:0!important;
    width:92vw!important;
    max-width:370px!important;
    z-index:7200!important;
    transform:translateX(-105%)!important;
    transition:transform .22s ease!important;
    overflow-y:auto!important;
    padding:22px 16px 28px 16px!important;
    box-sizing:border-box!important;
    background:linear-gradient(180deg,#123d66,#0f2742)!important;
    color:#fff!important;
  }

  .standalone-menu-open-v30 .standalone-drawer-v30{
    transform:translateX(0)!important;
  }

  .standalone-drawer-title-v30{
    font-size:34px!important;
    line-height:.95!important;
    font-weight:950!important;
    letter-spacing:.8px!important;
  }

  .standalone-drawer-sub-v30{
    font-size:11px!important;
    font-weight:800!important;
    color:#dbeafe!important;
    margin:8px 0 18px 0!important;
  }

  .standalone-account-v30{
    margin:12px 0 16px 0!important;
    padding:12px!important;
    border-radius:18px!important;
    background:rgba(255,255,255,.08)!important;
    border:1px solid rgba(255,255,255,.14)!important;
  }

  .standalone-user-v30{
    min-height:46px!important;
    display:flex!important;
    align-items:center!important;
    padding:12px 14px!important;
    border-radius:14px!important;
    background:#fff!important;
    color:#0f172a!important;
    font-size:15px!important;
    font-weight:900!important;
    margin-bottom:10px!important;
  }

  .standalone-actions-v30{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
  }

  .standalone-actions-v30 a{
    min-height:46px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:999px!important;
    text-decoration:none!important;
    font-size:15px!important;
    font-weight:900!important;
  }

  .standalone-actions-v30 a:first-child{
    background:#fff!important;
    color:#0f172a!important;
  }

  .standalone-actions-v30 a:last-child{
    background:#fee2e2!important;
    color:#7f1d1d!important;
  }

  .standalone-nav-item-v30{
    display:flex!important;
    align-items:center!important;
    width:100%!important;
    min-height:56px!important;
    padding:14px 16px!important;
    margin:8px 0!important;
    border-radius:16px!important;
    background:rgba(255,255,255,.07)!important;
    border:1px solid rgba(255,255,255,.08)!important;
    color:#e5eef8!important;
    font-size:16px!important;
    font-weight:900!important;
    text-decoration:none!important;
    box-sizing:border-box!important;
  }
}

@media(min-width:901px){
  .standalone-mobile-topbar-v30,
  .standalone-backdrop-v30,
  .standalone-drawer-v30{
    display:none!important;
  }
}

/* STANDALONE_MENU_JS_V30_SAFE */
@media (hover:none), (pointer:coarse), (max-width:900px){
  body.standalone-mobile-v30{
    padding-top:74px!important;
    background:#f3f6fa!important;
    overflow-x:hidden!important;
  }

  .standalone-mobile-topbar-v30{
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:0!important;
    height:74px!important;
    z-index:7000!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    padding:12px 18px!important;
    box-sizing:border-box!important;
    background:linear-gradient(135deg,#0f172a,#174a78)!important;
    color:#fff!important;
    box-shadow:0 8px 20px rgba(15,23,42,.16)!important;
  }

  .standalone-brand-main-v30{
    font-size:21px!important;
    font-weight:950!important;
    line-height:1!important;
  }

  .standalone-brand-sub-v30{
    font-size:9.5px!important;
    font-weight:800!important;
    color:#dbeafe!important;
    margin-top:4px!important;
  }

  .standalone-menu-btn-v30{
    width:52px!important;
    height:48px!important;
    border-radius:16px!important;
    border:1px solid rgba(255,255,255,.18)!important;
    background:rgba(255,255,255,.12)!important;
    color:#fff!important;
    font-size:28px!important;
    font-weight:900!important;
  }

  .standalone-backdrop-v30{
    display:none!important;
    position:fixed!important;
    inset:0!important;
    z-index:7100!important;
    background:rgba(15,23,42,.52)!important;
  }

  .standalone-menu-open-v30 .standalone-backdrop-v30{
    display:block!important;
  }

  .standalone-drawer-v30{
    position:fixed!important;
    top:0!important;
    left:0!important;
    bottom:0!important;
    width:92vw!important;
    max-width:370px!important;
    z-index:7200!important;
    transform:translateX(-105%)!important;
    transition:transform .22s ease!important;
    overflow-y:auto!important;
    padding:22px 16px 28px 16px!important;
    box-sizing:border-box!important;
    background:linear-gradient(180deg,#123d66,#0f2742)!important;
    color:#fff!important;
  }

  .standalone-menu-open-v30 .standalone-drawer-v30{
    transform:translateX(0)!important;
  }

  .standalone-drawer-title-v30{
    font-size:34px!important;
    font-weight:950!important;
  }

  .standalone-drawer-sub-v30{
    font-size:11px!important;
    font-weight:800!important;
    color:#dbeafe!important;
    margin:8px 0 18px 0!important;
  }

  .standalone-account-v30{
    margin:12px 0 16px 0!important;
    padding:12px!important;
    border-radius:18px!important;
    background:rgba(255,255,255,.08)!important;
    border:1px solid rgba(255,255,255,.14)!important;
  }

  .standalone-user-v30{
    min-height:46px!important;
    display:flex!important;
    align-items:center!important;
    padding:12px 14px!important;
    border-radius:14px!important;
    background:#fff!important;
    color:#0f172a!important;
    font-size:15px!important;
    font-weight:900!important;
    margin-bottom:10px!important;
  }

  .standalone-actions-v30{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
  }

  .standalone-actions-v30 a{
    min-height:46px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:999px!important;
    text-decoration:none!important;
    font-size:15px!important;
    font-weight:900!important;
  }

  .standalone-actions-v30 a:first-child{
    background:#fff!important;
    color:#0f172a!important;
  }

  .standalone-actions-v30 a:last-child{
    background:#fee2e2!important;
    color:#7f1d1d!important;
  }

  .standalone-nav-item-v30{
    display:flex!important;
    align-items:center!important;
    width:100%!important;
    min-height:56px!important;
    padding:14px 16px!important;
    margin:8px 0!important;
    border-radius:16px!important;
    background:rgba(255,255,255,.07)!important;
    color:#e5eef8!important;
    font-size:16px!important;
    font-weight:900!important;
    text-decoration:none!important;
    box-sizing:border-box!important;
  }
}

@media(min-width:901px){
  .standalone-mobile-topbar-v30,
  .standalone-backdrop-v30,
  .standalone-drawer-v30{
    display:none!important;
  }
}

/* UI_FIX_CONSOLIDATED_V31 */
body > .nav .route-active-v31,
body > .nav a.route-active-v31,
body > .nav button.route-active-v31,
body > .nav summary.route-active-v31,
.standalone-drawer-v31 .route-active-v31{
  background:#2f6df6!important;
  color:#ffffff!important;
  box-shadow:0 10px 22px rgba(47,109,246,.25)!important;
}

@media (hover:none), (pointer:coarse), (max-width:900px){
  body.standalone-mobile-v31{
    padding-top:74px!important;
    background:#f3f6fa!important;
    overflow-x:hidden!important;
  }

  .standalone-mobile-topbar-v31{
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:0!important;
    height:74px!important;
    z-index:7000!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    padding:12px 18px!important;
    box-sizing:border-box!important;
    background:linear-gradient(135deg,#0f172a,#174a78)!important;
    color:#fff!important;
    box-shadow:0 8px 20px rgba(15,23,42,.16)!important;
  }

  .standalone-brand-main-v31{
    font-size:21px!important;
    font-weight:950!important;
    line-height:1!important;
  }

  .standalone-brand-sub-v31{
    font-size:9.5px!important;
    font-weight:800!important;
    color:#dbeafe!important;
    margin-top:4px!important;
  }

  .standalone-menu-btn-v31{
    width:52px!important;
    height:48px!important;
    border-radius:16px!important;
    border:1px solid rgba(255,255,255,.18)!important;
    background:rgba(255,255,255,.12)!important;
    color:#fff!important;
    font-size:28px!important;
    font-weight:900!important;
  }

  .standalone-backdrop-v31{
    display:none!important;
    position:fixed!important;
    inset:0!important;
    z-index:7100!important;
    background:rgba(15,23,42,.52)!important;
  }

  .standalone-menu-open-v31 .standalone-backdrop-v31{
    display:block!important;
  }

  .standalone-drawer-v31{
    position:fixed!important;
    top:0!important;
    left:0!important;
    bottom:0!important;
    width:92vw!important;
    max-width:370px!important;
    z-index:7200!important;
    transform:translateX(-105%)!important;
    transition:transform .22s ease!important;
    overflow-y:auto!important;
    padding:22px 16px 28px 16px!important;
    box-sizing:border-box!important;
    background:linear-gradient(180deg,#123d66,#0f2742)!important;
    color:#fff!important;
  }

  .standalone-menu-open-v31 .standalone-drawer-v31{
    transform:translateX(0)!important;
  }

  .standalone-drawer-title-v31{
    font-size:34px!important;
    font-weight:950!important;
  }

  .standalone-drawer-sub-v31{
    font-size:11px!important;
    font-weight:800!important;
    color:#dbeafe!important;
    margin:8px 0 18px 0!important;
  }

  .standalone-account-v31{
    margin:12px 0 16px 0!important;
    padding:12px!important;
    border-radius:18px!important;
    background:rgba(255,255,255,.08)!important;
    border:1px solid rgba(255,255,255,.14)!important;
  }

  .standalone-user-v31{
    min-height:46px!important;
    display:flex!important;
    align-items:center!important;
    padding:12px 14px!important;
    border-radius:14px!important;
    background:#fff!important;
    color:#0f172a!important;
    font-size:15px!important;
    font-weight:900!important;
    margin-bottom:10px!important;
  }

  .standalone-actions-v31{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
  }

  .standalone-actions-v31 a{
    min-height:46px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:999px!important;
    text-decoration:none!important;
    font-size:15px!important;
    font-weight:900!important;
  }

  .standalone-actions-v31 a:first-child{
    background:#fff!important;
    color:#0f172a!important;
  }

  .standalone-actions-v31 a:last-child{
    background:#fee2e2!important;
    color:#7f1d1d!important;
  }

  .standalone-nav-item-v31{
    display:flex!important;
    align-items:center!important;
    width:100%!important;
    min-height:56px!important;
    padding:14px 16px!important;
    margin:8px 0!important;
    border-radius:16px!important;
    background:rgba(255,255,255,.07)!important;
    color:#e5eef8!important;
    font-size:16px!important;
    font-weight:900!important;
    text-decoration:none!important;
    box-sizing:border-box!important;
  }
}

@media(min-width:901px){
  .standalone-mobile-topbar-v31,
  .standalone-backdrop-v31,
  .standalone-drawer-v31{
    display:none!important;
  }
}

/* UI_CLEANUP_V32 */

/* Paksa sembunyi block lama / duplicate */
body > .nav .quick-logout-v24,
body > .nav .sidebar-user-fixed-v4,
body > .nav .direct-account-v26{
  display:none!important;
  visibility:hidden!important;
  height:0!important;
  min-height:0!important;
  overflow:hidden!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
}

/* Betulkan highlight menu: hanya item sebenar */
body > .nav .route-active-v31:not(.route-active-v32){
  background:rgba(255,255,255,.07)!important;
  color:#e5eef8!important;
  box-shadow:none!important;
}

body > .nav a.route-active-v32,
.standalone-drawer-v32 a.route-active-v32{
  background:#2f6df6!important;
  color:#ffffff!important;
  box-shadow:0 10px 22px rgba(47,109,246,.25)!important;
}

@media (hover:none), (pointer:coarse), (max-width:900px){
  body.standalone-mobile-v32{
    padding-top:74px!important;
    background:#f3f6fa!important;
    overflow-x:hidden!important;
  }

  .standalone-mobile-topbar-v32{
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:0!important;
    height:74px!important;
    z-index:7000!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    padding:12px 18px!important;
    box-sizing:border-box!important;
    background:linear-gradient(135deg,#0f172a,#174a78)!important;
    color:#fff!important;
    box-shadow:0 8px 20px rgba(15,23,42,.16)!important;
  }

  .standalone-brand-main-v32{
    font-size:21px!important;
    font-weight:950!important;
    line-height:1!important;
  }

  .standalone-brand-sub-v32{
    font-size:9.5px!important;
    font-weight:800!important;
    color:#dbeafe!important;
    margin-top:4px!important;
  }

  .standalone-menu-btn-v32{
    width:52px!important;
    height:48px!important;
    border-radius:16px!important;
    border:1px solid rgba(255,255,255,.18)!important;
    background:rgba(255,255,255,.12)!important;
    color:#fff!important;
    font-size:28px!important;
    font-weight:900!important;
  }

  .standalone-backdrop-v32{
    display:none!important;
    position:fixed!important;
    inset:0!important;
    z-index:7100!important;
    background:rgba(15,23,42,.52)!important;
  }

  .standalone-menu-open-v32 .standalone-backdrop-v32{
    display:block!important;
  }

  .standalone-drawer-v32{
    position:fixed!important;
    top:0!important;
    left:0!important;
    bottom:0!important;
    width:92vw!important;
    max-width:370px!important;
    z-index:7200!important;
    transform:translateX(-105%)!important;
    transition:transform .22s ease!important;
    overflow-y:auto!important;
    padding:22px 16px 28px 16px!important;
    box-sizing:border-box!important;
    background:linear-gradient(180deg,#123d66,#0f2742)!important;
    color:#fff!important;
  }

  .standalone-menu-open-v32 .standalone-drawer-v32{
    transform:translateX(0)!important;
  }

  .standalone-drawer-title-v32{
    font-size:34px!important;
    font-weight:950!important;
  }

  .standalone-drawer-sub-v32{
    font-size:11px!important;
    font-weight:800!important;
    color:#dbeafe!important;
    margin:8px 0 18px 0!important;
  }

  .standalone-account-v32{
    margin:12px 0 16px 0!important;
    padding:12px!important;
    border-radius:18px!important;
    background:rgba(255,255,255,.08)!important;
    border:1px solid rgba(255,255,255,.14)!important;
  }

  .standalone-user-v32{
    min-height:46px!important;
    display:flex!important;
    align-items:center!important;
    padding:12px 14px!important;
    border-radius:14px!important;
    background:#fff!important;
    color:#0f172a!important;
    font-size:15px!important;
    font-weight:900!important;
    margin-bottom:10px!important;
  }

  .standalone-actions-v32{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
  }

  .standalone-actions-v32 a{
    min-height:46px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:999px!important;
    text-decoration:none!important;
    font-size:15px!important;
    font-weight:900!important;
  }

  .standalone-actions-v32 a:first-child{
    background:#fff!important;
    color:#0f172a!important;
  }

  .standalone-actions-v32 a:last-child{
    background:#fee2e2!important;
    color:#7f1d1d!important;
  }

  .standalone-nav-item-v32{
    display:flex!important;
    align-items:center!important;
    width:100%!important;
    min-height:56px!important;
    padding:14px 16px!important;
    margin:8px 0!important;
    border-radius:16px!important;
    background:rgba(255,255,255,.07)!important;
    color:#e5eef8!important;
    font-size:16px!important;
    font-weight:900!important;
    text-decoration:none!important;
    box-sizing:border-box!important;
  }
}

@media(min-width:901px){
  .standalone-mobile-topbar-v32,
  .standalone-backdrop-v32,
  .standalone-drawer-v32{
    display:none!important;
  }
}

/* AUTO_DEVICE_MODE_V33 */

/* ===== Desktop / PC / Tablet besar / Phone Desktop Site ON ===== */
html.jom-auto-desktop-v33,
body.jom-auto-desktop-v33{
  min-width:1180px!important;
  overflow-x:auto!important;
  background:#f4f7fb!important;
}

body.jom-auto-desktop-v33 .mobile-topbar,
body.jom-auto-desktop-v33 .mobile-drawer-backdrop,
body.jom-auto-desktop-v33 .standalone-mobile-topbar-v31,
body.jom-auto-desktop-v33 .standalone-mobile-topbar-v32,
body.jom-auto-desktop-v33 .standalone-backdrop-v31,
body.jom-auto-desktop-v33 .standalone-backdrop-v32,
body.jom-auto-desktop-v33 .standalone-drawer-v31,
body.jom-auto-desktop-v33 .standalone-drawer-v32{
  display:none!important;
}

body.jom-auto-desktop-v33 > .nav{
  display:block!important;
  visibility:visible!important;
  transform:none!important;
  position:fixed!important;
  top:0!important;
  left:0!important;
  bottom:0!important;
  width:260px!important;
  max-width:260px!important;
  min-width:260px!important;
  height:100vh!important;
  z-index:1000!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding:24px 16px!important;
  box-sizing:border-box!important;
}

body.jom-auto-desktop-v33 .page-shell,
body.jom-auto-desktop-v33 .content,
body.jom-auto-desktop-v33 .main-content,
body.jom-auto-desktop-v33 main{
  margin-left:260px!important;
  width:calc(100vw - 260px)!important;
  max-width:none!important;
  min-width:900px!important;
  padding:24px 28px!important;
  box-sizing:border-box!important;
}

body.jom-auto-desktop-v33 .container,
body.jom-auto-desktop-v33 .container-fluid{
  max-width:none!important;
  width:100%!important;
  box-sizing:border-box!important;
}

body.jom-auto-desktop-v33 .box,
body.jom-auto-desktop-v33 .card,
body.jom-auto-desktop-v33 .panel,
body.jom-auto-desktop-v33 section{
  max-width:100%!important;
  box-sizing:border-box!important;
}

/* Desktop account block clean */
body.jom-auto-desktop-v33 > .nav .direct-account-v28{
  display:block!important;
  margin:12px 0 18px 0!important;
}

body.jom-auto-desktop-v33 > .nav .quick-logout-v24,
body.jom-auto-desktop-v33 > .nav .sidebar-user-fixed-v4,
body.jom-auto-desktop-v33 > .nav .direct-account-v26{
  display:none!important;
  visibility:hidden!important;
  height:0!important;
  overflow:hidden!important;
  margin:0!important;
  padding:0!important;
}

/* ===== Mobile normal ===== */
html.jom-auto-mobile-v33,
body.jom-auto-mobile-v33{
  min-width:0!important;
  width:100%!important;
  max-width:100%!important;
  overflow-x:hidden!important;
}

body.jom-auto-mobile-v33 .page-shell,
body.jom-auto-mobile-v33 .content,
body.jom-auto-mobile-v33 .main-content,
body.jom-auto-mobile-v33 main{
  margin-left:0!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
}

/* Prevent PC desktop CSS from leaking into phone mobile mode */
body.jom-auto-mobile-v33 > .nav{
  max-width:92vw!important;
}

/* DESKTOP_OFFSET_FIX_V35 */
/* Fix tulisan/content terlindung di belakang sidebar untuk PC/Web mode */
@media (min-width:901px){

  body,
  html{
    overflow-x:auto!important;
    background:#f4f7fb!important;
  }

  body > .nav{
    position:fixed!important;
    top:0!important;
    left:0!important;
    bottom:0!important;
    width:260px!important;
    min-width:260px!important;
    max-width:260px!important;
    height:100vh!important;
    z-index:1000!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    box-sizing:border-box!important;
  }

  body > .nav + *,
  body .page-shell,
  body .content,
  body .main-content,
  body main,
  body .dashboard,
  body .container,
  body .container-fluid{
    margin-left:260px!important;
    width:calc(100vw - 260px)!important;
    max-width:none!important;
    min-width:900px!important;
    box-sizing:border-box!important;
  }

  body .page-shell,
  body .content,
  body .main-content,
  body main,
  body .dashboard{
    padding-left:32px!important;
    padding-right:32px!important;
  }

  body .box,
  body .card,
  body .panel,
  body .section-card,
  body section,
  body .dashboard-card,
  body .stat-card,
  body .summary-card{
    max-width:100%!important;
    box-sizing:border-box!important;
  }

  body h1,
  body h2,
  body h3,
  body .page-title,
  body .section-title{
    overflow:visible!important;
    white-space:normal!important;
  }

  body table{
    max-width:100%!important;
  }

  body .table-wrap,
  body .table-responsive{
    max-width:100%!important;
    overflow-x:auto!important;
  }
}

/* Extra force kalau auto desktop class aktif */
body.jom-auto-desktop-v33 > .nav{
  width:260px!important;
  min-width:260px!important;
  max-width:260px!important;
}

body.jom-auto-desktop-v33 .page-shell,
body.jom-auto-desktop-v33 .content,
body.jom-auto-desktop-v33 .main-content,
body.jom-auto-desktop-v33 main,
body.jom-auto-desktop-v33 .dashboard,
body.jom-auto-desktop-v33 .container,
body.jom-auto-desktop-v33 .container-fluid{
  margin-left:260px!important;
  width:calc(100vw - 260px)!important;
  min-width:900px!important;
  padding-left:32px!important;
  padding-right:32px!important;
  box-sizing:border-box!important;
}

/* Jangan kacau mobile */
@media (max-width:900px), (hover:none), (pointer:coarse){
  body.jom-auto-mobile-v33 .page-shell,
  body.jom-auto-mobile-v33 .content,
  body.jom-auto-mobile-v33 .main-content,
  body.jom-auto-mobile-v33 main,
  body.jom-auto-mobile-v33 .dashboard,
  body.jom-auto-mobile-v33 .container,
  body.jom-auto-mobile-v33 .container-fluid{
    margin-left:0!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    padding-left:14px!important;
    padding-right:14px!important;
  }
}

/* DESKTOP_HARD_OFFSET_V38 */
/* Final force: elak content PC terlindung di belakang sidebar */
@media (min-width:901px){

  :root{
    --jom-sidebar-w-v38: 280px;
    --jom-content-gap-v38: 26px;
  }

  body.jom-auto-desktop-v33,
  body.jom-desktop-view,
  body{
    background:#f4f7fb!important;
    overflow-x:auto!important;
  }

  body.jom-auto-desktop-v33 > .nav,
  body.jom-desktop-view > .nav,
  body > .nav{
    position:fixed!important;
    top:0!important;
    left:0!important;
    bottom:0!important;
    width:var(--jom-sidebar-w-v38)!important;
    min-width:var(--jom-sidebar-w-v38)!important;
    max-width:var(--jom-sidebar-w-v38)!important;
    height:100vh!important;
    z-index:5000!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    box-sizing:border-box!important;
  }

  /* Paksa semua direct content selepas nav keluar daripada kawasan sidebar */
  body.jom-auto-desktop-v33 > *:not(.nav):not(script):not(style):not(link):not(meta):not(title),
  body.jom-desktop-view > *:not(.nav):not(script):not(style):not(link):not(meta):not(title),
  body > *:not(.nav):not(script):not(style):not(link):not(meta):not(title){
    margin-left:calc(var(--jom-sidebar-w-v38) + var(--jom-content-gap-v38))!important;
    width:calc(100vw - var(--jom-sidebar-w-v38) - var(--jom-content-gap-v38))!important;
    max-width:none!important;
    min-width:860px!important;
    box-sizing:border-box!important;
  }

  /* Kalau wrapper bukan direct child, tetap paksa */
  body.jom-auto-desktop-v33 .page-shell,
  body.jom-auto-desktop-v33 .content,
  body.jom-auto-desktop-v33 .main-content,
  body.jom-auto-desktop-v33 main,
  body.jom-auto-desktop-v33 .dashboard,
  body.jom-auto-desktop-v33 .container,
  body.jom-auto-desktop-v33 .container-fluid,
  body.jom-desktop-view .page-shell,
  body.jom-desktop-view .content,
  body.jom-desktop-view .main-content,
  body.jom-desktop-view main,
  body.jom-desktop-view .dashboard,
  body.jom-desktop-view .container,
  body.jom-desktop-view .container-fluid{
    margin-left:calc(var(--jom-sidebar-w-v38) + var(--jom-content-gap-v38))!important;
    width:calc(100vw - var(--jom-sidebar-w-v38) - var(--jom-content-gap-v38))!important;
    max-width:none!important;
    min-width:860px!important;
    padding-left:24px!important;
    padding-right:28px!important;
    box-sizing:border-box!important;
  }

  body.jom-auto-desktop-v33 .box,
  body.jom-auto-desktop-v33 .card,
  body.jom-auto-desktop-v33 .panel,
  body.jom-auto-desktop-v33 section,
  body.jom-desktop-view .box,
  body.jom-desktop-view .card,
  body.jom-desktop-view .panel,
  body.jom-desktop-view section{
    max-width:100%!important;
    box-sizing:border-box!important;
  }

  body.jom-auto-desktop-v33 h1,
  body.jom-auto-desktop-v33 h2,
  body.jom-auto-desktop-v33 h3,
  body.jom-desktop-view h1,
  body.jom-desktop-view h2,
  body.jom-desktop-view h3{
    white-space:normal!important;
    overflow:visible!important;
  }
}

/* Mobile override: jangan kacau telefon */
@media (max-width:900px), (hover:none), (pointer:coarse){
  body.jom-auto-mobile-v33 > *:not(.nav):not(script):not(style):not(link):not(meta):not(title),
  body.jom-mobile-view > *:not(.nav):not(script):not(style):not(link):not(meta):not(title){
    margin-left:0!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }

  body.jom-auto-mobile-v33 .page-shell,
  body.jom-auto-mobile-v33 .content,
  body.jom-auto-mobile-v33 .main-content,
  body.jom-auto-mobile-v33 main,
  body.jom-mobile-view .page-shell,
  body.jom-mobile-view .content,
  body.jom-mobile-view .main-content,
  body.jom-mobile-view main{
    margin-left:0!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
}

/* DESKTOP_HARD_OFFSET_V38 */
/* Final force: elak content PC terlindung di belakang sidebar */
@media (min-width:901px){

  :root{
    --jom-sidebar-w-v38: 280px;
    --jom-content-gap-v38: 26px;
  }

  body.jom-auto-desktop-v33,
  body.jom-desktop-view,
  body{
    background:#f4f7fb!important;
    overflow-x:auto!important;
  }

  body.jom-auto-desktop-v33 > .nav,
  body.jom-desktop-view > .nav,
  body > .nav{
    position:fixed!important;
    top:0!important;
    left:0!important;
    bottom:0!important;
    width:var(--jom-sidebar-w-v38)!important;
    min-width:var(--jom-sidebar-w-v38)!important;
    max-width:var(--jom-sidebar-w-v38)!important;
    height:100vh!important;
    z-index:5000!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    box-sizing:border-box!important;
  }

  /* Paksa semua direct content selepas nav keluar daripada kawasan sidebar */
  body.jom-auto-desktop-v33 > *:not(.nav):not(script):not(style):not(link):not(meta):not(title),
  body.jom-desktop-view > *:not(.nav):not(script):not(style):not(link):not(meta):not(title),
  body > *:not(.nav):not(script):not(style):not(link):not(meta):not(title){
    margin-left:calc(var(--jom-sidebar-w-v38) + var(--jom-content-gap-v38))!important;
    width:calc(100vw - var(--jom-sidebar-w-v38) - var(--jom-content-gap-v38))!important;
    max-width:none!important;
    min-width:860px!important;
    box-sizing:border-box!important;
  }

  /* Kalau wrapper bukan direct child, tetap paksa */
  body.jom-auto-desktop-v33 .page-shell,
  body.jom-auto-desktop-v33 .content,
  body.jom-auto-desktop-v33 .main-content,
  body.jom-auto-desktop-v33 main,
  body.jom-auto-desktop-v33 .dashboard,
  body.jom-auto-desktop-v33 .container,
  body.jom-auto-desktop-v33 .container-fluid,
  body.jom-desktop-view .page-shell,
  body.jom-desktop-view .content,
  body.jom-desktop-view .main-content,
  body.jom-desktop-view main,
  body.jom-desktop-view .dashboard,
  body.jom-desktop-view .container,
  body.jom-desktop-view .container-fluid{
    margin-left:calc(var(--jom-sidebar-w-v38) + var(--jom-content-gap-v38))!important;
    width:calc(100vw - var(--jom-sidebar-w-v38) - var(--jom-content-gap-v38))!important;
    max-width:none!important;
    min-width:860px!important;
    padding-left:24px!important;
    padding-right:28px!important;
    box-sizing:border-box!important;
  }

  body.jom-auto-desktop-v33 .box,
  body.jom-auto-desktop-v33 .card,
  body.jom-auto-desktop-v33 .panel,
  body.jom-auto-desktop-v33 section,
  body.jom-desktop-view .box,
  body.jom-desktop-view .card,
  body.jom-desktop-view .panel,
  body.jom-desktop-view section{
    max-width:100%!important;
    box-sizing:border-box!important;
  }

  body.jom-auto-desktop-v33 h1,
  body.jom-auto-desktop-v33 h2,
  body.jom-auto-desktop-v33 h3,
  body.jom-desktop-view h1,
  body.jom-desktop-view h2,
  body.jom-desktop-view h3{
    white-space:normal!important;
    overflow:visible!important;
  }
}

/* Mobile override: jangan kacau telefon */
@media (max-width:900px), (hover:none), (pointer:coarse){
  body.jom-auto-mobile-v33 > *:not(.nav):not(script):not(style):not(link):not(meta):not(title),
  body.jom-mobile-view > *:not(.nav):not(script):not(style):not(link):not(meta):not(title){
    margin-left:0!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }

  body.jom-auto-mobile-v33 .page-shell,
  body.jom-auto-mobile-v33 .content,
  body.jom-auto-mobile-v33 .main-content,
  body.jom-auto-mobile-v33 main,
  body.jom-mobile-view .page-shell,
  body.jom-mobile-view .content,
  body.jom-mobile-view .main-content,
  body.jom-mobile-view main{
    margin-left:0!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
}

/* STANDALONE_DESKTOP_FIX_V39 */
/* Fix page yang tiada sidebar/menu seperti Print Borang Ahli Baru */

@media (min-width:901px){

  /* Kalau page TIADA nav/sidebar, jangan paksa content offset 280px */
  body:not(:has(> .nav)) > *:not(script):not(style):not(link):not(meta):not(title),
  body.standalone-mobile-v32 > *:not(.standalone-mobile-topbar-v32):not(.standalone-backdrop-v32):not(.standalone-drawer-v32):not(script):not(style):not(link):not(meta):not(title){
    margin-left:0!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }

  /* Page standalone desktop dapat topbar */
  body.standalone-mobile-v32{
    padding-top:78px!important;
    background:#f4f7fb!important;
    overflow-x:auto!important;
  }

  body.standalone-mobile-v32 .standalone-mobile-topbar-v32{
    display:flex!important;
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:0!important;
    height:78px!important;
    z-index:7000!important;
    align-items:center!important;
    justify-content:space-between!important;
    padding:14px 26px!important;
    box-sizing:border-box!important;
    background:linear-gradient(135deg,#0f172a,#174a78)!important;
    color:#fff!important;
    box-shadow:0 8px 20px rgba(15,23,42,.16)!important;
  }

  body.standalone-mobile-v32 .standalone-brand-main-v32{
    font-size:25px!important;
    font-weight:950!important;
    line-height:1!important;
    letter-spacing:.8px!important;
  }

  body.standalone-mobile-v32 .standalone-brand-sub-v32{
    font-size:11px!important;
    font-weight:800!important;
    color:#dbeafe!important;
    margin-top:5px!important;
  }

  body.standalone-mobile-v32 .standalone-menu-btn-v32{
    display:flex!important;
    width:56px!important;
    height:50px!important;
    border-radius:16px!important;
    border:1px solid rgba(255,255,255,.18)!important;
    background:rgba(255,255,255,.12)!important;
    color:#fff!important;
    font-size:28px!important;
    font-weight:900!important;
    align-items:center!important;
    justify-content:center!important;
    cursor:pointer!important;
  }

  body.standalone-mobile-v32 .standalone-backdrop-v32{
    display:none!important;
    position:fixed!important;
    inset:0!important;
    z-index:7100!important;
    background:rgba(15,23,42,.45)!important;
  }

  body.standalone-mobile-v32.standalone-menu-open-v32 .standalone-backdrop-v32{
    display:block!important;
  }

  body.standalone-mobile-v32 .standalone-drawer-v32{
    display:block!important;
    position:fixed!important;
    top:0!important;
    left:0!important;
    bottom:0!important;
    width:330px!important;
    max-width:330px!important;
    z-index:7200!important;
    transform:translateX(-105%)!important;
    transition:transform .22s ease!important;
    overflow-y:auto!important;
    padding:22px 16px 28px 16px!important;
    box-sizing:border-box!important;
    background:linear-gradient(180deg,#123d66,#0f2742)!important;
    color:#fff!important;
  }

  body.standalone-mobile-v32.standalone-menu-open-v32 .standalone-drawer-v32{
    transform:translateX(0)!important;
  }

  body.standalone-mobile-v32 .standalone-nav-item-v32{
    display:flex!important;
    align-items:center!important;
    width:100%!important;
    min-height:50px!important;
    padding:13px 15px!important;
    margin:8px 0!important;
    border-radius:14px!important;
    background:rgba(255,255,255,.07)!important;
    color:#e5eef8!important;
    font-size:15px!important;
    font-weight:900!important;
    text-decoration:none!important;
    box-sizing:border-box!important;
  }

  body.standalone-mobile-v32 .standalone-account-v32{
    margin:12px 0 16px 0!important;
    padding:12px!important;
    border-radius:18px!important;
    background:rgba(255,255,255,.08)!important;
    border:1px solid rgba(255,255,255,.14)!important;
  }

  body.standalone-mobile-v32 .standalone-actions-v32{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
  }

  body.standalone-mobile-v32 .standalone-actions-v32 a{
    min-height:42px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:999px!important;
    text-decoration:none!important;
    font-size:14px!important;
    font-weight:900!important;
  }

  body.standalone-mobile-v32 .standalone-actions-v32 a:first-child{
    background:#fff!important;
    color:#0f172a!important;
  }

  body.standalone-mobile-v32 .standalone-actions-v32 a:last-child{
    background:#fee2e2!important;
    color:#7f1d1d!important;
  }

  /* Content standalone lebih kemas di desktop */
  body.standalone-mobile-v32 .box,
  body.standalone-mobile-v32 .card,
  body.standalone-mobile-v32 .panel,
  body.standalone-mobile-v32 section,
  body.standalone-mobile-v32 form{
    max-width:1120px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    box-sizing:border-box!important;
  }
}

/* Jangan kacau mobile */
@media (max-width:900px), (hover:none), (pointer:coarse){
  body.standalone-mobile-v32{
    padding-top:74px!important;
  }
}

/* STANDALONE_OVERRIDE_V40 */
/* Betulkan page standalone yang ditolak oleh desktop hard offset V38/V39 */

@media (min-width:901px){

  /* Page standalone tidak perlu sidebar kiri */
  body.standalone-mobile-v32 > .nav,
  body.standalone-mobile-v31 > .nav,
  body.standalone-mobile-v30 > .nav{
    display:none!important;
    visibility:hidden!important;
    width:0!important;
    min-width:0!important;
    max-width:0!important;
    overflow:hidden!important;
  }

  /* Topbar standalone mesti penuh, bukan mula selepas sidebar */
  body.standalone-mobile-v32 > .standalone-mobile-topbar-v32,
  body.standalone-mobile-v31 > .standalone-mobile-topbar-v31,
  body.standalone-mobile-v30 > .standalone-mobile-topbar-v30{
    margin-left:0!important;
    left:0!important;
    right:0!important;
    top:0!important;
    width:100vw!important;
    max-width:100vw!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }

  /* Backdrop dan drawer jangan ikut offset desktop */
  body.standalone-mobile-v32 > .standalone-backdrop-v32,
  body.standalone-mobile-v31 > .standalone-backdrop-v31,
  body.standalone-mobile-v30 > .standalone-backdrop-v30,
  body.standalone-mobile-v32 > .standalone-drawer-v32,
  body.standalone-mobile-v31 > .standalone-drawer-v31,
  body.standalone-mobile-v30 > .standalone-drawer-v30{
    margin-left:0!important;
    width:auto!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }

  /* Content standalone kembali normal dan center */
  body.standalone-mobile-v32 > *:not(.nav):not(.standalone-mobile-topbar-v32):not(.standalone-backdrop-v32):not(.standalone-drawer-v32):not(script):not(style):not(link):not(meta):not(title),
  body.standalone-mobile-v31 > *:not(.nav):not(.standalone-mobile-topbar-v31):not(.standalone-backdrop-v31):not(.standalone-drawer-v31):not(script):not(style):not(link):not(meta):not(title),
  body.standalone-mobile-v30 > *:not(.nav):not(.standalone-mobile-topbar-v30):not(.standalone-backdrop-v30):not(.standalone-drawer-v30):not(script):not(style):not(link):not(meta):not(title){
    margin-left:auto!important;
    margin-right:auto!important;
    width:calc(100vw - 48px)!important;
    max-width:1120px!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }

  body.standalone-mobile-v32 .box,
  body.standalone-mobile-v32 .card,
  body.standalone-mobile-v32 .panel,
  body.standalone-mobile-v32 section,
  body.standalone-mobile-v32 form{
    margin-left:auto!important;
    margin-right:auto!important;
    max-width:1120px!important;
    width:100%!important;
    box-sizing:border-box!important;
  }

  body.standalone-mobile-v32 h1,
  body.standalone-mobile-v32 h2,
  body.standalone-mobile-v32 h3{
    white-space:normal!important;
    overflow:visible!important;
  }
}

/* Mobile kekal normal */
@media (max-width:900px), (hover:none), (pointer:coarse){
  body.standalone-mobile-v32 > *:not(.standalone-mobile-topbar-v32):not(.standalone-backdrop-v32):not(.standalone-drawer-v32):not(script):not(style):not(link):not(meta):not(title){
    margin-left:0!important;
    margin-right:0!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
}

/* STANDALONE_FORCE_CLEAN_V41 */
/* Rule lebih tegas untuk page standalone seperti Print Borang Ahli Baru */

@media (min-width:901px){

  /* Bila page ada standalone topbar, semua sidebar kiri lama disembunyikan */
  body:has(.standalone-mobile-topbar-v32) > nav,
  body:has(.standalone-mobile-topbar-v32) > aside,
  body:has(.standalone-mobile-topbar-v32) > .nav,
  body:has(.standalone-mobile-topbar-v32) > .sidebar,
  body:has(.standalone-mobile-topbar-v32) .sidebar:not(.standalone-drawer-v32),
  body:has(.standalone-mobile-topbar-v32) .side-nav,
  body:has(.standalone-mobile-topbar-v32) .main-sidebar{
    display:none!important;
    visibility:hidden!important;
    width:0!important;
    min-width:0!important;
    max-width:0!important;
    height:0!important;
    overflow:hidden!important;
    opacity:0!important;
    pointer-events:none!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
  }

  /* Topbar standalone mesti penuh dari kiri */
  body:has(.standalone-mobile-topbar-v32) .standalone-mobile-topbar-v32{
    display:flex!important;
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:0!important;
    width:100vw!important;
    max-width:100vw!important;
    min-width:0!important;
    height:78px!important;
    margin-left:0!important;
    margin-right:0!important;
    z-index:9000!important;
    box-sizing:border-box!important;
  }

  /* Drawer/backdrop jangan kena offset desktop */
  body:has(.standalone-mobile-topbar-v32) .standalone-backdrop-v32{
    margin-left:0!important;
    width:100vw!important;
    max-width:100vw!important;
    left:0!important;
    right:0!important;
  }

  body:has(.standalone-mobile-topbar-v32) .standalone-drawer-v32{
    margin-left:0!important;
    left:0!important;
    width:330px!important;
    max-width:330px!important;
    min-width:0!important;
  }

  /* Semua content standalone keluar daripada offset sidebar */
  body:has(.standalone-mobile-topbar-v32) > *:not(nav):not(aside):not(.nav):not(.sidebar):not(.standalone-mobile-topbar-v32):not(.standalone-backdrop-v32):not(.standalone-drawer-v32):not(script):not(style):not(link):not(meta):not(title){
    margin-left:auto!important;
    margin-right:auto!important;
    width:calc(100vw - 48px)!important;
    max-width:1120px!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }

  body:has(.standalone-mobile-topbar-v32) .box,
  body:has(.standalone-mobile-topbar-v32) .card,
  body:has(.standalone-mobile-topbar-v32) .panel,
  body:has(.standalone-mobile-topbar-v32) section,
  body:has(.standalone-mobile-topbar-v32) form,
  body:has(.standalone-mobile-topbar-v32) .container,
  body:has(.standalone-mobile-topbar-v32) .container-fluid,
  body:has(.standalone-mobile-topbar-v32) main,
  body:has(.standalone-mobile-topbar-v32) .content,
  body:has(.standalone-mobile-topbar-v32) .main-content{
    margin-left:auto!important;
    margin-right:auto!important;
    width:calc(100vw - 48px)!important;
    max-width:1120px!important;
    min-width:0!important;
    padding-left:0!important;
    padding-right:0!important;
    box-sizing:border-box!important;
  }

  body:has(.standalone-mobile-topbar-v32) h1,
  body:has(.standalone-mobile-topbar-v32) h2,
  body:has(.standalone-mobile-topbar-v32) h3{
    white-space:normal!important;
    overflow:visible!important;
  }
}

/* Fallback untuk browser yang kurang ikut :has */
@media (min-width:901px){
  body.standalone-mobile-v32 > nav,
  body.standalone-mobile-v32 > aside,
  body.standalone-mobile-v32 > .nav,
  body.standalone-mobile-v32 > .sidebar,
  body.standalone-mobile-v32 .sidebar:not(.standalone-drawer-v32),
  body.standalone-mobile-v32 .side-nav,
  body.standalone-mobile-v32 .main-sidebar{
    display:none!important;
    visibility:hidden!important;
    width:0!important;
    min-width:0!important;
    max-width:0!important;
    height:0!important;
    overflow:hidden!important;
    opacity:0!important;
    pointer-events:none!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
  }

  body.standalone-mobile-v32 .standalone-mobile-topbar-v32{
    left:0!important;
    right:0!important;
    width:100vw!important;
    max-width:100vw!important;
    margin-left:0!important;
  }

  body.standalone-mobile-v32 > *:not(nav):not(aside):not(.nav):not(.sidebar):not(.standalone-mobile-topbar-v32):not(.standalone-backdrop-v32):not(.standalone-drawer-v32):not(script):not(style):not(link):not(meta):not(title){
    margin-left:auto!important;
    margin-right:auto!important;
    width:calc(100vw - 48px)!important;
    max-width:1120px!important;
    min-width:0!important;
  }
}

/* STANDALONE_PC_CLEAN_V42 */
@media (min-width:901px){

  body.standalone-mobile-v32,
  body:has(.standalone-mobile-topbar-v32){
    padding-top:86px!important;
    padding-left:0!important;
    margin-left:0!important;
    min-width:0!important;
    width:100vw!important;
    max-width:100vw!important;
    overflow-x:hidden!important;
    background:#f4f7fb!important;
  }

  /* Hide any old left rail/sidebar when standalone topbar exists */
  body.standalone-mobile-v32 > nav,
  body.standalone-mobile-v32 > aside,
  body.standalone-mobile-v32 > .nav,
  body.standalone-mobile-v32 > .sidebar,
  body.standalone-mobile-v32 > [class*="sidebar"],
  body.standalone-mobile-v32 > [class*="side"],
  body.standalone-mobile-v32 > [id*="sidebar"],
  body.standalone-mobile-v32 > [id*="side"],
  body:has(.standalone-mobile-topbar-v32) > nav,
  body:has(.standalone-mobile-topbar-v32) > aside,
  body:has(.standalone-mobile-topbar-v32) > .nav,
  body:has(.standalone-mobile-topbar-v32) > .sidebar,
  body:has(.standalone-mobile-topbar-v32) > [class*="sidebar"],
  body:has(.standalone-mobile-topbar-v32) > [class*="side"],
  body:has(.standalone-mobile-topbar-v32) > [id*="sidebar"],
  body:has(.standalone-mobile-topbar-v32) > [id*="side"]{
    display:none!important;
    visibility:hidden!important;
    opacity:0!important;
    pointer-events:none!important;
    width:0!important;
    min-width:0!important;
    max-width:0!important;
    height:0!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    overflow:hidden!important;
    transform:translateX(-9999px)!important;
  }

  /* Topbar full width */
  body.standalone-mobile-v32 .standalone-mobile-topbar-v32,
  body:has(.standalone-mobile-topbar-v32) .standalone-mobile-topbar-v32{
    display:flex!important;
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:0!important;
    width:100vw!important;
    max-width:100vw!important;
    min-width:0!important;
    height:86px!important;
    margin:0!important;
    padding:16px 28px!important;
    z-index:10000!important;
    box-sizing:border-box!important;
    background:linear-gradient(135deg,#0f172a,#174a78)!important;
  }

  /* PC drawer should be dropdown-style, not full page rail */
  body.standalone-mobile-v32 .standalone-drawer-v32,
  body:has(.standalone-mobile-topbar-v32) .standalone-drawer-v32{
    position:fixed!important;
    top:92px!important;
    right:24px!important;
    left:auto!important;
    bottom:auto!important;
    width:420px!important;
    max-width:420px!important;
    max-height:calc(100vh - 120px)!important;
    overflow-y:auto!important;
    transform:translateY(-12px) scale(.98)!important;
    opacity:0!important;
    pointer-events:none!important;
    z-index:10001!important;
    border-radius:22px!important;
    box-shadow:0 24px 60px rgba(15,23,42,.32)!important;
    margin:0!important;
  }

  body.standalone-mobile-v32.standalone-menu-open-v32 .standalone-drawer-v32,
  body:has(.standalone-mobile-topbar-v32).standalone-menu-open-v32 .standalone-drawer-v32{
    transform:translateY(0) scale(1)!important;
    opacity:1!important;
    pointer-events:auto!important;
  }

  body.standalone-mobile-v32 .standalone-backdrop-v32,
  body:has(.standalone-mobile-topbar-v32) .standalone-backdrop-v32{
    position:fixed!important;
    inset:0!important;
    width:100vw!important;
    height:100vh!important;
    margin:0!important;
    z-index:10000!important;
  }

  /* Content standalone center */
  body.standalone-mobile-v32 > *:not(.standalone-mobile-topbar-v32):not(.standalone-backdrop-v32):not(.standalone-drawer-v32):not(script):not(style):not(link):not(meta):not(title),
  body:has(.standalone-mobile-topbar-v32) > *:not(.standalone-mobile-topbar-v32):not(.standalone-backdrop-v32):not(.standalone-drawer-v32):not(script):not(style):not(link):not(meta):not(title){
    margin-left:auto!important;
    margin-right:auto!important;
    width:calc(100vw - 56px)!important;
    max-width:1120px!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }

  body.standalone-mobile-v32 .box,
  body.standalone-mobile-v32 .card,
  body.standalone-mobile-v32 .panel,
  body.standalone-mobile-v32 section,
  body.standalone-mobile-v32 form,
  body.standalone-mobile-v32 main,
  body.standalone-mobile-v32 .content,
  body.standalone-mobile-v32 .main-content,
  body.standalone-mobile-v32 .container,
  body.standalone-mobile-v32 .container-fluid{
    margin-left:auto!important;
    margin-right:auto!important;
    width:100%!important;
    max-width:1120px!important;
    min-width:0!important;
    padding-left:0!important;
    padding-right:0!important;
    box-sizing:border-box!important;
  }
}

/* STANDALONE_WEB_SAFE_V43 */
@media (min-width:901px){

  body.standalone-web-mode-v43,
  body:has(.standalone-webnav-v43){
    padding-top:132px!important;
    padding-left:0!important;
    margin-left:0!important;
    background:#f4f7fb!important;
    overflow-x:hidden!important;
  }

  body.standalone-web-mode-v43 .standalone-mobile-topbar-v32,
  body:has(.standalone-webnav-v43) .standalone-mobile-topbar-v32{
    display:flex!important;
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:0!important;
    width:100vw!important;
    height:76px!important;
    margin:0!important;
    padding:14px 34px!important;
    border-radius:0!important;
    z-index:9000!important;
    background:linear-gradient(135deg,#0f172a,#174a78)!important;
    box-shadow:0 8px 22px rgba(15,23,42,.14)!important;
  }

  body.standalone-web-mode-v43 .standalone-menu-btn-v32,
  body:has(.standalone-webnav-v43) .standalone-menu-btn-v32,
  body.standalone-web-mode-v43 .standalone-drawer-v32,
  body.standalone-web-mode-v43 .standalone-backdrop-v32,
  body:has(.standalone-webnav-v43) .standalone-drawer-v32,
  body:has(.standalone-webnav-v43) .standalone-backdrop-v32{
    display:none!important;
    visibility:hidden!important;
  }

  .standalone-webnav-v43{
    position:fixed!important;
    top:76px!important;
    left:0!important;
    right:0!important;
    height:56px!important;
    z-index:8999!important;
    background:#fff!important;
    border-bottom:1px solid #e5e7eb!important;
    box-shadow:0 8px 20px rgba(15,23,42,.06)!important;
    display:flex!important;
    align-items:center!important;
  }

  .standalone-webnav-inner-v43{
    width:100%!important;
    max-width:1280px!important;
    margin:0 auto!important;
    padding:0 26px!important;
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    box-sizing:border-box!important;
  }

  .webnav-item-v43,
  .webnav-settings-v43,
  .webnav-logout-v43{
    min-height:38px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:8px 13px!important;
    border-radius:10px!important;
    text-decoration:none!important;
    font-size:13px!important;
    font-weight:900!important;
    white-space:nowrap!important;
    color:#0f172a!important;
    background:#f8fafc!important;
    border:1px solid #e5e7eb!important;
    box-sizing:border-box!important;
  }

  .webnav-item-v43.active{
    background:#2563eb!important;
    color:#fff!important;
    border-color:#2563eb!important;
  }

  .webnav-spacer-v43{
    flex:1!important;
  }

  .webnav-settings-v43{
    background:#eef2ff!important;
    color:#1e3a8a!important;
  }

  .webnav-logout-v43{
    background:#fee2e2!important;
    color:#7f1d1d!important;
  }

  body.standalone-web-mode-v43 > *:not(.standalone-mobile-topbar-v32):not(.standalone-webnav-v43):not(script):not(style):not(link):not(meta):not(title),
  body:has(.standalone-webnav-v43) > *:not(.standalone-mobile-topbar-v32):not(.standalone-webnav-v43):not(script):not(style):not(link):not(meta):not(title){
    margin-left:auto!important;
    margin-right:auto!important;
    width:calc(100vw - 64px)!important;
    max-width:1180px!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }
}

@media (max-width:900px), (hover:none), (pointer:coarse){
  .standalone-webnav-v43{
    display:none!important;
  }
}

/* WEBNAV_COMPACT_V44 */
@media (min-width:901px){
  .standalone-webnav-v43{
    overflow-x:auto!important;
    overflow-y:hidden!important;
  }

  .standalone-webnav-inner-v43{
    max-width:none!important;
    min-width:max-content!important;
    padding:0 18px!important;
    gap:6px!important;
  }

  .webnav-item-v43,
  .webnav-settings-v43,
  .webnav-logout-v43{
    font-size:12px!important;
    padding:7px 10px!important;
    min-height:36px!important;
  }

  .webnav-spacer-v43{
    flex:0 0 10px!important;
  }

  body.standalone-web-mode-v43,
  body:has(.standalone-webnav-v43){
    padding-top:132px!important;
  }
}

/* MENU_ACTIVE_CLEAN_V46 */
/* Reset highlight terlalu luas. Hanya link semasa dibiru-kan. */
@media (min-width:901px){

  nav a,
  aside a,
  .nav a,
  .sidebar a,
  .side-nav a,
  .main-sidebar a{
    background:rgba(255,255,255,.06)!important;
    color:#e5eef8!important;
  }

  nav a.active-current-v46,
  aside a.active-current-v46,
  .nav a.active-current-v46,
  .sidebar a.active-current-v46,
  .side-nav a.active-current-v46,
  .main-sidebar a.active-current-v46{
    background:#2563eb!important;
    color:#ffffff!important;
    box-shadow:0 8px 18px rgba(37,99,235,.25)!important;
  }

  /* Group title seperti PANGKALAN DATA / TRANSAKSI jangan jadi biru penuh kecuali memang link aktif */
  .nav-group-title,
  .sidebar .nav-group-title,
  .side-nav .nav-group-title{
    background:rgba(255,255,255,.06)!important;
    color:#dbeafe!important;
  }
}

@media (max-width:900px), (hover:none), (pointer:coarse){
  nav a.active-current-v46,
  aside a.active-current-v46,
  .nav a.active-current-v46,
  .sidebar a.active-current-v46,
  .side-nav a.active-current-v46{
    background:#2563eb!important;
    color:#ffffff!important;
  }
}

/* DEVICE_LAYOUT_SEPARATION_V47 */
/* PC/Web: gunakan sidebar asal sahaja. Sembunyikan mobile/standalone header dalam content. */
@media (min-width:901px){

  body.jom-auto-desktop-v33 > *:not(.nav) .standalone-mobile-topbar-v32,
  body.jom-auto-desktop-v33 > *:not(.nav) .standalone-webnav-v43,
  body.jom-auto-desktop-v33 > *:not(.nav) .standalone-drawer-v32,
  body.jom-auto-desktop-v33 > *:not(.nav) .standalone-backdrop-v32,
  body.jom-auto-desktop-v33 > *:not(.nav) .mobile-topbar,
  body.jom-auto-desktop-v33 > *:not(.nav) .mobile-header,
  body.jom-auto-desktop-v33 > *:not(.nav) .mobile-menu,
  body.jom-auto-desktop-v33 > *:not(.nav) .mobile-nav,
  body.jom-auto-desktop-v33 > *:not(.nav) .app-mobile-header,
  body.jom-auto-desktop-v33 > *:not(.nav) .app-mobile-nav,
  body.jom-auto-desktop-v33 > *:not(.nav) .practical-mobile-header,
  body.jom-auto-desktop-v33 > *:not(.nav) .practical-mobile-nav,
  body.jom-desktop-view > *:not(.nav) .standalone-mobile-topbar-v32,
  body.jom-desktop-view > *:not(.nav) .standalone-webnav-v43,
  body.jom-desktop-view > *:not(.nav) .standalone-drawer-v32,
  body.jom-desktop-view > *:not(.nav) .standalone-backdrop-v32,
  body.jom-desktop-view > *:not(.nav) .mobile-topbar,
  body.jom-desktop-view > *:not(.nav) .mobile-header,
  body.jom-desktop-view > *:not(.nav) .mobile-menu,
  body.jom-desktop-view > *:not(.nav) .mobile-nav,
  body.jom-desktop-view > *:not(.nav) .app-mobile-header,
  body.jom-desktop-view > *:not(.nav) .app-mobile-nav,
  body.jom-desktop-view > *:not(.nav) .practical-mobile-header,
  body.jom-desktop-view > *:not(.nav) .practical-mobile-nav{
    display:none!important;
    visibility:hidden!important;
    height:0!important;
    min-height:0!important;
    max-height:0!important;
    opacity:0!important;
    overflow:hidden!important;
    pointer-events:none!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
  }

  /* Kalau page ada header gelap kedua dalam content, kecilkan ruang atas supaya tidak nampak kosong */
  body.jom-auto-desktop-v33 main,
  body.jom-auto-desktop-v33 .content,
  body.jom-auto-desktop-v33 .main-content,
  body.jom-auto-desktop-v33 .page-shell,
  body.jom-desktop-view main,
  body.jom-desktop-view .content,
  body.jom-desktop-view .main-content,
  body.jom-desktop-view .page-shell{
    padding-top:24px!important;
  }

  /* Table/action button PC biar jadi web style, bukan mobile stack terlalu besar */
  body.jom-auto-desktop-v33 table,
  body.jom-desktop-view table{
    width:100%!important;
    font-size:13px!important;
  }

  body.jom-auto-desktop-v33 table .btn,
  body.jom-desktop-view table .btn,
  body.jom-auto-desktop-v33 td .btn,
  body.jom-desktop-view td .btn{
    display:inline-flex!important;
    width:auto!important;
    min-width:72px!important;
    margin:3px 4px 3px 0!important;
    padding:8px 12px!important;
    font-size:13px!important;
    border-radius:8px!important;
  }
}

/* Mobile: kekalkan mobile layout. Jangan paksa desktop sidebar/web offset. */
@media (max-width:900px), (hover:none), (pointer:coarse){

  body.jom-auto-mobile-v33 > .nav,
  body.jom-mobile-view > .nav{
    display:none!important;
  }

  body.jom-auto-mobile-v33 main,
  body.jom-auto-mobile-v33 .content,
  body.jom-auto-mobile-v33 .main-content,
  body.jom-auto-mobile-v33 .page-shell,
  body.jom-mobile-view main,
  body.jom-mobile-view .content,
  body.jom-mobile-view .main-content,
  body.jom-mobile-view .page-shell{
    margin-left:0!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    padding-left:14px!important;
    padding-right:14px!important;
    box-sizing:border-box!important;
  }
}

/* REMOVE_MOBILE_DRAWER_ON_DESKTOP_V48 */
@media (min-width:901px){

  .standalone-mobile-topbar-v32,
  .standalone-webnav-v43,
  .standalone-backdrop-v32,
  .standalone-drawer-v32,
  .mobile-topbar,
  .mobile-header,
  .mobile-nav,
  .mobile-menu,
  .app-mobile-header,
  .app-mobile-nav{
    display:none!important;
    visibility:hidden!important;
    opacity:0!important;
    height:0!important;
    min-height:0!important;
    max-height:0!important;
    overflow:hidden!important;
    pointer-events:none!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
  }

  body.standalone-menu-open-v32,
  body.standalone-menu-open-v31,
  body.standalone-menu-open-v30,
  body.js-nav-open,
  body.mobile-menu-open,
  body.menu-open{
    overflow:auto!important;
  }

  body.jom-auto-desktop-v33 .page-shell,
  body.jom-desktop-view .page-shell,
  body.jom-auto-desktop-v33 main,
  body.jom-desktop-view main,
  body.jom-auto-desktop-v33 .content,
  body.jom-desktop-view .content,
  body.jom-auto-desktop-v33 .main-content,
  body.jom-desktop-view .main-content{
    padding-top:24px!important;
  }
}


/* === JOM SILAT MODERN UI ACTIVE START === */
/* JOM SILAT Modern Responsive UI - Safe Phase 1/2 */

:root {
  --jm-bg: #070b10;
  --jm-bg-soft: #0b1118;
  --jm-panel: #101821;
  --jm-panel-2: #152131;
  --jm-card: #111a24;
  --jm-border: rgba(255,255,255,.08);
  --jm-text: #f5f7fb;
  --jm-muted: #8d9aaa;
  --jm-accent: #b8ff1a;
  --jm-accent-2: #22d3ee;
  --jm-danger: #ef4444;
  --jm-radius: 18px;
  --jm-shadow: 0 18px 45px rgba(0,0,0,.35);
}

html,
body {
  background:
    radial-gradient(circle at top left, rgba(184,255,26,.10), transparent 28%),
    radial-gradient(circle at top right, rgba(34,211,238,.08), transparent 24%),
    var(--jm-bg) !important;
  color: var(--jm-text) !important;
}

body {
  min-height: 100vh;
}

.main,
.main-content,
.content,
.page-content,
.container,
.dashboard,
.module-page {
  background: transparent !important;
  color: var(--jm-text) !important;
}

.card,
.panel,
.box,
.widget,
.stat-card,
.dashboard-card,
.module-card,
.report-card,
.form-card,
.table-card,
.modern-card {
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015)) !important;
  border: 1px solid var(--jm-border) !important;
  border-radius: var(--jm-radius) !important;
  box-shadow: var(--jm-shadow);
  color: var(--jm-text) !important;
}

h1, h2, h3, h4, h5, h6,
.page-title,
.module-title {
  color: var(--jm-text) !important;
}

small,
.muted,
.text-muted,
.subtext,
.help-text,
.description {
  color: var(--jm-muted) !important;
}

a {
  color: inherit;
}

a:hover {
  color: var(--jm-accent);
}

button,
.btn,
.button,
input[type="submit"],
input[type="button"] {
  border-radius: 12px !important;
  transition: transform .15s ease, opacity .15s ease;
}

button:hover,
.btn:hover,
.button:hover {
  transform: translateY(-1px);
}

.btn-primary,
.button-primary,
.primary,
input[type="submit"] {
  background: linear-gradient(135deg, var(--jm-accent), #7ddc00) !important;
  color: #071006 !important;
  border: none !important;
  font-weight: 700;
}

input,
select,
textarea {
  background: #0c141d !important;
  color: var(--jm-text) !important;
  border: 1px solid var(--jm-border) !important;
  border-radius: 12px !important;
}

input::placeholder,
textarea::placeholder {
  color: rgba(141,154,170,.75) !important;
}

label {
  color: var(--jm-text) !important;
}

table {
  color: var(--jm-text) !important;
}

thead,
th {
  background: rgba(255,255,255,.04) !important;
  color: var(--jm-muted) !important;
}

td,
th {
  border-color: var(--jm-border) !important;
}

.table-responsive,
.responsive-table,
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.sidebar,
.side-nav,
.sidenav,
.nav-panel {
  background: rgba(5,9,14,.94) !important;
  border-right: 1px solid var(--jm-border) !important;
  color: var(--jm-text) !important;
}

.sidebar a,
.side-nav a,
.sidenav a,
.nav-panel a {
  color: var(--jm-muted) !important;
  border-radius: 12px;
}

.sidebar a:hover,
.side-nav a:hover,
.sidenav a:hover,
.nav-panel a:hover,
.sidebar a.active,
.side-nav a.active,
.sidenav a.active,
.nav-panel a.active {
  background: var(--jm-accent) !important;
  color: #071006 !important;
}

.topbar,
.header,
.app-header,
.navbar {
  background: rgba(8,13,18,.82) !important;
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--jm-border) !important;
  color: var(--jm-text) !important;
}

.jm-grid {
  display: grid;
  gap: 16px;
}

.jm-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.jm-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.jm-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 1025px) {
  .content,
  .main-content,
  .page-content {
    padding: 22px !important;
  }

  .dashboard-grid,
  .module-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 16px;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .content,
  .main-content,
  .page-content {
    padding: 18px !important;
  }

  .jm-grid-4,
  .dashboard-grid,
  .module-grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }

  .sidebar,
  .side-nav,
  .sidenav {
    max-width: 92px;
  }
}

@media (max-width: 767px) {
  body {
    overflow-x: hidden;
  }

  .content,
  .main-content,
  .page-content,
  .container {
    padding: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  h1,
  .page-title {
    font-size: 22px !important;
  }

  h2,
  .module-title {
    font-size: 18px !important;
  }

  .jm-grid,
  .jm-grid-4,
  .jm-grid-3,
  .jm-grid-2,
  .dashboard-grid,
  .module-grid,
  .cards-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .card,
  .panel,
  .box,
  .widget,
  .stat-card,
  .dashboard-card,
  .module-card,
  .report-card,
  .form-card,
  .table-card {
    border-radius: 18px !important;
    padding: 14px !important;
  }

  table {
    min-width: 720px;
  }

  .table-card,
  .table-responsive,
  .responsive-table,
  .table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  input,
  select,
  textarea,
  button,
  .btn,
  .button {
    width: 100%;
    min-height: 42px;
  }

  .actions,
  .button-row,
  .form-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}

@media print {
  html,
  body {
    background: #fff !important;
    color: #000 !important;
  }

  .card,
  .panel,
  .box,
  table,
  tr,
  td,
  th {
    background: #fff !important;
    color: #000 !important;
    box-shadow: none !important;
  }

  .sidebar,
  .side-nav,
  .sidenav,
  .topbar,
  .navbar,
  .app-header,
  .mobile-bottom-nav {
    display: none !important;
  }
}
/* === JOM SILAT MODERN UI ACTIVE END === */


/* LOGIN INPUT LIGHT FIX V54 */
input,
select,
textarea,
.form-control,
.login-card input,
.auth-card input,
input[type="text"],
input[type="password"],
input[type="email"],
input[name="username"],
input[name="password"] {
  background: #ffffff !important;
  color: #111827 !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

input::placeholder,
textarea::placeholder {
  color: #64748b !important;
  opacity: 1 !important;
}

label,
.login-card label,
.auth-card label {
  color: #334155 !important;
  opacity: 1 !important;
}

/* =========================================================
   JOM SILAT MODERN SIDEBAR UI V1
   Scope: desktop/tablet visual upgrade only
   Safe: CSS only, no app.py route changes
   ========================================================= */

:root {
  --js-bg: #f5f7fb;
  --js-surface: #ffffff;
  --js-surface-2: #f8fafc;
  --js-text: #0f172a;
  --js-muted: #64748b;
  --js-border: #e5e7eb;
  --js-primary: #2563eb;
  --js-primary-2: #7c3aed;
  --js-sidebar: #0f2742;
  --js-sidebar-2: #174f80;
  --js-sidebar-text: #e5eefb;
  --js-radius: 16px;
  --js-shadow: 0 10px 26px rgba(15, 23, 42, .07);
}

html,
body {
  background: var(--js-bg) !important;
  color: var(--js-text) !important;
}

/* Main app surface */
.main,
.content,
.page,
.page-content,
.dashboard,
.dashboard-content,
main {
  background: var(--js-bg) !important;
  color: var(--js-text) !important;
}

/* Sidebar base */
.sidebar,
.side-nav,
.sidenav,
.drawer,
.nav-drawer,
.mobile-drawer,
aside {
  background: linear-gradient(180deg, var(--js-sidebar-2), var(--js-sidebar)) !important;
  color: var(--js-sidebar-text) !important;
  border-right: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 10px 0 30px rgba(15,23,42,.12) !important;
}

/* Sidebar brand */
.sidebar h1,
.sidebar h2,
.sidebar h3,
.sidebar .brand,
.sidebar .logo,
.side-nav h1,
.side-nav h2,
.sidenav h1,
.sidenav h2,
aside h1,
aside h2 {
  color: #ffffff !important;
  letter-spacing: .8px !important;
  font-weight: 950 !important;
}

/* Sidebar subtitle / group label */
.sidebar small,
.sidebar .small,
.sidebar .muted,
.sidebar .section-label,
.sidebar .menu-label,
.side-nav small,
.sidenav small,
aside small {
  color: #bfdbfe !important;
  opacity: 1 !important;
  font-weight: 800 !important;
  letter-spacing: .7px !important;
  text-transform: uppercase !important;
}

/* Sidebar menu links */
.sidebar a,
.side-nav a,
.sidenav a,
.drawer a,
.nav-drawer a,
.mobile-drawer a,
aside a {
  color: #e5eefb !important;
  border-radius: 13px !important;
  text-decoration: none !important;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease !important;
}

/* Icon badge concept using first inline icon/emoji/span */
.sidebar a span:first-child,
.side-nav a span:first-child,
.sidenav a span:first-child,
aside a span:first-child,
.sidebar .nav-icon,
.side-nav .nav-icon,
.sidenav .nav-icon {
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 11px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Hover */
.sidebar a:hover,
.side-nav a:hover,
.sidenav a:hover,
.drawer a:hover,
.nav-drawer a:hover,
.mobile-drawer a:hover,
aside a:hover {
  background: rgba(255,255,255,.11) !important;
  color: #ffffff !important;
  transform: translateX(2px) !important;
}

/* Active item */
.sidebar a.active,
.sidebar .active,
.side-nav a.active,
.side-nav .active,
.sidenav a.active,
.sidenav .active,
.drawer a.active,
.nav-drawer a.active,
aside a.active,
aside .active {
  background: linear-gradient(135deg, #4f46e5, #2563eb) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 22px rgba(37,99,235,.25) !important;
  border: 1px solid rgba(191,219,254,.35) !important;
}

/* User/settings/logout card area */
.sidebar .account,
.sidebar .profile,
.sidebar .user-card,
.sidebar .user-box,
.sidebar .bottom,
.side-nav .account,
.side-nav .profile,
.sidenav .account,
.sidenav .profile,
aside .account,
aside .profile {
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 18px !important;
  box-shadow: none !important;
}

/* Main content cards */
.card,
.panel,
.box,
.dashboard-card,
.summary-card,
.stat-card,
.metric-card,
section,
article {
  background: var(--js-surface) !important;
  color: var(--js-text) !important;
  border: 1px solid var(--js-border) !important;
  border-radius: var(--js-radius) !important;
  box-shadow: var(--js-shadow) !important;
}

/* Card headings */
.card h1,
.card h2,
.card h3,
.panel h1,
.panel h2,
.panel h3,
.box h1,
.box h2,
.box h3,
section h1,
section h2,
section h3 {
  color: var(--js-text) !important;
  font-weight: 900 !important;
}

/* Muted text */
.card p,
.panel p,
.box p,
section p,
.small,
.muted,
.text-muted {
  color: var(--js-muted) !important;
}

/* Metric value */
.stat-value,
.metric-value,
.amount,
.big-number,
.dashboard-number,
strong {
  color: #0f172a !important;
  font-weight: 950 !important;
}

/* Buttons */
button,
.btn,
.button,
input[type="submit"],
a.btn,
a.button {
  border-radius: 12px !important;
  font-weight: 800 !important;
}

/* Primary button */
.btn-primary,
.button-primary,
button[type="submit"],
input[type="submit"] {
  background: linear-gradient(135deg, #2563eb, #4f46e5) !important;
  color: #ffffff !important;
  border: 0 !important;
  box-shadow: 0 10px 22px rgba(37,99,235,.20) !important;
}

/* Inputs */
input,
select,
textarea,
.form-control {
  background: #ffffff !important;
  color: #111827 !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 12px !important;
}

/* Tables */
table,
.table {
  background: #ffffff !important;
  color: #111827 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}

th {
  background: #f8fafc !important;
  color: #334155 !important;
  font-weight: 900 !important;
}

td {
  color: #1f2937 !important;
}

/* Auto dark mode foundation based on device preference */
@media (prefers-color-scheme: dark) {
  :root {
    --js-bg: #070b14;
    --js-surface: #111827;
    --js-surface-2: #0f172a;
    --js-text: #e5e7eb;
    --js-muted: #94a3b8;
    --js-border: #1f2937;
    --js-sidebar: #070b14;
    --js-sidebar-2: #111827;
    --js-shadow: 0 10px 26px rgba(0,0,0,.25);
  }

  html,
  body,
  .main,
  .content,
  .page,
  .page-content,
  .dashboard,
  .dashboard-content,
  main {
    background: var(--js-bg) !important;
    color: var(--js-text) !important;
  }

  .card,
  .panel,
  .box,
  .dashboard-card,
  .summary-card,
  .stat-card,
  .metric-card,
  section,
  article {
    background: var(--js-surface) !important;
    color: var(--js-text) !important;
    border-color: var(--js-border) !important;
  }

  .card h1,
  .card h2,
  .card h3,
  .panel h1,
  .panel h2,
  .panel h3,
  .box h1,
  .box h2,
  .box h3,
  section h1,
  section h2,
  section h3,
  .stat-value,
  .metric-value,
  .amount,
  .big-number,
  .dashboard-number,
  strong {
    color: var(--js-text) !important;
  }

  .card p,
  .panel p,
  .box p,
  section p,
  .small,
  .muted,
  .text-muted {
    color: var(--js-muted) !important;
  }

  input,
  select,
  textarea,
  .form-control {
    background: #0f172a !important;
    color: #e5e7eb !important;
    border-color: #334155 !important;
  }

  table,
  .table {
    background: #111827 !important;
    color: #e5e7eb !important;
  }

  th {
    background: #0f172a !important;
    color: #cbd5e1 !important;
  }

  td {
    color: #e5e7eb !important;
  }
}

/* Desktop spacing refinement */
@media (min-width: 769px) {
  .content,
  .main,
  main {
    padding: 24px 28px !important;
  }

  .card,
  .panel,
  .box,
  section,
  article {
    margin-bottom: 22px !important;
  }
}


/* =========================================================
   FIX MOBILE BURGER DRAWER FORCE V1
   Purpose: recover mobile drawer click/open behavior after
   older standalone/mobile/desktop CSS rules conflict.
   ========================================================= */

@media (max-width: 900px) {
  html,
  body {
    overflow-x: hidden !important;
  }

  /* Ensure top mobile buttons are clickable */
  .mobile-menu-toggle,
  .mobile-burger,
  .burger,
  .hamburger,
  [data-mobile-menu],
  [data-drawer-toggle],
  button[aria-label*="menu" i],
  button[aria-label*="menu" i] *,
  button[aria-label*="navigation" i],
  button[aria-label*="navigation" i] * {
    pointer-events: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 2147483647 !important;
    touch-action: manipulation !important;
  }

  /* Default mobile drawer/sidebar state */
  body:not(.mobile-menu-open) aside,
  body:not(.mobile-menu-open) .sidebar,
  body:not(.mobile-menu-open) .app-sidebar,
  body:not(.mobile-menu-open) nav.sidebar {
    transform: translateX(-110%) !important;
  }

  /* Open state forced */
  body.mobile-menu-open aside,
  body.mobile-menu-open .sidebar,
  body.mobile-menu-open .app-sidebar,
  body.mobile-menu-open nav.sidebar,
  body.menu-open aside,
  body.menu-open .sidebar,
  body.drawer-open aside,
  body.drawer-open .sidebar,
  body.standalone-menu-open-v32 aside,
  body.standalone-menu-open-v32 .sidebar {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateX(0) !important;
    pointer-events: auto !important;
    z-index: 2147483646 !important;
  }

  /* Prevent accidental hidden state from old patches */
  body.mobile-menu-open .sidebar *,
  body.mobile-menu-open aside *,
  body.mobile-menu-open nav.sidebar * {
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* Clickable backdrop */
  .mobile-menu-backdrop,
  .drawer-backdrop,
  .sidebar-backdrop {
    z-index: 2147483645 !important;
  }

  body.mobile-menu-open {
    overflow: hidden !important;
  }
}

/* =========================================================
   MOBILE BURGER DEEP FIX V2
   Force real drawer/menu visibility when body.mobile-menu-open-v2.
   ========================================================= */

@media (max-width: 900px) {
  body.mobile-menu-open-v2 {
    overflow: hidden !important;
  }

  body.mobile-menu-open-v2 nav,
  body.mobile-menu-open-v2 aside,
  body.mobile-menu-open-v2 .sidebar,
  body.mobile-menu-open-v2 .app-sidebar,
  body.mobile-menu-open-v2 .mobile-nav,
  body.mobile-menu-open-v2 .mobile-menu,
  body.mobile-menu-open-v2 .drawer,
  body.mobile-menu-open-v2 .standalone-drawer-v32,
  body.mobile-menu-open-v2 [class*="sidebar"],
  body.mobile-menu-open-v2 [class*="drawer"],
  body.mobile-menu-open-v2 [class*="mobile-menu"],
  body.mobile-menu-open-v2 [class*="mobile-nav"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateX(0) translateY(0) scale(1) !important;
    z-index: 2147483646 !important;
  }

  body.mobile-menu-open-v2 nav *,
  body.mobile-menu-open-v2 aside *,
  body.mobile-menu-open-v2 .sidebar *,
  body.mobile-menu-open-v2 .app-sidebar *,
  body.mobile-menu-open-v2 .mobile-nav *,
  body.mobile-menu-open-v2 .mobile-menu *,
  body.mobile-menu-open-v2 .drawer *,
  body.mobile-menu-open-v2 [class*="sidebar"] *,
  body.mobile-menu-open-v2 [class*="drawer"] *,
  body.mobile-menu-open-v2 [class*="mobile-menu"] *,
  body.mobile-menu-open-v2 [class*="mobile-nav"] * {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  body.mobile-menu-open-v2::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(15, 23, 42, .45) !important;
    z-index: 2147483644 !important;
  }

  body.mobile-menu-open-v2 aside,
  body.mobile-menu-open-v2 .sidebar,
  body.mobile-menu-open-v2 .app-sidebar,
  body.mobile-menu-open-v2 nav.sidebar,
  body.mobile-menu-open-v2 [class*="drawer"],
  body.mobile-menu-open-v2 [class*="mobile-menu"],
  body.mobile-menu-open-v2 [class*="mobile-nav"] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: min(82vw, 340px) !important;
    max-width: 340px !important;
    height: 100vh !important;
    overflow-y: auto !important;
    background: #0f172a !important;
    color: #ffffff !important;
    padding: 22px 18px !important;
    box-shadow: 18px 0 40px rgba(0,0,0,.35) !important;
    border-radius: 0 24px 24px 0 !important;
  }

  .js-mobile-burger-v2 {
    pointer-events: auto !important;
    z-index: 2147483647 !important;
    touch-action: manipulation !important;
  }
}

/* =========================================================
   JOM SILAT - LIGHT MODE CLEANUP
   Purpose: remove excessive black/dark background in web mode
   Locked patch: light-mode-cleanup-v1
   ========================================================= */

html:not(.dark) body,
body:not(.dark),
html:not(.dark) .app-shell,
html:not(.dark) .main-shell,
html:not(.dark) .page-shell,
html:not(.dark) .content-shell,
html:not(.dark) .main-content,
html:not(.dark) main {
    background: #f4f7fb !important;
    color: #111827 !important;
}

/* Main page area */
html:not(.dark) .content,
html:not(.dark) .page-content,
html:not(.dark) .dashboard,
html:not(.dark) .dashboard-page,
html:not(.dark) .module-page {
    background: #f4f7fb !important;
    color: #111827 !important;
}

/* Cards / panels */
html:not(.dark) .card,
html:not(.dark) .panel,
html:not(.dark) .box,
html:not(.dark) .stat-card,
html:not(.dark) .dashboard-card,
html:not(.dark) .module-card,
html:not(.dark) .chart-card,
html:not(.dark) .table-card,
html:not(.dark) .form-card,
html:not(.dark) .section-card {
    background: #ffffff !important;
    color: #111827 !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08) !important;
}

/* Header/top blocks */
html:not(.dark) .topbar,
html:not(.dark) .page-header,
html:not(.dark) .dashboard-header,
html:not(.dark) .module-header {
    background: #ffffff !important;
    color: #111827 !important;
    border: 1px solid #e5e7eb !important;
}

/* Sidebar must stay light in light mode */
html:not(.dark) .sidebar,
html:not(.dark) .side-bar,
html:not(.dark) .app-sidebar,
html:not(.dark) aside {
    background: #ffffff !important;
    color: #111827 !important;
    border-right: 1px solid #e5e7eb !important;
}

/* Sidebar text */
html:not(.dark) .sidebar *,
html:not(.dark) .side-bar *,
html:not(.dark) .app-sidebar *,
html:not(.dark) aside * {
    color: inherit;
}

/* Menu items */
html:not(.dark) .nav-link,
html:not(.dark) .menu-link,
html:not(.dark) .sidebar a,
html:not(.dark) .side-bar a,
html:not(.dark) .app-sidebar a {
    color: #1f2937 !important;
}

html:not(.dark) .nav-link:hover,
html:not(.dark) .menu-link:hover,
html:not(.dark) .sidebar a:hover,
html:not(.dark) .side-bar a:hover,
html:not(.dark) .app-sidebar a:hover {
    background: #eef2ff !important;
    color: #1e3a8a !important;
}

/* Active menu */
html:not(.dark) .active,
html:not(.dark) .nav-link.active,
html:not(.dark) .menu-link.active,
html:not(.dark) .sidebar a.active {
    background: #eef2ff !important;
    color: #1d4ed8 !important;
}

/* Muted labels */
html:not(.dark) .text-muted,
html:not(.dark) .muted,
html:not(.dark) small,
html:not(.dark) .subtitle,
html:not(.dark) .description {
    color: #6b7280 !important;
}

/* Tables */
html:not(.dark) table,
html:not(.dark) .table {
    background: #ffffff !important;
    color: #111827 !important;
}

html:not(.dark) th {
    background: #f8fafc !important;
    color: #374151 !important;
}

html:not(.dark) td {
    color: #111827 !important;
    border-color: #e5e7eb !important;
}

/* Inputs */
html:not(.dark) input,
html:not(.dark) select,
html:not(.dark) textarea {
    background: #ffffff !important;
    color: #111827 !important;
    border-color: #d1d5db !important;
}

/* Prevent accidental black containers in light mode */
html:not(.dark) [style*="background:#000"],
html:not(.dark) [style*="background: #000"],
html:not(.dark) [style*="background-color:#000"],
html:not(.dark) [style*="background-color: #000"],
html:not(.dark) [style*="background:black"],
html:not(.dark) [style*="background: black"] {
    background: #ffffff !important;
    color: #111827 !important;
}

/* Keep dark mode untouched */
html.dark body,
body.dark {
    color-scheme: dark;
}


/* =========================================================
   JOM SILAT - DARK MODE USERNAME VISIBILITY FIX
   Purpose: make sidebar user profile readable in dark mode
   Patch: dark-username-visibility-v1
   ========================================================= */

html.dark .sidebar,
body.dark .sidebar,
html.dark .side-bar,
body.dark .side-bar,
html.dark .app-sidebar,
body.dark .app-sidebar,
html.dark aside,
body.dark aside {
    background: #0f172a !important;
    color: #e5e7eb !important;
    border-right: 1px solid rgba(148, 163, 184, 0.22) !important;
}

/* User profile box */
html.dark .sidebar .user-card,
body.dark .sidebar .user-card,
html.dark .sidebar .profile-card,
body.dark .sidebar .profile-card,
html.dark .sidebar .user-profile,
body.dark .sidebar .user-profile,
html.dark .app-sidebar .user-card,
body.dark .app-sidebar .user-card,
html.dark .app-sidebar .profile-card,
body.dark .app-sidebar .profile-card,
html.dark .app-sidebar .user-profile,
body.dark .app-sidebar .user-profile {
    background: rgba(30, 41, 59, 0.96) !important;
    color: #f8fafc !important;
    border: 1px solid rgba(148, 163, 184, 0.28) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32) !important;
}

/* Fallback: any username/profile area inside sidebar */
html.dark .sidebar [class*="user"],
body.dark .sidebar [class*="user"],
html.dark .sidebar [class*="profile"],
body.dark .sidebar [class*="profile"],
html.dark .app-sidebar [class*="user"],
body.dark .app-sidebar [class*="user"],
html.dark .app-sidebar [class*="profile"],
body.dark .app-sidebar [class*="profile"] {
    color: #f8fafc !important;
}

/* Username text direct fallback */
html.dark .sidebar strong,
body.dark .sidebar strong,
html.dark .sidebar b,
body.dark .sidebar b,
html.dark .app-sidebar strong,
body.dark .app-sidebar strong,
html.dark .app-sidebar b,
body.dark .app-sidebar b {
    color: #f8fafc !important;
}

/* Sidebar headings */
html.dark .sidebar .section-title,
body.dark .sidebar .section-title,
html.dark .sidebar .menu-title,
body.dark .sidebar .menu-title,
html.dark .sidebar .nav-title,
body.dark .sidebar .nav-title,
html.dark .sidebar small,
body.dark .sidebar small {
    color: #cbd5e1 !important;
}

/* Dark mode menu text */
html.dark .sidebar a,
body.dark .sidebar a,
html.dark .app-sidebar a,
body.dark .app-sidebar a,
html.dark .side-bar a,
body.dark .side-bar a {
    color: #e5e7eb !important;
}

html.dark .sidebar a:hover,
body.dark .sidebar a:hover,
html.dark .app-sidebar a:hover,
body.dark .app-sidebar a:hover {
    background: rgba(99, 102, 241, 0.20) !important;
    color: #ffffff !important;
}

html.dark .sidebar a.active,
body.dark .sidebar a.active,
html.dark .app-sidebar a.active,
body.dark .app-sidebar a.active {
    background: rgba(99, 102, 241, 0.30) !important;
    color: #ffffff !important;
}

/* Icon buttons inside user card */
html.dark .sidebar button,
body.dark .sidebar button,
html.dark .app-sidebar button,
body.dark .app-sidebar button {
    color: #f8fafc !important;
    border-color: rgba(148, 163, 184, 0.28) !important;
}

/* Prevent unreadable white boxes in dark sidebar */
html.dark .sidebar .user-card *,
body.dark .sidebar .user-card *,
html.dark .sidebar .profile-card *,
body.dark .sidebar .profile-card *,
html.dark .sidebar .user-profile *,
body.dark .sidebar .user-profile * {
    color: #f8fafc !important;
}


/* =========================================================
   JOM SILAT - USERNAME DARK TEXT FIX
   Purpose: username inside bright profile box must be readable
   Patch: username-dark-text-v1
   ========================================================= */

/* Keep the top user/profile box readable even when sidebar is dark */
html.dark .sidebar [class*="user"],
body.dark .sidebar [class*="user"],
html.dark .sidebar [class*="account"],
body.dark .sidebar [class*="account"],
html.dark .sidebar [class*="profile"],
body.dark .sidebar [class*="profile"],
html.dark .app-sidebar [class*="user"],
body.dark .app-sidebar [class*="user"],
html.dark .app-sidebar [class*="account"],
body.dark .app-sidebar [class*="account"],
html.dark .app-sidebar [class*="profile"],
body.dark .app-sidebar [class*="profile"],
html.dark aside [class*="user"],
body.dark aside [class*="user"],
html.dark aside [class*="account"],
body.dark aside [class*="account"],
html.dark aside [class*="profile"],
body.dark aside [class*="profile"] {
    color: #111827 !important;
}

/* Force all text inside the bright user box to dark */
html.dark .sidebar [class*="user"] *,
body.dark .sidebar [class*="user"] *,
html.dark .sidebar [class*="account"] *,
body.dark .sidebar [class*="account"] *,
html.dark .sidebar [class*="profile"] *,
body.dark .sidebar [class*="profile"] *,
html.dark .app-sidebar [class*="user"] *,
body.dark .app-sidebar [class*="user"] *,
html.dark .app-sidebar [class*="account"] *,
body.dark .app-sidebar [class*="account"] *,
html.dark .app-sidebar [class*="profile"] *,
body.dark .app-sidebar [class*="profile"] *,
html.dark aside [class*="user"] *,
body.dark aside [class*="user"] *,
html.dark aside [class*="account"] *,
body.dark aside [class*="account"] *,
html.dark aside [class*="profile"] *,
body.dark aside [class*="profile"] * {
    color: #111827 !important;
}

/* Specific fallback for username text elements */
html.dark .sidebar strong,
body.dark .sidebar strong,
html.dark .sidebar b,
body.dark .sidebar b,
html.dark .app-sidebar strong,
body.dark .app-sidebar strong,
html.dark .app-sidebar b,
body.dark .app-sidebar b,
html.dark aside strong,
body.dark aside strong,
html.dark aside b,
body.dark aside b {
    color: #111827 !important;
    text-shadow: none !important;
}

/* Keep profile action icons visible */
html.dark .sidebar [class*="user"] button,
body.dark .sidebar [class*="user"] button,
html.dark .sidebar [class*="account"] button,
body.dark .sidebar [class*="account"] button,
html.dark .sidebar [class*="profile"] button,
body.dark .sidebar [class*="profile"] button {
    color: #1f2937 !important;
}

/* If the user box uses a direct top panel without class, force the first card area text dark */
html.dark .sidebar > div:first-of-type,
body.dark .sidebar > div:first-of-type,
html.dark .app-sidebar > div:first-of-type,
body.dark .app-sidebar > div:first-of-type,
html.dark aside > div:first-of-type,
body.dark aside > div:first-of-type {
    color: #111827 !important;
}

html.dark .sidebar > div:first-of-type *,
body.dark .sidebar > div:first-of-type *,
html.dark .app-sidebar > div:first-of-type *,
body.dark .app-sidebar > div:first-of-type *,
html.dark aside > div:first-of-type *,
body.dark aside > div:first-of-type * {
    color: #111827 !important;
}




/* =========================================================
   JOM SILAT - DIRECT ACCOUNT USERNAME READABILITY FIX
   Target actual classes: direct-account-v28 / direct-account-user-v28
   ========================================================= */

.direct-account-v28 {
    background: rgba(255, 255, 255, 0.94) !important;
    border: 1px solid rgba(148, 163, 184, 0.35) !important;
}

.direct-account-user-v28 {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    opacity: 1 !important;
    font-weight: 800 !important;
    text-shadow: none !important;
}

.direct-account-user-v28 *,
.direct-account-v28 .direct-account-user-v28 *,
.direct-account-v28 span,
.direct-account-v28 strong,
.direct-account-v28 b {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

/* Keep action buttons readable */
.direct-account-actions-v28 a,
.direct-account-actions-v28 button {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    opacity: 1 !important;
}

/* Logout remains visually red */
.direct-account-actions-v28 .direct-logout-v28,
.direct-account-actions-v28 a[href="/logout"] {
    color: #991b1b !important;
    -webkit-text-fill-color: #991b1b !important;
}


/* =========================================================
   JOM SILAT - DIRECT ACCOUNT ICON READABILITY FIX
   Target: direct-account-icon-v28
   ========================================================= */

.direct-account-icon-v28 {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    margin-right: 8px !important;
    border-radius: 999px !important;
    background: #e5e7eb !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    opacity: 1 !important;
    text-shadow: none !important;
    vertical-align: middle !important;
}

.direct-account-user-v28 {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    opacity: 1 !important;
}

.direct-account-user-v28 .direct-account-icon-v28 {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    opacity: 1 !important;
}


/* =========================================================
   JOM SILAT - FINAL DIRECT ACCOUNT USER MOBILE/DESKTOP FIX
   Target exact classes:
   direct-account-v28
   direct-account-user-v28
   direct-account-icon-v28
   direct-account-name-v28
   ========================================================= */

html body .direct-account-v28,
html.dark body .direct-account-v28,
body.dark .direct-account-v28,
.direct-account-v28 {
    background: rgba(255,255,255,0.96) !important;
    border: 1px solid rgba(148,163,184,0.45) !important;
    box-shadow: 0 12px 28px rgba(0,0,0,0.22) !important;
}

html body .direct-account-user-v28,
html.dark body .direct-account-user-v28,
body.dark .direct-account-user-v28,
.direct-account-user-v28 {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    opacity: 1 !important;
    font-weight: 900 !important;
    text-shadow: none !important;
}

html body .direct-account-name-v28,
html.dark body .direct-account-name-v28,
body.dark .direct-account-name-v28,
.direct-account-name-v28 {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    opacity: 1 !important;
    font-weight: 900 !important;
    text-shadow: none !important;
}

html body .direct-account-icon-v28,
html.dark body .direct-account-icon-v28,
body.dark .direct-account-icon-v28,
.direct-account-icon-v28 {
    display: inline-flex !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    background: #e5e7eb !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    opacity: 1 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-shadow: none !important;
}

/* Mobile drawer exact fallback */
@media (max-width: 900px) {
    .direct-account-v28,
    .mobile-drawer .direct-account-v28,
    .drawer .direct-account-v28,
    .sidebar .direct-account-v28,
    aside .direct-account-v28 {
        background: rgba(255,255,255,0.97) !important;
    }

    .direct-account-user-v28,
    .direct-account-user-v28 *,
    .mobile-drawer .direct-account-user-v28,
    .mobile-drawer .direct-account-user-v28 *,
    .drawer .direct-account-user-v28,
    .drawer .direct-account-user-v28 *,
    .sidebar .direct-account-user-v28,
    .sidebar .direct-account-user-v28 *,
    aside .direct-account-user-v28,
    aside .direct-account-user-v28 * {
        color: #111827 !important;
        -webkit-text-fill-color: #111827 !important;
        opacity: 1 !important;
        text-shadow: none !important;
    }
}


/* =========================================================
   JOM SILAT MOBILE UI STABILIZER V83
   Purpose:
   1) keep direct account username/icon readable
   2) stop KPI cards becoming white unreadable blocks in mobile dark mode
   ========================================================= */

/* Account/user card */
html body .direct-account-v28,
html[data-theme="dark"] body .direct-account-v28,
html.dark body .direct-account-v28,
body.dark .direct-account-v28 {
    background: rgba(255,255,255,0.97) !important;
    border: 1px solid rgba(148,163,184,0.42) !important;
}

html body .direct-account-user-v28,
html body .direct-account-user-v28 *,
html[data-theme="dark"] body .direct-account-user-v28,
html[data-theme="dark"] body .direct-account-user-v28 *,
html.dark body .direct-account-user-v28,
html.dark body .direct-account-user-v28 *,
body.dark .direct-account-user-v28,
body.dark .direct-account-user-v28 * {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

.direct-account-icon-v28 {
    background: #e5e7eb !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    opacity: 1 !important;
}

/* Mobile dark KPI/card readability */
@media (max-width: 900px) {
    html[data-theme="dark"] body .stat-card,
    html[data-theme="dark"] body .dashboard-card,
    html[data-theme="dark"] body .module-card,
    html[data-theme="dark"] body .card,
    html[data-theme="dark"] body .panel,
    html[data-theme="dark"] body .box,
    html.dark body .stat-card,
    html.dark body .dashboard-card,
    html.dark body .module-card,
    html.dark body .card,
    html.dark body .panel,
    html.dark body .box,
    body.dark .stat-card,
    body.dark .dashboard-card,
    body.dark .module-card,
    body.dark .card,
    body.dark .panel,
    body.dark .box {
        background: rgba(15,23,42,0.96) !important;
        color: #f8fafc !important;
        border-color: rgba(148,163,184,0.22) !important;
        box-shadow: 0 12px 32px rgba(0,0,0,0.28) !important;
    }

    html[data-theme="dark"] body .stat-card *,
    html[data-theme="dark"] body .dashboard-card *,
    html[data-theme="dark"] body .module-card *,
    html[data-theme="dark"] body .card *,
    html[data-theme="dark"] body .panel *,
    html[data-theme="dark"] body .box *,
    html.dark body .stat-card *,
    html.dark body .dashboard-card *,
    html.dark body .module-card *,
    html.dark body .card *,
    html.dark body .panel *,
    html.dark body .box *,
    body.dark .stat-card *,
    body.dark .dashboard-card *,
    body.dark .module-card *,
    body.dark .card *,
    body.dark .panel *,
    body.dark .box * {
        color: #f8fafc !important;
        -webkit-text-fill-color: #f8fafc !important;
        opacity: 1 !important;
        text-shadow: none !important;
    }

    /* KPI numbers */
    html[data-theme="dark"] body .stat-card h1,
    html[data-theme="dark"] body .stat-card h2,
    html[data-theme="dark"] body .stat-card h3,
    html[data-theme="dark"] body .stat-card .value,
    html[data-theme="dark"] body .stat-card .amount,
    html.dark body .stat-card h1,
    html.dark body .stat-card h2,
    html.dark body .stat-card h3,
    html.dark body .stat-card .value,
    html.dark body .stat-card .amount,
    body.dark .stat-card h1,
    body.dark .stat-card h2,
    body.dark .stat-card h3,
    body.dark .stat-card .value,
    body.dark .stat-card .amount {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        opacity: 1 !important;
        font-weight: 900 !important;
    }
}


/* =========================================================
   JOM SILAT - ACCOUNT USER SVG ICON VISIBLE FIX
   ========================================================= */

.direct-account-user-v28 {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
}

.direct-account-icon-v28 {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    border-radius: 999px !important;
    background: #e5e7eb !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    opacity: 1 !important;
}

.direct-account-icon-v28 svg {
    display: block !important;
    width: 15px !important;
    height: 15px !important;
    stroke: #111827 !important;
    color: #111827 !important;
    opacity: 1 !important;
}

.direct-account-name-v28 {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    opacity: 1 !important;
    font-weight: 900 !important;
}