/* Melbourne Flights - dark glassy theme */
:root {
  --bg: #0a0e14;
  --panel: rgba(12, 16, 22, 0.92);
  --border: rgba(255, 255, 255, 0.08);
  --text: #e6e9ef;
  --dim: #7a8595;
  --accent: #00e5ff;
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; width: 100%; overflow: hidden; }
body { background: var(--bg); color: var(--text); font-family: var(--font); font-size: 14px; }
#app { position: relative; width: 100%; height: 100%; }
#map { position: absolute; inset: 0; z-index: 1; background: #060910; }

/* Header */
#header {
  position: absolute; top: 14px; left: 14px; z-index: 500;
  display: flex; align-items: center; gap: 13px;
  padding: 11px 16px; background: var(--panel);
  border: 1px solid var(--border); border-radius: 12px;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.pulse {
  width: 11px; height: 11px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent); animation: sonar 2.4s ease-out infinite; flex-shrink: 0;
}
@keyframes sonar {
  0% { box-shadow: 0 0 0 0 rgba(0,229,255,0.6); }
  70% { box-shadow: 0 0 0 12px rgba(0,229,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,229,255,0); }
}
.title .t1 { font-size: 18px; font-weight: 800; letter-spacing: -0.2px; color: #fff; line-height: 1.1; }
.title .t2 { font-size: 12px; color: var(--dim); }
#count { color: var(--accent); font-weight: 700; }
.sep { width: 1px; height: 30px; background: var(--border); }
.muted { font-size: 12px; color: var(--dim); }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--dim); display: inline-block; }
.dot.ok { background: #00d48a; } .dot.err { background: #ff4a4a; }
.dot.loading { background: #ffb300; animation: blink 1s step-start infinite; }
@keyframes blink { 50% { opacity: 0.3; } }

/* Legend */
#legend {
  position: absolute; bottom: 18px; right: 14px; z-index: 500;
  padding: 11px 13px; background: var(--panel); border: 1px solid var(--border);
  border-radius: 10px; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  font-size: 11px; color: var(--dim);
}
.legend-title { font-size: 9.5px; text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 6px; }
.legend-row { display: flex; align-items: center; gap: 7px; padding: 1.5px 0; }
.sw { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }

/* Plane markers */
.plane { transform-origin: center; transition: transform 0.2s linear; will-change: transform; cursor: pointer; }
.plane svg { display: block; filter: drop-shadow(0 0 3px currentColor); }
.plane:hover svg { filter: drop-shadow(0 0 6px currentColor); }
.plane.sel svg { filter: drop-shadow(0 0 9px #fff); }

/* Info card */
#info {
  position: absolute; bottom: 18px; left: 14px; z-index: 600; min-width: 230px; max-width: 290px;
  padding: 15px 17px 14px; background: var(--panel); border: 1px solid var(--border);
  border-radius: 12px; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
#info.hidden { display: none; }
#info-close {
  position: absolute; top: 9px; right: 11px; background: none; border: none;
  color: var(--dim); font-size: 16px; cursor: pointer; line-height: 1;
}
#info-close:hover { color: var(--text); }
.fi-call { font-size: 17px; font-weight: 700; color: #fff; }
.fi-type { font-size: 12px; color: var(--dim); margin-bottom: 11px; }
.fi-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; border-bottom: 1px solid var(--border); }
.fi-row:last-child { border-bottom: none; }
.fi-k { color: var(--dim); } .fi-v { font-weight: 600; }

/* Hover callsign label */
.leaflet-tooltip.plane-tip {
  background: var(--panel); color: var(--text); border: 1px solid var(--border);
  border-radius: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.2px;
  padding: 2px 7px; box-shadow: 0 2px 8px rgba(0,0,0,0.5); white-space: nowrap;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.leaflet-tooltip.plane-tip::before { display: none; }

/* Leaflet dark overrides */
.leaflet-container { background: #060910; font-family: var(--font); }
.leaflet-control-zoom a { background: var(--panel) !important; color: var(--text) !important; border-color: var(--border) !important; }
.leaflet-bar { border: none !important; box-shadow: none !important; }
.leaflet-control-zoom { border: 1px solid var(--border) !important; border-radius: 8px !important; overflow: hidden; }
.leaflet-control-attribution { background: var(--panel) !important; color: var(--dim) !important; font-size: 9px !important; }
.leaflet-control-attribution a { color: #5a6575 !important; }
.leaflet-popup-content-wrapper { background: var(--panel) !important; color: var(--text) !important; border: 1px solid var(--border) !important; border-radius: 8px !important; }
.leaflet-popup-tip { background: var(--panel) !important; }

@media (max-width: 600px) {
  #legend { display: none; }
  #info { left: 10px; right: 10px; max-width: unset; }
  #header { left: 10px; top: 10px; }
}