/* Host layout only. All menu styles remain isolated inside the shared shadow root.
 * --calibrite-sidebar-inline-size is the public layout contract for product-owned
 * fixed surfaces. Publish it on :root so fixed surfaces outside .app inherit it;
 * mirror it on .app for app-local consumers. It describes occupied canvas width,
 * not overlay panel width. */
.sidebar{--cbs-host-version:1}
.sidebar.cbs-ready{width:252px;padding:0!important;gap:0!important;position:sticky;top:0;height:100vh;overflow:hidden;background:#fff;border-right:1px solid #E4E0DA}
.sidebar.cbs-ready>:not(.cbs-host){display:none!important}
.sidebar.cbs-ready>.cbs-host{position:relative;min-height:0;height:100%;flex:1}
.sidebar.cbs-ready.is-collapsed,.app.is-collapsed>.sidebar.cbs-ready{width:64px}
:root:has(.app>.sidebar.cbs-ready),.app:has(>.sidebar.cbs-ready){--calibrite-sidebar-inline-size:252px}
.app:has(>.sidebar.cbs-ready){grid-template-columns:252px minmax(0,1fr)}
:root:has(.app.is-collapsed>.sidebar.cbs-ready),.app.is-collapsed:has(>.sidebar.cbs-ready){--calibrite-sidebar-inline-size:64px}
.app.is-collapsed:has(>.sidebar.cbs-ready){grid-template-columns:64px minmax(0,1fr)}

/* Compact desktop is responsive state, independent from the >=1280 user preference. */
@media(min-width:1024px) and (max-width:1279px){
 .sidebar.cbs-ready[data-cbs-mode="compact"],.app.is-collapsed>.sidebar.cbs-ready[data-cbs-mode="compact"]{width:64px}
 .sidebar.cbs-ready[data-cbs-mode="compact"].cbs-compact-expanded,.app.is-collapsed>.sidebar.cbs-ready[data-cbs-mode="compact"].cbs-compact-expanded{width:252px}
 :root:has(.app>.sidebar.cbs-ready[data-cbs-mode="compact"]),.app:has(>.sidebar.cbs-ready[data-cbs-mode="compact"]),.app.is-collapsed:has(>.sidebar.cbs-ready[data-cbs-mode="compact"]){--calibrite-sidebar-inline-size:64px}
 .app:has(>.sidebar.cbs-ready[data-cbs-mode="compact"]),.app.is-collapsed:has(>.sidebar.cbs-ready[data-cbs-mode="compact"]){grid-template-columns:64px minmax(0,1fr)}
 :root:has(.app>.sidebar.cbs-ready[data-cbs-mode="compact"].cbs-compact-expanded),.app:has(>.sidebar.cbs-ready[data-cbs-mode="compact"].cbs-compact-expanded),.app.is-collapsed:has(>.sidebar.cbs-ready[data-cbs-mode="compact"].cbs-compact-expanded){--calibrite-sidebar-inline-size:252px}
 .app:has(>.sidebar.cbs-ready[data-cbs-mode="compact"].cbs-compact-expanded),.app.is-collapsed:has(>.sidebar.cbs-ready[data-cbs-mode="compact"].cbs-compact-expanded){grid-template-columns:252px minmax(0,1fr)}
}

/* Tablet keeps the canvas full width and opens one 288px overlay drawer. */
@media(min-width:768px) and (max-width:1023px){
 .sidebar.cbs-ready[data-cbs-mode="drawer"],.app.is-collapsed>.sidebar.cbs-ready[data-cbs-mode="drawer"]{position:fixed;width:288px;max-width:calc(100vw - 32px);height:100dvh;z-index:60;left:0;top:0;transform:translateX(-104%)}
 .sidebar.cbs-ready[data-cbs-mode="drawer"].open,.app.nav-open>.sidebar.cbs-ready[data-cbs-mode="drawer"]{transform:translateX(0)}
 :root:has(.app>.sidebar.cbs-ready[data-cbs-mode="drawer"]),.app:has(>.sidebar.cbs-ready[data-cbs-mode="drawer"]),.app.is-collapsed:has(>.sidebar.cbs-ready[data-cbs-mode="drawer"]){--calibrite-sidebar-inline-size:0px}
 .app:has(>.sidebar.cbs-ready[data-cbs-mode="drawer"]),.app.is-collapsed:has(>.sidebar.cbs-ready[data-cbs-mode="drawer"]){grid-template-columns:minmax(0,1fr)}
 html:has(.sidebar.cbs-ready[data-cbs-mode="drawer"].open),body:has(.sidebar.cbs-ready[data-cbs-mode="drawer"].open),html:has(.app.nav-open>.sidebar.cbs-ready[data-cbs-mode="drawer"]),body:has(.app.nav-open>.sidebar.cbs-ready[data-cbs-mode="drawer"]){overflow:hidden;overscroll-behavior:none}
}

/* Phone uses the existing 56px Customer topbar trigger and a full-screen nav. */
@media(max-width:767px){
 .sidebar.cbs-ready[data-cbs-mode="mobile"],.app.is-collapsed>.sidebar.cbs-ready[data-cbs-mode="mobile"]{position:fixed;width:100vw;max-width:100vw;height:100dvh;z-index:60;left:0;top:0;transform:translateX(-104%)}
 .sidebar.cbs-ready[data-cbs-mode="mobile"].open,.app.nav-open>.sidebar.cbs-ready[data-cbs-mode="mobile"]{transform:translateX(0)}
 :root:has(.app>.sidebar.cbs-ready[data-cbs-mode="mobile"]),.app:has(>.sidebar.cbs-ready[data-cbs-mode="mobile"]),.app.is-collapsed:has(>.sidebar.cbs-ready[data-cbs-mode="mobile"]){--calibrite-sidebar-inline-size:0px}
 .app:has(>.sidebar.cbs-ready[data-cbs-mode="mobile"]),.app.is-collapsed:has(>.sidebar.cbs-ready[data-cbs-mode="mobile"]){grid-template-columns:minmax(0,1fr)}
 html:has(.sidebar.cbs-ready[data-cbs-mode="mobile"].open),body:has(.sidebar.cbs-ready[data-cbs-mode="mobile"].open),html:has(.app.nav-open>.sidebar.cbs-ready[data-cbs-mode="mobile"]),body:has(.app.nav-open>.sidebar.cbs-ready[data-cbs-mode="mobile"]){overflow:hidden;overscroll-behavior:none}
}