/* A3.1 — Readability + Faceit-like flat panels
   ------------------------------------------------
   CSS-first rework to make the UI feel Faceit-esque:
   - flatter surfaces (less glass/blur/glow)
   - higher contrast borders
   - readable buttons + tables
   - tighter typography + spacing
*/

:root{
  --bg: #0b0d12;
  --panel: #12151b;
  --panel-2: #0f1217;

  --border: rgba(255,255,255,.10);
  --border-strong: rgba(255,255,255,.16);

  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.68);
  --muted-2: rgba(255,255,255,.52);

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

  /* Tighter radii */
  --hud-radius: 14px;
  --hud-radius-sm: 10px;

  /* Shadows (subtle) */
  --shadow-tight: 0 10px 24px rgba(0,0,0,.45);
  --shadow-soft: 0 16px 40px rgba(0,0,0,.55);
  --shadow: 0 24px 70px rgba(0,0,0,.70);
  --shadow-glow: none;
  --shadow-glow-strong: none;
}

html, body{background: var(--bg)}

/* Remove old glow/grid layers for readability */
body::before,
body::after{display:none !important}

body{
  background: radial-gradient(900px 600px at 12% 0%, rgba(var(--neon-rgb), .08), transparent 55%), var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.45;
}

/* Shell */
.container{max-width: 1680px; padding: 14px 18px 36px; gap: 16px}
.main{padding: 0;}

/* Topbar + Sidebar — flat surfaces */
.topbar{
  background: var(--panel-2) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-tight) !important;
  backdrop-filter: none !important;
}

.sidebar{
  background: var(--panel-2) !important;
  border-color: var(--border) !important;
  backdrop-filter: none !important;
}

/* Nav links — clearer hit targets */
.nav a{
  border-radius: 10px;
  color: var(--muted);
  border: 1px solid transparent;
}
.nav a:hover{
  background: rgba(255,255,255,.05);
  color: var(--text);
  border-color: rgba(255,255,255,.08);
}
.nav a.active{
  background: rgba(var(--neon-rgb), .12);
  border-color: rgba(var(--neon-rgb), .38);
  color: #fff;
}

/* Cards — no glass, no gradients */
.card, .hud-card,
.fc-kpi{
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-tight) !important;
}
.card::before, .card::after,
.hud-card::before, .hud-card::after{display:none !important}

/* Buttons — readable */
.btn{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid var(--border-strong) !important;
  color: #fff !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.btn:hover{
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.22) !important;
  transform: none !important;
}

.btn.primary{
  background: rgb(var(--neon-rgb)) !important;
  border-color: rgb(var(--neon-rgb)) !important;
  color: #101114 !important;
  font-weight: 700;
}
.btn.primary:hover{filter: brightness(1.05) !important}

/* Inputs */
input[type="text"], input[type="search"], input[type="number"], input[type="email"], input[type="password"], select, textarea{
  background: var(--panel-2) !important;
  border: 1px solid var(--border-strong) !important;
  color: #fff !important;
  border-radius: 10px !important;
}
input::placeholder, textarea::placeholder{color: rgba(255,255,255,.45) !important}

/* Tables — more readable */
table{width:100%; border-collapse: separate; border-spacing: 0}

thead th{
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid var(--border);
  color: rgba(255,255,255,.78);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

tbody td{
  border-bottom: 1px solid rgba(255,255,255,.06);
  color: rgba(255,255,255,.90);
}

tbody tr:nth-child(even){background: rgba(255,255,255,.02)}

tbody tr:hover{background: rgba(255,255,255,.05)}

/* Pills / badges */
.pill, .badge, .tag{
  background: rgba(0,0,0,.22) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}

/* Mobile scrim contrast */
.scrim{background: rgba(0,0,0,.70) !important}

/* Focus */
:focus-visible{ outline: 2px solid rgba(var(--neon-rgb), .65); outline-offset: 2px; }