/* Dark Mode Base Styles */
body.dark-mode #ol-map {
    border-radius: 0px;
    background: #1a1a1a;
}

body.dark-mode #upload-controls-overlay {
    background: rgba(42, 42, 42, 0.95);
    color: #e0e0e0;
}

body.dark-mode .tra-aktivierung-reiter {
    background: #34495e;
    color: white;
    padding: 10px 15px;
    border-radius: 0 0 6px 6px;
    font-weight: bold;
    margin-bottom: 0;
}

body.dark-mode #track-info, body.dark-mode #violation-summary {
    max-height: 150px;
    overflow-y: auto;
    background: #2a2a2a;
    padding: 8px;
    border-radius: 4px;
    border: 1px solid #444;
    max-width: 360px;
    color: #e0e0e0;
}

body.dark-mode button:hover {
    opacity: 0.9;
}

body.dark-mode button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Dark Mode Chart Styles */
body.dark-mode #altitude-chart-container {
    background: #2a2a2a;
    margin-bottom: 10px;
    color: #e0e0e0;
    box-sizing: border-box;
}

body.dark-mode .altitude-scale-controls {
    background: linear-gradient(180deg, rgba(45, 52, 70, 0.96) 0%, rgba(32, 36, 48, 0.94) 100%);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 12px 22px rgba(2, 6, 23, 0.45);
    color: #ecf0f1;
}

body.dark-mode .altitude-scale-controls.is-active {
    border-color: rgba(52, 152, 219, 0.55);
    box-shadow: inset 0 0 0 1px rgba(52, 152, 219, 0.35), 0 16px 28px rgba(2, 6, 23, 0.55);
}

body.dark-mode .altitude-scale-controls__value {
    color: #ecf0f1;
}

body.dark-mode .altitude-scale-input::-webkit-slider-runnable-track,
body.dark-mode .altitude-scale-input::-moz-range-track,
body.dark-mode .altitude-scale-input::-ms-track {
    background: linear-gradient(180deg, rgba(60, 74, 99, 0.9), rgba(35, 43, 60, 0.95));
    box-shadow: inset 0 0 0 1px rgba(6, 13, 23, 0.35), inset 0 8px 12px rgba(6, 13, 23, 0.2);
}

body.dark-mode .altitude-scale-input::-webkit-slider-thumb,
body.dark-mode .altitude-scale-input::-moz-range-thumb,
body.dark-mode .altitude-scale-input::-ms-thumb {
    background: linear-gradient(180deg, rgba(82, 101, 133, 0.95), rgba(48, 59, 80, 0.95));
    border: 1px solid rgba(12, 25, 43, 0.55);
    box-shadow: 0 4px 10px rgba(10, 20, 33, 0.45);
}

body.dark-mode .altitude-scale-input:focus-visible::-webkit-slider-thumb,
body.dark-mode .altitude-scale-input:focus-visible::-moz-range-thumb,
body.dark-mode .altitude-scale-input:focus-visible::-ms-thumb {
    border-color: rgba(52, 152, 219, 0.75);
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.25);
}

body.dark-mode .altitude-scale-input:active::-webkit-slider-thumb,
body.dark-mode .altitude-scale-input:active::-moz-range-thumb,
body.dark-mode .altitude-scale-input:active::-ms-thumb {
    background: linear-gradient(180deg, rgba(92, 115, 151, 0.98), rgba(52, 66, 90, 0.98));
    box-shadow: 0 5px 12px rgba(10, 20, 33, 0.5);
}

body.dark-mode #altitude-chart {
    border:2px solid #34495e; 
    cursor: crosshair;
    width: 100%;
    height: 450px;
    display: block;
    background: #1a1a1a;
}

body.dark-mode #chart-selection-info {
    color: #e5e7eb;
}

body.dark-mode .chart-selection-info.is-empty {
    opacity: 0.55;
}

body.dark-mode .interactive-details-container {
    background: rgba(17, 24, 39, 0.9);
    border-color: rgba(148, 163, 184, 0.35);
}

body.dark-mode .interactive-details-panel {
    border-color: rgba(148, 163, 184, 0.35);
}

body.dark-mode .interactive-details-toggle {
    color: rgba(229, 231, 235, 0.9);
}

