/* ============================================================
   HLstatsX:CE — "SourceBans++ 2026" look
   Matches the SourceBans++ panel (zinc neutrals, orange accent,
   Inter). Dark by default, follows the OS light setting.
   Pure CSS: no page logic is changed by this file.
   ============================================================ */
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('fonts/Inter-Variable.woff2') format('woff2');
}

:root {
  color-scheme: dark;
  --brand-500:#f97316; --brand-600:#ea580c; --brand-700:#c2410c;
  --bg-page:#09090b; --bg-surface:#18181b; --bg-muted:#27272a; --bg-row-alt:#1c1c1f;
  --border:#27272a; --text:#f4f4f5; --text-muted:#a1a1aa; --text-faint:#71717a;
  --accent:#ea580c; --accent-hover:#c2410c; --active-bg:#c2410c;
  --link:#fb923c;
  --success:#34d399; --danger:#f87171;
  --font-sans:'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --radius-md:.375rem; --radius-xl:.75rem;
}
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --bg-page:#fafafa; --bg-surface:#ffffff; --bg-muted:#f4f4f5; --bg-row-alt:#fafafa;
    --border:#e4e4e7; --text:#18181b; --text-muted:#71717a; --text-faint:#a1a1aa;
    --link:#c2410c; --active-bg:#18181b; --success:#059669; --danger:#dc2626;
  }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--bg-page); color:var(--text);
  font-family:var(--font-sans); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
tr, td, th, div, span, body, p, li, input, select, textarea, button, tt {
  font-family:var(--font-sans);
}
td, th { font-size:inherit; font-weight:inherit; }
h1, h2, h3 { font-family:var(--font-sans); font-size:1rem; }
a, a:link, a:visited, a:active { color:var(--link); text-decoration:none; }
a:hover { color:var(--text); text-decoration:none; }
img { vertical-align:middle; border:0; }
ul { margin:0; padding:0; }
li { margin:0; }
hr { border:0; border-top:1px solid var(--border); }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }

