/* Canonical sidebar geometry. Layered important rules supersede the older
   competing unlayered width patches without affecting dialogs or page cards. */
@layer mv-sidebar-layout {
  body:has(> .mv-side-appbar) {
    --mv-shell-sidebar-width:240px;
    --mv-shell-page-gap:16px;
    height:auto !important;
    min-height:100vh !important;
    overflow-y:auto !important;
  }
  body.mv-sidebar-collapsed:has(> .mv-side-appbar) { --mv-shell-sidebar-width:78px; }
  body:has(> .mv-side-appbar) > :is(main.mv-page,.mv-page,main.container,.admin-page,.admin-products-wrap,.admin-vendors-wrap,.admin-orders-wrap,.admin-riders-wrap,.vendor-page,.vendor-shell,.rider-page,.rider-shell,.mv-main,.mv-content,.content-wrapper) {
    box-sizing:border-box !important;
    position:relative !important;
    display:block !important;
    top:auto !important; bottom:auto !important; left:auto !important; right:auto !important;
    transform:none !important; translate:none !important; float:none !important;
    height:auto !important; min-height:0 !important; max-height:none !important;
    min-width:0 !important;
    overflow:visible !important;
    margin-top:0 !important;
    margin-bottom:0 !important;
    padding:16px 0 88px !important;
  }
  @media (min-width:992px) {
    body:has(> .mv-side-appbar) > .mv-side-appbar {
      position:fixed !important; inset:0 auto 0 0 !important;
      box-sizing:border-box !important;
      width:var(--mv-shell-sidebar-width) !important;
      min-width:var(--mv-shell-sidebar-width) !important;
      max-width:var(--mv-shell-sidebar-width) !important;
      height:100dvh !important;
      margin:0 !important;
    }
    body:has(> .mv-side-appbar) > .mv-side-appbar .mv-appbar-inner {
      box-sizing:border-box !important; width:100% !important; max-width:100% !important;
      min-width:0 !important; margin:0 !important;
    }
    body:has(> .mv-side-appbar) > :is(main.mv-page,.mv-page,main.container,.admin-page,.admin-products-wrap,.admin-vendors-wrap,.admin-orders-wrap,.admin-riders-wrap,.vendor-page,.vendor-shell,.rider-page,.rider-shell,.mv-main,.mv-content,.content-wrapper) {
      width:calc(100% - var(--mv-shell-sidebar-width) - var(--mv-shell-page-gap) * 2) !important;
      max-width:calc(100% - var(--mv-shell-sidebar-width) - var(--mv-shell-page-gap) * 2) !important;
      margin-left:calc(var(--mv-shell-sidebar-width) + var(--mv-shell-page-gap)) !important;
      margin-right:var(--mv-shell-page-gap) !important;
    }
    body:has(> .mv-side-appbar) > .market-footer {
      width:calc(100% - var(--mv-shell-sidebar-width)) !important;
      max-width:calc(100% - var(--mv-shell-sidebar-width)) !important;
      margin-left:var(--mv-shell-sidebar-width) !important;
      margin-right:0 !important;
    }
  }
  @media (max-width:991px) {
    body:has(> .mv-side-appbar) > .mv-side-appbar {
      position:sticky !important; top:0 !important; bottom:auto !important;
      width:100% !important; min-width:0 !important; max-width:100% !important;
      height:auto !important; margin:0 !important; overflow:visible !important;
      transform:none !important; filter:none !important; backdrop-filter:none !important;
      perspective:none !important; contain:none !important; will-change:auto !important;
    }
    body:has(> .mv-side-appbar) > :is(main.mv-page,.mv-page,main.container,.admin-page,.admin-products-wrap,.admin-vendors-wrap,.admin-orders-wrap,.admin-riders-wrap,.vendor-page,.vendor-shell,.rider-page,.rider-shell,.mv-main,.mv-content,.content-wrapper) {
      width:calc(100% - 24px) !important;
      max-width:calc(100% - 24px) !important;
      margin-left:12px !important; margin-right:12px !important;
    }
    body:has(> .mv-side-appbar) .mv-side-appbar .mv-appbar-inner {
      display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important;
      align-items:center !important; width:calc(100% - 24px) !important;
      height:auto !important; min-height:64px !important; max-height:none !important;
      margin:0 12px !important; padding:8px 0 !important; overflow:visible !important;
      transform:none !important; filter:none !important; backdrop-filter:none !important;
      perspective:none !important; contain:none !important; will-change:auto !important;
    }
    body:has(> .mv-side-appbar) .mv-side-appbar .mv-app-brand { flex:1 1 auto !important; min-width:0 !important; }
    body:has(> .mv-side-appbar) .mv-side-appbar .mv-app-brand-text { display:block !important; }
    body:has(> .mv-side-appbar) .mv-side-appbar .mv-sidebar-collapse { display:none !important; }
    body:has(> .mv-side-appbar) .mv-side-appbar .mv-app-menu { display:grid !important; }
    body:has(> .mv-side-appbar) .mv-side-appbar .mv-app-actions {
      position:fixed !important; inset:0 auto 0 0 !important;
      width:min(82vw,310px) !important; max-width:none !important;
      display:flex !important; flex-direction:column !important; align-items:stretch !important;
      height:100dvh !important; min-height:100dvh !important; max-height:100dvh !important;
      margin:0 !important; padding:12px 14px calc(24px + env(safe-area-inset-bottom,0px)) !important;
      border-radius:0 !important; box-sizing:border-box !important;
      background:var(--mv-header-gradient) !important;
      overflow-y:auto !important; overflow-x:hidden !important; overscroll-behavior:contain !important;
      transform:translateX(-105%) !important; visibility:hidden !important; pointer-events:none !important;
    }
    body:has(> .mv-side-appbar) .mv-side-appbar .mv-app-actions.is-open {
      transform:translateX(0) !important; visibility:visible !important; pointer-events:auto !important;
    }
    body:has(> .mv-side-appbar) > .market-footer {
      width:100% !important; max-width:100% !important;
      margin-left:0 !important; margin-right:0 !important;
    }
  }
}