/*
 * CSS-BANS — BALKANCS CYBERPUNK THEME (Clean)
 *
 * Aggressives Neon-Rot / Tiefschwarz-UI.
 * Scharfe Ecken, leuchtende Borders, Orbitron-Font.
 */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700&family=Exo+2:wght@400;500;600;700&display=swap');

/* ============================================================
   1. Design Tokens (Cyberpunk Red/Black)
   ============================================================ */
:root,
.dark,
.layout-dark,
body {
  --theme-bg:            #080808;
  --theme-bg-2:          #0a0a0a;
  --theme-surface:       #111111;
  --theme-surface-2:     #161616;
  --theme-surface-3:     #1c1c1c;

  --theme-border:        #ff003c;
  --theme-border-soft:   rgba(255, 0, 60, 0.25);
  --theme-text:          #ffffff;
  --theme-text-muted:    #888888;
  --theme-text-faded:    #555555;

  --theme-primary:       #ff003c;
  --theme-primary-2:     #d4002e;
  --theme-primary-glow:  rgba(255, 0, 60, 0.5);
  --theme-primary-soft:  rgba(255, 0, 60, 0.12);

  --theme-success:       #00ff88;
  --theme-danger:        #ff003c;
  --theme-warning:       #ff8800;
  --theme-info:          #00f0ff;

  --theme-gradient:        linear-gradient(135deg, #ff003c 0%, #cc0030 100%);
  --theme-gradient-soft:   linear-gradient(135deg, rgba(255,0,60,0.18) 0%, rgba(204,0,48,0.12) 100%);
  --theme-gradient-danger: linear-gradient(135deg, #ff003c 0%, #b90020 100%);
  --theme-gradient-success:linear-gradient(135deg, #00ff88 0%, #00b35f 100%);
  --theme-gradient-warn:   linear-gradient(135deg, #ff8800 0%, #cc6d00 100%);

  --theme-shadow-card:   0 0 12px rgba(255, 0, 60, 0.2);
  --theme-shadow-hover:  0 0 25px rgba(255, 0, 60, 0.5);

  --theme-radius-sm:     2px;
  --theme-radius:        2px;
  --theme-radius-lg:     2px;
}

/* Bootstrap-Overrides */
:root {
  --bs-body-bg:        var(--theme-bg);
  --bs-body-color:     var(--theme-text);
  --bs-body-font-family: 'Exo 2', system-ui, -apple-system, sans-serif;
  --bs-border-color:   var(--theme-border);
  --bs-card-bg:        var(--theme-surface);
  --bs-card-color:     var(--theme-text);
  --bs-card-border-color: var(--theme-border);
  --bs-primary:        var(--theme-primary);
  --bs-primary-rgb:    255, 0, 60;
  --bs-link-color:     #ff4d79;
  --bs-link-hover-color: #ff80a0;
  --bs-secondary-color: var(--theme-text-muted);
  --bs-tertiary-bg:    var(--theme-surface-2);
  --bs-emphasis-color: var(--theme-text);
}

/* ============================================================
   2. Verstecke Theme-Toggle & GitHub-Link
   ============================================================ */
.theme-toggle,
.nav-link.theme-toggle,
.nav-item.theme-toggle-item,
li.nav-item:has(> a[href*="github.com"]),
.nav-item.nav-link.theme-toggle-item {
  display: none !important;
}

/* ============================================================
   3. Grundlayout
   ============================================================ */
html, body {
  background: var(--theme-bg) !important;
  color: var(--theme-text) !important;
  font-family: 'Exo 2', system-ui, sans-serif !important;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-image: none !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--theme-text);
  font-family: 'Orbitron', sans-serif !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

p { color: var(--theme-text-muted); }
hr  { border-color: var(--theme-border-soft); }
small, .text-muted { color: var(--theme-text-muted) !important; }
a   { color: var(--theme-primary); }
a:hover { color: #ff4d79; text-shadow: 0 0 5px rgba(255,0,60,0.5); }

::selection { background: var(--theme-primary); color: #fff; }

/* Scrollbar */
::-webkit-scrollbar       { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--theme-bg); }
::-webkit-scrollbar-thumb { background: var(--theme-primary); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: #d4002e; }

/* ============================================================
   4. Sidebar
   ============================================================ */
.sidebar-wrapper,
.sidebar-wrapper.sidebar-theme,
#sidebar {
  background: var(--theme-bg) !important;
  border-right: 1px solid var(--theme-primary) !important;
  box-shadow: 4px 0 15px rgba(255, 0, 60, 0.15) !important;
}

#sidebar .navbar-nav.theme-brand {
  background: transparent !important;
  border-bottom: 1px solid var(--theme-border-soft);
}

#sidebar .theme-brand .nav-item.theme-text a {
  color: var(--theme-text) !important;
  font-weight: 700;
  font-family: 'Orbitron', sans-serif;
}

.profile-info,
.profile-info *:not(img):not(h6):not(p):not(svg):not(span) {
  background: #080808 !important;
  background-image: none !important;
  background-color: #080808 !important;
}
.profile-info {
  border-bottom: 1px solid var(--theme-border-soft);
}
.profile-info .profile-img img {
  border-radius: 50% !important;
  border: 2px solid #ff003c !important;
  box-shadow: 0 0 0 2px #ff003c, 0 0 14px rgba(255, 0, 60, 0.7) !important;
}
.profile-info .profile-content h6 { color: var(--theme-text) !important; font-weight: 600; font-family: 'Orbitron', sans-serif; }
.profile-info .profile-content p  { color: var(--theme-text-muted) !important; }

#sidebar .menu-categories .menu > .dropdown-toggle,
#sidebar .menu-categories .menu a {
  color: var(--theme-text-muted) !important;
  border-radius: var(--theme-radius-sm);
  transition: all 0.2s ease;
  font-family: 'Orbitron', sans-serif;
  text-transform: uppercase;
  font-size: 0.85rem;
}

#sidebar .menu-categories .menu > .dropdown-toggle:hover,
#sidebar .menu-categories .menu a:hover {
  background: rgba(255,0,60,0.05) !important;
  color: var(--theme-primary) !important;
}

/* Aktiver Menüpunkt – vereinheitlicht, keine Pseudo-Elemente */
#sidebar ul li.menu.active > a,
#sidebar ul li.menu.active > a.dropdown-toggle,
#sidebar ul li.menu > a[aria-expanded="true"],
#sidebar ul li.menu > a.dropdown-toggle[aria-expanded="true"],
.sidebar-wrapper #sidebar .menu-categories > li.menu.active > .dropdown-toggle,
.sidebar-wrapper #sidebar .menu-categories > li > a[aria-expanded="true"] {
  background: #ff003c !important;
  background-image: none !important;
  color: #ffffff !important;
  box-shadow: 0 0 18px rgba(255, 0, 60, 0.6) !important;
  border-left: 3px solid #ff6680 !important;
  border-radius: 2px !important;
}

