/* ============================================================
   sidebar-hexrail.css — "Hex Rail" behavior for the sidebar.
   Rel tipis (ikon saja); melebar otomatis saat hover → label muncul
   DAN seluruh konten (main, topbar, running-text) ikut bergeser.
   OVERRIDE geometri + perilaku saja. Tema/warna tetap ikut
   app.css + sidebar-airnav.css (Radar Glass).
   ============================================================ */

:root,.app,.app.sidebar-collapsed{--sidebar-w:76px !important;--rail-open:252px}

/* hover → lebarkan rail lewat --sidebar-w; main/topbar/ticker ikut
   bergeser mulus (mereka sudah punya transition ke --sidebar-w) */
.app:has(.sidebar:hover),
.app.sidebar-collapsed:has(.sidebar:hover){--sidebar-w:var(--rail-open) !important}

.app .sidebar{
  z-index:60;
  width:var(--sidebar-w) !important;flex-basis:var(--sidebar-w) !important;
  padding:22px 12px !important;overflow-x:hidden;
  transition:width .26s cubic-bezier(.2,.8,.2,1),flex-basis .26s cubic-bezier(.2,.8,.2,1),padding .26s !important;
}
.app .sidebar:hover{padding:22px 14px !important}

/* toggle manual tak relevan pada rail hover-otomatis */
.app .sb-toggle{display:none !important}

/* ---- state SEMPIT: ikon-only ---- */
.app .sidebar .nav-tx,
.app .sidebar .nav-label,
.app .sidebar .nav-item .idx,
.app .sidebar .brand-txt,
.app .sidebar .nav-grp-head,
.app .sidebar .data-loader,
.app .sidebar .theme-block,
.app .sidebar .lang-block,
.app .sidebar .sidebar-foot,
.app .sidebar .user-chip .uc-meta,
.app .sidebar .user-chip .uc-out{display:none !important}

.app .sidebar .brand{justify-content:center;padding:4px 0 18px !important}
.app .sidebar .nav-item{justify-content:center;padding:11px 0 !important;gap:0 !important}
.app .sidebar .nav-item .ic{margin:0 !important}
.app .sidebar .user-chip{padding:8px !important;justify-content:center !important;margin:8px 4px 4px !important}
/* semua ikon grup tampil di rail (grup tidak "terlipat") */
.app .sidebar .nav-grp-items{max-height:none !important;opacity:1 !important;gap:3px;margin-bottom:6px}
/* blip radar item aktif di bawah ikon saat sempit */
.app .sidebar .nav-item.active::after{right:auto;left:50%;top:auto;bottom:5px;transform:translateX(-50%)}

/* ---- state MELEBAR (hover): kembalikan tampilan penuh ---- */
.app .sidebar:hover .nav-tx,
.app .sidebar:hover .nav-label,
.app .sidebar:hover .nav-item .idx,
.app .sidebar:hover .brand-txt,
.app .sidebar:hover .nav-grp-head,
.app .sidebar:hover .data-loader,
.app .sidebar:hover .theme-block,
.app .sidebar:hover .lang-block,
.app .sidebar:hover .sidebar-foot,
.app .sidebar:hover .user-chip .uc-meta,
.app .sidebar:hover .user-chip .uc-out{display:revert !important}

.app .sidebar:hover .brand{justify-content:flex-start;padding:6px 8px 18px !important}
.app .sidebar:hover .nav-item{justify-content:flex-start;padding:8px 11px !important;gap:11px !important}
.app .sidebar:hover .user-chip{padding:10px !important;justify-content:flex-start !important;margin:8px 14px 4px !important}
.app .sidebar:hover .nav-item.active::after{right:11px;left:auto;top:50%;bottom:auto;transform:translateY(-50%)}

@media (prefers-reduced-motion:reduce){
  .app .sidebar{transition:none !important}
}
/* mobile: biarkan drawer bawaan app.css yang mengatur */
@media(max-width:820px){
  :root,.app,.app.sidebar-collapsed{--sidebar-w:0px !important}
  .app .sidebar{overflow-x:visible}
}

/* ---- tombol Mode Presentasi: ikut perilaku rail ---- */
.app .sidebar .present-btn{
  width:48px !important;height:44px;flex:0 0 44px;min-height:44px;margin:8px auto 6px !important;padding:0 !important;
  display:flex;align-items:center;justify-content:center;gap:0;
  font-size:0 !important;border-radius:13px;overflow:hidden;white-space:nowrap;
  transition:width .26s cubic-bezier(.2,.8,.2,1),background .15s,color .15s;
}
.app .sidebar .present-btn::before{content:'📺';font-size:17px;line-height:1}
.app .sidebar:hover .present-btn::before{display:none}
.app .sidebar:hover .present-btn{
  width:calc(100% - 28px) !important;flex:0 0 44px;min-height:44px;margin:8px 14px 6px !important;
  padding:0 12px !important;justify-content:flex-start;gap:9px;font-size:12.5px !important;
}