/* 
   Site-wide Dark Mode Implementation
   Comprehensive dark theme for Comedia Stages
*/

/* ============================================
   DARK MODE CSS VARIABLES
   ============================================ */
[data-theme="dark"] {
  /* Primary Colors */
  --primary-color: #1a202c;
  --primary-light: #2d3748;
  --primary-dark: #0f1419;
  
  /* Accent Colors */
  --accent-color: #4299e1;
  --accent-hover: #63b3ed;
  --accent-light: #bee3f8;
  
  /* Text Colors */
  --text-primary: #f7fafc;
  --text-secondary: #a0aec0;
  --text-muted: #718096;
  --text-inverse: #1a202c;
  
  /* Background Colors */
  --background: #0f1419;
  --background-light: #1a202c;
  --background-section: #2d3748;
  --background-elevated: #4a5568;
  --background-hover: #2d3748;
  
  /* Border & Shadow */
  --border-color: #4a5568;
  --border-light: #2d3748;
  --shadow-light: 0 2px 10px rgba(0, 0, 0, 0.3);
  --shadow-medium: 0 4px 20px rgba(0, 0, 0, 0.4);
  --shadow-strong: 0 8px 30px rgba(0, 0, 0, 0.5);
  
  /* Form Controls */
  --input-background: #2d3748;
  --input-border: #4a5568;
  --input-focus: #4299e1;
  --input-text: #f7fafc;
  
  /* Status Colors */
  --success-color: #48bb78;
  --warning-color: #ed8936;
  --error-color: #f56565;
  --info-color: #4299e1;
}

/* ============================================
   BODY & GLOBAL DARK MODE STYLES
   ============================================ */
[data-theme="dark"] body {
  background: var(--background);
  color: var(--text-primary);
}

/* ============================================
   HEADER & NAVIGATION DARK MODE
   ============================================ */
[data-theme="dark"] .site-header {
  background: var(--background-light);
  border-bottom-color: var(--border-color);
  box-shadow: var(--shadow-light);
}

[data-theme="dark"] .header-banner {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
}

[data-theme="dark"] .header-banner h1,
[data-theme="dark"] .header-banner .subtitle {
  color: var(--text-primary);
}

[data-theme="dark"] .main-navigation {
  background: var(--background-light);
  border-bottom-color: var(--border-color);
}

[data-theme="dark"] .main-menu a {
  color: var(--text-secondary);
}

[data-theme="dark"] .main-menu a:hover,
[data-theme="dark"] .main-menu a.active {
  color: var(--accent-color);
}

[data-theme="dark"] .site-logo span {
  color: var(--text-primary);
}

/* Dark Mode Toggle Button */
.dark-mode-toggle {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  padding: 8px 12px;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: var(--transition);
  font-size: 0.9rem;
}

.dark-mode-toggle:hover {
  background: var(--background-hover);
  color: var(--accent-color);
  border-color: var(--accent-color);
}

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

[data-theme="dark"] .dark-mode-toggle:hover {
  background: var(--background-hover);
  color: var(--accent-color);
  border-color: var(--accent-color);
}

/* ============================================
   CARDS & PANELS DARK MODE
   ============================================ */
[data-theme="dark"] .card,
[data-theme="dark"] .dashboard-panel {
  background: var(--background-section);
  border-color: var(--border-color);
  color: var(--text-primary);
  box-shadow: var(--shadow-medium);
}

[data-theme="dark"] .card-header,
[data-theme="dark"] .panel-header {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
  color: var(--text-primary);
  border-bottom-color: var(--border-color);
}

[data-theme="dark"] .card-body,
[data-theme="dark"] .panel-content {
  background: var(--background-section);
  color: var(--text-primary);
}

/* ============================================
   FORMS & INPUTS DARK MODE
   ============================================ */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background: var(--input-background);
  border-color: var(--input-border);
  color: var(--input-text);
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
  background: var(--input-background);
  border-color: var(--input-focus);
  color: var(--input-text);
  box-shadow: 0 0 0 0.2rem rgba(66, 153, 225, 0.25);
}

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

/* ============================================
   BUTTONS DARK MODE
   ============================================ */
[data-theme="dark"] .btn-primary {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--text-inverse);
}

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

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

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

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

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

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

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

/* ============================================
   TABLES DARK MODE
   ============================================ */
[data-theme="dark"] .table {
  color: var(--text-primary);
}

