/* ═══════════════════════════════════════
   UNIFIED SIDEBAR CSS - Based on orders.html
   ═══════════════════════════════════════ */
:root{
  --primary:#7a1832;--primary-light:#a61d44;--primary-dark:#4f1024;
  --accent:#1f9d55;--accent-h:#157347;--gold:#c69214;
  --sidebar-w:252px;
}
.sidebar, #sidebar{
  width:var(--sidebar-w) !important;
  background:var(--primary-dark) !important;
  color:#fff !important;
  position:fixed !important;
  top:0 !important;
  right:0 !important;
  height:100vh !important;
  overflow-y:auto !important;
  z-index:100 !important;
  display:flex !important;
  flex-direction:column !important;
  box-shadow:none !important;
  font-family:'Cairo',sans-serif !important;
  padding:0 !important;
}
.sidebar::-webkit-scrollbar, #sidebar::-webkit-scrollbar{width:3px !important}
.sidebar::-webkit-scrollbar-thumb, #sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15) !important;border-radius:3px !important}

@media(max-width:768px){
  .sidebar, #sidebar{transform:translateX(100%) !important}
  .sidebar.open, #sidebar.open{transform:translateX(0) !important}

}
.sb-brand{padding:.9rem 1rem !important;border-bottom:1px solid rgba(255,255,255,.08) !important;display:flex !important;align-items:center !important;gap:.5rem !important}
.sb-logo{width:34px !important;height:34px !important;background:var(--accent) !important;border-radius:8px !important;display:flex !important;align-items:center !important;justify-content:center !important;font-size:.88rem !important;flex-shrink:0 !important}
.sb-title{color:#fff !important;font-size:.9rem !important;font-weight:800 !important}
.sb-sub{color:rgba(255,255,255,.38) !important;font-size:.63rem !important}
.sb-user{padding:.68rem 1rem !important;border-bottom:1px solid rgba(255,255,255,.08) !important;display:flex !important;align-items:center !important;gap:.48rem !important}
.sb-av{width:32px !important;height:32px !important;border-radius:50% !important;color:#fff !important;display:flex !important;align-items:center !important;justify-content:center !important;font-size:.73rem !important;font-weight:700 !important;flex-shrink:0 !important}
.sb-uname{font-size:.77rem !important;font-weight:700 !important;color:#fff !important;line-height:1.2 !important}
.sb-urole{font-size:.63rem !important;color:rgba(255,255,255,.42) !important}
.sb-nav, #sbNav{padding:.35rem 0 !important;flex:1 1 auto !important}
.sb-sec{color:rgba(255,255,255,.27) !important;font-size:.61rem !important;font-weight:700 !important;padding:.52rem 1rem .18rem !important;letter-spacing:.07em !important;text-transform:uppercase !important;display:block !important;font-family:'Cairo',sans-serif !important}
.sb-link, #sbNav a{display:flex !important;align-items:center !important;gap:.48rem !important;padding:.46rem 1rem !important;color:rgba(255,255,255,.65) !important;font-size:.77rem !important;cursor:pointer !important;transition:.13s !important;border-left:2px solid transparent !important;text-decoration:none !important;font-family:'Cairo',sans-serif !important;background:transparent !important;white-space:nowrap !important;overflow:hidden !important}
.sb-link:hover, #sbNav a:hover{color:#fff !important;background:rgba(255,255,255,.06) !important}
.sb-link.active, #sbNav a.active{color:#fff !important;background:rgba(255,255,255,.1) !important;border-left-color:var(--accent) !important}
.sb-icon, .sb-ic{font-size:1rem !important;width:18px !important;text-align:center !important;flex-shrink:0 !important;line-height:1 !important}
.sb-cnt{font-size:.61rem !important;padding:.09rem .38rem !important;border-radius:50px !important;font-weight:800 !important;flex-shrink:0 !important}
.cg{background:var(--accent) !important;color:#fff !important}
.cr{background:#dc2626 !important;color:#fff !important}
.co{background:var(--gold) !important;color:#fff !important}
.sb-foot{padding:.68rem 1rem !important;border-top:1px solid rgba(255,255,255,.08) !important;flex-shrink:0 !important}
.sb-foot-btn{display:flex !important;align-items:center !important;gap:.48rem !important;padding:.33rem .48rem !important;color:rgba(255,255,255,.46) !important;font-size:.75rem !important;cursor:pointer !important;border-radius:8px !important;transition:.13s !important;background:none !important;border:none !important;width:100% !important;font-family:'Cairo',sans-serif !important}
.sb-foot-btn:hover{color:#fff !important;background:rgba(255,255,255,.06) !important}

/* aliases for older class names */
.sb-t{color:#fff !important;font-size:.9rem !important;font-weight:800 !important;font-family:'Cairo',sans-serif !important}
.sb-t span{color:#fbbf24 !important}
.sb-s{color:rgba(255,255,255,.38) !important;font-size:.63rem !important}
.sb-usr{padding:.68rem 1rem !important;border-bottom:1px solid rgba(255,255,255,.08) !important;display:flex !important;align-items:center !important;gap:.48rem !important}
.sb-un{font-size:.77rem !important;font-weight:700 !important;color:#fff !important;line-height:1.2 !important}
.sb-ur{font-size:.63rem !important;color:rgba(255,255,255,.42) !important}
.sb-lk{display:flex !important;align-items:center !important;gap:.48rem !important;padding:.46rem 1rem !important;color:rgba(255,255,255,.65) !important;font-size:.77rem !important;cursor:pointer !important;transition:.13s !important;border-left:2px solid transparent !important;text-decoration:none !important;background:transparent !important;white-space:nowrap !important;overflow:hidden !important}
.sb-lk:hover{color:#fff !important;background:rgba(255,255,255,.06) !important}
.sb-lk.active{color:#fff !important;background:rgba(255,255,255,.1) !important;border-left-color:#1f9d55 !important}
.sb-ic{font-size:1rem !important;width:18px !important;text-align:center !important;flex-shrink:0 !important}
.sb-fb{display:flex !important;align-items:center !important;gap:.48rem !important;padding:.33rem .48rem !important;color:rgba(255,255,255,.46) !important;font-size:.75rem !important;cursor:pointer !important;border-radius:8px !important;background:none !important;border:none !important;width:100% !important}
.sb-fb:hover{color:#fff !important;background:rgba(255,255,255,.06) !important}

.app{
  width:100% !important;
  max-width:100% !important;
  overflow-x:hidden !important;
}

body{
  overflow-x:hidden !important;
}

@media(max-width:768px){

}

@media(max-width:1500px){
}

@media(max-width:1100px){
}

@media(max-width:800px){
}

@media(max-width:600px){
}

@media(max-width:1200px){
}

@media(max-width:768px){
}

@media(max-width:768px){
}

.sidebar,
#sidebar{
  width:var(--sidebar-w) !important;
  min-width:var(--sidebar-w) !important;
  max-width:var(--sidebar-w) !important;
  flex:0 0 var(--sidebar-w) !important;
  box-sizing:border-box !important;
  overflow-x:hidden !important;
}

.sidebar *,
#sidebar *{
  box-sizing:border-box !important;
}

.sb-link,
.sb-lk,
#sbNav a,
#sbNav div{
box-sizing:border-box !important;
  display:flex !important;
  align-items:center !important;
  gap:.48rem !important;
  padding:.46rem 1rem !important;
  border-left:2px solid transparent !important;
  border-right:0 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  scale:1 !important;
  transition:background-color .13s ease,color .13s ease,border-color .13s ease !important;
}

.sb-link:hover,
.sb-lk:hover,
#sbNav a:hover,
#sbNav div:hover{
padding:.46rem 1rem !important;
  scale:1 !important;
  margin-left:0 !important;
  background:rgba(255,255,255,.06) !important;
}

.sb-link.active,
.sb-lk.active,
#sbNav a.active{
  width:100% !important;
  max-width:100% !important;
  padding:.46rem 1rem !important;
  transform:none !important;
  scale:1 !important;
}

.sb-icon,
.sb-ic{
  flex:0 0 18px !important;
  width:18px !important;
  min-width:18px !important;
  max-width:18px !important;
  text-align:center !important;
}

.sb-txt,
.sb-link span,
.sb-lk span,
#sbNav a span,
#sbNav div span{
overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

.sb-brand,
.sb-user,
.sb-usr,
.sb-foot,
.sb-foot-btn,
.sb-fb{
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
  transform:none !important;
  scale:1 !important;
}

.sb-brand:hover,
.sb-user:hover,
.sb-usr:hover,
.sb-foot-btn:hover,
.sb-fb:hover{
  transform:none !important;
  scale:1 !important;
}

#sbNav > div:not(.sb-link):not(.sb-lk):hover{
  background:transparent !important;
  padding:.52rem 1rem .18rem !important;
  margin:0 !important;
  transform:none !important;
  scale:1 !important;
}

#sbNav a,
#sbNav .sb-link,
#sbNav .sb-lk{
  height:auto !important;
  min-height:38px !important;
  max-height:44px !important;
  padding:.46rem 1rem !important;
  margin:0 !important;
  display:flex !important;
  align-items:center !important;
  line-height:1.4 !important;
  overflow:hidden !important;
}

#sbNav a:hover,
#sbNav .sb-link:hover,
#sbNav .sb-lk:hover,
#sbNav a.active,
#sbNav .sb-link.active,
#sbNav .sb-lk.active{
  height:auto !important;
  min-height:38px !important;
  max-height:44px !important;
  padding:.46rem 1rem !important;
  margin:0 !important;
  transform:none !important;
  scale:1 !important;
}

#sbNav a span,
#sbNav .sb-link span,
#sbNav .sb-lk span{
  line-height:1.4 !important;
}

/* SIDEBAR_UNIFIED_LAYOUT_V3_START
   Central admin sidebar layout.
   Only these page wrappers receive sidebar offset:
   - .main
   - .main-body
   - .mn
   Do not offset #mainContent, .content, .main-wrap, or .page-content.
*/
:root{
  --sidebar-w:256px;
  --sidebar-width:var(--sidebar-w);
}

body.has-admin-sidebar{
  overflow-x:hidden;
}

body.has-admin-sidebar .sidebar,
body.has-admin-sidebar .sb{
  position:fixed;
  top:0;
  right:0;
  width:var(--sidebar-w);
  height:100vh;
  z-index:1000;
}

body.has-admin-sidebar.layout-main .main{
  margin-right:var(--sidebar-w) !important;
  width:calc(100% - var(--sidebar-w));
  max-width:none;
}

body.has-admin-sidebar.layout-dashboard .main-body{
  margin-right:var(--sidebar-w) !important;
  width:calc(100% - var(--sidebar-w));
  max-width:none;
}

body.has-admin-sidebar.layout-mn .mn{
  margin-right:var(--sidebar-w) !important;
  width:calc(100% - var(--sidebar-w));
  max-width:none;
}

body.has-admin-sidebar #mainContent,
body.has-admin-sidebar .content,
body.has-admin-sidebar .main-wrap,
body.has-admin-sidebar .page-content{
  margin-right:0 !important;
}

body.has-admin-sidebar #sbNav div,
body.has-admin-sidebar #sbNav div:hover{
  width:auto !important;
  max-width:100%;
  transform:none !important;
}

@media (max-width: 900px){
  body.has-admin-sidebar .sidebar,
  body.has-admin-sidebar .sb{
    position:relative;
    width:100%;
    height:auto;
  }

  body.has-admin-sidebar.layout-main .main,
  body.has-admin-sidebar.layout-dashboard .main-body,
  body.has-admin-sidebar.layout-mn .mn{
    margin-right:0 !important;
    width:100%;
  }
}
/* SIDEBAR_UNIFIED_LAYOUT_V3_END */

/* SIDEBAR_STABLE_NAV_V4_START
   Stable sidebar nav sizing. Hover/active states must never change box size.
*/
:root{
  --sidebar-nav-font:'Cairo',sans-serif;
  --sidebar-nav-font-size:.77rem;
  --sidebar-nav-line-height:1.35;
  --sidebar-nav-pad-y:.46rem;
  --sidebar-nav-pad-x:1rem;
  --sidebar-nav-gap:.48rem;
}

body.has-admin-sidebar .sb-link,
body.has-admin-sidebar .sb-lk,
body.has-admin-sidebar #sbNav a,
body.has-admin-sidebar #sbNav div{
  box-sizing:border-box !important;
  display:flex !important;
  align-items:center !important;
  gap:var(--sidebar-nav-gap) !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  min-height:34px !important;
  padding:var(--sidebar-nav-pad-y) var(--sidebar-nav-pad-x) !important;
  margin:0 !important;
  border-left:2px solid transparent !important;
  border-right:0 !important;
  font-family:var(--sidebar-nav-font) !important;
  font-size:var(--sidebar-nav-font-size) !important;
  line-height:var(--sidebar-nav-line-height) !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  transform:none !important;
  scale:1 !important;
  transition:background-color .13s ease,color .13s ease,border-color .13s ease !important;
}

body.has-admin-sidebar .sb-link:hover,
body.has-admin-sidebar .sb-lk:hover,
body.has-admin-sidebar #sbNav a:hover,
body.has-admin-sidebar #sbNav div:hover,
body.has-admin-sidebar .sb-link.active,
body.has-admin-sidebar .sb-lk.active,
body.has-admin-sidebar #sbNav a.active,
body.has-admin-sidebar #sbNav div.active{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  min-height:34px !important;
  padding:var(--sidebar-nav-pad-y) var(--sidebar-nav-pad-x) !important;
  margin:0 !important;
  transform:none !important;
  scale:1 !important;
}

body.has-admin-sidebar .sb-link span,
body.has-admin-sidebar .sb-lk span,
body.has-admin-sidebar #sbNav a span,
body.has-admin-sidebar #sbNav div span,
body.has-admin-sidebar .sb-txt{
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  font-family:var(--sidebar-nav-font) !important;
  font-size:var(--sidebar-nav-font-size) !important;
  line-height:var(--sidebar-nav-line-height) !important;
}

body.has-admin-sidebar .sb-icon,
body.has-admin-sidebar .sb-ic{
  flex:0 0 18px !important;
  width:18px !important;
  min-width:18px !important;
  max-width:18px !important;
  text-align:center !important;
}
/* SIDEBAR_STABLE_NAV_V4_END */

/* SIDEBAR_FORCE_SHOW_CMS_V5_START
   These CMS links are allowed for operations managers and must not disappear.
*/
body.has-admin-sidebar .sidebar a[data-force-show="cms-link"],
body.has-admin-sidebar .sb a[data-force-show="cms-link"],
body.has-admin-sidebar #sbNav a[data-force-show="cms-link"],
body.has-admin-sidebar .sb-link[data-force-show="cms-link"],
body.has-admin-sidebar .sb-lk[data-force-show="cms-link"]{
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;
}
/* SIDEBAR_FORCE_SHOW_CMS_V5_END */

/* SIDEBAR_SINGLE_ACTIVE_V8_START
   One selected nav item only. Inactive items must not keep a filled background.
*/
body.has-admin-sidebar .sb-link:not(.active):not([aria-current="page"]),
body.has-admin-sidebar .sb-lk:not(.active):not([aria-current="page"]),
body.has-admin-sidebar #sbNav a:not(.active):not([aria-current="page"]),
body.has-admin-sidebar #sbNav div:not(.active):not([aria-current="page"]){
  background:transparent !important;
  border-left-color:transparent !important;
}

body.has-admin-sidebar .sb-link.active,
body.has-admin-sidebar .sb-lk.active,
body.has-admin-sidebar #sbNav a.active,
body.has-admin-sidebar #sbNav div.active,
body.has-admin-sidebar .sb-link[aria-current="page"],
body.has-admin-sidebar .sb-lk[aria-current="page"],
body.has-admin-sidebar #sbNav a[aria-current="page"],
body.has-admin-sidebar #sbNav div[aria-current="page"]{
  background:rgba(255,255,255,.10) !important;
}
/* SIDEBAR_SINGLE_ACTIVE_V8_END */