/* ============================================
   CENTRALIZED THEME CONFIGURATION
   ============================================
   This file contains all styling variables for the website.
   Modify values here to change colors, fonts, sizes, etc.
   ============================================ */

:root {
  /* ============================================
     COLOR PALETTE
     ============================================ */

  /* Primary Brand Color - Retro Burnt Orange/Brown */
  --bs-primary: #d2691e;
  --bs-primary-rgb: 210, 105, 30;
  --bs-primary-dark: #b85a1a;
  --bs-primary-light: #e67e22;

  /* Secondary Colors - Retro Palette */
  --bs-secondary: #8b4513;
  --bs-success: #28a745;
  --bs-danger: #dc3545;
  --bs-warning: #ff8c00;
  --bs-info: #6f4e37;
  --bs-light: #f8f9fa;
  --bs-dark: #2c1810;

  /* Background Colors - Retro Cream/Beige */
  --bs-body-bg: #faf8f3;
  --bs-body-color: #000000;
  --bs-bg-subtle: #f5f3ed;

  /* Text Colors - Black Only */
  --bs-text-muted: #000000;
  --bs-text-primary: #000000;
  --bs-text-secondary: #000000;

  /* Border Colors - Retro Beige/Brown */
  --bs-border-color: #d4c5b0;
  --bs-border-color-subtle: #e8ddd0;
  --bs-border-width: 1px;

  /* Table Colors - Retro styling for all tables */
  --bs-table-bg: #ffffff;
  --bs-table-striped-bg: #faf8f3;
  --bs-table-hover-bg: #f5f3ed;
  --bs-table-border-color: #d4c5b0;
  --bs-table-head-bg: #ffffff;
  --bs-table-head-color: #000000;
  --bs-table-border-width: 1px;

  /* Card Colors - Retro Cream */
  --bs-card-bg: #ffffff;
  --bs-card-border-color: #d4c5b0;
  --bs-card-cap-bg: transparent;

  /* ============================================
     TYPOGRAPHY
     ============================================ */

  /* Font Family */
  --bs-font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --bs-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;

  /* Font Sizes */
  --bs-font-size-base: 1rem; /* 16px */
  --bs-font-size-sm: 0.875rem; /* 14px */
  --bs-font-size-xs: 0.75rem; /* 12px */
  --bs-font-size-lg: 1.125rem; /* 18px */
  --bs-font-size-xl: 1.25rem; /* 20px */
  --bs-font-size-xxl: 1.5rem; /* 24px */

  /* Heading Sizes */
  --bs-h1-font-size: 1.75rem; /* 28px */
  --bs-h2-font-size: 1.25rem; /* 20px */
  --bs-h3-font-size: 1.125rem; /* 18px */
  --bs-h4-font-size: 1rem; /* 16px */
  --bs-h5-font-size: 1rem; /* 16px */
  --bs-h6-font-size: 0.875rem; /* 14px */

  /* Font Weights */
  --bs-font-weight-normal: 400;
  --bs-font-weight-semibold: 600;
  --bs-font-weight-bold: 700;

  /* Line Heights */
  --bs-line-height-base: 1.6;
  --bs-line-height-sm: 1.25;
  --bs-line-height-lg: 1.75;

  /* ============================================
     SPACING
     ============================================ */

  /* Padding */
  --bs-padding-xs: 0.5rem; /* 8px */
  --bs-padding-sm: 0.75rem; /* 12px */
  --bs-padding-md: 1rem; /* 16px */
  --bs-padding-lg: 1.25rem; /* 20px */
  --bs-padding-xl: 1.5rem; /* 24px */
  --bs-padding-xxl: 1.875rem; /* 30px */

  /* Margins */
  --bs-margin-xs: 0.5rem; /* 8px */
  --bs-margin-sm: 0.75rem; /* 12px */
  --bs-margin-md: 1rem; /* 16px */
  --bs-margin-lg: 1.25rem; /* 20px */
  --bs-margin-xl: 1.5rem; /* 24px */
  --bs-margin-xxl: 1.875rem; /* 30px */

  /* Container */
  --bs-container-max-width: 1200px;
  --bs-container-padding-x: 1.25rem; /* 20px */

  /* ============================================
     COMPONENT SPECIFIC STYLING
     ============================================ */

  /* Header - Retro Style */
  --bs-header-bg: #faf8f3;
  --bs-header-border-color: var(--bs-primary);
  --bs-header-border-width: 3px;
  --bs-header-padding-y: 1.875rem; /* 30px */
  --bs-header-margin-bottom: 1.875rem; /* 30px */
  --bs-header-title-color: #000000;
  --bs-header-title-size: var(--bs-h1-font-size);
  --bs-header-subtitle-color: #000000;
  --bs-header-subtitle-size: var(--bs-font-size-sm);

  /* Cards - Retro Style */
  --bs-card-padding: 1.25rem; /* 20px */
  --bs-card-margin-bottom: 1.875rem; /* 30px */
  --bs-card-border-radius: 0; /* Retro: no rounded corners */
  --bs-card-title-size: var(--bs-h2-font-size);
  --bs-card-title-margin-bottom: 1.25rem; /* 20px */
  --bs-card-title-border-bottom-width: 2px;
  --bs-card-title-border-bottom-color: var(--bs-primary);

  /* Tables - Consistent styling for all tables */
  --bs-table-font-size: var(--bs-font-size-sm);
  --bs-table-head-font-size: 0.8125rem; /* 13px */
  --bs-table-head-padding: 0.75rem 0.625rem; /* 12px 10px */
  --bs-table-cell-padding: 0.75rem 0.625rem; /* 12px 10px */
  --bs-table-head-text-transform: uppercase;
  --bs-table-head-letter-spacing: 0.5px;
  --bs-table-head-border-right-color: rgba(255, 255, 255, 0.2);
  --bs-table-cell-border-color: var(--bs-table-border-color);
  --bs-table-cell-border-width: var(--bs-table-border-width);

  /* Loading States */
  --bs-loading-color: #999999;
  --bs-loading-padding: 2.5rem 1.25rem; /* 40px 20px */

  /* ============================================
     RESPONSIVE BREAKPOINTS
     ============================================ */

  /* Mobile adjustments */
  --bs-mobile-container-padding: 0.9375rem; /* 15px */
  --bs-mobile-header-padding-y: 1.25rem; /* 20px */
  --bs-mobile-header-margin-bottom: 1.25rem; /* 20px */
  --bs-mobile-header-title-size: 1.5rem; /* 24px */
  --bs-mobile-header-subtitle-size: 0.8125rem; /* 13px */
  --bs-mobile-card-padding: 0.9375rem; /* 15px */
  --bs-mobile-card-margin-bottom: 1.25rem; /* 20px */
  --bs-mobile-card-title-size: 1.125rem; /* 18px */
  --bs-mobile-card-title-margin-bottom: 0.9375rem; /* 15px */
  --bs-mobile-table-head-padding: 0.625rem 0.5rem; /* 10px 8px */
  --bs-mobile-table-head-font-size: 0.6875rem; /* 11px */
  --bs-mobile-table-cell-padding: 0.625rem 0.5rem; /* 10px 8px */
  --bs-mobile-table-font-size: 0.8125rem; /* 13px */
}

