/* =====================================================================
   LUDA EKIPA layer for HLstatsX (gameme.luda-ekipa.rs).
   Loaded LAST (after hlx_modern.css and the inline #hlx-modern-vars block)
   so the same design system as luda-ekipa.rs wins: canvas black, silver
   text, one red accent, Michroma / Space Grotesk / JetBrains Mono.
   Revert: remove the <link> in pages/header.php (backup alongside).
   2026-09-12
   ===================================================================== */

:root, html.dark {
  --le-canvas: #07080a; --le-canvas-2: #0b0d11; --le-surface: #101319; --le-raise: #151922; --le-raise-2: #1b202b;
  --le-text: #f2f4f7; --le-text-2: #b6bcc6; --le-text-3: #8b929d; --le-silver: #d8dadd;
  --le-accent: #ff3742; --le-accent-deep: #e8232e; --le-accent-soft: rgba(232, 35, 46, .12); --le-accent-line: rgba(255, 55, 66, .34);
  --le-line: rgba(216, 218, 221, .13); --le-line-strong: rgba(216, 218, 221, .28);
  --le-ok: #35d07a; --le-warn: #d98b6a;
  --le-display: "Michroma", "Eurostile", "Segoe UI", system-ui, sans-serif;
  --le-body: "Space Grotesk", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --le-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --le-radius: 12px; --le-radius-sm: 8px;

  /* retarget the HLstatsX overlay tokens */
  --hlx-accent: var(--le-accent) !important; --hlx-accent-2: var(--le-accent-deep) !important;
  --hlx-mode-c: var(--le-accent) !important;
  --hlx-good: var(--le-ok); --hlx-warn: #f0b35a; --hlx-bad: var(--le-accent);
  --hlx-bg: var(--le-canvas); --hlx-bg-2: var(--le-surface); --hlx-bg-3: var(--le-raise); --hlx-bg-4: var(--le-raise-2);
  --hlx-border: var(--le-line); --hlx-border-2: var(--le-line-strong);
  --hlx-fg: var(--le-text); --hlx-fg-2: var(--le-text-2); --hlx-fg-dim: var(--le-text-3);
}
body[data-hlx-mode] { --hlx-mode-c: var(--le-accent) !important; }