body.dark-mode .interactive-details-toggle__icon {
    background: rgba(255, 255, 255, 0.08);
}

body.dark-mode .interactive-details-summary {
    color: rgba(229, 231, 235, 0.85);
}

body.dark-mode .interactive-details-grid {
    gap: 14px;
}

body.dark-mode .interactive-detail-card {
    background: rgba(17, 24, 39, 0.85);
    border-color: rgba(148, 163, 184, 0.35);
    box-shadow: none;
    border-radius: 0;
}

body.dark-mode .interactive-detail-label {
    color: rgba(229, 231, 235, 0.7);
}

body.dark-mode .interactive-detail-value,
body.dark-mode .interactive-detail-value.is-muted,
body.dark-mode .interactive-detail-value.is-coordinates,
body.dark-mode .interactive-detail-value.is-violation {
    color: #f9fafb;
}

body.dark-mode .altitude-chart-multipilot-wrapper {
    background: #0f172a;
    border-color: #1f2937;
}

body.dark-mode .altitude-chart-replay-controls {
    background: rgba(15, 23, 42, 0.86);
    border-color: rgba(148, 163, 184, 0.24);
}

body.dark-mode .altitude-chart-replay-button {
    background: rgba(15, 23, 42, 0.9);
    border-color: rgba(148, 163, 184, 0.35);
    color: #e2e8f0;
}

body.dark-mode .altitude-chart-replay-button:hover:not(:disabled) {
    border-color: #60a5fa;
    color: #bfdbfe;
}

body.dark-mode .altitude-chart-replay-button.is-active {
    background: #2563eb;
    border-color: #2563eb;
    color: #eff6ff;
}

body.dark-mode .altitude-chart-replay-speed-label {
    color: rgba(226, 232, 240, 0.72);
}

body.dark-mode .altitude-chart-replay-speed {
    background: rgba(15, 23, 42, 0.9);
    border-color: rgba(148, 163, 184, 0.35);
    color: #f8fafc;
}

body.dark-mode .altitude-chart-replay-time {
    color: #e2e8f0;
}

body.dark-mode .altitude-chart-replay-timeline__edge {
    color: rgba(226, 232, 240, 0.72);
}

body.dark-mode .altitude-chart-replay-timeline__input {
    accent-color: #60a5fa;
}

body.dark-mode .altitude-chart-replay-timeline__input::-webkit-slider-runnable-track {
    background: linear-gradient(90deg, #60a5fa 0%, #60a5fa var(--replay-progress), rgba(148, 163, 184, 0.28) var(--replay-progress), rgba(148, 163, 184, 0.28) 100%);
}

body.dark-mode .altitude-chart-replay-timeline__input::-moz-range-track {
    background: linear-gradient(90deg, #60a5fa 0%, #60a5fa var(--replay-progress), rgba(148, 163, 184, 0.28) var(--replay-progress), rgba(148, 163, 184, 0.28) 100%);
}

body.dark-mode .interactive-details-multipilot-card {
    background: #111827;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: none;
}

body.dark-mode .interactive-details-multipilot-card__name {
    color: #f9fafb;
}

body.dark-mode .interactive-details-multipilot-card__subtitle {
    color: rgba(226, 232, 240, 0.8);
}

body.dark-mode .interactive-details-multipilot-card__label {
    color: rgba(226, 232, 240, 0.65);
}

body.dark-mode .interactive-details-multipilot-card__value {
    color: #f8fafc;
}

body.dark-mode .interactive-detail-note {
    color: rgba(229, 231, 235, 0.7);
}

body.dark-mode .map-track-info-placeholder {
    border-color: rgba(148, 163, 184, 0.35);
    background: rgba(30, 41, 59, 0.55);
    color: #d1d5db;
}

body.dark-mode .map-track-info-placeholder i {
    color: #60a5fa;
}

body.dark-mode .right-panel {
    background: #111827;
    border-left: 1px solid rgba(148, 163, 184, 0.25);
}

body.dark-mode .right-wrapper {
    background: transparent;
}

body.dark-mode .right-panel-toggle {
    background: #1f2937;
    color: #e2e8f0;
}

body.dark-mode .right-panel-toggle:hover {
    background: #0f172a;
}

body.dark-mode .xc-flightcheck-layout.is-right-collapsed .right-panel-toggle {
    background: #2563eb;
    color: #e0f2fe;
}

body.dark-mode .xc-flightcheck-layout.is-right-collapsed .right-panel-toggle:hover {
    background: #1d4ed8;
}
body.dark-mode #api-calls-container {
    max-height: 300px;
    overflow-y: auto;
    background: #3a3a2a;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #555;
    margin-top: 10px;
    color: #e0e0e0;
}

body.dark-mode #color-legend {
    background: #2a2a2a;
    border: 1px solid #444;
    color: #e0e0e0;
}