/* ============================================
   APPLY THEME VARIABLES TO BOOTSTRAP COMPONENTS
   ============================================ */

/* Body - Retro Style (scoped to stats pages) */
.stats-page {
  font-family: var(--bs-font-family-base);
  background: var(--bs-bg-subtle);
  color: var(--bs-body-color);
  line-height: var(--bs-line-height-base);
}

/* Container - Retro Cream Background (scoped to stats pages) */
.stats-page .container {
  max-width: var(--bs-container-max-width);
  background: var(--bs-body-bg);
  min-height: 100vh;
}

/* Header - Retro Style (scoped to stats pages) */
.stats-page .bg-white.border-bottom {
  background: var(--bs-header-bg) !important;
  border-bottom-color: var(--bs-header-border-color) !important;
  border-bottom-width: var(--bs-header-border-width) !important;
  padding-top: var(--bs-header-padding-y) !important;
  padding-bottom: var(--bs-header-padding-y) !important;
  margin-bottom: var(--bs-header-margin-bottom) !important;
}

.stats-page .bg-white.border-bottom h1 {
  color: var(--bs-header-title-color) !important;
  font-size: var(--bs-header-title-size) !important;
  font-weight: var(--bs-font-weight-bold) !important;
}

.stats-page .bg-white.border-bottom p {
  color: var(--bs-header-subtitle-color) !important;
  font-size: var(--bs-header-subtitle-size) !important;
  font-weight: var(--bs-font-weight-normal);
}