/* ===== Canvas ======================================================= */
html.dark body {
  font-family: var(--le-body) !important;
  font-size: 15px; color: var(--le-text);
  background:
    radial-gradient(900px 520px at -140px -160px, rgba(232, 35, 46, .16), transparent 62%),
    radial-gradient(700px 420px at 108% -60px, rgba(216, 218, 221, .05), transparent 60%),
    repeating-linear-gradient(0deg, rgba(216, 218, 221, .028) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, rgba(216, 218, 221, .028) 0 1px, transparent 1px 64px),
    var(--le-canvas) !important;
}
html.dark ::selection { background: rgba(232, 35, 46, .45); color: #fff; }

/* ===== Sidebar ====================================================== */
html.dark aside.bg-white, html.dark aside.dark\:bg-gray-800 {
  background: linear-gradient(180deg, #0b0d11 0%, #07080a 100%) !important;
  border-right: 1px solid var(--le-line) !important;
  box-shadow: none;
}
html.dark aside a.text-lg.font-bold, html.dark aside a.le-brand {
  display: flex !important; align-items: center; gap: 11px;
  margin: 6px 0 0 18px !important;
  background: none !important; -webkit-text-fill-color: initial !important; filter: none !important;
  font-size: 16px !important; text-decoration: none;
}
.le-brand img { width: 36px; height: 36px; flex: 0 0 auto; }
.le-brand-word { font-family: "Russo One", var(--le-display); font-size: 17px; letter-spacing: .02em; line-height: 1; color: var(--le-text); text-transform: uppercase; }
.le-brand-word b { color: var(--le-accent); font-weight: 400; }
.le-brand-word small { display: block; margin-top: 5px; font-family: var(--le-mono); font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--le-text-3); }
html.dark aside ul.mt-6 { margin-top: 22px !important; padding: 0 8px; }
html.dark aside ul li a {
  margin: 2px 0 !important; padding: 10px 12px 10px 14px !important;
  border-radius: var(--le-radius-sm);
  font-family: var(--le-display) !important; font-size: 10.5px !important; font-weight: 400 !important;
  letter-spacing: .14em; text-transform: uppercase; color: var(--le-text-2) !important;
  transition: background .15s, color .15s;
}
html.dark aside ul li a:hover { background: rgba(216, 218, 221, .06) !important; color: var(--le-text) !important; transform: none; }
html.dark aside ul li a.text-gray-800, html.dark aside ul li a.dark\:text-gray-100 {
  background: var(--le-accent-soft) !important; color: var(--le-text) !important;
}
html.dark aside ul li a.text-gray-800::before, html.dark aside ul li a.dark\:text-gray-100::before {
  left: 0; width: 3px; height: 18px; border-radius: 0 2px 2px 0;
  background: var(--le-accent); box-shadow: 0 0 12px rgba(255, 55, 66, .55);
}
html.dark aside ul li a svg, html.dark aside ul li a i.fas, html.dark aside ul li a i.fa,
html.dark aside ul li:nth-child(n) a svg, html.dark aside ul li:nth-child(n) a i {
  color: var(--le-text-3) !important; width: 16px; height: 16px; font-size: 13px;
}
html.dark aside ul li a:hover svg, html.dark aside ul li a:hover i,
html.dark aside ul li a.dark\:text-gray-100 svg, html.dark aside ul li a.dark\:text-gray-100 i { color: var(--le-accent) !important; transform: none; filter: none; }
html.dark aside ul li a .ml-4 { margin-left: 12px !important; }

/* ===== Topbar ======================================================= */
html.dark header.bg-white, html.dark header.dark\:bg-gray-800, html.dark .py-4.bg-white.dark\:bg-gray-800 {
  background: rgba(7, 8, 10, .82) !important;
  border-bottom: 1px solid var(--le-line) !important;
  box-shadow: none !important;
}
html.dark header a[href*="hlstats.php?game="] {
  font-family: var(--le-display) !important; font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--le-text-2) !important; font-weight: 400;
}
html.dark header a[href*="hlstats.php?game="]:hover { color: var(--le-text) !important; }
html.dark header button[aria-label="Notifications"] {
  background: var(--le-accent-deep) !important; border: 1px solid rgba(255, 255, 255, .08) !important;
  border-radius: var(--le-radius-sm) !important; padding: 8px 16px !important;
  font-family: var(--le-display) !important; font-size: 10.5px !important; letter-spacing: .14em; text-transform: uppercase; font-weight: 400 !important;
  color: #fff !important; box-shadow: 0 8px 22px -10px rgba(232, 35, 46, .7) !important;
}
html.dark header button[aria-label="Notifications"]:hover { background: var(--le-accent) !important; filter: none; transform: none; }
html.dark header button[aria-label="Notifications"]::after { content: " \25BE"; opacity: .8; }
html.dark header ul[aria-label="submenu"] {
  background: var(--le-surface) !important; border: 1px solid var(--le-line-strong) !important;
  border-radius: var(--le-radius) !important; box-shadow: 0 22px 60px rgba(0, 0, 0, .55) !important; padding: 6px !important;
}
html.dark header ul[aria-label="submenu"] a { border-radius: 6px; font-weight: 600; }
html.dark header ul[aria-label="submenu"] a:hover { background: var(--le-accent-soft) !important; color: var(--le-text) !important; }
html.dark header button[aria-label="Menu"] { color: var(--le-text) !important; }

