/* V213 - Collapsible sidebar polish
   UI-only. Does not change routes, permissions, data or workflow. */

.layout{
  transition:all .18s ease;
}

.sidebar{
  transition:width .18s ease,padding .18s ease;
  overflow-x:hidden!important;
}

/* Expanded state: brand and collapse icon stay on one row. */
.sidebar .brand{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  margin:4px 4px 18px!important;
}

.brand-main{
  display:inline-flex!important;
  align-items:center!important;
  gap:10px!important;
  min-width:0!important;
}

.brand-text{
  white-space:nowrap!important;
}

.sidebar-collapse-toggle{
  width:36px!important;
  height:36px!important;
  min-width:36px!important;
  min-height:36px!important;
  padding:0!important;
  margin:0!important;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  background:rgba(255,255,255,.08);
  color:#e5e7eb;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  cursor:pointer;
  font-family:inherit;
  font-size:0!important;
  font-weight:800;
  line-height:1!important;
  flex:0 0 36px!important;
  transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease;
}

.sidebar-collapse-toggle:hover{
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.2);
  color:#ffffff;
}

.sidebar-collapse-toggle:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(96,165,250,.26);
}

.sidebar-collapse-toggle .collapse-icon{
  display:block!important;
  font-size:18px!important;
  line-height:1!important;
  transform:translateY(-1px);
}

body.sidebar-collapsed .sidebar{
  width:72px!important;
  padding:14px 10px!important;
}

body.sidebar-collapsed .main{
  max-width:calc(100vw - 72px)!important;
}

/* Collapsed: logo and toggle become stacked icons, both centered. */
body.sidebar-collapsed .brand{
  width:44px!important;
  margin:0 auto 14px!important;
  padding:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:8px!important;
}

body.sidebar-collapsed .brand-main{
  width:44px!important;
  height:44px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:0!important;
}

body.sidebar-collapsed .brand-text{
  display:none!important;
}

body.sidebar-collapsed .brand-icon{
  width:42px!important;
  height:42px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0!important;
  margin:0!important;
  border-radius:14px!important;
}

body.sidebar-collapsed .sidebar-collapse-toggle{
  width:42px!important;
  height:34px!important;
  min-width:42px!important;
  min-height:34px!important;
  flex:0 0 34px!important;
  padding:0!important;
  margin:0 auto!important;
  border-radius:12px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}

body.sidebar-collapsed .sidebar-collapse-toggle .collapse-icon{
  font-size:18px!important;
  line-height:1!important;
  transform:translateY(-1px);
}

body.sidebar-collapsed .nav{
  align-items:center!important;
  gap:6px!important;
}

body.sidebar-collapsed .nav-label{
  display:none!important;
}

/* V213: show collapsed nav icons using JS-provided data-icon.
   Do not rely on ::first-letter because emoji first-letter rendering is inconsistent. */
body.sidebar-collapsed .nav a{
  width:44px!important;
  height:44px!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  color:transparent!important;
  letter-spacing:0!important;
  border-radius:14px!important;
  font-size:0!important;
  line-height:1!important;
  position:relative!important;
}

body.sidebar-collapsed .nav a::before{
  content:attr(data-icon);
  width:44px!important;
  height:44px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  color:#e5e7eb!important;
  font-size:17px!important;
  line-height:1!important;
  text-align:center!important;
}

body.sidebar-collapsed .nav a:hover::before{
  color:#ffffff!important;
}

body.sidebar-collapsed .nav a .pill{
  display:none!important;
}

body.sidebar-collapsed .sidebar-user-bottom{
  left:0!important;
  right:0!important;
  width:72px!important;
  padding:0!important;
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}

body.sidebar-collapsed .sidebar-user-trigger{
  width:44px!important;
  height:44px!important;
  min-width:44px!important;
  min-height:44px!important;
  padding:0!important;
  margin:0 auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:14px!important;
  position:relative!important;
}

body.sidebar-collapsed .sidebar-user-text,
body.sidebar-collapsed .sidebar-user-account,
body.sidebar-collapsed .sidebar-user-menu{
  display:none!important;
}

body.sidebar-collapsed .small-avatar{
  margin:0 auto!important;
  width:36px!important;
  height:36px!important;
  min-width:36px!important;
  min-height:36px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}

body.sidebar-collapsed .sidebar-user-trigger[data-tooltip]:hover::after,
body.sidebar-collapsed .sidebar-user-trigger[data-tooltip]:focus-visible::after{
  content:attr(data-tooltip);
  position:absolute;
  left:calc(100% + 12px);
  bottom:4px;
  z-index:2000;
  max-width:220px;
  padding:8px 10px;
  border-radius:10px;
  background:#0f172a;
  color:#ffffff;
  font-size:12px;
  font-weight:700;
  line-height:1.3;
  white-space:nowrap;
  box-shadow:0 14px 35px rgba(15,23,42,.22);
}

body.sidebar-collapsed .sidebar-user-trigger[data-tooltip]:hover::before,
body.sidebar-collapsed .sidebar-user-trigger[data-tooltip]:focus-visible::before{
  content:"";
  position:absolute;
  left:calc(100% + 6px);
  bottom:18px;
  z-index:2001;
  border-width:6px 6px 6px 0;
  border-style:solid;
  border-color:transparent #0f172a transparent transparent;
}

@media(max-width:760px){
  .sidebar-collapse-toggle{
    display:none!important;
  }
  body.sidebar-collapsed .sidebar{
    width:100%!important;
    padding:18px 16px!important;
  }
  body.sidebar-collapsed .main{
    max-width:none!important;
  }
  body.sidebar-collapsed .brand{
    width:auto!important;
    height:auto!important;
    margin:4px 6px 18px!important;
    flex-direction:row!important;
    justify-content:flex-start!important;
  }
  body.sidebar-collapsed .brand-main{
    width:auto!important;
    height:auto!important;
    justify-content:flex-start!important;
    gap:10px!important;
  }
  body.sidebar-collapsed .brand-text,
  body.sidebar-collapsed .nav-label,
  body.sidebar-collapsed .sidebar-user-text,
  body.sidebar-collapsed .sidebar-user-account{
    display:initial!important;
  }
  body.sidebar-collapsed .nav a{
    width:auto!important;
    height:auto!important;
    padding:10px 12px!important;
    color:#cbd5e1!important;
    font-size:inherit!important;
    justify-content:space-between!important;
  }
  body.sidebar-collapsed .nav a::before{
    display:none!important;
    content:none!important;
  }
  body.sidebar-collapsed .sidebar-user-bottom{
    width:auto!important;
    left:auto!important;
    right:auto!important;
    display:block!important;
  }
  body.sidebar-collapsed .sidebar-user-trigger{
    width:auto!important;
    height:auto!important;
    padding:8px!important;
  }
  body.sidebar-collapsed .sidebar-user-trigger::before,
  body.sidebar-collapsed .sidebar-user-trigger::after{
    display:none!important;
  }
}