/* =====================================================================
   LE Bans panel, design v3 (2026-10-27). Loaded LAST, after le.css.
   Goal: a calm, readable admin tool. Inter for UI, JetBrains Mono for
   ids/numbers, sentence case, compact tables, one red accent.
   Revert: remove the le3.css <link> in includes/layout.php, login.php,
   check.php.
   ===================================================================== */
:root {
  --bg-0: #0a0b0d; --bg-1: #0f1013; --bg-2: #141519; --bg-3: #1a1b20; --bg-4: #222329;
  --border: #24262c; --border-light: #30323a;
  --fg: #ececee; --fg-2: #a9abb3; --fg-dim: #74767f;
  --accent: #ef3b45; --accent-rgb: 239, 59, 69; --accent-hover: #d92f39;
  --accent-glow: rgba(239, 59, 69, .10); --accent-glow-strong: rgba(239, 59, 69, .28);
  --good: #3ecf8e; --good-bg: rgba(62, 207, 142, .10);
  --warn: #e9b44c; --warn-bg: rgba(233, 180, 76, .10);
  --bad: #ef3b45; --bad-bg: rgba(239, 59, 69, .10);
  --perm: #c9cbd2; --perm-bg: rgba(201, 203, 210, .08);
  --radius: 10px; --radius-sm: 7px;
  --shadow-card: none; --shadow-lg: 0 24px 64px rgba(0, 0, 0, .5);
  --font-display: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --sidebar-w: 236px; --topbar-h: 56px;
  --bg: #0a0b0d;
}
html[data-theme="dark"] body, html:not([data-theme="light"]) body, body {
  background: var(--bg-0) !important;
  font-family: var(--font-body); font-size: 14px; line-height: 1.5; color: var(--fg);
  font-feature-settings: "cv11";
  -webkit-font-smoothing: antialiased;
}
body::before, body::after { display: none !important; }
h1, h2, h3, h4 { font-family: var(--font-body) !important; letter-spacing: -.01em !important; text-transform: none !important; }
h2 { font-size: 14px !important; font-weight: 600 !important; color: var(--fg) !important; }
h2::before { display: none !important; }
a { color: var(--fg); text-decoration: none; }
a:hover { color: #fff; }
.text-dim, .muted { color: var(--fg-dim) !important; }
.mono, code, kbd { font-family: var(--font-mono) !important; font-size: 12.5px; }

/* ---- Sidebar ---------------------------------------------------------- */
.sidebar { width: var(--sidebar-w) !important; background: var(--bg-1) !important; border-right: 1px solid var(--border) !important;
  display: flex !important; flex-direction: column !important; height: 100vh !important; }
.sidebar-brand { padding: 16px 16px 14px !important; border-bottom: 1px solid var(--border) !important; }
.brand-icon { width: 30px !important; height: 30px !important; }
.brand-title { font-family: "Russo One", var(--font-body) !important; font-size: 15px !important; letter-spacing: .01em !important; }
.brand-sub { font-family: var(--font-body) !important; font-size: 11.5px !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--fg-dim) !important; margin-top: 3px !important; }
.sidebar-nav { flex: 1 1 auto !important; overflow-y: auto !important; padding: 8px 10px 16px !important; scrollbar-width: thin; scrollbar-color: var(--border-light) transparent; }
.nav-section-label { font-family: var(--font-body) !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: .02em !important;
  text-transform: none !important; color: var(--fg-dim) !important; padding: 18px 10px 6px !important; }
.nav-item { font-family: var(--font-body) !important; font-size: 13.5px !important; font-weight: 500 !important; letter-spacing: 0 !important;
  text-transform: none !important; color: var(--fg-2) !important; padding: 7px 10px !important; border-radius: var(--radius-sm) !important; gap: 10px !important; margin: 1px 0 !important; }
