/* Dark Mode Styles for Workout Generator */
/* This file provides comprehensive dark mode support for all pages */

/* Dark Mode CSS Variables */
[data-theme="dark"] {
  /* Primary Colors */
  --primary-color: #7D7FF2;
  --primary-hover: #9D9FF5;
  --primary-dark: #5D5FEF;
  --secondary-color: #FF8989;
  --accent-color: #5EC9DD;
  
  /* Backgrounds */
  --light-bg: #0F1419;
  --white: #1A1F2E;
  --card-bg: #1A1F2E;
  --modal-bg: #1A1F2E;
  --hover-bg: #22293A;
  
  /* Text Colors */
  --dark: #E1E8ED;
  --text-primary: #E1E8ED;
  --text-secondary: #AAB8C2;
  --text-muted: #657786;
  
  /* Borders */
  --border-color: #2F3336;
  --border-light: #38444D;
  
  /* Shadows */
  --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
  
  /* Status Colors */
  --success-bg: #1A3A2E;
  --success-text: #4ADE80;
  --error-bg: #3A1A1A;
  --error-text: #F87171;
  --warning-bg: #3A2E1A;
  --warning-text: #FCD34D;
  --info-bg: #1A2A3A;
  --info-text: #60A5FA;
  
  /* Form Elements */
  --input-bg: #22293A;
  --input-border: #38444D;
  --input-focus-border: #5D5FEF;
  --input-text: #E1E8ED;
  --placeholder-color: #657786;
  
  /* Specific Component Colors */
  --nav-bg: rgba(26, 31, 46, 0.95);
  --dropdown-bg: #22293A;
  --tooltip-bg: #38444D;
  --code-bg: #22293A;
  --pre-bg: #0D1117;
  
  /* Chart Colors */
  --chart-grid: #2F3336;
  --chart-text: #AAB8C2;
  
  /* Scrollbar */
  --scrollbar-bg: #1A1F2E;
  --scrollbar-thumb: #38444D;
  --scrollbar-thumb-hover: #4A5568;
}

/* Base Dark Mode Styles */
[data-theme="dark"] body {
  background-color: var(--light-bg);
  color: var(--text-primary);
}

/* Headers and Navigation */
[data-theme="dark"] .site-header,
[data-theme="dark"] header,
[data-theme="dark"] nav {
  background: var(--nav-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-color);
}

[data-theme="dark"] .nav a,
[data-theme="dark"] nav a {
  color: var(--text-primary);
}

[data-theme="dark"] .nav a:hover,
[data-theme="dark"] .nav a.active,
[data-theme="dark"] nav a:hover,
[data-theme="dark"] nav a.active {
  background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
  color: var(--white);
}

/* Cards and Containers */
[data-theme="dark"] .card,
[data-theme="dark"] .container,
[data-theme="dark"] .box,
[data-theme="dark"] .panel,
[data-theme="dark"] .content-box,
[data-theme="dark"] .workout-card,
[data-theme="dark"] .exercise-card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .achievement-card,
[data-theme="dark"] .friend-card,
[data-theme="dark"] .challenge-card {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  box-shadow: var(--card-shadow);
}

/* Buttons */
[data-theme="dark"] button,
[data-theme="dark"] .button,
[data-theme="dark"] .btn {
  background-color: var(--primary-color);
  color: var(--white);
  border: 1px solid var(--primary-color);
}

[data-theme="dark"] button:hover,
[data-theme="dark"] .button:hover,
[data-theme="dark"] .btn:hover {
  background-color: var(--primary-hover);
  transform: translateY(-2px);
}

[data-theme="dark"] .btn-secondary,
[data-theme="dark"] .button-secondary {
  background-color: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

[data-theme="dark"] .btn-secondary:hover,
[data-theme="dark"] .button-secondary:hover {
  background-color: var(--hover-bg);
  border-color: var(--border-light);
}

/* Forms and Inputs */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background-color: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--input-text);
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: var(--placeholder-color);
}

[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
  border-color: var(--input-focus-border);
  outline: none;
  box-shadow: 0 0 0 3px rgba(125, 127, 242, 0.1);
}

/* Tables */
[data-theme="dark"] table {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
}

[data-theme="dark"] th {
  background-color: var(--hover-bg);
  color: var(--text-primary);
  border-bottom: 2px solid var(--border-color);
}

[data-theme="dark"] td {
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
}

[data-theme="dark"] tr:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.02);
}

[data-theme="dark"] tr:hover {
  background-color: var(--hover-bg);
}

/* Modals and Overlays */
[data-theme="dark"] .modal,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .dialog {
  background-color: var(--modal-bg);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
}

