/*
 * SGS Admin Dark Mode Overrides
 *
 * This file provides dark mode support for all custom admin templates.
 * It uses Django's built-in dark mode activation patterns:
 *   1. @media (prefers-color-scheme: dark) — automatic system preference
 *   2. html[data-theme="dark"] — manual toggle via Django's theme.js
 *
 * Django's CSS variables (--body-bg, --body-fg, --darkened-bg, --border-color,
 * --hairline-color, --body-quiet-color, --link-fg, etc.) are used where possible.
 * Custom overrides are provided for components not covered by Django defaults.
 */

/* ============================================================
   DARK MODE VARIABLES & OVERRIDES
   ============================================================ */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sgs-card-bg: #1e1e1e;
    --sgs-section-bg: #1a1a1a;
    --sgs-surface-bg: #252525;
    --sgs-hover-bg: #2a2a2a;
    --sgs-text-primary: #eeeeee;
    --sgs-text-secondary: #aaaaaa;
    --sgs-text-muted: #888888;
    --sgs-border: #353535;
    --sgs-border-light: #2a2a2a;
    --sgs-info-bg: #1a3040;
    --sgs-info-border: #1a4060;
    --sgs-success-bg: #1a3a1a;
    --sgs-success-border: #2a5a2a;
    --sgs-success-text: #6fcf6f;
    --sgs-error-bg: #3a1a1a;
    --sgs-error-border: #5a2a2a;
    --sgs-error-text: #e35f5f;
    --sgs-warning-bg: #3a3018;
    --sgs-warning-border: #5a4a28;
    --sgs-warning-text: #d4a84a;
    --sgs-input-bg: #1e1e1e;
    --sgs-shadow: rgba(0, 0, 0, 0.3);
    --sgs-selected-bg: #1a3040;
    --sgs-selected-border: #2a5080;
    --sgs-accent: #5a9ab5;
    --sgs-accent-hover: #4a8aa5;
  }
}

html[data-theme="dark"] {
  --sgs-card-bg: #1e1e1e;
  --sgs-section-bg: #1a1a1a;
  --sgs-surface-bg: #252525;
  --sgs-hover-bg: #2a2a2a;
  --sgs-text-primary: #eeeeee;
  --sgs-text-secondary: #aaaaaa;
  --sgs-text-muted: #888888;
  --sgs-border: #353535;
  --sgs-border-light: #2a2a2a;
  --sgs-info-bg: #1a3040;
  --sgs-info-border: #1a4060;
  --sgs-success-bg: #1a3a1a;
  --sgs-success-border: #2a5a2a;
  --sgs-success-text: #6fcf6f;
  --sgs-error-bg: #3a1a1a;
  --sgs-error-border: #5a2a2a;
  --sgs-error-text: #e35f5f;
  --sgs-warning-bg: #3a3018;
  --sgs-warning-border: #5a4a28;
  --sgs-warning-text: #d4a84a;
  --sgs-input-bg: #1e1e1e;
  --sgs-shadow: rgba(0, 0, 0, 0.3);
  --sgs-selected-bg: #1a3040;
  --sgs-selected-border: #2a5080;
  --sgs-accent: #5a9ab5;
  --sgs-accent-hover: #4a8aa5;
}

/* Light mode defaults (so CSS var() calls always resolve) */
:root {
  --sgs-card-bg: #ffffff;
  --sgs-section-bg: #f8f9fa;
  --sgs-surface-bg: #f5f5f5;
  --sgs-hover-bg: #f8f9fa;
  --sgs-text-primary: #333333;
  --sgs-text-secondary: #666666;
  --sgs-text-muted: #999999;
  --sgs-border: #dddddd;
  --sgs-border-light: #eeeeee;
  --sgs-info-bg: #e8f4fd;
  --sgs-info-border: #b3d9ff;
  --sgs-success-bg: #d4edda;
  --sgs-success-border: #c3e6cb;
  --sgs-success-text: #155724;
  --sgs-error-bg: #f8d7da;
  --sgs-error-border: #f5c6cb;
  --sgs-error-text: #721c24;
  --sgs-warning-bg: #fff3cd;
  --sgs-warning-border: #ffeaa7;
  --sgs-warning-text: #856404;
  --sgs-input-bg: #ffffff;
  --sgs-shadow: rgba(0, 0, 0, 0.1);
  --sgs-selected-bg: #e8f4fd;
  --sgs-selected-border: #b3d9ff;
  --sgs-accent: #417690;
  --sgs-accent-hover: #205067;
}


/* ============================================================
   BASE SITE OVERRIDES
   ============================================================ */

