/* ============================================================
   GROK PREDICTOR — app shell
   Top nav, console sidebars (both legacy vocabularies map to
   one visual), page headers, login screens, mobile menus.
   ============================================================ */

/* ── BRAND MARK — the four-point signal star ── */
.logo{display:inline-flex;align-items:center;gap:10px;user-select:none}
.logo__mark,.masthead__mark,.hub-mark,.as-brand-mark{
  width:36px;height:36px;flex-shrink:0;
  background:url("/assets/grok-predictor-mark.svg") center/contain no-repeat;
}
.logo__word,.masthead__word{
  font-family:var(--font-display);font-size:1.3rem;letter-spacing:.5px;
  text-transform:uppercase;line-height:1;color:var(--text);
  display:flex;align-items:baseline;gap:2px;
}
.logo__word sup,.masthead__word sup{
  font-family:var(--font-body);font-size:.55rem;font-weight:800;
  color:var(--accent);letter-spacing:.14em;margin-left:4px;
}
.logo__accent,.masthead__accent{color:var(--primary)}
.masthead__logo,.sidebar-brand,.login-logo,.hub-brand{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-display);font-size:1.2rem;
  text-transform:uppercase;letter-spacing:.5px;color:var(--text);
}

/* ── VIRTUAL PREDICTIONS STATUS INDICATOR (header, after brand word) ──
   Red dot = predictions OFF · Green pulsing dot = predictions ON.
   State comes from localStorage key `grok_virtual_predictions` ('1'/'0'),
   flipped by the superadmin toggle. */
.vp-status{
  display:inline-flex;align-items:center;gap:6px;align-self:center;
  margin-left:8px;padding:4px 10px 4px 8px;
  border-radius:var(--r-full);
  background:var(--surface-2);border:1px solid var(--border);
  font-family:var(--font-body);font-size:.62rem;font-weight:800;
  letter-spacing:.12em;line-height:1;white-space:nowrap;
  vertical-align:middle;
}
.vp-status__dot{
  width:8px;height:8px;border-radius:50%;flex-shrink:0;
  background:var(--danger);
  box-shadow:0 0 6px var(--danger);
}
.vp-status__label{color:var(--danger)}
.vp-status.is-on{border-color:var(--vp-green)}
.vp-status.is-on .vp-status__dot{
  background:var(--vp-green);
  box-shadow:0 0 8px var(--vp-green);
  animation:vp-pulse 1.6s ease-in-out infinite;
}
.vp-status.is-on .vp-status__label{color:var(--vp-green)}
@keyframes vp-pulse{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.35);opacity:.65}
}
@media (prefers-reduced-motion:reduce){
  .vp-status.is-on .vp-status__dot{animation:none}
}

/* ── VIRTUAL PREDICTIONS OFFLINE GATE ──
   Full-page block on game pages while predictions are OFF. */
#vpGateOverlay{
  position:fixed;inset:0;z-index:99999;
  background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  padding:var(--s6);
}
.vp-gate__card{
  max-width:420px;text-align:center;
  background:var(--surface);border:1px solid var(--border-strong);
  border-radius:var(--r-lg);padding:var(--s8) var(--s6);
}
.vp-gate__mark{
  width:56px;height:56px;margin:0 auto var(--s4);
  background:url("/assets/grok-predictor-mark.svg") center/contain no-repeat;
  opacity:.5;
}
.vp-gate__dot{
  width:12px;height:12px;border-radius:50%;margin:0 auto var(--s4);
  background:var(--danger);box-shadow:0 0 12px var(--danger);
}
.vp-gate__card h2{
  font-family:var(--font-display);font-size:1.4rem;letter-spacing:.5px;
  text-transform:uppercase;margin:0 0 var(--s3);color:var(--text);
}
.vp-gate__card p{color:var(--text-2);font-size:var(--text-sm);margin:0 0 var(--s5)}
.vp-gate__card .sbtn{width:100%;justify-content:center}

