/* FXPulse 0.7.7.0 — true compact sidebar
   Closed state is a real icon rail, not clipped full-menu content. */
:root{
  --fx-side-closed:72px;
  --fx-side-open:252px;
  --fx-side-speed:170ms;
}

.app-shell{
  display:block!important;
  min-height:100vh;
}

/* Desktop / laptop: permanent icon rail, expands on hover.
   Below this width there's no hover, so this whole paradigm moves to the
   off-canvas drawer block further down instead. */
@media(min-width:981px){
  #sidebar.sidebar{
    position:fixed!important;
    left:0!important;
    top:0!important;
    bottom:0!important;
    z-index:1000!important;
    width:var(--fx-side-closed)!important;
    min-width:var(--fx-side-closed)!important;
    max-width:var(--fx-side-closed)!important;
    height:100vh!important;
    flex:none!important;
    overflow:visible!important;
    transform:none!important;
    transition:
      width var(--fx-side-speed) ease,
      min-width var(--fx-side-speed) ease,
      max-width var(--fx-side-speed) ease!important;
  }

  /* Full menu opens only when JS adds fx-open.
     Hovering ordinary navigation icons does NOT create a "curtain". */
  #sidebar.sidebar.fx-open{
    width:var(--fx-side-open)!important;
    min-width:var(--fx-side-open)!important;
    max-width:var(--fx-side-open)!important;
    box-shadow:8px 0 24px rgba(8,15,28,.18);
  }

  .app-shell>.main{
    margin-left:var(--fx-side-closed)!important;
    width:calc(100% - var(--fx-side-closed))!important;
    min-width:0!important;
    max-width:none!important;
    flex:none!important;
    transition:none!important;
  }
}

/* Tablet / phone: no hover, so the sidebar is a full off-canvas drawer,
   opened only by tapping the header's menu button (adds .fx-open),
   never a permanent rail. */
@media(max-width:980px){
  #sidebar.sidebar{
    position:fixed!important;
    left:0!important;
    top:0!important;
    bottom:0!important;
    z-index:1000!important;
    width:min(84vw,300px)!important;
    min-width:0!important;
    max-width:300px!important;
    height:100vh!important;
    flex:none!important;
    overflow:visible!important;
    transform:translateX(-102%)!important;
    transition:transform var(--fx-side-speed) ease!important;
  }

  #sidebar.sidebar.fx-open{
    transform:translateX(0)!important;
    box-shadow:8px 0 24px rgba(8,15,28,.18);
  }

  .app-shell>.main{
    margin-left:0!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    flex:none!important;
  }
}

/* Old group headings and old toggle never render. */
#sidebar .nav-label,
#sidebar .fx-sidebar-toggle{
  display:none!important;
}

/* BRAND
   Closed: square FX logo only.
   Open: full FXPulse title appears.
*/
#sidebar .brand{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:86px!important;
  padding:14px 10px!important;
  overflow:visible!important;
  cursor:pointer;
}

#sidebar .brand-mark{
  width:42px!important;
  min-width:42px!important;
  height:42px!important;
  flex:0 0 42px!important;
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}

/* Important: text is not clipped — it is not rendered in compact state. */
#sidebar:not(.fx-open) .brand>div:last-child{
  display:none!important;
}

#sidebar.fx-open .brand{
  justify-content:flex-start!important;
  gap:12px!important;
  padding-left:15px!important;
  padding-right:14px!important;
}

#sidebar.fx-open .brand>div:last-child{
  display:block!important;
  min-width:150px!important;
}

/* Keep the brand tagline on one line inside the expanded sidebar. */
#sidebar .brand-sub{
  white-space:nowrap;
}

/* NAVIGATION */
#sidebar .nav{
  padding:0 7px!important;
  overflow:visible!important;
}

#sidebar .nav-item{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  min-height:46px!important;
  height:46px!important;
  margin:3px 0!important;
  border-radius:9px;
  white-space:nowrap!important;
  overflow:visible!important;
}

/* Closed = icon only. Label is display:none, not hidden behind overflow. */
#sidebar:not(.fx-open) .nav-item{
  justify-content:center!important;
  gap:0!important;
  padding:0!important;
}

#sidebar .fx-nav-icon{
  width:32px!important;
  min-width:32px!important;
  height:32px!important;
  flex:0 0 32px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
}

#sidebar .fx-nav-icon svg{
  width:22px!important;
  height:22px!important;
  display:block!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.8!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}

#sidebar:not(.fx-open) .fx-nav-label{
  display:none!important;
}


/* Open state = icons + actual labels. */
#sidebar.fx-open .nav-item{
  justify-content:flex-start!important;
  gap:12px!important;
  padding:0 15px!important;
  overflow:hidden!important;
}

#sidebar.fx-open .fx-nav-label{
  display:block!important;
  min-width:0!important;
  max-width:185px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

/* Owner block stays removed completely. */
#sidebar .sidebar-user,
#sidebar .sidebar-user-card,
#sidebar [data-sidebar-user],
#sidebar .user-card{
  display:none!important;
}

/* robot-card sizing/rows follow the grid automatically — only the column
   count itself needs setting per breakpoint (below). Full-width/no-margin
   for .robot-hub is already covered unconditionally by .fx-dashboard's own
   base rule in home-dashboard.css and, for gutters, by layout-grid.css —
   not repeated here to avoid three files disagreeing on the same box. */

@media(max-width:760px){
  :root{
    --fx-side-closed:66px;
    --fx-side-open:232px;
  }
}

/* 0.7.7.1: no tooltips and no hover decoration in compact mode. */
#sidebar:not(.fx-open) .nav-item:hover{
  background:transparent!important;
  box-shadow:none!important;
}
#sidebar:not(.fx-open) .nav-item.active:hover{
  background:inherit!important;
}
#sidebar:not(.fx-open) .nav-item::after{
  display:none!important;
  content:none!important;
}

/* FXPulse 0.7.7.2
   Closed rail: no hover/active pill at all.
   Open menu: original active/hover styling remains available. */
#sidebar:not(.fx-open) .nav-item,
#sidebar:not(.fx-open) .nav-item:hover,
#sidebar:not(.fx-open) .nav-item:focus,
#sidebar:not(.fx-open) .nav-item.active,
#sidebar:not(.fx-open) .nav-item.active:hover,
#sidebar:not(.fx-open) .nav-item[aria-current="page"]{
  background:transparent!important;
  background-color:transparent!important;
  box-shadow:none!important;
  outline:none!important;
  border-color:transparent!important;
}

#sidebar:not(.fx-open) .nav-item::before,
#sidebar:not(.fx-open) .nav-item::after{
  display:none!important;
  content:none!important;
}

/* Keep compact icons visually neutral and centered. */
#sidebar:not(.fx-open) .nav-item .fx-nav-icon{
  background:transparent!important;
  box-shadow:none!important;
  border:0!important;
  border-radius:0!important;
}

/* Dashboard breakout to full content width at desktop sizes is handled by
   layout-grid.css (percentage-based) — a duplicate 100vw-based version used
   to live here, but 100vw includes the scrollbar's own width on
   Windows/Linux, which produced a stray horizontal scrollbar.
   Column count is no longer forced here either: it used to hard-set 3
   columns from 1181px up, which overflowed the viewport around ~1280px
   because each card's symbol-grid needs ~470px minimum. home-dashboard.css
   now uses auto-fit with that same minimum, so the right column count
   falls out of the available width automatically instead of being
   guessed per breakpoint in a second file. */