[data-theme="dark"] .modal-backdrop,
[data-theme="dark"] .overlay {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Dropdowns */
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .dropdown-content {
  background-color: var(--dropdown-bg);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-lg);
}

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

/* Progress Bars */
[data-theme="dark"] .progress {
  background-color: var(--hover-bg);
}

[data-theme="dark"] .progress-bar {
  background-color: var(--primary-color);
}

/* Alerts and Notifications */
[data-theme="dark"] .alert-success,
[data-theme="dark"] .success-message {
  background-color: var(--success-bg);
  color: var(--success-text);
  border: 1px solid var(--success-text);
}

[data-theme="dark"] .alert-error,
[data-theme="dark"] .error-message {
  background-color: var(--error-bg);
  color: var(--error-text);
  border: 1px solid var(--error-text);
}

[data-theme="dark"] .alert-warning,
[data-theme="dark"] .warning-message {
  background-color: var(--warning-bg);
  color: var(--warning-text);
  border: 1px solid var(--warning-text);
}

/* Code Blocks */
[data-theme="dark"] code {
  background-color: var(--code-bg);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

[data-theme="dark"] pre {
  background-color: var(--pre-bg);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

/* Scrollbars (Webkit) */
[data-theme="dark"] ::-webkit-scrollbar {
  background-color: var(--scrollbar-bg);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-hover);
}

/* Links */
[data-theme="dark"] a {
  color: var(--primary-color);
}

[data-theme="dark"] a:hover {
  color: var(--primary-hover);
}

/* Images - Add slight opacity for better contrast */
[data-theme="dark"] img {
  opacity: 0.9;
}

[data-theme="dark"] img:hover {
  opacity: 1;
}

/* Logo - Keep full brightness */
[data-theme="dark"] .logo img,
[data-theme="dark"] .logo-img {
  opacity: 1;
  filter: brightness(1.1);
}

/* Charts - Update colors for Chart.js */
[data-theme="dark"] .chart-container {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
}

/* Loading Spinners */
[data-theme="dark"] .spinner,
[data-theme="dark"] .loader {
  border-color: var(--border-color);
  border-top-color: var(--primary-color);
}

/* Badges */
[data-theme="dark"] .badge {
  background-color: var(--hover-bg);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

[data-theme="dark"] .badge-primary {
  background-color: var(--primary-color);
  color: var(--white);
}

/* Tabs */
[data-theme="dark"] .tab,
[data-theme="dark"] .nav-tabs .nav-link {
  color: var(--text-secondary);
  border-bottom: 2px solid transparent;
}

[data-theme="dark"] .tab.active,
[data-theme="dark"] .nav-tabs .nav-link.active {
  color: var(--text-primary);
  border-bottom-color: var(--primary-color);
}

/* Footer */
[data-theme="dark"] footer,
[data-theme="dark"] .footer {
  background-color: var(--card-bg);
  border-top: 1px solid var(--border-color);
  color: var(--text-secondary);
}

/* Transitions for smooth theme switching */
body,
.site-header,
header,
nav,
.card,
.container,
.box,
.panel,
button,
.button,
.btn,
input,
textarea,
select,
table,
.modal,
.dropdown-menu,
.alert,
footer {
  transition: background-color 0.3s ease, 
              color 0.3s ease, 
              border-color 0.3s ease,
              box-shadow 0.3s ease;
}

/* Dark Mode Toggle Button Styles */
.dark-mode-toggle {
  position: fixed;
  bottom: 20px;
  left: 20px;
  background-color: var(--primary-color);
  color: white;
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  z-index: 10001;
  transition: all 0.3s ease;
}

.dark-mode-toggle:hover {
  transform: scale(1.1);
  box-shadow: var(--shadow-xl);
}

.dark-mode-toggle i {
  font-size: 1.5rem;
}

/* Mobile Responsive Dark Mode Toggle */
@media (max-width: 768px) {
  .dark-mode-toggle {
    bottom: 20px; /* Aligned with messaging button */
    left: 15px;
    width: 45px;
    height: 45px;
  }
  
  .dark-mode-toggle i {
    font-size: 1.25rem;
  }
}

/* Special Dark Mode Adjustments */
[data-theme="dark"] .logo-text,
[data-theme="dark"] .brand-text {
  background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Calendar specific dark mode */
[data-theme="dark"] .calendar-day {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
}

[data-theme="dark"] .calendar-day:hover {
  background-color: var(--hover-bg);
}

[data-theme="dark"] .calendar-day.active {
  background-color: var(--primary-color);
  color: white;
}

/* Workout specific elements */
[data-theme="dark"] .exercise-item {
  background-color: var(--hover-bg);
  border: 1px solid var(--border-color);
}

[data-theme="dark"] .set-row {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
}

/* Glass morphism effects for dark mode */
[data-theme="dark"] .glass {
  background: rgba(26, 31, 46, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border-color);
}
/* --- Dark Mode Fixes for Specific Pages --- */

/* Profile Page Fixes */
[data-theme="dark"] .profile-name,
[data-theme="dark"] .section-title {
  color: #ffffff !important;
}

[data-theme="dark"] .profile-username,
[data-theme="dark"] .stat-label,
[data-theme="dark"] .meta-item,
[data-theme="dark"] .form-hint {
  color: var(--text-secondary) !important;
}

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

[data-theme="dark"] .form-label,
[data-theme="dark"] .pref-label,
[data-theme="dark"] .checkbox-item label,
[data-theme="dark"] .checkbox-label span {
  color: #ffffff !important;
}

[data-theme="dark"] .form-value {
    color: #ffffff !important;
    background-color: var(--input-bg) !important;
    border-color: var(--border-color) !important;
}

/* Powerlifting Program Window Fixes */
[data-theme="dark"] .powerlifting-programs-list,
[data-theme="dark"] .powerlifting-create-form,
[data-theme="dark"] .experience-selection,
[data-theme="dark"] .program-card,
[data-theme="dark"] .powerlifting-container,
[data-theme="dark"] .day-cycle-info-section,
[data-theme="dark"] .workout-focus-section .workout-notes,
[data-theme="dark"] .workout-user-notes-section .workout-notes,
[data-theme="dark"] .strength-cycle-section .training-maxes,
[data-theme="dark"] .progress-section .progress-tracker,
[data-theme="dark"] .calendar-section .weekly-overview {
  background-color: var(--card-bg) !important;
  color: #ffffff !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .program-name,
[data-theme="dark"] .powerlifting-create-form h2,
[data-theme="dark"] .experience-selection h2,
[data-theme="dark"] .powerlifting-programs-list h2,
[data-theme="dark"] .powerlifting-header h2,
[data-theme="dark"] .powerlifting-header h2 span {
    color: #ffffff !important;
}

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

/* Dashboard Muscle Tracker Fixes */
[data-theme="dark"] .muscle-groups-section,
[data-theme="dark"] .muscle-tracker-content {
    background-color: transparent !important;
}

[data-theme="dark"] .muscle-bar-row .muscle-label {
    color: #ffffff !important;
}

[data-theme="dark"] .muscle-bar-row .muscle-count {
    color: #ffffff !important;
}

[data-theme="dark"] .muscle-bar-bg {
    background-color: var(--hover-bg) !important;
}

/* Coach's Corner (Science Fact / Motivation) Fixes */
[data-theme="dark"] .coach-corner-section .coach-card-content,
[data-theme="dark"] .coach-content-wrapper {
    background-color: var(--card-bg) !important;
    color: #ffffff !important;
    border-color: var(--border-color) !important;
}

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

[data-theme="dark"] .motivation-text,
[data-theme="dark"] .fact-text {
    color: #ffffff !important;
}

/* Workout Summary in Generate Page */
[data-theme="dark"] .exercise-overview {
    background-color: var(--card-bg) !important;
    color: #ffffff !important;
    border-color: var(--border-color) !important;
}

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

[data-theme="dark"] .exercise-overview-list li {
    background-color: var(--hover-bg) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .exercise-number {
    color: white !important; /* Keep white text on primary bg */
}

/* Add New Exercise Outline */
[data-theme="dark"] .add-exercise-form {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .add-exercise-form h3 {
    color: var(--primary-color) !important;
}

[data-theme="dark"] .add-exercise-form label {
    color: #ffffff !important;
}

/* Generate Workout Detailed View (Modal) */
[data-theme="dark"] .exercise-modal-container {
    background-color: var(--modal-bg) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .exercise-modal-header h2 {
    color: #ffffff !important;
}

/* Quick View Cards in Detailed View */
[data-theme="dark"] .quick-view-card {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .quick-view-card .qv-card-header h3 {
    color: #ffffff !important;
}

[data-theme="dark"] .qv-exercise-meta span {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .qv-set-row .col-set .set-badge {
    background-color: var(--hover-bg) !important;
    color: #ffffff !important;
}

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

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

/* Additional Profile Settings Fixes */
[data-theme="dark"] .profile-section {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

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

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

[data-theme="dark"] .danger-zone {
    background-color: rgba(239, 68, 68, 0.1) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
}

[data-theme="dark"] .danger-zone-header,
[data-theme="dark"] .danger-zone-text {
    color: #F87171 !important;
}

/* Fix for light page area in science/motivation if not covered */
[data-theme="dark"] .coach-corner-section {
    background-color: transparent !important;
}