/* =====================================================================
   LUDA EKIPA layer for the LE Bans panel (bans.luda-ekipa.rs).
   Loaded LAST (after style.css + refine.css). Same design system as
   luda-ekipa.rs and gameme: canvas black, silver text, one red accent,
   Michroma / Space Grotesk / JetBrains Mono. Revert: remove the <link>
   in includes/layout.php, login.php and check.php (backups alongside).
   2026-09-12
   ===================================================================== */
:root {
  --bg-0: #07080a; --bg-1: #0b0d11; --bg-2: #101319; --bg-3: #151922; --bg-4: #1b202b;
  --border: rgba(216, 218, 221, .13); --border-light: rgba(216, 218, 221, .28);
  --fg: #f2f4f7; --fg-2: #b6bcc6; --fg-dim: #8b929d;
  --accent: #ff3742; --accent-rgb: 255, 55, 66; --accent-hover: #e8232e;
  --accent-glow: rgba(232, 35, 46, .12); --accent-glow-strong: rgba(255, 55, 66, .34);
  --good: #35d07a; --good-bg: rgba(53, 208, 122, .12);
  --warn: #f0b35a; --warn-bg: rgba(240, 179, 90, .12);
  --bad: #ff3742; --bad-bg: rgba(255, 55, 66, .12);
  --perm: #d8dadd; --perm-bg: rgba(216, 218, 221, .12);
  --radius: 12px; --radius-sm: 8px;
  --shadow-card: 0 2px 12px rgba(0, 0, 0, .35); --shadow-lg: 0 22px 60px rgba(0, 0, 0, .45);
  --font-display: "Michroma", "Eurostile", "Segoe UI", system-ui, sans-serif;
  --font-body: "Space Grotesk", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* check.php private tokens (same names, same meaning) */
  --bg: #07080a;
}

html[data-theme="dark"] body, html:not([data-theme="light"]) body {
  font-family: var(--font-body);
  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(--bg-0);
}
body { font-family: var(--font-body); font-size: 14.5px; }
::selection { background: rgba(232, 35, 46, .45); color: #fff; }
a { color: var(--fg); }
a:hover { color: var(--accent); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; }
h2 { font-size: 10.5px; letter-spacing: .18em; color: var(--fg-2); display: flex; align-items: center; gap: 10px; }
h2::before { content: ''; width: 18px; height: 2px; background: var(--accent); flex: 0 0 auto; }
h2 small { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0; }

/* ===== Sidebar ====================================================== */
.sidebar { background: linear-gradient(180deg, #0b0d11 0%, #07080a 100%); border-right: 1px solid var(--border); }
.sidebar-brand { padding: 18px 18px 16px; gap: 11px; }
.brand-icon, .login-brand-icon { width: 38px; height: 38px; background: none !important; box-shadow: none !important; border-radius: 0; padding: 0; }
.brand-icon img, .login-brand-icon img { width: 100%; height: 100%; display: block; }
.brand-title { font-family: "Russo One", var(--font-display); font-size: 17px; font-weight: 400; letter-spacing: .02em; text-transform: uppercase; line-height: 1; }
.brand-title b { color: var(--accent); font-weight: 400; }
.brand-sub { margin-top: 5px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--fg-dim); }
.nav-section-label { font-family: var(--font-display); font-size: 8.5px; font-weight: 400; letter-spacing: .2em !important; color: var(--fg-dim); padding: 16px 12px 6px; }
.nav-item { font-family: var(--font-display); font-size: 9.5px; font-weight: 400 !important; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-2); padding: 9px 12px 9px 14px; border-radius: var(--radius-sm); }
.nav-item:hover { background: rgba(216, 218, 221, .06); color: var(--fg); }
.nav-item.active { background: var(--accent-glow); color: var(--fg); }
.nav-item.active::before { top: 50%; bottom: auto; height: 18px; transform: translateY(-50%); border-radius: 0 2px 2px 0; box-shadow: 0 0 12px rgba(255, 55, 66, .55); }
.nav-icon { color: var(--fg-dim); }
.nav-badge { font-family: var(--font-mono); font-weight: 600; background: var(--accent-hover); border-radius: 6px; }
.sidebar-links a { font-family: var(--font-display); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; }

/* ===== Topbar ======================================================= */
.topbar { background: rgba(7, 8, 10, .82) !important; border-bottom: 1px solid var(--border); }
.page-title { font-family: var(--font-display); font-size: 13px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; }
.breadcrumbs, .breadcrumbs .crumb { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; }
.user-pill { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.user-avatar { background: var(--accent-hover); border-radius: 8px; font-family: var(--font-display); font-size: 12px; }
.user-name { font-weight: 600; }
.user-level { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-dim); }
.theme-toggle, .palette-btn, .logout-btn, .mobile-toggle { background: var(--bg-2) !important; border: 1px solid var(--border) !important; color: var(--fg-2) !important; border-radius: var(--radius-sm) !important; box-shadow: none !important; }
.theme-toggle:hover, .palette-btn:hover, .logout-btn:hover { color: var(--fg) !important; border-color: var(--accent-glow-strong) !important; transform: none !important; }

/* ===== Cards / KPI ================================================== */
.card, .stat-card, .server-card, .form-card, .geo-card, .ev-card, .login-box, .drawer, .cmdk-panel {
  background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-card);
}
.card { position: relative; }
.card-header { border-bottom: 1px solid var(--border); }
.stat-card { position: relative; overflow: hidden; }
.stat-card::before { content: '' !important; position: absolute; left: 0; right: 0; top: 0; height: 1px !important; background: linear-gradient(90deg, var(--accent), rgba(255, 55, 66, .25) 45%, transparent 80%) !important; }
.stat-card.accent-blue, .stat-card.accent-purple, .stat-card.accent-orange, .stat-card.accent-green, .stat-card.accent-cyan, .stat-card.accent-yellow, .stat-card.accent-red, .stat-card.accent-grey { border-color: var(--border); }
.stat-card:hover { border-color: var(--accent-glow-strong); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .7); }
.stat-value { font-family: var(--font-mono) !important; font-size: 30px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--fg); }
.accent-blue .stat-value, .accent-purple .stat-value, .accent-orange .stat-value, .accent-cyan .stat-value, .accent-grey .stat-value { color: var(--fg); }
.accent-green .stat-value { color: var(--good); }
.accent-yellow .stat-value { color: var(--warn); }
.accent-red .stat-value { color: var(--accent); }
.stat-label { font-family: var(--font-display); font-size: 9px; font-weight: 400; letter-spacing: .18em; color: var(--fg-dim); }
.stat-decoration { opacity: .12; color: var(--fg); }

