/* ------------------------------------------------------------------
   nav.css  (see nav.js)  - ported from the AI Software "New Portal" menu
   (Ed, 2026-09-18) with the ASC red in place of the blue.
   Desktop top bar with dropdowns; phone bar + slide-in drawer.
   The server-rendered source list (#mbmcpebul_wrapper, the old Easy Button
   menu markup) is data only: nav.js builds the real bar from it.
   Colours follow theme.css / data-bs-theme so light and dark both work.
   ------------------------------------------------------------------ */
#mbmcpebul_wrapper { display: none !important; }
/* Ed 2026-09-25: the admin / dealer bars stay on screen while long grids scroll (menu.css made .menuHeader sticky but with
   z-index 1000; this wins and matches the public bar). */
#siteNav { position: sticky; top: 0; z-index: 1030; }
#siteNav { height: 56px !important; overflow: visible !important; background: var(--nav-bg) !important; box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 2px 10px rgba(0,0,0,.25); }

:root {
  --nav-bg: #1E1E1E;
  --nav-text: #e9e9e9;
  --nav-muted: #9aa0a6;
  --nav-accent: #dd2023;
  --nav-accent-tint: rgba(221, 32, 35, .10);
  --nav-menu-bg: #ffffff;
  --nav-menu-text: #1b1b1b;
  --nav-menu-border: #dee2e6;
  --nav-menu-hover: rgba(221, 32, 35, .08);
  --nav-panel-bg: #ffffff;
  --nav-panel-text: #111111;
  --nav-panel-border: #dee2e6;
}
html[data-bs-theme="dark"] {
  --nav-menu-bg: #242424;
  --nav-menu-text: #e6e6e6;
  --nav-menu-border: #383838;
  --nav-menu-hover: rgba(255, 255, 255, .06);
  --nav-panel-bg: #222222;
  --nav-panel-text: #e6e6e6;
  --nav-panel-border: #3a3a3a;
}

.nav-badge {
  display: inline-block; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px;
  border-radius: 9px; background: var(--nav-accent); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; vertical-align: 1px;
}

/* ===================== desktop bar ===================== */
.tnav { display: none; }
@media (min-width: 769px) {
  .tnav {
    display: flex; align-items: center; height: 56px; padding: 0 16px 0 12px; gap: 8px;
    background: var(--nav-bg); color: var(--nav-text); font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Open Sans", sans-serif; font-size: 14px;
  }
  .tnav-items { display: flex; align-items: stretch; height: 56px; flex: 1 1 auto; min-width: 0; }
  .tnav-item { position: relative; display: flex; align-items: stretch; }
  .tnav-link {
    display: flex; align-items: center; gap: 7px; padding: 0 13px; height: 56px;
    background: transparent; border: 0; color: var(--nav-text) !important; text-decoration: none !important; font: inherit; cursor: pointer; white-space: nowrap;
    border-bottom: 3px solid transparent; border-top: 3px solid transparent;
  }
  .tnav-link .tnav-chev { font-size: 10px; opacity: .6; transition: transform .15s; }
  .tnav-item.open .tnav-link .tnav-chev { transform: rotate(180deg); }
  .tnav-link:hover, .tnav-item.open > .tnav-link { background: rgba(255,255,255,.07); }
  .tnav-item.active > .tnav-link { border-bottom-color: var(--nav-accent); }
  .tnav-menu {
    display: none; position: absolute; top: 56px; left: 0; min-width: 220px; padding: 6px 0;
    background: var(--nav-menu-bg); color: var(--nav-menu-text); border: 1px solid var(--nav-menu-border); border-radius: 0 0 10px 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,.25); z-index: 1600;
  }
  .tnav-menu-right { left: auto; right: 0; }
  .tnav-item.open > .tnav-menu { display: block; }
  .tnav-menu-link {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 16px;
    background: transparent; border: 0; text-align: left; font: inherit; color: var(--nav-menu-text) !important; text-decoration: none !important; cursor: pointer; white-space: nowrap;
  }
  .tnav-menu-link:hover { background: var(--nav-menu-hover); }
  .tnav-menu-link.active { color: var(--nav-accent) !important; font-weight: 600; }
  .tnav-menu-link i { width: 16px; text-align: center; opacity: .75; }
  .tnav-menu-link.tnav-logout { color: var(--nav-accent) !important; }
  /* nested group = fly-out submenu (opens to the right, flips left near the window edge) */
  .tnav-flyout { position: relative; }
  .tnav-flyout-head { justify-content: space-between; }
  .tnav-flyout-chev { font-size: 10px; opacity: .55; margin-left: 18px; }
  .tnav-flyout.active > .tnav-flyout-head { color: var(--nav-accent) !important; font-weight: 600; }
  .tnav-submenu {
    display: none; position: absolute; top: -7px; left: 100%; min-width: 210px; padding: 6px 0;
    background: var(--nav-menu-bg); color: var(--nav-menu-text); border: 1px solid var(--nav-menu-border); border-radius: 0 10px 10px 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,.25); z-index: 1601;
  }
  .tnav-flyout.flip > .tnav-submenu { left: auto; right: 100%; border-radius: 10px 0 10px 10px; }
  .tnav-flyout.open > .tnav-submenu { display: block; }
  .tnav-flyout.open > .tnav-flyout-head { background: var(--nav-menu-hover); }
  .tnav-right { display: flex; align-items: center; gap: 6px; }
  .tnav-icon-btn { padding: 0 10px; font-size: 16px; }
  .tnav-user > .tnav-link .tnav-user-ico { font-size: 18px; opacity: .85; }
}

