/* ═══════════════════════════════════════════════
   RACEPSL ADMIN NAV  —  desktop dropdowns + mobile drawer
   Fonts: Bebas Neue (brand), Barlow Condensed (UI)
   Load these in your application.html.erb head:
     https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow+Condensed:wght@400;500;600;700
═══════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --rpsl-nav-h:78px;
  --rpsl-bg:#0a0a0a;
  --rpsl-border:#1e1e1e;
  --rpsl-muted:#aaa;
  --rpsl-accent:#E32526;
  --rpsl-highlight:#1a1a1a;
  --rpsl-drop-bg:#111;
  --rpsl-drop-border:#222;
  --rpsl-item-hover:#1c1c1c;
  --rpsl-drawer-w:260px;
}

/* ── SHELL ── */
.rpsl-nav{
  position:sticky;top:0;z-index:200;
  background:var(--rpsl-bg);border-bottom:1px solid var(--rpsl-border);
  height:var(--rpsl-nav-h);display:flex;align-items:stretch;
}

/* ── BRAND ── */
.rpsl-brand{
  display:flex;align-items:center;gap:8px;padding:0 14px;
  border-right:1px solid var(--rpsl-border);text-decoration:none;flex-shrink:0;
}
.rpsl-brand img{height:22px;width:auto;}
.rpsl-brand-fallback{
  font-family:'Bebas Neue',sans-serif;font-size:19px;letter-spacing:2px;color:#fff;
}

