/* ============================================================
   BYP SIGNED-IN GLOBAL NAVIGATION (nav.css)
   ONE authority, two responsive presentations:
   - mobile: fixed bottom tab bar
   - desktop (>=920px): compact fixed left rail
   Hidden entirely when the user is signed out (added/removed by nav.js).
   Accent via CSS vars --pink/--cyan already set at :root by the app.
   ============================================================ */
#byp-nav { position: fixed; inset: auto 0 0 0; z-index: 940; display: none; }
body.byp-signed-in #byp-nav { display: grid; position: fixed; }
body.byp-signed-in { /* room for the fixed mobile bar on the smallest screens */
  padding-bottom: calc(64px + env(safe-area-inset-bottom));
}
@media (min-width: 920px) {
  body.byp-signed-in { padding-bottom: 0; padding-left: 88px; }
  #byp-nav { inset: 0 auto 0 0; width: 88px; height: 100%; }
}

/* ----- shared item base ----- */
#byp-nav a {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  pointer-events: auto;
  user-select: none;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--dim, #98a0b0);
  font-weight: 800;
  letter-spacing: .03em;
  transition: color .18s, background .18s, transform .12s;
}
#byp-nav a .nv-label { font-size: 11px; line-height: 1; text-transform: uppercase; }
#byp-nav a .nv-glyph { font-size: 20px; line-height: 1; transition: filter .18s, transform .18s; }
#byp-nav a.active { color: #fff; }
#byp-nav a.active .nv-glyph { text-shadow: 0 0 10px var(--pink, #ff2ec4); }
/* Inactive items are lifted out of the flat grey with a faint blue tint, and
   warm toward pink on hover — the rail had no lit state at all before. */
#byp-nav a:not(.active):hover { color: var(--softblue, #7ce9ff); background: rgba(0,229,255,.07); }
#byp-nav a:not(.active):hover .nv-glyph { filter: drop-shadow(0 0 10px rgba(0,229,255,.5)); transform: translateY(-1px); }
#byp-nav a.active .nv-glyph { filter: drop-shadow(0 0 12px rgba(255,46,196,.75)); }
#byp-nav a:focus-visible { outline: 2px solid var(--pink, #ff2ec4); outline-offset: -3px; border-radius: 8px; }

/* ----- mobile bottom bar ----- */
@media (max-width: 919px) {
  #byp-nav {
    grid-template-columns: repeat(4, 1fr);
    min-height: 56px;
    padding-bottom: env(safe-area-inset-bottom);
    /* BLACK + a blue/purple wash rather than a flat near-black grey, with a lit
       brand rule along the top edge so the bar reads as part of the design. */
    background: linear-gradient(180deg, rgba(0,229,255,.07), rgba(0,0,0,.96) 34%), #000;
    border-top: 1px solid rgba(0,229,255,.30);
    backdrop-filter:none; -webkit-backdrop-filter:none;
    box-shadow: 0 -1px 0 rgba(255,46,196,.30), 0 -14px 34px rgba(0,0,0,.66);
  }
  #byp-nav::before {
    content: '';
    position: absolute; left: 0; right: 0; top: -1px; height: 2px;
    background: var(--rule-brand, linear-gradient(90deg,#ff2ec4,#a855ff 48%,#00e5ff));
    opacity: .85; pointer-events: none;
  }
  #byp-nav a { min-height: 56px; }
  #byp-nav a.active { color: var(--pink, #ff2ec4); }
  #byp-nav a.active .nv-glyph { text-shadow: 0 0 14px rgba(255,46,196,.8); }
}

/* ----- desktop left rail (compact, minimal) ----- */
@media (min-width: 920px) {
  #byp-nav {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    align-content: start;
    gap: 6px;
    padding: 18px 0 24px;
    background: linear-gradient(180deg, rgba(168,85,255,.10), rgba(0,229,255,.045) 38%, rgba(0,0,0,0) 78%), #000;
    border-right: 1px solid rgba(0,229,255,.22);
    box-shadow: 1px 0 0 rgba(255,46,196,.20), 14px 0 40px rgba(0,0,0,.5);
  }
  /* Vertical brand rule down the rail's inner edge — the one lit line that
     ties the whole signed-in shell to the palette. */
  #byp-nav::before {
    content: '';
    position: absolute; top: 0; bottom: 0; right: -1px; width: 2px;
    background: linear-gradient(180deg,#ff2ec4,#a855ff 48%,#00e5ff);
    opacity: .55; pointer-events: none;
  }
  #byp-nav a { height: 62px; font-size: 12px; }
  #byp-nav a.active {
    color: var(--softblue, #7ce9ff);
    background: linear-gradient(90deg, rgba(255,46,196,.20), rgba(168,85,255,.10) 55%, rgba(0,229,255,.05));
    border-left: 3px solid var(--pink, #ff2ec4);
    box-shadow: inset 0 0 22px rgba(255,46,196,.16);
  }
}


/* 2026-09-18 — keep owner/admin mobile nav compact.
   ADMIN now lives under MORE instead of wrapping into a second nav row. */
#byp-nav-more{
  position:fixed;
  z-index:945;
  min-width:150px;
  padding:8px;
  border:1px solid rgba(255,46,196,.30);
  border-radius:16px;
  background:rgba(3,4,9,.97);
  box-shadow:0 18px 48px rgba(0,0,0,.50),0 0 28px rgba(168,85,255,.12);
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
#byp-nav-more[hidden]{display:none!important}
#byp-nav-more button{
  width:100%;
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background:linear-gradient(90deg,rgba(255,46,196,.10),rgba(0,229,255,.04));
  color:#fff;
  font:800 12px/1 Archivo,sans-serif;
  letter-spacing:.08em;
}
#byp-nav-more .m-glyph{color:var(--pink,#ff2ec4);font-size:18px}
@media(max-width:919px){
  body.byp-signed-in #byp-nav{grid-template-columns:repeat(5,minmax(0,1fr))}
  #byp-nav a{min-width:0;padding:5px 2px}
  #byp-nav a .nv-label{font-size:9px;white-space:nowrap;letter-spacing:0}
  #byp-nav a .nv-glyph{font-size:19px}
  #byp-nav-more{
    right:10px;
    bottom:calc(66px + env(safe-area-inset-bottom));
  }
}
@media(min-width:920px){
  #byp-nav-more{
    left:96px;
    top:18px;
  }
}