/*
 * Theme CSS Variables
 * ===================
 *
 * This file defines CSS custom properties for both light and dark themes.
 * The theme is switched using the `data-bs-theme` attribute (Bootstrap 5.3+).
 *
 * Variable Naming Convention:
 * --category-purpose-modifier
 *
 * Categories:
 * - color: Generic colors (primary, secondary, success, etc.)
 * - bg: Background colors
 * - text: Text colors
 * - border: Border colors
 * - shadow: Shadow definitions
 * - status: Status indicator colors
 * - component: Component-specific colors
 *
 * Light theme variables are defined in :root
 * Dark theme overrides are in [data-bs-theme="dark"]
 */

:root {
  /* Light Theme (Default) */

  /* Primary Colors */
  --primary-color: #4361ee;
  --primary-dark: #3a56d4;
  --primary-light: #eef2ff;

  /* Secondary Colors */
  --secondary-color: #6c757d;
  --secondary-dark: #495057;
  --secondary-light: #adb5bd;

  /* Status Colors */
  --success-color: #28a745;
  --success-dark: #198754;
  --danger-color: #dc3545;
  --danger-dark: #c82333;
  --warning-color: #ffc107;
  --warning-dark: #e0a800;
  --info-color: #17a2b8;

  /* Background Colors */
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-tertiary: #f5f7fb;
  --bg-surface: #ffffff;
  --bg-surface-alt: #f8f9fa;
  --bg-surface-inverse: #212529; /* For dark backgrounds in light theme */

  /* Text Colors */
  --text-primary: #212529;
  --text-secondary: #6c757d;
  --text-muted: #adb5bd;
  --text-on-light: #212529;
  --text-on-dark: #ffffff;

  /* Border Colors */
  --border-color: #dee2e6;
  --border-light: #e9ecef;
  --border-dark: #ced4da;

  /* Shadow Colors */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.16);
  --shadow-upload: 0 0.25rem 1.5rem rgba(80, 80, 135, 0.09);

  /* Status Indicator Colors */
  --status-draft: #6c757d;
  --status-moderation: #ffc107;
  --status-published: #28a745;
  --status-processing: #0d6efd;
  --status-error: #dc3545;

  /* Component Specific */
  --toast-success: #28a745;
  --toast-error: #dc3545;
  --game-error: #e25368;
  --game-success: #228752;
  --game-wrong: #d12a47;
  --game-correct-word: #6173dc;
  --game-correct-bg: #d4edda;
  --game-wrong-bg: #f8d7da;
  --game-current-shadow: rgba(13, 110, 253, 0.3);

  /* Additional UI Colors */
  --active-bg: #e3f2fd;
  --primary-900: #0d47a1; /* Darker shade for special cases */
  --message-sent-bg: #1976d2;
  --message-received-bg: #f1f3f4;
  --input-border: #dadce0;
  --primary-focus-shadow: rgba(67, 97, 238, 0.25);
  --overlay-bg: rgba(0, 0, 0, 0.5);
  --primary-light-bg: rgba(67, 97, 238, 0.08);
  --fade-overlay-gradient: rgba(255, 255, 255, 0.9);
  --params-card-bg: #f6f9fc;

  /* Alert Colors */
  --alert-warning-bg: #fff3cd;
  --alert-warning-border: #ffecb5;
  --alert-warning-text: #664d03;
  --alert-info-bg: #e7f1ff;
  --alert-info-border: #cfe2ff;
  --alert-info-text: #084298;

  /* Status Badge Colors */
  --status-available-bg: #d4edda;
  --status-available-text: #155724;
  --status-taken-bg: #f8d7da;
  --status-taken-text: #721c24;
  --status-checking-bg: #fff3cd;
  --status-checking-text: #856404;

  /* Light Background Colors for Status Changes */
  --success-light-bg: rgba(40, 167, 69, 0.1);
  --danger-light-bg: rgba(220, 53, 69, 0.1);
  --neutral-light-bg: rgba(108, 117, 125, 0.1);

  /* Status Badge Backgrounds (for scans.css) */
  --status-waiting-bg: rgba(255, 193, 7, 0.2);
  --status-finished-bg: rgba(25, 135, 84, 0.2);
  --status-error-bg: rgba(220, 53, 69, 0.2);
  --status-processing-bg: rgba(13, 110, 253, 0.2);

  /* Loading Overlay */
  --loading-overlay-bg: rgba(255, 255, 255, 0.8);

  /* Reader Colors */
  --reader-bg: #000000;
  --reader-text: #ffffff;
}

