/* Dark Mode CSS Variables and Styles */

:root {
  /* Light mode variables */
  --bg-primary: #ffffff;
  --bg-secondary: #f5f5f5;
  --bg-tertiary: #f8f9fa;
  --text-primary: #212529;
  --text-secondary: #6c757d;
  --text-muted: #6c757d;
  --border-color: #dee2e6;
  --border-light: #ced4da;
  --shadow: rgba(0, 0, 0, 0.1);
  --shadow-strong: rgba(0, 0, 0, 0.3);
  --navbar-bg: #ffffff;
  --navbar-text: #212529;
  --navbar-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  --card-bg: #ffffff;
  --card-header-bg: #212529;
  --card-header-text: #ffffff;
  --modal-bg: #ffffff;
  --modal-header-bg: #0b0b0c;
  --modal-header-text: #ffffff;
  --panel-bg: rgb(244,244,244);
  --panel-header-bg: #212529;
  --panel-header-text: #ffffff;
  --input-bg: #ffffff;
  --input-text: #212529;
  --input-border: #ced4da;
  --tab-bg: rgba(45, 45, 45, 0.50);/*rgba(255, 255, 255, 0.50);*/
  --tab-text: #ffffff;/*#495057;*/
  --tab-active-text: #000000;
  --tab-hover-bg: rgba(45, 45, 45, 1);/*rgba(255, 255, 255, 1);*/
  --tab-hover-text: #ffffff;/*#0000ff;*/
  --blur-bg: rgba(255, 255, 255, 0.90);
  --blur-text: #000000;
  --timeline-bg: #f5f5f5;
  --timeline-border: #000000;
  --footer-bg: #ffffff;
  --footer-text: #212529;
}

[data-theme="dark"] {
  /* Dark mode variables */
  --bg-primary: #1a1a1a;
  --bg-secondary: #2d2d2d;
  --bg-tertiary: #3a3a3a;
  --text-primary: #ffffff;
  --text-secondary: #b0b0b0;
  --text-muted: #888888;
  --border-color: #404040;
  --border-light: #555555;
  --shadow: rgba(0, 0, 0, 0.3);
  --shadow-strong: rgba(0, 0, 0, 0.5);
  --navbar-bg: #1a1a1a;
  --navbar-text: #ffffff;
  --navbar-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  --card-bg: #2d2d2d;
  --card-header-bg: #404040;
  --card-header-text: #ffffff;
  --modal-bg: #2d2d2d;
  --modal-header-bg: #1a1a1a;
  --modal-header-text: #ffffff;
  --panel-bg: #2d2d2d;
  --panel-header-bg: #404040;
  --panel-header-text: #ffffff;
  --input-bg: #2d2d2d;
  --input-text: #ffffff;
  --input-border: #555555;
  --tab-bg: rgba(45, 45, 45, 0.50);
  --tab-text: #b0b0b0;
  --tab-active-text: #ffffff;
  --tab-hover-bg: rgba(45, 45, 45, 1);
  --tab-hover-text: #66b3ff;
  --blur-bg: rgba(45, 45, 45, 0.90);
  --blur-text: #ffffff;
  --timeline-bg: #2d2d2d;
  --timeline-border: #555555;
  --footer-bg: #1a1a1a;
  --footer-text: #ffffff;
}

.btn-success{
  background-color:#10b981;
}

.btn-outline-success{
  border-color:#10b981;
}

.btn-outline-success.active{
  background-color:#10b981;
}

/* Apply theme variables to existing classes */
html {
  background-color: var(--bg-primary);
}