/* Entferne etwaige Gradient-Pseudoelemente */
#sidebar .menu-categories .menu.active > .dropdown-toggle::before,
#sidebar .menu-categories .menu.active > .dropdown-toggle::after,
#sidebar .menu-categories .menu > .dropdown-toggle[aria-expanded="true"]::before,
#sidebar .menu-categories .menu > .dropdown-toggle[aria-expanded="true"]::after,
#sidebar ul li.menu.active > a::before,
#sidebar ul li.menu.active > a::after,
#sidebar ul li.menu > a[aria-expanded="true"]::before,
#sidebar ul li.menu > a[aria-expanded="true"]::after {
  display: none !important;
  background: none !important;
}

#sidebar .menu-categories .menu .submenu li.active a,
#sidebar .menu-categories .menu .submenu a:hover {
  color: #fff !important;
  background: rgba(255, 0, 60, 0.2) !important;
  text-shadow: 0 0 5px rgba(255,0,60,0.8);
}
#sidebar .menu-categories .menu .submenu a::before {
  background: var(--theme-primary) !important;
}

/* Icons in Menüpunkten */
#sidebar .menu-categories .menu > .dropdown-toggle svg,
#sidebar .menu-categories .menu .submenu svg {
  color: var(--theme-primary) !important;
}
#sidebar .menu-categories .menu.active > .dropdown-toggle svg,
#sidebar .menu-categories .menu > .dropdown-toggle[aria-expanded="true"] svg {
  color: #fff !important;
}

/* ============================================================
   5. Header / Navbar
   ============================================================ */
