/*
 * FluxCS Panel — Flux Theme
 *
 * Complete visual redesign of the CSS-Bans admin panel so it reads as a
 * continuation of the FluxCS landing page: sharp corners, Rajdhani/JetBrains
 * Mono typography, red accent on near-black surfaces, grid texture background.
 * Drop-in override loaded last in base-layout.blade.php (replaces theme.css).
 */

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

/* ============================================================
   Design tokens
   ============================================================ */
:root {
  --bg-body:          #1a1410;
  --bg-sidebar:       #15110d;
  --bg-navbar:        #15110d;
  --bg-card:          #1e1810;
  --bg-card-2:        #221c16;
  --bg-input:         #1a1410;
  --bg-table-head:    #1a1410;
  --bg-table-row:     #1e1810;
  --bg-table-alt:     #1f1912;
  --bg-table-hover:   #23180f;

  --border:           rgba(255,255,255,0.05);
  --border-md:        rgba(255,255,255,0.08);
  --border-accent:    rgba(192,138,125,0.35);
  --border-accent-lg: rgba(192,138,125,0.6);

  --accent:           #C08A7D;
  --accent-hover:     #A8675A;
  --accent-dim:       rgba(192,138,125,0.12);
  --accent-glow:      rgba(192,138,125,0.2);
  --accent-glow-lg:   rgba(192,138,125,0.35);

  --gold:             #D4AF37;
  --silver:           #A8A9AD;
  --bronze:           #CD7F32;

  --green:            #22c55e;
  --green-dim:        rgba(34,197,94,0.12);
  --yellow:           #eab308;
  --yellow-dim:       rgba(234,179,8,0.12);
  --purple:           #8b5cf6;
  --purple-dim:       rgba(139,92,246,0.12);

  --text-primary:     #EDE7DC;
  --text-secondary:   #8E9678;
  --text-muted:       #5C5040;
  --text-accent:      #C08A7D;

  --radius:           0px;   /* SHARP corners everywhere — no border-radius */
  --radius-sm:        2px;   /* only for tiny pills/badges */
  --sidebar-w:        210px;
  --navbar-h:         52px;
}

/* ============================================================
   SECTION 1 — Global base + grid background
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

/* ---- Layer 1 — Base gradient (replaces flat black) ---- */
html, body {
  background: #1a1410 !important;
  background-image: none !important;
  color: var(--text-primary) !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 15px;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

body {
  position: relative;
  min-height: 100vh;
}

/* ---- Layer 2 — Warm umber atmospheric gradient ---- */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 60% 40% at 15% 0%,
      rgba(192, 138, 125, 0.09) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse 80% 35% at 50% 0%,
      rgba(192, 138, 125, 0.05) 0%,
      rgba(54, 47, 38, 0.06) 40%,
      transparent 70%
    ),
    radial-gradient(
      ellipse 50% 30% at 85% 100%,
      rgba(142, 150, 120, 0.04) 0%,
      transparent 60%
    ),
    linear-gradient(
      180deg,
      #1a1410 0%,
      #1a1410 20%,
      #1a1410 60%,
      #1a1410 100%
    );
}

/* ---- Layer 3 — Grid texture (identical to landing page, faded at edges) ---- */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(192,138,125,0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(192,138,125,0.028) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(
    ellipse 100% 100% at 50% 50%,
    black 40%,
    transparent 100%
  );
  -webkit-mask-image: radial-gradient(
    ellipse 100% 100% at 50% 50%,
    black 40%,
    transparent 100%
  );
}

/* ---- Layer 4 — Content above background layers ---- */
.wrapper, #wrapper,
.main-sidebar, .main-header,
.content-wrapper, main,
.sidebar, #sidebar,
.app-wrapper, .layout-fixed,
.main-container, #content {
  position: relative !important;
  z-index: 1 !important;
  background: transparent !important;
}

.content-wrapper,
.main-content,
[class*="content-wrapper"] {
  background: transparent !important;
}

/* Sidebar keeps its own solid dark bg so the grid doesn't bleed through */
.main-sidebar,
.sidebar,
#sidebar {
  background: rgba(9, 9, 12, 0.97) !important;
  backdrop-filter: blur(0px);
  z-index: 10 !important;
}

.main-header,
.navbar,
header {
  background: rgba(9, 9, 12, 0.97) !important;
  z-index: 10 !important;
}

/* AdminLTE layout wrapper transparency */
.wrapper {
  background: transparent !important;
}

.content-wrapper {
  background: transparent !important;
  min-height: calc(100vh - 52px) !important;
}

.sidebar-mini .content-wrapper,
.sidebar-collapse .content-wrapper {
  background: transparent !important;
}

.overlay,
.dark-overlay,
[class*="overlay"] {
  background: transparent !important;
}

/* AdminLTE body-class overrides */
body.hold-transition,
body.sidebar-mini,
body.layout-fixed,
body.dark-mode,
body[class] {
  background: #1a1410 !important;
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(192,138,125,0.25);
  border-radius: 0;
}
::-webkit-scrollbar-thumb:hover { background: rgba(192,138,125,0.5); }

/* Typography */
h1,h2,h3,h4,h5,h6 {
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

a { color: var(--text-accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

/* Monospace for data */
.font-mono,
td[class*="steam"], td[class*="ip"], td[class*="id"],
[class*="steam-id"], [class*="player-id"] {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12px !important;
}

/* ============================================================
   SECTION 2 — Sidebar
   ============================================================ */
.main-sidebar,
.sidebar,
#sidebar,
.sidebar-wrapper {
  background: var(--bg-sidebar) !important;
  border-right: 1px solid var(--border) !important;
  width: var(--sidebar-w) !important;
}

/* Section labels (SERVER, WEAPON PAINTS, STATS) */
.nav-section-label,
[class*="menu-header"],
.nav-header {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.2) !important;
  padding: 18px 18px 5px !important;
}

/* Nav links */
.sidebar .nav-link,
.sidebar a.nav-link,
#sidebar a.dropdown-toggle,
#sidebar a {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--text-secondary) !important;
  padding: 9px 18px !important;
  margin: 1px 8px !important;
  border-radius: var(--radius) !important;
  border: 1px solid transparent !important;
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  transition: all 0.15s !important;
}

.sidebar .nav-link:hover,
#sidebar a:hover {
  color: var(--text-primary) !important;
  background: rgba(192,138,125,0.06) !important;
  border-color: rgba(192,138,125,0.12) !important;
}

.sidebar .nav-link.active,
#sidebar li.active > a,
#sidebar li.menu.active > .dropdown-toggle,
.sidebar .active > .nav-link {
  color: #fff !important;
  background: rgba(192,138,125,0.1) !important;
  border-color: rgba(192,138,125,0.25) !important;
  box-shadow: inset 3px 0 0 var(--accent) !important;
}

/* ============================================================
   SECTION 3 — Top Navbar
   ============================================================ */
.main-header,
.navbar,
header {
  background: var(--bg-navbar) !important;
  border-bottom: 1px solid var(--border) !important;
  height: var(--navbar-h) !important;
  min-height: var(--navbar-h) !important;
  box-shadow: none !important;
}

/* ============================================================
   SECTION 4 — Page content area
   ============================================================ */
.content-wrapper, main, .main-content {
  background: transparent !important;
  padding: 24px !important;
}

.content-header, [class*="page-header"] {
  background: transparent !important;
  padding: 0 0 20px !important;
  border-bottom: 1px solid var(--border) !important;
  margin-bottom: 24px !important;
}

.content-header h1,
.page-title {
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--text-primary) !important;
}

/* ============================================================
   SECTION 5 — Cards (SHARP, no border-radius)
   ============================================================ */