/* Cards - Retro Style (scoped to stats pages) */
.stats-page .card {
  background: var(--bs-card-bg);
  border-color: var(--bs-card-border-color);
  margin-bottom: var(--bs-card-margin-bottom);
  border-radius: var(--bs-card-border-radius);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.stats-page .card-body {
  padding: var(--bs-card-padding);
}

.stats-page .card-title {
  font-size: var(--bs-card-title-size) !important;
  margin-bottom: var(--bs-card-title-margin-bottom) !important;
  padding-bottom: var(--bs-padding-sm);
  border-bottom-width: var(--bs-card-title-border-bottom-width);
  border-bottom-color: var(--bs-card-title-border-bottom-color);
  color: #000000 !important;
  font-weight: var(--bs-font-weight-bold) !important;
}

/* Tables - Consistent styling for ALL tables (scoped to stats pages) */
.stats-page .table {
  font-size: var(--bs-table-font-size);
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  margin-bottom: 0;
}

/* Override Bootstrap's table-primary class - remove light blue background */
.stats-page .table-primary {
  --bs-table-bg: #ffffff;
  --bs-table-color: #000000;
}

/* All table headers - white background with black text */
.stats-page .table-primary thead,
.stats-page .table thead {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #000000 !important;
}

.stats-page .table-primary thead th,
.stats-page .table thead th {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #000000 !important;
  padding: var(--bs-table-head-padding);
  font-size: var(--bs-table-head-font-size);
  text-transform: var(--bs-table-head-text-transform);
  letter-spacing: var(--bs-table-head-letter-spacing);
  border-right: var(--bs-table-border-width) solid
    var(--bs-table-head-border-right-color);
  border-bottom: var(--bs-table-border-width) solid var(--bs-table-border-color);
  font-weight: 600;
  text-align: left;
}

.stats-page .table-primary thead th.text-center,
.stats-page .table thead th.text-center {
  text-align: center;
}

.stats-page .table-primary thead th:last-child,
.stats-page .table thead th:last-child {
  border-right: none;
}

/* All table cells - consistent borders for ALL tables */
.stats-page .table tbody td {
  padding: var(--bs-table-cell-padding);
  border-right: var(--bs-table-cell-border-width) solid
    var(--bs-table-cell-border-color);
  border-bottom: var(--bs-table-cell-border-width) solid
    var(--bs-table-border-color);
  vertical-align: middle;
}

.stats-page .table tbody td.text-center {
  text-align: center;
}

.stats-page .table tbody td:last-child {
  border-right: none;
}

.stats-page .table tbody tr:last-child td {
  border-bottom: none;
}

/* Striped tables - consistent borders */
.stats-page .table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--bs-table-striped-bg);
}

.stats-page .table-striped tbody tr:nth-of-type(even) {
  background-color: var(--bs-table-bg);
}

