/* Dark Theme Variables */
[data-theme="dark"] {
  /* Primary Colors */
  --main-bg-color: #1a1a1a;
  --main-a-color: #34495e;
  --main-hover-color: #95a5a6;
  --main-a-dark-color: #bdc3c7;
  --main-dark-hover-color: #ecf0f1;
  
  /* Base Colors */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-text-primary: #e0e0e0;
  --color-text-secondary: #b0b0b0;
  --color-text-muted: #808080;
  --color-text: #e0e0e0;
  
  /* Component Background Colors */
  --bg-white: #2a2a2a;
  --bg-light-gray: #3a3a3a;
  --bg-transparent-black-5: rgba(255, 255, 255, 0.05);
  --bg-transparent-black-10: rgba(255, 255, 255, 0.1);
  
  /* Status Colors (slightly adjusted for dark mode) */
  --color-primary: #4a8fff;
  --color-secondary: #8a95a3;
  --color-success: #2ea965;
  --color-danger: #f55d6b;
  --color-warning: #ffc947;
  --color-info: #4dd8f8;
  --color-light: #3a3a3a;
  --color-dark: #e0e0e0;
  
  /* Alert Colors for Dark Mode */
  --alert-primary-text: #b8d7ff;
  --alert-primary-bg: #1a3a5f;
  --alert-primary-border: #2a4a7f;
  --alert-secondary-text: #d0d5da;
  --alert-secondary-bg: #3a3d41;
  --alert-secondary-border: #4a4d51;
  --alert-success-text: #b8f5d1;
  --alert-success-bg: #1e5a3a;
  --alert-success-border: #2e6a4a;
  --alert-info-text: #b8e5f5;
  --alert-info-bg: #1a3a4a;
  --alert-info-border: #2a4a5a;
  --alert-warning-text: #ffe5b8;
  --alert-warning-bg: #4a3a1a;
  --alert-warning-border: #5a4a2a;
  --alert-danger-text: #ffb8c1;
  --alert-danger-bg: #4a1a2a;
  --alert-danger-border: #5a2a3a;
  --alert-light-text: #e0e0e0;
  --alert-light-bg: #3a3a3a;
  --alert-light-border: #4a4a4a;
  --alert-dark-text: #f0f0f0;
  --alert-dark-bg: #2a2a2a;
  --alert-dark-border: #3a3a3a;
  
  /* Border Colors */
  --border-color: #404040;
  --border-color-light: rgba(255, 255, 255, 0.125);
  --border-color-input: #4a4a4a;
  --border-color-input-focus: #6a9fff;
  
  /* Shadow Colors (adjusted for dark backgrounds) */
  --shadow: rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3);
  --shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
  --shadow-focus-primary: 0 0 0 0.25rem rgba(74, 143, 255, 0.25);
  --shadow-focus-danger: 0 0 0 0.25rem rgba(245, 93, 107, 0.25);
  
  /* Gradient */
  --gradient-primary: linear-gradient(135deg, #3a7bd5 0%, #5a9a95 100%);
}

/* Dark Theme Specific Overrides */
[data-theme="dark"] body {
  background-color: var(--bg-light-gray); /* Lighter background to make gen palette stand out */
  color: var(--color-text-primary);
}

/* Cards in Dark Mode */
[data-theme="dark"] .card {
  background-color: var(--bg-white);
  border-color: var(--border-color);
  color: var(--color-text-primary);
}

[data-theme="dark"] .card-header {
  background-color: var(--bg-light-gray);
  border-bottom-color: var(--border-color);
}

[data-theme="dark"] .card-footer {
  background-color: var(--bg-light-gray);
  border-top-color: var(--border-color);
}

/* Forms in Dark Mode */
[data-theme="dark"] .form-label {
  color: var(--color-white);
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
  background-color: var(--bg-white);
  border-color: var(--border-color-input);
  color: var(--color-text-primary);
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
  background-color: var(--bg-white);
  border-color: var(--border-color-input-focus);
  color: var(--color-text-primary);
}

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

/* Tables in Dark Mode */
[data-theme="dark"] .table {
  color: var(--color-text-primary);
  border-color: var(--border-color);
}

[data-theme="dark"] .table thead th {
  background-color: var(--bg-light-gray);
  border-color: var(--border-color);
  color: var(--color-text-primary);
}

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

[data-theme="dark"] .table-hover tbody tr:hover {
  background-color: var(--bg-transparent-black-10);
  color: var(--color-text-primary);
}

[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--bg-transparent-black-5);
}

/* Modals in Dark Mode */
[data-theme="dark"] .modal-content {
  background-color: var(--bg-white);
  border-color: var(--border-color);
  color: var(--color-text-primary);
}

[data-theme="dark"] .modal-header {
  background-color: var(--bg-light-gray);
  border-bottom-color: var(--border-color);
  color: var(--color-text-primary);
}

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