.card, [class*="card"] {
  background: rgba(14, 14, 18, 0.85) !important;
  backdrop-filter: blur(4px) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--text-primary) !important;
}

/* Top border on cards (replaces the old ::before accent-line approach) */
.card, [class*="card"],
.info-box, .small-box {
  border-top: 1px solid var(--border) !important;
}

/* Subtle inner glow on hover — cards feel like they float on the bg */
.card:hover {
  border-color: rgba(192,138,125, 0.12) !important;
  transition: border-color 0.2s !important;
}

.card-header, [class*="card-header"] {
  background: rgba(0,0,0,0.25) !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
  padding: 12px 18px !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--text-primary) !important;
}

.card-body {
  padding: 18px !important;
  background: transparent !important;
}

/* ============================================================
   SECTION 6 — Dashboard stat boxes (top row)
   ============================================================ */
.info-box, .small-box, [class*="stat-card"] {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden;
  position: relative;
}

.info-box-number, .small-box h3 {
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 800 !important;
  font-size: 36px !important;
  line-height: 1 !important;
  color: var(--text-primary) !important;
  letter-spacing: -0.02em;
}

.info-box-text, .small-box p {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
}

/* Active count badge (9 Active) */
[class*="active-count"],
.info-box [class*="badge"],
.small-box [class*="badge"] {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  background: var(--accent-dim) !important;
  color: var(--accent) !important;
  border: 1px solid var(--border-accent) !important;
  border-radius: var(--radius-sm) !important;
  padding: 2px 8px !important;
}

/* ============================================================
   SECTION 7 — Tables (full redesign)
   ============================================================ */
.table-responsive {
  border: 1px solid var(--border) !important;
  border-radius: 0 !important;
  overflow: hidden;
}

.table, table {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--text-primary) !important;
  border-collapse: collapse !important;
  width: 100% !important;
  margin: 0 !important;
}

.table thead th,
table thead th {
  background: rgba(8, 8, 12, 0.9) !important;
  color: var(--text-muted) !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  padding: 10px 14px !important;
  border: none !important;
  border-bottom: 1px solid var(--border-md) !important;
  white-space: nowrap;
}

.table tbody tr,
table tbody tr {
  background: rgba(14, 14, 18, 0.6) !important;
  border-bottom: 1px solid var(--border) !important;
  transition: background 0.12s !important;
}

.table tbody tr:nth-child(even),
table tbody tr:nth-child(even) {
  background: rgba(18, 18, 24, 0.6) !important;
}

.table tbody tr:hover,
table tbody tr:hover {
  background: rgba(30, 14, 14, 0.7) !important;
}

/* Left accent on permanent/active rows */
.table tbody tr[class*="permanent"],
.table tbody tr[class*="active-ban"] {
  border-left: 2px solid var(--accent) !important;
}

.table tbody td,
table tbody td {
  padding: 11px 14px !important;
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
  vertical-align: middle !important;
  background: transparent !important;
  color: var(--text-primary) !important;
}

/* ID column — monospace, muted */
.table td:first-child,
table td:first-child {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12px !important;
  color: var(--text-muted) !important;
}

/* Player name — bright */
[class*="player-name"],
.table td[class*="player"] {
  font-weight: 700 !important;
  color: var(--text-primary) !important;
}

/* Reason column */
[class*="reason"] {
  color: var(--text-secondary) !important;
  font-size: 13px !important;
}

/* Timestamps — monospace, small, muted */
[class*="date"], [class*="time"], [class*="created"],
[class*="expires"], [class*="added"], [class*="ended"] {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  color: var(--text-secondary) !important;
  white-space: nowrap !important;
}

/* ============================================================
   SECTION 9 — Status badges (redesigned, sharp)
   ============================================================ */
.badge, [class*="badge"], span[class*="status"] {
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 700 !important;
  font-size: 9px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  padding: 3px 9px !important;
  border-radius: var(--radius-sm) !important;  /* 2px — almost sharp */
  border: 1px solid transparent !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  white-space: nowrap !important;
}

/* Add dot before text */
.badge::before, [class*="badge"]::before {
  content: '●';
  font-size: 6px;
  line-height: 1;
}

/* ACTIVE / PERMANENT */
.badge-danger, .badge-active, [class*="active"] {
  background: rgba(192,138,125,0.12) !important;
  color: #ff6b6b !important;
  border-color: rgba(192,138,125,0.3) !important;
}

.badge[class*="permanent"], span[class*="permanent"] {
  background: rgba(192,138,125,0.18) !important;
  color: #C08A7D !important;
  border-color: rgba(192,138,125,0.5) !important;
  text-shadow: 0 0 10px rgba(192,138,125,0.4);
}

/* EXPIRED */
.badge-secondary, .badge-expired, [class*="expired"] {
  background: rgba(255,255,255,0.04) !important;
  color: var(--text-muted) !important;
  border-color: rgba(255,255,255,0.07) !important;
}

/* UNBANNED */
.badge-success, .badge-unbanned, [class*="unbanned"] {
  background: var(--green-dim) !important;
  color: var(--green) !important;
  border-color: rgba(34,197,94,0.3) !important;
}

/* CHAT mute */
.badge[class*="gag"], .badge[class*="chat"] {
  background: var(--yellow-dim) !important;
  color: var(--yellow) !important;
  border-color: rgba(234,179,8,0.3) !important;
}

/* VOICE mute */
.badge[class*="mute"], .badge[class*="voice"] {
  background: var(--purple-dim) !important;
  color: var(--purple) !important;
  border-color: rgba(139,92,246,0.3) !important;
}

/* BOTH / SILENCE */
.badge[class*="silence"], .badge[class*="both"] {
  background: rgba(192,138,125,0.08) !important;
  color: #C08A7D !important;
  border-color: rgba(192,138,125,0.2) !important;
}

/* Online (Servers table) */
.badge[class*="online"], span[class*="online"] {
  background: var(--green-dim) !important;
  color: var(--green) !important;
  border-color: rgba(34,197,94,0.3) !important;
}

/* Offline */
.badge[class*="offline"], span[class*="offline"] {
  background: rgba(255,255,255,0.04) !important;
  color: var(--text-muted) !important;
  border-color: rgba(255,255,255,0.06) !important;
}

/* ============================================================
   SECTION 10 — Buttons (sharp, tactical)
   ============================================================ */
.btn {
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;       /* SHARP */
  padding: 7px 16px !important;
  transition: all 0.15s !important;
  border: 1px solid transparent !important;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.btn-primary, .btn-danger {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
  box-shadow: 0 0 20px var(--accent-glow) !important;
}

.btn-primary:hover, .btn-danger:hover {
  background: var(--accent-hover) !important;
  box-shadow: 0 0 30px var(--accent-glow-lg) !important;
}

.btn-secondary, .btn-default {
  background: transparent !important;
  border-color: var(--border-md) !important;
  color: var(--text-secondary) !important;
}

.btn-secondary:hover, .btn-default:hover {
  border-color: var(--border-accent) !important;
  color: var(--text-primary) !important;
  background: var(--accent-dim) !important;
}

.btn-success {
  background: var(--green-dim) !important;
  border-color: rgba(34,197,94,0.35) !important;
  color: var(--green) !important;
}

.btn-sm {
  font-size: 10px !important;
  padding: 5px 12px !important;
  letter-spacing: 0.12em !important;
}

/* Action button in table rows (edit/unban/details) */
.btn[class*="action"], td .btn {
  padding: 4px 10px !important;
  font-size: 9px !important;
  letter-spacing: 0.15em !important;
}

/* ============================================================
   SECTION 11 — Forms and inputs (sharp)
   ============================================================ */
.form-control, input, select, textarea {
  background: var(--bg-input) !important;
  border: 1px solid var(--border) !important;
  border-radius: 0 !important;          /* SHARP */
  color: var(--text-primary) !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 8px 12px !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}

.form-control:focus, input:focus, select:focus, textarea:focus {
  border-color: var(--border-accent) !important;
  box-shadow: 0 0 0 2px var(--accent-dim) !important;
  outline: none !important;
  background: var(--bg-input) !important;
}

.form-control::placeholder, input::placeholder {
  color: var(--text-muted) !important;
  font-style: normal !important;
}

label, .form-label {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--text-secondary) !important;
  margin-bottom: 5px !important;
  display: block;
}