/* ── VIRTUAL PREDICTIONS TOGGLE SWITCH (superadmin) ── */
.vp-switch{
  position:relative;display:inline-flex;align-items:center;gap:12px;
  cursor:pointer;min-height:44px;user-select:none;
}
.vp-switch input{
  position:absolute;opacity:0;width:1px;height:1px;overflow:hidden;
}
.vp-switch__track{
  width:56px;height:30px;border-radius:var(--r-full);flex-shrink:0;
  background:var(--surface-2);border:2px solid var(--danger);
  position:relative;transition:background var(--dur-fast),border-color var(--dur-fast);
}
.vp-switch__thumb{
  position:absolute;top:50%;left:4px;transform:translateY(-50%);
  width:20px;height:20px;border-radius:50%;
  background:var(--danger);
  box-shadow:0 0 8px var(--danger);
  transition:left var(--dur-fast),background var(--dur-fast),box-shadow var(--dur-fast);
}
.vp-switch input:checked + .vp-switch__track{border-color:var(--vp-green);background:var(--vp-green-tint)}
.vp-switch input:checked + .vp-switch__track .vp-switch__thumb{
  left:28px;background:var(--vp-green);box-shadow:0 0 10px var(--vp-green);
}
.vp-switch input:focus-visible + .vp-switch__track{
  outline:2px solid var(--primary);outline-offset:3px;
}
.vp-switch__text{font-weight:700;font-size:var(--text-sm);color:var(--text)}
.vp-switch__text small{display:block;font-weight:500;color:var(--text-3);font-size:var(--text-xs);margin-top:2px}
@media (prefers-reduced-motion:reduce){
  .vp-switch__track,.vp-switch__thumb{transition:none}
}

/* ── TOP NAV (customer consoles) ── */
.topnav{
  position:sticky;top:0;z-index:var(--z-nav);
  background:var(--bg);border-bottom:1px solid var(--border);
  min-height:68px;
}
.topnav__inner{
  max-width:1400px;margin:0 auto;min-height:68px;
  padding:8px var(--s5);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
}
.nav-left{display:flex;align-items:center;gap:var(--s3)}
.nav-right{display:flex;align-items:center;gap:var(--s2)}
.nav-back{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:var(--text-sm);color:var(--text-2);min-height:44px;cursor:pointer}
.nav-back:hover{color:var(--text)}
.nav-spacer{width:44px}
.hamburger,.mobile-menu-btn,.sidebar-toggle{
  display:none;width:44px;height:44px;border-radius:var(--r-sm);
  border:1px solid var(--border-strong);color:var(--text);
  align-items:center;justify-content:center;flex-direction:column;gap:5px;position:relative;z-index:1101;
}
.hamburger span{display:block;width:18px;height:2px;background:currentColor;border-radius:1px;transition:all .25s var(--ease-out)}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.sidebar-toggle.hidden{display:none !important}

/* ── CONSOLE LAYOUT ── */
.app-layout,.app,.layout{display:flex;min-height:100vh}
.main,.main-content{flex:1;min-width:0;padding:var(--s6) var(--s7) var(--s8);max-width:100%}
.page{max-width:880px;margin:0 auto;padding:var(--s6) var(--s5) var(--s8)}