/* Breadcrumbs */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) div.breadcrumbs {
    background: rgba(102, 126, 234, 0.15);
    color: #a0b4f0;
  }
  :root:not([data-theme="light"]) div.breadcrumbs a {
    color: #a0b4f0;
  }
  :root:not([data-theme="light"]) div.breadcrumbs a:hover {
    color: #c0b4f0;
  }
}
html[data-theme="dark"] div.breadcrumbs {
  background: rgba(102, 126, 234, 0.15);
  color: #a0b4f0;
}
html[data-theme="dark"] div.breadcrumbs a {
  color: #a0b4f0;
}
html[data-theme="dark"] div.breadcrumbs a:hover {
  color: #c0b4f0;
}

/* Language switcher */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #language-switcher select option {
    background: #333;
  }
}
html[data-theme="dark"] #language-switcher select option {
  background: #333;
}


/* ============================================================
   FLIGHT CARD
   ============================================================ */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .flight-card {
    background: var(--sgs-card-bg);
    border-color: var(--sgs-border);
  }
  :root:not([data-theme="light"]) .flight-card:hover {
    box-shadow: 0 2px 8px var(--sgs-shadow);
  }
  :root:not([data-theme="light"]) .price-amount {
    color: var(--sgs-accent);
  }
  :root:not([data-theme="light"]) .price-per-person {
    color: var(--sgs-text-secondary);
  }
  :root:not([data-theme="light"]) .price-total {
    color: var(--sgs-text-primary);
  }
  :root:not([data-theme="light"]) .price-class {
    color: var(--sgs-text-secondary);
  }
  :root:not([data-theme="light"]) .route-time {
    color: var(--sgs-text-primary);
  }
  :root:not([data-theme="light"]) .route-separator {
    color: var(--sgs-text-secondary);
  }
  :root:not([data-theme="light"]) .route-duration {
    color: var(--sgs-text-primary);
  }
  :root:not([data-theme="light"]) .route-codes {
    color: var(--sgs-text-secondary);
  }
  :root:not([data-theme="light"]) .route-stops-info {
    color: var(--sgs-text-primary);
  }
  :root:not([data-theme="light"]) .route-stop-codes {
    color: var(--sgs-text-secondary);
  }
  :root:not([data-theme="light"]) .route-details,
  :root:not([data-theme="light"]) .airline-names {
    color: var(--sgs-text-secondary);
  }
  :root:not([data-theme="light"]) .flight-card-details {
    border-top-color: var(--sgs-border);
    background: var(--sgs-section-bg);
  }
  :root:not([data-theme="light"]) .flight-segment {
    border-bottom-color: var(--sgs-border);
  }
  :root:not([data-theme="light"]) .segment-label {
    color: var(--sgs-text-primary);
  }
  :root:not([data-theme="light"]) .segment-date,
  :root:not([data-theme="light"]) .segment-duration {
    color: var(--sgs-text-secondary);
  }
  :root:not([data-theme="light"]) .flight-leg {
    border-bottom-color: var(--sgs-border-light);
  }
  :root:not([data-theme="light"]) .leg-airline-name {
    color: var(--sgs-text-primary);
  }
  :root:not([data-theme="light"]) .leg-flight-details {
    color: var(--sgs-text-secondary);
  }
  :root:not([data-theme="light"]) .leg-timeline-dot {
    background: var(--sgs-text-secondary);
  }
  :root:not([data-theme="light"]) .leg-timeline-line {
    background: var(--sgs-border);
  }
  :root:not([data-theme="light"]) .leg-stop-time {
    color: var(--sgs-text-primary);
  }
  :root:not([data-theme="light"]) .leg-stop-location {
    color: var(--sgs-text-secondary);
  }
  :root:not([data-theme="light"]) .leg-stop-airport {
    color: var(--sgs-text-muted);
  }
  :root:not([data-theme="light"]) .leg-duration-label {
    color: var(--sgs-text-secondary);
  }
  :root:not([data-theme="light"]) .leg-layover {
    border-top-color: var(--sgs-border);
    border-bottom-color: var(--sgs-border);
  }
  :root:not([data-theme="light"]) .layover-icon {
    background: var(--sgs-warning-bg);
  }
  :root:not([data-theme="light"]) .layover-duration {
    color: var(--sgs-warning-text);
  }
  :root:not([data-theme="light"]) .layover-location {
    color: var(--sgs-warning-text);
  }
  :root:not([data-theme="light"]) .expand-indicator {
    color: var(--sgs-accent);
  }
  :root:not([data-theme="light"]) .flight-card.selected {
    border-color: var(--sgs-accent);
    box-shadow: 0 0 0 2px rgba(90, 154, 181, 0.3);
  }
}