/* Search bar specifically */
input[type="search"],
input[placeholder*="search"],
input[placeholder*="Search"],
input[placeholder*="steamid"],
input[placeholder*="player"] {
  border-left: 2px solid var(--accent) !important;
}

/* "Select Server" dropdown — red accent instead of default blue outline */
[class*="server-select"],
select[class*="server"],
input[class*="server"],
.select2-container--default .select2-selection,
.select2-container--default .select2-selection--single {
  border: 1px solid rgba(192,138,125,0.4) !important;
  border-radius: 0 !important;
  background: rgba(192,138,125,0.05) !important;
  color: var(--text-primary) !important;
}

.select2-container--default.select2-container--focus .select2-selection,
.select2-container--default.select2-container--open .select2-selection {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px rgba(192,138,125,0.15) !important;
}

.form-control[id*="server"],
select[id*="server"] {
  border-color: rgba(192,138,125,0.4) !important;
  outline-color: var(--accent) !important;
}

/* ============================================================
   SECTION 12 — DataTables overrides
   ============================================================ */
.dataTables_wrapper {
  font-family: 'Rajdhani', sans-serif !important;
}

.dataTables_filter label,
.dataTables_length label {
  color: var(--text-secondary) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

.dataTables_info {
  color: var(--text-muted) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* Pagination */
.dataTables_paginate .paginate_button {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 0 !important;
  color: var(--text-secondary) !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  padding: 5px 12px !important;
  margin: 0 1px !important;
  transition: all 0.15s !important;
}

.dataTables_paginate .paginate_button.current {
  background: var(--accent-dim) !important;
  border-color: var(--border-accent) !important;
  color: var(--accent) !important;
}

.dataTables_paginate .paginate_button:hover:not(.disabled) {
  background: var(--accent-dim) !important;
  border-color: var(--border-accent) !important;
  color: var(--text-primary) !important;
}

.dataTables_paginate .paginate_button.disabled {
  opacity: 0.3 !important;
  cursor: not-allowed !important;
}

/* "Entries per page" select */
.dataTables_length select {
  background: var(--bg-input) !important;
  border: 1px solid var(--border) !important;
  border-radius: 0 !important;
  color: var(--text-primary) !important;
  width: auto !important;
  min-width: 64px !important;
  padding: 4px 24px 4px 10px !important;
}

.dataTables_length select:focus {
  border-color: var(--border-accent) !important;
  outline: none !important;
}

/* ============================================================
   SECTION 13 — Modals (sharp, dark)
   ============================================================ */
.modal-content {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-md) !important;
  border-radius: 0 !important;
  box-shadow: 0 32px 80px rgba(0,0,0,0.9),
              0 0 0 1px rgba(192,138,125,0.1) !important;
}

/* Red top line on modal */
.modal-content::before {
  content: '';
  display: block;
  height: 2px;
  background: var(--accent);
}

.modal-header {
  background: rgba(0,0,0,0.3) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 14px 20px !important;
  border-radius: 0 !important;
}

.modal-title {
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

.modal-body {
  padding: 20px !important;
  background: transparent !important;
}

.modal-footer {
  background: rgba(0,0,0,0.2) !important;
  border-top: 1px solid var(--border) !important;
  padding: 12px 20px !important;
}

.modal-backdrop { background: rgba(0,0,0,0.88) !important; }
.btn-close, .close { filter: invert(1) !important; opacity: 0.4 !important; }
.btn-close:hover, .close:hover { opacity: 0.9 !important; }

/* ============================================================
   SECTION 14 — Dropdown menus
   ============================================================ */
.dropdown-menu {
  background: #221c16 !important;
  border: 1px solid var(--border-md) !important;
  border-radius: 0 !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.8),
              0 0 0 1px rgba(255,255,255,0.03) !important;
  padding: 4px !important;
}

.dropdown-item {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--text-secondary) !important;
  padding: 8px 14px !important;
  border-radius: 0 !important;
  transition: all 0.12s !important;
}

.dropdown-item:hover {
  background: var(--accent-dim) !important;
  color: var(--text-primary) !important;
}

.dropdown-divider {
  border-color: var(--border) !important;
  margin: 3px 0 !important;
}

/* ============================================================
   SECTION 15 — Alerts
   ============================================================ */
.alert {
  border-radius: 0 !important;
  border: none !important;
  border-left: 3px solid !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 12px 16px !important;
}

.alert-danger {
  background: rgba(192,138,125,0.08) !important;
  border-left-color: var(--accent) !important;
  color: #ff8080 !important;
}

.alert-success {
  background: var(--green-dim) !important;
  border-left-color: var(--green) !important;
  color: #4ade80 !important;
}

.alert-warning {
  background: var(--yellow-dim) !important;
  border-left-color: var(--yellow) !important;
  color: #fbbf24 !important;
}

.alert-info {
  background: rgba(59,130,246,0.08) !important;
  border-left-color: #3b82f6 !important;
  color: #60a5fa !important;
}

/* ============================================================
   SECTION 16 — Ranks table special styling
   ============================================================ */
.table tbody tr:nth-child(1) td:nth-child(1) {
  color: var(--gold) !important;
  font-weight: 800 !important;
  font-size: 16px !important;
}
.table tbody tr:nth-child(2) td:nth-child(1) {
  color: var(--silver) !important;
  font-weight: 800 !important;
}
.table tbody tr:nth-child(3) td:nth-child(1) {
  color: var(--bronze) !important;
  font-weight: 800 !important;
}

/* CS Rating column — gold accent */
[class*="rating"], [class*="cs-rating"] {
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 700 !important;
  color: var(--gold) !important;
  font-size: 13px !important;
}

/* K/D ratio coloring */
[class*="kd"], [class*="ratio"] {
  font-family: 'JetBrains Mono', monospace !important;
}

/* ============================================================
   SECTION 17 — Servers table (dashboard)
   ============================================================ */
[class*="map-name"], td[class*="map"] {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12px !important;
  color: var(--text-primary) !important;
  font-weight: 500 !important;
}

[class*="server-ip"], td[class*="ip"] {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  color: var(--text-secondary) !important;
}

[class*="player-count"], td[class*="players"] {
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 700 !important;
}

/* ============================================================
   SECTION 18 — Progress bars are hidden globally (see SECTION 21)
   ============================================================ */

/* ============================================================
   SECTION 19 — Avatar images in tables
   ============================================================ */
img[src*="steam"],
img[class*="avatar"],
.table img,
table img {
  border-radius: 0 !important;        /* SHARP — matches design system */
  border: 1px solid var(--border-md) !important;
  width: 30px !important;
  height: 30px !important;
  object-fit: cover !important;
}

/* Fallback ? placeholder */
img[src*="no_avatar"],
img[src="?"],
img:not([src]) {
  filter: opacity(0.3) !important;
}

/* ============================================================
   SECTION 20 — Login page
   ============================================================ */
.login-page, body.login-page {
  background: var(--bg-body) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
}

.login-box, [class*="login-card"] {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-md) !important;
  border-radius: 0 !important;
  border-top: 2px solid var(--accent) !important;
  padding: 40px !important;
  width: 100% !important;
  max-width: 380px !important;
  box-shadow: 0 32px 80px rgba(0,0,0,0.7) !important;
}

