/**
 * Dark Theme for SciHigh Lite LMS
 * 
 * Features:
 * - CSS custom properties for easy theme switching
 * - WCAG AA compliant contrast ratios
 * - Smooth 0.15s transitions
 * - Performance optimized with will-change
 * - Ace Editor dark mode support
 * - CodeMirror and SimpleMDE exempted (remain in light mode)
 */

/* Light mode (default) - no class on body */
:root {
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-tertiary: #e9ecef;
  --text-primary: #212529;
  --text-secondary: #6c757d;
  --border-color: #dee2e6;
  --card-bg: #ffffff;
  --input-bg: #ffffff;
  --table-bg: #ffffff;
  --table-hover: #f8f9fa;
  --link-color: #0d6efd;
  --link-hover-color: #0a58ca;
}

/* Dark mode - .dark-mode class on body */
body.dark-mode {
  --bg-primary: #1e1e1e;
  --bg-secondary: #2d2d2d;
  --bg-tertiary: #404040;
  --text-primary: #ffffff;
  --text-secondary: #d1d5db;
  --border-color: #495057;
  --card-bg: #2d2d2d;
  --input-bg: #1e1e1e;
  --table-bg: #2d2d2d;
  --table-hover: #404040;
  --link-color: #60a5fa;
  --link-hover-color: #93c5fd;
}

/* Body and containers */
body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color 0.15s ease, color 0.15s ease;
  will-change: background-color, color;
}

