:root {
  --bg: #05080d;
  --panel: rgba(8, 14, 22, 0.72);
  --panel-border: rgba(86, 217, 255, 0.18);
  --accent: #38e1ff;
  --accent-dim: #1b6e85;
  --warn: #ff5a4d;
  --ok: #4dffb0;
  --text: #cfe9f2;
  --text-dim: #5e7a89;
  --grid: rgba(56, 225, 255, 0.06);
  --pt: #43e86b;
  --panel-w: 360px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: "Chakra Petch", system-ui, sans-serif;
  overflow: hidden;
  letter-spacing: 0.02em;
}

#map { position: absolute; inset: 0; background: #05080d; z-index: 0; }

/* darken/colorize the basemap towards the radar aesthetic */
.leaflet-tile-pane { filter: brightness(0.85) contrast(1.05) saturate(0.7) hue-rotate(170deg); }
.leaflet-container { background: #05080d; outline: none; }
.leaflet-control-attribution {
  background: rgba(5, 8, 13, 0.6) !important;
  color: var(--text-dim) !important;
  font-size: 9px !important;
}
.leaflet-control-attribution a { color: var(--accent-dim) !important; }

/* full-screen FX overlay: vignette + faint scanlines */
.fx-overlay {
  position: absolute; inset: 0; z-index: 400; pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.55) 100%),
    repeating-linear-gradient(0deg, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,0.12) 3px, rgba(0,0,0,0) 4px);
}

/* ---- generic glass panel ---- */
.panel {
  position: absolute;
  z-index: 500;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.4), 0 8px 40px rgba(0,0,0,0.55),
              inset 0 0 30px rgba(56,225,255,0.03);
}
/* clipped-corner futuristic frame */
.panel::before {
  content: ""; position: absolute; top: -1px; left: -1px;
  width: 12px; height: 12px;
  border-top: 1px solid var(--accent); border-left: 1px solid var(--accent);
}
.panel::after {
  content: ""; position: absolute; bottom: -1px; right: -1px;
  width: 12px; height: 12px;
  border-bottom: 1px solid var(--accent); border-right: 1px solid var(--accent);
}

/* ---- top brand / status ---- */
.hud-top { top: 16px; left: 16px; width: var(--panel-w); padding: 12px 16px; }
.brand { display: flex; align-items: baseline; gap: 8px; }
.brand-mark { color: var(--accent); font-size: 14px; text-shadow: 0 0 8px var(--accent); }
.brand-name { font-size: 18px; font-weight: 700; letter-spacing: 0.08em; white-space: nowrap; }
.brand-name .tk { color: var(--accent); text-shadow: 0 0 8px rgba(56,225,255,0.35); }
.status-row {
  margin-top: 6px; font-family: "JetBrains Mono", monospace;
  font-size: 10px; color: var(--text-dim); display: flex; align-items: center; gap: 8px;
}
.status-row .sep { opacity: 0.4; }
.led {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--warn); box-shadow: 0 0 8px var(--warn); animation: pulse 1.4s infinite;
}
.led.ok { background: var(--ok); box-shadow: 0 0 10px var(--ok); }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ---- search dock (left) ---- */
.dock {
  top: 112px; left: 16px; width: var(--panel-w); max-height: calc(100vh - 146px);
  padding: 12px; display: flex; flex-direction: column;
}
.search-wrap { position: relative; display: flex; }
#search {
  flex: 1; background: rgba(0,0,0,0.35); border: 1px solid var(--panel-border);
  color: var(--text); font-family: "JetBrains Mono", monospace; font-size: 11px;
  padding: 10px 30px 10px 12px; outline: none; letter-spacing: 0.05em;
}
#search::placeholder { color: var(--text-dim); letter-spacing: 0.08em; }
#search:focus { border-color: var(--accent); box-shadow: 0 0 12px rgba(56,225,255,0.2); }
#clear {
  position: absolute; right: 4px; top: 4px; bottom: 4px; width: 24px;
  background: transparent; border: none; color: var(--text-dim); cursor: pointer; font-size: 12px;
}
#clear:hover { color: var(--accent); }

.chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.chip {
  font-size: 9px; font-family: "JetBrains Mono", monospace; padding: 3px 7px;
  border: 1px solid var(--panel-border); color: var(--text-dim); cursor: pointer;
  background: rgba(0,0,0,0.25); white-space: nowrap; transition: all 0.15s;
}
.chip:hover { border-color: var(--accent-dim); color: var(--text); }
.chip.active { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 8px rgba(56,225,255,0.15); }
.chip.pt { border-color: var(--pt); color: var(--pt); }
.chip.pt.active { box-shadow: 0 0 10px rgba(67,232,107,0.3); background: rgba(67,232,107,0.08); }
.chip.e506 { border-color: #5b86ff; color: #8fb0ff; }
.chip.e506.active { box-shadow: 0 0 10px rgba(91,134,255,0.35); background: rgba(61,106,230,0.10); }

.list-head {
  display: flex; justify-content: space-between; margin: 12px 2px 6px;
  font-size: 9px; color: var(--text-dim); font-family: "JetBrains Mono", monospace;
  letter-spacing: 0.2em; border-bottom: 1px solid var(--panel-border); padding-bottom: 6px;
}
.contact-list {
  list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1;
  scrollbar-width: thin; scrollbar-color: var(--accent-dim) transparent;
}
.contact-list::-webkit-scrollbar { width: 6px; }
.contact-list::-webkit-scrollbar-thumb { background: var(--accent-dim); }
.contact {
  display: grid; grid-template-columns: 18px 1fr auto; gap: 8px; align-items: center;
  padding: 8px 6px; border-bottom: 1px solid rgba(56,225,255,0.05); cursor: pointer;
  font-family: "JetBrains Mono", monospace; transition: background 0.12s;
}
.contact:hover { background: rgba(56,225,255,0.06); }
.contact.sel { background: rgba(56,225,255,0.1); box-shadow: inset 2px 0 0 var(--accent); }
.contact .c-flag { font-size: 13px; }
.contact .c-main { overflow: hidden; }
.contact .c-call { font-size: 12px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.contact .c-sub { font-size: 9px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.contact .c-alt { font-size: 10px; color: var(--accent); text-align: right; }
.contact .c-alt small { display: block; color: var(--text-dim); font-size: 8px; }
.empty { padding: 24px 8px; text-align: center; color: var(--text-dim); font-size: 10px; font-family: "JetBrains Mono", monospace; }

/* ---- stats (top-right) ---- */
/* right-hand stack: stats on top, legend below, left edges aligned */
.hud-right {
  position: absolute; z-index: 500; top: 16px; right: 16px;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
}
/* bottom-right stack: detail (when open) above the toolbox */
.hud-br {
  position: absolute; z-index: 500; bottom: 16px; right: 16px;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
  max-height: calc(100vh - 32px);
}
.hud-stats {
  position: relative; padding: 10px 14px; display: grid;
  grid-template-columns: repeat(5, auto); gap: 14px;
}
.stat { text-align: right; }
.stat .k { display: block; font-size: 8px; color: var(--text-dim); letter-spacing: 0.25em; font-family: "JetBrains Mono", monospace; }
.stat .v { display: block; font-size: 18px; font-weight: 600; color: var(--accent); text-shadow: 0 0 10px rgba(56,225,255,0.3); font-family: "JetBrains Mono", monospace; }
.stat.clock { cursor: pointer; user-select: none; }
.stat.clock:hover .k { color: var(--accent); }
.stat.clock .k { transition: color 0.15s; }

/* ---- hover tooltip on aircraft ---- */
.leaflet-tooltip.ac-tip { padding: 6px 9px; line-height: 1.5; }
.ac-tip-call { font-size: 11px; font-weight: 600; color: var(--accent); letter-spacing: 0.05em; }
.ac-tip-row { font-size: 9px; color: var(--text-dim); }

/* ---- emergency squawk ---- */
.emerg-banner {
  position: absolute; z-index: 600; top: 16px; left: 50%; transform: translateX(-50%);
  background: rgba(40,4,4,0.92); border: 1px solid var(--warn); color: #ffd7d2;
  font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.12em;
  padding: 8px 16px; box-shadow: 0 0 20px rgba(255,90,77,0.4); animation: emergblink 1.1s infinite;
}
@keyframes emergblink { 0%,100% { box-shadow: 0 0 20px rgba(255,90,77,0.45); } 50% { box-shadow: 0 0 6px rgba(255,90,77,0.15); } }
.ac-marker.emerg svg { filter: drop-shadow(0 0 6px var(--warn)) drop-shadow(0 0 3px var(--warn)); }
.contact.emerg { background: rgba(255,90,77,0.10); box-shadow: inset 2px 0 0 var(--warn); }
.contact.emerg .c-call { color: var(--warn); }
.contact.emerg .c-alt { color: var(--warn); }
.emerg-tag { color: var(--warn); font-size: 8px; font-weight: 700; }

/* ---- coasting (stale) contacts ---- */
.ac-marker.stale { opacity: 0.4; }
.ac-marker.stale svg { filter: none; }
.contact.stale { opacity: 0.5; }
.contact.stale .c-call::after { content: " ◌"; color: var(--text-dim); font-size: 9px; }

/* ---- in-range badge ---- */
.c-range { font-size: 8px; color: var(--pt); letter-spacing: 0.05em; }

/* ---- Esquadra 506 ---- */
.contact.e506 { box-shadow: inset 2px 0 0 #5b86ff; }
.contact.e506 .c-call { color: #8fb0ff; }
.badge.e506 { border-color: #5b86ff; color: #8fb0ff; }

/* ---- symbology legend (bottom-left, right of dock) ---- */
.legend { width: 100%; padding: 0; overflow: hidden; }
.legend-head {
  display: flex; justify-content: space-between; align-items: center; cursor: pointer;
  padding: 8px 10px; font-family: "JetBrains Mono", monospace; font-size: 9px;
  letter-spacing: 0.2em; color: var(--text-dim);
}
.legend-head:hover { color: var(--accent); }
.legend-caret { transition: transform 0.15s; }
.legend.collapsed .legend-body { display: none; }
.legend-body { padding: 4px 10px 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; }
.legend-item { display: flex; align-items: center; gap: 6px; font-family: "JetBrains Mono", monospace; font-size: 8px; color: var(--text-dim); }
.legend-item svg { flex: none; }

/* ---- toolbox: display controls + legend (bottom-right) ---- */
.toolbox { position: relative; width: max-content; min-width: 200px; padding: 0; }
.controls-row { display: flex; flex-wrap: nowrap; gap: 5px; padding: 8px; border-bottom: 1px solid var(--panel-border); }
.tog-btn {
  font-family: "JetBrains Mono", monospace; font-size: 9px; letter-spacing: 0.08em; white-space: nowrap;
  padding: 5px 7px; background: rgba(0,0,0,0.3); color: var(--text-dim);
  border: 1px solid var(--panel-border); cursor: pointer; transition: all 0.15s;
}
.tog-btn:hover { color: var(--text); border-color: var(--accent-dim); }
.tog-btn.active { color: var(--accent); border-color: var(--accent); box-shadow: 0 0 8px rgba(56,225,255,0.15); }
.tog-btn.snd.active { color: var(--ok); border-color: var(--ok); box-shadow: 0 0 8px rgba(77,255,176,0.18); }
.tog-btn.paused { color: var(--warn); border-color: var(--warn); }

/* ---- class filter chips ---- */
.class-chips { margin-top: 8px; }
.class-chips .chip.active { border-color: var(--accent); color: var(--accent); }

/* ---- detail actions / badges ---- */
.detail-actions { position: absolute; top: 8px; right: 8px; display: flex; gap: 6px; align-items: center; }
.detail-follow {
  background: transparent; border: 1px solid var(--panel-border); color: var(--text-dim);
  font-family: "JetBrains Mono", monospace; font-size: 8px; letter-spacing: 0.12em;
  padding: 3px 7px; cursor: pointer; transition: all 0.15s;
}
.detail-follow:hover { color: var(--accent); border-color: var(--accent-dim); }
.detail-follow.active { color: var(--ok); border-color: var(--ok); box-shadow: 0 0 8px rgba(77,255,176,0.2); }
.detail-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; min-height: 0; }
.badge {
  font-family: "JetBrains Mono", monospace; font-size: 8px; letter-spacing: 0.1em;
  padding: 2px 6px; border: 1px solid var(--accent-dim); color: var(--accent);
}
.badge.mil { border-color: var(--pt); color: var(--pt); }
.badge.emerg { border-color: var(--warn); color: var(--warn); }
.badge.range { border-color: var(--pt); color: var(--pt); }

/* ---- detail (bottom-right) ---- */
.detail { position: relative; width: 300px; padding: 14px; }
.detail.hidden { display: none; }
.detail-close {
  background: transparent; border: none; color: var(--text-dim);
  cursor: pointer; font-size: 13px; line-height: 1; padding: 2px 4px;
}
.detail-close:hover { color: var(--accent); }
.detail-head { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.detail-flag { font-size: 26px; }
.detail-call { font-size: 18px; font-weight: 700; color: var(--text); font-family: "JetBrains Mono", monospace; }
.detail-type { font-size: 10px; color: var(--text-dim); }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.detail-grid .field { border-left: 1px solid var(--accent-dim); padding-left: 8px; }
.detail-grid .field .fk { font-size: 8px; color: var(--text-dim); letter-spacing: 0.2em; font-family: "JetBrains Mono", monospace; }
.detail-grid .field .fv { font-size: 13px; color: var(--text); font-family: "JetBrains Mono", monospace; }

/* ---- aircraft markers ---- */
.ac-marker { transition: transform 0.4s linear; }
.ac-marker svg { display: block; filter: drop-shadow(0 0 4px rgba(56,225,255,0.85)); }
.ac-marker.pt svg { filter: drop-shadow(0 0 5px rgba(67,232,107,0.95)); }
.ac-marker.e506 svg { filter: drop-shadow(0 0 6px rgba(91,134,255,1)); }
.ac-marker.sel svg { filter: drop-shadow(0 0 9px #eaffff); }

/* ---- base + range rings ---- */
.ring-label {
  font-family: "JetBrains Mono", monospace; font-size: 9px; color: var(--accent);
  opacity: 0.55; text-shadow: 0 0 4px #000; white-space: nowrap; text-align: center;
}
.base-label {
  font-family: "JetBrains Mono", monospace; font-size: 8px; font-weight: 500;
  color: var(--pt); opacity: 0.55; letter-spacing: 0.12em;
  text-shadow: 0 0 4px #000; white-space: nowrap;
}
.leaflet-tooltip.mr-tip {
  background: rgba(5,8,13,0.92); border: 1px solid var(--panel-border); color: var(--text);
  font-family: "JetBrains Mono", monospace; font-size: 9px; letter-spacing: 0.1em;
  box-shadow: 0 0 12px rgba(0,0,0,0.6);
}
.leaflet-tooltip.mr-tip::before { display: none; }
.ac-wrap { position: relative; width: 24px; height: 24px; }
.ac-label {
  position: absolute; left: 27px; top: 3px; white-space: nowrap;
  font-family: "JetBrains Mono", monospace; font-size: 9px; color: var(--text);
  text-shadow: 0 0 4px #000, 0 0 4px #000; pointer-events: none;
}
/* deep-search (external) contacts get a hollow halo */
.ac-marker.ext::after {
  content: ""; position: absolute; inset: -3px; border: 1px dashed var(--track, #ffb454);
  border-radius: 50%; opacity: 0.7;
}
.ac-marker.ext { position: relative; }

.hidden { display: none; }

@media (max-width: 760px) {
  .hud-stats { grid-template-columns: repeat(2, auto); gap: 10px 16px; top: auto; bottom: 16px; left: 16px; right: auto; }
  .dock { width: calc(100vw - 32px); max-height: 45vh; }
  .detail { width: calc(100vw - 32px); left: 16px; right: 16px; }
}