/* Steam login button */
a[href*="steam"], .btn-steam {
  background: #1a2332 !important;
  border: 1px solid rgba(100,149,200,0.2) !important;
  color: #c7d5e0 !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 12px !important;
  border-radius: 0 !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  transition: all 0.2s !important;
}

a[href*="steam"]:hover {
  background: #243447 !important;
  border-color: rgba(100,149,200,0.4) !important;
}

/* ============================================================
   SECTION 21 — Progress bars hidden + Bootstrap blue/purple → red
   ============================================================ */

/* Hide progress bars completely — bans list, mutes list, dashboard, everywhere */
.progress,
[class*="progress"],
td .progress,
td [class*="progress"],
.table .progress,
table .progress {
  display: none !important;
  visibility: hidden !important;
}

/* Hide the now-empty "Progress" column entirely (header hidden via inline style in blade) */
#bansList td:last-child,
#mutesList td:last-child,
#recentBans td:last-child,
#recentMutes td:last-child {
  display: none !important;
}

/* Bootstrap info badges/buttons → red */
.badge-info, .bg-info, [class*="badge-info"],
.btn-info {
  background: rgba(192,138,125,0.12) !important;
  color: rgba(192,138,125,0.8) !important;
  border: 1px solid rgba(192,138,125,0.25) !important;
}

/* Stat-card icons & utility text colors baked-in as #2196f3 / #4361ee → red */
.text-info, .text-primary {
  color: rgba(192,138,125,0.85) !important;
}

/* Solid/light badges (Never Expires, last-seen pill, sidebar count) baked-in as #4361ee / #2196f3 → red */
.badge-primary, .badge-light-primary, .badge-light-info {
  background: rgba(192,138,125,0.12) !important;
  color: rgba(192,138,125,0.85) !important;
  border: 1px solid rgba(192,138,125,0.25) !important;
}

/* Sidebar active state — red, no blue/purple */
.sidebar .nav-link.active,
.sidebar .active > .nav-link,
.sidebar .active > a,
#sidebar .active a,
nav .nav-link.active {
  background: rgba(192,138,125,0.1) !important;
  color: #fff !important;
  border-color: rgba(192,138,125,0.25) !important;
  box-shadow: inset 3px 0 0 #C08A7D !important;
}

/* Kill Bootstrap's default blue focus ring everywhere */
*:focus {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(192,138,125,0.2) !important;
}

.btn:focus, .btn:active:focus,
.form-control:focus,
.nav-link:focus {
  box-shadow: 0 0 0 2px rgba(192,138,125,0.2) !important;
  outline: none !important;
}

/* Bootstrap primary color override — nuclear option */
:root {
  --bs-primary: #C08A7D !important;
  --bs-primary-rgb: 255, 59, 59 !important;
  --bs-link-color: #C08A7D !important;
  --bs-link-hover-color: #A8675A !important;
}

/* Top navbar — kill any blue/teal tint */
.main-header,
.navbar,
.navbar-light,
.navbar-dark,
header,
.app-header,
.header-container {
  background: #15110d !important;
  background-color: #15110d !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  box-shadow: none !important;
}

.main-header::before,
.main-header::after,
.navbar::before,
.navbar::after {
  display: none !important;
  background: none !important;
}

/* Vendor bakes #4361ee directly into the active sidebar menu item —
   match its exact selector chain so our red wins on specificity */
#sidebar ul.menu-categories li.menu.active > .dropdown-toggle,
#sidebar ul.menu-categories li.menu.active > .dropdown-toggle[aria-expanded="true"] {
  background: rgba(192,138,125,0.12) !important;
  color: #fff !important;
  box-shadow: inset 3px 0 0 #C08A7D !important;
}

/* ============================================================
   SECTION 22 — Page-load preloader (#load_screen)
   The vendor renders <div id="load_screen"> via <x-layout-loader/>
   (resources/views/components/layout-loader.blade.php) with a baked-in
   light-blue background (rgb(236,239,255)) and a #304aca spinner-grow.
   loader.js removes it from the DOM by ID on window "load" — it doesn't
   care about its inner markup, so we restyle it to match the FluxCS theme.
   ============================================================ */
#load_screen {
  background: #1a1410 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  transition: opacity 0.4s ease !important;
}

/* Vendor's .loader is a leftover absolutely-positioned spinning-circle style
   (position:absolute; top/left:50%; margin:-60px; width/height:120px; border-radius:50%)
   — neutralize it completely so our flex-centered layout isn't shoved into a corner */
#load_screen .loader,
#load_screen .loader-content {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  animation: none !important;
  transform: none !important;
}

#load_screen .loader {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100vh !important;
  width: 100% !important;
}

/* ---- Animated grid texture ---- */
.flux-loader-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(192,138,125,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(192,138,125,0.07) 1px, transparent 1px);
  background-size: 48px 48px;
  animation: fluxGridPulse 3s ease-in-out infinite;
}

@keyframes fluxGridPulse {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 0.9; }
}

/* ---- Red atmospheric glow ---- */
.flux-loader-glow {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 400px;
  background: radial-gradient(ellipse at 50% 0%, rgba(192,138,125,0.18) 0%, rgba(54,47,38,0.08) 40%, transparent 70%);
  animation: fluxGlowBreath 2.5s ease-in-out infinite;
}

@keyframes fluxGlowBreath {
  0%, 100% { opacity: 0.6; transform: translateX(-50%) scale(1); }
  50%      { opacity: 1;   transform: translateX(-50%) scale(1.15); }
}

/* ---- Center content ---- */
.flux-loader-center {
  position: relative;
  z-index: 2;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

/* ---- Rotating ring loader (replaces vendor .spinner-grow) ---- */
.flux-loader-ring {
  position: relative;
  width: 64px;
  height: 64px;
}

.flux-loader-ring-inner {
  width: 64px;
  height: 64px;
  border: 1px solid rgba(255,255,255,0.05);
  border-top: 2px solid #C08A7D;
  border-right: 2px solid rgba(192,138,125,0.3);
  border-radius: 50%;
  animation: fluxRingRotate 0.9s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  box-shadow: 0 0 20px rgba(192,138,125,0.3), inset 0 0 20px rgba(192,138,125,0.05);
}

.flux-loader-ring::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  background: #C08A7D;
  border-radius: 50%;
  box-shadow: 0 0 12px #C08A7D, 0 0 24px rgba(192,138,125,0.5);
  animation: fluxCorePulse 0.9s ease-in-out infinite;
}

@keyframes fluxRingRotate {
  to { transform: rotate(360deg); }
}

@keyframes fluxCorePulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1);    opacity: 1; }
  50%      { transform: translate(-50%, -50%) scale(1.6);  opacity: 0.5; }
}

/* ---- FLUX brand text ---- */
.flux-loader-brand {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 800;
  font-size: 26px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.9);
  text-shadow: 0 0 30px rgba(192,138,125,0.3);
}

.flux-loader-brand span {
  color: #C08A7D;
  text-shadow: 0 0 20px rgba(192,138,125,0.6);
}

/* ---- LOADING text, staggered letter glow ---- */
.flux-loader-text {
  display: flex;
  align-items: center;
  gap: 1px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.25);
}

.flux-loader-text > span {
  display: inline-block;
  animation: fluxLetterFade 1.4s ease-in-out infinite;
}