.container, .card, .modal-content {
  background-color: var(--card-bg);
  border-color: var(--border-color);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* Navbar adjustments for dark mode */
body.dark-mode .navbar {
  background-color: #1a1a1a !important;
  border-bottom: 1px solid #2d2d2d;
}

body.dark-mode .navbar-brand {
  color: var(--text-primary) !important;
}

body.dark-mode .nav-link {
  color: #e2e8f0;
}

body.dark-mode .nav-link:hover,
body.dark-mode .nav-link.active {
  color: var(--text-primary) !important;
}

body.dark-mode .dropdown-menu {
  background-color: var(--card-bg);
  border-color: var(--border-color);
}

body.dark-mode .dropdown-item {
  color: var(--text-primary);
}

body.dark-mode .dropdown-item:hover {
  background-color: var(--bg-tertiary);
}

/* Text elements */
.text-muted { color: var(--text-secondary) !important; }
.text-primary { color: #0d6efd !important; }
.text-success { color: #198754 !important; }
.text-warning { color: #ffc107 !important; }
.text-danger { color: #dc3545 !important; }
.text-info { color: #0dcaf0 !important; }

/* Links */
a {
  color: var(--link-color);
  transition: color 0.15s ease;
}

a:hover {
  color: var(--link-hover-color);
}

/* Form elements */
.form-control, .form-select, .form-check-input {
  background-color: var(--input-bg);
  border-color: var(--border-color);
  color: var(--text-primary);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.form-control:focus, .form-select:focus {
  background-color: var(--input-bg);
  border-color: var(--link-color);
  color: var(--text-primary);
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.form-label {
  color: var(--text-primary);
}

/* Buttons */
.btn {
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Tables */
.table {
  background-color: var(--table-bg);
  color: var(--text-primary);
  border-color: var(--border-color);
}

.table-hover tbody tr:hover {
  background-color: var(--table-hover);
}

.table th {
  background-color: var(--bg-secondary);
  border-color: var(--border-color);
  color: var(--text-primary);
}

.table td {
  border-color: var(--border-color);
}

/* Cards */
.card {
  border-color: var(--border-color);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.card-header {
  background-color: var(--bg-secondary);
  border-color: var(--border-color);
  color: var(--text-primary);
}

.card-body {
  background-color: var(--card-bg);
  color: var(--text-primary);
}

.card-footer {
  background-color: var(--bg-secondary);
  border-color: var(--border-color);
  color: var(--text-primary);
}

/* Alerts */
.alert {
  background-color: var(--bg-secondary);
  border-color: var(--border-color);
  color: var(--text-primary);
}

.alert-primary {
  background-color: rgba(13, 110, 253, 0.15);
  border-color: #0d6efd;
  color: #90cdf9;
}

.alert-success {
  background-color: rgba(25, 135, 84, 0.15);
  border-color: #198754;
  color: #86efac;
}

.alert-warning {
  background-color: rgba(255, 193, 7, 0.15);
  border-color: #ffc107;
  color: #ffe082;
}

.alert-danger {
  background-color: rgba(220, 53, 69, 0.15);
  border-color: #dc3545;
  color: #fca5a5;
}

.alert-info {
  background-color: rgba(13, 202, 240, 0.15);
  border-color: #0dcaf0;
  color: #a5f3fc;
}

/* Badges */
.badge {
  color: #fff; /* Always white text for badges */
}

/* Override Bootstrap text-dark class in dark mode */
body.dark-mode .text-dark {
  color: var(--text-primary) !important;
}

/* Accordion styling for dark mode */
body.dark-mode .accordion-button {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  border-color: var(--border-color);
}

body.dark-mode .accordion-button:hover {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
}

body.dark-mode .accordion-button.collapsed {
  color: var(--text-primary);
}

body.dark-mode .accordion-button:not(.collapsed) {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
}

/* Code activity console output - ensure visibility in dark mode */
body.dark-mode pre#consoleOutput,
body.dark-mode .console-output {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color);
}

/* Ensure text-muted is readable in dark mode for console output */
body.dark-mode .text-muted {
  color: #9ca3af !important;
}

/* Light mode warning text contrast fix - Bootstrap warning is yellow on white which is hard to read */
.alert-warning {
  color: #664d03; /* Darken text for better contrast on light bg */
  background-color: #fff3cd;
  border-color: #ffecb5;
}

body.dark-mode .alert-warning {
  color: #ffe082;
  background-color: rgba(255, 193, 7, 0.15);
  border-color: #ffc107;
}

/* Console output pre element styling for code activities */
body.dark-mode #consoleOutput,
body.dark-mode .card-body pre {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color);
}

/* Override bg-light class in dark mode for code activity console */
body.dark-mode .bg-light {
  background-color: var(--bg-tertiary) !important;
}

body.dark-mode .accordion-body {
  background-color: var(--card-bg);
  color: var(--text-primary);
}

body.dark-mode .list-group-item {
  background-color: var(--card-bg);
  border-color: var(--border-color);
  color: var(--text-primary);
}

body.dark-mode .list-group-item:hover {
  background-color: var(--bg-tertiary);
}

/* Modals */
.modal-content {
  background-color: var(--card-bg);
  border-color: var(--border-color);
  color: var(--text-primary);
}

.modal-header {
  background-color: var(--bg-secondary);
  border-color: var(--border-color);
  color: var(--text-primary);
}

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

.modal-footer {
  background-color: var(--bg-secondary);
  border-color: var(--border-color);
  color: var(--text-primary);
}

/* Code blocks */
pre, code {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  border-radius: 4px;
  padding: 0.2em 0.4em;
}

pre {
  padding: 1em;
  overflow-x: auto;
}

/* Blockquotes */
blockquote {
  border-left-color: var(--border-color);
  color: var(--text-secondary);
}

/* Lists */
.list-group {
  background-color: var(--card-bg);
  border-color: var(--border-color);
}

.list-group-item {
  background-color: var(--card-bg);
  border-color: var(--border-color);
  color: var(--text-primary);
}

.list-group-item:hover {
  background-color: var(--bg-secondary);
}

/* Pagination */
.page-link {
  background-color: var(--card-bg);
  border-color: var(--border-color);
  color: var(--text-primary);
}

.page-link:hover {
  background-color: var(--bg-secondary);
  border-color: var(--border-color);
  color: var(--text-primary);
}

.page-item.active .page-link {
  background-color: var(--link-color);
  border-color: var(--link-color);
  color: #fff;
}

/* Input groups */
.input-group-text {
  background-color: var(--bg-secondary);
  border-color: var(--border-color);
  color: var(--text-primary);
}

/* Theme toggle button animation */
#themeToggle {
  transition: transform 0.3s ease;
}

#themeToggle:hover {
  transform: rotate(180deg) scale(1.1);
}

#themeIcon {
  transition: transform 0.3s ease;
}

/* Note: CodeMirror and SimpleMDE are exempted from dark theme */
/* They remain in light mode for simplicity and maintainability */