/* ---------- app shell ---------- */
.app { min-height:100vh; display:flex; }
.sidebar {
  width:15rem; flex-shrink:0; height:100vh; position:sticky; top:0; align-self:flex-start;
  background:var(--bg-surface); border-right:1px solid var(--border);
  display:flex; flex-direction:column; z-index:40;
}
.sidebar__brand {
  height:3.5rem; padding:0 1rem; display:flex; align-items:center; gap:.625rem;
  border-bottom:1px solid var(--border); font-weight:600; font-size:.875rem;
}
.sidebar__brand a { color:var(--text); display:flex; align-items:center; gap:.625rem; }
.sidebar__brand-mark {
  width:1.75rem; height:1.75rem; border-radius:.5rem; background:var(--accent);
  display:inline-flex; align-items:center; justify-content:center; color:#fff;
}
.sidebar__brand-mark svg { width:1rem; height:1rem; }
.sidebar__nav { flex:1; overflow-y:auto; display:flex; flex-direction:column; padding:.75rem .5rem; }
.sidebar__section { display:flex; flex-direction:column; gap:.125rem; margin-bottom:1.25rem; }
.sidebar__section-label {
  padding:0 .75rem .375rem; font-size:.625rem; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-faint);
}
.sidebar__link, .sidebar__link:link, .sidebar__link:visited {
  display:flex; align-items:center; gap:.625rem; padding:0 .75rem; height:2rem;
  border-radius:var(--radius-md); color:var(--text); font-weight:500; font-size:.875rem;
  transition:background-color .15s; width:100%;
}
.sidebar__link svg { width:1rem; height:1rem; flex-shrink:0; fill:none; stroke:currentColor;
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.sidebar__link:hover { background:var(--bg-muted); color:var(--text); }
.sidebar__link[aria-current="page"] { background:var(--active-bg); color:#fff; }
.sidebar__link--ext svg.ext { margin-left:auto; width:.75rem; height:.75rem; opacity:.6; }
.sidebar__games { padding:0 .5rem; }
.sidebar__games ul { list-style:none; display:flex; flex-wrap:wrap; gap:.25rem; }
.sidebar__games li { list-style:none; float:none; padding:0; }
.sidebar__footer { padding:.75rem; border-top:1px solid var(--border); font-size:.75rem; color:var(--text-muted); }
.sidebar__footer a { color:var(--text-muted); }
.sidebar__footer a:hover { color:var(--text); }

.main { flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar {
  height:3.5rem; position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:.5rem;
  padding:0 1.25rem; background:color-mix(in srgb, var(--bg-page) 85%, transparent);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--border);
}
.topbar__breadcrumbs { display:flex; align-items:center; gap:.375rem; color:var(--text-muted); font-size:.875rem; flex-wrap:wrap; }
.topbar__breadcrumbs a { color:var(--text-muted); }
.topbar__breadcrumbs a:hover { color:var(--text); }
.topbar__breadcrumbs .sep { color:var(--text-faint); }
.topbar__breadcrumbs [aria-current] { color:var(--text); font-weight:500; }
.topbar__spacer { flex:1; }
.topbar__btn, a.topbar__btn, a.topbar__btn:link, a.topbar__btn:visited {
  display:inline-flex; align-items:center; justify-content:center; width:2rem; height:2rem;
  border-radius:var(--radius-md); color:var(--text-muted); background:transparent; border:0; cursor:pointer; padding:0;
}
.topbar__btn:hover { background:var(--bg-muted); }
.topbar__btn:hover { background:var(--bg-muted); color:var(--text); }
.topbar__btn svg { width:1.1rem; height:1.1rem; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.topbar__menu { display:none; }
.topbar form { margin:0; }
.topbar select { height:2rem; }

.content { padding:1.5rem; width:100%; max-width:1500px; margin:0 auto; flex:1; background:transparent; color:var(--text); }

/* ---------- blocks / headings ---------- */
.block { margin:0 0 1.25rem 0; background:transparent; }
.subblock { margin:0 0 1rem 0; overflow-x:auto; }
.fHeading, span.fHeading {
  font-size:.8125rem; font-weight:600; color:var(--text); letter-spacing:.01em; line-height:1.5;
}
span.fHeading img[src*="downarrow"] { display:none; }
.fTitle { font-size:1.25rem; font-weight:600; }
.fNormal { font-size:.8125rem; font-weight:400; padding-left:0; color:var(--text); }
.fSmall { font-size:.8125rem; color:var(--text); }
.headerblock { display:none; }

/* ---------- tables ---------- */
.data-table, table.data-table {
  width:100%; border-collapse:separate; border-spacing:0; background:var(--bg-surface);
  border:1px solid var(--border); border-radius:var(--radius-xl); overflow:hidden; font-size:.8125rem;
}
.data-table td { padding:.625rem .75rem; border:0; border-bottom:1px solid var(--border); text-align:left; vertical-align:middle; }
.data-table tr:last-child td { border-bottom:0; }
.data-table-head, tr.data-table-head, .data-table-head td, tr.data-table-head td {
  background:var(--bg-muted); color:var(--text-muted); border:0; vertical-align:middle;
  background-image:none !important;
}
tr.data-table-head td {
  font-size:.625rem !important; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-muted); border-bottom:1px solid var(--border);
}
.data-table-head a, .data-table-head a:link, .data-table-head a:visited, .data-table-head a:active { color:var(--text-muted); }
.data-table-head a:hover { color:var(--text); }
.data-table-row, tr.data-table-row { background:var(--bg-muted); color:var(--text); border:0; }
.bg1 { background-color:var(--bg-surface); }
.bg2 { background-color:var(--bg-row-alt); }
.data-table tr:hover td.bg1, .data-table tr:hover td.bg2 { background-color:var(--bg-muted); }
td.bg1, td.bg2 { color:var(--text); }
.tableicon { margin:0 4px; }
.tsicon { vertical-align:middle; }
.bargraph { height:10px; border-radius:3px; }

.game-table-row { background:var(--bg-surface); }
.game-table-row-hover { background:var(--bg-muted); }
.game-table-cell {
  color:var(--text); vertical-align:middle; border:0; border-bottom:1px solid var(--border); padding:.625rem .75rem;
}
.game-table-cell a { color:var(--link); }
.game-table-cell a:hover { color:var(--text); }
.livestats-table { border:0; border-collapse:collapse; width:100%; }
.livestats-table td { border:0; padding:2px; text-align:center; }
table { border-color:var(--border); }

/* ---------- forms ---------- */
input, textarea, select { font-size:.8125rem; color:var(--text); }
input[type="text"], input[type="password"], input[type="search"], input[type="number"], input.textbox, textarea, select {
  background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:.35rem .6rem; min-height:2rem;
}
input.textbox, input.checkbox { border-width:1px; }
input[type="checkbox"], input[type="radio"] { accent-color:var(--accent); }
input[type="submit"], input.submit, input.smallsubmit, button, input[type="button"] {
  background:var(--accent); color:#fff; border:0; border-radius:var(--radius-md); cursor:pointer;
  height:2rem; padding:0 .9rem; font-weight:500; font-size:.8125rem;
}
input.smallsubmit { height:1.75rem; font-size:.75rem; }
input[type="submit"]:hover, input.submit:hover, input.smallsubmit:hover, button:hover, input[type="button"]:hover { background:var(--accent-hover); }
option { background:var(--bg-surface); color:var(--text); }
::placeholder { color:var(--text-faint); }

/* ---------- tabs / accordions ---------- */
ul.subsection_tabs, ul.register_tabs { list-style:none; margin:0 0 1rem 0; padding:0; display:flex; gap:.25rem; flex-wrap:wrap; border-bottom:1px solid var(--border); height:auto; clear:both; }
ul.subsection_tabs li, ul.register_tabs li { float:none; margin:0; padding:0; }
ul.subsection_tabs li a {
  display:block; height:auto; width:auto; padding:.5rem .9rem; border-radius:var(--radius-md) var(--radius-md) 0 0;
  background:transparent; color:var(--text-muted); font-weight:500; text-align:center; border:0;
}
ul.subsection_tabs li a:hover { color:var(--text); background:var(--bg-muted); }
ul.subsection_tabs li a.active, ul.register_tabs li a.active { background:var(--active-bg); color:#fff; }
table#accordion { border-collapse:collapse; }

/* ---------- notices ---------- */
.warning, .errortext, .errorhead {
  border:1px solid var(--danger); background:color-mix(in srgb, var(--danger) 12%, transparent);
  border-radius:var(--radius-md); padding:.75rem 1rem; color:var(--text);
}
.errorhead { font-weight:600; }
.helpwindow { background:var(--bg-surface); color:var(--text); border:1px solid var(--border); border-radius:var(--radius-md); font-family:var(--font-sans); }
.gmapstab, .gmapstab td, .gmapstabtitle { color:#18181b; }
.gmapstab a { color:#c2410c; }

/* ---------- footer ---------- */
#footer { text-align:center; opacity:.9; padding:1rem 0 .25rem; }
.app-footer { color:var(--text-muted); font-size:.75rem; text-align:center; padding:1rem 0 2rem; }
.app-footer a { color:var(--text-muted); }
.app-footer a:hover { color:var(--text); }

/* ---------- ingame / misc ---------- */
.weapon { text-decoration:none; }
tt { font-family:ui-monospace, Menlo, monospace; font-size:.8125rem; }
.arrow { color:var(--text-faint); }

/* ---------- responsive ---------- */
@media (max-width:1024px) {
  .sidebar { position:fixed; left:0; top:0; transform:translateX(-100%); transition:transform .2s; box-shadow:0 10px 30px rgb(0 0 0 / .4); }
  .sidebar[data-mobile-open="true"] { transform:translateX(0); }
  .topbar__menu { display:inline-flex; }
  .content { padding:1rem; }
}