/* ============================================================================
   GOATLAS TOOLBOX - DARK THEME
   Dark theme variables and component overrides
============================================================================ */

/* Disable all theme transitions during initial page load to prevent flashing */
:root.theme-loading,
:root.theme-loading *,
body.theme-loading,
body.theme-loading * {
  transition: none !important;
  animation: none !important;
}

/* Support both html.dark-mode (for early script application) and body.dark-mode (for JS control) */
:root.dark-mode,
body.dark-mode {
  /* ============================================================================
     DARK THEME COLOR OVERRIDES
     Note: Theme transition properties are applied globally in main.css to ensure
     animations work in BOTH directions (light → dark and dark → light). Avoid
     defining transitions only inside this selector, as that prevents light →
     dark animations from running.
  ============================================================================ */
  /* Background Colors */
  --bg-color: var(--color-dark-bg);
  --bg-surface: var(--color-dark-surface);
  --bg-card: var(--color-dark-surface);
  --bg-overlay: rgba(0, 0, 0, 0.8);
  --bg-input: var(--color-dark-surface);
  --bg-disabled: var(--color-dark-surface-variant);
  
  /* Text Colors */
  --text-color: var(--color-dark-text);
  --text-color-secondary: var(--color-dark-text-secondary);
  --text-color-muted: var(--color-grey-400);
  --text-color-inverse: var(--color-grey-900);
  --text-color-placeholder: var(--color-grey-500);
  
  /* Border Colors */
  --border-color: var(--color-dark-border);
  --border-color-focus: var(--color-primary-light);
  --border-color-error: var(--color-error);
  --border-color-muted: var(--color-grey-700);
  
  /* Navigation Colors */
  --nav-bg: var(--color-nav-dark);
  --nav-text: var(--color-white);
  --nav-link-hover: rgba(255, 255, 255, 0.1);
  --nav-logo-filter: brightness(0) invert(1);

  /* Skeleton Loader Colors */
  --skeleton-shimmer-gradient: linear-gradient(90deg,
    rgba(255, 255, 255, 0.08) 25%,
    rgba(255, 255, 255, 0.04) 50%,
    rgba(255, 255, 255, 0.08) 75%
  );
  --skeleton-shimmer-bg: var(--color-grey-700);
  --skeleton-shimmer-fg: var(--color-grey-600);

  /* Page Loader Spinner Colors */
  --spinner-color: var(--color-primary-light);
  
  /* Component-specific Colors */
  --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
  --card-hover-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
  --button-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --button-hover-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  
  /* Form Colors */
  --form-bg: var(--color-dark-surface);
  --form-border: var(--color-dark-border);
  --form-focus-border: var(--color-primary-light);
  --form-error-border: var(--color-error);
  --form-disabled-bg: var(--color-dark-surface-variant);
  --form-label-color: var(--color-dark-text-secondary);
  
  /* Table Colors */
  --table-header-bg: var(--color-dark-surface-variant);
  --table-row-hover: var(--color-dark-surface-variant);
  --table-border: var(--color-dark-border);
  
  /* Progress Colors */
  --progress-bg: var(--color-grey-700);
  --progress-fill: var(--color-primary-light);
  
  /* Modal Colors */
  --modal-bg: var(--color-dark-surface);
  --modal-overlay: rgba(0, 0, 0, 0.8);
  --modal-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  
  /* Toast Colors */
  --toast-bg: var(--color-dark-surface);
  --toast-text: var(--color-dark-text);
  --toast-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
  
  /* Collection Colors */
  --collection-bg: var(--color-dark-surface);
  --collection-item-hover: var(--color-dark-surface-variant);
  --collection-item-active: var(--color-primary);
  
  /* Scrollbar Colors */
  --scrollbar-track: var(--color-dark-surface-variant);
  --scrollbar-thumb: var(--color-grey-600);
  --scrollbar-thumb-hover: var(--color-grey-500);
  
  /* Code Colors */
  --code-bg: var(--color-dark-surface-variant);
  --code-text: var(--color-error);
  --pre-bg: var(--color-dark-surface-variant);
  --pre-text: var(--color-dark-text);
  
  /* Focus Colors - Enhanced for dark theme */
  --shadow-focus: 0 0 0 3px rgba(100, 181, 246, 0.3);
  --shadow-focus-error: 0 0 0 3px rgba(244, 67, 54, 0.3);
}

/* ============================================================================
   DARK THEME COMPONENT OVERRIDES
============================================================================ */

/* Body and base element overrides */
:root.dark-mode,
body.dark-mode {
  background-color: var(--bg-color);
  color: var(--text-color);
}

/* Navigation overrides */
body.dark-mode .nav {
  background-color: var(--nav-bg);
  color: var(--nav-text);
}