html[data-theme="dark"] .flight-card {
  background: var(--sgs-card-bg);
  border-color: var(--sgs-border);
}
html[data-theme="dark"] .flight-card:hover {
  box-shadow: 0 2px 8px var(--sgs-shadow);
}
html[data-theme="dark"] .price-amount {
  color: var(--sgs-accent);
}
html[data-theme="dark"] .price-per-person {
  color: var(--sgs-text-secondary);
}
html[data-theme="dark"] .price-total {
  color: var(--sgs-text-primary);
}
html[data-theme="dark"] .price-class {
  color: var(--sgs-text-secondary);
}
html[data-theme="dark"] .route-time {
  color: var(--sgs-text-primary);
}
html[data-theme="dark"] .route-separator {
  color: var(--sgs-text-secondary);
}
html[data-theme="dark"] .route-duration {
  color: var(--sgs-text-primary);
}
html[data-theme="dark"] .route-codes {
  color: var(--sgs-text-secondary);
}
html[data-theme="dark"] .route-stops-info {
  color: var(--sgs-text-primary);
}
html[data-theme="dark"] .route-stop-codes {
  color: var(--sgs-text-secondary);
}
html[data-theme="dark"] .route-details,
html[data-theme="dark"] .airline-names {
  color: var(--sgs-text-secondary);
}
html[data-theme="dark"] .flight-card-details {
  border-top-color: var(--sgs-border);
  background: var(--sgs-section-bg);
}
html[data-theme="dark"] .flight-segment {
  border-bottom-color: var(--sgs-border);
}
html[data-theme="dark"] .segment-label {
  color: var(--sgs-text-primary);
}
html[data-theme="dark"] .segment-date,
html[data-theme="dark"] .segment-duration {
  color: var(--sgs-text-secondary);
}
html[data-theme="dark"] .flight-leg {
  border-bottom-color: var(--sgs-border-light);
}
html[data-theme="dark"] .leg-airline-name {
  color: var(--sgs-text-primary);
}
html[data-theme="dark"] .leg-flight-details {
  color: var(--sgs-text-secondary);
}
html[data-theme="dark"] .leg-timeline-dot {
  background: var(--sgs-text-secondary);
}
html[data-theme="dark"] .leg-timeline-line {
  background: var(--sgs-border);
}
html[data-theme="dark"] .leg-stop-time {
  color: var(--sgs-text-primary);
}
html[data-theme="dark"] .leg-stop-location {
  color: var(--sgs-text-secondary);
}
html[data-theme="dark"] .leg-stop-airport {
  color: var(--sgs-text-muted);
}
html[data-theme="dark"] .leg-duration-label {
  color: var(--sgs-text-secondary);
}
html[data-theme="dark"] .leg-layover {
  border-top-color: var(--sgs-border);
  border-bottom-color: var(--sgs-border);
}
html[data-theme="dark"] .layover-icon {
  background: var(--sgs-warning-bg);
}
html[data-theme="dark"] .layover-duration {
  color: var(--sgs-warning-text);
}
html[data-theme="dark"] .layover-location {
  color: var(--sgs-warning-text);
}
html[data-theme="dark"] .expand-indicator {
  color: var(--sgs-accent);
}
html[data-theme="dark"] .flight-card.selected {
  border-color: var(--sgs-accent);
  box-shadow: 0 0 0 2px rgba(90, 154, 181, 0.3);
}


/* ============================================================
   HOTEL CARD
   ============================================================ */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hotel-card {
    border-bottom-color: var(--sgs-border);
  }
  :root:not([data-theme="light"]) .hotel-card:hover {
    background-color: var(--sgs-hover-bg);
  }
  :root:not([data-theme="light"]) .hotel-name {
    color: var(--sgs-text-primary);
  }
  :root:not([data-theme="light"]) .review-count {
    color: var(--sgs-text-secondary);
  }
  :root:not([data-theme="light"]) .hotel-location {
    color: var(--sgs-text-secondary);
  }
  :root:not([data-theme="light"]) .price-per-night {
    color: var(--sgs-text-secondary);
  }
  :root:not([data-theme="light"]) .total-price {
    color: var(--sgs-text-secondary);
  }
  :root:not([data-theme="light"]) .price-breakdown {
    color: var(--sgs-text-muted);
  }
  :root:not([data-theme="light"]) .price-original {
    color: var(--sgs-text-muted);
  }
  :root:not([data-theme="light"]) .price-main {
    color: var(--sgs-accent);
  }
  :root:not([data-theme="light"]) .price-taxes {
    color: var(--sgs-text-secondary);
  }
  :root:not([data-theme="light"]) .detail-item {
    color: var(--sgs-text-secondary);
  }
  :root:not([data-theme="light"]) .detail-label {
    color: var(--sgs-text-primary);
  }
  :root:not([data-theme="light"]) .amenity-tag {
    background: var(--sgs-surface-bg);
    border-color: var(--sgs-border);
    color: var(--sgs-text-secondary);
  }
  :root:not([data-theme="light"]) .badge-constructive {
    background: var(--sgs-success-bg);
    color: var(--sgs-success-text);
    border-color: var(--sgs-success-border);
  }
  :root:not([data-theme="light"]) .badge-default {
    background: var(--sgs-surface-bg);
    color: var(--sgs-text-secondary);
    border-color: var(--sgs-border);
  }
  :root:not([data-theme="light"]) .hotel-card.selected {
    background-color: var(--sgs-selected-bg);
    border-left-color: var(--sgs-accent);
    border-bottom-color: var(--sgs-selected-border);
  }
  :root:not([data-theme="light"]) .hotel-card.selected .selected-badge-text {
    background: #28a745;
  }
  :root:not([data-theme="light"]) .hotel-image-placeholder {
    background: linear-gradient(135deg, #1e1e1e 0%, #2a2a2a 100%);
    border-color: var(--sgs-border);
    color: var(--sgs-text-secondary);
  }
}

