/* app.css — global overrides to force an overlay drawer sidebar */

/* Always single-column app layout; sidebar never consumes layout width */
.app-layout{ display:block !important; grid-template-columns:none !important; }
.app-main{ margin-left:0 !important; }

/* Overlay drawer sidebar on all breakpoints */
.app-sidebar{
  position:fixed; left:0; top:var(--header-h,64px); right:auto; bottom:0;
  width:min(86vw, 320px);
  transform:translateX(-100%);
  transition:transform .24s ease;
  z-index:120;
  background: rgba(14,20,35,.98);
  color:#fff;
  border-right:1px solid rgba(255,255,255,.08);
  padding:16px;
  will-change:transform;
}
body.sidebar-open .app-sidebar{ transform:translateX(0); }

/* Dim background behind the drawer (does not cover the sticky header) */
[data-js="sidebar-overlay"]{
  position:fixed; left:0; right:0; bottom:0; top:var(--header-h,64px);
  background: rgba(0,0,0,.45); backdrop-filter: blur(2px);
  opacity:0; pointer-events:none; transition:opacity .2s ease;
  z-index:110;
}
body.sidebar-open [data-js="sidebar-overlay"]{ opacity:1; pointer-events:auto; }

/* Prevent background page scroll when drawer is open */
body.sidebar-open{ overflow:hidden; }

/* Make sure the burger is focus-visible friendly */
#btnSidebar:focus-visible{ outline:none; box-shadow: 0 0 0 3px rgba(59,130,246,.35); }

/* Optional: constrain page content width nicely */
.container, .container-fluid{
  max-width:1200px; margin-inline:auto;
  padding-left: clamp(12px, 3vw, 24px);
  padding-right: clamp(12px, 3vw, 24px);
}