/**
 * CPNBuilder — mobile menu drawer + overlay
 * Open state: .mobile-menu-drawer.open OR html[data-mobile-nav="open"]
 */

@media (max-width: 768px) {
  /* ── Overlay (below drawer) ─────────────────────────────────────── */
  .mobile-menu-overlay,
  .cp-nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    pointer-events: auto;
    margin: 0;
    padding: 0;
    border: none;
  }

  .mobile-menu-overlay.open,
  html[data-mobile-nav="open"] .mobile-menu-overlay,
  body.menu-open .mobile-menu-overlay,
  body.cp-nav-open .mobile-menu-overlay,
  body.cp-nav-open .cp-nav-backdrop {
    display: block;
  }

  /* ── Drawer (above overlay) ───────────────────────────────────── */
  .mobile-menu-drawer,
  #navigation_bar.mobile-menu-drawer,
  #navigation_bar.sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 82% !important;
    max-width: 340px !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding-top: calc(52px + env(safe-area-inset-top, 0px)) !important;
    box-sizing: border-box !important;
    background: var(--dash-sidebar, #1e3a8a) !important;
    z-index: 9999 !important;
    transform: translateX(-100%);
    transition: transform 0.28s ease;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    flex: none !important;
    box-shadow: 8px 0 32px rgba(0, 0, 0, 0.45);
  }

  .mobile-menu-drawer.open,
  #navigation_bar.mobile-menu-drawer.open,
  html[data-mobile-nav="open"] .mobile-menu-drawer,
  html[data-mobile-nav="open"] #navigation_bar.mobile-menu-drawer,
  html[data-mobile-nav="open"] #navigation_bar.sidebar,
  body.menu-open .mobile-menu-drawer,
  body.menu-open #navigation_bar.sidebar,
  body.cp-nav-open .sidebar,
  body.cp-nav-open #navigation_bar.sidebar {
    transform: translateX(0) !important;
  }

  /* ── Body scroll lock (Safari) ─────────────────────────────────── */
  html[data-mobile-nav="open"],
  html.menu-open,
  html.cp-nav-open,
  body.menu-open,
  body.cp-nav-open {
    overflow: hidden !important;
  }

  html.cpn-dashboard-root body.menu-open,
  html.cpn-dashboard-root body.cp-nav-open {
    position: relative;
    width: 100%;
  }

  /* Bottom tab bar is primary nav — no header hamburger (use More tab for drawer) */
  html.cpn-dashboard-root .cpn-dash-header-zone__menu-row,
  html.cpn-dashboard-root .cpn-dash-header-zone__menu-row.cp-mobile-menu-row--active {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  .mobile-menu-trigger,
  .cp-sidebar-toggle,
  #cpSidebarToggle,
  .cp-mobile-nav-toggle--floating {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  html.cpn-dashboard-root .cpn-dash-header.cpn-dash-header,
  html.cpn-dashboard-root .header-bar.cpn-dash-header {
    padding-left: 12px !important;
  }

  /* Contain bleed on outer shell only — avoid clipping header/compliance text on .main */
  html.cpn-dashboard-root .dashboard-wrapper {
    overflow-x: hidden;
    max-width: 100%;
  }

  html.cpn-dashboard-root .main {
    overflow-x: visible;
    max-width: 100%;
  }
}

@media (min-width: 769px) {
  .mobile-menu-overlay,
  .cp-nav-backdrop {
    display: none !important;
  }

  /* Sidebar pinned to viewport on desktop (main content scrolls independently) */
  .mobile-menu-drawer,
  .sidebar,
  #navigation_bar.sidebar,
  #navigation_bar.cpn-sidebar--desktop-pinned {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    transform: none !important;
    width: var(--dash-sidebar-w, 196px) !important;
    height: 100vh !important;
    max-height: 100vh !important;
    max-width: var(--dash-sidebar-w, 196px) !important;
    padding-top: 20px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    z-index: 300 !important;
  }

  html.cpn-dashboard-root .dashboard-wrapper {
    display: block !important;
    padding-left: var(--dash-sidebar-w, 196px) !important;
    box-sizing: border-box !important;
  }

  html.cpn-dashboard-root .main {
    width: 100% !important;
    max-width: 100% !important;
  }

  .mobile-menu-trigger,
  .cp-sidebar-toggle {
    display: none !important;
  }

  body.menu-open,
  body.cp-nav-open {
    overflow: auto !important;
  }
}