.flux-loader-text > span:nth-child(1) { animation-delay: 0.0s; }
.flux-loader-text > span:nth-child(2) { animation-delay: 0.1s; }
.flux-loader-text > span:nth-child(3) { animation-delay: 0.2s; }
.flux-loader-text > span:nth-child(4) { animation-delay: 0.3s; }
.flux-loader-text > span:nth-child(5) { animation-delay: 0.4s; }
.flux-loader-text > span:nth-child(6) { animation-delay: 0.5s; }
.flux-loader-text > span:nth-child(7) { animation-delay: 0.6s; }

@keyframes fluxLetterFade {
  0%, 100% { color: rgba(255,255,255,0.15); }
  50%      { color: rgba(192,138,125,0.8); }
}

.flux-loader-dots {
  display: inline-flex;
  gap: 2px;
  margin-left: 4px;
}

.flux-loader-dots span {
  font-size: 14px;
  line-height: 0.8;
  color: rgba(192,138,125,0.6) !important;
  animation: fluxDotBounce 1.2s ease-in-out infinite;
}

.flux-loader-dots span:nth-child(1) { animation-delay: 0.0s; }
.flux-loader-dots span:nth-child(2) { animation-delay: 0.2s; }
.flux-loader-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes fluxDotBounce {
  0%, 100% { transform: translateY(0);     opacity: 0.3; }
  50%      { transform: translateY(-4px);  opacity: 1; }
}

/* Recolor the vendor's spinner-grow wherever it still appears (in-page <x-loader> spinners) */
#load_screen .spinner-grow,
.spinner-grow {
  color: #C08A7D !important;
}

/* ============================================================
   SECTION 23 — Top navbar removed: sidebar + content fill full height
   The vendor reserved a 70px top margin on #content for the now-removed
   <x-navbar.style-vertical-menu> (.header-container, fixed, height ~62px).
   ============================================================ */
#content {
  margin-top: 0 !important;
}

.layout-px-spacing {
  margin-top: 0 !important;
}

.sidebar-wrapper,
#sidebar {
  top: 0 !important;
  height: 100vh !important;
}

/* ---- Sidebar user panel: rebuilt with inline styles in vertical-menu.blade.php — no CSS classes/overrides needed ---- */

/* ---- Collapsible nav groups (Admin / RCON / Settings) ---- */
.nav-section-label.nav-group-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  cursor: pointer;
}

.nav-group-toggle .toggle-chevron {
  color: rgba(255,255,255,0.25);
}

.nav-group-toggle:hover .toggle-chevron {
  color: rgba(192,138,125,0.6);
}

.nav-group-content {
  padding: 0 !important;
  margin: 0 !important;
}

/* ---- Sidebar logo / brand area — kill vendor's navy #0e1726 background ---- */
body.layout-dark #sidebar .theme-brand,
body.layout-dark .sidebar-closed #sidebar .theme-brand,
body.layout-dark .sidebar-closed > .sidebar-wrapper:hover #sidebar .theme-brand,
#sidebar .theme-brand {
  background-color: #15110d !important;
  background-image: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  border-radius: 0 !important;
}

/* === DATATABLES FIXES v2 === */

div.dataTables_paginate .paginate_button.disabled,
div.dataTables_paginate .paginate_button.disabled:hover,
.dataTables_paginate .paginate_button.disabled,
.paginate_button.disabled {
  background: rgba(255,255,255,0.02) !important;
  background-color: rgba(255,255,255,0.02) !important;
  border-color: rgba(255,255,255,0.04) !important;
  color: rgba(255,255,255,0.1) !important;
  cursor: default !important;
  box-shadow: none !important;
}

/* Progress column on Bans/Mutes lists only — hidden (scoped to avoid affecting other DataTables) */
#bansList thead th:last-child,
#bansList tbody td:last-child,
#mutesList thead th:last-child,
#mutesList tbody td:last-child {
  display: none !important;
  width: 0 !important;
  max-width: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* === END DATATABLES FIXES v2 === */

/* === USER PANEL FIX === */
.sidebar-wrapper { box-shadow: none !important; background-image: none !important; }
#sidebar .shadow-bottom { display: none !important; box-shadow: none !important; }
/* === END USER PANEL FIX === */

/* === TABLE WIDTH FIX === */
#bansList { width: 100% !important; table-layout: auto !important; }
#mutesList { width: 100% !important; table-layout: auto !important; }
/* === END TABLE WIDTH FIX === */

/* === PAGINATION BOOTSTRAP FIX === */

.pagination {
  gap: 3px !important;
  margin-top: 8px !important;
}

.pagination .page-item .page-link,
.pagination li a,
.pagination li span {
  background-color: rgba(255,255,255,0.04) !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 0 !important;
  color: rgba(255,255,255,0.4) !important;
  font-family: Rajdhani, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  min-width: 34px !important;
  height: 34px !important;
  padding: 0 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  text-decoration: none !important;
  transition: all 0.15s !important;
  margin: 0 1px !important;
}

.pagination .page-item .page-link:hover,
.pagination li a:hover {
  background-color: rgba(192,138,125,0.1) !important;
  background: rgba(192,138,125,0.1) !important;
  border-color: rgba(192,138,125,0.35) !important;
  color: rgba(255,255,255,0.8) !important;
  box-shadow: none !important;
}

.pagination .page-item.active .page-link,
.pagination li.active a,
.pagination li.active span {
  background-color: rgba(192,138,125,0.15) !important;
  background: rgba(192,138,125,0.15) !important;
  border-color: rgba(192,138,125,0.5) !important;
  color: #C08A7D !important;
  box-shadow: none !important;
  font-weight: 800 !important;
}

.pagination .page-item.disabled .page-link,
.pagination li.disabled a,
.pagination li.disabled span {
  background-color: rgba(255,255,255,0.02) !important;
  background: rgba(255,255,255,0.02) !important;
  border-color: rgba(255,255,255,0.04) !important;
  color: rgba(255,255,255,0.12) !important;
  cursor: default !important;
  box-shadow: none !important;
}

.dataTables_info,
div.dataTables_info {
  color: rgba(255,255,255,0.3) !important;
  font-family: Rajdhani, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  padding-top: 10px !important;
  background: transparent !important;
}

/* === END PAGINATION BOOTSTRAP FIX === */

/* ================================================
   SKIN CHANGER — Full FluxCS Redesign
   ================================================ */

/* ---- WEAPON TAB BAR ---- */
#weaponTab,
ul.nav-tabs {
  background: rgba(0,0,0,0.3) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 0 !important;
  padding: 6px !important;
  display: flex !important;
  gap: 4px !important;
  margin-bottom: 24px !important;
}

#weaponTab .nav-item,
ul.nav-tabs .nav-item {
  flex: 1 !important;
}

#weaponTab .nav-link,
ul.nav-tabs .nav-link {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 0 !important;
  padding: 10px 8px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  transition: all 0.15s !important;
  width: 100% !important;
  color: rgba(255,255,255,0.4) !important;
  font-family: Rajdhani, sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
}

#weaponTab .nav-link:hover,
ul.nav-tabs .nav-link:hover {
  background: rgba(192,138,125,0.08) !important;
  border-color: rgba(192,138,125,0.2) !important;
  color: rgba(255,255,255,0.7) !important;
}

#weaponTab .nav-link.active,
ul.nav-tabs .nav-link.active {
  background: rgba(192,138,125,0.12) !important;
  border-color: rgba(192,138,125,0.4) !important;
  border-bottom: 2px solid #C08A7D !important;
  color: #fff !important;
}

#weaponTab .nav-link img,
ul.nav-tabs .nav-link img,
.weapon-tab-icon {
  width: 48px !important;
  height: 48px !important;
  object-fit: contain !important;
  filter: brightness(0.6) grayscale(0.3) !important;
  transition: filter 0.15s !important;
}