.header.navbar.expand-header,
.header-container .navbar {
  background: rgba(8, 8, 8, 0.9) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--theme-primary) !important;
  box-shadow: none !important;
}
.header .nav-link  { color: var(--theme-text-muted) !important; }
.header .nav-link:hover { color: var(--theme-primary) !important; }
.sidebarCollapse svg { color: var(--theme-primary); }

.avatar.avatar-online::before {
  background: var(--theme-success) !important;
  box-shadow: 0 0 8px var(--theme-success);
}

/* Dropdown-Menüs */
.dropdown-menu {
  background: var(--theme-surface) !important;
  border: 1px solid var(--theme-border) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.9) !important;
  border-radius: var(--theme-radius);
}
.dropdown-menu .dropdown-item {
  color: var(--theme-text) !important;
  font-family: 'Orbitron', sans-serif;
  text-transform: uppercase;
  font-size: 0.8rem;
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
  background: var(--theme-primary) !important;
  color: #fff !important;
}
.dropdown-divider { border-color: var(--theme-border-soft); }

/* ============================================================
   6. Cards
   ============================================================ */
.card {
  background: var(--theme-surface) !important;
  border: 1px solid var(--theme-border) !important;
  border-radius: var(--theme-radius) !important;
  box-shadow: var(--theme-shadow-card) !important;
  color: var(--theme-text) !important;
  overflow: hidden;
  position: relative;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
  animation: theme-card-in 0.35s ease-out both;
}
.card:hover {
  border-color: var(--theme-primary) !important;
  box-shadow: var(--theme-shadow-hover) !important;
  transform: translateY(-1px);
}
.card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--theme-border-soft) !important;
  color: var(--theme-primary) !important;
  font-family: 'Orbitron', sans-serif !important;
  text-transform: uppercase;
  text-align: center;
  padding-top: 15px !important;
  letter-spacing: 2px;
}
.card-body, .card-footer { background: transparent !important; color: var(--theme-text); }
.card-footer { border-top: 1px solid var(--theme-border-soft) !important; }

/* Dashboard KPI Cards */
.row > [class*="col-xl-3"] > .card {
  background: var(--theme-surface) !important;
}
.row > [class*="col-xl-3"] > .card h1 {
  font-size: 2.5rem;
  font-weight: 700;
  color: #fff;
}
.row > [class*="col-xl-3"] > .card p {
  color: var(--theme-text-muted) !important;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}
.row > [class*="col-xl-3"] > .card .fa-3x {
  filter: drop-shadow(0 0 12px var(--theme-primary));
  color: var(--theme-primary);
  opacity: 0.9;
}

/* Top-Player-Card */
.card.top-players {
  background: var(--theme-surface) !important;
  border: 1px solid var(--theme-primary) !important;
  box-shadow: 0 0 15px rgba(255, 0, 60, 0.3) !important;
}
.card.top-players .card-header {
  position: relative;
  overflow: hidden;
  background: transparent !important;
  border-bottom: none !important;
}

/* ============================================================
   7. Buttons
   ============================================================ */
.btn {
  border-radius: var(--theme-radius-sm) !important;
  font-weight: 600;
  font-family: 'Orbitron', sans-serif !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.2s ease;
  border: 1px solid var(--theme-primary);
}

