/*
 * BalkanCS Panel — Redesign Layer
 * ---------------------------------------------------------------------------
 * Loaded AFTER flux-theme.css. Unifies the panel into one cohesive design
 * language: a single copper accent (shared with the landing), warm-charcoal
 * neutrals, rounded surfaces, a display + body type pairing, unified icons,
 * and smooth, purposeful motion. Data-dense but calm.
 * ---------------------------------------------------------------------------
 */

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

/* ===========================================================================
   Design tokens — override the base palette (one accent, rounded, warm)
   =========================================================================== */
:root {
  /* neutrals — warm charcoal, tinted toward the copper hue */
  --bg-body:        #141110;
  --bg-sidebar:     #171310;
  --bg-navbar:      #171310;
  --bg-card:        #1c1814;
  --bg-card-2:      #221d18;
  --bg-input:       #191512;
  --bg-table-head:  #19150f;
  --bg-table-row:   #1c1814;
  --bg-table-alt:   #1c1814;
  --bg-table-hover: #241d16;

  --border:          rgba(255,255,255,0.06);
  --border-md:       rgba(255,255,255,0.10);

  /* THE single accent — copper, matched to the landing (#C08A7D) */
  --accent:          #C08A7D;
  --accent-text:     #d7a99c;              /* lifted for text/icons on dark */
  --accent-hover:    #cf9b8e;
  --accent-dim:      rgba(192,138,125,0.14);
  --accent-line:     rgba(192,138,125,0.32);
  --accent-glow:     rgba(192,138,125,0.28);
  --border-accent:   rgba(192,138,125,0.32);
  --border-accent-lg:rgba(192,138,125,0.55);

  /* semantic status — desaturated, used ONLY for state (dot + pill) */
  --ok:   #7dc4a0;  --ok-dim:   rgba(125,196,160,0.14);
  --bad:  #d67a6d;  --bad-dim:  rgba(214,122,109,0.14);
  --warn: #d8b06a;  --warn-dim: rgba(216,176,106,0.14);
  --green: #7dc4a0; --green-dim: rgba(125,196,160,0.14);
  --yellow: #d8b06a; --yellow-dim: rgba(216,176,106,0.14);
  --purple: #7dc4a0; --purple-dim: rgba(125,196,160,0.14); /* remap old purple → ok */

  /* podium — muted metals, only for top-3 rank medals */
  --gold:   #d9b26a;
  --silver: #b8bcc4;
  --bronze: #c08a5e;

  /* text — warm neutral (replaces the sage-green secondary) */
  --text-primary:   #ece6de;
  --text-secondary: #a89e91;
  --text-muted:     #6f665a;
  --text-accent:    #d7a99c;

  /* geometry */
  --radius:    12px;
  --radius-lg: 14px;
  --radius-md: 10px;
  --radius-sm: 7px;
  --radius-pill: 999px;

  /* motion + elevation */
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --dur: 0.18s;
  --shadow-1: 0 1px 2px rgba(0,0,0,0.30), 0 8px 24px -12px rgba(0,0,0,0.55);
  --shadow-2: 0 2px 4px rgba(0,0,0,0.35), 0 16px 40px -16px rgba(0,0,0,0.60);

  /* type */
  --font-display: 'Rajdhani', sans-serif;   /* labels, nav, headings, numbers */
  --font-body: 'Plus Jakarta Sans', 'Rajdhani', sans-serif; /* prose + table data */
}

/* ===========================================================================
   Base type — display + body pairing, calmer background
   =========================================================================== */
html, body {
  background: var(--bg-body) !important;
  color: var(--text-primary) !important;
  font-family: var(--font-body) !important;
  font-size: 14px;
  font-weight: 450;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}

/* soften the atmospheric wash + grid so content leads, not texture */
body::before { opacity: 0.7; }
body::after  { opacity: 0.5; }

/* headings / labels / numbers keep the tactical display face */
h1,h2,h3,h4,h5,h6,
.widget-heading,.widget-title,.card-title,
.sidebar .nav-item .nav-link,.menu .nav-item .nav-link,
.info-box-number,.small-box h3,.info-box-text,.small-box p,
th,.badge,.stat-number,.section-label,.page-title {
  font-family: var(--font-display) !important;
}

