html, body { height: 100%; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
#map { position: absolute; inset: 0; z-index: 0; }

#header {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  z-index: 500; background: rgba(20,22,30,0.85); color: #e8eaed;
  padding: 6px 12px; border-radius: 8px; font-size: 13px;
  display: flex; gap: 10px; align-items: center; backdrop-filter: blur(6px);
  box-shadow: 0 2px 12px rgba(0,0,0,0.25);
}
#header .title { font-weight: 600; letter-spacing: 0.3px; }
.badge {
  background: #3b3f4a; color: #e8eaed; padding: 2px 8px; border-radius: 999px; font-size: 11px;
}
.badge.connected   { background: #2c7a3a; }
.badge.connecting  { background: #b07a18; }
.badge.disconnected{ background: #b53030; }

/* Plane / helicopter marker */
.plane-marker {
  width: var(--sz, 22px); height: var(--sz, 22px);
  display: flex; align-items: center; justify-content: center;
}
.plane-marker svg {
  width: var(--sz, 22px); height: var(--sz, 22px);
  transform: rotate(var(--rot, 0deg));
  transform-origin: 50% 50%;
  filter: drop-shadow(0 0 1px rgba(0,0,0,0.6));
  transition: transform 0.4s linear;
}
.plane-marker.heli svg {
  /* Subtle spin animation to evoke a rotor */
  animation: heli-rotor 4s linear infinite;
}
@keyframes heli-rotor {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.plane-marker.stale svg {
  filter: drop-shadow(0 0 1px rgba(0,0,0,0.4)) grayscale(1) opacity(0.6);
}
.plane-marker.stale .label {
  background: rgba(220,220,220,0.7); color: #555;
}
.plane-marker .label {
  position: absolute; top: 22px; left: 50%; transform: translateX(-50%);
  font-size: 10px; font-weight: 600; color: #111;
  background: rgba(255,255,255,0.85); padding: 1px 4px; border-radius: 3px;
  white-space: nowrap; pointer-events: none;
}

/* Altitude color bands (set via inline style, but here are fallbacks) */
.alt-ground   { color: #888; }
.alt-low      { color: #d62728; }
.alt-mid-low  { color: #ff7f0e; }
.alt-mid      { color: #e6c200; }
.alt-mid-high { color: #2ca02c; }
.alt-high     { color: #1f77b4; }

/* Airport marker */
.airport-marker {
  width: 14px; height: 14px; border-radius: 50%;
  background: #ff3b30; border: 3px solid white;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.4);
}

/* Sidebar */
#sidebar {
  position: absolute; top: 0; right: 0; bottom: 0; width: 320px;
  background: rgba(20,22,30,0.95); color: #e8eaed; z-index: 600;
  padding: 50px 20px 20px; overflow-y: auto;
  transition: transform 0.25s ease;
  box-shadow: -4px 0 12px rgba(0,0,0,0.3);
}
#sidebar.hidden { transform: translateX(100%); }
#sidebar h2 { margin: 0 0 4px; font-size: 22px; }
#sidebar .muted { color: #9aa0a6; font-size: 12px; margin-bottom: 14px; font-family: ui-monospace, monospace; }
#sidebar table { width: 100%; font-size: 13px; border-collapse: collapse; }
#sidebar td { padding: 4px 6px; border-bottom: 1px solid #2a2d36; }
#sidebar td:first-child { color: #9aa0a6; width: 110px; }
#sidebar td:last-child { font-family: ui-monospace, monospace; text-align: right; }
#close-sidebar {
  position: absolute; top: 10px; right: 12px;
  background: transparent; border: none; color: #9aa0a6;
  font-size: 24px; cursor: pointer; padding: 0;
}
#close-sidebar:hover { color: #e8eaed; }

/* Trail polyline default */
.aircraft-trail { stroke-dasharray: 0; }

/* Stand labels */
.stand-label {
  background: rgba(255,255,255,0.85); color: #111;
  border: 1px solid #f59e0b; border-radius: 3px;
  padding: 0 4px; font-size: 10px; font-weight: 700;
  box-shadow: none;
}
.stand-label::before { display: none; }

/* Ground operations panel */
#ground-panel {
  position: absolute; left: 10px; top: 60px; bottom: 10px;
  width: 320px; max-height: calc(100vh - 70px);
  background: rgba(20,22,30,0.92); color: #e8eaed; z-index: 500;
  border-radius: 8px; backdrop-filter: blur(6px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
  display: flex; flex-direction: column;
  overflow: hidden;
}
#ground-panel header {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-bottom: 1px solid #2a2d36;
  font-size: 13px; font-weight: 600; letter-spacing: 0.4px;
}
#ground-panel .title { flex: 1; }
#toggle-ground {
  background: transparent; border: none; color: #9aa0a6;
  font-size: 16px; cursor: pointer; padding: 0 4px;
}
#ground-panel.collapsed #ground-list { display: none; }
#ground-panel.collapsed { bottom: auto; }
#ground-list { overflow-y: auto; flex: 1; padding: 4px 0; }

.ground-row {
  padding: 6px 12px; border-bottom: 1px solid #2a2d36;
  cursor: pointer; font-size: 12px;
  display: grid; grid-template-columns: 1fr auto;
  grid-template-rows: auto auto; row-gap: 2px;
}
.ground-row:hover { background: rgba(255,255,255,0.04); }
.ground-row .callsign { font-weight: 600; font-size: 13px; }
.ground-row .icao { font-family: ui-monospace, monospace; color: #9aa0a6; font-size: 11px; }
.ground-row .area { color: #cbd5e1; font-size: 11px; }
.ground-row .meta { color: #9aa0a6; font-size: 10px; text-align: right; }
.ground-row .status {
  font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 999px;
  letter-spacing: 0.3px;
}
.ground-row .status.PARKED   { background: #1e40af; color: #dbeafe; }
.ground-row .status.PUSHBACK { background: #b45309; color: #fef3c7; }
.ground-row .status.TAXI     { background: #166534; color: #dcfce7; }
.ground-row.stale { opacity: 0.55; }
.ground-row.stale .status { filter: grayscale(0.6); }

@media (max-width: 720px) {
  #ground-panel { width: calc(100% - 20px); top: 56px; max-height: 40vh; }
}