/* Search */
.hlx-search-input {
  background-color: var(--le-surface); border: 1px solid var(--le-line-strong); border-radius: var(--le-radius-sm);
  font-family: var(--le-body); font-size: 13px; color: var(--le-text);
}
.hlx-search-input:focus { border-color: var(--le-accent); box-shadow: 0 0 0 3px var(--le-accent-soft); }
.hlx-search-dropdown { background: var(--le-surface); border-color: var(--le-line-strong); border-radius: var(--le-radius); }
.hlx-search-section-h { font-family: var(--le-display); font-size: 9px; letter-spacing: .18em; color: var(--le-text-3); }
.hlx-search-row:hover { background: var(--le-accent-soft); border-left-color: var(--le-accent); }

/* ===== Title bars, headings ======================================== */
.windmill-title-bar, html.dark .windmill-title-bar {
  background: linear-gradient(90deg, rgba(232, 35, 46, .16), rgba(16, 19, 25, .9) 55%) !important;
  border: 1px solid var(--le-line) !important; border-left: 3px solid var(--le-accent) !important;
  border-radius: var(--le-radius) !important; box-shadow: var(--le-shadow, 0 2px 12px rgba(0, 0, 0, .35)) !important;
  color: var(--le-text) !important;
  font-family: var(--le-display) !important; font-size: 13px !important; font-weight: 400 !important; letter-spacing: .16em; text-transform: uppercase;
  padding: 16px 20px !important;
}
.windmill-title-bar a { color: var(--le-text) !important; }
html.dark h4.mb-4.font-semibold, html.dark h4.mb-4.text-lg.font-semibold {
  font-family: var(--le-display) !important; font-size: 11px !important; font-weight: 400 !important;
  letter-spacing: .18em !important; text-transform: uppercase !important; color: var(--le-text-2) !important;
  display: flex; align-items: center; gap: 12px;
}
html.dark h4.mb-4.font-semibold::before, html.dark h4.mb-4.text-lg.font-semibold::before {
  content: ''; width: 22px; height: 2px; background: var(--le-accent); flex: 0 0 auto;
}
html.dark h1, html.dark h2, html.dark h3 { font-family: var(--le-display); font-weight: 400; letter-spacing: .02em; color: var(--le-text); }

/* ===== Cards / panels =============================================== */
html.dark .bg-white, html.dark .dark\:bg-gray-800 {
  background: var(--le-surface) !important; border: 1px solid var(--le-line) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .35) !important;
}
html.dark .rounded-lg.shadow-xs, html.dark .rounded-lg.shadow-md, html.dark .rounded-lg.shadow-lg { border-radius: var(--le-radius) !important; }
html.dark .min-w-0.p-4.bg-white, html.dark .min-w-0.p-4.dark\:bg-gray-800 { background-image: none !important; background-color: var(--le-surface) !important; }
html.dark .min-w-0.p-4.bg-white::before, html.dark .min-w-0.p-4.dark\:bg-gray-800::before,
html.dark .flex.items-center.p-4.bg-white::before, html.dark .flex.items-center.p-4.dark\:bg-gray-800::before {
  height: 1px; background: linear-gradient(90deg, var(--le-accent), rgba(255, 55, 66, .25) 45%, transparent 80%);
}
html.dark main > div:first-of-type::before { display: none; }

/* Front-page stat cards: one accent, mono digits */
html.dark .flex.items-center.p-4 .rounded-full,
html.dark .flex.items-center.p-4 .rounded-full[class*="bg-"] {
  background: var(--le-accent-soft) !important; color: var(--le-accent) !important;
  border: 1px solid var(--le-accent-line); border-radius: 10px !important; box-shadow: none !important;
}
html.dark .flex.items-center.p-4 > div:last-child > p:first-child {
  font-family: var(--le-display); font-size: 9.5px !important; letter-spacing: .18em; color: var(--le-text-3) !important;
}
html.dark .flex.items-center.p-4 > div:last-child > p:last-child {
  font-family: var(--le-mono) !important; font-size: 1.45rem !important; font-weight: 700 !important; letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}
html.dark .flex.items-center.p-4.bg-white:hover, html.dark .flex.items-center.p-4.dark\:bg-gray-800:hover {
  transform: translateY(-2px); border-color: var(--le-accent-line) !important; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .7) !important;
}