#weaponTab .nav-link.active img,
#weaponTab .nav-link:hover img,
ul.nav-tabs .nav-link.active img,
ul.nav-tabs .nav-link:hover img {
  filter: brightness(1) grayscale(0) drop-shadow(0 0 8px rgba(192,138,125,0.4)) !important;
}

/* ---- SKIN CARDS GRID ---- */
.card.style-6,
.weapon-card {
  background: #1e1810 !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  transition: all 0.2s ease !important;
  position: relative !important;
  box-shadow: none !important;
}

.card.style-6:hover,
.weapon-card:hover {
  border-color: rgba(192,138,125,0.3) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
}

/* Neutralize the vendor glow variable — beats JS inline style when !important */
.card.style-6,
.card.style-6.glow,
.weapon-card {
  --glow-color: transparent !important;
}

.card.style-6::before,
.weapon-card::before {
  content: "" !important;
  position: absolute !important;
  top: 0; left: 0; right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, rgba(192,138,125,0.6), transparent) !important;
  opacity: 0 !important;
  transition: opacity 0.2s !important;
  z-index: 2 !important;
}

/* Override the higher-specificity vendor rule .card.style-6.glow::before { opacity:1 } */
.card.style-6.glow::before,
.weapon-card.glow::before {
  opacity: 0 !important;
}

.card.style-6:hover::before,
.weapon-card:hover::before {
  opacity: 1 !important;
}

.card.style-6 .card-img-top,
.card.style-6 img.lazy {
  background: #14100c !important;
  padding: 12px !important;
  width: 100% !important;
  height: 160px !important;
  object-fit: contain !important;
}

.card.style-6 .card-footer {
  background: rgba(0,0,0,0.3) !important;
  border-top: 1px solid rgba(255,255,255,0.05) !important;
  padding: 10px 12px !important;
}

.card.style-6 .card-footer b {
  font-family: Rajdhani, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.8) !important;
}

/* ---- ACTIVE SKIN STATUS BADGE ---- */
.skin_active {
  font-family: Rajdhani, sans-serif !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  padding: 2px 7px !important;
  border-radius: 2px !important;
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  z-index: 3 !important;
}

/* T-side active (badge-danger per blade logic) */
.skin_active.badge-danger {
  background: rgba(234,179,8,0.15) !important;
  color: #eab308 !important;
  border: 1px solid rgba(234,179,8,0.35) !important;
}

/* CT-side active (badge-primary per blade logic) */
.skin_active.badge-primary {
  background: rgba(59,130,246,0.15) !important;
  color: #60a5fa !important;
  border: 1px solid rgba(59,130,246,0.35) !important;
}

/* Both sides active (badge-success per blade logic) */
.skin_active.badge-success {
  background: rgba(192,138,125,0.15) !important;
  color: #C08A7D !important;
  border: 1px solid rgba(192,138,125,0.35) !important;
}

/* ---- APPLY SKIN BUTTON ---- */
.apply-skin {
  background: rgba(192,138,125,0.12) !important;
  border: 1px solid rgba(192,138,125,0.35) !important;
  border-radius: 0 !important;
  color: rgba(255,100,100,0.9) !important;
  font-family: Rajdhani, sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  padding: 6px 14px !important;
  width: 100% !important;
  transition: all 0.15s !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  cursor: pointer !important;
}

.apply-skin:hover {
  background: rgba(192,138,125,0.22) !important;
  border-color: rgba(192,138,125,0.6) !important;
  color: #fff !important;
  box-shadow: 0 0 12px rgba(192,138,125,0.2) !important;
}

/* ---- LOADING SPINNER ON CARDS ---- */
.loader-skins {
  display: flex;
  align-items: center !important;
  justify-content: center !important;
  height: 160px !important;
  background: #14100c !important;
}

.loader-skins .spinner-border,
.loader-skins .spinner-grow {
  color: #C08A7D !important;
  width: 28px !important;
  height: 28px !important;
}

/* ---- APPLY SKIN MODAL ---- */
#applySkinModal .modal-content {
  background: #1e1810 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-top: 2px solid #C08A7D !important;
  border-radius: 0 !important;
  box-shadow: 0 32px 80px rgba(0,0,0,0.9) !important;
}

#applySkinModal .modal-header {
  background: rgba(0,0,0,0.3) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  padding: 14px 20px !important;
}

#applySkinModal .modal-title {
  font-family: Rajdhani, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #fff !important;
}

#applySkinModal .modal-body {
  padding: 20px !important;
  background: transparent !important;
}

#applySkinModal .modal-footer {
  background: rgba(0,0,0,0.2) !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  padding: 14px 20px !important;
}

#applySkinModal label,
#applySkinModal .form-label {
  font-family: Rajdhani, sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.4) !important;
  margin-bottom: 5px !important;
}

#applySkinModal input,
#applySkinModal select,
#applySkinModal .form-control,
#applySkinModal .form-select {
  background: #1a1410 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 0 !important;
  color: rgba(255,255,255,0.8) !important;
  font-family: Rajdhani, sans-serif !important;
  font-size: 13px !important;
}

#applySkinModal input:focus,
#applySkinModal select:focus {
  border-color: rgba(192,138,125,0.4) !important;
  box-shadow: 0 0 0 2px rgba(192,138,125,0.1) !important;
  outline: none !important;
  background: #1a1410 !important;
  color: rgba(255,255,255,0.9) !important;
}

#applySkinModal .btn-primary,
#applySkinModal #saveSkinButton {
  background: #C08A7D !important;
  border-color: #C08A7D !important;
  border-radius: 0 !important;
  color: #fff !important;
  font-family: Rajdhani, sans-serif !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  box-shadow: 0 0 16px rgba(192,138,125,0.3) !important;
}

#applySkinModal .btn-primary:hover {
  background: #A8675A !important;
  box-shadow: 0 0 24px rgba(192,138,125,0.5) !important;
}

#applySkinModal .btn-close {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 0 !important;
  opacity: 0.6 !important;
}

#applySkinModal [class*="sticker"],
#applySkinModal [id*="sticker"] {
  border: 1px dashed rgba(255,255,255,0.1) !important;
  border-radius: 0 !important;
  background: rgba(255,255,255,0.02) !important;
  padding: 8px !important;
}

/* ---- SKIN PREVIEW MODAL ---- */
#skinPreviewModal .modal-content {
  background: #1a1410 !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-top: 2px solid rgba(192,138,125,0.5) !important;
  border-radius: 0 !important;
}

#skinPreviewModal #skinPreviewImage {
  display: block !important;
  margin: 0 auto !important;
  max-height: 420px !important;
  background: #14100c !important;
  padding: 20px !important;
}

#skinPreviewModal #skinPreviewName {
  font-family: Rajdhani, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.85) !important;
}

/* ---- WEAPON SELECT MODAL ---- */
#weaponModal .modal-content {
  background: #1e1810 !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-top: 2px solid #C08A7D !important;
  border-radius: 0 !important;
}

.weapon-select-button {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 0 !important;
  color: rgba(255,255,255,0.6) !important;
  font-family: Rajdhani, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 8px 12px !important;
  transition: all 0.15s !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
}

.weapon-select-button:hover {
  background: rgba(192,138,125,0.1) !important;
  border-color: rgba(192,138,125,0.3) !important;
  color: #fff !important;
}

/* ---- GUEST LOGIN PROMPT ---- */
#loginAlert {
  background: #1e1810 !important;
  border: 1px solid rgba(192,138,125,0.3) !important;
  border-radius: 0 !important;
  color: rgba(255,255,255,0.8) !important;
  font-family: Rajdhani, sans-serif !important;
  box-shadow: 0 32px 80px rgba(0,0,0,0.8) !important;
}

#loginAlert .btn-success {
  background: #C08A7D !important;
  border-color: #C08A7D !important;
  border-radius: 0 !important;
  font-family: Rajdhani, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

