/* ============================================================================
   jo-shell.css — App-shell L1: sidebar PUTIH → NAVY SLAB (parity login).
   CSS-ONLY, di-load sesudah jo-tokens.css. Tidak sentuh markup/logika. Override
   .jo-sidebar + sub-elemen agar teks TERANG di navy (anti kontras gelap-di-gelap).
   REVERSIBEL: hapus 1 <link>. Fase 1b redesign web 2026-06-07.
   ========================================================================== */

/* ---- Slab navy + grid blueprint halus ---- */
.jo-sidebar {
  background: linear-gradient(178deg, var(--jo-navy-deep, #14306E), var(--jo-navy-darker, #0A1A3F)) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.jo-sidebar::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: linear-gradient(rgba(120, 165, 255, 0.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(120, 165, 255, 0.05) 1px, transparent 1px);
  background-size: 38px 38px;
  -webkit-mask-image: radial-gradient(circle at 26% 9%, #000, transparent 76%);
          mask-image: radial-gradient(circle at 26% 9%, #000, transparent 76%);
}
.jo-sidebar > * { position: relative; z-index: 1; }

/* ---- Header + logo (transparan biar slab navy nyambung — bukan blok terpisah) ---- */
.jo-sidebar-header { background: transparent !important; border-bottom: 0 !important; height: auto !important; padding: 15px 14px 12px !important; }
.jo-sidebar-logo .brand { color: #fff !important; }
.jo-sidebar-logo img { filter: none; }
.jo-sidebar-collapse-btn {
  color: #b3c0dc !important; border-color: rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.04) !important;
}
.jo-sidebar-collapse-btn:hover { background: rgba(255, 255, 255, 0.1) !important; color: #fff !important; }

/* ---- Context (company / branch switcher) ---- */
.jo-sidebar-context { background: rgba(255, 255, 255, 0.04) !important; border-color: rgba(255, 255, 255, 0.1) !important; }
.jo-sidebar-context[data-can-switch="1"]:hover { background: rgba(255, 255, 255, 0.08) !important; }
.jo-ctx-icon { color: var(--jo-gold, #FBBF24) !important; }
.jo-ctx-company { color: #fff !important; }
.jo-ctx-branch { color: #aebbd8 !important; }
.jo-ctx-branch-empty { color: #8298c0 !important; }
.jo-ctx-switch { color: #b3c0dc !important; }
.jo-ctx-switch:hover { color: #fff !important; }

/* ---- Mode badge ---- */
.jo-mode-badge { background: rgba(255, 255, 255, 0.05) !important; }
.jo-mode-badge-label { color: #cdd9f0 !important; }
.jo-mode-badge-exit { color: #aebbd8 !important; }

/* ---- Menu: section label (kalau ada) + item ---- */
.jo-sidebar-body .menu-section .menu-section-title,
.jo-sidebar-body .menu-section-title { color: #7589ad !important; }

.jo-sidebar-body > .menu > .menu-item > .menu-link { color: #c7d4ee !important; }
.jo-sidebar-body .jo-menu-icon { color: #9fb1d6 !important; }
.jo-sidebar-body > .menu > .menu-item > .menu-link:hover {
  background: rgba(255, 255, 255, 0.06) !important; color: #eef3ff !important;
}
.jo-sidebar-body > .menu > .menu-item > .menu-link:hover .jo-menu-icon { color: #cfe0ff !important; }

/* aktif (here / show) — putih + bg navy-mid + TICK GOLD kiri */
.jo-sidebar-body > .menu > .menu-item.show > .menu-link,
.jo-sidebar-body > .menu > .menu-item.here > .menu-link {
  background: rgba(59, 130, 246, 0.18) !important; color: #fff !important;
}
.jo-sidebar-body > .menu > .menu-item.show > .menu-link .jo-menu-icon,
.jo-sidebar-body > .menu > .menu-item.here > .menu-link .jo-menu-icon { color: #9dc0ff !important; }
.jo-sidebar-body > .menu > .menu-item.here > .menu-link::before,
.jo-sidebar-body > .menu > .menu-item.show > .menu-link::before {
  content: ''; position: absolute; left: -2px; top: 8px; bottom: 8px; width: 3px;
  border-radius: 0 3px 3px 0; background: linear-gradient(var(--jo-gold, #FBBF24), var(--jo-gold-deep, #F59E0B));
}
.menu-arrow { color: #7589ad !important; }

/* ---- Sub-menu (anak accordion) ---- */
.jo-sidebar-body .menu-sub .menu-link { color: #8ea3c8 !important; }
.jo-sidebar-body .menu-sub .menu-link:hover { color: #dde6f7 !important; background: rgba(255,255,255,0.05) !important; }
.jo-sidebar-body .menu-sub .menu-item.here > .menu-link,
.jo-sidebar-body .menu-sub .menu-link.active { color: #fff !important; font-weight: 700 !important; }
.jo-sidebar-body .menu-sub .menu-bullet .bullet { background: #5c719c !important; }
.jo-sidebar-body .menu-sub .menu-item.here .menu-bullet .bullet { background: var(--jo-gold, #FBBF24) !important; }

/* ---- Footer toggle (kontrol collapse) ---- */
.jo-sidebar-footer-toggle {
  color: #b3c0dc !important; border-color: rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.04) !important;
}
.jo-sidebar-footer-toggle:hover { background: rgba(255, 255, 255, 0.1) !important; color: #fff !important; }
.jo-sidebar-status-label { color: #8298c0 !important; }

/* ---- Scrollbar ---- */
.jo-sidebar-body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1) !important; }
.jo-sidebar-body:hover::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18) !important; }

/* ============================================================================
   TOPBAR GLOBAL L1 (Fase 2) — konsisten semua halaman. Putih + navy + gold.
   ========================================================================== */
.jo-topbar{position:fixed;top:0;left:0;right:0;z-index:250;display:flex;align-items:center;gap:12px;height:56px;padding:0 16px;background:#fff;border-bottom:1px solid var(--jo-border,#E2E8F0);box-shadow:0 1px 3px rgba(15,23,42,.06)}
.jo-tb-left{display:flex;align-items:center;gap:10px;min-width:0}
.jo-tb-burger{width:36px;height:36px;border-radius:9px;border:1px solid var(--jo-border);background:var(--jo-bg,#F8FAFD);color:var(--jo-text-muted,#475569);display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
.jo-tb-burger svg{width:18px;height:18px}
.jo-tb-burger:hover{background:#EEF3FF;color:var(--jo-primary,#1E40AF)}
.jo-tb-titlewrap{min-width:0}
.jo-tb-eyebrow{font-size:9px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--jo-primary-bright,#3B82F6);display:flex;align-items:center;gap:6px}
.jo-tb-eyebrow::before{content:'';width:14px;height:1px;background:var(--jo-gold-deep,#F59E0B)}
.jo-tb-title{font-size:17px;font-weight:800;letter-spacing:-.02em;color:var(--jo-text,#0F172A);margin:1px 0 0;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jo-tb-right{display:flex;align-items:center;gap:9px}
.jo-tb-clocks{display:flex;gap:5px}
.jo-tb-clk{text-align:center;padding:4px 9px;border-radius:9px;background:var(--jo-bg,#F8FAFD);border:1px solid var(--jo-border);min-width:56px}
.jo-tb-clk .z{display:block;font-size:7.5px;font-weight:800;letter-spacing:.08em;color:var(--jo-gold-deep,#F59E0B);text-transform:uppercase}
.jo-tb-clk .t{display:block;font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;color:var(--jo-navy-deep,#14306E)}
.jo-tb-icon{width:36px;height:36px;border-radius:9px;border:1px solid var(--jo-border);background:var(--jo-bg);color:var(--jo-text-muted,#475569);display:flex;align-items:center;justify-content:center;cursor:pointer}
.jo-tb-icon svg{width:18px;height:18px}
.jo-tb-icon:hover{background:#EEF3FF;color:var(--jo-primary,#1E40AF)}
.jo-tb-user{display:flex;align-items:center;gap:9px;padding:4px 10px 4px 5px;border-radius:11px;border:1px solid var(--jo-border);text-decoration:none;background:#fff}
.jo-tb-user:hover{background:var(--jo-bg)}
.jo-tb-av{width:30px;height:30px;border-radius:8px;background:var(--jo-navy,#1E40AF);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;flex:none;text-transform:uppercase}
.jo-tb-utext{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.jo-tb-utext .nm{font-size:12.5px;font-weight:700;color:var(--jo-text,#0F172A)}
.jo-tb-utext .rl{font-size:10px;color:var(--jo-text-subtle,#94A3B8)}
@media (max-width:1100px){.jo-tb-clocks .jo-tb-clk:nth-child(n+2){display:none}}
@media (max-width:820px){.jo-tb-clocks{display:none}.jo-tb-utext{display:none}}

/* ---- Kontrol Sidebar 3-mode (footer popover) ---- */
.jo-sbctl-wrap{position:relative;flex:1;min-width:0}
.jo-sbctl-btn{width:100%;display:flex;align-items:center;gap:9px;justify-content:flex-start}
.jo-sbctl-curlabel{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;text-align:left;color:#c7d4ee}
.jo-sbctl-cv{margin-left:auto;width:14px;height:14px;opacity:.55;flex:none}
body.jo-sidebar-collapsed .jo-sbctl-curlabel,body.jo-sidebar-collapsed .jo-sbctl-cv{display:none}
body.jo-sidebar-collapsed .jo-sbctl-btn{justify-content:center}
.jo-sbctl-pop{position:fixed;bottom:56px;left:12px;width:232px;background:#fff;border:1px solid var(--jo-border,#E2E8F0);border-radius:12px;box-shadow:0 -16px 44px -12px rgba(10,26,63,.55),0 0 0 1px rgba(0,0,0,.05);padding:6px;display:none;z-index:1100}
.jo-sbctl-pop.show{display:block}
.jo-sbctl-h{font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--jo-text-subtle,#94A3B8);padding:8px 10px 5px}
.jo-sbctl-opt{width:100%;display:flex;align-items:center;gap:9px;padding:9px 10px;border:none;background:none;border-radius:8px;font-size:13px;font-weight:600;color:var(--jo-text,#0F172A);cursor:pointer;text-align:left;white-space:nowrap}
.jo-sbctl-opt:hover{background:var(--jo-bg,#F8FAFD)}
.jo-sbctl-opt .lucide{width:15px;height:15px;color:var(--jo-text-muted,#475569);flex:none}
.jo-sbctl-rd{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--jo-border,#CBD5E1);flex:none;display:flex;align-items:center;justify-content:center}
.jo-sbctl-opt.sel .jo-sbctl-rd{border-color:var(--jo-primary,#1E40AF)}
.jo-sbctl-opt.sel .jo-sbctl-rd::after{content:'';width:7px;height:7px;border-radius:50%;background:var(--jo-primary,#1E40AF)}
/* hover-mode: transisi mulus saat expand/ciut */
body.jo-sb-hovermode .jo-sidebar{transition:width .18s ease}

/* ---- Brand di header sidebar (logo gold-chip + nama) — match mockup L1 ---- */
.jo-sidebar-logo{display:flex;align-items:center;gap:11px;text-decoration:none;min-width:0}
.jo-logo-chip{width:40px;height:40px;border-radius:11px;background:rgba(255,255,255,.06);border:1.5px solid rgba(251,191,36,.55);display:flex;align-items:center;justify-content:center;flex:none;padding:5px}
.jo-logo-chip img{width:100%!important;height:100%!important;object-fit:contain}
.jo-sidebar-logo .brand{display:flex;flex-direction:column;line-height:1.12;min-width:0}
.jo-sidebar-logo .brand-name{font-size:15px;font-weight:800;color:#fff!important;letter-spacing:-.01em}
.jo-sidebar-logo .brand-sub{font-size:9px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--jo-gold,#FBBF24)}
body.jo-sidebar-collapsed .jo-sidebar-logo .brand{display:none}

/* ---- Section header menu (Operasi / Manajemen / Sistem & Lainnya) ---- */
.jo-sidebar-body .jo-nav-sec{margin:15px 0 3px!important;padding:0 12px!important;pointer-events:none;background:none!important}
.jo-sidebar-body .jo-nav-sec .menu-section-title{font-size:9.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:#6b80a8!important}
body.jo-sidebar-collapsed .jo-sidebar-body .jo-nav-sec{display:none}

/* ============================================================================
   FIX pilih cabang (switcher) — backdrop DIM (dulu transparent → menu nembus)
   ========================================================================== */
.jo-switcher-backdrop{background:rgba(10,26,63,.50)!important;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
/* geser popover ke bawah dikit (kompensasi topbar 60px) + sedikit lebih lebar biar nutup menu bersih */
.jo-switcher-popover{top:60px!important;left:16px!important;width:320px!important;border-radius:12px!important;box-shadow:0 24px 60px -12px rgba(10,26,63,.55),0 0 0 1px rgba(0,0,0,.05)!important}

/* ============================================================================
   TOPBAR v2 — match mockup: breadcrumb + CABANG badge + search inline + avatar
   ========================================================================== */
@media(min-width:993px){.jo-tb-burger{display:none}}
.jo-tb-crumb{display:flex;align-items:center;gap:9px;min-width:0}
.jo-tb-crumb-ctx{font-size:12.5px;font-weight:600;color:var(--jo-text-muted,#475569);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
.jo-tb-crumb-sep{width:15px;height:15px;color:var(--jo-text-subtle,#94A3B8);flex:none}
.jo-tb-crumb-page{font-size:13px;font-weight:800;color:var(--jo-text,#0F172A);letter-spacing:-.01em;white-space:nowrap}
.jo-tb-badge{font-size:9px;font-weight:800;letter-spacing:.1em;color:var(--jo-gold-deep,#B45309);background:var(--jo-gold-soft,#FFFBEB);border:1px solid rgba(245,158,11,.4);padding:3px 8px;border-radius:999px;white-space:nowrap}
.jo-tb-search{flex:none;width:230px;margin-left:auto;display:flex;align-items:center;gap:9px;height:36px;padding:0 12px;border-radius:10px;border:1px solid var(--jo-border,#E2E8F0);background:var(--jo-bg,#F8FAFD);color:var(--jo-text-subtle,#94A3B8);cursor:text}
.jo-tb-search:hover{border-color:var(--jo-primary,#1E40AF);background:#fff}
.jo-tb-search svg{width:16px;height:16px;flex:none}
.jo-tb-search-ph{flex:1;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}
.jo-tb-kbd{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;color:var(--jo-text-muted,#475569);background:#fff;border:1px solid var(--jo-border);border-radius:6px;padding:2px 6px;flex:none}
.jo-tb-icon{position:relative}
.jo-tb-count{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--jo-danger,#DC2626);border:1.5px solid #fff;color:#fff;font-size:10px;font-weight:800;line-height:14px;text-align:center}
.jo-tb-chev{width:15px;height:15px;color:var(--jo-text-subtle,#94A3B8);flex:none}
@media(max-width:1200px){.jo-tb-search{max-width:240px}}
@media(max-width:920px){.jo-tb-search{display:none}.jo-tb-crumb-ctx,.jo-tb-crumb-sep{display:none}}

/* ============================================================================
   Pilih cabang PINDAH ke TOPBAR (match mockup) — context-card sidebar disembunyikan
   (tetap di DOM utk trigger JS .click()). + tombol ganti-cabang di breadcrumb.
   ========================================================================== */
.jo-mode-badge, .jo-sidebar-context{display:none!important}
.jo-tb-ctxbtn{display:flex;align-items:center;gap:7px;padding:5px 9px;border:1px solid var(--jo-border,#E5EAF2);border-radius:9px;background:var(--jo-bg,#F4F7FC);cursor:pointer;min-width:0}
.jo-tb-ctxbtn:hover{background:#EEF3FF;border-color:var(--jo-primary,#1E40AF)}
.jo-tb-ctxicon{width:15px;height:15px;color:var(--jo-primary,#1E40AF);flex:none}
.jo-tb-ctxbtn .jo-tb-crumb-ctx{margin:0}
.jo-tb-ctxcv{width:13px;height:13px;color:var(--jo-text-subtle,#94A3B8);flex:none}
@media(max-width:920px){.jo-tb-ctxbtn .jo-tb-crumb-ctx{display:none}}

/* Picker "Pilih Cabang" (belum pilih cabang) = CTA navy menonjol */
.jo-tb-ctxbtn.is-pick{background:var(--jo-primary,#1E40AF);border-color:var(--jo-primary,#1E40AF)}
.jo-tb-ctxbtn.is-pick:hover{background:var(--jo-primary-strong,#14306E)}
.jo-tb-ctxbtn.is-pick .jo-tb-crumb-ctx{color:#fff;font-weight:700}
.jo-tb-ctxbtn.is-pick .jo-tb-ctxicon,.jo-tb-ctxbtn.is-pick .jo-tb-ctxcv{color:#fff}

/* Badge "ALARM AKTIF" (status listener sirine) — pindah ke KANAN-bawah, jauh dari sidebar */
#jo-alarm-status-badge{left:auto!important;right:18px!important;bottom:18px!important;z-index:140!important}

/* Hindari tabrakan kontrol sidebar: BUANG tombol collapse ◫ di header (desktop) —
   sisakan SATU kontrol = 3-mode di bawah. (Mobile tetap ada utk tutup drawer.) */
@media(min-width:993px){ .jo-sidebar-collapse-btn{display:none!important} }

/* Kontrol 3-mode = SATU-satunya kontrol → WAJIB tampil saat sidebar LEBAR juga
   (override site.css:590 yg hide footer-toggle saat expanded — dulu andalkan ◫ header) */
body:not(.jo-sidebar-collapsed) .jo-sbctl-wrap .jo-sbctl-btn{display:flex!important;width:100%;height:auto;padding:8px 12px;margin-top:6px}
body.jo-sidebar-collapsed .jo-sbctl-wrap .jo-sbctl-btn{display:flex!important;justify-content:center}

/* ============================================================================
   Brighten + BROADEN menu (fix item/ikon PUDAR — terutama company-level yg
   strukturnya beda: <a.menu-link> langsung, kelewat selector direct-child).
   ========================================================================== */
.jo-sidebar-body .menu-link{color:#d6e0f5!important}
.jo-sidebar-body .jo-menu-icon{color:#bccbe8!important}
.jo-sidebar-body .menu-link:hover{color:#fff!important}
.jo-sidebar-body .menu-link:hover .jo-menu-icon{color:#dbe7ff!important}
.jo-sidebar-body .menu-item.here>.menu-link,.jo-sidebar-body .menu-item.show>.menu-link{color:#fff!important;background:rgba(59,130,246,.18)!important}
.jo-sidebar-body .menu-item.here>.menu-link .jo-menu-icon,.jo-sidebar-body .menu-item.show>.menu-link .jo-menu-icon{color:#9dc0ff!important}
/* sub-menu sedikit lebih redup (tetap kebaca) */
.jo-sidebar-body .menu-sub .menu-link{color:#a6b8da!important}
.jo-sidebar-body .menu-sub .menu-link:hover{color:#fff!important}

/* ============================================================================
   RAIL (Selalu ciut) — jangan klip flyout submenu + logo pas
   ========================================================================== */
/* Popout = position:fixed (lolos overflow sendiri). PAKSA visible saat .show di rail. */
body.jo-sidebar-collapsed .jo-sidebar-body>.menu>.menu-item.show>.menu-sub{
  position:fixed!important;display:block!important;opacity:1!important;visibility:visible!important;
  pointer-events:auto!important;transform:none!important;z-index:2000!important;width:300px!important;
  background:#fff!important;border:1px solid var(--jo-border,#E5EAF2)!important;border-radius:12px!important;
  box-shadow:0 20px 54px -12px rgba(10,26,63,.5),0 0 0 1px rgba(0,0,0,.04)!important;padding:6px!important}
/* Logo: pas di rail (chip lebih kecil + header center) */
body.jo-sidebar-collapsed .jo-sidebar-header{padding:13px 0!important;justify-content:center!important}
body.jo-sidebar-collapsed .jo-sidebar-logo{justify-content:center}
body.jo-sidebar-collapsed .jo-logo-chip{width:36px;height:36px;padding:4px}

/* ============================================================================
   TOPBAR FULL-WIDTH paling atas + LOGO + integrasi floating → topbar (Fase 2)
   ========================================================================== */
/* Logo di topbar (kiri, selebar sidebar) */
.jo-tb-logo{display:flex;align-items:center;gap:10px;text-decoration:none;width:240px;flex:none;padding-right:8px}
.jo-tb-logo .jo-logo-chip{width:38px;height:38px;border-radius:10px;background:linear-gradient(145deg,#1E40AF,#14306E);border:1.5px solid rgba(251,191,36,.5);display:flex;align-items:center;justify-content:center;padding:5px;flex:none}
.jo-tb-logo .jo-logo-chip img{width:100%;height:100%;object-fit:contain}
.jo-tb-brand{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.jo-tb-brand .bn{font-size:14px;font-weight:800;color:var(--jo-navy-deep,#14306E);letter-spacing:-.01em}
.jo-tb-brand .bs{font-size:8.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--jo-gold-deep,#F59E0B)}

/* Sidebar TURUN di bawah topbar */
.jo-sidebar{top:56px!important;height:calc(100vh - 56px)!important}
.jo-sidebar-header{display:none!important}   /* logo sudah di topbar */
/* Konten geser turun (topbar fixed keluar flow) */
.app-main,#kt_app_main{padding-top:56px}
.jo-sidebar-backdrop{top:56px!important}

/* Floating actions DIBUANG (fungsinya pindah ke topbar; elemen tetap di DOM utk popover) */
.jo-float-actions{display:none!important}

@media(max-width:992px){
  .jo-tb-logo .jo-tb-brand{display:none}
  .jo-tb-logo{width:auto}
}

/* Tombol aksi topbar COLORFUL (biar keliatan, bukan abu semua) */
.jo-tbc-blue{background:#EFF5FF!important;border-color:#BBD3FF!important;color:#2563EB!important}
.jo-tbc-blue:hover{background:#DBE8FF!important;color:#1E40AF!important}
.jo-tbc-green{background:#ECFDF3!important;border-color:#A7E8C4!important;color:#059669!important}
.jo-tbc-green:hover{background:#D6F8E4!important;color:#047857!important}
.jo-tbc-amber{background:#FFF7E6!important;border-color:#FBD894!important;color:#D97706!important}
.jo-tbc-amber:hover{background:#FFEFCC!important;color:#B45309!important}
.jo-tbc-violet{background:#F3F0FF!important;border-color:#D4C7FB!important;color:#7C3AED!important}
.jo-tbc-violet:hover{background:#E9E2FF!important;color:#6D28D9!important}

/* Avatar dropdown (Profil / Ganti Password / Keluar) */
.jo-tb-userwrap{position:relative}
.jo-tb-user{cursor:pointer}
.jo-tb-usermenu{position:absolute;top:calc(100% + 8px);right:0;width:230px;background:#fff;border:1px solid var(--jo-border,#E5EAF2);border-radius:12px;box-shadow:0 20px 54px -12px rgba(10,26,63,.4),0 0 0 1px rgba(0,0,0,.04);padding:6px;display:none;z-index:3000}
.jo-tb-usermenu.show{display:block}
.jo-tb-um-head{display:flex;align-items:center;gap:10px;padding:8px 10px 10px;border-bottom:1px solid var(--jo-border,#E5EAF2);margin-bottom:6px}
.jo-tb-av.lg{width:38px;height:38px;border-radius:10px;font-size:14px}
.jo-tb-um-id{display:flex;flex-direction:column;min-width:0}
.jo-tb-um-id .nm{font-size:13px;font-weight:800;color:var(--jo-text,#0F172A);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jo-tb-um-id .rl{font-size:10.5px;color:var(--jo-text-subtle,#94A3B8)}
.jo-tb-um-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;font-size:13px;font-weight:600;color:var(--jo-text,#0F172A);text-decoration:none}
.jo-tb-um-item:hover{background:var(--jo-bg,#F4F7FC);color:var(--jo-primary,#1E40AF)}
.jo-tb-um-item .lucide{width:16px;height:16px;color:var(--jo-text-muted,#475569)}
.jo-tb-um-item.danger{color:#DC2626}
.jo-tb-um-item.danger:hover{background:#FEF2F2;color:#B91C1C}
.jo-tb-um-item.danger .lucide{color:#DC2626}
.jo-tb-um-sep{height:1px;background:var(--jo-border,#E5EAF2);margin:5px 0}
.jo-tb-um-head{text-decoration:none;cursor:pointer;border-radius:8px}
.jo-tb-um-head:hover{background:var(--jo-bg,#F4F7FC)}

/* Anti-FOUC submenu flash: sembunyikan flyout desktop sampai JS init (jo-menu-ready).
   Server render grup aktif 'here show' → tanpa ini submenu muncul sekejap sebelum JS nutup. */
@media(min-width:992px){
  body:not(.jo-menu-ready) .jo-sidebar-body .menu-item > .menu-sub{
    opacity:0!important;visibility:hidden!important;pointer-events:none!important;transition:none!important;
  }
}

/* Item menu AKTIF = GOLD (permintaan user). Pakai id #kt_app_header_menu → specificity
   tinggi, MENANG atas semua rule .here/.active lain (yg dulu bikin navy-on-navy invisible). */
#kt_app_header_menu .menu-link.active,
#kt_app_header_menu .menu-item.here > .menu-link,
#kt_app_header_menu .menu-item.show > .menu-link{
  color:#FBBF24!important;background:rgba(251,191,36,.14)!important;font-weight:800!important
}
#kt_app_header_menu .menu-link.active .jo-menu-icon,
#kt_app_header_menu .menu-item.here > .menu-link .jo-menu-icon,
#kt_app_header_menu .menu-item.show > .menu-link .jo-menu-icon{ color:#FBBF24!important }
#kt_app_header_menu .menu-link.active .menu-title,
#kt_app_header_menu .menu-item.here > .menu-link .menu-title{ color:#FBBF24!important }
#kt_app_header_menu .menu-link.active,
#kt_app_header_menu .menu-item.here > .menu-link{ position:relative }
#kt_app_header_menu .menu-link.active::before,
#kt_app_header_menu .menu-item.here > .menu-link::before{
  content:'';position:absolute;left:-2px;top:7px;bottom:7px;width:3px;border-radius:0 3px 3px 0;background:#FBBF24
}


/* ============================================================================
   TOPBAR di HP (<=600px) — 2026-07-14
   Sebelum ini .jo-tb-left punya isi 164px dalam kotak 85px dengan overflow:visible
   → badge "PERUSAHAAN" + judul halaman MELUAP MENIMPA ikon kanan (terlihat sebagai
   teks nyembul di balik tombol). Luber halaman = 0, jadi audit berbasis luber tidak
   menangkapnya. Di sini: kiri boleh menyusut & dipotong rapi, badge disembunyikan.
   ========================================================================== */
@media(max-width:600px){
  .jo-topbar{gap:8px;padding:0 10px}
  .jo-tb-left{flex:1 1 auto;min-width:0;overflow:hidden}
  .jo-tb-crumb{min-width:0;overflow:hidden}
  .jo-tb-crumb-page{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .jo-tb-badge{display:none}
  .jo-tb-ctxbtn{flex:0 1 auto;min-width:0;overflow:hidden}
  .jo-tb-ctxbtn .jo-tb-crumb-ctx{overflow:hidden;text-overflow:ellipsis}
  .jo-tb-right{flex:none;margin-left:auto;gap:6px}
}