body.dark-mode .nav__logo {
  filter: var(--nav-logo-filter);
}

body.dark-mode .nav__link {
  color: var(--nav-text);
}

body.dark-mode .nav__link:hover {
  background-color: var(--nav-link-hover);
}

/* Card overrides */
body.dark-mode .card {
  background-color: var(--bg-card);
  color: var(--text-color);
  box-shadow: var(--card-shadow);
}

body.dark-mode .card:hover {
  box-shadow: var(--card-hover-shadow);
}

body.dark-mode .card__content {
  color: var(--text-color);
}

body.dark-mode .card__footer {
  background-color: var(--color-dark-surface-variant);
  border-color: var(--border-color);
}

body.dark-mode .card__title {
  color: var(--text-color);
}

body.dark-mode .card__subtitle {
  color: var(--text-color-secondary);
}

/* Button overrides */
body.dark-mode .btn {
  box-shadow: var(--button-shadow);
  color: var(--color-white);
}

body.dark-mode .btn:hover {
  box-shadow: var(--button-hover-shadow);
}

body.dark-mode .btn--ghost {
  color: var(--color-primary-light);
}

body.dark-mode .btn--ghost:hover {
  background-color: var(--color-dark-surface-variant);
}

body.dark-mode .btn--outline {
  color: var(--color-primary-light);
  border-color: var(--color-primary-light);
}

body.dark-mode .btn--outline:hover {
  background-color: var(--color-primary-light);
  color: var(--color-grey-900);
}

/* Form overrides */
body.dark-mode .form-input,
body.dark-mode .form-textarea,
body.dark-mode select {
  background-color: var(--form-bg);
  border-color: var(--form-border);
  color: var(--text-color);
}

body.dark-mode .form-input:focus,
body.dark-mode .form-textarea:focus,
body.dark-mode select:focus {
  border-color: var(--form-focus-border);
  box-shadow: var(--shadow-focus);
}

body.dark-mode .form-input.error,
body.dark-mode .form-textarea.error,
body.dark-mode select.error {
  border-color: var(--form-error-border);
}

body.dark-mode .form-input.error:focus,
body.dark-mode .form-textarea.error:focus,
body.dark-mode select.error:focus {
  box-shadow: var(--shadow-focus-error);
}

body.dark-mode .form-input:disabled,
body.dark-mode .form-textarea:disabled,
body.dark-mode select:disabled {
  background-color: var(--form-disabled-bg);
  color: var(--text-color-muted);
}

body.dark-mode .form-label {
  color: var(--form-label-color);
}

body.dark-mode .form-error {
  color: var(--color-error);
}

body.dark-mode .form-help {
  color: var(--text-color-secondary);
}

/* Materialize CSS specific overrides */
body.dark-mode input[type="text"],
body.dark-mode input[type="email"],
body.dark-mode input[type="password"],
body.dark-mode input[type="number"],
body.dark-mode textarea {
  color: var(--text-color);
  border-bottom-color: var(--border-color);
}

body.dark-mode input[type="text"]:focus,
body.dark-mode input[type="email"]:focus,
body.dark-mode input[type="password"]:focus,
body.dark-mode input[type="number"]:focus,
body.dark-mode textarea:focus {
  border-bottom-color: var(--color-primary-light);
  box-shadow: 0 1px 0 0 var(--color-primary-light);
}

body.dark-mode .input-field label {
  color: var(--text-color-secondary);
}

body.dark-mode .input-field label.active {
  color: var(--color-primary-light);
}

/* Table overrides */
body.dark-mode table {
  background-color: var(--bg-surface);
  color: var(--text-color);
}

body.dark-mode th {
  background-color: var(--table-header-bg);
  color: var(--text-color);
}

body.dark-mode td {
  color: var(--text-color);
  border-bottom-color: var(--table-border);
}

body.dark-mode tr:hover {
  background-color: var(--table-row-hover);
}

/* Progress overrides */
body.dark-mode .progress {
  background-color: var(--progress-bg);
}

body.dark-mode .progress__bar {
  background-color: var(--progress-fill);
}

/* Modal overrides */
body.dark-mode .modal {
  background-color: var(--modal-overlay);
}

body.dark-mode .modal__content {
  background-color: var(--modal-bg);
  color: var(--text-color);
  box-shadow: var(--modal-shadow);
}

body.dark-mode .modal__header,
body.dark-mode .modal__footer {
  border-color: var(--border-color);
}

body.dark-mode .modal__title {
  color: var(--text-color);
}

body.dark-mode .modal__close {
  color: var(--text-color-secondary);
}