/* ===== Tables ======================================================= */
table.data th { background: var(--bg-3); color: var(--fg-dim); font-family: var(--font-display); font-size: 8.5px !important; font-weight: 400; letter-spacing: .16em !important; text-transform: uppercase; border-bottom: 1px solid var(--accent-glow-strong); padding: 12px 14px; }
table.data td { font-size: 13.5px; color: var(--fg-2); border-bottom: 1px solid var(--border); }
table.data td strong, table.data td b, .player-cell strong { color: var(--fg); }
table.data tbody tr:hover td { background: rgba(232, 35, 46, .07); }
table.data small, .player-cell small, .text-dim { color: var(--fg-dim); }
table.data td .mono, .flag-chip, code, kbd, .kv-value, .steamid { font-family: var(--font-mono); }
.pagination a { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 12px; }
.pagination a.active, .pagination a:hover { background: var(--accent-glow); border-color: var(--accent-glow-strong); color: var(--fg); }

/* ===== Badges ======================================================= */
.badge { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .1em; border-radius: 6px; background: var(--bg-4); color: var(--fg-2); border: 1px solid var(--border-light); }
.badge.active { background: var(--good-bg); color: var(--good); border-color: rgba(53, 208, 122, .35); }
.badge.warn { background: var(--warn-bg); color: var(--warn); border-color: rgba(240, 179, 90, .35); }
.badge.bad { background: var(--bad-bg); color: var(--bad); border-color: rgba(255, 55, 66, .35); }
.badge.perm { background: var(--perm-bg); color: var(--perm); border-color: rgba(216, 218, 221, .35); }
.flash { border-radius: var(--radius-sm); font-family: var(--font-body); }
.flash-info { background: var(--accent-glow); color: var(--accent); border-color: var(--accent-glow-strong); }

