/**
 * Custom Theme Variables for Ransomwhere
 * Preserves original color scheme with minimal Bootstrap dark mode support
 */

:root {
  /* Original Ransomwhere colors preserved */
  --rw-bg-navbar: #212529;          /* Your original navbar color */
  --rw-accent-red: #692019;         /* Your original button color */
  --rw-text-muted: #999999;         /* Your original muted text */
  --rw-separator: #692019;          /* Your original separator color */
  
  /* Chart colors - keeping your original choices */
  --rw-chart-countries: rgba(220, 53, 69, 0.8);    /* Original red for countries */
  --rw-chart-groups: rgba(40, 167, 69, 0.8);       /* Original green for groups */
  --rw-chart-monthly: rgba(54, 162, 235, 0.8);     /* Original blue for monthly */
  
  /* Border colors for charts */
  --rw-chart-countries-border: rgba(220, 53, 69, 1);
  --rw-chart-groups-border: rgba(40, 167, 69, 1);
  --rw-chart-monthly-border: rgba(54, 162, 235, 1);
  
  /* Minimal shadow for components */
  --rw-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

[data-bs-theme="dark"] {
  /* Only minimal changes for dark mode to maintain your design */
  /* Keep most of your original colors, just adjust Bootstrap components */
  
  /* Keep your navbar color exactly the same */
  --rw-bg-navbar: #212529;
  
  /* Keep your button colors exactly the same */
  --rw-accent-red: #692019;
  
  /* Keep your text colors exactly the same */
  --rw-text-muted: #999999;
  
  /* Keep your separator color exactly the same */
  --rw-separator: #692019;
  
  /* Keep your chart colors exactly the same */
  --rw-chart-countries: rgba(220, 53, 69, 0.8);
  --rw-chart-groups: rgba(40, 167, 69, 0.8);
  --rw-chart-monthly: rgba(54, 162, 235, 0.8);
  
  --rw-chart-countries-border: rgba(220, 53, 69, 1);
  --rw-chart-groups-border: rgba(40, 167, 69, 1);
  --rw-chart-monthly-border: rgba(54, 162, 235, 1);
  
  /* Minimal shadow adjustment for dark mode */
  --rw-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* Apply original color variables while preserving your design */

/* Keep your exact navbar color in all modes */
#navbar,
.navbar.bg-dark {
  background-color: #212529 !important;
}

/* Ensure navbar stays your original color even with Bootstrap dark mode */
[data-bs-theme="dark"] #navbar,
[data-bs-theme="dark"] .navbar.bg-dark {
  background-color: #212529 !important;
}

/* Keep your exact button colors */
#filterButton,
.btn-danger:not(.btn-outline-danger) {
  background-color: var(--rw-accent-red) !important;
  border-color: var(--rw-accent-red) !important;
}

/* Keep your exact text colors */
.texto-pequeno {
  color: var(--rw-text-muted) !important;
}

/* Keep your exact separator color */
.separador {
  border-bottom-color: var(--rw-separator) !important;
}

/* Minimal styling for components - let Bootstrap handle most theming */
.chart-container {
  box-shadow: var(--rw-shadow);
}

/* Theme toggle improvements */
.theme-toggle {
  transition: color 0.3s ease;
  cursor: pointer;
}

.theme-toggle:hover {
  opacity: 0.8;
}

/* Keep theme toggle icon white in all modes (original design) */
.theme-toggle .fa-circle-half-stroke {
  color: white !important; /* Always white as in original design */
}

/* Minimal transitions to avoid jarring changes */
.theme-toggle, #navbar, #filterButton, .separador {
  transition: background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease;
}

/* Keep your loading indicator color */
.spinner-border {
  color: var(--rw-accent-red);
}

[data-bs-theme="light"].card-body:hover {
  color: black !important;
}

/* Light mode card styling */
.card-body {
  color: grey /* Default: gray text */
}

/* Light mode: filtered/focused card text is black */
[data-bs-theme="light"].total,
[data-bs-theme="light"].year,
[data-bs-theme="light"].month,
[data-bs-theme="light"].week,
[data-bs-theme="light"].today {
  color: black !important;/* Filtered card: black text */
}

/* Light mode: filtered/focused card text is black */
[data-bs-theme="dark"].total,
[data-bs-theme="dark"].year,
[data-bs-theme="dark"].month,
[data-bs-theme="dark"].week,
[data-bs-theme="dark"].today {
  color: white !important; /* Filtered card: black text */
}

/* Light mode: hover makes text black to show it's clickable */
[data-bs-theme="dark"] .card-body:hover {
  color: white !important;
}