html[data-theme="dark"] .hotel-card {
  border-bottom-color: var(--sgs-border);
}
html[data-theme="dark"] .hotel-card:hover {
  background-color: var(--sgs-hover-bg);
}
html[data-theme="dark"] .hotel-name {
  color: var(--sgs-text-primary);
}
html[data-theme="dark"] .review-count {
  color: var(--sgs-text-secondary);
}
html[data-theme="dark"] .hotel-location {
  color: var(--sgs-text-secondary);
}
html[data-theme="dark"] .price-per-night {
  color: var(--sgs-text-secondary);
}
html[data-theme="dark"] .total-price {
  color: var(--sgs-text-secondary);
}
html[data-theme="dark"] .price-breakdown {
  color: var(--sgs-text-muted);
}
html[data-theme="dark"] .price-original {
  color: var(--sgs-text-muted);
}
html[data-theme="dark"] .price-main {
  color: var(--sgs-accent);
}
html[data-theme="dark"] .price-taxes {
  color: var(--sgs-text-secondary);
}
html[data-theme="dark"] .detail-item {
  color: var(--sgs-text-secondary);
}
html[data-theme="dark"] .detail-label {
  color: var(--sgs-text-primary);
}
html[data-theme="dark"] .amenity-tag {
  background: var(--sgs-surface-bg);
  border-color: var(--sgs-border);
  color: var(--sgs-text-secondary);
}
html[data-theme="dark"] .badge-constructive {
  background: var(--sgs-success-bg);
  color: var(--sgs-success-text);
  border-color: var(--sgs-success-border);
}
html[data-theme="dark"] .badge-default {
  background: var(--sgs-surface-bg);
  color: var(--sgs-text-secondary);
  border-color: var(--sgs-border);
}
html[data-theme="dark"] .hotel-card.selected {
  background-color: var(--sgs-selected-bg);
  border-left-color: var(--sgs-accent);
  border-bottom-color: var(--sgs-selected-border);
}
html[data-theme="dark"] .hotel-card.selected .selected-badge-text {
  background: #28a745;
}
html[data-theme="dark"] .hotel-image-placeholder {
  background: linear-gradient(135deg, #1e1e1e 0%, #2a2a2a 100%);
  border-color: var(--sgs-border);
  color: var(--sgs-text-secondary);
}


/* ============================================================
   TRAIN CARD
   ============================================================ */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .train-card {
    border-bottom-color: var(--sgs-border);
    background: var(--sgs-card-bg);
  }
  :root:not([data-theme="light"]) .train-card:hover {
    background-color: var(--sgs-hover-bg);
  }
  :root:not([data-theme="light"]) .train-type {
    color: var(--sgs-text-primary);
  }
  :root:not([data-theme="light"]) .train-number {
    color: var(--sgs-text-secondary);
  }
  :root:not([data-theme="light"]) .station-time {
    color: var(--sgs-text-primary);
  }
  :root:not([data-theme="light"]) .station-name {
    color: var(--sgs-text-secondary);
  }
  :root:not([data-theme="light"]) .duration-text {
    color: var(--sgs-text-secondary);
  }
  :root:not([data-theme="light"]) .train-emoji {
    background: var(--sgs-card-bg);
  }
  :root:not([data-theme="light"]) .train-metadata {
    color: var(--sgs-text-secondary);
    border-top-color: var(--sgs-border);
  }
  :root:not([data-theme="light"]) .class-badge {
    background-color: #1a3050;
    color: #6ab4e8;
  }
  :root:not([data-theme="light"]) .train-card.selected {
    background-color: #1a3050;
    border-left-color: #007cba;
  }
}