body {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Ensure all text elements use theme colors */
h1, h2, h3, h4, h5, h6, p, div, label, small {
  color: var(--text-primary) !important;
}

.badge{
  color: var(--text-primary) !important;
}

.grid-cell{
  background-color: var(--bg-primary) !important;
}

/* Override Bootstrap's default text colors */
.text-muted {
  color: var(--text-muted) !important;
}

.text-dark {
  color: var(--text-primary) !important;
}

.text-white {
  color: var(--text-primary) !important;
}

.text-danger {
  color: #dc3545 !important;
}

.text-success {
  color: #198754 !important;
}

.navbar-top-header {
  background-color: var(--navbar-bg) !important;
  box-shadow: var(--navbar-shadow) !important;
}

.navbar-brand,
.nav-link {
  color: var(--navbar-text) !important;
}

.nav-link:hover {
  color: var(--tab-hover-text) !important;
}

.background-card {
  background: var(--card-bg) !important;
  box-shadow: 0 20px 25px -15px var(--shadow-strong) !important;
}

.card-header {
  background: var(--card-header-bg) !important;
  color: var(--card-header-text) !important;
}

/* Ensure card headers switch properly between themes */


html:not([data-theme="dark"]) .card-header h1,
html:not([data-theme="dark"]) .card-header h2,
html:not([data-theme="dark"]) .card-header h3,
html:not([data-theme="dark"]) .card-header h4,
html:not([data-theme="dark"]) .card-header h5,
html:not([data-theme="dark"]) .card-header h6,
html:not([data-theme="dark"]) .card-header p,
html:not([data-theme="dark"]) .card-header span,
html:not([data-theme="dark"]) .card-header div {
  color: #ffffff !important;
}

html[data-theme="dark"] .card-header {
  background: #404040 !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .weather-widget {
  color: #ffffff !important;
}

.modal-content {
  background-color: var(--modal-bg) !important;
}

.modal-header {
  background-color: var(--modal-header-bg) !important;
  color: var(--modal-header-text) !important;
  border-bottom: 1px solid var(--border-color) !important;
}

.modal-header .modal-title {
  color: var(--modal-header-text) !important;
}

.modal-header .btn-close {
  color:white;
}

.modal-body {
  background-color: var(--modal-bg) !important;
  color: var(--text-primary) !important;
}

/* EasyMDE (markdown editor) in Roamio modals – use theme variables */
[data-theme="dark"] .EasyMDEContainer,
[data-theme="dark"] .EasyMDEContainer .CodeMirror {
  background-color: var(--input-bg) !important;
  color: var(--input-text) !important;
  border-color: var(--input-border) !important;
}
[data-theme="dark"] .EasyMDEContainer .CodeMirror-cursor {
  border-left-color: var(--input-text) !important;
}
[data-theme="dark"] .EasyMDEContainer .editor-toolbar {
  background-color: var(--bg-secondary) !important;
  border-color: var(--input-border) !important;
}
[data-theme="dark"] .EasyMDEContainer .editor-toolbar button {
  color: var(--text-secondary) !important;
}
[data-theme="dark"] .EasyMDEContainer .editor-toolbar button:hover,
[data-theme="dark"] .EasyMDEContainer .editor-toolbar button.active {
  background-color: var(--bg-tertiary) !important;
  color: var(--input-text) !important;
  border-color: var(--input-border) !important;
}
[data-theme="dark"] .EasyMDEContainer .editor-preview,
[data-theme="dark"] .EasyMDEContainer .editor-preview-side {
  background-color: var(--modal-bg) !important;
  color: var(--text-primary) !important;
}
[data-theme="dark"] .EasyMDEContainer .CodeMirror-selected {
  background-color: var(--bg-tertiary) !important;
}

.nav-tabs .nav-link {
  background: var(--tab-bg) !important;
  color: var(--tab-text) !important;
}

.nav-tabs .nav-link.active {
  color: var(--tab-active-text) !important;
  background-color: var(--bg-primary) !important;
}
/* Additional specificity for active tabs in dark mode */
html[data-theme="dark"] .nav-tabs .nav-link.active,
html[data-theme="dark"] .nav-link.active{
  border-bottom-color: transparent !important;
  background-color: var(--bg-primary) !important;
}

/* Specific overrides for vivibap tabs */
html[data-theme="dark"] .vivibap-tabs .nav-link.active,
html[data-theme="dark"] .vivibap-fullscreen-tabs .nav-link.active {
  border-bottom: none !important;
  border-bottom-color: transparent !important;
  margin-bottom: -1px !important;
}

.nav-tabs .nav-link:hover {
  background: var(--tab-hover-bg) !important;
  color: var(--tab-hover-text) !important;
}

.card-blur {
  background: var(--blur-bg) !important;
  color: var(--blur-text) !important;
}

.text-area-custom {
  background-color: var(--input-bg) !important;
  color: var(--input-text) !important;
  border: 1px solid var(--input-border) !important;
}

.panel-default {
  box-shadow: 0 20px 25px -15px var(--shadow-strong) !important;
}

.panel-default .panel-heading {
  background-color: var(--panel-header-bg) !important;
  color: var(--panel-header-text) !important;
  border-left: 1px solid var(--panel-header-bg) !important;
  border-right: 1px solid var(--panel-header-bg) !important;
}

.panel-default .panel-body {
  background-color: var(--panel-bg) !important;
  border-top: 1px solid var(--border-color) !important;
  border-left: 1px solid var(--border-color) !important;
  border-right: 1px solid var(--border-color) !important;
  border-bottom: 1px solid var(--border-color) !important;
}

.panel-default .panel-footer {
  background-color: var(--panel-bg) !important;
}

.tab-content {
  background-color: var(--bg-primary) !important;
}

.timeline-section {
  background: var(--timeline-bg) !important;
  box-shadow: 0 20px 25px -15px var(--shadow-strong) !important;
}

.timeline-left-pane,
.timeline-right-pane {
  border: 5px solid var(--timeline-border) !important;
}

.cheatsheet-header {
  background-color: var(--bg-primary) !important;
}

#footer {
  background-color: var(--footer-bg) !important;
  color: var(--footer-text) !important;
}

