/* Shared high-contrast rules for the dark operational/map screens. */
:root {
  --ui-text: #f8fafc;
  --ui-text-muted: #cbd5e1;
  --ui-surface: rgba(15, 23, 42, 0.96);
  --ui-surface-raised: #1e293b;
  --ui-border: #64748b;
  --ui-focus: #38bdf8;
}

body:not(.light) {
  color: var(--ui-text);
  --sa-text: #f8fafc;
  --sa-sub: #e2e8f0;
  --sa-muted: #cbd5e1;
  --text-color: #f8fafc;
  --sub-text: #e2e8f0;
  --text2: #cbd5e1;
}

body:not(.light) :is(.ui-panel, .ctrl-panel, .status-panel, .chart-panel, .side-panel,
  .sidebar, .candidate-card, .top-summary, .nav-menu, .log-panel, #configPanel,
  #boardingPanel, #liveStatusList, #candidateList, .collapsible-panel) {
  color: var(--ui-text) !important;
}

body:not(.light) :is(.ui-panel, .ctrl-panel, .status-panel, .chart-panel, .side-panel,
  .sidebar, .candidate-card, .top-summary, .nav-menu, .log-panel, #configPanel,
  #boardingPanel, #liveStatusList, #candidateList, .collapsible-panel)
  :is(h1, h2, h3, h4, p, label, small, span, b, strong, li, dt, dd, td, th, .panel-header *) {
  color: var(--ui-text) !important;
}

body:not(.light) :is(.panel-header, .panel-header h1, .panel-header h2,
  .panel-header h3, .panel-header p) {
  color: var(--ui-text) !important;
}

body:not(.light) :is(.btn, button, input, select, textarea) {
  font: inherit;
}

body:not(.light) :is(input, select, textarea) {
  color: var(--ui-text) !important;
  background-color: var(--ui-surface-raised) !important;
  border-color: var(--ui-border) !important;
}

body:not(.light) :is(input, select, textarea)::placeholder {
  color: var(--ui-text-muted) !important;
  opacity: 1;
}

body:not(.light) :is(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--ui-focus) !important;
  outline-offset: 2px;
}

body:not(.light) :is(.btn, .mode-btn, .upc-btn),
body:not(.light) :is(.btn, .mode-btn, .upc-btn) * {
  color: var(--ui-text) !important;
}

body:not(.light) :is(.btn, .mode-btn, .upc-btn)[style*="background:#f59e0b"],
body:not(.light) :is(.btn, .mode-btn, .upc-btn)[style*="background: #f59e0b"],
body:not(.light) :is(.btn, .mode-btn, .upc-btn)[style*="background:#00d2ff"],
body:not(.light) :is(.btn, .mode-btn, .upc-btn)[style*="background: #00d2ff"],
body:not(.light) :is(.btn, .mode-btn, .upc-btn)[style*="background:#38bdf8"],
body:not(.light) :is(.btn, .mode-btn, .upc-btn)[style*="background:#00ff9d"],
body:not(.light) :is(.btn, .mode-btn, .upc-btn)[style*="background:#10b981"] {
  color: #0f172a !important;
}

/* A few legacy pages force every dark-mode button to a slate background.
   Restore intentional action colors when their inline style advertises one. */
