/* Faceit-style shell layer (A2)
   Loaded AFTER app.css to override conflicting theme blocks safely.
   Scope: authenticated app pages using sidebar + topbar.
*/

:root{
  --bg: #0b0d12;
  --panel: rgba(255,255,255,.045);
  --panel-2: rgba(0,0,0,.22);
  --border: rgba(255,255,255,.10);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.66);
  --muted-2: rgba(255,255,255,.50);

  /* Faceit-ish orange */
  --neon: #ff5500;
  --neon-rgb: 255,85,0;

  --orange: #ff8a4a;
  --orange-rgb: 255,138,74;
  --cyan: #6fb6ff;
  --cyan-rgb: 111,182,255;

  --red: #ff3b3b;
  --red-rgb: 255,59,59;

  --hud-radius: 18px;
  --hud-radius-sm: 12px;
}

html,body{background: var(--bg)}
body{
  background:
    radial-gradient(980px 740px at 10% 0%, rgba(var(--neon-rgb), .14), transparent 60%),
    radial-gradient(1100px 820px at 90% 10%, rgba(255,255,255,.06), transparent 55%),
    radial-gradient(860px 680px at 50% 120%, rgba(var(--cyan-rgb), .10), transparent 60%),
    var(--bg);
}

html.no-scroll, html.no-scroll body{overflow:hidden}

/* Make the shell feel tighter and consistent */
.container{max-width: 1680px; padding: 14px 18px 36px; gap: 16px}

.topbar{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(14px);
  border-radius: var(--hud-radius);
}

/* Mobile off-canvas sidebar */
@media (max-width: 979.98px){
  .container{display:block; padding: 12px 12px 30px}

  .sidebar{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(320px, 86vw);
    margin: 0;
    border-radius: 0;
    transform: translateX(-105%);
    transition: transform .18s ease;
    z-index: 1000;
  }
  .sidebar.open{transform: translateX(0)}

  .scrim{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.62);
    z-index: 900;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
  }
  .scrim.show{opacity:1; pointer-events:auto}

  /* top spacing for main */
  .main{padding: 0; min-width: 0}

  /* show mobile menu button in topbar */
  .topbar .mobile-menu{display:inline-flex}
}

/* Desktop: hide mobile menu button, keep collapse button on sidebar */
@media (min-width: 980px){
  .topbar .mobile-menu{display:none}
}

/* Button style tweaks for Faceit look */
.btn.primary{
  background: rgba(var(--neon-rgb), .14);
  border-color: rgba(var(--neon-rgb), .32);
}
.btn.primary:hover{background: rgba(var(--neon-rgb), .22)}

/* Make reason tags / pills nicer */
.pill, .badge{
  border-radius: 999px;
}