.info-box-number,.small-box h3,.stat-number,
td.num,.tabular,.dataTable td,.dataTable th {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* data cells: readable body face, tighter tracking than Rajdhani caps */
table td, .table td, .dataTable td {
  font-family: var(--font-body) !important;
  letter-spacing: 0 !important;
}

::selection { background: var(--accent-glow); color: #fff; }

/* ===========================================================================
   Global rounding — override the 45 hardcoded sharp-corner rules
   =========================================================================== */
.widget, .card, .info-box, .small-box, [class*="stat-card"],
.statbox, .modal-content, .dropdown-menu, .alert,
.dataTables_wrapper > .table-responsive, .layout-top-spacing .widget {
  border-radius: var(--radius-lg) !important;
}
.table-responsive, .widget-content-area, .table-wrapper {
  border-radius: var(--radius-md) !important;
}
.btn, .form-control, .form-select, .custom-select,
input:not([type=checkbox]):not([type=radio]), select, textarea,
.dataTables_filter input, .dataTables_length select, .page-link, .dt-input {
  border-radius: var(--radius-md) !important;
}
.badge, [class*="badge"], .status, .status-pill, .tag, .chip {
  border-radius: var(--radius-sm) !important;
}

/* ===========================================================================
   Sidebar — quiet rail, one clear active state, smooth hover
   =========================================================================== */
#sidebar, .sidebar-wrapper {
  background: var(--bg-sidebar) !important;
  border-right: 1px solid var(--border) !important;
}
.sidebar .nav-item .nav-link,
#sidebar .nav-item > a,
.menu .nav-item .nav-link {
  border-radius: var(--radius-md) !important;
  margin: 2px 10px !important;
  padding: 9px 12px !important;
  color: var(--text-secondary) !important;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
  border-left: 0 !important;
}
.sidebar .nav-item .nav-link:hover,
#sidebar .nav-item > a:hover {
  background: rgba(255,255,255,0.04) !important;
  color: var(--text-primary) !important;
}
.sidebar .nav-item .nav-link:hover svg,
.sidebar .nav-item .nav-link:hover i { color: var(--accent-text) !important; }

/* active item: tinted fill + copper indicator, no harsh full-width bar */
#sidebar .nav-item.active > a,
.sidebar .nav-item.active .nav-link,
.sidebar .nav-item .nav-link.active,
#sidebar .nav-item > a.active {
  background: var(--accent-dim) !important;
  color: var(--accent-text) !important;
  box-shadow: inset 3px 0 0 var(--accent) !important;
}
#sidebar .nav-item.active svg, #sidebar .nav-item.active i,
.sidebar .nav-item .nav-link.active svg, .sidebar .nav-item .nav-link.active i {
  color: var(--accent-text) !important;
}
/* section captions */
.sidebar .menu .dropdown-toggle,
#sidebar .navbar-nav > .menu-heading,
.sidebar-section-label {
  color: var(--text-muted) !important;
  font-family: var(--font-display) !important;
  letter-spacing: 0.18em !important;
  font-size: 10px !important;
}

/* ===========================================================================
   Content area + section headings
   =========================================================================== */
#content, .main-content { background: transparent !important; }

.widget-heading, .widget-title, .card-title, .page-title {
  color: var(--text-primary) !important;
  letter-spacing: 0.04em !important;
  font-weight: 700 !important;
}
/* eyebrow / small section labels stay uppercase + muted */
.section-label, .widget-subtitle {
  color: var(--text-muted) !important;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 10px;
}

/* ===========================================================================
   Cards / widgets — hairline + tinted shadow, lift on interactive hover
   =========================================================================== */
.widget, .card, .statbox {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-1) !important;
}
.widget:hover, .card:hover { border-color: var(--border-md) !important; }

/* ===========================================================================
   Stat boxes — unify the four multicolor icons into one accent chip
   =========================================================================== */
.info-box, .small-box, [class*="stat-card"], .statbox {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-1) !important;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.info-box:hover, .small-box:hover, .statbox:hover {
  transform: translateY(-2px);
  border-color: var(--accent-line) !important;
}
/* the four stat glyphs were text-info / text-danger / text-success / text-primary
   — Bootstrap utilities tie on specificity, so target them inside the card */