body.dark-mode .modal__close:hover {
  color: var(--text-color);
  background-color: var(--color-dark-surface-variant);
}

/* Toast overrides */
body.dark-mode .toast {
  background-color: var(--toast-bg);
  color: var(--toast-text);
  box-shadow: var(--toast-shadow);
}

/* Collection overrides */
body.dark-mode .collection {
  background-color: var(--collection-bg);
  border-color: var(--border-color);
}

body.dark-mode .collection__item {
  background-color: var(--collection-bg);
  color: var(--text-color);
  border-bottom-color: var(--border-color);
}

body.dark-mode .collection__item:hover {
  background-color: var(--collection-item-hover);
}

body.dark-mode .collection__item--active {
  background-color: var(--collection-item-active);
  border-left-color: var(--color-primary-light);
  color: var(--color-white);
}

/* Scrollbar overrides */
body.dark-mode ::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

body.dark-mode ::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

/* Code overrides */
body.dark-mode code,
body.dark-mode kbd,
body.dark-mode samp {
  background-color: var(--code-bg);
  color: var(--code-text);
}

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

/* ============================================================================
   DARK THEME SPECIFIC COMPONENT STYLES
============================================================================ */

/* Enhanced styles for specific GoAtlas Toolbox components */

/* Job details styling */
body.dark-mode .job-details {
  background-color: var(--color-dark-surface-variant);
  border-left-color: var(--color-primary-light);
  color: var(--text-color);
}

body.dark-mode .job-detail-item span,
body.dark-mode .job-description {
  color: var(--text-color-secondary);
}

body.dark-mode .job-detail-item strong {
  color: var(--text-color);
}

/* Note section styling */
body.dark-mode .note-section {
  background-color: var(--color-dark-surface-variant);
  border-left-color: var(--color-warning);
  color: var(--text-color);
}

/* GPS Data Extractor specific styles */
body.dark-mode #markerListWidget {
  background-color: var(--color-dark-surface);
  color: var(--text-color);
  border: 1px solid var(--border-color);
}

body.dark-mode #markerListHeader {
  background-color: var(--color-primary);
  color: var(--color-white);
}

body.dark-mode .marker-list-item {
  color: var(--text-color);
  border-bottom-color: var(--border-color);
}

body.dark-mode .marker-list-item:hover {
  background-color: var(--color-dark-surface-variant);
}

body.dark-mode .marker-list-item.active {
  background-color: rgba(38, 166, 154, 0.2);
  border-left-color: var(--color-primary-light);
  color: var(--text-color);
}

body.dark-mode .directory-item {
  background-color: var(--color-dark-surface-variant);
  color: var(--text-color);
}

/* AI Assistant (Chat) specific styles */
body.dark-mode .chat-wrapper {
  background-color: var(--color-dark-surface-variant);
  border-color: var(--border-color);
}

body.dark-mode .chat-container {
  background-color: var(--color-dark-surface-variant);
  color: var(--text-color);
}

body.dark-mode .chat-resize-handle {
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.1));
}

body.dark-mode .chat-resize-handle:hover {
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.2));
}

body.dark-mode .chat-resize-handle::after {
  color: var(--text-color-secondary);
}

body.dark-mode .chat-resize-handle:hover::after {
  color: var(--text-color);
}

body.dark-mode .user-message {
  background-color: var(--color-primary);
  color: var(--color-white);
}

body.dark-mode .bot-message {
  background-color: var(--color-grey-700);
  color: var(--text-color);
}

body.dark-mode .pdf-attachment-message {
  background-color: var(--color-success-dark);
  border-color: var(--color-success);
  color: var(--color-white);
}

body.dark-mode .pdf-attachment-message .pdf-info-text p {
  color: rgba(255, 255, 255, 0.8);
}

body.dark-mode .debug-info {
  background-color: var(--color-error-dark);
  color: var(--color-white);
}

body.dark-mode .custom-instructions-container {
  background-color: var(--color-dark-surface-variant);
  border-color: var(--border-color);
  color: var(--text-color);
}

/* Lightbox specific styles */
body.dark-mode .lightbox {
  background-color: rgba(0, 0, 0, 0.95);
}

body.dark-mode .lightbox__close {
  color: var(--color-grey-200);
  background-color: rgba(0, 0, 0, 0.7);
}

body.dark-mode .lightbox__close:hover {
  color: var(--color-white);
  background-color: rgba(255, 255, 255, 0.2);
}

body.dark-mode .lightbox__caption {
  color: var(--color-grey-200);
  background-color: rgba(0, 0, 0, 0.8);
}

body.dark-mode .lightbox__nav {
  background-color: rgba(0, 0, 0, 0.7);
  color: var(--color-grey-200);
}