.stats-page .table-striped tbody tr:nth-of-type(odd) td {
  border-right: var(--bs-table-cell-border-width) solid
    var(--bs-table-cell-border-color);
  border-bottom: var(--bs-table-cell-border-width) solid
    var(--bs-table-border-color);
}

.stats-page .table-striped tbody tr:nth-of-type(even) td {
  border-right: var(--bs-table-cell-border-width) solid
    var(--bs-table-cell-border-color);
  border-bottom: var(--bs-table-cell-border-width) solid
    var(--bs-table-border-color);
}

/* Hover effect */
.stats-page .table tbody tr:hover {
  background-color: var(--bs-table-hover-bg);
}

/* Bordered tables - ensure consistent borders */
.stats-page .table-bordered {
  border: var(--bs-table-border-width) solid var(--bs-table-border-color);
}

.stats-page .table-bordered thead th {
  border: var(--bs-table-border-width) solid var(--bs-table-border-color);
}

.stats-page .table-bordered tbody td {
  border: var(--bs-table-border-width) solid var(--bs-table-border-color);
}

/* Ensure all tables have outer border */
.stats-page .table:not(.table-bordered) {
  border: var(--bs-table-border-width) solid var(--bs-table-border-color);
}

.stats-page .table:not(.table-bordered) thead th:first-child {
  border-left: none;
}

.stats-page .table:not(.table-bordered) thead th:last-child {
  border-right: none;
}

.stats-page .table:not(.table-bordered) tbody td:first-child {
  border-left: none;
}

.stats-page .table:not(.table-bordered) tbody td:last-child {
  border-right: none;
}

/* Text Colors - All Black (scoped to stats pages only) */
.stats-page .text-primary,
.stats-page .table .text-primary {
  color: #000000 !important;
}

.stats-page .text-muted {
  color: #000000 !important;
}

/* Team Names - Bold Black (scoped to stats pages) */
.stats-page .fw-semibold.text-primary,
.stats-page tbody td:first-child {
  color: #000000 !important;
  font-weight: var(--bs-font-weight-bold) !important;
}

/* All table text black (scoped to stats pages) */
.stats-page .table tbody td {
  color: #000000 !important;
}

.stats-page .table thead th {
  color: #000000 !important;
}

/* Loading States */
.text-muted.py-4 {
  color: var(--bs-loading-color) !important;
  padding: var(--bs-loading-padding) !important;
}

/* Tabular Numbers */
tbody td:not(:first-child) {
  font-variant-numeric: tabular-nums;
}

/* ============================================
   RESPONSIVE STYLES
   ============================================ */

@media (max-width: 768px) {
  .stats-page .container {
    padding: var(--bs-mobile-container-padding);
  }

  .stats-page .bg-white.border-bottom {
    padding-top: var(--bs-mobile-header-padding-y) !important;
    padding-bottom: var(--bs-mobile-header-padding-y) !important;
    margin-bottom: var(--bs-mobile-header-margin-bottom) !important;
  }

  .stats-page .bg-white.border-bottom h1 {
    font-size: var(--bs-mobile-header-title-size) !important;
  }

  .stats-page .bg-white.border-bottom p {
    font-size: var(--bs-mobile-header-subtitle-size) !important;
  }

  .stats-page .card-body {
    padding: var(--bs-mobile-card-padding);
  }

  .stats-page .card {
    margin-bottom: var(--bs-mobile-card-margin-bottom);
  }

  .stats-page .card-title {
    font-size: var(--bs-mobile-card-title-size) !important;
    margin-bottom: var(--bs-mobile-card-title-margin-bottom) !important;
  }

  .stats-page .table-primary thead th {
    padding: var(--bs-mobile-table-head-padding);
    font-size: var(--bs-mobile-table-head-font-size);
  }

  .stats-page .table tbody td {
    padding: var(--bs-mobile-table-cell-padding);
    font-size: var(--bs-mobile-table-font-size);
  }

  .stats-page .table {
    font-size: var(--bs-mobile-table-font-size);
  }
}