/* ========================================================================== 
   ALPHA DESIGN ERP Cloud v4.8.14 — SIDEBAR NAVIGATION RAIL + GPU MOTION HARDENING
   Presentation-only. Loaded after alpha-layout-modern.css to eliminate legacy
   sidebar overrides that shrink navigation icons, crop the brand when the rail
   is collapsed, or leave a dark compact logo in light mode.
   ========================================================================== */

/* Explicit day/night sidebar surfaces. */
html:not([data-theme="dark"]) .sidebar{
  background:#ffffff!important;
  border-right-color:#dbe6ec!important;
}
html[data-theme="dark"] .sidebar{
  background:#081722!important;
  border-right-color:#26414f!important;
  box-shadow:8px 0 30px rgba(0,0,0,.24)!important;
}

/* Brand header: hamburger and logo are independent layout cells. */
.brand-row{
  height:70px!important;
  min-height:70px!important;
  display:grid!important;
  grid-template-columns:44px minmax(0,1fr)!important;
  grid-template-rows:1fr!important;
  align-items:center!important;
  gap:10px!important;
  padding:7px 8px 11px!important;
  overflow:visible!important;
  box-sizing:border-box!important;
}
.brand-row .desktop-menu{
  grid-column:1!important;
  grid-row:1!important;
  width:44px!important;
  height:44px!important;
  min-width:44px!important;
  min-height:44px!important;
  border-radius:12px!important;
  justify-self:center!important;
  align-self:center!important;
}
.brand-row .desktop-menu .menu-toggle-icon{
  width:23px!important;
  height:23px!important;
  stroke-width:2.15!important;
}
.brand-row .brand-lockup{
  grid-column:2!important;
  grid-row:1!important;
  width:100%!important;
  height:48px!important;
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  overflow:hidden!important;
}
.brand-row .brand-picture{
  width:100%!important;
  height:48px!important;
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  overflow:hidden!important;
}
.brand-row .brand-image{
  width:min(154px,100%)!important;
  max-width:154px!important;
  height:46px!important;
  max-height:46px!important;
  object-fit:contain!important;
  object-position:left center!important;
}
.brand-compact-light,.brand-compact-dark{display:none!important}
html:not([data-theme="dark"]) .brand-image-light{display:block!important}
html:not([data-theme="dark"]) .brand-image-dark{display:none!important}
html[data-theme="dark"] .brand-image-light{display:none!important}
html[data-theme="dark"] .brand-image-dark{display:block!important}

/* Navigation icons: readable at normal density and substantially larger on rail. */
.nav-item .nav-svg{
  width:21px!important;
  height:21px!important;
  flex:0 0 21px!important;
  stroke-width:1.95!important;
}
.nav-item{
  min-height:44px!important;
}