body.dark-mode .lightbox__nav:hover {
  background-color: rgba(255, 255, 255, 0.2);
  color: var(--color-white);
}

/* Side Navigation specific styles */
body.dark-mode .sidenav {
  background-color: var(--color-dark-surface);
  color: var(--text-color);
}

body.dark-mode .sidenav__link {
  color: var(--text-color);
}

body.dark-mode .sidenav__link:hover {
  background-color: var(--color-dark-surface-variant);
  color: var(--text-color);
}

body.dark-mode .sidenav__header {
  border-bottom-color: var(--border-color);
}

/* ============================================================================
   DARK THEME SPECIFIC UTILITIES
============================================================================ */

/* Dark theme specific utilities */
body.dark-mode .light-only {
  display: none;
}

body.dark-mode .dark-only {
  display: block;
}

/* Logo handling for dark theme */
body.dark-mode .logo-light {
  display: none;
}

body.dark-mode .logo-dark {
  display: block;
}

/* Dark theme specific form styles */
body.dark-mode .form-input--dark {
  background-color: var(--color-dark-surface);
  border: 2px solid var(--color-dark-border);
  color: var(--text-color);
}

body.dark-mode .form-input--dark:focus {
  border-color: var(--color-primary-light);
  box-shadow: var(--shadow-focus);
}

/* Dark theme specific button styles */
body.dark-mode .btn--dark {
  background-color: var(--color-dark-surface-variant);
  color: var(--text-color);
  border: 1px solid var(--border-color);
}

body.dark-mode .btn--dark:hover {
  background-color: var(--color-grey-700);
  border-color: var(--color-grey-600);
}

/* Dark theme specific navigation styles */
body.dark-mode .nav--dark {
  background-color: var(--color-dark-surface);
  border-bottom: 1px solid var(--border-color);
}

body.dark-mode .nav--dark .nav__link {
  color: var(--text-color);
}

body.dark-mode .nav--dark .nav__link:hover {
  background-color: var(--color-dark-surface-variant);
}

/* Dark theme specific alert styles */
body.dark-mode .alert--dark {
  background-color: var(--color-dark-surface);
  border: 1px solid var(--border-color);
  color: var(--text-color);
}

body.dark-mode .alert--info-dark {
  background-color: rgba(100, 181, 246, 0.1);
  border-color: var(--color-primary-light);
  color: var(--color-primary-light);
}

body.dark-mode .alert--success-dark {
  background-color: rgba(76, 175, 80, 0.1);
  border-color: var(--color-success);
  color: var(--color-success);
}

body.dark-mode .alert--warning-dark {
  background-color: rgba(255, 152, 0, 0.1);
  border-color: var(--color-warning);
  color: var(--color-warning);
}

body.dark-mode .alert--error-dark {
  background-color: rgba(244, 67, 54, 0.1);
  border-color: var(--color-error);
  color: var(--color-error);
}

/* Dark theme specific focus states */
body.dark-mode .focus-dark:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(100, 181, 246, 0.4);
}

/* Dark theme specific disabled states */
body.dark-mode .disabled-dark {
  opacity: 0.6;
  background-color: var(--color-dark-surface-variant);
  color: var(--color-grey-500);
  cursor: not-allowed;
}

/* Dark theme specific hover effects */
body.dark-mode .hover-lift-dark:hover {
  transform: translateY(-2px);
  box-shadow: var(--card-hover-shadow);
}

body.dark-mode .hover-glow-dark:hover {
  box-shadow: 0 0 20px rgba(100, 181, 246, 0.4);
}

/* ============================================================================
   DARK THEME ACCESSIBILITY ENHANCEMENTS
============================================================================ */

/* Enhanced focus styles for better accessibility in dark theme */
body.dark-mode .focus-enhanced:focus {
  outline: 3px solid var(--color-primary-light);
  outline-offset: 2px;
}

/* High contrast mode support for dark theme */
@media (prefers-contrast: high) {
  body.dark-mode {
    --border-color: var(--color-grey-500);
    --text-color-secondary: var(--color-grey-300);
    --form-border: var(--color-grey-500);
    --bg-card: var(--color-grey-800);
  }
  
  body.dark-mode .btn {
    border: 2px solid currentColor;
  }
  
  body.dark-mode .card {
    border: 1px solid var(--border-color);
  }
  
  body.dark-mode .form-input,
  body.dark-mode .form-textarea {
    border: 2px solid var(--form-border);
  }
}

/* Reduced motion support for dark theme */
@media (prefers-reduced-motion: reduce) {
  body.dark-mode .card:hover,
  body.dark-mode .btn:hover,
  body.dark-mode .hover-lift-dark:hover {
    transform: none;
  }
  
  body.dark-mode * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}