/* ===================== phone bar + drawer ===================== */
.mnav-bar, .mnav-drawer, .mnav-backdrop { display: none; }
@media (max-width: 768px) {
  .mnav-bar { display: flex; align-items: center; height: 56px; padding: 0 8px; background: var(--nav-bg); }
  .mnav-brand { display: flex; align-items: center; margin-left: 4px; color: #fff !important; text-decoration: none !important; font-weight: 600; font-size: 15px; letter-spacing: .3px; }
  .mnav-burger { width: 44px; height: 44px; display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 0 10px; background: transparent; border: 0; border-radius: 8px; -webkit-tap-highlight-color: transparent; }
  .mnav-burger span { display: block; height: 2px; width: 22px; background: #fff; border-radius: 2px; transition: transform .2s, opacity .2s; }
  html.mnav-open .mnav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  html.mnav-open .mnav-burger span:nth-child(2) { opacity: 0; }
  html.mnav-open .mnav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .mnav-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.55); opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 1700; }
  .mnav-drawer {
    display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; width: min(84vw, 320px);
    background: var(--nav-panel-bg); color: var(--nav-panel-text); box-shadow: 4px 0 24px rgba(0,0,0,.35);
    transform: translateX(-102%); transition: transform .25s ease; z-index: 1701; overscroll-behavior: contain;
  }
  html.mnav-open .mnav-backdrop { opacity: 1; pointer-events: auto; }
  html.mnav-open .mnav-drawer { transform: translateX(0); }
  html.mnav-open body { overflow: hidden; }

  .mnav-head { display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 8px 0 16px; border-bottom: 1px solid var(--nav-panel-border); flex: 0 0 auto; }
  .mnav-title { font-size: 16px; font-weight: 600; opacity: .9; }
  .mnav-close { width: 44px; height: 44px; font-size: 28px; line-height: 1; background: transparent; border: 0; color: inherit; opacity: .7; }
  .mnav-list { flex: 1 1 auto; overflow-y: auto; padding: 8px 0; -webkit-overflow-scrolling: touch; }
  .mnav-foot { flex: 0 0 auto; padding: 8px 0 max(8px, env(safe-area-inset-bottom)); border-top: 1px solid var(--nav-panel-border); }

  .mnav-item { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 48px; padding: 0 16px; background: transparent; border: 0; border-left: 3px solid transparent; color: inherit; font: inherit; font-size: 16px; text-align: left; text-decoration: none; -webkit-tap-highlight-color: transparent; }
  .mnav-drawer a.mnav-item, .mnav-drawer a.mnav-item:hover, .mnav-drawer a.mnav-item:focus { color: inherit !important; }
  .mnav-item:hover, .mnav-item:focus { text-decoration: none; background: rgba(127,127,127,.08); outline: none; }
  .mnav-item.active { border-left-color: var(--nav-accent); background: var(--nav-accent-tint); font-weight: 600; }
  .mnav-ico { width: 22px; text-align: center; font-size: 18px; opacity: .8; flex: 0 0 22px; }
  .mnav-text { flex: 1 1 auto; }
  .mnav-chev { font-size: 12px; opacity: .55; transition: transform .2s; }
  .mnav-sec.open > .mnav-toggle .mnav-chev { transform: rotate(180deg); }
  .mnav-sec { padding: 0 !important; }
  .mnav-panel { display: none; }
  .mnav-sec.open > .mnav-panel { display: block; }
  a.mnav-d1 { padding-left: 52px; min-height: 44px; font-size: 15px; }
  a.mnav-d2 { padding-left: 68px; min-height: 40px; font-size: 14px; opacity: .9; }
  .mnav-sec.mnav-d1 > .mnav-toggle { padding-left: 52px; min-height: 44px; font-size: 15px; }
  .mnav-sec.mnav-d1 > .mnav-panel { background: rgba(127,127,127,.06); }
  .mnav-logout { color: var(--nav-accent) !important; }
  .mnav-switch { width: 38px; height: 22px; border-radius: 11px; background: rgba(127,127,127,.35); position: relative; flex: 0 0 38px; transition: background .2s; }
  .mnav-switch span { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; }
  .mnav-switch.on { background: var(--nav-accent); }
  .mnav-switch.on span { transform: translateX(16px); }
}

/* ===================== public site ===================== */
/* Public.Master marks its bar #siteNav[data-nav="public"] (Ed, 2026-09-22): the site's own black bar
   and red accent, items centred, Montserrat like the rest of the public pages. No theme toggle or
   Log Out there, so the drawer footer is empty and hidden. */
#siteNav[data-nav="public"] { --nav-bg: #000000; --nav-text: #ffffff; position: sticky; top: 0; z-index: 1030; }
#siteNav[data-nav="public"] .tnav, #siteNav[data-nav="public"] .mnav-bar, .mnav-drawer.mnav-public { font-family: Montserrat, "Segoe UI", sans-serif; }
#siteNav[data-nav="public"] .tnav-items { justify-content: center; }
#siteNav[data-nav="public"] .tnav-link { font-size: 15px; }
#siteNav[data-nav="public"] .tnav-link:hover, #siteNav[data-nav="public"] .tnav-item.open > .tnav-link { background: var(--nav-accent); }
.mnav-foot:empty { display: none; }