/* Ensure admin-nav is transparent in dark mode */
[data-theme="dark"] .admin-nav {
  background: transparent !important;
}
/* =============== Dark Mode Theme =============== */
/* This file provides dark mode color overrides for all pages */

:root {
  /* Light mode (default) - Sunnyside colors */
  --sunbeam: #F4EA18;
  --sky: #4198D3;
  --sunset: #FAAC1A;
  --ink: #000;
  --gray: #6D6E70;
  --cloud: #E6E7E8;
  --white: #fff;
  
  /* Semantic colors that change based on theme */
  --bg-primary: #fff;
  --bg-secondary: #f8fafc;
  --bg-card: #fff;
  --text-primary: #111;
  --text-secondary: #555;
  --border-color: #eee;
  --border-color-dark: #ddd;
  --shadow-color: rgba(0, 0, 0, 0.05);
  --shadow-color-medium: rgba(0, 0, 0, 0.08);
  --shadow-color-strong: rgba(0, 0, 0, 0.1);
}

/* Dark Mode Theme */
[data-theme="dark"] {
  --sunbeam: #F4EA18;
  --sky: #5AADDE;
  --sunset: #FAAC1A;
  --ink: #fff;
  --gray: #9CA3AF;
  --cloud: #374151;
  --white: #1F2937;
  --bg-primary: #111827;
  --bg-secondary: #1F2937;
  --bg-card: #1F2937;
  --text-primary: #F9FAFB;
  --text-secondary: #D1D5DB;
  --border-color: #374151;
  --border-color-dark: #4B5563;
  --shadow-color: rgba(0, 0, 0, 0.3);
  --shadow-color-medium: rgba(0, 0, 0, 0.4);
  --shadow-color-strong: rgba(0, 0, 0, 0.5);
}

/* Dark mode smooth transitions */
[data-theme="dark"] body,
[data-theme="dark"] .card,
[data-theme="dark"] .modal-content,
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea,
[data-theme="dark"] button,
[data-theme="dark"] .topbar,
[data-theme="dark"] .container {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Dark Mode Toggle Button */
.theme-toggle {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sunset), var(--sunbeam));
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 12px var(--shadow-color-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.theme-toggle:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 16px var(--shadow-color-strong);
}

.theme-toggle:active {
  transform: scale(0.95);
}

.theme-toggle-icon {
  font-size: 24px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .theme-toggle {
    width: 48px;
    height: 48px;
    bottom: 16px;
    right: 16px;
  }
  
  .theme-toggle-icon {
    font-size: 20px;
  }
}

/* Dark mode body override */
[data-theme="dark"] body {
  background: linear-gradient(180deg, var(--bg-primary), var(--bg-secondary));
  color: var(--text-primary);
}

/* Dark mode card styles */
[data-theme="dark"] .card {
  background: var(--bg-card);
  border-color: var(--border-color);
  box-shadow: 0 6px 24px var(--shadow-color);
}

/* Dark mode topbar */
[data-theme="dark"] .topbar {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-color);
}

/* Dark mode inputs */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: var(--bg-primary);
  border-color: var(--border-color);
  color: var(--text-primary);
}

[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
  border-color: var(--sky);
  background: var(--bg-secondary);
}

/* Accessibility: subtle white outline for inputs in dark mode */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  /* slightly brighter border for contrast */
  border-color: rgba(255,255,255,0.08) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
}

[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
  outline: 2px solid rgba(255,255,255,0.12);
  box-shadow: 0 0 0 3px rgba(65,152,211,0.12); /* subtle sky-colored focus ring */
}

/* Dark mode tables */
[data-theme="dark"] table {
}

[data-theme="dark"] th {
  background: var(--surface);
  color: var(--text);
}

[data-theme="dark"] td {
  background: var(--bg-card);
  color: var(--text-primary);
}

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

/* Dark mode modals */
[data-theme="dark"] .modal {
  background: rgba(0, 0, 0, 0.8);
}

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

/* Dark mode buttons - preserve brand colors but adjust contrast */
[data-theme="dark"] button:not(.theme-toggle) {
  filter: brightness(1.1);
}

/* Dark mode status text */
[data-theme="dark"] .status {
  color: var(--text-secondary);
}