[data-theme="dark"] .modal-backdrop {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Dropdowns in Dark Mode */
[data-theme="dark"] .dropdown-menu {
  background-color: var(--bg-white);
  border-color: var(--border-color);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

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

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

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

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

/* Navigation in Dark Mode */
[data-theme="dark"] .navbar {
  background-color: #1e2936;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .navbar .nav-link {
  color: rgba(255, 255, 255, 0.9);
}

[data-theme="dark"] .navbar .nav-link:hover {
  color: rgba(255, 255, 255, 1);
}

[data-theme="dark"] .profile-avatar-placeholder {
  background-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.9);
}

/* Sidebar in Dark Mode */
[data-theme="dark"] .sidebar {
  background-color: var(--bg-white);
  border-right-color: var(--border-color);
}

[data-theme="dark"] .sidebar .nav-link {
  color: var(--color-text-primary);
}

[data-theme="dark"] .sidebar .nav-link:hover {
  background-color: var(--bg-light-gray);
  color: var(--color-text-primary);
}

[data-theme="dark"] .sidebar .nav-link.active {
  background-color: var(--bg-light-gray);
  color: var(--color-primary);
}

/* Buttons in Dark Mode */
[data-theme="dark"] .btn-outline-secondary {
  color: var(--color-text-primary);
  border-color: var(--border-color);
}

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

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

[data-theme="dark"] .btn-light:hover {
  background-color: #4a4a4a;
  border-color: #5a5a5a;
  color: var(--color-text-primary);
}

/* Code blocks in Dark Mode */
[data-theme="dark"] pre,
[data-theme="dark"] code {
  background-color: #1e1e1e;
  color: #d4d4d4;
  border-color: var(--border-color);
}

/* Lists in Dark Mode */
[data-theme="dark"] .list-group-item {
  background-color: var(--bg-white);
  border-color: var(--border-color);
  color: var(--color-text-primary);
}

[data-theme="dark"] .list-group-item:hover {
  background-color: var(--bg-light-gray);
}

/* Badges in Dark Mode */
[data-theme="dark"] .badge {
  background-color: var(--bg-light-gray);
  color: var(--color-text-primary);
}

/* Pagination in Dark Mode */
[data-theme="dark"] .pagination .page-link {
  background-color: var(--bg-white);
  border-color: var(--border-color);
  color: var(--color-text-primary);
}

[data-theme="dark"] .pagination .page-link:hover {
  background-color: var(--bg-light-gray);
  border-color: var(--border-color);
  color: var(--color-text-primary);
}

[data-theme="dark"] .pagination .page-item.active .page-link {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
}

/* Close button in Dark Mode */
[data-theme="dark"] .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* Custom scrollbar for dark mode */
[data-theme="dark"] ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

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

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--bg-light-gray);
  border-radius: 5px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: #5a5a5a;
}

/* Image overlays in Dark Mode */
[data-theme="dark"] .carousel-control-prev-icon,
[data-theme="dark"] .carousel-control-next-icon {
  filter: invert(1);
}

/* Input group in Dark Mode */
[data-theme="dark"] .input-group-text {
  background-color: var(--bg-light-gray);
  border-color: var(--border-color);
  color: var(--color-text-primary);
}

/* Progress bars in Dark Mode */
[data-theme="dark"] .progress {
  background-color: var(--bg-light-gray);
}

/* Tooltips in Dark Mode */
[data-theme="dark"] .tooltip-inner {
  background-color: var(--bg-white);
  color: var(--color-text-primary);
  border: 1px solid var(--border-color);
}

/* Selection color in Dark Mode */
[data-theme="dark"] ::selection {
  background-color: var(--color-primary);
  color: white;
}

/* Links in Dark Mode */
[data-theme="dark"] a {
  color: var(--color-white);
}

[data-theme="dark"] a:hover {
  color: #6aa3ff;
}

/* HR in Dark Mode */
[data-theme="dark"] hr {
  border-color: var(--border-color);
  opacity: 1;
}

/* Profile dropdown specific dark mode styles */
[data-theme="dark"] .profile-dropdown-menu {
  background-color: #2a2a2a;
  border: 1px solid #404040;
}

[data-theme="dark"] .dropdown-icon {
  color: #b0b0b0;
}

[data-theme="dark"] .dropdown-chevron {
  color: #808080;
}

[data-theme="dark"] .user-name {
  color: #e0e0e0;
}

[data-theme="dark"] .user-email {
  color: #b0b0b0;
}

/* Additional component styles for dark mode */
[data-theme="dark"] .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

[data-theme="dark"] .shot-card {
  background-color: var(--bg-white);
  border-color: var(--border-color);
}

[data-theme="dark"] .scene-card {
  background-color: var(--bg-white);
  border-color: var(--border-color);
}

[data-theme="dark"] .project-card {
  background-color: var(--bg-white);
  border-color: var(--border-color);
}

[data-theme="dark"] .character-card {
  background-color: var(--bg-white);
  border-color: var(--border-color);
}

[data-theme="dark"] .location-card {
  background-color: var(--bg-white);
  border-color: var(--border-color);
}