.nav-item:hover { background: var(--bg-3) !important; color: var(--fg) !important; }
.nav-item.active { background: var(--bg-4) !important; color: #fff !important; }
.nav-item.active::before { display: none !important; }
.nav-item.active .nav-icon { color: var(--accent) !important; }
.nav-icon { color: var(--fg-dim) !important; }
.nav-icon svg { width: 16px !important; height: 16px !important; }
.nav-badge { font-family: var(--font-mono) !important; font-size: 11px !important; font-weight: 600 !important; background: var(--bg-4) !important; color: var(--fg-2) !important;
  border-radius: 999px !important; padding: 1px 7px !important; box-shadow: none !important; }
.nav-item.active .nav-badge { background: var(--accent) !important; color: #fff !important; }
.nav-badge.pulse { background: var(--accent) !important; color: #fff !important; }
.sidebar-footer { flex: 0 0 auto !important; border-top: 1px solid var(--border) !important; padding: 12px 18px !important; position: static !important; }
.sidebar-links a { font-family: var(--font-body) !important; font-size: 12.5px !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--fg-dim) !important; }
.sidebar-links a:hover { color: var(--fg) !important; }

/* ---- Topbar ----------------------------------------------------------- */
.topbar { height: var(--topbar-h) !important; background: rgba(10, 11, 13, .86) !important; backdrop-filter: blur(10px); border-bottom: 1px solid var(--border) !important; }
.page-title { font-family: var(--font-body) !important; font-size: 15px !important; font-weight: 600 !important; letter-spacing: -.01em !important; text-transform: none !important; }
.breadcrumbs, .breadcrumbs .crumb { font-family: var(--font-body) !important; font-size: 12px !important; letter-spacing: 0 !important; color: var(--fg-dim) !important; }
.breadcrumbs .crumb-current { color: var(--fg-2) !important; }
.user-pill { background: transparent !important; border: 1px solid var(--border) !important; padding: 4px 10px 4px 4px !important; border-radius: 999px !important; }
.user-avatar { width: 28px !important; height: 28px !important; border-radius: 999px !important; background: var(--accent) !important; font-family: var(--font-body) !important; font-weight: 700 !important; font-size: 12px !important; }
.user-name { font-size: 13px !important; }
.user-level { font-family: var(--font-body) !important; font-size: 11px !important; letter-spacing: 0 !important; text-transform: none !important; }
.theme-toggle, .palette-btn, .logout-btn, .mobile-toggle { width: 34px !important; height: 34px !important; background: transparent !important; border: 1px solid var(--border) !important; border-radius: 999px !important; }
.theme-toggle:hover, .palette-btn:hover, .logout-btn:hover { background: var(--bg-3) !important; border-color: var(--border-light) !important; }

main { padding: 24px 28px 48px !important; max-width: 1480px; }

/* ---- Cards ------------------------------------------------------------ */
.card, .stat-card, .server-card, .form-card, .geo-card, .ev-card, .login-box, .drawer, .cmdk-panel, .panel {
  background: var(--bg-2) !important; border: 1px solid var(--border) !important; border-radius: var(--radius) !important; box-shadow: none !important; }
.card::before, .card::after, .panel::before, .stat-card::before, .stat-card::after { display: none !important; }
.card-header, .panel-head { border-bottom: 1px solid var(--border) !important; padding: 12px 16px !important; min-height: 0 !important; background: none !important; }
.card-header h2, .card-header h3, .panel-head h2, .panel-head h3, .card-title { font-size: 13.5px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--fg) !important; }
.card-header small, .panel-head small { font-family: var(--font-body) !important; color: var(--fg-dim) !important; font-weight: 500; }
.card-body { padding: 16px !important; }

/* KPI */
.stats-grid { gap: 12px !important; }
.stat-card { padding: 14px 16px !important; min-height: 0 !important; }
.stat-value { font-family: var(--font-body) !important; font-size: 26px !important; font-weight: 700 !important; letter-spacing: -.02em !important; line-height: 1.1 !important; color: var(--fg) !important; text-shadow: none !important; }
.stat-label { font-family: var(--font-body) !important; font-size: 12.5px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--fg-dim) !important; margin-top: 4px !important; }
.stat-decoration { opacity: .35 !important; color: var(--fg-dim) !important; }
.stat-card.is-zero .stat-value { color: var(--fg-dim) !important; }
.stat-card:not(.is-zero).accent-red .stat-value { color: var(--accent) !important; }

