/**
 * Dark Mode Styles for Tilion Stats
 * Complements Bootstrap 5.3.8's native dark mode support
 */

/* ============================================
   CSS Custom Properties (Light Mode Defaults)
   ============================================ */

:root {
  /* Table row state colors - light mode */
  --table-row-won-bg: #d4edda;
  --table-row-lost-bg: #f8d7da;
  --table-row-drawn-bg: #fff3cd;
  --table-row-void-bg: #e2e3e5;
}

/* ============================================
   Dark Mode Overrides
   ============================================ */

[data-bs-theme="dark"] {
  /* Table row state colors - dark mode */
  /* Maintain semantic meaning while adjusting for dark background */
  --table-row-won-bg: #1a3a1a;      /* Dark green */
  --table-row-lost-bg: #3a1a1a;     /* Dark red */
  --table-row-drawn-bg: #3a3a1a;    /* Dark yellow/brown */
  --table-row-void-bg: #2a2a2a;     /* Dark gray */
}

/* ============================================
   Additional Dark Mode Refinements
   ============================================ */

[data-bs-theme="dark"] {
  /* Improve contrast for links */
  --bs-link-color: #6ea8fe;
  --bs-link-hover-color: #8bb9fe;
}

/* Ensure proper text contrast in dark mode */
[data-bs-theme="dark"] .headercomment {
  border-color: var(--bs-border-color);
}

/* ============================================
   Theme Toggle Button Styles
   ============================================ */

#theme-toggle {
  transition: transform 0.2s ease;
}

#theme-toggle:hover {
  transform: rotate(20deg);
}

/* Ensure proper focus visible for accessibility */
#theme-toggle:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

/* ============================================
   Google Charts Dashboard Containers
   ============================================ */

/* Light mode - uses light border */
:root {
  --chart-dashboard-bg: transparent;
  --chart-dashboard-border: #c0c0c0;
}

/* Dark mode - darker border and ensure background respects theme */
[data-bs-theme="dark"] {
  --chart-dashboard-bg: transparent;
  --chart-dashboard-border: #4a4a4a;
}

/* Chart dashboard container styling */
.chart-dashboard {
  border: solid 1px var(--chart-dashboard-border);
  padding: 5px;
  margin: 0 0 20px 0;
  background-color: var(--chart-dashboard-bg);
}

/* Google Charts containers - only for dashboard containers */
[data-bs-theme="dark"] .chart-dashboard div[id*="chart_"] {
  background-color: transparent !important;
}

/* Google Charts tables - only for dashboard containers */
[data-bs-theme="dark"] .chart-dashboard .google-visualization-table-table {
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .chart-dashboard .google-visualization-table-th,
[data-bs-theme="dark"] .chart-dashboard .google-visualization-table-td {
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
  border-color: var(--bs-border-color) !important;
}

/* Google Charts filter controls - only for dashboard containers */
[data-bs-theme="dark"] .chart-dashboard .google-visualization-controls-categoryfilter {
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .chart-dashboard .google-visualization-controls-label {
  color: var(--bs-body-color) !important;
}

/* Chart backgrounds - only for charts inside dashboard containers */
[data-bs-theme="dark"] .chart-dashboard svg {
  background-color: transparent !important;
}

[data-bs-theme="dark"] .chart-dashboard svg text {
  fill: var(--bs-body-color) !important;
}

/* ============================================
   Stats Page Specific Styles
   ============================================ */

/* Player chart containers on match results page */
.player-chart-container {
  text-align: center;
  float: left;
  margin: 10px 0;
  padding-top: 20px;
  background-color: #f0f0f0;
}

[data-bs-theme="dark"] .player-chart-container {
  background-color: #2a2a2a;
}

/* Form guide result badges */
.form-badge {
  padding: 5px;
  margin: 0 2px;
  border: 1px solid #c0c0c0;
}

[data-bs-theme="dark"] .form-badge {
  border-color: #4a4a4a;
}

/* ============================================
   Admin Pages Dark Mode Support
   ============================================ */

/* Code tags visibility in dark mode */
[data-bs-theme="dark"] code {
  background-color: rgba(108, 117, 125, 0.2);
  color: #8bb9fe;
}

/* Table secondary rows in dark mode - for submenu items */
[data-bs-theme="dark"] .table-secondary {
  --bs-table-bg: rgba(108, 117, 125, 0.15);
  --bs-table-color: var(--bs-body-color);
}

/* Card styling in dark mode */
[data-bs-theme="dark"] .card {
  --bs-card-bg: var(--bs-body-bg);
  --bs-card-border-color: var(--bs-border-color);
}

/* Table light header in dark mode */
[data-bs-theme="dark"] .table-light {
  --bs-table-bg: rgba(108, 117, 125, 0.1);
  --bs-table-color: var(--bs-body-color);
}

/* ============================================
   Collapsible Section Chevron Animation
   ============================================ */

/* Rotate chevron when collapse is expanded */
a[data-bs-toggle="collapse"] .bi-chevron-right {
  transition: transform 0.2s ease;
}

a[data-bs-toggle="collapse"]:not(.collapsed) .bi-chevron-right {
  transform: rotate(90deg);
}