/* ===== Buttons / forms ============================================== */
button, .btn {
  background: var(--accent-hover); color: #fff; border: 1px solid rgba(255, 255, 255, .08); border-radius: var(--radius-sm);
  font-family: var(--font-display); font-size: 10px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; padding: 10px 16px;
  box-shadow: 0 10px 24px -12px rgba(232, 35, 46, .8);
}
button:hover, .btn:hover { background: var(--accent); box-shadow: 0 12px 26px -12px rgba(232, 35, 46, .9); }
.btn-sm { padding: 6px 11px; font-size: 9px; }
.btn.ghost, button.ghost { background: transparent; border: 1px solid var(--border-light); color: var(--fg-2); box-shadow: none; }
.btn.ghost:hover, button.ghost:hover { background: rgba(216, 218, 221, .06); color: var(--fg); border-color: var(--accent-glow-strong); }
.btn.danger { background: var(--accent-hover); }
.tab-btn, .status-tab, .d-tab, .bg-tab { font-family: var(--font-display); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; border-radius: var(--radius-sm); }
input, textarea, select, .login-box input { background: var(--bg-3); border: 1px solid var(--border-light); border-radius: var(--radius-sm); color: var(--fg); font-family: var(--font-body); }
input:focus, textarea:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); background: var(--bg-2); }
label, .input-group label, .login-box .input-group label { font-family: var(--font-display); font-size: 8.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-dim); }
.rank-bar, .bar-fill, .dur-bar, .dow-bar { background: linear-gradient(90deg, var(--accent-hover), var(--accent)); }
.rank-count { color: var(--accent); font-family: var(--font-mono); }
.server-status-dot.online { background: var(--good); box-shadow: 0 0 10px var(--good); }
.server-status-dot.off { background: var(--fg-dim); }
.empty-state { color: var(--fg-dim); font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; }
* { scrollbar-width: thin; scrollbar-color: var(--bg-4) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--bg-4); border-radius: 999px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ===== Login ======================================================== */
.login-glow { background: radial-gradient(600px 400px at 50% 0%, rgba(232, 35, 46, .22), transparent 70%) !important; }
.login-box { padding: 32px; }
.login-brand h1 { font-family: "Russo One", var(--font-display); font-size: 22px; letter-spacing: .02em; text-transform: uppercase; }
.login-brand h1 b { color: var(--accent); font-weight: 400; }
.login-brand p { font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; }
.login-brand-icon { width: 64px; height: 64px; margin: 0 auto 14px; }
.login-submit { width: 100%; justify-content: center; padding: 13px 16px; font-size: 11px; }
.login-footer, .login-footer a { font-family: var(--font-display); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-dim); }
.login-footer a:hover { color: var(--accent); }

/* ===== Public Ban Checker (check.php) =============================== */
body.le-check { font-family: var(--font-body); background: radial-gradient(900px 520px at 50% -200px, rgba(232, 35, 46, .18), transparent 62%), 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(--bg-0); }
body.le-check .brand-icon { width: 72px; height: 72px; margin-bottom: 14px; display: inline-flex; }
body.le-check .brand h1 { font-family: "Russo One", var(--font-display); font-size: 26px; letter-spacing: .02em; text-transform: uppercase; }
body.le-check .brand h1 b { color: var(--accent); font-weight: 400; }
body.le-check .brand p { font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-dim); margin-top: 8px; }
body.le-check .card { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-card); }
body.le-check .search-form input, body.le-check .unban-form input, body.le-check .unban-form textarea { background: var(--bg-3); border: 1px solid var(--border-light); border-radius: var(--radius-sm); color: var(--fg); font-family: var(--font-body); }
body.le-check .search-form input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
body.le-check .search-form button, body.le-check .unban-form button { background: var(--accent-hover); border-radius: var(--radius-sm); font-family: var(--font-display); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; padding: 12px 20px; }
body.le-check .search-form button:hover, body.le-check .unban-form button:hover { background: var(--accent); }
body.le-check .hint, body.le-check .auto-note { font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-dim); }
body.le-check .result-clean h2, body.le-check .result-banned h2 { font-family: var(--font-display); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; justify-content: center; }
body.le-check .result-clean h2::before, body.le-check .result-banned h2::before { display: none; }
body.le-check .result-clean h2 { color: var(--good); } body.le-check .result-banned h2 { color: var(--accent); }
body.le-check .result-clean .icon, body.le-check .result-banned .icon { color: var(--fg); }
body.le-check table.info th { font-family: var(--font-display); font-size: 8.5px; letter-spacing: .16em; color: var(--fg-dim); border-bottom-color: var(--border); }
body.le-check table.info td { border-bottom-color: var(--border); color: var(--fg-2); font-size: 13.5px; }
body.le-check .badge { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; border-radius: 6px; }
body.le-check .badge-perm { background: var(--perm-bg); color: var(--perm); border: 1px solid rgba(216, 218, 221, .35); }
body.le-check .badge-active { background: var(--bad-bg); color: var(--bad); border: 1px solid rgba(255, 55, 66, .35); }
body.le-check .unban-form label { font-family: var(--font-display); font-size: 8.5px; letter-spacing: .18em; color: var(--fg-dim); }
body.le-check .alert { border-radius: var(--radius-sm); }
body.le-check .staff-link { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: var(--font-display); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2); }
body.le-check .staff-link:hover { border-color: var(--accent-glow-strong); color: var(--fg); }
body.le-check footer, body.le-check footer a { font-family: var(--font-display); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-dim); }
body.le-check footer a:hover { color: var(--accent); }