body:not(.light) :is(.btn, .mode-btn, .upc-btn)[style*="background:#f59e0b"] { background-color: #f59e0b !important; }
body:not(.light) :is(.btn, .mode-btn, .upc-btn)[style*="background:#00d2ff"] { background-color: #00d2ff !important; }
body:not(.light) :is(.btn, .mode-btn, .upc-btn)[style*="background:#38bdf8"] { background-color: #38bdf8 !important; }
body:not(.light) :is(.btn, .mode-btn, .upc-btn)[style*="background:#00ff9d"] { background-color: #00ff9d !important; }
body:not(.light) :is(.btn, .mode-btn, .upc-btn)[style*="background:#10b981"] { background-color: #10b981 !important; }

body:not(.light) :is(.btn, .mode-btn, .upc-btn)[style*="background:#f59e0b"] *,
body:not(.light) :is(.btn, .mode-btn, .upc-btn)[style*="background:#00d2ff"] *,
body:not(.light) :is(.btn, .mode-btn, .upc-btn)[style*="background:#38bdf8"] *,
body:not(.light) :is(.btn, .mode-btn, .upc-btn)[style*="background:#00ff9d"] *,
body:not(.light) :is(.btn, .mode-btn, .upc-btn)[style*="background:#10b981"] * {
  color: #0f172a !important;
}

body.light {
  --ui-text: #0f172a;
  --ui-text-muted: #334155;
  --ui-surface: #fff;
  --ui-surface-raised: #f8fafc;
  --ui-border: #64748b;
}

body.light :is(.ui-panel, .ctrl-panel, .status-panel, .chart-panel, .side-panel,
  .sidebar, .candidate-card, .top-summary, .nav-menu, .log-panel, #configPanel,
  #boardingPanel, #liveStatusList, #candidateList, .collapsible-panel),
body.light :is(.ui-panel, .ctrl-panel, .status-panel, .chart-panel, .side-panel,
  .sidebar, .candidate-card, .top-summary, .nav-menu, .log-panel, #configPanel,
  #boardingPanel, #liveStatusList, #candidateList, .collapsible-panel)
  :is(h1, h2, h3, h4, p, label, small, span, b, strong, li, dt, dd, td, th, .panel-header *) {
  color: var(--ui-text) !important;
}

body.light :is(input, select, textarea) {
  color: var(--ui-text) !important;
  background-color: #fff !important;
  border-color: var(--ui-border) !important;
}

/* Chungdahm route demo uses its own panel class names rather than the shared dashboard classes. */
body:not(.light) :is(.panel, .stats-panel, .boarding-panel, .event-log, #campusInfoCard) {
  color: var(--ui-text) !important;
}

body:not(.light) :is(.section-title, .route-info, .stat-label, .bp-section,
  .event-log, .event-log-body, .header .academy-name) {
  color: var(--ui-text-muted) !important;
}

/* Map labels are flat cards: do not create a 3D/embossed look with text shadows. */
.bus-label-container,
.bus-label-container * {
  text-shadow: none !important;
  filter: none !important;
}
.bus-label-container { box-shadow: 0 1px 3px rgba(15, 23, 42, .2) !important; }
/* Pair foreground/background per label surface instead of forcing white text
   over the route demo's white cards. */
body:not(.light) .stop-name-label {
  background: rgba(15, 23, 42, .96) !important;
  color: #f8fafc !important;
  text-shadow: none !important;
  border-color: #94a3b8 !important;
}
body:not(.light) .bus-label-container,
body:not(.light) .bus-label-container * {
  background-color: #0f172a;
  color: #f8fafc !important;
  text-shadow: none !important;
}
body:not(.light) .bus-label-container {
  background: rgba(15, 23, 42, .96) !important;
  border-color: var(--route-color, #38bdf8);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35) !important;
}
body:not(.light) .bus-label-container .bl-target { color: #cbd5e1 !important; }
body:not(.light) .bus-label-container .bl-progress-track { background: #475569 !important; }

/* Dashboard patches that previously forced dark text on dark surfaces. */
body:not(.light) .top-summary :is(.sum-val, .sum-lbl, .sum-val.highlight) {
  color: #f8fafc !important;
  text-shadow: none !important;
}

body:not(.light) .top-summary :is(.sum-val, .sum-lbl) {
  color: #f8fafc !important;
}

body:not(.light) :is(.ui-panel, .ctrl-panel, .status-panel, .chart-panel, .side-panel)
  :is(.btn, button):disabled {
  color: #f8fafc !important;
  background-color: #334155 !important;
  opacity: 1 !important;
}

/* Some map panels use page-specific class names; disabled text must stay readable there too. */
body:not(.light) :is(button:disabled, .btn:disabled),
body:not(.light) :is(button:disabled, .btn:disabled) * {
  color: #f8fafc !important;
  background-color: #334155 !important;
  opacity: 1 !important;
}

/* Keep the dense academy-demo toolbar reachable on desktop as well as mobile. */
body.academy-demo:not(.light) .header {
  justify-content: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}
body.academy-demo:not(.light) .header > *,
body.academy-demo:not(.light) .header .academy-selector,
body.academy-demo:not(.light) .header .controls {
  flex: 0 0 auto;
}
body.academy-demo:not(.light) .header .controls {
  margin-left: 0;
}
body.academy-demo:not(.light) .header :is(button, .mode-btn) {
  flex-shrink: 0;
  white-space: nowrap;
}
body.academy-demo:not(.light) .header::-webkit-scrollbar {
  height: 6px;
}
body.academy-demo:not(.light) .header::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.85);
}
body.academy-demo:not(.light) .header::-webkit-scrollbar-thumb {
  background: #38bdf8;
  border-radius: 999px;
}
body.academy-demo:not(.light) .header::after {
  content: '↔';
  position: sticky;
  right: 0;
  z-index: 2;
  flex: 0 0 36px;
  height: 56px;
  margin-left: -36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e2e8f0;
  background: linear-gradient(90deg, transparent, #0f172af0 45%);
  pointer-events: none;
}