[data-bs-theme="dark"] {
  /* Dark Theme Overrides */

  /* Primary Colors */
  --primary-color: #4299e1;  /* Darker blue for better dark theme contrast */
  --primary-dark: #3182ce;   /* Even darker for hover states */
  --primary-light: #2d3748;

  /* Secondary Colors */
  --secondary-color: #a0aec0;
  --secondary-dark: #718096;
  --secondary-light: #cbd5e0;

  /* Status Colors */
  --success-color: #68d391;
  --success-dark: #48bb78;
  --danger-color: #fc8181;
  --danger-dark: #f56565;
  --warning-color: #f6ad55;
  --warning-dark: #ed8936;
  --info-color: #76e4f7;
  --info-dark: #63b3ed;

  /* Background Colors */
  --bg-primary: #121212;
  --bg-secondary: #1e1e1e;
  --bg-tertiary: #2a2a2a;
  --bg-surface: #1e1e1e;
  --bg-surface-alt: #2a2a2a;
  --bg-surface-inverse: #f8f9fa; /* For light backgrounds in dark theme */

  /* Text Colors */
  --text-primary: #e0e0e0;
  --text-secondary: #a0aec0;
  --text-muted: #718096;
  --text-on-light: #121212;
  --text-on-dark: #ffffff;

  /* Border Colors */
  --border-color: #333;
  --border-light: #444;
  --border-dark: #555;

  /* Shadow Colors */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.5);
  --shadow-upload: 0 0.25rem 1.5rem rgba(80, 80, 135, 0.2);

  /* Status Indicator Colors */
  --status-draft: #adb5bd;
  --status-moderation: #ffca2c;
  --status-published: #75b798;
  --status-processing: #63b3ed;
  --status-error: #fc8181;

  /* Component Specific */
  --toast-success: #68d391;
  --toast-error: #fc8181;
  --game-error: #feb2b2;
  --game-success: #9ae6b4;
  --game-wrong: #fed7d7;
  --game-correct-word: #90cdf4;
  --game-correct-bg: #0d331a;
  --game-wrong-bg: #33151a;
  --game-current-shadow: rgba(99, 179, 237, 0.3);

  /* Additional UI Colors */
  --active-bg: #1e3a5f;
  --primary-900: #1e40af; /* Darker shade for special cases */
  --message-sent-bg: #2d3748;
  --message-received-bg: #4a5568;
  --input-border: #4a5568;
  --primary-focus-shadow: rgba(99, 179, 237, 0.25);
  --overlay-bg: rgba(0, 0, 0, 0.5);
  --primary-light-bg: rgba(99, 179, 237, 0.08);
  --fade-overlay-gradient: rgba(0, 0, 0, 0.9);
  --params-card-bg: #2a2a2a;

  /* Alert Colors */
  --alert-warning-bg: #332701;
  --alert-warning-border: #665004;
  --alert-warning-text: #ffecb5;
  --alert-info-bg: #0c2a4d;
  --alert-info-border: #1a4d8c;
  --alert-info-text: #cfe2ff;

  /* Status Badge Colors */
  --status-available-bg: #0d331a;
  --status-available-text: #9ae6b4;
  --status-taken-bg: #33151a;
  --status-taken-text: #feb2b2;
  --status-checking-bg: #332701;
  --status-checking-text: #f6ad55;

  /* Light Background Colors for Status Changes (Dark Theme) */
  --success-light-bg: rgba(104, 211, 145, 0.1);
  --danger-light-bg: rgba(252, 129, 129, 0.1);
  --neutral-light-bg: rgba(160, 174, 192, 0.1);

  /* Status Badge Backgrounds (for scans.css) */
  --status-waiting-bg: rgba(246, 173, 85, 0.2);
  --status-finished-bg: rgba(104, 211, 145, 0.2);
  --status-error-bg: rgba(252, 129, 129, 0.2);
  --status-processing-bg: rgba(99, 179, 237, 0.2);

  /* Loading Overlay */
  --loading-overlay-bg: rgba(0, 0, 0, 0.8);

  /* Reader Colors */
  --reader-bg: #000000;
  --reader-text: #ffffff;
}