@media (max-width: 720px) { .nav-item { font-size: 9px; } .page-title { font-size: 11px; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ===== Overrides against style.css !important rules (dopuna) ======= */
:root { --le-grad-1: #ff3742; --le-grad-2: #e8232e; --le-grad-3: #ff3742; }
.card, .stat-card, .server-card, .form-card, .geo-card, .ev-card, .login-box, .drawer, .cmdk-panel, .flash, .user-pill, .empty-state,
.theme-toggle, .palette-btn, .logout-btn, .mobile-toggle { border-radius: var(--radius) !important; }
.btn, button, .login-submit, input, select, textarea, .badge, .nav-item, .pagination a, .tab-btn, .status-tab, .d-tab, .bg-tab, .nav-badge, .user-avatar, .flag-chip, .template-btn, .saved-chip, .geo-chip, .risk-badge, .appeal-pill, .linked-pill, .card-header, .stat-card::before, .brand-icon, .login-brand-icon { border-radius: var(--radius-sm) !important; }
.badge, .nav-badge, .flag-chip { border-radius: 6px !important; }
.user-avatar { border-radius: 8px !important; }
.brand-icon, .login-brand-icon { border-radius: 0 !important; }
.brand-icon::before, .login-brand-icon::before { display: none !important; content: none !important; }
.brand-icon, .login-brand-icon { background: none !important; box-shadow: none !important; animation: none !important; }
.btn, button[type="submit"], .login-submit, .btn.danger {
  background: var(--accent-hover) !important; background-image: none !important; background-size: auto !important;
  border: 1px solid rgba(255, 255, 255, .08) !important; color: #fff !important;
  box-shadow: 0 10px 24px -12px rgba(232, 35, 46, .8) !important;
}
.btn:hover, button[type="submit"]:hover, .login-submit:hover, .btn.danger:hover { background: var(--accent) !important; box-shadow: 0 12px 26px -12px rgba(232, 35, 46, .9) !important; }
.btn:focus-visible, button:focus-visible { outline: 2px solid var(--accent) !important; }
.btn.ghost, button.ghost, .btn.ghost:hover, button.ghost:hover { background: transparent !important; color: var(--fg-2) !important; border: 1px solid var(--border-light) !important; box-shadow: none !important; }
.btn.ghost:hover, button.ghost:hover { background: rgba(216, 218, 221, .06) !important; color: var(--fg) !important; border-color: var(--accent-glow-strong) !important; }
section > h2::before, .card-header h2::before { background: var(--accent) !important; box-shadow: none !important; width: 18px !important; height: 2px !important; vertical-align: middle !important; }
.card:hover { transform: none !important; box-shadow: var(--shadow-card) !important; }
.user-avatar { background: var(--accent-hover) !important; }
.bar-fill, .bar-col:hover .bar-fill { background: linear-gradient(180deg, var(--accent), var(--accent-hover)) !important; }
input[type="text"], input[type="number"], input[type="password"], input[type="email"], input[type="url"], input[type="search"], select, textarea {
  background: var(--bg-3) !important; border: 1px solid var(--border-light) !important;
}
.logout-btn, .logout-btn[type="submit"], .theme-toggle, .palette-btn { background: var(--bg-2) !important; color: var(--fg-2) !important; border: 1px solid var(--border) !important; box-shadow: none !important; padding: 0 !important; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; }
.logout-btn:hover, .theme-toggle:hover, .palette-btn:hover { color: var(--accent) !important; border-color: var(--accent-glow-strong) !important; background: var(--bg-2) !important; }