/* Dark mode specific adjustments */
[data-theme="dark"] .dropdown-menu {
  background-color: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;
}

[data-theme="dark"] .dropdown-item {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .dropdown-item:hover {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
  background-color: var(--input-bg) !important;
  color: var(--input-text) !important;
  border: 1px solid var(--input-border) !important;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
  background-color: var(--input-bg) !important;
  color: var(--input-text) !important;
  border-color: var(--tab-hover-text) !important;
  box-shadow: 0 0 0 0.2rem rgba(102, 179, 255, 0.25) !important;
}

[data-theme="dark"] .input-group-text {
  background-color: var(--input-bg) !important;
  color: var(--input-text) !important;
  border-color: var(--input-border) !important;
}

/* Date input calendar icon styling for dark mode */
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) !important;
  cursor: pointer;
}

[data-theme="dark"] input[type="date"]::-webkit-inner-spin-button,
[data-theme="dark"] input[type="date"]::-webkit-clear-button {
  filter: invert(1) !important;
}

/* Placeholder text styling for dark mode */
[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] .form-select::placeholder {
  color: #888888 !important;
  opacity: 1;
}

[data-theme="dark"] .form-control::-webkit-input-placeholder,
[data-theme="dark"] .form-select::-webkit-input-placeholder {
  color: #888888 !important;
  opacity: 1;
}

[data-theme="dark"] .form-control::-moz-placeholder,
[data-theme="dark"] .form-select::-moz-placeholder {
  color: #888888 !important;
  opacity: 1;
}

[data-theme="dark"] .form-control:-ms-input-placeholder,
[data-theme="dark"] .form-select:-ms-input-placeholder {
  color: #888888 !important;
  opacity: 1;
}

[data-theme="dark"] .form-control:-moz-placeholder,
[data-theme="dark"] .form-select:-moz-placeholder {
  color: #888888 !important;
  opacity: 1;
}

[data-theme="dark"] .table {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > td,
[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > th {
  background-color: var(--bg-tertiary) !important;
}

[data-theme="dark"] .table-hover > tbody > tr:hover > td,
[data-theme="dark"] .table-hover > tbody > tr:hover > th {
  background-color: var(--bg-tertiary) !important;
}

/* Theme toggle button */
.theme-toggle {
  background: none;
  border: none;
  color: var(--navbar-text);
  font-size: 1.2rem;
  cursor: pointer;
  border-radius: 50%;
  transition: all 0.3s ease;
  margin-left: 0.5rem;
}

.theme-toggle:hover {
  background-color: var(--bg-tertiary);
  transform: scale(1.1);
}

.theme-toggle:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--tab-hover-text);
}