/* ── SIDEBAR (unified visual for both vocabularies) ── */
.sidebar{
  width:264px;flex-shrink:0;
  background:var(--surface);border-right:1px solid var(--border);
  height:100vh;position:sticky;top:0;
  overflow-y:auto;overflow-x:hidden;z-index:1100;
  display:flex;flex-direction:column;
}
.sidebar-header,.sb-head{
  padding:var(--s4) var(--s5);border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  min-height:68px;
}
.sidebar-nav,.sb-nav{padding:var(--s4) var(--s3);flex:1}
.nav-section,.sb-section{margin-bottom:var(--s4)}
.nav-section-title,.sb-label{
  display:block;font-size:var(--text-xs);font-weight:600;
  letter-spacing:.04em;color:var(--text-3);
  padding:var(--s3) var(--s3) var(--s2);
}
.nav-link,.sb-item{
  display:flex;align-items:center;gap:var(--s3);
  padding:10px 12px;border-radius:var(--r-sm);
  font-size:var(--text-sm);font-weight:600;color:var(--text-2);
  border:1px solid transparent;cursor:pointer;
  transition:background var(--dur-fast),color var(--dur-fast);
  margin-bottom:2px;
}
.nav-link:hover,.sb-item:hover{background:var(--surface-2);color:var(--text)}
.nav-link.active,.sb-item.active{
  background:var(--tint-primary);color:var(--primary);border-color:var(--primary);
}
.nav-link .material-symbols-outlined,.sb-item .material-symbols-outlined{font-size:1.15rem;flex-shrink:0}
.sb-badge{
  margin-left:auto;font-size:var(--text-xs);font-weight:800;
  padding:2px 8px;border-radius:var(--r-full);
  background:var(--danger);color:var(--danger-ink);font-variant-numeric:tabular-nums;
}
.sb-hot{background:var(--tint-accent);border-color:var(--accent) !important;color:var(--accent)}
.sb-badge-sa{font-size:var(--text-xs);font-weight:700;color:var(--accent);letter-spacing:.08em;text-transform:uppercase}
.sidebar-footer,.sb-foot{padding:var(--s4) var(--s5);border-top:1px solid var(--border)}
.user-info,.sb-profile{
  display:flex;align-items:center;gap:var(--s3);padding:var(--s3);
  background:var(--surface-2);border-radius:var(--r-md);border:1px solid var(--border);
}
.user-avatar,.sb-avatar{
  width:38px;height:38px;border-radius:var(--r-full);flex-shrink:0;
  background:var(--primary);color:var(--primary-ink);
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:var(--text-sm);
}
.user-details{flex:1;min-width:0}
.user-name,.sb-user-name{font-weight:700;font-size:var(--text-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-role,.sb-user-role{font-size:var(--text-xs);color:var(--text-3);text-transform:uppercase;letter-spacing:.06em}
.sb-user-stat{font-size:var(--text-xs);color:var(--text-2);margin-top:2px;display:flex;align-items:center;gap:4px}
.sb-user-stat .material-symbols-outlined{font-size:.9rem;color:var(--primary)}
.btn-logout,.sb-logout{
  width:100%;min-height:44px;margin-top:var(--s3);
  display:flex;align-items:center;justify-content:center;gap:var(--s2);
  border:1px solid var(--danger);color:var(--danger);border-radius:var(--r-sm);
  font-weight:700;font-size:var(--text-sm);
  transition:background var(--dur-fast),color var(--dur-fast);
}
.btn-logout:hover,.sb-logout:hover{background:var(--danger);color:var(--danger-ink)}
.sb-bottom{margin-top:auto;padding:var(--s4) var(--s5);border-top:1px solid var(--border)}
.sidebar-close,.sb-close{
  display:none;width:36px;height:36px;border-radius:var(--r-sm);
  border:1px solid var(--border);color:var(--text);
  align-items:center;justify-content:center;flex-shrink:0;
}
.sidebar-overlay,.sb-overlay{
  display:none;position:fixed;inset:0;background:var(--scrim);z-index:1099;
}
.sidebar-overlay.active,.sidebar-overlay.on,.sb-overlay.active,.sb-overlay.on{display:block}

/* ── PAGE HEADERS ── */
.page-header,.page-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--s4);margin-bottom:var(--s6);flex-wrap:wrap;
}
.page-title,.section-head__title{
  font-family:var(--font-display);font-size:var(--text-2xl);
  text-transform:uppercase;letter-spacing:.5px;line-height:1.05;
}
.page-subtitle{color:var(--text-2);font-size:var(--text-sm);margin-top:var(--s1);max-width:70ch}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s4);flex-wrap:wrap}
.section-title{font-family:var(--font-display);font-size:var(--text-xl);text-transform:uppercase;letter-spacing:.5px}
.dashboard-back{display:inline-flex;align-items:center;gap:6px;color:var(--text-2);font-size:var(--text-sm);font-weight:600;margin-bottom:var(--s4);min-height:44px}
.dashboard-back:hover{color:var(--text)}

/* ── LOGIN SCREENS ── */
body:has(.login-container),body:has(.login-wrap){
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--s6);
}
.login-container,.login-wrap{width:100%;max-width:420px;position:relative;z-index:1}
.login-card{
  background:var(--surface);border:1px solid var(--border-strong);
  border-radius:var(--r-lg);padding:var(--s7) var(--s6);
  box-shadow:var(--sh-2);position:relative;overflow:hidden;
}
.login-card::before{ /* the one bold element: signal star watermark */
  content:'';position:absolute;top:-70px;right:-70px;width:220px;height:220px;
  background:url("/assets/grok-predictor-mark.svg") center/contain no-repeat;
  opacity:.07;pointer-events:none;
}
.login-header{text-align:center;margin-bottom:var(--s6);position:relative}
.login-logo{justify-content:center;margin-bottom:var(--s4)}
.login-title{font-family:var(--font-display);font-size:var(--text-xl);text-transform:uppercase;letter-spacing:.5px;margin-bottom:var(--s1)}
.login-subtitle{color:var(--text-2);font-size:var(--text-sm)}
.login-card .btn-primary,.login-card .sbtn,.login-card .btn{width:100%}
.footer-links,.card__footer{margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid var(--border);text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--s1)}
.footer-links a,.footer-link{color:var(--primary);font-weight:700;font-size:var(--text-sm)}
.footer-links a:hover,.footer-link:hover{text-decoration:underline}

