/* JustiX PB 0.8.5.2 — compact sidebar regression fix
   Keeps the resizable expanded sidebar while guaranteeing a truly compact rail when collapsed. */
:root{--sidebar-collapsed:78px}

@media (min-width:921px){
  /* The resizable expanded width must NEVER override the compact state. */
  body.jx-sidebar-collapsed .app{
    grid-template-columns:var(--sidebar-collapsed) minmax(0,1fr)!important;
  }
  body.jx-sidebar-collapsed .sidebar{
    width:var(--sidebar-collapsed)!important;
    min-width:var(--sidebar-collapsed)!important;
    max-width:var(--sidebar-collapsed)!important;
    padding:12px 8px 10px!important;
    overflow:hidden!important;
  }
  body.jx-sidebar-collapsed .sidebar-resizer{display:none!important}

  /* Toggle stays available without floating above the logo. */
  body.jx-sidebar-collapsed .sidebar-toggle{
    top:12px!important;right:50%!important;transform:translateX(50%)!important;
    width:36px!important;height:36px!important;border-radius:12px!important;
  }
  body.jx-sidebar-collapsed .sidebar-toggle svg{transform:rotate(180deg)!important}

  /* Compact brand mark. */
  body.jx-sidebar-collapsed .brand{
    width:100%!important;min-height:46px!important;margin:46px 0 8px!important;
    padding:0!important;display:flex!important;justify-content:center!important;align-items:center!important;
  }
  body.jx-sidebar-collapsed .brand img{width:44px!important;height:44px!important;min-width:44px!important}
  body.jx-sidebar-collapsed .brand-copy{display:none!important}

  /* A compact rail must look like a rail, not an expanded panel with hidden text. */
  body.jx-sidebar-collapsed .nav{
    display:grid!important;grid-auto-rows:42px!important;gap:2px!important;
    padding:2px 0 4px!important;margin:0!important;overflow-y:auto!important;overflow-x:visible!important;
    min-height:0!important;scrollbar-width:none!important;
  }
  body.jx-sidebar-collapsed .nav::-webkit-scrollbar{display:none!important}
  body.jx-sidebar-collapsed .nav-label{display:none!important}
  body.jx-sidebar-collapsed .nav-btn{
    width:100%!important;height:42px!important;min-height:42px!important;max-height:42px!important;
    padding:0!important;margin:0!important;border-radius:12px!important;
    display:grid!important;grid-template-columns:1fr!important;place-items:center!important;gap:0!important;
    position:relative!important;overflow:visible!important;
  }
  body.jx-sidebar-collapsed .nav-btn>span:not(.nav-badge){display:none!important}
  body.jx-sidebar-collapsed .nav-btn svg{width:20px!important;height:20px!important;margin:0!important;flex:none!important}
  body.jx-sidebar-collapsed .nav-btn .nav-badge{
    display:grid!important;position:absolute!important;right:0!important;top:0!important;
    min-width:16px!important;height:16px!important;padding:0 3px!important;
    border-radius:999px!important;font-size:7px!important;line-height:1!important;place-items:center!important;
  }

  /* Bottom zone remains compact and anchored. */
  body.jx-sidebar-collapsed .sidebar-bottom{gap:7px!important;margin-top:auto!important}
  body.jx-sidebar-collapsed .xp-card{
    display:block!important;padding:6px 7px!important;min-height:18px!important;border-radius:11px!important;
  }
  body.jx-sidebar-collapsed .xp-card .xp-line,
  body.jx-sidebar-collapsed .xp-card small{display:none!important}
  body.jx-sidebar-collapsed .xp-card .bar{display:block!important;margin:0!important;width:100%!important;height:4px!important}
  body.jx-sidebar-collapsed .account{
    width:100%!important;display:grid!important;grid-template-columns:1fr!important;place-items:center!important;
    padding:4px!important;margin:0!important;gap:0!important;
  }
  body.jx-sidebar-collapsed .account .avatar{width:42px!important;height:42px!important;border-radius:13px!important}
  body.jx-sidebar-collapsed .account-copy,
  body.jx-sidebar-collapsed .account>svg{display:none!important}

  /* Workspace must reclaim the released width immediately. */
  body.jx-sidebar-collapsed .workspace{min-width:0!important;width:auto!important}
}

/* Compact mode is desktop-only. On tablet/mobile the existing drawer owns the sidebar. */
@media (max-width:920px){
  body.jx-sidebar-collapsed .sidebar{width:min(318px,calc(100vw - 44px))!important;min-width:0!important;max-width:none!important}
}