/*
  Sudoku Solver - Dark Mode Purple Theme
  © 2025 Miloš Sarić. All rights reserved.
*/

.dark-mode {
  --bg-primary: #0f0a1f;
  --bg-secondary: #1a1229;
  --text-primary: #f3f0ff;
  --text-secondary: #b4a5d6;
  --border-color: #2d2344;
  --input-bg: #1a1229;
  --input-border: #3d2f5c;
  --input-focus: #a78bfa;
  --button-primary: #a78bfa;
  --button-hover: #8b5cf6;
  --button-success: #10b981;
  --button-warning: #f59e0b;
  --button-danger: #ef4444;
  --button-info: #c4b5fd;
  --button-disabled: #3d2f5c;
  --shadow-sm: 0 2px 12px rgba(167, 139, 250, 0.15);
  --shadow-md: 0 4px 20px rgba(167, 139, 250, 0.2);
  --shadow-lg: 0 8px 40px rgba(167, 139, 250, 0.25);
  --clue-bg: #2d1b4e;
  --clue-text: #f3f0ff;
  --cell-highlight: #78350f;
  --cell-selected: #3730a3;
  --purple-glow: 0 0 40px rgba(167, 139, 250, 0.25);
}

/* Background */
.dark-mode html,
.dark-mode body {
  background: linear-gradient(180deg, #0a0616, #1a1229);
}

/* Page Header */
.dark-mode .page-header h1 {
  background: linear-gradient(135deg, #a78bfa 0%, #c4b5fd 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 2px 12px rgba(167, 139, 250, 0.4));
}

.dark-mode .page-subtitle {
  color: var(--text-secondary);
}

/* Panels */
.dark-mode .controls-panel,
.dark-mode .info-panel {
  background: var(--input-bg);
  border-color: var(--border-color);
  box-shadow: var(--shadow-md);
}

.dark-mode .controls-panel:hover,
.dark-mode .info-panel:hover {
  box-shadow: var(--shadow-lg), var(--purple-glow);
  border-color: rgba(167, 139, 250, 0.5);
}

.dark-mode .panel-section h3 {
  color: var(--button-primary);
}

.dark-mode .panel-section h3 svg {
  color: var(--button-primary);
}

/* Buttons */
.dark-mode .btn-primary {
  background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);
  box-shadow: 0 4px 12px rgba(167, 139, 250, 0.4);
}

.dark-mode .btn-primary:hover {
  box-shadow: 0 6px 20px rgba(167, 139, 250, 0.5);
}

.dark-mode .btn-secondary {
  background: var(--input-bg);
  color: var(--text-primary);
  border-color: var(--border-color);
}

.dark-mode .btn-secondary:hover {
  border-color: var(--button-primary);
  color: var(--button-primary);
}

.dark-mode .btn-success {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.dark-mode .btn-success:hover {
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5);
}

.dark-mode .btn-warning {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}

.dark-mode .btn-warning:hover {
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.5);
}

.dark-mode .btn-danger {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

.dark-mode .btn-danger:hover {
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.5);
}

.dark-mode .btn-info {
  background: linear-gradient(135deg, #c4b5fd 0%, #a78bfa 100%);
  box-shadow: 0 4px 12px rgba(196, 181, 253, 0.4);
}

.dark-mode .btn-info:hover {
  box-shadow: 0 6px 20px rgba(196, 181, 253, 0.5);
}

.dark-mode button:disabled,
.dark-mode button.disabled {
  background: var(--button-disabled);
  color: #6b5b95;
}

/* Form Elements */
.dark-mode .form-group label {
  color: var(--text-primary);
}

.dark-mode .form-group label svg {
  color: var(--button-primary);
}

.dark-mode .form-group select {
  background: var(--input-bg);
  border-color: var(--input-border);
  color: var(--text-primary);
}

.dark-mode .form-group select:focus {
  border-color: var(--input-focus);
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.2);
}

/* Difficulty Buttons */
.dark-mode .difficulty-btn {
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border-color: var(--border-color);
}

.dark-mode .difficulty-btn::before {
  background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);
}

.dark-mode .difficulty-btn:hover {
  border-color: var(--button-primary);
  color: var(--button-primary);
}

