/* Homework Solutions Styling */
/* Author: GitHub Copilot */
/* Purpose: Consistent styling for all math homework solution documents */

h3 {
  color: #2E86AB !important;
  font-weight: bold;
  border-left: 4px solid #2E86AB;
  padding-left: 10px;
  margin-top: 20px;
}

h3.solution-header {
  color: #A23B72 !important;
  font-weight: bold;
  font-size: 1.3em;
  border-left: 3px solid #A23B72;
  padding-left: 8px;
  margin-top: 15px;
  margin-bottom: 10px;
}

.video-solution {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white !important;
  padding: 12px 20px;
  border-radius: 8px;
  margin: 15px 0;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  transition: transform 0.3s ease;
}

.video-solution:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

.video-solution a {
  color: white !important;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.1em;
}

.video-solution::before {
  content: "🎥 ";
  font-size: 1.2em;
  margin-right: 8px;
}

/* Bonus Problem Styling */
h3.bonus-problem {
  color: #e66d21 !important;
  font-weight: bold;
  border-left: 4px solid #E74C3C;
  padding-left: 10px;
  margin-top: 20px;
}

h3.bonus-problem::before {
  content: "🎁 ";
  margin-right: 8px;
}

/* Dark Mode Toggle Button */
.dark-mode-toggle {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-size: 1.2em;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
  z-index: 1000;
}

.dark-mode-toggle:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

/* Light Mode (Default) */
:root {
  --bg-color: #ffffff;
  --text-color: #333333;
  --header-color: #2E86AB;
  --solution-header-color: #A23B72;
  --bonus-header-color: #e66d21;
  --bonus-border-color: #E74C3C;
  --code-bg: #f8f9fa;
  --border-color: #e9ecef;
  --callout-bg: #f8f9ff;
}

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

/* Dark Mode */
[data-theme="dark"] {
  --bg-color: #1a1a1a;
  --text-color: #e0e0e0;
  --header-color: #4dabf7;
  --solution-header-color: #f783ac;
  --bonus-header-color: #ffd43b;
  --bonus-border-color: #ff6b6b;
  --code-bg: #2d2d2d;
  --border-color: #404040;
  --callout-bg: #2d2d2d;
}

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

/* Update existing styles to use CSS variables */
h3 {
  color: var(--header-color) !important;
  border-left-color: var(--header-color);
}

h3.solution-header {
  color: var(--solution-header-color) !important;
  border-left-color: var(--solution-header-color);
}

h3.bonus-problem {
  color: var(--bonus-header-color) !important;
  border-left-color: var(--bonus-border-color);
}

/* Dark mode adjustments for code blocks and callouts */
[data-theme="dark"] pre,
[data-theme="dark"] code {
  background-color: var(--code-bg) !important;
  color: var(--text-color) !important;
}

[data-theme="dark"] .callout-note {
  background-color: var(--callout-bg) !important;
  border-left-color: var(--header-color) !important;
}

[data-theme="dark"] .panel-tabset .nav-tabs .nav-link {
  color: var(--text-color) !important;
  background-color: var(--code-bg) !important;
}

[data-theme="dark"] .panel-tabset .nav-tabs .nav-link.active {
  background-color: var(--bg-color) !important;
  border-color: var(--border-color) !important;
}

/* Dark mode for tables */
[data-theme="dark"] table {
  background-color: var(--bg-color) !important;
  color: var(--text-color) !important;
}

[data-theme="dark"] th {
  background-color: var(--code-bg) !important;
  border-color: var(--border-color) !important;
}

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

/* 
  Dark Mode Toggle JavaScript - Include this script in your HTML:
  
  <script>
  // Dark mode functionality
  function toggleDarkMode() {
    const html = document.documentElement;
    const themeIcon = document.getElementById('theme-icon');
    
    if (html.getAttribute('data-theme') === 'dark') {
      html.removeAttribute('data-theme');
      themeIcon.textContent = '🌙';
      localStorage.setItem('theme', 'light');
    } else {
      html.setAttribute('data-theme', 'dark');
      themeIcon.textContent = '☀️';
      localStorage.setItem('theme', 'dark');
    }
  }

  // Load saved theme on page load
  document.addEventListener('DOMContentLoaded', function() {
    const savedTheme = localStorage.getItem('theme');
    const themeIcon = document.getElementById('theme-icon');
    
    if (savedTheme === 'dark') {
      document.documentElement.setAttribute('data-theme', 'dark');
      themeIcon.textContent = '☀️';
    } else {
      themeIcon.textContent = '🌙';
    }
  });
  </script>
  
  And include this button:
  <button class="dark-mode-toggle" onclick="toggleDarkMode()" title="Toggle Dark Mode">
    <span id="theme-icon">🌙</span>
  </button>
*/