[data-theme="dark"] .table th,
[data-theme="dark"] .table td {
  border-color: var(--border-color);
}

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > td,
[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > th {
  background: var(--background-hover);
}

[data-theme="dark"] .table-hover > tbody > tr:hover > td,
[data-theme="dark"] .table-hover > tbody > tr:hover > th {
  background: var(--background-section);
}

/* ============================================
   MODALS DARK MODE
   ============================================ */
[data-theme="dark"] .modal-content {
  background: var(--background-section);
  color: var(--text-primary);
  border-color: var(--border-color);
}

[data-theme="dark"] .modal-header {
  border-bottom-color: var(--border-color);
}

[data-theme="dark"] .modal-footer {
  border-top-color: var(--border-color);
}

[data-theme="dark"] .modal-title {
  color: var(--text-primary);
}

[data-theme="dark"] .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* ============================================
   ALERTS & NOTIFICATIONS DARK MODE
   ============================================ */
[data-theme="dark"] .alert {
  border-color: var(--border-color);
}

[data-theme="dark"] .alert-primary {
  background: rgba(66, 153, 225, 0.1);
  border-color: var(--info-color);
  color: var(--info-color);
}

[data-theme="dark"] .alert-success {
  background: rgba(72, 187, 120, 0.1);
  border-color: var(--success-color);
  color: var(--success-color);
}

[data-theme="dark"] .alert-warning {
  background: rgba(237, 137, 54, 0.1);
  border-color: var(--warning-color);
  color: var(--warning-color);
}

[data-theme="dark"] .alert-danger {
  background: rgba(245, 101, 101, 0.1);
  border-color: var(--error-color);
  color: var(--error-color);
}

/* ============================================
   NAVBAR & TABS DARK MODE
   ============================================ */
[data-theme="dark"] .nav-tabs {
  border-bottom-color: var(--border-color);
}

[data-theme="dark"] .nav-tabs .nav-link {
  color: var(--text-secondary);
  border-color: transparent;
}

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

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

/* ============================================
   DROPDOWN DARK MODE
   ============================================ */
[data-theme="dark"] .dropdown-menu {
  background: var(--background-section);
  border-color: var(--border-color);
  box-shadow: var(--shadow-medium);
}

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

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
  background: var(--background-hover);
  color: var(--accent-color);
}

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

/* ============================================
   BREADCRUMB DARK MODE
   ============================================ */
[data-theme="dark"] .breadcrumb {
  background: var(--background-section);
}

[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
  color: var(--text-muted);
}

[data-theme="dark"] .breadcrumb-item a {
  color: var(--accent-color);
}

/* ============================================
   PAGINATION DARK MODE
   ============================================ */
[data-theme="dark"] .page-link {
  background: var(--background-section);
  border-color: var(--border-color);
  color: var(--text-secondary);
}

[data-theme="dark"] .page-link:hover {
  background: var(--background-hover);
  border-color: var(--accent-color);
  color: var(--accent-color);
}

[data-theme="dark"] .page-item.active .page-link {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--text-inverse);
}

[data-theme="dark"] .page-item.disabled .page-link {
  background: var(--background-section);
  border-color: var(--border-color);
  color: var(--text-muted);
}

/* ============================================
   DASHBOARD SPECIFIC DARK MODE
   ============================================ */
[data-theme="dark"] .dashboard-container {
  background: var(--background);
}

[data-theme="dark"] .search-tab {
  background: var(--background-section);
  border-color: var(--border-color);
  color: var(--text-secondary);
}

[data-theme="dark"] .search-tab.active {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--text-inverse);
}

[data-theme="dark"] .search-tab:hover:not(.active) {
  background: var(--background-hover);
  color: var(--accent-color);
}

[data-theme="dark"] .result-item {
  background: var(--background-section);
  border-color: var(--border-color);
  color: var(--text-primary);
}

[data-theme="dark"] .result-item:hover {
  border-color: var(--accent-color);
  background: var(--background-hover);
}

[data-theme="dark"] .result-item.selected {
  border-color: var(--accent-color);
  background: rgba(66, 153, 225, 0.1);
}

[data-theme="dark"] .result-title {
  color: var(--text-primary);
}

[data-theme="dark"] .result-meta {
  color: var(--text-secondary);
}

[data-theme="dark"] .preview-placeholder {
  color: var(--text-secondary);
}

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

[data-theme="dark"] .preview-title {
  color: var(--text-primary);
}

[data-theme="dark"] .detail-label {
  color: var(--text-secondary);
}

[data-theme="dark"] .detail-value {
  color: var(--text-primary);
}

[data-theme="dark"] .detail-item {
  border-bottom-color: var(--border-light);
}

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

[data-theme="dark"] .map-control-btn:hover {
  background: var(--background-hover);
  border-color: var(--accent-color);
  color: var(--accent-color);
}

[data-theme="dark"] .map-stats {
  background: rgba(45, 55, 72, 0.95);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

/* ============================================
   SCROLLBARS DARK MODE
   ============================================ */
[data-theme="dark"] ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--background-section);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* ============================================
   PERFORMANCE EXPLORER DARK MODE
   ============================================ */
[data-theme="dark"] .performance-card {
  background: var(--background-section);
  border-color: var(--border-color);
  color: var(--text-primary);
}

[data-theme="dark"] .performance-card:hover {
  box-shadow: var(--shadow-medium);
  border-color: var(--accent-color);
}

[data-theme="dark"] .performance-title {
  color: var(--text-primary);
}

[data-theme="dark"] .performance-meta {
  color: var(--text-secondary);
}

[data-theme="dark"] .performance-description {
  color: var(--text-secondary);
}

/* ============================================
   RESPONSIVE DARK MODE ADJUSTMENTS
   ============================================ */
@media (max-width: 768px) {
  [data-theme="dark"] .main-menu {
    background: var(--background-section);
    border-color: var(--border-color);
  }
  
  [data-theme="dark"] .mobile-menu-open .main-menu {
    box-shadow: var(--shadow-medium);
  }
}

/* ============================================
   SMOOTH TRANSITIONS FOR THEME SWITCHING
   ============================================ */
* {
  transition: background-color 0.3s ease, 
              border-color 0.3s ease, 
              color 0.3s ease,
              box-shadow 0.3s ease;
}

/* Disable transitions during theme switch to prevent flashing */
.theme-switching * {
  transition: none !important;
}