/* ===== Tables ======================================================= */
html.dark table thead th, html.dark table.data-table thead th {
  background: var(--le-raise) !important; color: var(--le-text-3) !important;
  font-family: var(--le-display) !important; font-size: 9px !important; font-weight: 400 !important; letter-spacing: .16em !important;
  border-bottom: 1px solid var(--le-accent-line) !important; padding: 12px 12px !important;
}
html.dark table tbody td, html.dark table.data-table tbody td {
  font-size: 13.5px; color: var(--le-text-2); border-bottom: 1px solid var(--le-line) !important; padding: 10px 12px !important;
}
html.dark table tbody td.text-center, html.dark table tbody td.text-right, html.dark table tbody td[align="right"], html.dark table tbody td[align="center"] {
  font-family: var(--le-mono); font-size: 12.5px; font-variant-numeric: tabular-nums;
}
html.dark table tbody tr:hover, html.dark table.data-table tbody tr:hover { background: rgba(232, 35, 46, .07) !important; }
html.dark table tbody td b, html.dark table tbody td strong, html.dark .min-w-0 table td b, html.dark .min-w-0 table td strong { color: var(--le-text) !important; font-weight: 700; }
html.dark .rounded-b-lg.border-t { background: var(--le-canvas-2) !important; border-color: var(--le-line) !important; }

/* ===== Links ======================================================== */
html.dark .min-w-0 a:not(.cw-prem):not(.hlx-cw-chip):not(.hlx-search-row):not(.cw-btn),
html.dark .windmill-text-link, html.dark a.windmill-text-link, html.dark .text-purple-600, html.dark .text-purple-500, html.dark .text-purple-400 {
  color: var(--le-silver) !important; font-weight: 600; text-decoration: none;
}
html.dark .min-w-0 a:not(.cw-prem):not(.hlx-cw-chip):not(.hlx-search-row):not(.cw-btn):hover,
html.dark .windmill-text-link:hover, html.dark a.windmill-text-link:hover { color: var(--le-accent) !important; text-shadow: none; }
html.dark .min-w-0 table a.windmill-text-link:not(:hover) { color: var(--le-text-3) !important; font-weight: 500; font-size: 12px; }