html[data-theme="dark"] .train-card {
  border-bottom-color: var(--sgs-border);
  background: var(--sgs-card-bg);
}
html[data-theme="dark"] .train-card:hover {
  background-color: var(--sgs-hover-bg);
}
html[data-theme="dark"] .train-type {
  color: var(--sgs-text-primary);
}
html[data-theme="dark"] .train-number {
  color: var(--sgs-text-secondary);
}
html[data-theme="dark"] .station-time {
  color: var(--sgs-text-primary);
}
html[data-theme="dark"] .station-name {
  color: var(--sgs-text-secondary);
}
html[data-theme="dark"] .duration-text {
  color: var(--sgs-text-secondary);
}
html[data-theme="dark"] .train-emoji {
  background: var(--sgs-card-bg);
}
html[data-theme="dark"] .train-metadata {
  color: var(--sgs-text-secondary);
  border-top-color: var(--sgs-border);
}
html[data-theme="dark"] .class-badge {
  background-color: #1a3050;
  color: #6ab4e8;
}
html[data-theme="dark"] .train-card.selected {
  background-color: #1a3050;
  border-left-color: #007cba;
}


/* ============================================================
   SEARCH / SELECTION PAGES (flight, hotel, train)
   ============================================================ */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .selection-header,
  :root:not([data-theme="light"]) .search-header {
    background: var(--sgs-section-bg);
    border-color: var(--sgs-border);
  }
  :root:not([data-theme="light"]) .search-header h1,
  :root:not([data-theme="light"]) .search-header h2,
  :root:not([data-theme="light"]) .selection-header h1 {
    color: var(--sgs-text-primary);
  }
  :root:not([data-theme="light"]) .selection-header p,
  :root:not([data-theme="light"]) .search-header p {
    color: var(--sgs-text-secondary);
  }
  :root:not([data-theme="light"]) .current-selection {
    background: var(--sgs-info-bg);
    border-color: var(--sgs-info-border);
  }
  :root:not([data-theme="light"]) .current-selection h3 {
    color: var(--sgs-accent);
  }
  :root:not([data-theme="light"]) .info-item {
    background: var(--sgs-card-bg);
    border-color: var(--sgs-border);
  }
  :root:not([data-theme="light"]) .info-label {
    color: var(--sgs-text-secondary);
  }
  :root:not([data-theme="light"]) .info-value {
    color: var(--sgs-text-primary);
  }
  :root:not([data-theme="light"]) .filters-sidebar {
    background: var(--sgs-card-bg);
    box-shadow: 0 2px 4px var(--sgs-shadow);
  }
  :root:not([data-theme="light"]) .filter-title {
    color: var(--sgs-text-primary);
  }
  :root:not([data-theme="light"]) .filter-section {
    border-bottom-color: var(--sgs-border);
  }
  :root:not([data-theme="light"]) .direct-filter-option {
    background: var(--sgs-info-bg);
    border-color: var(--sgs-info-border);
  }
  :root:not([data-theme="light"]) .direct-filter-option:hover {
    background: #1a3550;
  }
  :root:not([data-theme="light"]) .direct-filter-option label {
    color: var(--sgs-accent);
  }
  :root:not([data-theme="light"]) .stops-filter-option:hover,
  :root:not([data-theme="light"]) .star-filter-option:hover,
  :root:not([data-theme="light"]) .review-score-option:hover {
    background: var(--sgs-hover-bg);
  }
  :root:not([data-theme="light"]) .flights-container,
  :root:not([data-theme="light"]) .hotels-container,
  :root:not([data-theme="light"]) .trains-container {
    background: var(--sgs-card-bg);
    box-shadow: 0 2px 4px var(--sgs-shadow);
  }
  :root:not([data-theme="light"]) .flight-card-wrapper {
    background: var(--sgs-card-bg);
  }
  :root:not([data-theme="light"]) .no-filter-results {
    color: var(--sgs-warning-text);
    background: var(--sgs-warning-bg);
    border-color: var(--sgs-warning-border);
  }
  :root:not([data-theme="light"]) .selection-actions {
    background: var(--sgs-card-bg);
    border-top-color: var(--sgs-border);
    box-shadow: 0 -2px 8px var(--sgs-shadow);
  }
  :root:not([data-theme="light"]) .btn-back {
    background: var(--sgs-card-bg);
    color: var(--sgs-text-primary);
    border-color: var(--sgs-border);
  }
  :root:not([data-theme="light"]) .btn-back:hover {
    background: var(--sgs-hover-bg);
    border-color: var(--sgs-text-secondary);
    color: var(--sgs-text-primary);
  }
  :root:not([data-theme="light"]) .error-message {
    background: var(--sgs-error-bg);
    color: var(--sgs-error-text);
    border-color: var(--sgs-error-border);
  }
  :root:not([data-theme="light"]) .no-results {
    color: var(--sgs-text-secondary);
  }
  :root:not([data-theme="light"]) .spinner {
    border-color: var(--sgs-border);
    border-top-color: var(--sgs-accent);
  }
  :root:not([data-theme="light"]) .search-status {
    color: var(--sgs-text-secondary);
  }
  /* Train search results specific */
  :root:not([data-theme="light"]) .results-section {
    background: var(--sgs-card-bg);
    box-shadow: 0 2px 4px var(--sgs-shadow);
  }
  :root:not([data-theme="light"]) .section-title {
    color: var(--sgs-text-primary);
  }
  :root:not([data-theme="light"]) .trains-count {
    color: var(--sgs-text-secondary);
  }
  :root:not([data-theme="light"]) .journey-label {
    background: var(--sgs-card-bg);
  }
  :root:not([data-theme="light"]) .journey-separator::before {
    background: var(--sgs-border);
  }
  :root:not([data-theme="light"]) .success-message {
    background: var(--sgs-success-bg);
    color: var(--sgs-success-text);
    border-color: var(--sgs-success-border);
  }
  /* Train selection specific */
  :root:not([data-theme="light"]) .selection-summary {
    background: var(--sgs-warning-bg);
    border-color: var(--sgs-warning-border);
  }
  :root:not([data-theme="light"]) .selection-summary strong {
    color: var(--sgs-warning-text);
  }
  :root:not([data-theme="light"]) .selected-indicator {
    background: #28a745;
  }
}