/* Smooth transitions for theme switching */
* {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

[data-theme="dark"] .bg-secondary {
  color: var(--text-primary);
}

[data-theme="dark"] .bg-tertiary {
  color: var(--text-primary);
}

[data-theme="dark"] .btn-outline-primary {
  color: var(--tab-hover-text);
  border-color: var(--tab-hover-text);
}

[data-theme="dark"] .btn-outline-primary:hover {
  background-color: var(--tab-hover-text);
  color: var(--bg-primary);
}

[data-theme="dark"] .btn-primary {
  background-color: var(--tab-hover-text);
  border-color: var(--tab-hover-text);
}

[data-theme="dark"] .btn-primary:hover {
  background-color: var(--tab-hover-text);
  border-color: var(--tab-hover-text);
  opacity: 0.8;
}

/* Force dark mode styles to override Bootstrap with higher specificity */
html[data-theme="dark"] * {
  color: var(--text-primary) !important;
}

html[data-theme="dark"] body {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

html[data-theme="dark"] .container,
html[data-theme="dark"] .container-fluid {
  color: var(--text-primary) !important;
}

html:not([data-theme="dark"]) .card-header {
  background-color: #212529 !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .card-header {
  background-color: #404040 !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .bg-light {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}

html[data-theme="dark"] .bg-white {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

/* Ensure all Bootstrap text utilities work in dark mode */
html[data-theme="dark"] .text-dark {
  color: var(--text-primary) !important;
}

html[data-theme="dark"] .text-white {
  color: var(--text-primary) !important;
}

html[data-theme="dark"] .text-muted {
  color: var(--text-muted) !important;
}

html[data-theme="dark"] .text-danger {
  color: #dc3545 !important;
}

html[data-theme="dark"] .card.card-header.text-danger {
  color: #dc3545 !important;
}

html[data-theme="dark"] .text-success {
  color: #198754 !important;
}


/* Additional aggressive overrides for common elements */
html[data-theme="dark"] .navbar-brand,
html[data-theme="dark"] .nav-link,
html[data-theme="dark"] .dropdown-item,
html[data-theme="dark"] .btn,
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .table,
html[data-theme="dark"] .list-group-item {
  color: var(--text-primary) !important;
}

html[data-theme="dark"] .navbar,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .card,
html[data-theme="dark"] .list-group-item {
  background-color: var(--bg-primary) !important;
  border-color: var(--border-color) !important;
}

/* Ensure page content areas are properly themed */
html[data-theme="dark"] .content,
html[data-theme="dark"] .tab-content,
html[data-theme="dark"] .container,
html[data-theme="dark"] .container-fluid {
  color: var(--text-primary) !important;
}

/* Accordion dark mode styles */
html[data-theme="dark"] .accordion-button {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

html[data-theme="dark"] .accordion-button:not(.collapsed) {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
  box-shadow: inset 0 -1px 0 var(--border-color) !important;
}

html[data-theme="dark"] .accordion-button:focus {
  border-color: var(--tab-hover-text) !important;
  box-shadow: 0 0 0 0.25rem rgba(102, 179, 255, 0.25) !important;
}

html[data-theme="dark"] .accordion-item {
  background-color: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
}

html[data-theme="dark"] .accordion-body {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}

/* Enhanced table dark mode styles */
html[data-theme="dark"] .table > tbody > tr {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}

html[data-theme="dark"] .table > tbody > tr:hover {
  background-color: var(--bg-tertiary) !important;
}

html[data-theme="dark"] .table > thead > tr > th {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

html[data-theme="dark"] .table > tbody > tr > td {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

/* Button outline styles for dark mode */
html[data-theme="dark"] .btn-outline-secondary {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

html[data-theme="dark"] .btn-outline-secondary:hover {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-light) !important;
}

html[data-theme="dark"] .btn-outline-danger {
  background-color: var(--bg-secondary) !important;
  color: #ff6b6b !important;
  border-color: #ff6b6b !important;
}

html[data-theme="dark"] .btn-outline-danger:hover {
  background-color: #ff6b6b !important;
  color: var(--bg-primary) !important;
  border-color: #ff6b6b !important;
}

/* Enhanced modal dark mode styles */
html[data-theme="dark"] .modal-content {
  background-color: var(--modal-bg) !important;
  border-color: var(--border-color) !important;
}

html[data-theme="dark"] .modal-header {
  background-color: var(--modal-header-bg) !important;
  color: var(--modal-header-text) !important;
  border-bottom-color: var(--border-color) !important;
}

html[data-theme="dark"] .modal-header.bg-success {
  background-color: #198754 !important;
  color: #ffffff !important;
  border-bottom-color: var(--border-color) !important;
}

html[data-theme="dark"] .modal-header.bg-danger {
  background-color: #dc3545 !important;
  color: #ffffff !important;
  border-bottom-color: var(--border-color) !important;
}


html[data-theme="dark"] .modal-header .modal-title {
  color: var(--modal-header-text) !important;
}

html[data-theme="dark"] .modal-header .btn-close {
  color:white;
}

html[data-theme="dark"] .modal-body {
  background-color: var(--modal-bg) !important;
  color: var(--text-primary) !important;
}

html[data-theme="dark"] .modal-footer {
  background-color: var(--modal-bg) !important;
  border-top-color: var(--border-color) !important;
}

/* Tooltip dark mode styles */
html[data-theme="dark"] .tooltip {
  --bs-tooltip-bg: var(--bg-tertiary) !important;
  --bs-tooltip-color: var(--text-primary) !important;
}

html[data-theme="dark"] .tooltip .tooltip-inner {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
}

html[data-theme="dark"] .tooltip .tooltip-arrow::before {
  border-top-color: var(--bg-tertiary) !important;
  border-bottom-color: var(--bg-tertiary) !important;
  border-left-color: var(--bg-tertiary) !important;
  border-right-color: var(--bg-tertiary) !important;
}

html[data-theme="dark"] .tooltip.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: var(--bg-tertiary) !important;
}

html[data-theme="dark"] .tooltip.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: var(--bg-tertiary) !important;
}

html[data-theme="dark"] .tooltip.bs-tooltip-start .tooltip-arrow::before {
  border-left-color: var(--bg-tertiary) !important;
}

html[data-theme="dark"] .tooltip.bs-tooltip-end .tooltip-arrow::before {
  border-right-color: var(--bg-tertiary) !important;
}

/* Tooltip trigger icon styling */
.fa-question-circle {
  color: var(--text-secondary) !important;
  opacity: 0.7;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.fa-question-circle:hover {
  opacity: 1;
  color: var(--tab-hover-text) !important;
}

/* Light mode specific tooltip icon styling */
:root .fa-question-circle {
  color: #6c757d !important;
}

:root .fa-question-circle:hover {
  color: #0d6efd !important;
}

/* Dark mode specific tooltip icon styling */
[data-theme="dark"] .fa-question-circle {
  color: #b0b0b0 !important;
}

[data-theme="dark"] .fa-question-circle:hover {
  color: #66b3ff !important;
}

[data-theme="dark"] .alert-light {
  background-color: #3a3a3a !important;
  color: #e2e8f0 !important;
  border: 1px solid #555555 !important;
}

/* Dark mode styling for custom toast notifications */
[data-theme="dark"] .alert.position-fixed {
  background-color: #2d2d2d !important;
  color: #e2e8f0 !important;
  border: 1px solid #555555 !important;
}

[data-theme="dark"] .alert.alert-success.position-fixed {
  background-color: #1a4a1a !important;
  color: #b3ffb3 !important;
  border-color: #2a6a2a !important;
}

[data-theme="dark"] .alert.alert-danger.position-fixed {
  background-color: #4a1a1a !important;
  color: #ffb3b3 !important;
  border-color: #6a2a2a !important;
}

[data-theme="dark"] .alert.alert-warning {
  background-color: #664d03 !important;
  color: #ffffff !important;
  border-color: #997404 !important;
}

[data-theme="dark"] .alert.alert-warning.position-fixed {
  background-color: #664d03 !important;
  color: #ffffff !important;
  border-color: #997404 !important;
}

[data-theme="dark"] .alert.alert-info {
  background-color: #0d4f8c !important;
  color: #ffffff !important;
  border-color: #1a6bb3 !important;
}

[data-theme="dark"] .alert.alert-info.position-fixed {
  background-color: #0d4f8c !important;
  color: #ffffff !important;
  border-color: #1a6bb3 !important;
}

[data-theme="dark"] .alert.position-fixed .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* Tryout management page dark mode styles */
html[data-theme="dark"] .table-container {
  background-color: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;
}

html[data-theme="dark"] .section-header {
  color: var(--text-primary) !important;
}

html[data-theme="dark"] .section-header h3 {
  color: var(--text-primary) !important;
}

html[data-theme="dark"] .table {
  color: var(--text-primary) !important;
}

html[data-theme="dark"] .table th {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

html[data-theme="dark"] .table td {
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

html[data-theme="dark"] .table-hover tbody tr:hover {
  background-color: var(--bg-tertiary) !important;
}

/* Player report page dark mode styles */
html[data-theme="dark"] .filter-card {
  background-color: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;
}

html[data-theme="dark"] .report-card {
  background-color: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;
}

html[data-theme="dark"] .section-header {
  color: var(--text-primary) !important;
  border-bottom-color: var(--border-color) !important;
}

html[data-theme="dark"] .section-header h4 {
  color: var(--text-primary) !important;
}

html[data-theme="dark"] .stat-card {
  background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%) !important;
  border-left-color: var(--primary-color) !important;
}

html[data-theme="dark"] .stat-number {
  color: var(--primary-color) !important;
}

html[data-theme="dark"] .stat-label {
  color: var(--text-secondary) !important;
}

html[data-theme="dark"] .category-total {
  background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%) !important;
  border-left-color: var(--primary-color) !important;
}

html[data-theme="dark"] .category-total h6 {
  color: var(--primary-color) !important;
}

html[data-theme="dark"] .category-total .score {
  color: var(--primary-color) !important;
}

/* Player report comparison cards dark mode */
html[data-theme="dark"] .comparison-card {
  background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%) !important;
  border-left-color: var(--primary-color) !important;
}

html[data-theme="dark"] .current-score {
  color: var(--primary-color) !important;
}

html[data-theme="dark"] .previous-score {
  color: var(--text-secondary) !important;
}

html[data-theme="dark"] .accordion-item {
  border-color: var(--border-color) !important;
}

html[data-theme="dark"] .accordion-body {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}

/* Category icons dark mode */
html[data-theme="dark"] .agility-icon {
  color: #20c997 !important;
}

html[data-theme="dark"] .strength-icon {
  color: #fd7e14 !important;
}

html[data-theme="dark"] .speed-icon {
  color: #6f42c1 !important;
}

html[data-theme="dark"] .endurance-icon {
  color: #17a2b8 !important;
}

html[data-theme="dark"] .hero-section .btn-light {
  background-color: #ffffff !important;
  color: #212529 !important;
  border-color: #ffffff !important;
}

html[data-theme="dark"] .hero-section .btn-outline-light {
  color: #ffffff !important;
  border-color: #ffffff !important;
}

html[data-theme="dark"] .hero-section .btn-outline-light:hover {
  background-color: #ffffff !important;
  color: #212529 !important;
}

html[data-theme="dark"] .hero-section .btn-outline-light:hover .fas,
html[data-theme="dark"] .hero-section .btn-outline-light:hover .far,
html[data-theme="dark"] .hero-section .btn-outline-light:hover .fab,
html[data-theme="dark"] .hero-section .btn-outline-light:hover .fa,
html[data-theme="dark"] .hero-section .btn-outline-light:hover i {
  color: #212529 !important;
}

/* Home page CTA section - prevent dark mode overrides */
html[data-theme="dark"] .cta-section {
  background: linear-gradient(360deg, #074751 0%, #000 100%) !important;
  color: white !important;
}


html[data-theme="dark"] .cta-section h2,
html[data-theme="dark"] .cta-section p,
html[data-theme="dark"] .cta-section .lead {
  color: white !important;
}

html[data-theme="dark"] .cta-section .btn-light {
  background-color: #ffffff !important;
  color: #212529 !important;
  border-color: #ffffff !important;
}

html[data-theme="dark"] .cta-section .btn-outline-light {
  color: #ffffff !important;
  border-color: #ffffff !important;
}

html[data-theme="dark"] .cta-section .btn-outline-light:hover {
  background-color: #ffffff !important;
  color: #212529 !important;
}

html[data-theme="dark"] .cta-section .btn-outline-light:hover .fas,
html[data-theme="dark"] .cta-section .btn-outline-light:hover .far,
html[data-theme="dark"] .cta-section .btn-outline-light:hover .fab,
html[data-theme="dark"] .cta-section .btn-outline-light:hover .fa,
html[data-theme="dark"] .cta-section .btn-outline-light:hover i {
  color: #212529 !important;
}

/* Admin fullscreen header dark mode styling */
html[data-theme="dark"] .admin-fullscreen-header {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  border-bottom-color: var(--border-color) !important;
}

html[data-theme="dark"] .admin-fullscreen-header .container-fluid {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}

html[data-theme="dark"] .admin-fullscreen-header h4,
html[data-theme="dark"] .admin-fullscreen-header small {
  color: var(--text-primary) !important;
}

html[data-theme="dark"] .admin-fullscreen-header .text-muted {
  color: var(--text-muted) !important;
}

html[data-theme="dark"] .cta-section small {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* Font Awesome icons in hero and CTA sections - keep original colors */
html[data-theme="dark"] .hero-section .fas,
html[data-theme="dark"] .hero-section .far,
html[data-theme="dark"] .hero-section .fab,
html[data-theme="dark"] .hero-section .fa,
html[data-theme="dark"] .hero-section i {
  color: inherit !important;
}

html[data-theme="dark"] .hero-section .btn-light .fas,
html[data-theme="dark"] .hero-section .btn-light .far,
html[data-theme="dark"] .hero-section .btn-light .fab,
html[data-theme="dark"] .hero-section .btn-light .fa,
html[data-theme="dark"] .hero-section .btn-light i {
  color: #212529 !important;
}

html[data-theme="dark"] .hero-section .btn-outline-light .fas,
html[data-theme="dark"] .hero-section .btn-outline-light .far,
html[data-theme="dark"] .hero-section .btn-outline-light .fab,
html[data-theme="dark"] .hero-section .btn-outline-light .fa,
html[data-theme="dark"] .hero-section .btn-outline-light i {
  color: #ffffff !important;
}

html[data-theme="dark"] .cta-section .fas,
html[data-theme="dark"] .cta-section .far,
html[data-theme="dark"] .cta-section .fab,
html[data-theme="dark"] .cta-section .fa,
html[data-theme="dark"] .cta-section i {
  color: inherit !important;
}

html[data-theme="dark"] .cta-section .btn-light .fas,
html[data-theme="dark"] .cta-section .btn-light .far,
html[data-theme="dark"] .cta-section .btn-light .fab,
html[data-theme="dark"] .cta-section .btn-light .fa,
html[data-theme="dark"] .cta-section .btn-light i {
  color: #212529 !important;
}

html[data-theme="dark"] .cta-section .btn-outline-light .fas,
html[data-theme="dark"] .cta-section .btn-outline-light .far,
html[data-theme="dark"] .cta-section .btn-outline-light .fab,
html[data-theme="dark"] .cta-section .btn-outline-light .fa,
html[data-theme="dark"] .cta-section .btn-outline-light i {
  color: #ffffff !important;
}

/* Chart.js legend text styling for dark mode */
html[data-theme="dark"] .chartjs-legend {
  color: #ffffff !important;
}

html[data-theme="dark"] .chartjs-legend li {
  color: #ffffff !important;
}

html[data-theme="dark"] .chartjs-legend li span {
  color: #ffffff !important;
}

/* Chart.js legend text in canvas elements */
html[data-theme="dark"] canvas + div {
  color: #ffffff !important;
}

html[data-theme="dark"] canvas + div ul {
  color: #ffffff !important;
}

html[data-theme="dark"] canvas + div ul li {
  color: #ffffff !important;
}

html[data-theme="dark"] canvas + div ul li span {
  color: #ffffff !important;
}

/* Star rating styling - preserve gold color in dark mode */
html[data-theme="dark"] .text-warning {
  color: #ffc107 !important;
}

html[data-theme="dark"] .text-warning i,
html[data-theme="dark"] .text-warning span {
  color: #ffc107 !important;
}

/* Preserve table class colors in dark mode */
html[data-theme="dark"] .table-success {
  background-color: #d1e7dd !important;
  color: #0f5132 !important;
}

html[data-theme="dark"] .table-success td,
html[data-theme="dark"] .table-success th {
  background-color: #d1e7dd !important;
  color: #0f5132 !important;
}

html[data-theme="dark"] .table-danger {
  background-color: #f8d7da !important;
  color: #842029 !important;
}

html[data-theme="dark"] .table-danger td,
html[data-theme="dark"] .table-danger th {
  background-color: #f8d7da !important;
  color: #842029 !important;
}

html[data-theme="dark"] .table-info {
  background-color: #cff4fc !important;
  color: #055160 !important;
}

html[data-theme="dark"] .table-info td,
html[data-theme="dark"] .table-info th {
  background-color: #cff4fc !important;
  color: #055160 !important;
}

html[data-theme="dark"] .table-light {
  background-color: #f8f9fa !important;
  color: #000000 !important;
}

html[data-theme="dark"] .table-light td,
html[data-theme="dark"] .table-light th {
  background-color: #f8f9fa !important;
  color: #000000 !important;
}

html[data-theme="dark"] .table-warning {
  background-color: #fff3cd !important;
  color: #000000 !important;
}

html[data-theme="dark"] .table-warning td,
html[data-theme="dark"] .table-warning th {
  background-color: #fff3cd !important;
  color: #000000 !important;
}

html[data-theme="dark"] .form-section{
  background-color: #2d2d2d;
  color: #e2e8f0;
}

html[data-theme="dark"] .feedback-card{
  background-color: #2d2d2d;
  color: #e2e8f0;
}

html[data-theme="dark"] .response-section{
  background-color: #2d2d2d;
  color: #e2e8f0;
}

html[data-theme="dark"] .badge-active{
  color: #10b981 !important;
}

html[data-theme="dark"] .badge-inactive{
  color: #ef4444 !important;
}

html[data-theme="dark"] .badge-admin{
  color: #f59e0b !important;
}

html[data-theme="dark"] .badge-active i{
  color: #10b981 !important;
}

html[data-theme="dark"] .badge-inactive i{
  color: #ef4444 !important;
}

html[data-theme="dark"] .badge-admin i{
  color: #f59e0b !important;
}

/* Monthly calendar page dark mode */
html[data-theme="dark"] .monthly-calendar-page .rounded-3.sticky-top.bg-white {
  background-color: var(--card-bg) !important;
  color: var(--text-primary) !important;
}

html[data-theme="dark"] .monthly-calendar-page .current-month {
  color: var(--text-primary) !important;
}

html[data-theme="dark"] .monthly-calendar-page .calendar-grid {
  background-color: var(--border-color) !important;
}

html[data-theme="dark"] .monthly-calendar-page .calendar-day-header {
  background-color: var(--card-header-bg) !important;
  color: var(--card-header-text) !important;
}

html[data-theme="dark"] .monthly-calendar-page .calendar-day {
  background-color: var(--card-bg) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

html[data-theme="dark"] .monthly-calendar-page .day-number {
  color: var(--text-primary) !important;
}

html[data-theme="dark"] .monthly-calendar-page .calendar-day.other-month {
  color: var(--text-muted) !important;
  background-color: var(--bg-secondary) !important;
}

html[data-theme="dark"] .monthly-calendar-page .calendar-day.today {
  background-color: var(--bg-tertiary) !important;
  border: 2px solid var(--tab-hover-text) !important;
  color: var(--text-primary) !important;
}

html[data-theme="dark"] .monthly-calendar-page .calendar-day:hover {
  background-color: var(--bg-secondary) !important;
}