/* Toast notification classes */
.toast-success {
  background-color: var(--toast-success) !important;
}

.toast-error {
  background-color: var(--toast-error) !important;
}

/* Status indicator classes */
.status-indicator.status-draft {
  color: var(--status-draft);
}

.status-indicator.status-moderation {
  color: var(--status-moderation);
}

.status-indicator.status-published {
  color: var(--status-published);
}

/* Theme-aware Bootstrap overrides */
[data-bs-theme="light"] .bg-light {
  background-color: var(--bg-surface) !important;
}

[data-bs-theme="dark"] .bg-light {
  background-color: var(--bg-surface) !important;
}

[data-bs-theme="light"] .bg-white {
  background-color: var(--bg-surface) !important;
}

[data-bs-theme="dark"] .bg-white {
  background-color: var(--bg-surface) !important;
}

[data-bs-theme="light"] .bg-dark {
  background-color: var(--bg-surface-inverse) !important;
}

[data-bs-theme="dark"] .bg-dark {
  background-color: var(--bg-surface-inverse) !important;
}

[data-bs-theme="light"] .text-white {
  color: var(--text-on-dark) !important;
}

[data-bs-theme="dark"] .text-white {
  color: var(--text-on-dark) !important;
}

[data-bs-theme="light"] .text-dark {
  color: var(--text-on-light) !important;
}

[data-bs-theme="dark"] .text-dark {
  color: var(--text-on-light) !important;
}

/* Additional Bootstrap component theming for dark theme */
[data-bs-theme="dark"] .card {
  background-color: var(--bg-surface);
  border-color: var(--border-color);
}

[data-bs-theme="dark"] .btn-outline-secondary {
  border-color: var(--border-color);
  color: var(--text-secondary);
}

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

/* btn-outline-light theming */
[data-bs-theme="light"] .btn-outline-light {
  border-color: var(--border-color);
  color: var(--text-secondary);
}

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

[data-bs-theme="dark"] .btn-outline-light {
  border-color: var(--border-color);
  color: var(--text-secondary);
}

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

/* btn-outline-primary theming for dark theme */
[data-bs-theme="dark"] .btn-outline-primary {
  color: var(--primary-color);
  border-color: var(--primary-color);
}

[data-bs-theme="dark"] .btn-outline-primary:hover {
  background-color: var(--primary-color);
  color: var(--text-on-dark);
  border-color: var(--primary-dark);
}

[data-bs-theme="dark"] .btn-outline-primary:active,
[data-bs-theme="dark"] .btn-outline-primary.active {
  background-color: var(--primary-dark);
  color: var(--text-on-dark);
  border-color: var(--primary-dark);
}

/* link-primary theming for dark theme */
[data-bs-theme="dark"] .link-primary {
  color: var(--primary-color);
}

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

/* Ensure consistent button text colors in dark theme */
[data-bs-theme="dark"] .btn-outline-primary,
[data-bs-theme="dark"] .btn-outline-secondary,
[data-bs-theme="dark"] .btn-outline-light {
  background-color: transparent;
}

/* Regular button theming for dark theme */
[data-bs-theme="dark"] .btn-primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--text-on-dark);
}

[data-bs-theme="dark"] .btn-primary:hover {
  background-color: var(--primary-dark);
  border-color: var(--primary-dark);
  color: var(--text-on-dark);
}

[data-bs-theme="dark"] .btn-secondary {
  background-color: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--text-on-dark);
}

[data-bs-theme="dark"] .btn-secondary:hover {
  background-color: var(--secondary-dark);
  border-color: var(--secondary-dark);
  color: var(--text-on-dark);
}

/* Other button classes for dark theme */
[data-bs-theme="dark"] .btn-success {
  background-color: var(--success-color);
  border-color: var(--success-color);
  color: var(--text-on-dark);
}

[data-bs-theme="dark"] .btn-success:hover {
  background-color: var(--success-dark);
  border-color: var(--success-dark);
  color: var(--text-on-dark);
}

[data-bs-theme="dark"] .btn-danger {
  background-color: var(--danger-color);
  border-color: var(--danger-color);
  color: var(--text-on-dark);
}