/* ===== Buttons / pills ============================================== */
html.dark .bg-purple-600, html.dark a.bg-purple-600, html.dark button.bg-purple-600,
html.dark .windmill-button, html.dark input[type="submit"], html.dark input.submit, html.dark .submit, html.dark .btn {
  background: var(--le-accent-deep) !important; color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .08) !important; border-radius: var(--le-radius-sm) !important;
  font-family: var(--le-display) !important; font-size: 10.5px !important; font-weight: 400 !important; letter-spacing: .14em; text-transform: uppercase;
  padding: 9px 16px !important; box-shadow: 0 10px 24px -12px rgba(232, 35, 46, .8) !important;
  transition: background .15s, transform .1s !important;
}
html.dark .bg-purple-600:hover, html.dark .windmill-button:hover, html.dark input[type="submit"]:hover, html.dark .submit:hover, html.dark .btn:hover {
  background: var(--le-accent) !important; filter: none; transform: translateY(-1px);
}
html.dark .windmill-button.load-button { background: transparent !important; color: var(--le-text-2) !important; border: 1px solid var(--le-line-strong) !important; box-shadow: none !important; }
html.dark .windmill-button.load-button:hover, html.dark .windmill-button.load-button.active, html.dark .windmill-button.load-button[aria-selected="true"] {
  background: var(--le-accent-soft) !important; color: var(--le-text) !important; border-color: var(--le-accent-line) !important;
}
html.dark span.bg-green-100, html.dark span.dark\:bg-green-700 { background: rgba(53, 208, 122, .14) !important; color: var(--le-ok) !important; border: 1px solid rgba(53, 208, 122, .35); font-family: var(--le-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
html.dark span.bg-red-100, html.dark span.dark\:bg-red-700 { background: var(--le-accent-soft) !important; color: var(--le-accent) !important; border: 1px solid var(--le-accent-line); font-family: var(--le-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }

/* ===== Forms ======================================================== */
html.dark .windmill-text, html.dark .windmill-dropdown, html.dark .windmill-textarea,
html.dark input[type="text"]:not(.hlx-search-input), html.dark input[type="number"], html.dark input[type="password"], html.dark select, html.dark textarea {
  background-color: var(--le-raise) !important; border: 1px solid var(--le-line-strong) !important; border-radius: var(--le-radius-sm) !important; font-family: var(--le-body);
}
html.dark .windmill-text:focus, html.dark select:focus, html.dark textarea:focus, html.dark input[type="text"]:not(.hlx-search-input):focus {
  border-color: var(--le-accent) !important; box-shadow: 0 0 0 3px var(--le-accent-soft) !important; background-color: var(--le-surface) !important;
}

/* ===== Meters, code, scrollbars, focus ============================= */
html.dark meter::-webkit-meter-optimum-value, html.dark meter::-webkit-meter-suboptimum-value, html.dark meter::-webkit-meter-even-less-good-value, html.dark meter::-moz-meter-bar {
  background: linear-gradient(90deg, var(--le-accent-deep), var(--le-accent));
}
html.dark code, html.dark kbd, html.dark tt { background: var(--le-raise); color: var(--le-accent); border-color: var(--le-line); font-family: var(--le-mono); }
html.dark * { scrollbar-color: var(--le-raise-2) transparent; }
html.dark ::-webkit-scrollbar-thumb { background: var(--le-raise-2); }
html.dark ::-webkit-scrollbar-thumb:hover { background: rgba(232, 35, 46, .55); }
html.dark a:focus-visible, html.dark button:focus-visible, html.dark input:focus-visible, html.dark select:focus-visible { outline: 2px solid var(--le-accent); }

/* ===== Player profile, badges ====================================== */
html.dark .gm-avatar { border-color: var(--le-line-strong); box-shadow: 0 10px 26px -8px rgba(0, 0, 0, .65), 0 0 0 4px var(--le-accent-soft); }
.gm-avatar--nonsteam { background: radial-gradient(120% 120% at 30% 0%, rgba(232, 35, 46, .22), transparent 55%), linear-gradient(135deg, var(--le-raise), var(--le-canvas)); border-color: var(--le-accent-line) !important; }
.gm-avatar--nonsteam i { color: var(--le-accent); }
.gm-fav-weapon { background: var(--le-raise); border-color: var(--le-line-strong); }
.lebans-badge { border-color: var(--le-accent-line) !important; background: linear-gradient(135deg, var(--le-accent-soft), var(--le-surface)) !important; box-shadow: none !important; }

/* ===== Footer ======================================================= */
html.dark footer { border-top-color: var(--le-line) !important; }
html.dark footer a { font-family: var(--le-display); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--le-text-3) !important; }
html.dark footer a:hover { color: var(--le-accent) !important; }
html.dark .fSmall { color: var(--le-text-3); font-size: 12px; }

@media (max-width: 720px) {
  html.dark aside ul li a { font-size: 10px !important; }
  .windmill-title-bar, html.dark .windmill-title-bar { font-size: 11px !important; padding: 14px 16px !important; }
}
@media (prefers-reduced-motion: reduce) { html.dark * { transition: none !important; } }

/* ===== Map iframe + mobile tables (dopuna) ========================= */
html.dark iframe[src*="display_map"] { border: 1px solid var(--le-line); border-radius: var(--le-radius); background: var(--le-canvas); display: block; }
@media (max-width: 720px) {
  html.dark .overflow-x-auto table, html.dark table#servers, html.dark .min-w-0 table, html.dark table.data-table { white-space: nowrap !important; }
  html.dark .w-full.overflow-x-auto, html.dark .overflow-x-auto { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  html.dark table tbody td:first-child { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
  html.dark .windmill-button.load-button { margin: 3px 2px !important; font-size: 9.5px !important; padding: 8px 10px !important; }
}