/* ============================================================
   UT4Stats - Main Stylesheet
   Dark sci-fi gaming theme with cyan (#00bfff) accents
   Built on Bootstrap 5.3
   ============================================================ */

/* -- CSS Variables ------------------------------------------ */
:root {
  --ut-cyan: #00bfff;
  --ut-cyan-dim: rgba(0, 191, 255, 0.3);
  --ut-cyan-glow: rgba(0, 191, 255, 0.5);
  --ut-red: #ff4444;
  --ut-blue: #4488ff;
  --ut-gold: #ffd700;
  --ut-bg-dark: #0a0a0f;
  --ut-bg-card: rgba(16, 16, 24, 0.95);
  --ut-bg-card-hover: rgba(20, 20, 32, 0.98);
  --ut-border: rgba(0, 191, 255, 0.15);
  --ut-text: #e0e0e0;
  --ut-text-muted: #888;
  --ut-font-heading: 'Orbitron', sans-serif;
  --ut-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* -- Base --------------------------------------------------- */
body {
  font-family: var(--ut-font-body);
  background: var(--ut-bg-dark);
  color: var(--ut-text);
  margin: 0;
  padding-top: 72px;
  min-height: 100vh;
  line-height: 1.6;
}

/* Subtle background pattern */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(0, 191, 255, 0.03) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(0, 100, 200, 0.02) 0%, transparent 50%);
  pointer-events: none;
  z-index: -1;
}

/* -- Typography --------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ut-font-heading);
  color: #fff;
  letter-spacing: 0.5px;
}

h1 { font-size: 1.75rem; font-weight: 700; }
h2 { font-size: 1.5rem; font-weight: 500; }
h3 { font-size: 1.25rem; font-weight: 500; }

a {
  color: var(--ut-cyan);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: #fff;
}

/* -- Navbar ------------------------------------------------- */
.navbar-custom {
  background: rgba(8, 8, 16, 0.97);
  border-bottom: 1px solid var(--ut-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 0.5rem 0;
}

.navbar-custom .navbar-brand {
  font-family: var(--ut-font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--ut-cyan);
  letter-spacing: 1px;
}

.navbar-custom .navbar-brand:hover {
  color: #fff;
}

.navbar-custom .nav-link {
  color: var(--ut-text);
  font-size: 0.85rem;
  font-weight: 400;
  padding: 0.5rem 0.9rem;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.navbar-custom .nav-link:hover,
.navbar-custom .nav-link:focus {
  color: var(--ut-cyan);
  background: rgba(0, 191, 255, 0.08);
}

.navbar-custom .dropdown-menu {
  background: rgba(16, 16, 24, 0.98);
  border: 1px solid var(--ut-border);
  border-radius: 8px;
  margin-top: 0.5rem;
}

.navbar-custom .dropdown-item {
  color: var(--ut-text);
  font-size: 0.85rem;
  padding: 0.5rem 1rem;
  transition: all 0.2s ease;
}

.navbar-custom .dropdown-item:hover {
  color: var(--ut-cyan);
  background: rgba(0, 191, 255, 0.1);
}

.navbar-toggler:focus {
  box-shadow: none;
}

/* -- Main Content ------------------------------------------- */
.main-content {
  padding: 2rem 0;
  min-height: calc(100vh - 72px - 60px);
}

/* -- Glass Card --------------------------------------------- */
.glass-container,
.card-dark {
  background: var(--ut-bg-card);
  border: 1px solid var(--ut-border);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.glass-container:hover,
.card-dark:hover {
  border-color: rgba(0, 191, 255, 0.3);
  box-shadow: 0 0 20px rgba(0, 191, 255, 0.08);
}

.card-dark-header {
  font-family: var(--ut-font-heading);
  font-size: 0.9rem;
  color: var(--ut-cyan);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding-bottom: 0.75rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--ut-border);
}

/* -- Stat Cards --------------------------------------------- */
.stat-card {
  background: var(--ut-bg-card);
  border: 1px solid var(--ut-border);
  border-radius: 10px;
  padding: 1.25rem;
  text-align: center;
  transition: all 0.3s ease;
}

.stat-card:hover {
  border-color: var(--ut-cyan);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 191, 255, 0.15);
}

.stat-card .stat-value {
  font-family: var(--ut-font-heading);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--ut-cyan);
}