/* ---- Tables ----------------------------------------------------------- */
table, table.data { font-size: 13px !important; border-collapse: collapse !important; }
thead, thead tr { background: none !important; }
th { font-family: var(--font-body) !important; font-size: 11.5px !important; font-weight: 600 !important; letter-spacing: .01em !important; text-transform: none !important;
  color: var(--fg-dim) !important; background: var(--bg-1) !important; padding: 9px 14px !important; border-bottom: 1px solid var(--border) !important; border-top: 0 !important; white-space: nowrap; }
thead tr, thead th { box-shadow: none !important; }
thead::after, thead tr::after, table thead tr th::after { display: none !important; }
td { padding: 9px 14px !important; border-bottom: 1px solid var(--border) !important; vertical-align: middle !important; color: var(--fg); }
tbody tr { transition: background .12s; }
tbody tr:hover td { background: rgba(255, 255, 255, .025) !important; }
tbody tr:last-child td { border-bottom: 0 !important; }
td small, td .text-dim { font-size: 11.5px !important; }
.player-cell .mono, td .mono { color: var(--fg-dim) !important; font-size: 11.5px !important; }
.table-wrap { border-radius: 0 0 var(--radius) var(--radius); }
.kv th, .kv td, table.kv td:first-child { background: none !important; }
.kv td:first-child, .kv th { color: var(--fg-dim) !important; font-size: 12.5px !important; text-align: left !important; width: 170px; white-space: nowrap; }

/* ---- Badges ----------------------------------------------------------- */
.badge { font-family: var(--font-body) !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important;
  padding: 2px 8px !important; border-radius: 999px !important; border: 1px solid transparent !important; box-shadow: none !important; line-height: 1.5 !important; }
.badge.perm, .badge-perm, .badge.permanent { background: var(--perm-bg) !important; color: var(--perm) !important; }
.badge.good, .badge.unban, .badge.success, .badge-active-good { background: var(--good-bg) !important; color: var(--good) !important; }
.badge.warn, .badge.expired, .badge-warn { background: var(--warn-bg) !important; color: var(--warn) !important; }
.badge.bad, .badge.danger, .badge.active { background: var(--bad-bg) !important; color: var(--bad) !important; }
.flag-pill { font-family: var(--font-body) !important; letter-spacing: 0 !important; text-transform: none !important; border-radius: 999px !important; }

/* ---- Buttons / forms -------------------------------------------------- */
.btn, button[type=submit], .login-submit, .ro-btn {
  font-family: var(--font-body) !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important;
  border-radius: var(--radius-sm) !important; padding: 7px 14px !important; box-shadow: none !important; background-image: none !important;
  background-color: var(--accent) !important; color: #fff !important; border: 1px solid var(--accent) !important; transform: none !important; }
.btn:hover, button[type=submit]:hover, .login-submit:hover { background-color: var(--accent-hover) !important; border-color: var(--accent-hover) !important; }
.btn.ghost, .btn-ghost, .btn.secondary, .ro-btn { background-color: transparent !important; color: var(--fg-2) !important; border-color: var(--border-light) !important; }
.btn.ghost:hover, .btn-ghost:hover, .btn.secondary:hover, .ro-btn:hover { background-color: var(--bg-3) !important; color: var(--fg) !important; }
.btn.danger { background-color: transparent !important; color: var(--bad) !important; border-color: rgba(239, 59, 69, .4) !important; }
.btn.danger:hover { background-color: var(--bad-bg) !important; }
.btn-sm { padding: 4px 10px !important; font-size: 12px !important; }
.btn::before, .btn::after { display: none !important; }
input, select, textarea { font-family: var(--font-body) !important; font-size: 13.5px !important; background: var(--bg-1) !important; border: 1px solid var(--border-light) !important;
  border-radius: var(--radius-sm) !important; color: var(--fg) !important; box-shadow: none !important; }
input:focus, select:focus, textarea:focus { border-color: var(--accent) !important; outline: none !important; box-shadow: 0 0 0 3px var(--accent-glow) !important; }
label, .label, .form-row > label { font-family: var(--font-body) !important; font-size: 12.5px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--fg-2) !important; }
::placeholder { color: var(--fg-dim) !important; }