html[data-theme="dark"] .selection-header,
html[data-theme="dark"] .search-header {
  background: var(--sgs-section-bg);
  border-color: var(--sgs-border);
}
html[data-theme="dark"] .search-header h1,
html[data-theme="dark"] .search-header h2,
html[data-theme="dark"] .selection-header h1 {
  color: var(--sgs-text-primary);
}
html[data-theme="dark"] .selection-header p,
html[data-theme="dark"] .search-header p {
  color: var(--sgs-text-secondary);
}
html[data-theme="dark"] .current-selection {
  background: var(--sgs-info-bg);
  border-color: var(--sgs-info-border);
}
html[data-theme="dark"] .current-selection h3 {
  color: var(--sgs-accent);
}
html[data-theme="dark"] .info-item {
  background: var(--sgs-card-bg);
  border-color: var(--sgs-border);
}
html[data-theme="dark"] .info-label {
  color: var(--sgs-text-secondary);
}
html[data-theme="dark"] .info-value {
  color: var(--sgs-text-primary);
}
html[data-theme="dark"] .filters-sidebar {
  background: var(--sgs-card-bg);
  box-shadow: 0 2px 4px var(--sgs-shadow);
}
html[data-theme="dark"] .filter-title {
  color: var(--sgs-text-primary);
}
html[data-theme="dark"] .filter-section {
  border-bottom-color: var(--sgs-border);
}
html[data-theme="dark"] .direct-filter-option {
  background: var(--sgs-info-bg);
  border-color: var(--sgs-info-border);
}
html[data-theme="dark"] .direct-filter-option:hover {
  background: #1a3550;
}
html[data-theme="dark"] .direct-filter-option label {
  color: var(--sgs-accent);
}
html[data-theme="dark"] .stops-filter-option:hover,
html[data-theme="dark"] .star-filter-option:hover,
html[data-theme="dark"] .review-score-option:hover {
  background: var(--sgs-hover-bg);
}
html[data-theme="dark"] .flights-container,
html[data-theme="dark"] .hotels-container,
html[data-theme="dark"] .trains-container {
  background: var(--sgs-card-bg);
  box-shadow: 0 2px 4px var(--sgs-shadow);
}
html[data-theme="dark"] .flight-card-wrapper {
  background: var(--sgs-card-bg);
}
html[data-theme="dark"] .no-filter-results {
  color: var(--sgs-warning-text);
  background: var(--sgs-warning-bg);
  border-color: var(--sgs-warning-border);
}
html[data-theme="dark"] .selection-actions {
  background: var(--sgs-card-bg);
  border-top-color: var(--sgs-border);
  box-shadow: 0 -2px 8px var(--sgs-shadow);
}
html[data-theme="dark"] .btn-back {
  background: var(--sgs-card-bg);
  color: var(--sgs-text-primary);
  border-color: var(--sgs-border);
}
html[data-theme="dark"] .btn-back:hover {
  background: var(--sgs-hover-bg);
  border-color: var(--sgs-text-secondary);
  color: var(--sgs-text-primary);
}
html[data-theme="dark"] .error-message {
  background: var(--sgs-error-bg);
  color: var(--sgs-error-text);
  border-color: var(--sgs-error-border);
}
html[data-theme="dark"] .no-results {
  color: var(--sgs-text-secondary);
}
html[data-theme="dark"] .spinner {
  border-color: var(--sgs-border);
  border-top-color: var(--sgs-accent);
}
html[data-theme="dark"] .search-status {
  color: var(--sgs-text-secondary);
}
html[data-theme="dark"] .results-section {
  background: var(--sgs-card-bg);
  box-shadow: 0 2px 4px var(--sgs-shadow);
}
html[data-theme="dark"] .section-title {
  color: var(--sgs-text-primary);
}
html[data-theme="dark"] .trains-count {
  color: var(--sgs-text-secondary);
}
html[data-theme="dark"] .journey-label {
  background: var(--sgs-card-bg);
}
html[data-theme="dark"] .journey-separator::before {
  background: var(--sgs-border);
}
html[data-theme="dark"] .success-message {
  background: var(--sgs-success-bg);
  color: var(--sgs-success-text);
  border-color: var(--sgs-success-border);
}
html[data-theme="dark"] .selection-summary {
  background: var(--sgs-warning-bg);
  border-color: var(--sgs-warning-border);
}
html[data-theme="dark"] .selection-summary strong {
  color: var(--sgs-warning-text);
}
html[data-theme="dark"] .selected-indicator {
  background: #28a745;
}