/* Collapsed desktop/tablet rail: no cropped full logo, no overlap. */
.sidebar.collapsed .brand-row{
  height:116px!important;
  min-height:116px!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  grid-template-rows:44px 50px!important;
  justify-items:center!important;
  align-items:center!important;
  gap:8px!important;
  padding:7px 6px!important;
  overflow:visible!important;
}
.sidebar.collapsed .brand-row .desktop-menu{
  grid-column:1!important;
  grid-row:1!important;
  width:44px!important;
  height:44px!important;
}
.sidebar.collapsed .brand-row .brand-lockup{
  grid-column:1!important;
  grid-row:2!important;
  width:50px!important;
  height:50px!important;
  display:grid!important;
  place-items:center!important;
  overflow:visible!important;
}
.sidebar.collapsed .brand-row .brand-picture{
  width:50px!important;
  height:50px!important;
  display:grid!important;
  place-items:center!important;
  overflow:visible!important;
}
.sidebar.collapsed .brand-row .brand-image,
.sidebar.collapsed .brand-row .brand-compact-icon{
  display:none!important;
}
.sidebar.collapsed .brand-row .brand-compact-light,
.sidebar.collapsed .brand-row .brand-compact-dark{
  width:43px!important;
  height:43px!important;
  max-width:43px!important;
  max-height:43px!important;
  object-fit:contain!important;
  object-position:center!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
html:not([data-theme="dark"]) .sidebar.collapsed .brand-compact-light{display:block!important}
html:not([data-theme="dark"]) .sidebar.collapsed .brand-compact-dark{display:none!important}
html[data-theme="dark"] .sidebar.collapsed .brand-compact-light{display:none!important}
html[data-theme="dark"] .sidebar.collapsed .brand-compact-dark{display:block!important}

.sidebar.collapsed .nav{
  padding-top:10px!important;
  overflow-x:hidden!important;
}
.sidebar.collapsed .nav-group{
  padding:6px 0!important;
}
.sidebar.collapsed .nav-group-items{
  width:100%!important;
  display:grid!important;
  justify-items:center!important;
  gap:4px!important;
}
.sidebar.collapsed .nav-item{
  width:54px!important;
  max-width:54px!important;
  min-height:48px!important;
  height:48px!important;
  margin:0 auto!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  border-radius:13px!important;
}
.sidebar.collapsed .nav-item .nav-svg{
  width:25px!important;
  height:25px!important;
  flex:0 0 25px!important;
  stroke-width:2.05!important;
}
/* Thanh chi bao ben trai la dau hieu cho SIDEBAR MO RONG: o do no nam trong khoang lo phia
   trai, canh nhan chu, va khong dung vao gi ca.

   O che do THU GON thi khong con khoang lo do. Muc dang chon la mot vien nen 54px bo goc 13px,
   va thanh chi bao van duoc ve o left:0 — tuc la NGAY TREN goc bo cua chinh vien nen do, cat
   mot khoanh o canh trai. Do tren ban chay that: vien nen x=14..70, thanh chi bao x=14..17.

   O che do thu gon, vien nen DA LA dau hieu dang chon roi. Ve them thanh nua chi lam hong no. */
.sidebar.collapsed .nav-item.active::before{
  display:none!important;
  content:none!important;
}

/* Collapsed footer is a status dot only; prevent text from squeezing the rail. */
.sidebar.collapsed .sidebar-footer{
  min-height:46px!important;
  padding:8px 0!important;
  display:grid!important;
  place-items:center!important;
}
.sidebar.collapsed .sidebar-footer .product-state{
  width:100%!important;
  justify-content:center!important;
}

/* Mobile is an overlay: always show the full, theme-aware logo and normal labels. */
@media(max-width:820px){
  .brand-row,.sidebar.collapsed .brand-row{
    height:72px!important;
    min-height:72px!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:1fr!important;
    padding:8px 12px 10px!important;
    overflow:hidden!important;
  }
  .brand-row .desktop-menu,.sidebar.collapsed .brand-row .desktop-menu{display:none!important}
  .brand-row .brand-lockup,.sidebar.collapsed .brand-row .brand-lockup{
    grid-column:1!important;
    grid-row:1!important;
    width:100%!important;
    height:50px!important;
    display:flex!important;
    overflow:hidden!important;
  }
  .brand-row .brand-picture,.sidebar.collapsed .brand-row .brand-picture{
    width:100%!important;
    height:50px!important;
    display:flex!important;
    justify-content:flex-start!important;
    overflow:hidden!important;
  }
  .brand-row .brand-image,.sidebar.collapsed .brand-row .brand-image{
    width:154px!important;
    max-width:154px!important;
    height:48px!important;
    max-height:48px!important;
    object-fit:contain!important;
  }
  html:not([data-theme="dark"]) .brand-row .brand-image-light,
  html:not([data-theme="dark"]) .sidebar.collapsed .brand-row .brand-image-light{display:block!important}
  html:not([data-theme="dark"]) .brand-row .brand-image-dark,
  html:not([data-theme="dark"]) .sidebar.collapsed .brand-row .brand-image-dark{display:none!important}
  html[data-theme="dark"] .brand-row .brand-image-light,
  html[data-theme="dark"] .sidebar.collapsed .brand-row .brand-image-light{display:none!important}
  html[data-theme="dark"] .brand-row .brand-image-dark,
  html[data-theme="dark"] .sidebar.collapsed .brand-row .brand-image-dark{display:block!important}
  /* Match desktop theme-rule specificity so a remembered collapsed state cannot show two logos. */
  .brand-row .brand-compact-light,.brand-row .brand-compact-dark,
  html .sidebar.collapsed .brand-row .brand-compact-light,html .sidebar.collapsed .brand-row .brand-compact-dark{display:none!important}
  .sidebar.collapsed .nav-item .nav-svg{width:21px!important;height:21px!important;flex-basis:21px!important}
}

@media(prefers-reduced-motion:reduce){
  .sidebar,.nav-item,.brand-row .desktop-menu{transition:none!important}
}


/* ==========================================================================
   v4.8.14 — SIDEBAR COMPOSITOR PERFORMANCE

   Quan trọng: desktop collapse vẫn thay đổi geometry một lần để giữ đúng
   không gian làm việc, nhưng KHÔNG animate width/grid-track theo từng frame.
   Mobile open/close và micro-interaction chỉ animate transform/opacity.
   ========================================================================== */
.sidebar{
  transform:translate3d(0,0,0);
  backface-visibility:hidden;
  will-change:transform,opacity;
  transition:
    transform var(--alpha-motion-md,180ms) var(--alpha-motion-ease,cubic-bezier(0.4,0,0.2,1)),
    opacity var(--alpha-motion-sm,120ms) var(--alpha-motion-ease,cubic-bezier(0.4,0,0.2,1));
}

/* Override legacy transition:.16s ease để browser không theo dõi mọi property. */
.nav-item{
  transform:translate3d(0,0,0);
  backface-visibility:hidden;
  transition:
    transform var(--alpha-motion-sm,120ms) var(--alpha-motion-ease,cubic-bezier(0.4,0,0.2,1)),
    opacity var(--alpha-motion-sm,120ms) var(--alpha-motion-ease,cubic-bezier(0.4,0,0.2,1));
}
@media(hover:hover) and (pointer:fine){
  .sidebar:not(.collapsed) .nav-item:hover{
    transform:translate3d(2px,0,0);
  }
  .sidebar:not(.collapsed) .nav-item:active{
    transform:translate3d(1px,0,0) scale(.992);
  }
}

/* Match the base layout: mobile/tablet <=1024px both use an overlay sidebar. */
@media(max-width:1024px){
  .sidebar,.sidebar.collapsed{
    transform:translate3d(-104%,0,0);
    opacity:.985;
  }
  .sidebar.open,.sidebar.collapsed.open{
    transform:translate3d(0,0,0);
    opacity:1;
  }
}

@media(prefers-reduced-motion:reduce){
  .sidebar,.nav-item,.brand-row .desktop-menu{
    transition:none;
  }
  .nav-item,.nav-item:hover,.nav-item:active{
    transform:none;
  }
}
@media(max-width:1024px) and (prefers-reduced-motion:reduce){
  .sidebar,.sidebar.collapsed{transform:translate3d(-104%,0,0);opacity:1}
  .sidebar.open,.sidebar.collapsed.open{transform:translate3d(0,0,0);opacity:1}
}