body.dark-mode .legend-item {
    color: #e0e0e0;
}

/* Dark Mode Text Styles */
body.dark-mode .section-title { color: #eee; }
body.dark-mode .section-title-danger { color: #ff7966; }
body.dark-mode .panel-title { color: #5fb3c7; }
body.dark-mode .panel-body-small { color: #aaa; }
body.dark-mode .muted { color: #aaa; }
body.dark-mode .muted-italic { color: #999; }

/* Dark Mode Notes */
body.dark-mode .note-info {
  background: #1e3a4a;
  border: 1px solid #235066;
  color: #9fd1f0;
}

body.dark-mode .note-warning {
  background: #5a4a1a;
  border: 1px solid #8a751f;
  color: #ffdd88;
}

/* Dark Mode Panels */
body.dark-mode .panel {
  color: #ccc;
  border: 1px solid #444;
}

body.dark-mode .panel-light { background: #2a2a2a; }

body.dark-mode .panel-warn {
  background: #5a4a1a;
  border-color: #8a751f;
  color: #ffdd88;
}

body.dark-mode .panel-info {
  background: #1e3a4a;
  border-color: #235066;
  color: #9fd1f0;
}

/* Dark Mode Buttons */
body.dark-mode .btn-primary { background: #2980b9; }
body.dark-mode .btn-secondary { background: #7f8c8d; }
body.dark-mode .btn-danger { background: #c0392b; }

/* Dark Mode Map */
body.dark-mode .ol-map { background: #1a1a1a; }
body.dark-mode .ol-info-box { color: #ddd; }
body.dark-mode .ol-info-box .track-media-info__frame { background: #111827; }
body.dark-mode .ol-info-box .track-media-info__caption,
body.dark-mode .ol-info-box .track-media-info__meta-row strong { color: #f8fafc; }
body.dark-mode .ol-info-box .track-media-info__meta-row { color: #cbd5e1; }
body.dark-mode .ol-info-box .track-media-info__actions a { color: #93c5fd; }
body.dark-mode .ol-info-box .track-media-info__inline-row { color: #cbd5e1; }
body.dark-mode .ol-info-box .track-media-info__inline-link { color: #93c5fd; }

/* Dark Mode Popup */
body.dark-mode .popup-content {
  background: #2a2a2a;
  color: #e0e0e0;
}

body.dark-mode .popup-title { color: #5fb3c7; }
body.dark-mode .popup-subtitle { color: #bbb; }

body.dark-mode .dropzone {
  background: #2f2f2f;
  border: 2px dashed #555;
  color: #bbb;
}

body.dark-mode .dropzone-hint { color: #888; }

body.dark-mode .file-input {
  background: #2a2a2a;
  border: 1px solid #555;
  color: #e0e0e0;
}

body.dark-mode .popup-footnote { 
  background: #1e3a4a;
  border: 1px solid #235066;
  color: #9fd1f0;
}

body.dark-mode .data-limitations {
  background: #5a4a1a;
  border: 1px solid #8a751f;
  color: #ffdd88;
}

/* Dark Mode Chart Variables */
body.dark-mode {
  --chart-grid-color: #444;
  --chart-text-color: #aaa;
  --chart-border-color: #666;
  --chart-zoom-text-color: #888;
  --chart-ground-stroke-color: #999;
  --chart-hover-point-stroke-color: #000000;
  --table-bg: #1e1e1e;
  --table-header-bg: #2a2a2a;
  --ground-color: #999;
}

body.dark-mode .altitude-chart-title {
  color: #e0e7ff;
}


/* Dark Mode Tables */
body.dark.mode .violation-table-title { color: #ff6b6b; }
body.dark.mode .violation-table-hint { color: #b5c7d6; }

body.dark.mode .violation-table {
  background: #1c1f24;
  border: 1px solid #2f3540;
  box-shadow: none;
}

body.dark.mode .violation-table-header {
  background: #1f3a2e;
  border-bottom: 1px solid #2d4c3d;
  color: #c9f0dc;
}

body.dark.mode .violation-header-cell.text-right {
  color: #c9f0dc;
}

body.dark.mode .violation-row {
  background: #1a1d22;
  border-bottom: 1px solid #2a2f36;
}

body.dark.mode .violation-row:nth-child(even) {
  background: #171a1f;
}

body.dark.mode .violation-cell {
  color: #d7e2f0;
}

body.dark.mode .violation-cell::before {
  color: #8caac4;
}

body.dark.mode .violation-cell-airspace .airspace-limits-box {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

body.dark.mode .violation-cell .limits-title {
  color: #b9decf;
}

body.dark.mode .violation-cell .limits-text {
  color: #d7e2f0;
}

body.dark.mode .violation-cell .no-data-text {
  color: #a3adbb;
}

body.dark.mode .violation-cell-right .time-info-container {
  color: #cad5dd;
}

body.dark.mode .violation-debug-row {
  background: #1c1f24;
  border-top: 1px dashed #343a40;
}

body.dark.mode .violation-debug-content {
  color: #d7e2f0;
  background: rgba(30, 34, 42, 0.85);
  border: 1px solid #323a45;
}

@media (max-width: 1024px) {
  body.dark.mode .violation-cell {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
  }

  body.dark.mode .violation-cell-airspace .airspace-limits-box {
    background: transparent;
    border: none;
  }

  body.dark.mode .violation-debug-content {
    background: rgba(30, 34, 42, 0.9);
  }
}

body.dark.mode .checkbox-row label { 
  color: #ccc; 
}

/* Dark Mode Airspace Sections */
body.dark.mode .airspace-section {
  background: #2a2a2a;
}

body.dark.mode .airspace-details {
  background: #1e1e1e;
  border: 1px solid #444;
}

body.dark.mode .airspace-details-title {
  color: #ccc;
}

body.dark.mode .status-active {
  color: #4caf50;
}

body.dark.mode .status-inactive {
  color: #999;
}

body.dark.mode .violation-section {
  background: #3a1f1f;
}

body.dark.mode .violation-title {
  color: #ff6b6b;
}

body.dark.mode .track-section.violation {
  background: #3a1f1f;
}

body.dark.mode .track-section.clean {
  background: #1f3a1f;
}

body.dark.mode .track-title.violation {
  color: #ff6b6b;
}

body.dark.mode .track-title.clean {
  color: #4caf50;
}

body.dark.mode .info-details {
  background: #1e1e1e;
  border: 1px solid #444;
}

body.dark.mode .airspace-section.highlighted {
  background: #3a3a2a;
}

body.dark.mode .airspace-section.highlighted .airspace-details {
  background: #2a2a2a;
  border-color: #FFD700;
}

/* Dark Mode IGC Validation */
body.dark.mode .igc-file-result {
  background: #2a2a2a;
}

body.dark.mode .igc-file-result.valid {
  background-color: #1f4a2a;
  border-color: #28a745;
  color: #a8d4b0;
}

body.dark.mode .igc-file-result.invalid {
  background-color: #4a1f1f;
  border-color: #dc3545;
  color: #ff9999;
}

body.dark.mode .igc-filename {
  color: #e0e0e0;
}

body.dark.mode .igc-validation-message {
  color: #aaa;
}

body.dark.mode .igc-validation-details {
  color: #888;
}

body.dark.mode .flight-info-item {
  background: #2a2a2a;
  border-left: 3px solid #5fb3c7;
}

body.dark.mode .flight-filename {
  color: #e0e0e0;
}

body.dark.mode .flight-date {
  color: #aaa;
}

body.dark.mode .no-files-message {
  color: #aaa;
}

/* Dark Mode Table Cells */
body.dark.mode .table-cell {
  border: 1px solid #444;
}

body.dark.mode .table-cell-right {
  border: 1px solid #444;
}

body.dark.mode .table-row {
  border-bottom: 1px solid #444;
}

body.dark.mode .airspace-meta {
  color: #aaa;
}

body.dark.mode .airspace-limits-box {
  background: #2a2a2a;
}

body.dark.mode .limits-title {
  color: #e0e0e0;
}

body.dark.mode .limits-text {
  color: #aaa;
}

/* Dark Mode TRA Info */
body.dark.mode .tra-info-active {
  background: #1f4a2a;
}

body.dark.mode .tra-info-inactive {
  background: #1e3a4a;
}

body.dark.mode .tra-text-active {
  color: #a8d4b0;
}

body.dark.mode .tra-text-inactive {
  color: #9fd1f0;
}

body.dark.mode .tra-warning {
  color: #ffdd88;
}

/* Dark Mode Altitude Display */
body.dark.mode .altitude-gps-ok {
  color: #4caf50;
}

body.dark.mode .altitude-gps-violation {
  color: #ff6b6b;
}

body.dark.mode .altitude-qnh-ok {
  color: #4caf50;
}

body.dark.mode .altitude-qnh-violation {
  color: #ff6b6b;
}

body.dark.mode .altitude-qnh-neutral {
  color: #aaa;
}

body.dark.mode .altitude-qne {
  color: #aaa;
  border-top: 1px solid #444;
}

body.dark.mode .qnh-settings-fallback {
  color: #ffdd88;
  background: #5a4a1a;
  border: 1px solid #8a751f;
}

body.dark.mode .qnh-settings-normal {
  color: #888;
}

/* Dark Mode Violation Depth */
body.dark.mode .violation-depth-violation {
  color: #ff6b6b;
}

body.dark.mode .violation-depth-ok {
  color: #4caf50;
}

body.dark.mode .violation-depth-protected {
  color: #4caf50;
}

body.dark.mode .violation-type {
  color: #888;
}

body.dark.mode .violation-debug {
  color: #888;
}

body.dark.mode .violation-debug-warning {
  color: #ff6b6b;
  background: #5a4a1a;
}

body.dark.mode .violation-debug-success {
  color: #4caf50;
  background: #1f4a2a;
}

body.dark.mode .no-data-text {
  color: #888;
}

/* Dark Mode Violation Status */
body.dark.mode .violation-status-qnh.violation {
  background: #cc3333;
  border-color: #aa0000;
}

body.dark.mode .violation-status-qnh.no-violation {
  background: #1e7e34;
  border-color: #155724;
}

body.dark.mode .violation-status-qnh.no-data {
  background: #495057;
  border-color: #343a40;
}

body.dark.mode .violation-status-gps.violation {
  background: #dd4444;
  border-color: #cc2222;
}

body.dark.mode .violation-status-gps.no-violation {
  background: #449d44;
  border-color: #357a35;
}

body.dark.mode .time-info-entry {
  color: #e0e0e0;
}

body.dark.mode .time-info-exit {
  color: #aaa;
}

body.dark.mode .time-info-duration {
  color: #4caf50;
}

body.dark.mode .time-info-points {
  color: #888;
}

/* Dark Mode Recall URL */
body.dark.mode #recall-url-container {
  background-color: #1f4a2a;
  border-color: #28a745;
}

body.dark.mode #recall-url-input {
  background: #2a2a2a;
  color: #2a2a2a;
  border-color: #28a745;
}

body.dark.mode .share-btn,
body.dark-mode .share-btn {
  background: linear-gradient(135deg, #4f46e5, #312e81);
  border-radius: 1px;
}

body.dark.mode .share-btn:hover:not(:disabled),
body.dark-mode .share-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #4338ca, #1e1b4b);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

body.dark.mode .share-menu,
body.dark-mode .share-menu {
  background: #1f2937;
  border-color: rgba(148, 163, 184, 0.35);
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.55);
  border-radius: 1px;
}

body.dark.mode .share-menu__item,
body.dark-mode .share-menu__item {
  color: #ffffff;
}

body.dark.mode .share-menu__item:hover,
body.dark-mode .share-menu__item:hover {
  background: linear-gradient(135deg, #312e81, #1d1b4f);
  transform: translateY(-1px);
}

body.dark.mode .share-menu__item.is-success,
body.dark-mode .share-menu__item.is-success {
  background: linear-gradient(135deg, #15803d, #166534);
}

body.dark.mode .share-menu__item.is-error,
body.dark-mode .share-menu__item.is-error {
  background: linear-gradient(135deg, #b91c1c, #7f1d1d);
}

body.dark.mode .share-menu__item--link,
body.dark-mode .share-menu__item--link {
  color: #ffffff;
}

body.dark.mode .share-menu__item--link:hover,
body.dark-mode .share-menu__item--link:hover {
  color: #ffffff;
}

body.dark.mode .share-menu__item--link i,
body.dark-mode .share-menu__item--link i {
  color: inherit;
}

body.dark.mode .share-overlay,
body.dark-mode .share-overlay {
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(2.5px);
}

/* Dark Mode Enhanced Track Info */
body.dark.mode .enhanced-track-info {
  background: transparent; 
  border: none;
  color: white;
}

/* Dark Mode Enhanced Track Info on map */
body.dark.mode #enhanced-track-info {
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
}

/* Dark mode map wrapper */
body.dark-mode .map-wrapper {
    background: #1a1a1a;
}

/* Dark mode enhanced track info sidebar */
body.dark-mode #enhanced-track-info {
    border-left: 1px solid #444;
}

/* Remove filter drop-shadow in dark mode for sidebar */
body.dark-mode #enhanced-track-info {
    filter: none;
}

/* Dark mode scrollbar */
body.dark-mode #enhanced-track-info::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

body.dark-mode #enhanced-track-info::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
}

body.dark-mode #enhanced-track-info::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Dark Mode Processing Status */
body.dark.mode .processing-status {
  background: #1e3a4a;
  border-color: #5fb3c7;
  color: #e0e0e0;
}

body.dark.mode .processing-status.in-progress {
  background: #5a4a1a;
  border-color: #f39c12;
  color: #ffdd88;
}

body.dark.mode .processing-status.completed {
  background: #1f4a2a;
  border-color: #27ae60;
  color: #a8d4b0;
}

body.dark.mode .processing-status.failed {
  background: #4a1f1f;
  border-color: #c0392b;
  color: #ff9999;
}

/* Dark Mode Stats Section */
body.dark.mode .stats-section {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

body.dark.mode .overview-card {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.1);
}

body.dark.mode .overview-card:hover {
  background: rgba(255, 255, 255, 0);
  border-color: rgba(255, 255, 255, 0.37);
}



/* Dark Mode Table Styles */
body.dark.mode .table thead tr {
  background: #2a2a2a;
  border-bottom: 2px solid #444;
}

body.dark.mode .table th,
body.dark.mode .table td {
  border: 1px solid #444;
  color: #e0e0e0;
}

/* Dark Mode Email Row */
body.dark.mode .email-row {
  background: #3a2a2a;
  border: 1px solid #8a751f;
  color: #ffdd88;
}

/* Dark Mode Display Settings */
body.dark-mode .display-settings-header {
    background: #2c2c2c !important;
    border-bottom: 1px solid #444 !important;
    color: #e0e0e0;
}

body.dark-mode .display-settings-header:hover {
    background: #3a3a3a !important;
}

body.dark-mode #display-settings-content {
    background: linear-gradient(135deg, #1f2b38 0%, #121a24 100%);
}

body.dark-mode #display-settings-chevron {
    color: #999 !important;
}

/* Dark Mode Developer Todo */
body.dark.mode .dev-todo-list {
  background: #2a2a2a;
  border: 1px solid #444;
  color: #e0e0e0;
}

body.dark.mode .dev-todo-list a {
  color: #5fb3c7;
}

body.dark.mode .dev-todo-list a:hover {
  color: #74b9ff;
}

/* Dark Mode QNH/QNE Dropdown */
body.dark.mode #qnh-qne-dropdown > div:first-child {
  background: linear-gradient(90deg, #1e3a4a 0%, #2a2a2a 100%);
  color: #e0e0e0;
  border: 1px solid #235066;
}

body.dark.mode #qnh-qne-toggle {
  color: #5fb3c7;
}

body.dark.mode #qnh-qne-content {
  background: #2a2a2a;
  border: 1px solid #444;
}

/* Dark Mode Info Box Overlay */
body.dark.mode #ol-feature-boxes-overlay {
  color: #e0e0e0;
}

/* Dark Mode Scrollbars (Webkit browsers) */
body.dark.mode ::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

body.dark.mode ::-webkit-scrollbar-track {
  background: #1a1a1a;
}

body.dark.mode ::-webkit-scrollbar-thumb {
  background: #444;
  border-radius: 6px;
}

body.dark.mode ::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Dark Mode Selection */
body.dark.mode ::selection {
  background: #5fb3c7;
  color: #fff;
}

body.dark.mode ::-moz-selection {
  background: #5fb3c7;
  color: #fff;
}

/* Dark Mode Accordion Styles */
body.dark.mode .accordion-container {
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
    border: 1px solid #444;
}

body.dark.mode .accordion-header {
    background: rgba(255, 255, 255, 0.03);
}

body.dark.mode .accordion-header:hover {
    background: rgba(255, 255, 255, 0.06);
}

body.dark.mode .accordion-header.active {
    background: rgba(255, 255, 255, 0.1);
}

body.dark.mode .accordion-title {
    color: #5fb3c7;
}

body.dark.mode .accordion-title i {
    color: #74b9ff;
}

body.dark.mode .accordion-chevron {
    color: #5fb3c7;
}

body.dark.mode .accordion-content .card-body {
    background: rgba(0, 0, 0, 0.3);
}

body.dark.mode .accordion-card {
    border-bottom: 1px solid #333;
}

/* Dark Mode Violation Card in Accordion */
body.dark.mode .accordion-card.violation-card .accordion-header {
    background: rgba(255, 255, 255, 0.03);
}

body.dark.mode .accordion-card.violation-card .accordion-header:hover {
    background: rgba(255, 255, 255, 0.06);
}

body.dark.mode .accordion-card.violation-card .accordion-header.active {
    background: rgba(255, 255, 255, 0.1);
}

body.dark.mode .accordion-card.violation-card.gps-warning .accordion-header {
    background: rgba(149, 165, 166, 0.16);
}

body.dark.mode .accordion-card.violation-card.gps-warning .accordion-header:hover {
    background: rgba(149, 165, 166, 0.24);
}

body.dark.mode .accordion-card.violation-card.gps-warning .accordion-header.active {
    background: rgba(149, 165, 166, 0.3);
}

/* Dark Mode Clean Flight Violation Card in Accordion */
body.dark.mode .accordion-card.violation-card.clean-flight .accordion-header {
    background: rgba(40, 167, 69, 0.08);
}

body.dark.mode .accordion-card.violation-card.clean-flight .accordion-header:hover {
    background: rgba(40, 167, 69, 0.15);
}

body.dark.mode .accordion-card.violation-card.clean-flight .accordion-header.active {
    background: rgba(40, 167, 69, 0.2);
}

body.dark.mode .accordion-card.violation-card.clean-flight .accordion-title {
    color: #28a745;
}

body.dark.mode .accordion-card.violation-card.clean-flight .accordion-title i {
    color: #28a745;
}

body.dark.mode .accordion-card.violation-card.gps-warning .accordion-title,
body.dark.mode .accordion-card.violation-card.gps-warning .accordion-title i {
    color: #bdc3c7;
}

/* Dark Mode Pending Violation Card in Accordion */
body.dark.mode .accordion-card.violation-card.pending .accordion-header {
    background: rgba(108, 117, 125, 0.08);
}

body.dark.mode .accordion-card.violation-card.pending .accordion-header:hover {
    background: rgba(108, 117, 125, 0.15);
}

body.dark.mode .accordion-card.violation-card.pending .accordion-header.active {
    background: rgba(108, 117, 125, 0.2);
}

body.dark.mode .accordion-card.violation-card.pending .accordion-title {
    color: #6c757d;
}

body.dark.mode .accordion-card.violation-card.pending .accordion-title i {
    color: #6c757d;
}

body.dark.mode .accordion-card.violation-card.gps-warning .accordion-content .card-body {
    background: rgba(0, 0, 0, 0.3);
    color: rgba(255, 255, 255, 0.92);
}