[data-bs-theme="dark"] .btn-danger:hover {
  background-color: var(--danger-dark);
  border-color: var(--danger-dark);
  color: var(--text-on-dark);
}

[data-bs-theme="dark"] .btn-warning {
  background-color: var(--warning-color);
  border-color: var(--warning-color);
  color: var(--text-on-dark);
}

[data-bs-theme="dark"] .btn-warning:hover {
  background-color: var(--warning-dark);
  border-color: var(--warning-dark);
  color: var(--text-on-dark);
}

[data-bs-theme="dark"] .btn-info {
  background-color: var(--info-color);
  border-color: var(--info-color);
  color: var(--text-on-dark);
}

[data-bs-theme="dark"] .btn-info:hover {
  background-color: var(--info-dark);
  border-color: var(--info-dark);
  color: var(--text-on-dark);
}

[data-bs-theme="dark"] .btn-light {
  background-color: var(--bg-surface);
  border-color: var(--border-color);
  color: var(--text-primary);
}

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

[data-bs-theme="dark"] .btn-dark {
  background-color: var(--bg-surface-inverse);
  border-color: var(--bg-surface-inverse);
  color: var(--text-on-dark);
}

[data-bs-theme="dark"] .btn-dark:hover {
  background-color: var(--text-primary);
  border-color: var(--text-primary);
  color: var(--text-on-dark);
}

/* Form controls in dark theme */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
  background-color: var(--bg-surface);
  border-color: var(--border-color);
  color: var(--text-primary);
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
  background-color: var(--bg-surface);
  border-color: var(--primary-color);
  color: var(--text-primary);
  box-shadow: 0 0 0 0.2rem var(--primary-focus-shadow);
}

[data-bs-theme="dark"] .form-control::placeholder {
  color: var(--text-muted);
}

[data-bs-theme="dark"] .form-label {
  color: var(--text-primary);
}

/* Dropdowns in dark theme */
[data-bs-theme="dark"] .dropdown-menu {
  background-color: var(--bg-surface);
  border-color: var(--border-color);
}

[data-bs-theme="dark"] .dropdown-item {
  color: var(--text-primary);
}

[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
}

[data-bs-theme="dark"] .dropdown-divider {
  border-color: var(--border-color);
}

/* Navs and tabs in dark theme */
[data-bs-theme="dark"] .nav-link {
  color: var(--text-primary);
}

[data-bs-theme="dark"] .nav-link:hover,
[data-bs-theme="dark"] .nav-link:focus {
  color: var(--primary-color);
}

[data-bs-theme="dark"] .nav-tabs .nav-link.active {
  background-color: var(--bg-surface);
  border-color: var(--border-color) var(--border-color) var(--bg-surface);
  color: var(--primary-color);
}

[data-bs-theme="dark"] .nav-tabs {
  border-bottom-color: var(--border-color);
}

/* Accessibility: Improved focus states */
[data-bs-theme="light"] .btn:focus-visible,
[data-bs-theme="dark"] .btn:focus-visible {
  outline: 3px solid var(--primary-color);
  outline-offset: 2px;
}

[data-bs-theme="light"] .form-control:focus-visible,
[data-bs-theme="light"] .form-select:focus-visible,
[data-bs-theme="dark"] .form-control:focus-visible,
[data-bs-theme="dark"] .form-select:focus-visible {
  outline: 3px solid var(--primary-color);
  outline-offset: 2px;
}

[data-bs-theme="light"] a:focus-visible,
[data-bs-theme="dark"] a:focus-visible {
  outline: 3px solid var(--primary-color);
  outline-offset: 2px;
  text-decoration: none;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  [data-bs-theme="light"] {
    --primary-color: #0056b3;
    --primary-dark: #004085;
    --border-color: #000000;
    --text-primary: #000000;
  }

  [data-bs-theme="dark"] {
    --primary-color: #4dabf7;
    --primary-dark: #339af0;
    --border-color: #ffffff;
    --text-primary: #ffffff;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Fix for upload buttons in dark theme */
[data-bs-theme="dark"] .upload-btn.btn-outline-primary {
  color: var(--primary-color);
  border-color: var(--primary-color);
}

[data-bs-theme="dark"] .upload-btn.btn-outline-primary:hover {
  background-color: var(--primary-color);
  color: var(--text-on-dark);
  border-color: var(--primary-dark);
}