.dark-mode .difficulty-btn.active {
  background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(167, 139, 250, 0.4);
}

.dark-mode .difficulty-btn.active:hover {
  box-shadow: 0 6px 20px rgba(167, 139, 250, 0.5);
}

/* Sudoku Grid */
.dark-mode .sudoku-grid-wrapper {
  background: var(--input-bg);
  border-color: var(--border-color);
  box-shadow: var(--shadow-lg);
}

.dark-mode .sudoku-grid-wrapper:hover {
  box-shadow: var(--shadow-lg), var(--purple-glow);
}

.dark-mode .sudoku-grid {
  background: var(--bg-secondary);
  border-color: var(--button-primary);
}

.dark-mode .sudoku-grid td {
  background: var(--input-bg);
  border-color: var(--border-color);
}

.dark-mode .sudoku-grid tr td:nth-child(3n) {
  border-right-color: var(--button-primary);
}

.dark-mode .sudoku-grid tr:nth-child(3n) td {
  border-bottom-color: var(--button-primary);
}

.dark-mode .sudoku-grid tr td:nth-child(1) {
  border-left-color: var(--button-primary);
}

.dark-mode .sudoku-grid tr:nth-child(1) td {
  border-top-color: var(--button-primary);
}

.dark-mode .cell {
  color: var(--text-primary);
}

.dark-mode .cell:focus {
  background: var(--cell-selected);
  box-shadow: inset 0 0 0 2px var(--button-primary);
}

.dark-mode .cell.clue {
  background: var(--clue-bg);
  color: var(--clue-text);
}

/* History Container */
.dark-mode .history-container {
  background: var(--bg-secondary);
  border-color: var(--border-color);
}

.dark-mode .history-container::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

.dark-mode .history-container::-webkit-scrollbar-thumb {
  background: var(--border-color);
}

.dark-mode .history-container::-webkit-scrollbar-thumb:hover {
  background: var(--button-primary);
}

.dark-mode #history-list li {
  color: var(--text-secondary);
  border-bottom-color: rgba(167, 139, 250, 0.15);
}

.dark-mode .history-empty {
  color: var(--text-secondary);
}

/* Analysis Container */
.dark-mode .analysis-container {
  background: var(--bg-secondary);
  border-color: var(--border-color);
  color: var(--text-primary);
}

.dark-mode .analysis-placeholder {
  color: var(--text-secondary);
}

/* Credit Section */
.dark-mode .credit-section {
  border-top-color: var(--border-color);
}

.dark-mode .credit-section p {
  color: var(--text-secondary);
}

.dark-mode .credit-section strong {
  background: linear-gradient(135deg, #a78bfa 0%, #c4b5fd 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Success Overlay */
.dark-mode .success-overlay {
  background: rgba(0, 0, 0, 0.9);
}

.dark-mode .success-content {
  background: var(--input-bg);
  border-color: var(--button-success);
  box-shadow: var(--shadow-lg), 0 0 80px rgba(16, 185, 129, 0.5);
}

.dark-mode .success-content h2 {
  color: var(--text-primary);
}

.dark-mode .success-content p {
  color: var(--text-secondary);
}

/* Server Wake-Up Overlay */
.dark-mode .server-wakeup-overlay {
  background: rgba(0, 0, 0, 0.9);
}

.dark-mode .wakeup-content {
  background: var(--input-bg);
  border-color: var(--border-color);
  box-shadow: var(--shadow-lg), var(--purple-glow);
}

.dark-mode .wakeup-content::before {
  background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);
}

.dark-mode .wakeup-content h3 {
  color: var(--text-primary);
}

.dark-mode .wakeup-content p {
  color: var(--text-secondary);
}

.dark-mode .wakeup-progress {
  background: var(--bg-secondary);
}

.dark-mode .wakeup-progress-bar {
  background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);
}

.dark-mode .wakeup-timer span {
  color: var(--button-primary);
}

.dark-mode .wakeup-icon {
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.2) 0%, rgba(167, 139, 250, 0.05) 100%);
}

.dark-mode .wakeup-icon::before {
  background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);
}

.dark-mode .wakeup-icon svg {
  color: var(--button-primary);
}