/* Flash messages in dark mode */
[data-theme="dark"] .flash-messages-container .alert {
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

/* Carousel controls in dark mode */
[data-theme="dark"] .carousel-control-prev,
[data-theme="dark"] .carousel-control-next {
  background-color: rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .carousel-control-prev:hover,
[data-theme="dark"] .carousel-control-next:hover {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Image gallery in dark mode */
[data-theme="dark"] .image-grid-item {
  border-color: var(--border-color);
}

[data-theme="dark"] .image-grid-item:hover {
  border-color: var(--color-primary);
}

/* Dialogue Manager Dark Theme */
[data-theme="dark"] .dialogue-manager-container {
  color: var(--color-text-primary);
}

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

[data-theme="dark"] .dialogue-manager-subtitle {
  color: var(--color-text-muted);
}

/* Filter Card Dark Theme */
[data-theme="dark"] .filter-card {
  background-color: var(--bg-white);
  border-color: var(--border-color);
}

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

[data-theme="dark"] .filter-card-header h5 {
  color: var(--color-text-primary);
}

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

[data-theme="dark"] .character-list-item:hover {
  background-color: var(--bg-light-gray);
  color: var(--color-text-primary);
}

[data-theme="dark"] .character-list-item.active {
  background-color: var(--color-primary);
  color: var(--color-white);
}

[data-theme="dark"] .character-list-item.active:hover {
  background-color: var(--main-hover-color);
  color: var(--color-white);
}

/* Dialogue Card Dark Theme */
[data-theme="dark"] .dialogue-card {
  background-color: var(--bg-white);
  border-color: var(--border-color);
}

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

[data-theme="dark"] .dialogue-card-header h5 {
  color: var(--color-text-primary);
}

[data-theme="dark"] .dialogue-count-badge {
  background-color: var(--color-secondary);
  color: var(--color-white);
}

/* Table Dark Theme */
[data-theme="dark"] .table thead {
  border-bottom-color: var(--border-color);
}

[data-theme="dark"] .table th {
  color: var(--color-text-primary);
  background-color: var(--bg-light-gray);
}

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

[data-theme="dark"] .table-hover tbody tr:hover {
  background-color: var(--bg-light-gray);
}

/* Text Elements Dark Theme */
[data-theme="dark"] .scene-number {
  color: white !important;
}

[data-theme="dark"] .audio-timestamp {
  color: var(--color-text-muted);
}

[data-theme="dark"] .no-audio-text {
  color: var(--color-text-muted);
}

[data-theme="dark"] .regenerate-help-text {
  color: var(--color-text-muted);
}


/* Modal Dark Theme */
[data-theme="dark"] .modal-content {
  background-color: var(--bg-white);
  border-color: var(--border-color);
}

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

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

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

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

/* Option Cards Dark Theme */
[data-theme="dark"] .option-card {
  background-color: var(--bg-light-gray);
  border-color: var(--border-color);
}

[data-theme="dark"] .option-card-body h6 {
  color: var(--color-text-primary);
}

/* Form Elements Dark Theme */
[data-theme="dark"] .file-input {
  color: var(--color-text-secondary);
  background-color: var(--bg-white);
  border-color: var(--border-color);
}

[data-theme="dark"] .file-input:focus {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus-primary);
}

/* Dialogue Content Dark Theme */
[data-theme="dark"] .dialogue-content {
  color: var(--color-text-secondary);
}

/* Legacy support */
[data-theme="dark"] .dialogue-row {
  background-color: var(--bg-white);
  border-color: var(--border-color);
}

[data-theme="dark"] .dialogue-row:hover {
  background-color: var(--bg-light-gray);
}

/* Animatics player in dark mode */
[data-theme="dark"] .animatics-container {
  background-color: var(--bg-white);
}

[data-theme="dark"] .animatics-controls {
  background-color: var(--bg-light-gray);
  border-top-color: var(--border-color);
}

/* Voice test in dark mode */
[data-theme="dark"] .voice-card {
  background-color: var(--bg-white);
  border-color: var(--border-color);
}

/* Properties banner in dark mode */
[data-theme="dark"] .property-banner {
  background-color: var(--bg-light-gray);
  border-bottom-color: var(--border-color);
}

/* Tabs in dark mode */
[data-theme="dark"] .nav-tabs {
  border-bottom-color: var(--border-color);
}

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

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

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

/* Theme Selector Dropdown Submenu in Dark Mode */
[data-theme="dark"] .dropdown-submenu-menu {
  background-color: #2a2a2a;
  border-color: #404040;
}

/* Theme selector options - ensure text is visible in dark mode */
[data-theme="dark"] .theme-option {
  color: #e0e0e0 !important;
}

[data-theme="dark"] .theme-option:hover {
  background-color: #3a3a3a;
  color: #e0e0e0 !important;
}

[data-theme="dark"] .theme-option .theme-icon {
  color: #b0b0b0;
}

[data-theme="dark"] .theme-option input[type="radio"]:checked + .theme-icon {
  color: #4a8fff;
}

[data-theme="dark"] .theme-option input[type="radio"]:checked ~ * {
  color: #4a8fff !important;
  font-weight: 500;
}