/* ═══════════════════════════════════════════════════════════════════════════
   AudioBlotter Theme System
   ═══════════════════════════════════════════════════════════════════════════ */

/* Default Theme (Light) */
:root,
[data-theme="default"] {
  /* Core backgrounds */
  --color-bg-primary: #f5f5f5;
  --color-bg-secondary: #ffffff;
  --color-bg-elevated: #ffffff;

  /* Brand colors */
  --color-brand-primary: #ad1a23;
  --color-brand-hover: #8e1519;

  /* Text colors */
  --color-text-primary: #333333;
  --color-text-secondary: #666666;
  --color-text-muted: #999999;
  --color-text-inverse: #ffffff;

  /* UI elements */
  --color-border: #eeeeee;
  --color-border-strong: #dddddd;
  --color-shadow: rgba(0, 0, 0, 0.1);
  --color-shadow-strong: rgba(0, 0, 0, 0.15);

  /* Interactive states */
  --color-hover-bg: rgba(255, 255, 255, 0.15);
  --color-hover-bg-strong: rgba(255, 255, 255, 0.3);
  --color-active-bg: rgba(255, 255, 255, 0.4);

  /* Status colors */
  --color-success: #28a745;
  --color-success-hover: #218838;
  --color-danger: #dc3545;
  --color-danger-hover: #c82333;
  --color-warning: #fd7e14;
  --color-info: #3498db;

  /* Cards */
  --color-card-bg: #ffffff;
  --color-card-priority-bg: #fff5f5;
  --color-card-border-priority: #dc3545;
  --color-card-border-routine: #6c757d;

  /* Tags */
  --color-tag-dept: #3498db;
  --color-tag-summary: #6c757d;
  --color-tag-location: #28a745;
  --color-tag-units: #fd7e14;

  /* Player */
  --color-player-bg: #2c3e50;
  --color-player-close: #e74c3c;
  --color-player-close-hover: #c0392b;

  /* Karaoke highlighting */
  --color-word-hover: #e9ecef;
  --color-word-active-bg: #fff3cd;
  --color-word-active-text: #856404;

  /* Date header */
  --color-date-header-bg: #f8f9fa;
  --color-date-header-text: #495057;

  /* Navbar specific */
  --navbar-btn-bg: rgba(255, 255, 255, 0.15);
  --navbar-btn-bg-hover: rgba(255, 255, 255, 0.3);
  --navbar-btn-bg-active: rgba(255, 255, 255, 0.4);

  /* Activity panel */
  --color-activity-panel-bg: #ffffff;
  --color-activity-processing: #fff3cd;
  --color-activity-processing-text: #856404;
  --color-activity-complete: #d4edda;
  --color-activity-complete-text: #155724;
  --color-activity-error: #f8d7da;
  --color-activity-error-text: #721c24;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Night Shift Theme (Dark)
   Optimized for night-time monitoring with amber emergency accents
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="night-shift"] {
  /* Core backgrounds - deep charcoal/navy */
  --color-bg-primary: #0f1419;
  --color-bg-secondary: #1a1f2e;
  --color-bg-elevated: #232a3b;

  /* Brand colors - amber/orange for emergency feel */
  --color-brand-primary: #f59e0b;
  --color-brand-hover: #d97706;

  /* Text colors */
  --color-text-primary: #e5e7eb;
  --color-text-secondary: #9ca3af;
  --color-text-muted: #6b7280;
  --color-text-inverse: #0f1419;

  /* UI elements */
  --color-border: #2d3748;
  --color-border-strong: #4a5568;
  --color-shadow: rgba(0, 0, 0, 0.4);
  --color-shadow-strong: rgba(0, 0, 0, 0.6);

  /* Interactive states */
  --color-hover-bg: rgba(245, 158, 11, 0.15);
  --color-hover-bg-strong: rgba(245, 158, 11, 0.25);
  --color-active-bg: rgba(245, 158, 11, 0.35);

  /* Status colors - slightly muted for dark theme */
  --color-success: #22c55e;
  --color-success-hover: #16a34a;
  --color-danger: #ef4444;
  --color-danger-hover: #dc2626;
  --color-warning: #f59e0b;
  --color-info: #3b82f6;

  /* Cards */
  --color-card-bg: #1a1f2e;
  --color-card-priority-bg: #2a1f1f;
  --color-card-border-priority: #ef4444;
  --color-card-border-routine: #6b7280;

  /* Tags - vibrant against dark */
  --color-tag-dept: #60a5fa;
  --color-tag-summary: #9ca3af;
  --color-tag-location: #34d399;
  --color-tag-units: #fb923c;

  /* Player */
  --color-player-bg: #1e2533;
  --color-player-close: #ef4444;
  --color-player-close-hover: #dc2626;

  /* Karaoke highlighting - amber glow */
  --color-word-hover: #2d3748;
  --color-word-active-bg: #422006;
  --color-word-active-text: #fbbf24;

  /* Date header */
  --color-date-header-bg: #1e2533;
  --color-date-header-text: #9ca3af;

  /* Navbar specific - amber glow */
  --navbar-btn-bg: rgba(245, 158, 11, 0.2);
  --navbar-btn-bg-hover: rgba(245, 158, 11, 0.35);
  --navbar-btn-bg-active: rgba(245, 158, 11, 0.5);

  /* Activity panel */
  --color-activity-panel-bg: #1a1f2e;
  --color-activity-processing: #422006;
  --color-activity-processing-text: #fbbf24;
  --color-activity-complete: #052e16;
  --color-activity-complete-text: #4ade80;
  --color-activity-error: #450a0a;
  --color-activity-error-text: #f87171;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Theme Selector Dropdown Styles
   ═══════════════════════════════════════════════════════════════════════════ */

.theme-selector {
  position: relative;
}

.theme-selector-btn {
  background: var(--navbar-btn-bg);
  border: none;
  border-radius: 6px;
  padding: 0.75rem 1rem;
  font-size: 1.75rem;
  cursor: pointer;
  transition: all 0.2s;
  line-height: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.theme-selector-btn:hover {
  background: var(--navbar-btn-bg-hover);
}

.theme-selector-btn.open {
  background: var(--navbar-btn-bg-active);
}

.theme-dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-strong);
  border-radius: 8px;
  box-shadow: 0 4px 20px var(--color-shadow-strong);
  min-width: 200px;
  z-index: 1001;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.theme-dropdown.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.theme-dropdown-header {
  padding: 0.75rem 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
}

.theme-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  cursor: pointer;
  transition: background-color 0.15s;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}

.theme-option:hover {
  background: var(--color-hover-bg);
}

.theme-option.active {
  background: var(--color-hover-bg-strong);
}

.theme-option-check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--color-border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s;
}

.theme-option.active .theme-option-check {
  border-color: var(--color-brand-primary);
  background: var(--color-brand-primary);
}

.theme-option.active .theme-option-check::after {
  content: '✓';
  color: var(--color-text-inverse);
  font-size: 0.7rem;
  font-weight: bold;
}

.theme-option-info {
  flex: 1;
  min-width: 0;
}

.theme-option-name {
  font-weight: 600;
  color: var(--color-text-primary);
  font-size: 0.95rem;
}

.theme-option-desc {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-top: 0.15rem;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .theme-selector-btn {
    font-size: 1.4rem;
    padding: 0.6rem 0.8rem;
    border-radius: 5px;
  }

  .theme-dropdown {
    min-width: 180px;
  }
}

@media (max-width: 480px) {
  .theme-selector-btn {
    font-size: 1.1rem;
    padding: 0.5rem 0.65rem;
    border-radius: 4px;
  }

  .theme-dropdown {
    min-width: 160px;
    right: -0.5rem;
  }

  .theme-option {
    padding: 0.75rem;
  }
}