/* ---- SKIN GRID LAYOUT ---- */
.tab-content .row {
  gap: 0 !important;
}

.tab-content [class*="col-"] {
  padding: 6px !important;
}

/* ================================================
   END SKIN CHANGER REDESIGN
   ================================================ */

/* ================================================
   SKIN CHANGER — CRITICAL FIXES
   ================================================ */

/* FIX 1 — Restore modal interactivity (scoped to the 3 skin-changer modals only,
   so we don't touch the 9 other pages relying on the existing global .modal-* rules) */

#applySkinModal, #weaponModal, #skinPreviewModal { z-index: 1055 !important; pointer-events: auto !important; }
#applySkinModal .modal-dialog, #weaponModal .modal-dialog, #skinPreviewModal .modal-dialog { pointer-events: auto !important; z-index: 1056 !important; }
#applySkinModal .modal-content, #weaponModal .modal-content, #skinPreviewModal .modal-content { pointer-events: auto !important; }
#applySkinModal.show, #weaponModal.show, #skinPreviewModal.show { display: block !important; pointer-events: auto !important; }
#applySkinModal.show .modal-dialog, #weaponModal.show .modal-dialog, #skinPreviewModal.show .modal-dialog { pointer-events: auto !important; }

#applySkinModal button,
#applySkinModal a,
#applySkinModal input,
#applySkinModal select,
#applySkinModal [role=button],
#weaponModal button,
#weaponModal a,
#weaponModal [role=button],
#skinPreviewModal button,
#skinPreviewModal a {
  pointer-events: auto !important;
  position: relative !important;
  z-index: 10 !important;
  cursor: pointer !important;
}

#applySkinModal .btn-close,
#weaponModal .btn-close,
#skinPreviewModal .btn-close {
  pointer-events: auto !important;
  opacity: 1 !important;
  z-index: 100 !important;
  cursor: pointer !important;
  filter: invert(1) !important;
}

/* FIX 2 — Restore skin card images (lazy-loaded thumbnails were collapsing to 0 height) */

.card.style-6 img,
.card.style-6 .card-img-top,
.card.style-6 img.lazy,
.weapon-card img,
.weapon-card .card-img-top {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  height: 160px !important;
  object-fit: contain !important;
  background: #15110d !important;
  padding: 16px !important;
}

.card.style-6 img[data-src],
img.lazy[data-src] {
  opacity: 0.3 !important;
  transition: opacity 0.3s !important;
}

.card.style-6 img:not([data-src]),
img.lazy:not([data-src]) {
  opacity: 1 !important;
}

/* FIX 3 — Kill remaining blue buttons inside the skin-changer tab content */

.btn.btn-primary.apply-skin,
.btn-primary.apply-skin,
button.apply-skin,
a.apply-skin {
  background: rgba(192,138,125,0.1) !important;
  background-color: rgba(192,138,125,0.1) !important;
  border: 1px solid rgba(192,138,125,0.35) !important;
  border-radius: 0 !important;
  color: rgba(255,130,130,0.9) !important;
  box-shadow: none !important;
}

.btn.btn-primary.apply-skin:hover,
.btn-primary.apply-skin:hover {
  background: rgba(192,138,125,0.2) !important;
  background-color: rgba(192,138,125,0.2) !important;
  border-color: rgba(192,138,125,0.6) !important;
  color: #fff !important;
  box-shadow: 0 0 12px rgba(192,138,125,0.2) !important;
}

#weaponModal .weapon-select-button {
  background: rgba(14,14,18,0.95) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 0 !important;
  color: rgba(255,255,255,0.7) !important;
  transition: all 0.15s !important;
}

#weaponModal .weapon-select-button:hover {
  background: rgba(192,138,125,0.08) !important;
  border-color: rgba(192,138,125,0.3) !important;
  color: #fff !important;
}

.tab-content .btn-primary,
.lazy-content .btn-primary {
  background: rgba(192,138,125,0.1) !important;
  background-color: rgba(192,138,125,0.1) !important;
  border: 1px solid rgba(192,138,125,0.35) !important;
  color: rgba(255,130,130,0.9) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* FIX 4 — Skin/weapon-select cards: dark, no orange/terracotta backgrounds */

#weaponModal .card,
#weaponModal .weapon-select-button {
  background-image: none !important;
  background: #1e1810 !important;
}

.card.style-6,
.weapon-card {
  background: #1b1610 !important;
  background-color: #1b1610 !important;
  background-image: none !important;
  border: 1px solid rgba(192,138,125,0.12) !important;
}

.card.style-6:hover,
.weapon-card:hover {
  background: #0e0e14 !important;
  border-color: rgba(192,138,125,0.3) !important;
}

.card.style-6 .card-img-top {
  background: #09090d !important;
  background-color: #09090d !important;
}

/* FIX 5 — Weapon-select modal container + close button */

#weaponModal .modal-content {
  background: #1a1410 !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-top: 2px solid #C08A7D !important;
  border-radius: 0 !important;
  z-index: 1060 !important;
}

#weaponModal .modal-body {
  max-height: 70vh !important;
  overflow-y: auto !important;
}

#applySkinModal .btn-light-dark,
#weaponModal .btn-light-dark,
#applySkinModal button[data-bs-dismiss=modal].btn-light-dark,
#weaponModal button[data-bs-dismiss=modal].btn-light-dark {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 0 !important;
  color: rgba(255,255,255,0.5) !important;
  font-family: Rajdhani, sans-serif !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  padding: 6px 16px !important;
}

#applySkinModal button[data-bs-dismiss=modal]:hover,
#weaponModal button[data-bs-dismiss=modal]:hover {
  background: rgba(192,138,125,0.1) !important;
  border-color: rgba(192,138,125,0.3) !important;
  color: #fff !important;
}

/* ================================================
   END SKIN CHANGER CRITICAL FIXES
   ================================================ */

/* ================================================
   MODAL STACKING CONTEXT FIX
   Bootstrap appends .modal-backdrop as a direct child of <body> (z-index:1050).
   .main-container has position:relative + z-index:1, which creates a stacking
   context at z-index 1 in the body. Modals inside it (z-index:1055) are evaluated
   *within* that stacking context, so they paint at effective z-index ~1 in body —
   below the backdrop (1050). Result: backdrop covers modal, clicks never reach it.
   Fix: remove z-index (set to auto) so neither element creates a stacking context.
   Modals then participate directly in the body stacking context at z-index 1055,
   which correctly sits above the backdrop at 1050.
   ================================================ */
.main-container, #content {
  z-index: auto !important;
}

/* ================================================
   WEAPON / KNIFE SELECTOR MODAL — UX REDESIGN
   Real DOM: .modal-body > .row > .col-md-3.mb-4 > button.weapon-select-button (or knife-select-button)
             button contains: img.weapon-tab-icon + p
   ================================================ */

/* Wider dialog so 6 columns have room */
#weaponModal .modal-dialog,
#knifeModal .modal-dialog {
  max-width: 800px !important;
  width: 92vw !important;
}

/* Scrollable body — weapon list can be long */
#weaponModal .modal-body,
#knifeModal .modal-body {
  max-height: 70vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 12px !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(192,138,125,0.3) transparent !important;
}

#weaponModal .modal-body::-webkit-scrollbar,
#knifeModal .modal-body::-webkit-scrollbar { width: 4px !important; }

#weaponModal .modal-body::-webkit-scrollbar-thumb,
#knifeModal .modal-body::-webkit-scrollbar-thumb { background: rgba(192,138,125,0.3) !important; }

/* Override Bootstrap flex row → CSS grid with 6 equal columns */
#weaponModal .modal-body .row,
#knifeModal .modal-body .row {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 6px !important;
  margin: 0 !important;
}