/* ============================================================
   CHANGE FORMS (Travel Request, Quotation)
   ============================================================ */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .flight-search-section,
  :root:not([data-theme="light"]) .hotel-search-section {
    background: var(--sgs-section-bg);
    border-color: var(--sgs-border);
  }
  :root:not([data-theme="light"]) .flight-search-header h3 {
    color: var(--sgs-accent);
  }
  :root:not([data-theme="light"]) .flight-status.success,
  :root:not([data-theme="light"]) .hotel-status.success,
  :root:not([data-theme="light"]) .train-status.success {
    background: var(--sgs-success-bg);
    color: var(--sgs-success-text);
    border-color: var(--sgs-success-border);
  }
  :root:not([data-theme="light"]) .flight-status.error,
  :root:not([data-theme="light"]) .hotel-status.error,
  :root:not([data-theme="light"]) .train-status.error {
    background: var(--sgs-error-bg);
    color: var(--sgs-error-text);
    border-color: var(--sgs-error-border);
  }
  :root:not([data-theme="light"]) .flight-status.pending,
  :root:not([data-theme="light"]) .hotel-status.pending,
  :root:not([data-theme="light"]) .train-status.pending {
    background: var(--sgs-warning-bg);
    color: var(--sgs-warning-text);
    border-color: var(--sgs-warning-border);
  }
  :root:not([data-theme="light"]) .airport-checker {
    background: var(--sgs-card-bg);
    border-color: var(--sgs-border);
  }
  :root:not([data-theme="light"]) .airport-checker h4 {
    color: var(--sgs-text-primary);
  }
  :root:not([data-theme="light"]) .airport-input {
    background: var(--sgs-input-bg);
    border-color: var(--sgs-border);
    color: var(--sgs-text-primary);
  }
  :root:not([data-theme="light"]) .airport-result.success {
    background: var(--sgs-success-bg);
    color: var(--sgs-success-text);
    border-color: var(--sgs-success-border);
  }
  :root:not([data-theme="light"]) .airport-result.error {
    background: var(--sgs-error-bg);
    color: var(--sgs-error-text);
    border-color: var(--sgs-error-border);
  }
  :root:not([data-theme="light"]) .help-text {
    color: var(--sgs-text-secondary);
  }
  /* Quotation change form */
  :root:not([data-theme="light"]) .quotation-send-section {
    background: var(--sgs-section-bg);
    border-color: var(--sgs-border);
  }
  :root:not([data-theme="light"]) .quotation-send-section .status-draft {
    color: var(--sgs-warning-text);
    background: var(--sgs-warning-bg);
  }
  :root:not([data-theme="light"]) .quotation-send-section .status-sent {
    color: var(--sgs-success-text);
    background: var(--sgs-success-bg);
  }
  :root:not([data-theme="light"]) .send-tickets-btn:disabled {
    background: var(--sgs-border);
  }
}