.stat-card .stat-label {
  font-size: 0.75rem;
  color: var(--ut-text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 0.25rem;
}

/* -- Tables (DataTables dark theme) ------------------------- */
table.dataTable,
.table {
  color: var(--ut-text) !important;
  border-collapse: collapse;
}

table.dataTable thead th,
.table thead th {
  font-family: var(--ut-font-heading);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--ut-cyan);
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: 2px solid var(--ut-border) !important;
  padding: 0.75rem 0.5rem;
  background: rgba(0, 191, 255, 0.05);
}

table.dataTable tbody tr,
.table tbody tr {
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: background 0.15s ease;
}

table.dataTable tbody tr:hover,
.table tbody tr:hover {
  background: rgba(0, 191, 255, 0.06) !important;
}

table.dataTable tbody td,
.table tbody td {
  padding: 0.6rem 0.5rem;
  font-size: 0.85rem;
  border-top: none;
  vertical-align: middle;
}

/* DataTables controls */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
  color: var(--ut-text-muted) !important;
  font-size: 0.8rem;
  padding: 0.5rem 0;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--ut-border);
  color: var(--ut-text);
  border-radius: 6px;
  padding: 0.3rem 0.6rem;
}

.dataTables_wrapper .dataTables_filter input:focus {
  outline: none;
  border-color: var(--ut-cyan);
  box-shadow: 0 0 0 2px rgba(0, 191, 255, 0.2);
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  color: var(--ut-text) !important;
  background: transparent;
  border: 1px solid var(--ut-border);
  border-radius: 4px;
  margin: 0 2px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  color: #fff !important;
  background: var(--ut-cyan) !important;
  border-color: var(--ut-cyan) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  color: #fff !important;
  background: rgba(0, 191, 255, 0.2) !important;
  border-color: var(--ut-cyan) !important;
}

/* DataTables buttons */
.dt-buttons .btn,
.dt-button {
  background: rgba(0, 191, 255, 0.1) !important;
  border: 1px solid var(--ut-border) !important;
  color: var(--ut-text) !important;
  font-size: 0.75rem;
  border-radius: 6px;
  padding: 0.4rem 0.8rem;
  transition: all 0.2s ease;
}

.dt-buttons .btn:hover,
.dt-button:hover {
  background: rgba(0, 191, 255, 0.2) !important;
  border-color: var(--ut-cyan) !important;
  color: #fff !important;
}