/* Dark mode accordion */
[data-theme="dark"] .accordion-section,
[data-theme="dark"] .club-accordion {
  border-color: var(--border-color);
  background: var(--bg-card);
}

[data-theme="dark"] .club-accordion-header {
  background: linear-gradient(135deg, var(--sunset), var(--sunbeam));
  color: var(--ink);
}

[data-theme="dark"] .accordion-header {
  background: linear-gradient(135deg, var(--sunset), var(--sunbeam));
  color: var(--ink);
}

/* Dark mode for specific elements */
[data-theme="dark"] .balance {
  background: var(--cloud);
  color: var(--text-primary);
}

[data-theme="dark"] .club-card {
  background: var(--bg-secondary);
  border-color: var(--border-color-dark);
}

/* Dark mode for workplan edit history */
[data-theme="dark"] .card.edit-history h2 {
  color: var(--white);
}

/* =============== Coach.html Specific Dark Mode Overrides =============== */
/* 🌙 Fix text visibility in dark mode for coach dashboard */
body.coach-page[data-theme="dark"] {
  color: #EAEAEA; /* default text color for body */
}

body.coach-page[data-theme="dark"] h1,
body.coach-page[data-theme="dark"] h2,
body.coach-page[data-theme="dark"] h3,
body.coach-page[data-theme="dark"] h4,
body.coach-page[data-theme="dark"] h5,
body.coach-page[data-theme="dark"] h6,
body.coach-page[data-theme="dark"] p,
body.coach-page[data-theme="dark"] label,
body.coach-page[data-theme="dark"] span,
body.coach-page[data-theme="dark"] th,
body.coach-page[data-theme="dark"] td {
  color: #F5F5F5 !important;
}

/* Cards and containers for coach page */
body.coach-page[data-theme="dark"] .card,
body.coach-page[data-theme="dark"] .container,
body.coach-page[data-theme="dark"] .dashboard-section {
  background-color: #1e2733 !important;
  border-color: #2d3a4a !important;
}

/* Toolbars, tabs, and buttons for coach page */
body.coach-page[data-theme="dark"] .tab,
body.coach-page[data-theme="dark"] .tab button,
body.coach-page[data-theme="dark"] .btn,
body.coach-page[data-theme="dark"] .tools button {
  color: #fff !important;
}

/* Table header fix for coach page */
body.coach-page[data-theme="dark"] thead th {
  background-color: #2c3643 !important;
  color: #fafafa !important;
}

/* Soft separator lines for coach page */
body.coach-page[data-theme="dark"] hr,
body.coach-page[data-theme="dark"] .divider {
  border-color: #3a4b5e !important;
}

body.coach-page[data-theme="dark"] .card {
  box-shadow: 0 4px 12px rgba(0,0,0,0.6);
}

/* --- Fix stubborn dark headings for coach page --- */
body.coach-page[data-theme="dark"] h1,
body.coach-page[data-theme="dark"] h2,
body.coach-page[data-theme="dark"] h3,
body.coach-page[data-theme="dark"] h4,
body.coach-page[data-theme="dark"] h5,
body.coach-page[data-theme="dark"] h6 {
  color: #f8f9fa !important; /* light gray-white */
}

/* Override card h2 color from coach.css */
body.coach-page[data-theme="dark"] .card h2,
body.coach-page[data-theme="dark"] .dashboard-section h2,
body.coach-page[data-theme="dark"] .container h2,
body.coach-page[data-theme="dark"] .content h2,
body.coach-page[data-theme="dark"] .coach-tools h2,
body.coach-page[data-theme="dark"] .facilitator-section h2,
body.coach-page[data-theme="dark"] .workplans-summary h2,
body.coach-page[data-theme="dark"] .modal-content h2 {
  color: #f8f9fa !important;
}

/* Tab button active state - dark navy instead of yellow */
body.coach-page[data-theme="dark"] .tab-btn.active {
  background: #1e3a5f !important; /* dark navy blue */
  color: #fff !important;
}

body.coach-page[data-theme="dark"] .tab-btn {
  background: #2d3a4a !important;
  color: #f5f5f5 !important;
}

/* Print mode - always use light theme */
@media print {
  [data-theme="dark"] body,
  [data-theme="dark"] .card,
  [data-theme="dark"] .topbar {
    background: white !important;
    color: black !important;
  }
  
  .theme-toggle {
    display: none !important;
  }
}