/*
 * Light interface theme, ported from the original body.theme-light block. The !important flags are kept because
 * many dark-theme colours are inline styles (stats cards, rankings, side-nav links) that only !important can
 * override. Selectors that matched the old markup by onclick or inline style now target the new classes and URLs.
 */
body.theme-light {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

/* The palette itself, for everything styled with colour tokens rather than inline colours (ALERTS, RECORDS,
   JUNIOR PROFILES and newer pages): dark surfaces become light, white text becomes dark, and neon accents become
   deeper tones that read on white. */
.theme-light {
  --c-black: #ffffff;
  --c-white: #0f172a;
  --c-grey-050505: #f8fafc;
  --c-grey-080808: #f8fafc;
  --c-grey-0a0a0a: #f1f5f9;
  --c-grey-111: #f1f5f9;
  --c-grey-1a1a1a: #e2e8f0;
  --c-grey-222: #e2e8f0;
  --c-grey-333: #cbd5e1;
  --c-grey-444: #cbd5e1;
  --c-grey-555: #64748b;
  --c-grey-666: #64748b;
  --c-grey-888: #475569;
  --c-grey-aaa: #334155;
  --c-amber: #b45309;
  --c-gold: #b45309;
  --c-yellow: #b45309;
  --c-orange: #c2410c;
  --c-orange-nav: #c2410c;
  --c-orange-stats: #c2410c;
  --c-cyan: #0369a1;
  --c-cyan-bright: #0284c7;
  --c-aqua: #0891b2;
  --c-green: #15803d;
  --c-magenta: #a21caf;
  --c-pink: #a21caf;
  --c-red: #b91c1c;
  --c-red-pure: #b91c1c;
}

.theme-light #header {
  border-bottom: 2px solid #cbd5e1 !important;
}

.theme-light #tab-bar {
  background: #ffffff !important;
  border-bottom: 2px solid #cbd5e1 !important;
}
.theme-light .tab-btn {
  background: #f8fafc !important;
  color: #64748b !important;
  border-right: 1px solid #e2e8f0 !important;
}
.theme-light .tab-btn.active {
  color: #d97706 !important;
  background: #ffffff !important;
  text-shadow: none !important;
  border-bottom: 2px solid #d97706 !important;
}