/* ── DESKTOP GROUPS ── */
.rpsl-nav-items{display:flex;align-items:stretch;flex:1;}
.rpsl-group{position:relative;display:flex;align-items:stretch;}
.rpsl-group-btn{
  display:flex;align-items:center;gap:5px;padding:0 12px;
  background:none;border:none;border-right:1px solid var(--rpsl-border);cursor:pointer;
  color:var(--rpsl-muted);font-family:'Barlow Condensed',system-ui,sans-serif;
  font-size:14px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;
  transition:color .15s,background .15s;white-space:nowrap;
}
.rpsl-group-btn:hover,.rpsl-group.is-open .rpsl-group-btn{color:#fff;background:var(--rpsl-highlight);}
.rpsl-group.is-active .rpsl-group-btn{color:#fff;box-shadow:inset 0 -2px 0 var(--rpsl-accent);}
.rpsl-chevron{font-size:9px;opacity:.45;transition:transform .2s;}
.rpsl-group.is-open .rpsl-chevron{transform:rotate(180deg);opacity:1;}

/* ── BADGES ── */
.rpsl-badge{font-size:9px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:2px 6px;border-radius:3px;}
.rpsl-badge.data    {background:#007A4D;color:#fff;}
.rpsl-badge.ops     {background:#E32526;color:#fff;}
.rpsl-badge.race    {background:#FFB612;color:#7a5200;}
.rpsl-badge.owner   {background:#7c3aed;color:#fff;}
.rpsl-badge.racer   {background:#0284c7;color:#fff;}
.rpsl-badge.assigned{background:#d97706;color:#fff;}

/* ── LIVE DOT ── */
.rpsl-dot{width:6px;height:6px;border-radius:50%;background:var(--rpsl-accent);animation:rpsl-pulse 2s infinite;flex-shrink:0;}
@keyframes rpsl-pulse{0%,100%{opacity:1}50%{opacity:.25}}

/* ── DESKTOP DROPDOWN ── */
.rpsl-dropdown{
  display:none;position:absolute;top:calc(var(--rpsl-nav-h) - 1px);left:0;
  min-width:190px;background:var(--rpsl-drop-bg);
  border:1px solid var(--rpsl-drop-border);border-top:2px solid var(--rpsl-accent);
  border-radius:0 0 6px 6px;padding:6px 0;z-index:300;
  box-shadow:0 12px 32px rgba(0,0,0,.65);
}
.rpsl-dropdown.align-right{left:auto;right:0;}
.rpsl-group.is-open .rpsl-dropdown{display:block;}
.rpsl-dropdown a{
  display:flex;align-items:center;padding:7px 14px;
  color:#bbb;text-decoration:none;
  font-family:'Barlow Condensed',system-ui,sans-serif;
  font-size:15px;font-weight:500;letter-spacing:.3px;
  transition:color .1s,background .1s;white-space:nowrap;
}
.rpsl-dropdown a:hover{color:#fff;background:var(--rpsl-item-hover);}
.rpsl-dropdown a.is-active{color:#fff;background:var(--rpsl-item-hover);border-left:2px solid var(--rpsl-accent);padding-left:12px;}
.rpsl-dropdown a.control{color:#fff;font-weight:700;}
.rpsl-dropdown a.danger{color:#c44;}
.rpsl-dropdown a.danger:hover{color:#ff8080;background:#1a0a0a;}
.rpsl-drop-divider{height:1px;background:var(--rpsl-drop-border);margin:5px 0;}
.rpsl-drop-label{padding:8px 14px 3px;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#3a3a3a;}

/* ── RIGHT SIDE ── */
.rpsl-nav-right{display:flex;align-items:center;margin-left:auto;border-left:1px solid var(--rpsl-border);}
.rpsl-current{padding:0 12px;display:flex;flex-direction:column;justify-content:center;border-right:1px solid var(--rpsl-border);}
.rpsl-current span{font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#fff;}
.rpsl-current small{color:#555;font-size:12px;}
.rpsl-auth{display:flex;align-items:center;gap:8px;padding:0 12px;}
.rpsl-auth-email{font-size:13px;color:#555;}
.rpsl-auth-btn{
  font-family:'Barlow Condensed',system-ui,sans-serif;font-size:13px;font-weight:700;
  letter-spacing:.8px;text-transform:uppercase;color:#888;text-decoration:none;padding:0 12px;
}
.rpsl-auth-login:hover{color:#fff;}

/* ── HAMBURGER ── */
.rpsl-hamburger{
  display:none;align-items:center;justify-content:center;
  width:48px;height:var(--rpsl-nav-h);background:none;border:none;cursor:pointer;
  flex-direction:column;gap:5px;padding:0;flex-shrink:0;
}
.rpsl-hamburger span{
  display:block;width:20px;height:1.5px;background:#888;
  transition:transform .25s,opacity .25s;transform-origin:center;
}
.rpsl-hamburger:hover span{background:#fff;}
.rpsl-hamburger.is-open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.rpsl-hamburger.is-open span:nth-child(2){opacity:0;}
.rpsl-hamburger.is-open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

/* ── BACKDROP ── */
.rpsl-backdrop{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:150;
  opacity:0;transition:opacity .25s;
}
.rpsl-backdrop.is-visible{display:block;}
.rpsl-backdrop.is-active{opacity:1;}

/* ── DRAWER ── */
.rpsl-drawer{
  position:fixed;top:0;left:0;bottom:0;width:var(--rpsl-drawer-w);
  background:#0d0d0d;border-right:1px solid var(--rpsl-border);
  z-index:160;overflow-y:auto;
  transform:translateX(-100%);transition:transform .28s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;
}
.rpsl-drawer.is-open{transform:translateX(0);}
.rpsl-drawer-top{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 12px 0 14px;height:var(--rpsl-nav-h);
  border-bottom:1px solid var(--rpsl-border);flex-shrink:0;
}
.rpsl-drawer-top-left{display:flex;align-items:center;gap:8px;}
.rpsl-drawer-top-right{display:flex;align-items:center;gap:10px;}
.rpsl-drawer-page span{font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#fff;display:block;}
.rpsl-drawer-page small{font-size:12px;color:#444;display:block;}
.rpsl-drawer-close{background:none;border:none;cursor:pointer;color:#444;font-size:18px;line-height:1;padding:4px;transition:color .15s;}
.rpsl-drawer-close:hover{color:#fff;}
.rpsl-drawer-sections{flex:1;padding:8px 0;}

/* ── MOBILE ACCORDION ── */
.rpsl-mob-section-btn{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;padding:10px 16px;background:none;border:none;cursor:pointer;
  color:#bbb;font-family:'Barlow Condensed',system-ui,sans-serif;
  font-size:14px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  transition:color .15s,background .15s;
}
.rpsl-mob-section-btn:hover{color:#fff;background:var(--rpsl-highlight);}
.rpsl-mob-section.is-open .rpsl-mob-section-btn{color:#fff;}
.rpsl-mob-section-left{display:flex;align-items:center;gap:7px;}
.rpsl-mob-chevron{font-size:9px;opacity:.4;transition:transform .2s;}
.rpsl-mob-section.is-open .rpsl-mob-chevron{transform:rotate(180deg);opacity:.8;}
.rpsl-mob-items{display:none;padding:2px 0 6px;}
.rpsl-mob-section.is-open .rpsl-mob-items{display:block;}
.rpsl-mob-items a{
  display:block;padding:7px 16px 7px 28px;
  color:#aaa;text-decoration:none;
  font-family:'Barlow Condensed',system-ui,sans-serif;
  font-size:15px;font-weight:500;
  transition:color .1s,background .1s;
}
.rpsl-mob-items a:hover{color:#fff;background:var(--rpsl-highlight);}
.rpsl-mob-items a.is-active{color:#fff;border-left:2px solid var(--rpsl-accent);padding-left:26px;}
.rpsl-mob-items a.control{color:#fff;font-weight:700;}
.rpsl-mob-items a.danger{color:#933;}
.rpsl-mob-sublabel{padding:8px 16px 2px 28px;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#2e2e2e;}
.rpsl-mob-divider{height:1px;background:#1a1a1a;margin:4px 16px;}

/* ── DRAWER FOOTER ── */
.rpsl-drawer-foot{border-top:1px solid var(--rpsl-border);padding:12px 16px;flex-shrink:0;}
.rpsl-drawer-foot-email{font-size:14px;color:#444;display:block;margin-bottom:4px;}
.rpsl-drawer-foot-role{font-size:12px;color:#2e2e2e;letter-spacing:.5px;text-transform:uppercase;display:block;margin-bottom:10px;}
.rpsl-drawer-logout{
  font-family:'Barlow Condensed',system-ui,sans-serif;font-size:14px;font-weight:700;
  letter-spacing:.8px;text-transform:uppercase;background:none;
  border:1px solid #2a2a2a;color:#555;padding:6px 14px;border-radius:3px;
  cursor:pointer;width:100%;transition:border-color .15s,color .15s;
}
.rpsl-drawer-logout:hover{border-color:#555;color:#ccc;}

/* ── SUPER ADMIN TINT ── */
.rpsl-group.sa .rpsl-dropdown{border-top-color:#7c3aed;}
.rpsl-group.sa .rpsl-group-btn{color:#9f7aea;}
.rpsl-group.sa .rpsl-group-btn:hover,
.rpsl-group.sa.is-open .rpsl-group-btn{background:#150f1e;color:#c4b5fd;}

/* ── RESPONSIVE ── */
@media(max-width:768px){
  .rpsl-nav-items{display:none;}
  .rpsl-auth{display:none;}
  .rpsl-current{border-right:none;}
  .rpsl-hamburger{display:flex;}
}