/* Each col becomes a grid cell — reset Bootstrap's flex sizing and mb-4 */
#weaponModal .modal-body .row > [class*="col"],
#knifeModal .modal-body .row > [class*="col"] {
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Button — full-width tile, column layout */
#weaponModal .weapon-select-button,
#knifeModal .knife-select-button {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 10px 4px 8px !important;
  gap: 6px !important;
  background: #1b1610 !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 0 !important;
  color: rgba(255,255,255,0.65) !important;
  font-family: Rajdhani, sans-serif !important;
  font-weight: 700 !important;
  transition: background 0.12s, border-color 0.12s !important;
  cursor: pointer !important;
}

#weaponModal .weapon-select-button:hover,
#knifeModal .knife-select-button:hover {
  background: rgba(192,138,125,0.1) !important;
  border-color: rgba(192,138,125,0.4) !important;
  color: #fff !important;
}

/* Icon image — uniform size, transparent bg */
#weaponModal .weapon-select-button img,
#knifeModal .knife-select-button img {
  width: 48px !important;
  height: 48px !important;
  object-fit: contain !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  background: transparent !important;
}

/* Label — truncate long knife/weapon names */
#weaponModal .weapon-select-button p,
#knifeModal .knife-select-button p {
  font-size: 9px !important;
  font-weight: 700 !important;
  font-family: Rajdhani, sans-serif !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: inherit !important;
  text-align: center !important;
  margin: 0 !important;
  padding: 0 2px !important;
  width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.2 !important;
}

/* 4 columns on small screens */
@media (max-width: 640px) {
  #weaponModal .modal-body .row,
  #knifeModal .modal-body .row {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* ================================================
   END WEAPON / KNIFE SELECTOR MODAL REDESIGN
   ================================================ */

/* ================================================
   WEAPON / KNIFE SELECTOR MODAL — FULL REDESIGN v2
   Overrides previous block (source-order wins)
   ================================================ */

/* Larger dialog */
#weaponModal .modal-dialog,
#knifeModal .modal-dialog {
  max-width: min(940px, 94vw) !important;
  width: 94vw !important;
  margin: 24px auto !important;
}

/* Modal shell: dark, red accent top, flex column, capped height */
#weaponModal .modal-content,
#knifeModal .modal-content {
  background: #14100c !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-top: 2px solid #C08A7D !important;
  border-radius: 0 !important;
  max-height: 86vh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* Header: title + search inline, no wrap */
#weaponModal .modal-header,
#knifeModal .modal-header {
  background: rgba(0,0,0,0.55) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  padding: 12px 18px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex-wrap: nowrap !important;
}

#weaponModal .modal-title,
#knifeModal .modal-title {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: #fff !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  margin: 0 !important;
}

/* Search inputs */
#weaponSearch,
#knifeSearch {
  flex: 1 !important;
  min-width: 0 !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-left: 2px solid rgba(192,138,125,0.5) !important;
  border-radius: 0 !important;
  color: rgba(255,255,255,0.85) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 6px 12px !important;
  outline: none !important;
  transition: border-color 0.15s, background 0.15s !important;
  height: 32px !important;
}

#weaponSearch:focus,
#knifeSearch:focus {
  background: rgba(255,255,255,0.07) !important;
  border-color: rgba(192,138,125,0.5) !important;
  border-left-color: #C08A7D !important;
}

#weaponSearch::placeholder,
#knifeSearch::placeholder {
  color: rgba(255,255,255,0.22) !important;
}

/* Close button keep visible */
#weaponModal .modal-header .btn-close,
#knifeModal .modal-header .btn-close {
  flex-shrink: 0 !important;
  filter: invert(1) opacity(0.5) !important;
}

#weaponModal .modal-header .btn-close:hover,
#knifeModal .modal-header .btn-close:hover {
  filter: invert(1) opacity(0.9) !important;
}

/* Scrollable body */
#weaponModal .modal-body,
#knifeModal .modal-body {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 14px !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(192,138,125,0.35) rgba(255,255,255,0.02) !important;
}

#weaponModal .modal-body::-webkit-scrollbar,
#knifeModal .modal-body::-webkit-scrollbar {
  width: 4px !important;
}

#weaponModal .modal-body::-webkit-scrollbar-thumb,
#knifeModal .modal-body::-webkit-scrollbar-thumb {
  background: rgba(192,138,125,0.35) !important;
}

/* 5-column grid desktop */
#weaponModal .modal-body .row,
#knifeModal .modal-body .row {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Reset all col-* classes inside grids */
#weaponModal .modal-body .row > [class*="col"],
#knifeModal .modal-body .row > [class*="col"] {
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Weapon / knife select buttons */
#weaponModal .weapon-select-button,
#knifeModal .knife-select-button {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 14px 8px 10px !important;
  gap: 10px !important;
  background: #1b1610 !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 0 !important;
  color: rgba(255,255,255,0.6) !important;
  cursor: pointer !important;
  transition: background 0.14s, border-color 0.14s, transform 0.14s, box-shadow 0.14s !important;
  position: relative !important;
  overflow: hidden !important;
}

#weaponModal .weapon-select-button::before,
#knifeModal .knife-select-button::before {
  content: '' !important;
  position: absolute !important;
  top: 0; left: 0; right: 0 !important;
  height: 0 !important;
  background: #C08A7D !important;
  transition: height 0.14s !important;
}

#weaponModal .weapon-select-button:hover,
#knifeModal .knife-select-button:hover {
  background: #1e1510 !important;
  border-color: rgba(192,138,125,0.45) !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
}

#weaponModal .weapon-select-button:hover::before,
#knifeModal .knife-select-button:hover::before {
  height: 2px !important;
}

/* Images inside buttons */
#weaponModal .weapon-select-button img,
#knifeModal .knife-select-button img {
  width: 100% !important;
  max-width: 72px !important;
  height: 56px !important;
  object-fit: contain !important;
  display: block !important;
  background: transparent !important;
  opacity: 1 !important;
  visibility: visible !important;
  transition: transform 0.14s !important;
  flex-shrink: 0 !important;
}

#weaponModal .weapon-select-button:hover img,
#knifeModal .knife-select-button:hover img {
  transform: scale(1.1) !important;
}

/* Text labels */
#weaponModal .weapon-select-button p,
#knifeModal .knife-select-button p {
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: inherit !important;
  text-align: center !important;
  margin: 0 !important;
  padding: 0 2px !important;
  width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.2 !important;
}

/* Footer */
#weaponModal .modal-footer,
#knifeModal .modal-footer {
  background: rgba(0,0,0,0.45) !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  padding: 10px 16px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

/* Match count text (injected by JS) */
#weaponModal .selector-count,
#knifeModal .selector-count {
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.22) !important;
}

/* Footer close button */
#weaponModal .modal-footer .btn,
#knifeModal .modal-footer .btn {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: rgba(255,255,255,0.45) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  padding: 6px 18px !important;
  transition: all 0.15s !important;
}

#weaponModal .modal-footer .btn:hover,
#knifeModal .modal-footer .btn:hover {
  background: rgba(192,138,125,0.08) !important;
  border-color: rgba(192,138,125,0.35) !important;
  color: #fff !important;
}

/* 4 columns on mobile */
@media (max-width: 700px) {
  #weaponModal .modal-body .row,
  #knifeModal .modal-body .row {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
  }

  #weaponModal .weapon-select-button img,
  #knifeModal .knife-select-button img {
    height: 44px !important;
  }
}

@media (max-width: 480px) {
  #weaponModal .modal-body .row,
  #knifeModal .modal-body .row {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ================================================
   END SELECTOR MODAL REDESIGN v2
   ================================================ */