.theme-light #side-nav {
  background: #ffffff !important;
  border-left: 2px solid #cbd5e1 !important;
}
.theme-light .sidenav-tabs {
  background: #f8fafc !important;
  border-bottom: 1.5px solid #e2e8f0 !important;
}
.theme-light .sidenav-tab-btn {
  background: #f8fafc !important;
  color: #64748b !important;
}
.theme-light .sidenav-tab-btn:hover {
  color: #0f172a !important;
  background: #f1f5f9 !important;
}
.theme-light .sidenav-tab-btn.active {
  color: #d97706 !important;
  background: #ffffff !important;
  border-bottom: 2px solid #d97706 !important;
  text-shadow: none !important;
}
.theme-light .operator-box {
  background: #ffffff !important;
}
.theme-light .nav-item {
  border-bottom: 1px solid #cbd5e1 !important;
}
.theme-light .nav-item:hover {
  background: #f1f5f9 !important;
}
.theme-light .nav-item[href$="/seen"] { color: #0369a1 !important; }
.theme-light .nav-item[href$="/airports"] { color: #b45309 !important; }
.theme-light .nav-item[href$="/spotter"] { color: #15803d !important; }
.theme-light .nav-item[href$="/caught"] { color: #a21caf !important; }
.theme-light .nav-item[href$="/leaderboard"] { color: #0369a1 !important; }
.theme-light .nav-item[href$="/news"] { color: #c2410c !important; }
.theme-light .nav-item[href$="/safety"] { color: #b91c1c !important; }
.theme-light .nav-item[href$="/alerts"] { color: #b45309 !important; }
.theme-light .nav-item[href$="/replay"] { color: #0369a1 !important; }
.theme-light .nav-item[href$="/records"] { color: #b45309 !important; }

.theme-light .receiver-filter select {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
}

.theme-light .records-card,
.theme-light .records-tab {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
}
.theme-light .records-card {
  border-top: 3px solid #d97706 !important;
}
.theme-light .records-card-value,
.theme-light .records-tab.active {
  color: #b45309 !important;
}
.theme-light .records-card-detail strong {
  color: #0f172a !important;
}
.theme-light .records-input {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
}

.theme-light .replay-bar,
.theme-light .replay-overhead {
  background: rgba(255, 255, 255, 0.95) !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}
.theme-light .replay-input {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
}
.theme-light .replay-result {
  background: #f8fafc !important;
  color: #0f172a !important;
  border-color: #e2e8f0 !important;
  border-left-color: #d97706 !important;
}

.theme-light .operator-name,
.theme-light #map-layer-select,
.theme-light #global-theme-select {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
}
.theme-light #user-icon-box {
  background: #f8fafc !important;
  border-color: #0284c7 !important;
}

.theme-light #stats-panel {
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
}
.theme-light .stat-card {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
}
.theme-light .stat-card:nth-child(1) .stat-val { color: #dc2626 !important; }
.theme-light .stat-card:nth-child(2) .stat-val { color: #d97706 !important; }
.theme-light .stat-card:nth-child(3) .stat-val { color: #0284c7 !important; }
.theme-light .stat-card .stat-label {
  color: #334155 !important;
  font-weight: bold !important;
}

.theme-light .section-header {
  background: #f8fafc !important;
  color: #475569 !important;
  border-top: 1px solid #cbd5e1 !important;
}
.theme-light .section-header.hdr-board {
  background: #ffffff !important;
  border-bottom: 2px solid #7c3aed !important;
}
.theme-light .section-header.hdr-boh {
  color: #b45309 !important;
  border-bottom: 2px solid #b45309 !important;
}
.theme-light .section-header.hdr-ga {
  color: #15803d !important;
  border-bottom: 2px solid #15803d !important;
}
.theme-light .section-header.hdr-transit {
  color: #0369a1 !important;
  border-bottom: 2px solid #0369a1 !important;
}

.theme-light table th {
  color: #7c3aed !important;
}
.theme-light td {
  color: #334155 !important;
  border-bottom: 1px solid #e2e8f0 !important;
}
.theme-light tr:hover {
  background: #f1f5f9 !important;
}
.theme-light .f-sub {
  color: #334155 !important;
}
.theme-light .orig-col { color: #b000b0 !important; }
.theme-light .dest-col { color: #008b8b !important; }
.theme-light .dist-col { color: #15803d !important; }

.theme-light td .f-id span {
  color: #0369a1 !important;
  text-shadow: none !important;
}
.theme-light td .f-id svg {
  fill: #0284c7 !important;
  filter: none !important;
}

.theme-light tr.row-military td .f-id span { color: #b45309 !important; }
.theme-light tr.row-military td .f-id svg { fill: #b45309 !important; filter: none !important; }
.theme-light tr.row-military {
  background: rgba(180, 83, 9, 0.04) !important;
  box-shadow: inset 5px 0 0 #b45309 !important;
}
.theme-light tr.row-emergency td .f-id span { color: #b91c1c !important; }
.theme-light tr.row-emergency td .f-id svg { fill: #b91c1c !important; filter: none !important; }
.theme-light tr.row-emergency {
  background: rgba(185, 28, 28, 0.06) !important;
  box-shadow: inset 5px 0 0 #b91c1c !important;
}
.theme-light tr.row-emergency-plane td .f-id span { color: #c2410c !important; }
.theme-light tr.row-emergency-plane td .f-id svg { fill: #c2410c !important; filter: none !important; }
.theme-light tr.row-emergency-plane {
  background: rgba(194, 65, 12, 0.04) !important;
  box-shadow: inset 5px 0 0 #c2410c !important;
}
.theme-light tr.row-helicopter td .f-id span { color: #a21caf !important; }
.theme-light tr.row-helicopter td .f-id svg { fill: #a21caf !important; filter: none !important; }
.theme-light tr.row-helicopter {
  background: rgba(162, 28, 175, 0.04) !important;
  box-shadow: inset 5px 0 0 #a21caf !important;
}
.theme-light tr.row-light-aircraft td .f-id span { color: #15803d !important; }
.theme-light tr.row-light-aircraft td .f-id svg { fill: #15803d !important; filter: none !important; }
.theme-light tr.row-light-aircraft {
  background: rgba(21, 128, 61, 0.04) !important;
  box-shadow: inset 5px 0 0 #15803d !important;
}
.theme-light tr.row-private-jet td .f-id span { color: #334155 !important; }
.theme-light tr.row-private-jet td .f-id svg { fill: #334155 !important; filter: none !important; }
.theme-light tr.row-private-jet {
  background: rgba(51, 65, 85, 0.04) !important;
  box-shadow: inset 5px 0 0 #334155 !important;
}

.theme-light .alt-climb { color: #15803d !important; }
.theme-light .alt-descend { color: #b91c1c !important; }
.theme-light .alt-level { color: #1d4ed8 !important; }

.theme-light .split-left,
.theme-light .split-right,
.theme-light .webcam-card,
.theme-light .leader-col {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
}
.theme-light #airport-search-input,
.theme-light #spotter-search-input,
.theme-light #seen-search-input {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}
.theme-light .stats-card {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-top-width: 4px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}
.theme-light .stats-card-lbl {
  color: #64748b !important;
}
.theme-light .stats-card[style*="#55ff00"] { border-top-color: #15803d !important; }
.theme-light .stats-card[style*="#f2fa0a"] { border-top-color: #b45309 !important; }
.theme-light .stats-card[style*="#00f5ff"] { border-top-color: #0369a1 !important; }
.theme-light .stats-card[style*="#e204ff"] { border-top-color: #a21caf !important; }
.theme-light .stats-card[style*="#ffc400"] { border-top-color: #b45309 !important; }
.theme-light .stats-card[style*="#ff6600"] { border-top-color: #c2410c !important; }
.theme-light .stats-card[style*="#ff003c"] { border-top-color: #b91c1c !important; }
.theme-light .stats-card[style*="#ff00d4"] { border-top-color: #a21caf !important; }
.theme-light .stats-card[style*="#00ffc4"] { border-top-color: #15803d !important; }
.theme-light .stats-card-val {
  text-shadow: none !important;
}
.theme-light .stats-card-val[style*="#55ff00"] { color: #15803d !important; }
.theme-light .stats-card-val[style*="#f2fa0a"] { color: #b45309 !important; }
.theme-light .stats-card-val[style*="#00f5ff"] { color: #0369a1 !important; }
.theme-light .stats-card-val[style*="#e204ff"] { color: #a21caf !important; }
.theme-light .stats-card-val[style*="#ffc400"] { color: #b45309 !important; }
.theme-light .stats-card-val[style*="#ff6600"] { color: #c2410c !important; }
.theme-light .stats-card-val[style*="#ff003c"] { color: #b91c1c !important; }
.theme-light .stats-card-val[style*="#ff00d4"] { color: #a21caf !important; }
.theme-light .stats-card-val[style*="#00ffc4"] { color: #15803d !important; }

.theme-light .leader-col .section-header {
  background: #f8fafc !important;
  color: #7c3aed !important;
  border-bottom: 2px solid #7c3aed !important;
}
.theme-light .leader-col table tr {
  border-bottom: 1px solid #cbd5e1 !important;
}
.theme-light .leader-col table td {
  border-bottom: 1px solid #cbd5e1 !important;
  color: #334155 !important;
}

.theme-light .locate-btn {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #0284c7 !important;
  box-shadow: none !important;
  font-weight: bold;
}
.theme-light .locate-btn:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: none !important;
}
.theme-light .map-btn {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
  box-shadow: none !important;
}
.theme-light #find-btn:hover {
  background: #0284c7 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}
.theme-light #boh-btn:hover {
  background: #d97706 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}
.theme-light #footer button {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #475569 !important;
  box-shadow: none !important;
}
.theme-light #footer button:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

.theme-light .radar-ping {
  display: none !important;
}
.theme-light #emergency-alarm-hud {
  border: 6px solid #b91c1c !important;
  box-shadow: none !important;
  animation: none !important;
}
.theme-light #emergency-alarm-hud .alarm-banner {
  background: #b91c1c !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
}

.theme-light #radar-sweeper-btn {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.theme-light #radar-sweeper-btn:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: none !important;
}


.theme-light #cockpit-hud {
  background: rgba(255, 255, 255, 0.96) !important;
  border: 2px solid #16a34a !important;
  color: #0f172a !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
}
.theme-light #hud-callsign {
  color: #0284c7 !important;
}
.theme-light #hud-speed-text,
.theme-light #hud-alt-text {
  background: rgba(255, 255, 255, 0.9) !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}
.theme-light #hud-speed-hand {
  background: #b45309 !important;
  filter: none !important;
}
.theme-light #hud-alt-hand {
  background: #0284c7 !important;
  filter: none !important;
}
.theme-light #map-search-container {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid #cbd5e1 !important;
}
.theme-light #map-search-input {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0284c7 !important;
}

.theme-light .leaflet-popup-content-wrapper {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1.5px solid #d97706 !important;
}
.theme-light .leaflet-popup-tip {
  background: #ffffff !important;
}
.theme-light .leaflet-control-layers {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1.5px solid #0284c7 !important;
  color: #0f172a !important;
}
.theme-light .leaflet-control-layers-expanded {
  border-color: #c026d3 !important;
}

.theme-light #stats-modal {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 2px solid #d97706 !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
}
.theme-light #stats-modal-title {
  color: #0f172a !important;
}
.theme-light #stats-modal-content {
  color: #1e293b !important;
}
.theme-light .stats-modal-close {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.theme-light #footer {
  background: #ffffff !important;
  border-top: 1px solid #cbd5e1 !important;
}
.theme-light #sync-time {
  color: #d97706 !important;
}
.theme-light #sync-text {
  color: #15803d !important;
}

.theme-light .plane-datatag {
  background: rgba(255, 255, 255, 0.95) !important;
  border-width: 1px !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
}

/*
 * Flyaboo brand: menus, tabs, headings, buttons, links and borders use the logo's colours (navy #1b3a6b, blue #2f74b5
 * and the plane's orange #ea580c). Aircraft category colours on the board and map keep their meanings. Later rules
 * win over the ones above, and the generated DARK and CLASSIC AVIATION themes carry the brand across.
 */
.theme-light {
  --c-amber: #ea580c;
  --c-gold: #ea580c;
  --c-yellow: #ea580c;
  --c-orange-nav: #ea580c;
  --c-cyan: #2f74b5;
  --c-cyan-bright: #2f74b5;
  --c-aqua: #2f74b5;
}

.theme-light .tab-btn.active,
.theme-light .sidenav-tab-btn.active {
  color: #ea580c !important;
  border-bottom: 2px solid #ea580c !important;
}

.theme-light .nav-item,
.theme-light .nav-item[href$="/seen"],
.theme-light .nav-item[href$="/airports"],
.theme-light .nav-item[href$="/spotter"],
.theme-light .nav-item[href$="/caught"],
.theme-light .nav-item[href$="/leaderboard"],
.theme-light .nav-item[href$="/news"],
.theme-light .nav-item[href$="/safety"],
.theme-light .nav-item[href$="/replay"],
.theme-light .nav-item[href$="/records"],
.theme-light .nav-item[href$="/alerts"] {
  color: #1b3a6b !important;
}
.theme-light .nav-item:hover {
  color: #ea580c !important;
}

.theme-light #user-icon-box {
  border-color: #2f74b5 !important;
}

.theme-light .stat-card:nth-child(1) .stat-val { color: #ea580c !important; }
.theme-light .stat-card:nth-child(2) .stat-val { color: #2f74b5 !important; }
.theme-light .stat-card:nth-child(3) .stat-val { color: #1b3a6b !important; }

.theme-light .section-header.hdr-board {
  border-bottom: 2px solid #2f74b5 !important;
}
.theme-light table th {
  color: #1b3a6b !important;
}
.theme-light .leader-col .section-header {
  color: #1b3a6b !important;
  border-bottom: 2px solid #2f74b5 !important;
}

.theme-light .locate-btn,
.theme-light #hud-callsign {
  color: #2f74b5 !important;
}
.theme-light #find-btn:hover {
  background: #2f74b5 !important;
}
.theme-light #boh-btn:hover {
  background: #ea580c !important;
}

.theme-light .leaflet-popup-content-wrapper,
.theme-light #stats-modal {
  border-color: #ea580c !important;
}
.theme-light .leaflet-control-layers {
  border-color: #2f74b5 !important;
}
.theme-light .leaflet-control-layers-expanded {
  border-color: #ea580c !important;
}
.theme-light #cockpit-hud {
  border-color: #2f74b5 !important;
}
.theme-light #sync-time {
  color: #ea580c !important;
}

.theme-light .records-card {
  border-top-color: #ea580c !important;
}
.theme-light .records-card-value,
.theme-light .records-tab.active {
  color: #ea580c !important;
}
.theme-light .replay-result {
  border-left-color: #ea580c !important;
}