.card-body .fa-3x, .card-body i[class*="fa-"],
.card-body i.text-info, .card-body i.text-danger,
.card-body i.text-success, .card-body i.text-primary, .fa-3x {
  color: var(--accent-text) !important;
}
/* wrap the big stat icon in a soft square chip for consistency */
.card-body .fa-3x {
  background: var(--accent-dim) !important;
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-md);
  width: 62px; height: 62px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 24px !important;
}
/* round the top of card headers so they follow the card's corner */
.card-header, [class*="card-header"] {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
}
.info-box-number, .small-box h3, .stat-number {
  color: var(--text-primary) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

/* ===========================================================================
   Tables (bans / mutes / admins / ranks / servers)
   =========================================================================== */
table, .table, .dataTable {
  background: transparent !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}
thead th, .table thead th, .dataTable thead th {
  background: var(--bg-table-head) !important;
  color: var(--text-muted) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 10.5px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  border: 0 !important;
  border-bottom: 1px solid var(--border-md) !important;
  padding: 12px 16px !important;
}
tbody td, .table tbody td, .dataTable tbody td {
  background: transparent !important;
  color: var(--text-primary) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 12px 16px !important;
  vertical-align: middle !important;
  transition: background var(--dur) var(--ease);
}
tbody tr, .table tbody tr, .dataTable tbody tr {
  transition: background var(--dur) var(--ease);
}
tbody tr:hover td, .table tbody tr:hover td, .dataTable tbody tr:hover td {
  background: var(--bg-table-hover) !important;
}
tbody tr:last-child td { border-bottom: 0 !important; }

/* one consistent colour for linked names (servers/players) — accent on hover */
table td a, .table td a, .dataTable td a { color: var(--text-primary) !important; transition: color var(--dur) var(--ease); }
table td a:hover, .table td a:hover, .dataTable td a:hover { color: var(--accent-text) !important; }
/* server names were randomly gold/copper/grey — normalise */
.servers-table td, .server-name, td .server-name { color: var(--text-primary) !important; }
.server-name { font-family: var(--font-display) !important; font-weight: 600 !important; letter-spacing: 0.02em; }

/* header stat icons in ranks table (kills/deaths/won/lost) → muted, not colourful */
thead th i[class*="fa-"] { color: var(--text-muted) !important; }

/* ===========================================================================
   Status pills — dot + label, semantic muted colours, ONLY for state
   =========================================================================== */
.badge, [class*="badge"], .status, .status-pill {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 4px 9px !important;
  border: 1px solid transparent !important;
  display: inline-flex; align-items: center; gap: 6px;
  line-height: 1.4 !important;
}
.badge.bg-success, .badge-success, .status.online, .badge.badge-online,
.badge.bg-primary, .badge-primary {
  background: var(--ok-dim) !important; color: var(--ok) !important; border-color: rgba(125,196,160,0.30) !important;
}
.badge.bg-danger, .badge-danger, .status.offline, .badge.badge-offline,
.badge.bg-secondary {
  background: var(--bad-dim) !important; color: var(--bad) !important; border-color: rgba(214,122,109,0.30) !important;
}
.badge.bg-warning, .badge-warning, .badge.bg-info, .badge-info {
  background: var(--warn-dim) !important; color: var(--warn) !important; border-color: rgba(216,176,106,0.30) !important;
}
/* Cork template badge-light-* variants → the same muted semantic system */
.badge-light-success, .badge-light-primary {
  background: var(--ok-dim) !important; color: var(--ok) !important; border-color: rgba(125,196,160,0.30) !important;
}
.badge-light-danger {
  background: var(--bad-dim) !important; color: var(--bad) !important; border-color: rgba(214,122,109,0.30) !important;
}
.badge-light-warning, .badge-light-info {
  background: var(--warn-dim) !important; color: var(--warn) !important; border-color: rgba(216,176,106,0.30) !important;
}
/* accent-tinted "active count" chips on stat cards (brand-neutral, not alarm colours) */
[class*="active-count"], .info-box .badge, .small-box .badge, .dash-active-stat {
  background: var(--accent-dim) !important; color: var(--accent-text) !important;
  border: 1px solid var(--accent-line) !important;
}

/* ===========================================================================
   Buttons — accent primary, ghost secondary, physical press
   =========================================================================== */
.btn {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease),
              border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease) !important;
  border: 1px solid transparent !important;
}
.btn:active { transform: scale(0.975) !important; }
.btn-primary, .btn-danger.btn-cta, .btn-accent {
  background: var(--accent) !important; color: #1a120f !important; border-color: var(--accent) !important;
}
.btn-primary:hover, .btn-accent:hover {
  background: var(--accent-hover) !important; border-color: var(--accent-hover) !important;
  box-shadow: 0 6px 20px -8px var(--accent-glow) !important;
}
.btn-secondary, .btn-outline, .btn-light, .btn-outline-primary {
  background: rgba(255,255,255,0.03) !important; color: var(--text-primary) !important;
  border-color: var(--border-md) !important;
}
.btn-secondary:hover, .btn-outline:hover, .btn-light:hover, .btn-outline-primary:hover {
  background: rgba(255,255,255,0.06) !important; border-color: var(--accent-line) !important; color: var(--accent-text) !important;
}
.btn-danger {
  background: var(--bad-dim) !important; color: var(--bad) !important; border-color: rgba(214,122,109,0.35) !important;
}
.btn-danger:hover { background: rgba(214,122,109,0.22) !important; }