/* -- Buttons ------------------------------------------------ */
.btn-ut {
  background: linear-gradient(135deg, var(--ut-cyan), #0099cc);
  color: #000;
  font-family: var(--ut-font-heading);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 0.5rem 1.5rem;
  border: none;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.btn-ut:hover {
  background: linear-gradient(135deg, #33ccff, #00bfff);
  color: #000;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 191, 255, 0.3);
}

.btn-ut-outline {
  background: transparent;
  color: var(--ut-cyan);
  font-size: 0.8rem;
  padding: 0.5rem 1.5rem;
  border: 1px solid var(--ut-cyan);
  border-radius: 8px;
  transition: all 0.2s ease;
}

.btn-ut-outline:hover {
  background: rgba(0, 191, 255, 0.1);
  color: #fff;
}

/* -- Forms -------------------------------------------------- */
.form-control,
.form-select {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--ut-border);
  color: var(--ut-text);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-control:focus,
.form-select:focus {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--ut-cyan);
  color: var(--ut-text);
  box-shadow: 0 0 0 3px rgba(0, 191, 255, 0.15);
}

.form-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--ut-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* -- Team Colors -------------------------------------------- */
.team-red { color: var(--ut-red); }
.team-blue { color: var(--ut-blue); }
.team-red-bg { background: rgba(255, 68, 68, 0.15); border-left: 3px solid var(--ut-red); }
.team-blue-bg { background: rgba(68, 136, 255, 0.15); border-left: 3px solid var(--ut-blue); }

/* -- Badges ------------------------------------------------- */
.badge-ut {
  font-family: var(--ut-font-heading);
  font-size: 0.65rem;
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

.badge-ut-cyan { background: rgba(0, 191, 255, 0.2); color: var(--ut-cyan); }
.badge-ut-red { background: rgba(255, 68, 68, 0.2); color: var(--ut-red); }
.badge-ut-gold { background: rgba(255, 215, 0, 0.2); color: var(--ut-gold); }

/* -- Footer ------------------------------------------------- */
.site-footer {
  background: rgba(8, 8, 16, 0.97);
  border-top: 1px solid var(--ut-border);
  padding: 1rem 0;
  margin-top: 2rem;
}

.text-muted-custom {
  color: var(--ut-text-muted);
  font-size: 0.8rem;
}

.footer-link {
  color: var(--ut-text-muted);
  font-size: 0.8rem;
  transition: color 0.2s ease;
}

.footer-link:hover {
  color: var(--ut-cyan);
}

/* -- HighCharts dark theme ---------------------------------- */
.highcharts-background { fill: transparent !important; }
.highcharts-title { fill: #fff !important; font-family: var(--ut-font-heading) !important; }
.highcharts-subtitle { fill: var(--ut-text-muted) !important; }
.highcharts-axis-labels text { fill: var(--ut-text-muted) !important; }
.highcharts-axis-title { fill: var(--ut-text-muted) !important; }
.highcharts-legend-item text { fill: var(--ut-text) !important; }
.highcharts-grid-line { stroke: rgba(255, 255, 255, 0.05) !important; }
.highcharts-tooltip-box { fill: rgba(16, 16, 24, 0.95) !important; stroke: var(--ut-border) !important; }

/* -- Scrollbar ---------------------------------------------- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--ut-bg-dark); }
::-webkit-scrollbar-thumb { background: rgba(0, 191, 255, 0.3); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--ut-cyan); }

/* -- Utility Classes ---------------------------------------- */
.text-cyan { color: var(--ut-cyan); }
.text-ut-red { color: var(--ut-red); }
.text-ut-blue { color: var(--ut-blue); }
.text-ut-gold { color: var(--ut-gold); }

.bg-overlay {
  position: relative;
}

.bg-overlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 10, 15, 0.85);
  border-radius: inherit;
  z-index: 0;
}

.bg-overlay > * {
  position: relative;
  z-index: 1;
}

/* -- Responsive --------------------------------------------- */
@media (max-width: 768px) {
  body { padding-top: 60px; }
  .main-content { padding: 1rem 0; }
  .glass-container, .card-dark { padding: 1rem; }
  h1 { font-size: 1.4rem; }
  .stat-card .stat-value { font-size: 1.4rem; }
}

/* -- Animations --------------------------------------------- */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.fade-in {
  animation: fadeIn 0.4s ease-out;
}

/* -- Legacy compat: bootstrap-select dark overrides --------- */
.bootstrap-select .dropdown-toggle {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid var(--ut-border) !important;
  color: var(--ut-text) !important;
}

.bootstrap-select .dropdown-menu {
  background: var(--ut-bg-card) !important;
  border: 1px solid var(--ut-border) !important;
}

.bootstrap-select .dropdown-item {
  color: var(--ut-text) !important;
}

.bootstrap-select .dropdown-item:hover,
.bootstrap-select .dropdown-item.active {
  background: rgba(0, 191, 255, 0.1) !important;
  color: var(--ut-cyan) !important;
}