/* tabs */
.d-tab, .tab, .tabs a { font-family: var(--font-body) !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; box-shadow: none !important; }
.d-tab::after, .d-tab::before { box-shadow: none !important; }

/* flash */
.flash { border-radius: var(--radius-sm) !important; font-size: 13.5px !important; box-shadow: none !important; }

/* pagination */
.pagination a, .pagination span { font-family: var(--font-body) !important; border-radius: var(--radius-sm) !important; }

/* server status: stale servers fade */
.server-card { padding: 14px !important; }

/* ---- Login + public checker -------------------------------------------- */
body.le-check, .login-page { background: radial-gradient(800px 400px at 50% -120px, rgba(239, 59, 69, .10), transparent 70%), var(--bg-0) !important; }
body.le-check h1, .login-box h1 { font-family: var(--font-body) !important; font-weight: 700 !important; letter-spacing: -.02em !important; text-transform: none !important; }
body.le-check .sub, body.le-check .subtitle, .login-sub { font-family: var(--font-body) !important; letter-spacing: 0 !important; text-transform: none !important; font-size: 14px !important; color: var(--fg-2) !important; }
body.le-check .hint, body.le-check .example { font-family: var(--font-body) !important; font-size: 12.5px !important; color: var(--fg-dim) !important; }

/* ---- Mobile ------------------------------------------------------------ */
@media (max-width: 900px) {
  main { padding: 16px !important; }
  .stat-value { font-size: 22px !important; }
  th, td { padding: 8px 10px !important; }
}

/* ---- Light theme keeps working ----------------------------------------- */
html[data-theme="light"] {
  --bg-0: #f6f6f7; --bg-1: #ffffff; --bg-2: #ffffff; --bg-3: #f0f0f2; --bg-4: #e7e7ea;
  --border: #e4e4e8; --border-light: #d4d4da; --fg: #16171a; --fg-2: #4b4d55; --fg-dim: #7b7d86;
  --perm: #3c3e46; --perm-bg: rgba(0, 0, 0, .06);
}
html[data-theme="light"] .topbar { background: rgba(255, 255, 255, .86) !important; }
html[data-theme="light"] .nav-item.active { color: var(--fg) !important; }
html[data-theme="light"] tbody tr:hover td { background: rgba(0, 0, 0, .025) !important; }