/* ===========================================================================
   Forms & inputs — rounded, calm, accent focus ring
   =========================================================================== */
.form-control, .form-select, input:not([type=checkbox]):not([type=radio]),
select, textarea, .dataTables_filter input, .dataTables_length select, .dt-input {
  background: var(--bg-input) !important;
  border: 1px solid var(--border-md) !important;
  color: var(--text-primary) !important;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease) !important;
}
.form-control::placeholder, input::placeholder { color: var(--text-muted) !important; }
.form-control:focus, .form-select:focus, input:focus, select:focus, textarea:focus,
.dataTables_filter input:focus {
  border-color: var(--accent-line) !important;
  box-shadow: 0 0 0 3px var(--accent-dim) !important;
  outline: none !important;
}
label, .form-label { color: var(--text-secondary) !important; font-weight: 600 !important; }

/* accessible keyboard focus everywhere */
a:focus-visible, button:focus-visible, .btn:focus-visible, .nav-link:focus-visible {
  outline: 2px solid var(--accent) !important; outline-offset: 2px !important;
}

/* ===========================================================================
   DataTables chrome (search / length / pagination / info)
   =========================================================================== */
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: var(--radius-sm) !important; border: 1px solid var(--border) !important;
  background: transparent !important; color: var(--text-secondary) !important;
  transition: all var(--dur) var(--ease) !important; margin: 0 2px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: rgba(255,255,255,0.05) !important; color: var(--text-primary) !important; border-color: var(--border-md) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--accent) !important; color: #1a120f !important; border-color: var(--accent) !important;
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label { color: var(--text-muted) !important; }
.page-item.active .page-link { background: var(--accent) !important; border-color: var(--accent) !important; color: #1a120f !important; }
.page-link { background: transparent !important; color: var(--text-secondary) !important; border-color: var(--border) !important; }
.page-link:hover { background: rgba(255,255,255,0.05) !important; color: var(--text-primary) !important; }

/* ===========================================================================
   Modals, dropdowns, alerts
   =========================================================================== */
.modal-content, .dropdown-menu {
  background: var(--bg-card-2) !important;
  border: 1px solid var(--border-md) !important;
  box-shadow: var(--shadow-2) !important;
}
.modal-header, .modal-footer { border-color: var(--border) !important; }
.dropdown-item { color: var(--text-secondary) !important; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); border-radius: var(--radius-sm); }
.dropdown-item:hover { background: var(--accent-dim) !important; color: var(--accent-text) !important; }
.alert { background: var(--bg-card) !important; border: 1px solid var(--border-md) !important; color: var(--text-secondary) !important; }
.alert-light-danger, .alert-danger { border-color: rgba(214,122,109,0.30) !important; }
.alert-light-warning, .alert-warning { border-color: rgba(216,176,106,0.30) !important; }

/* ===========================================================================
   Rank medals (top-3) — the only place metals belong
   =========================================================================== */
.rank-1, td.rank-1, .position-1 { color: var(--gold) !important; }
.rank-2, td.rank-2, .position-2 { color: var(--silver) !important; }
.rank-3, td.rank-3, .position-3 { color: var(--bronze) !important; }
.rank-profile { color: var(--text-muted) !important; transition: color var(--dur) var(--ease); }
.rank-profile:hover { color: var(--accent-text) !important; }

/* unranked / no-badge fallback in the Rating + Rank columns */
.no-rank {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted);
  padding: 3px 9px;
  border: 1px dashed var(--border-md);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.rank-name-text {
  font-family: var(--font-display);
  font-weight: 600; font-size: 12.5px;
  letter-spacing: 0.04em; color: var(--text-secondary);
}

/* avatars — squircle, hairline ring */
table img.rounded-circle, .table img.rounded-circle, td img[class*="avatar"], .player-avatar img {
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--border-md) !important;
}

/* ===========================================================================
   Scrollbar
   =========================================================================== */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-line); background-clip: content-box; }

/* ===========================================================================
   Motion accessibility
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation-duration: 0.01ms !important; }
}