.btn-primary,
.btn.btn-primary {
  background: var(--theme-gradient) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 0 15px var(--theme-primary-glow);
}
.btn-primary:hover {
  box-shadow: 0 0 25px var(--theme-primary-glow);
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.btn-success {
  background: var(--theme-gradient-success) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 0 15px rgba(0,255,136,0.45);
}
.btn-danger {
  background: var(--theme-gradient-danger) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 0 15px rgba(255,0,60,0.45);
}
.btn-warning {
  background: var(--theme-gradient-warn) !important;
  border-color: transparent !important;
  color: #111 !important;
}
.btn-info {
  background: linear-gradient(135deg, #00f0ff, #0099ff) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 0 15px rgba(0,240,255,0.45);
}

.btn-secondary,
.btn-light,
.btn-outline-primary,
.btn-outline-secondary {
  background: var(--theme-surface-2) !important;
  border: 1px solid var(--theme-border) !important;
  color: var(--theme-text) !important;
}
.btn-secondary:hover,
.btn-light:hover,
.btn-outline-primary:hover,
.btn-outline-secondary:hover {
  background: var(--theme-primary-soft) !important;
  border-color: var(--theme-primary) !important;
  color: #fff !important;
}

.btn-sm { padding: 0.35rem 0.65rem; font-size: 0.75rem; }

/* ============================================================
   8. Alerts & Note-Boxen
   ============================================================ */
.alert {
  border-radius: var(--theme-radius) !important;
  border: 1px solid var(--theme-border) !important;
  background: var(--theme-surface-2) !important;
  color: var(--theme-text) !important;
  box-shadow: var(--theme-shadow-card);
}
.alert-light-danger, .alert-danger {
  background: rgba(255, 0, 60, 0.10) !important;
  border-color: var(--theme-primary) !important;
  color: #ff99aa !important;
}
.alert-light-warning, .alert-warning {
  background: rgba(255, 136, 0, 0.10) !important;
  border-color: var(--theme-warning) !important;
  color: var(--theme-warning) !important;
}
.alert-light-success, .alert-success {
  background: rgba(0, 255, 136, 0.10) !important;
  border-color: var(--theme-success) !important;
  color: #80ffc4 !important;
}
.alert-light-info, .alert-info, .alert-primary {
  background: var(--theme-primary-soft) !important;
  border-color: var(--theme-primary) !important;
  color: #fff !important;
}
.alert .btn-close, .alert .close { filter: invert(1) brightness(2); opacity: 0.7; }

/* Hinweis-Box (orange) */
.note {
  background: transparent !important;
  border: 1px solid var(--theme-warning) !important;
  border-radius: var(--theme-radius) !important;
  padding: 1.25rem 1.5rem;
  color: var(--theme-warning) !important;
  font-family: 'Exo 2', sans-serif;
  box-shadow: 0 0 15px rgba(255,136,0,0.15) !important;
}
.note.note-primary {
  border-color: var(--theme-primary) !important;
  color: var(--theme-primary) !important;
}

/* ============================================================
   9. Badges
   ============================================================ */
.badge {
  border-radius: 2px !important;
  font-family: 'Orbitron', sans-serif;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 0.35em 0.7em;
}
.badge-light-danger,  .badge.bg-danger   { background: rgba(255, 0, 60, 0.2) !important; color: #ff99aa !important; border: 1px solid var(--theme-primary); }
.badge-light-warning, .badge.bg-warning  { background: rgba(255, 136, 0, 0.2) !important; color: #ffcc80 !important; border: 1px solid var(--theme-warning); }
.badge-light-success, .badge.bg-success  { background: rgba(0, 255, 136, 0.2) !important; color: #80ffc4 !important; border: 1px solid var(--theme-success); }
.badge-light-info,    .badge.bg-info     { background: rgba(0, 240, 255, 0.2) !important; color: #99f9ff !important; border: 1px solid var(--theme-info); }
.badge-light-primary, .badge.bg-primary, .badge-info {
  background: var(--theme-primary-soft) !important; color: #fff !important; border: 1px solid var(--theme-primary);
}
.dash-active-stat { box-shadow: 0 0 10px rgba(255,0,60,0.3); }

/* ============================================================
   10. Tabellen & DataTables
   ============================================================ */
table, .table {
  --bs-table-bg:           transparent;
  --bs-table-color:        var(--theme-text);
  --bs-table-border-color: var(--theme-border-soft);
  --bs-table-hover-bg:     var(--theme-surface-2);
  --bs-table-hover-color:  var(--theme-text);
  --bs-table-striped-bg:   rgba(255,0,60,0.02);
  color: var(--theme-text);
}
.table thead, .table thead.bg-light {
  background: transparent !important;
}
.table thead th {
  color: var(--theme-primary) !important;
  font-family: 'Orbitron', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 1px;
  border-bottom: 2px solid var(--theme-border) !important;
  border-top: 2px solid var(--theme-border) !important;
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
}
.table tbody tr  { border-color: var(--theme-border-soft) !important; }
.table tbody td  { color: #cccccc !important; border-color: var(--theme-border-soft) !important; vertical-align: middle; }
.table-hover tbody tr:hover { background: rgba(255, 0, 60, 0.08) !important; color: #fff !important; }
.table-borderless tbody tr, .table-borderless td, .table-borderless th { border: 0 !important; }

/* DataTables */
.dataTables_wrapper { color: var(--theme-text-muted); font-family: 'Exo 2', sans-serif; }
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  background: var(--theme-bg) !important;
  border: 1px solid var(--theme-border-soft) !important;
  color: var(--theme-text) !important;
  border-radius: var(--theme-radius-sm) !important;
  padding: 0.4rem 0.7rem;
}
.dataTables_wrapper .dataTables_filter input:focus {
  outline: none;
  border-color: var(--theme-primary) !important;
  box-shadow: 0 0 10px var(--theme-primary-soft);
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  color: var(--theme-text-muted) !important;
  background: transparent !important;
  border: 1px solid var(--theme-border-soft) !important;
  border-radius: var(--theme-radius-sm) !important;
  margin: 0 2px;
  font-family: 'Orbitron', sans-serif;
  transition: all 0.2s ease;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: rgba(255,0,60,0.1) !important;
  color: var(--theme-primary) !important;
  border-color: var(--theme-primary) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--theme-gradient) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 0 10px var(--theme-primary-glow);
}
.dataTables_wrapper .dataTables_info { color: var(--theme-text-muted); }
table.dataTable.no-footer { border-bottom-color: var(--theme-primary) !important; }

/* ============================================================
   11. Formulare
   ============================================================ */
.form-control,
.form-select,
.form-control:disabled,
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
textarea, select {
  background: #050505 !important;
  border: 1px solid var(--theme-border-soft) !important;
  color: #fff !important;
  border-radius: var(--theme-radius-sm) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-control::placeholder { color: var(--theme-text-faded) !important; }
.form-control:focus,
.form-select:focus,
input:focus, textarea:focus, select:focus {
  border-color: var(--theme-primary) !important;
  box-shadow: 0 0 15px rgba(255, 0, 60, 0.4) !important;
  outline: none !important;
  background: #000 !important;
  color: #fff !important;
}
.form-label, label {
  color: var(--theme-primary);
  font-weight: 500;
  font-family: 'Orbitron', sans-serif;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 1px;
}
.form-check-input {
  background-color: var(--theme-surface-2);
  border-color: var(--theme-primary);
  border-radius: 2px !important;
}
.form-check-input:checked {
  background-color: var(--theme-primary);
  border-color: var(--theme-primary);
  box-shadow: 0 0 8px var(--theme-primary);
}

/* Select2 */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  background: #050505 !important;
  border: 1px solid var(--theme-border-soft) !important;
  border-radius: var(--theme-radius-sm) !important;
  color: var(--theme-text) !important;
  min-height: 38px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #fff !important;
  line-height: 36px;
}
.select2-dropdown {
  background: var(--theme-surface) !important;
  border-color: var(--theme-primary) !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--theme-primary) !important;
}

/* ============================================================
   12. Modals, Tooltips, Progress, etc.
   ============================================================ */
.modal-content {
  background: var(--theme-bg) !important;
  border: 1px solid var(--theme-primary) !important;
  border-radius: var(--theme-radius) !important;
  box-shadow: 0 0 30px rgba(255,0,60,0.5) !important;
}
.modal-header { border-bottom: 1px solid var(--theme-border-soft) !important; }
.modal-footer { border-top: 1px solid var(--theme-border-soft) !important; }
.modal-backdrop.show { opacity: 0.85; background: #000; }

.tooltip-inner { background: var(--theme-primary) !important; color: #fff; font-family: 'Orbitron', sans-serif; }

.progress { background: var(--theme-surface-2) !important; border-radius: 2px; }
.progress-bar { background: var(--theme-gradient) !important; box-shadow: 0 0 10px var(--theme-primary); }

.footer-wrapper {
  background: transparent !important;
  border-top: 1px solid var(--theme-border-soft);
  color: var(--theme-text-muted) !important;
  font-family: 'Orbitron', sans-serif;
}
.footer-wrapper a { color: var(--theme-primary); }

.btn-steam, a[href*="/auth/steam"].btn {
  background: linear-gradient(135deg, #1b2838 0%, #2a475e 100%) !important;
  color: #fff !important;
  border: 1px solid #66c0f4 !important;
  box-shadow: 0 0 15px rgba(102, 192, 244, 0.4);
}

/* Pagination */
.pagination .page-link {
  background: var(--theme-surface-2);
  border: 1px solid var(--theme-border-soft);
  color: var(--theme-text-muted);
  font-family: 'Orbitron', sans-serif;
  transition: all 0.2s ease;
}
.pagination .page-link:hover { background: rgba(255,0,60,0.1); color: var(--theme-primary); border-color: var(--theme-primary); }
.pagination .page-item.active .page-link {
  background: var(--theme-gradient);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 0 10px var(--theme-primary-glow);
}

/* Nav-Tabs */
.nav-tabs { border-bottom: 1px solid var(--theme-border-soft); }
.nav-tabs .nav-link {
  color: var(--theme-text-muted);
  border: 1px solid transparent;
  border-radius: 2px 2px 0 0;
  font-family: 'Orbitron', sans-serif;
  text-transform: uppercase;
  transition: all 0.2s ease;
}
.nav-tabs .nav-link:hover { color: var(--theme-primary); border-color: var(--theme-border-soft); }
.nav-tabs .nav-link.active {
  color: var(--theme-primary);
  background: var(--theme-surface);
  border-color: var(--theme-primary) var(--theme-primary) transparent;
  box-shadow: 0 -2px 0 var(--theme-primary) inset;
}

/* List-Groups */
.list-group-item {
  background: var(--theme-surface) !important;
  border-color: var(--theme-border-soft) !important;
  color: var(--theme-text) !important;
}
.list-group-item.active {
  background: var(--theme-gradient) !important;
  border-color: transparent !important;
  color: #fff !important;
}

/* ApexCharts */
.apexcharts-tooltip {
  background: var(--theme-surface) !important;
  border: 1px solid var(--theme-primary) !important;
  color: #fff !important;
  box-shadow: 0 0 15px rgba(255,0,60,0.4) !important;
}
.apexcharts-text tspan, .apexcharts-legend-text { fill: var(--theme-text-muted) !important; color: var(--theme-text-muted) !important; }
.apexcharts-xaxis line, .apexcharts-yaxis line { stroke: var(--theme-border-soft) !important; }
.apexcharts-grid line, .apexcharts-gridline   { stroke: var(--theme-border-soft) !important; }

pre, code, .hljs {
  background: #050505 !important;
  color: #e2e8f0 !important;
  border-radius: var(--theme-radius-sm);
  border: 1px solid var(--theme-border-soft);
}

/* Avatar-Rahmen */
.rounded-circle {
  border-radius: 50% !important;
  box-shadow: 0 0 0 2px var(--theme-primary), 0 0 12px var(--theme-primary-glow) !important;
}

.bg-light, .bg-white { background: var(--theme-surface) !important; color: var(--theme-text) !important; }
.text-dark { color: var(--theme-text) !important; }

.layout-loader, #load_screen { background: var(--theme-bg) !important; }

:focus-visible {
  outline: 2px solid var(--theme-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ============================================================
   13. Animationen (entschärft)
   ============================================================ */
@keyframes theme-card-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Hover-Glow nur mit Transition, keine pulsierende Endlos-Animation */
.btn-primary,
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  transition: box-shadow 0.2s ease, filter 0.2s ease, transform 0.2s ease;
}

/* ============================================================
   14. Mobile
   ============================================================ */
@media (max-width: 991.98px) {
  .row > [class*="col-xl-3"] > .card h1 { font-size: 1.75rem; }
  .card-header h5 { font-size: 0.95rem; }
}

/* ============================================================
   FIX: "Login with Steam" vollständig anzeigen
   ============================================================ */

/* Dropdown-Menü im Header */
.user-profile-dropdown .dropdown-menu {
    min-width: 260px !important;
}

/* Steam-Icon im Header-Dropdown */
.user-profile-dropdown .dropdown-item a svg {
    width: 24px !important;
    height: 24px !important;
    flex-shrink: 0;
}

/* Login-Link als Flex-Container */
.user-profile-dropdown .dropdown-item a {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
    white-space: normal !important;
}

/* Login-Link-Text (auch in Sidebar) */
a[href*="/auth/steam"],
a[href*="/auth/steam"] span {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    max-width: none !important;
    width: auto !important;
}

/* Sidebar: Menü-Links nicht abschneiden */
#sidebar ul.menu-categories li.menu a.dropdown-toggle,
#sidebar ul.menu-categories li.menu a.dropdown-toggle span {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    display: inline-block;
    max-width: none !important;
}

/* Sidebar: Container erlauben */
.sidebar-wrapper #sidebar ul.menu-categories li.menu a.dropdown-toggle div {
    overflow: visible !important;
    white-space: normal !important;
}