/* v3.1: kill the old navy header band, red rules and glows */
.data thead th, table thead th, .data th { background: var(--bg-1) !important; background-image: none !important; border-bottom: 1px solid var(--border) !important; box-shadow: none !important; }
thead, thead tr, tbody, table.data, .data { border-top: 0 !important; box-shadow: none !important; background-image: none !important; }
thead tr { border-bottom: 0 !important; }
.data tbody tr:hover td:first-child { box-shadow: none !important; }
.card-header::before, .card-header::after, .panel-head::before, .panel-head::after, .card-header h2::after { display: none !important; }
.d-tab { background: none !important; box-shadow: none !important; text-shadow: none !important; font-size: 13px !important; padding: 8px 12px !important; border-radius: var(--radius-sm) !important; color: var(--fg-2) !important; }
.d-tab::before, .d-tab::after { display: none !important; }
.d-tab.active { background: var(--bg-4) !important; color: #fff !important; }
.d-tab .badge, .d-tab span { box-shadow: none !important; }
.card .table-wrap, .card > table { margin: 0 !important; }
.table-wrap { padding: 0 !important; }

/* v3.2 */
html body table.data th, html body table.data thead th, html body .data thead th, html body table.data.kv th, html body .kv td:first-child {
  font-family: var(--font-body) !important; font-size: 12px !important; letter-spacing: 0 !important; text-transform: none !important; font-weight: 600 !important; color: var(--fg-dim) !important; }
html body table.data.kv th { text-align: left !important; background: none !important; font-weight: 500 !important; }
html body .mono, html body td.mono, html body .text-dim, html body td small, html body time { letter-spacing: 0 !important; }
html body h2, html body h3, html body .card-header h2, html body .card-title { text-decoration: none !important; border-bottom: 0 !important; background-image: none !important; }
html body h2 > span::after, html body .card-header h2::after, html body .card-header h3::after { display: none !important; }
html body section > h2::after, html body section > h2::before, html body .card-header h2::before { display: none !important; }
html body td, html body td * { letter-spacing: 0 !important; }

/* v3.2: last old-theme leftovers */
html body table.data th, html body table.data thead th, html body .data thead th, html body .kv td:first-child {
  font-family: var(--font-body) !important; font-size: 12px !important; letter-spacing: 0 !important; text-transform: none !important; font-weight: 600 !important; color: var(--fg-dim) !important; }
html body table.data.kv th { text-align: left !important; background: none !important; font-weight: 500 !important; font-family: var(--font-body) !important; font-size: 12.5px !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--fg-dim) !important; }
html body td, html body td *, html body .mono, html body time { letter-spacing: 0 !important; }
html body .card-header::after, html body section > h2::after, html body section > h2::before, html body .card-header h2::before { display: none !important; }
.stat-value, td.r, .num { font-variant-numeric: tabular-nums; }

/* v3.3: mobile filter bar */
@media (max-width: 760px) {
  .filter-bar { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; align-items: stretch !important; padding: 12px !important; }
  .filter-bar > *, .filter-bar input, .filter-bar select, .filter-bar .btn { width: 100% !important; min-width: 0 !important; margin: 0 !important; }
  .filter-bar input[type=search], .filter-bar input[type=text], .filter-bar input[name=q] { grid-column: 1 / -1 !important; height: 40px !important; min-height: 0 !important; }
  .filter-bar select { grid-column: 1 / -1 !important; height: 40px !important; }
  .filter-bar .btn { justify-content: center !important; height: 38px !important; }
  .card-header, .list-header { flex-wrap: wrap !important; gap: 8px !important; }
}

/* v3.4: status tabs (bans/gags lists) */
html body .status-tabs { gap: 4px !important; border: 0 !important; flex-wrap: wrap; }
html body .status-tab { font-family: var(--font-body) !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important;
  color: var(--fg-2) !important; background: none !important; border: 1px solid transparent !important; border-radius: 999px !important; padding: 5px 12px !important; box-shadow: none !important; }
html body .status-tab:hover { background: var(--bg-3) !important; color: var(--fg) !important; }
html body .status-tab.active { background: var(--bg-4) !important; color: #fff !important; border-color: var(--border-light) !important; }
html body .status-tab::after, html body .status-tab::before { display: none !important; }
html body .status-tab span, html body .status-tab .count, html body .status-tab b { font-family: var(--font-body) !important; font-size: 11.5px !important; letter-spacing: 0 !important;
  background: var(--bg-3) !important; color: var(--fg-2) !important; border: 0 !important; border-radius: 999px !important; padding: 0 7px !important; box-shadow: none !important; }
html body .status-tab.active span, html body .status-tab.active .count { background: var(--accent) !important; color: #fff !important; }