/* ── superadmin login extras ── */
.card__topbar{height:4px;background:var(--primary);border-radius:var(--r-lg) var(--r-lg) 0 0;margin:calc(var(--s7) * -1) calc(var(--s6) * -1) var(--s6)}
.sa-badge{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:var(--s3);padding:6px 14px;border-radius:var(--r-full);
  background:var(--tint-primary);border:1px solid var(--primary);
  color:var(--primary);font-size:var(--text-xs);font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;
}
.sa-badge .material-symbols-outlined{font-size:1rem}
.masthead{text-align:center;margin-bottom:var(--s6)}
.masthead__logo{justify-content:center}

/* ── login responsive ── */
@media(max-width:480px){
  body:has(.login-container),body:has(.login-wrap){padding:var(--s4);align-items:flex-start;padding-top:8vh}
  .login-card{padding:var(--s6) var(--s5)}
  .card__topbar{margin:calc(var(--s6) * -1) calc(var(--s5) * -1) var(--s5)}
  .login-title{font-size:1.25rem}
}
.back-link,.footer-back{display:inline-flex;align-items:center;gap:6px;margin-top:var(--s2);color:var(--text-2);font-size:var(--text-sm);min-height:44px}
.back-link:hover,.footer-back:hover{color:var(--text)}

/* ── MOBILE MENU (landing) ── */
.mob-menu{
  position:fixed;inset:0;z-index:calc(var(--z-nav) - 1);
  background:var(--bg);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:var(--s2);
  transform:translateY(-100%);transition:transform .35s var(--ease-out);
  pointer-events:none;
}
.mob-menu.open{transform:translateY(0);pointer-events:auto}
.mob-menu a{font-family:var(--font-display);font-size:1.8rem;text-transform:uppercase;letter-spacing:.5px;color:var(--text);padding:var(--s3) var(--s6)}
.mob-menu .cta{background:var(--primary);color:var(--primary-ink);font-size:1.1rem;border-radius:var(--r-md);padding:12px 40px;margin-top:var(--s3)}

/* ── responsive shell ── */
@media(max-width:1024px){
  .sidebar{position:fixed;top:0;left:0;transform:translateX(-105%);transition:transform .3s var(--ease-out)}
  body .sidebar.open{display:flex!important;visibility:visible!important;opacity:1!important;transform:translate3d(0,0,0)!important;z-index:var(--z-sidebar-top)!important}
  body .sidebar-overlay,body .sb-overlay{left:264px!important;z-index:var(--z-sidebar-overlay)!important}
  body .hamburger,body .mobile-menu-btn,body .sidebar-toggle{z-index:var(--z-navbtn)!important}
  .sidebar-close,.sb-close{display:flex}
  .hamburger,.mobile-menu-btn,.sidebar-toggle{display:flex}
  .main,.main-content{padding:var(--s5) var(--s4) var(--s7)}
}
/* L1: on mobile the 56px support FAB floats bottom-right over the last
   card's buttons and the pagination "next" — reserve room for it. */
@media (max-width: 1024px){
  .main,.main-content{padding-bottom:calc(var(--s7) + 88px + env(safe-area-inset-bottom, 0px))}
}
@media(max-width:640px){
  .page-header{flex-direction:column;align-items:stretch}
  .page-title{font-size:1.6rem}
  .stats-grid,.stat-grid,.stats-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
  .stat-card{min-width:0}
  .receipt-grid{grid-template-columns:1fr}
  .modal-actions,.modal__foot,.receipt-actions{flex-direction:column-reverse;align-items:stretch}
  .modal-actions .btn,.modal__foot .btn{width:100%}
}

/* ── small phones: keep the topnav inside the viewport ── */
@media (max-width:480px){
  .topnav__inner{padding:8px var(--s4);gap:var(--s2)}
  .nav-left{gap:var(--s2);min-width:0}
  .logo__word,.masthead__word{font-size:1.02rem;white-space:nowrap}
  .nav-right .btn-outline-sm{padding:8px 12px}
}