html[data-theme="dark"] .flight-search-section,
html[data-theme="dark"] .hotel-search-section {
  background: var(--sgs-section-bg);
  border-color: var(--sgs-border);
}
html[data-theme="dark"] .flight-search-header h3 {
  color: var(--sgs-accent);
}
html[data-theme="dark"] .flight-status.success,
html[data-theme="dark"] .hotel-status.success,
html[data-theme="dark"] .train-status.success {
  background: var(--sgs-success-bg);
  color: var(--sgs-success-text);
  border-color: var(--sgs-success-border);
}
html[data-theme="dark"] .flight-status.error,
html[data-theme="dark"] .hotel-status.error,
html[data-theme="dark"] .train-status.error {
  background: var(--sgs-error-bg);
  color: var(--sgs-error-text);
  border-color: var(--sgs-error-border);
}
html[data-theme="dark"] .flight-status.pending,
html[data-theme="dark"] .hotel-status.pending,
html[data-theme="dark"] .train-status.pending {
  background: var(--sgs-warning-bg);
  color: var(--sgs-warning-text);
  border-color: var(--sgs-warning-border);
}
html[data-theme="dark"] .airport-checker {
  background: var(--sgs-card-bg);
  border-color: var(--sgs-border);
}
html[data-theme="dark"] .airport-checker h4 {
  color: var(--sgs-text-primary);
}
html[data-theme="dark"] .airport-input {
  background: var(--sgs-input-bg);
  border-color: var(--sgs-border);
  color: var(--sgs-text-primary);
}
html[data-theme="dark"] .airport-result.success {
  background: var(--sgs-success-bg);
  color: var(--sgs-success-text);
  border-color: var(--sgs-success-border);
}
html[data-theme="dark"] .airport-result.error {
  background: var(--sgs-error-bg);
  color: var(--sgs-error-text);
  border-color: var(--sgs-error-border);
}
html[data-theme="dark"] .help-text {
  color: var(--sgs-text-secondary);
}
html[data-theme="dark"] .quotation-send-section {
  background: var(--sgs-section-bg);
  border-color: var(--sgs-border);
}
html[data-theme="dark"] .quotation-send-section .status-draft {
  color: var(--sgs-warning-text);
  background: var(--sgs-warning-bg);
}
html[data-theme="dark"] .quotation-send-section .status-sent {
  color: var(--sgs-success-text);
  background: var(--sgs-success-bg);
}
html[data-theme="dark"] .send-tickets-btn:disabled {
  background: var(--sgs-border);
}


/* ============================================================
   QUOTATION COMMENTS PAGE
   ============================================================ */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .comment-author-name {
    color: var(--sgs-text-primary) !important;
  }
  :root:not([data-theme="light"]) .comment-date {
    color: var(--sgs-text-muted) !important;
  }
  :root:not([data-theme="light"]) .comment-body {
    background: var(--sgs-surface-bg) !important;
    border-color: var(--sgs-border) !important;
  }
  :root:not([data-theme="light"]) .comment-row {
    border-bottom-color: var(--sgs-border) !important;
  }
  :root:not([data-theme="light"]) .no-comments-text {
    color: var(--sgs-text-secondary) !important;
  }
  :root:not([data-theme="light"]) #alert-container .success {
    background: var(--sgs-success-bg);
    border-color: var(--sgs-success-border);
    color: var(--sgs-success-text);
  }
  :root:not([data-theme="light"]) #alert-container .error {
    background: var(--sgs-error-bg);
    border-color: var(--sgs-error-border);
    color: var(--sgs-error-text);
  }
}

html[data-theme="dark"] .comment-author-name {
  color: var(--sgs-text-primary) !important;
}
html[data-theme="dark"] .comment-date {
  color: var(--sgs-text-muted) !important;
}
html[data-theme="dark"] .comment-body {
  background: var(--sgs-surface-bg) !important;
  border-color: var(--sgs-border) !important;
}
html[data-theme="dark"] .comment-row {
  border-bottom-color: var(--sgs-border) !important;
}
html[data-theme="dark"] .no-comments-text {
  color: var(--sgs-text-secondary) !important;
}
html[data-theme="dark"] #alert-container .success {
  background: var(--sgs-success-bg);
  border-color: var(--sgs-success-border);
  color: var(--sgs-success-text);
}
html[data-theme="dark"] #alert-container .error {
  background: var(--sgs-error-bg);
  border-color: var(--sgs-error-border);
  color: var(--sgs-error-text);
}


/* ============================================================
   STACKED INLINE WITH HISTORY BUTTON
   ============================================================ */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sgs-history-btn {
    background: var(--sgs-accent);
  }
  :root:not([data-theme="light"]) .sgs-history-btn:hover {
    background: var(--sgs-accent-hover);
  }
}

html[data-theme="dark"] .sgs-history-btn {
  background: var(--sgs-accent);
}
html[data-theme="dark"] .sgs-history-btn:hover {
  background: var(--sgs-accent-hover);
}


/* ============================================================
   FILTER SIDEBAR HEADER (inline style overrides)
   ============================================================ */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .filter-header-title h3 {
    color: var(--sgs-text-primary) !important;
  }
}
html[data-theme="dark"] .filter-header-title h3 {
  color: var(--sgs-text-primary) !important;
}


/* ============================================================
   PRICE WARNING BANNER (train search)
   ============================================================ */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .price-warning-banner {
    background-color: #8b2020;
  }
}
html[data-theme="dark"] .price-warning-banner {
  background-color: #8b2020;
}