/* ============================================================
   SkyTrace · Light professional Flightradar24-style UI
   ============================================================ */

:root {
  /* Palette - light & airy */
  --bg:            #f5f7fa;
  --bg-elevated:  #ffffff;
  --bg-hover:     #eef2f7;
  --bg-active:    #e3e9f1;
  --border:       #e1e6ee;
  --border-strong:#cfd6e1;
  --text:         #0f1822;
  --text-muted:   #5b6677;
  --text-soft:    #8892a3;
  --accent:       #2563eb;        /* blue-600 */
  --accent-hover: #1d4ed8;
  --accent-soft:  #dbeafe;
  --success:      #059669;
  --warning:      #d97706;
  --danger:       #dc2626;
  --shadow-sm:  0 1px 2px rgba(15,24,34,.04), 0 1px 1px rgba(15,24,34,.03);
  --shadow-md:  0 4px 12px rgba(15,24,34,.06), 0 2px 4px rgba(15,24,34,.04);
  --shadow-lg:  0 16px 40px rgba(15,24,34,.10), 0 4px 12px rgba(15,24,34,.06);
  --radius-sm: 6px;
  --radius:     10px;
  --radius-lg:  14px;
  --topbar-h:   58px;
  --sidebar-w:  340px;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--bg);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#app { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }

/* ========== TOPBAR ========== */
.topbar {
  height: var(--topbar-h);
  display: flex; align-items: center; gap: 18px;
  padding: 0 18px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  z-index: 1000;
  flex-shrink: 0;
}
.brand { display: flex; align-items: center; gap: 10px; padding-right: 16px; border-right: 1px solid var(--border); height: 100%; }
.brand-logo {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, var(--accent), #60a5fa);
  color: #fff; border-radius: 9px;
  display: grid; place-items: center;
  box-shadow: 0 4px 10px rgba(37,99,235,.30);
}
.brand-name { font-weight: 800; font-size: 16px; letter-spacing: -.01em; line-height: 1; }
.brand-sub  { font-size: 11px; color: var(--text-soft); margin-top: 2px; line-height: 1; }

.search {
  flex: 1; max-width: 520px;
  position: relative; display: flex; align-items: center;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  height: 38px; padding: 0 12px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background: #fff; }
.search-icon { color: var(--text-soft); flex-shrink: 0; }
.search input {
  flex: 1; border: none; outline: none; background: transparent;
  font-family: inherit; font-size: 13.5px; color: var(--text);
  padding: 0 10px; min-width: 0;
}
.search input::placeholder { color: var(--text-soft); }
.search-clear {
  background: none; border: none; cursor: pointer;
  color: var(--text-soft); padding: 4px; border-radius: 4px;
  display: grid; place-items: center;
}
.search-clear:hover { background: var(--bg-hover); color: var(--text); }

.topbar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.stat-chip {
  display: flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 12px 0 10px;
  background: var(--accent-soft);
  border: 1px solid #bfdbfe;
  border-radius: 17px;
  font-size: 12.5px; font-weight: 600; color: var(--accent-hover);
}
.stat-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(37,99,235,.6);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(37,99,235,.45); }
  70%  { box-shadow: 0 0 0 7px rgba(37,99,235,0); }
  100% { box-shadow: 0 0 0 0 rgba(37,99,235,0); }
}
.stat-label { color: #1e40af; opacity: .75; font-weight: 500; }

.btn-icon {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer; color: var(--text-muted);
  transition: all .15s;
}
.btn-icon:hover { background: var(--bg-hover); color: var(--text); border-color: var(--border-strong); }
.btn-icon:active { transform: scale(.96); }
.btn-icon.spinning svg { animation: spin .6s linear infinite; }
@keyframes spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* ========== LAYOUT ========== */
.layout { flex: 1; display: flex; min-height: 0; }

/* ========== SIDEBAR ========== */
.sidebar {
  width: var(--sidebar-w);
  background: var(--bg-elevated);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  flex-shrink: 0;
  min-height: 0;
}

.sidebar-tabs {
  display: flex; padding: 8px 8px 0; gap: 2px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.tab-btn {
  flex: 1; padding: 10px 12px;
  background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 600;
  color: var(--text-soft);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s, background .15s;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.tab-btn:hover { color: var(--text-muted); background: var(--bg-hover); }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); background: var(--accent-soft); }

.tab-panel { display: none; flex: 1; min-height: 0; flex-direction: column; padding: 14px; }
.tab-panel.active { display: flex; }

.panel-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 12px; gap: 10px;
}
.panel-title { font-size: 14px; font-weight: 700; color: var(--text); }
.panel-sub   { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.chip-btn {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 6px 8px;
  cursor: pointer; color: var(--text-muted);
  display: grid; place-items: center;
}
.chip-btn:hover { background: var(--bg-hover); color: var(--text); }

/* Flight list */
.flight-list {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column; gap: 6px;
  margin: 0 -6px; padding: 0 6px;
}
.flight-list::-webkit-scrollbar { width: 6px; }
.flight-list::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
.flight-list::-webkit-scrollbar-track { background: transparent; }

.flight-card {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all .12s;
}
.flight-card:hover { background: var(--bg-hover); border-color: var(--border-strong); transform: translateX(2px); }
.flight-card.active { background: var(--accent-soft); border-color: var(--accent); }
.flight-card.active .fc-callsign { color: var(--accent-hover); }

.fc-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--bg);
  display: grid; place-items: center;
  color: var(--accent); flex-shrink: 0;
}
.fc-icon svg { transform: rotate(0deg); transition: transform .3s; }
.fc-main { flex: 1; min-width: 0; }
.fc-callsign {
  font-family: var(--font-mono); font-weight: 600; font-size: 13.5px;
  color: var(--text); line-height: 1.1;
}
.fc-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-meta { text-align: right; flex-shrink: 0; }
.fc-alt { font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; color: var(--text); }
.fc-spd { font-size: 11px; color: var(--text-soft); margin-top: 2px; }

/* Empty / loading state */
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px 20px; text-align: center; color: var(--text-soft);
  gap: 12px; flex: 1;
}
.empty-state p { margin: 0; font-size: 13px; line-height: 1.5; max-width: 240px; }

.spinner {
  width: 28px; height: 28px;
  border: 2.5px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

/* ========== DETAILS PANEL ========== */
#details-content { flex: 1; overflow-y: auto; padding: 0; }
#details-content::-webkit-scrollbar { width: 6px; }
#details-content::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }

.detail-hero {
  background: linear-gradient(135deg, #2563eb 0%, #60a5fa 100%);
  color: #fff;
  padding: 20px 16px 18px;
  border-radius: var(--radius);
  margin-bottom: 14px;
  position: relative; overflow: hidden;
}
.detail-hero::after {
  content: ''; position: absolute; right: -20px; top: -20px;
  width: 140px; height: 140px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(255,255,255,0.12)'><path d='M21 16v-2l-8-5V3.5c0-.83-.67-1.5-1.5-1.5S10 2.67 10 3.5V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5l8 2.5z'/></svg>") no-repeat center / contain;
  transform: rotate(45deg);
}
.detail-callsign { font-family: var(--font-mono); font-size: 22px; font-weight: 700; letter-spacing: -.01em; line-height: 1; }
.detail-country { font-size: 12.5px; opacity: .9; margin-top: 4px; }
.detail-row { display: flex; gap: 10px; margin-top: 14px; font-size: 12px; }
.detail-row > div { background: rgba(255,255,255,.18); padding: 6px 10px; border-radius: 6px; backdrop-filter: blur(4px); }
.detail-row b { display: block; font-size: 10.5px; opacity: .75; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }

.detail-section { padding: 0 16px 16px; }
.detail-section h4 {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-soft); font-weight: 700;
  margin: 16px 0 8px;
}
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.detail-cell {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.detail-cell .k { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-soft); font-weight: 600; }
.detail-cell .v { font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: var(--text); margin-top: 3px; word-break: break-all; }

.detail-link {
  display: block; margin: 12px 16px;
  padding: 10px 12px; text-align: center;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--accent);
  text-decoration: none; font-size: 13px; font-weight: 600;
  transition: all .15s;
}
.detail-link:hover { background: var(--accent-soft); border-color: var(--accent); }

/* ========== FILTERS PANEL ========== */
.filter-group { padding: 14px 4px; border-bottom: 1px solid var(--border); }
.filter-group:last-child { border-bottom: none; }
.filter-label {
  display: block; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-soft); margin-bottom: 10px;
}
.region-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.region-btn, .mapstyle-btn {
  padding: 9px 10px; font-family: inherit; font-size: 12.5px; font-weight: 600;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); cursor: pointer; color: var(--text-muted);
  transition: all .12s;
}
.region-btn:hover, .mapstyle-btn:hover { background: var(--bg-hover); }
.region-btn.active, .mapstyle-btn.active {
  background: var(--accent); border-color: var(--accent); color: #fff;
  box-shadow: 0 2px 6px rgba(37,99,235,.25);
}

.toggle-row { display: flex; flex-direction: column; gap: 8px; }
.toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.toggle input { display: none; }
.toggle-slider {
  width: 36px; height: 20px; border-radius: 10px;
  background: var(--border-strong); position: relative;
  transition: background .15s; flex-shrink: 0;
}
.toggle-slider::after {
  content: ''; position: absolute; left: 2px; top: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: transform .15s;
}
.toggle input:checked + .toggle-slider { background: var(--accent); }
.toggle input:checked + .toggle-slider::after { transform: translateX(16px); }
.toggle-text { font-size: 13px; color: var(--text); }

.check-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0; cursor: pointer; font-size: 13px; color: var(--text);
}
.check-row input { accent-color: var(--accent); }

.about-card {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px;
  font-size: 12px; line-height: 1.55; color: var(--text-muted);
}
.about-card p { margin: 0 0 8px; }
.about-card p:last-child { margin: 0; }
.about-card a { color: var(--accent); text-decoration: none; font-weight: 500; }
.about-card a:hover { text-decoration: underline; }
.about-card .muted { color: var(--text-soft); font-size: 11px; }

/* ========== MAP ========== */
.map-wrap {
  flex: 1;
  position: relative;
  min-width: 0;
  min-height: 400px;   /* fallback so Leaflet always has a non-zero canvas */
}
#map {
  width: 100%;
  height: 100%;
  min-height: 400px;
  background: #e8edf3;
}

.map-overlay { position: absolute; z-index: 500; pointer-events: none; }
.map-overlay > * { pointer-events: auto; }
.top-left    { top: 12px; left: 12px; }
.top-right   { top: 12px; right: 12px; display: flex; flex-direction: column; gap: 4px; }
.bottom-left { bottom: 28px; left: 12px; }

.overlay-card {
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 7px 12px;
  box-shadow: var(--shadow-md);
  display: flex; align-items: center; gap: 8px;
  font-size: 12px;
}
.overlay-label { color: var(--text-soft); font-weight: 500; }
.overlay-value { font-family: var(--font-mono); font-weight: 600; color: var(--text); }

.overlay-btn {
  width: 34px; height: 34px;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  display: grid; place-items: center;
  cursor: pointer; color: var(--text-muted);
  box-shadow: var(--shadow-sm);
  transition: all .12s;
}
.overlay-btn:hover { background: #fff; color: var(--text); border-color: var(--border-strong); }

.legend-card {
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  box-shadow: var(--shadow-md);
  width: 200px;
}
.legend-title { font-size: 11px; font-weight: 700; color: var(--text-soft); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.legend-gradient {
  height: 8px; border-radius: 4px;
  background: linear-gradient(90deg, #93c5fd, #3b82f6, #1d4ed8, #1e3a8a);
}
.legend-scale { display: flex; justify-content: space-between; margin-top: 4px; font-size: 10px; color: var(--text-soft); font-family: var(--font-mono); }

.map-loader {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255,255,255,.92);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px 6px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 600;
  box-shadow: var(--shadow-md);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
}
.map-loader[hidden],
.map-loader[style*="display: none"] { display: none !important; }
.map-loader .spinner {
  width: 14px; height: 14px;
  border-width: 2px;
  border-color: var(--border);
  border-top-color: var(--accent);
}
.map-loader .spinner-text { white-space: nowrap; }

/* Degraded-mode banner (shown when OpenSky is unreachable and we serve stale data) */
.degraded-badge {
  position: absolute;
  top: 12px; left: 50%; transform: translateX(-50%);
  z-index: 700;
  background: rgba(217, 119, 6, .95);
  color: #fff;
  padding: 8px 14px;
  border-radius: var(--radius);
  font-size: 12.5px; font-weight: 600;
  box-shadow: var(--shadow-md);
  display: flex; align-items: center; gap: 8px;
  animation: slideDown .3s ease-out;
}
.degraded-badge svg { flex-shrink: 0; }
@keyframes slideDown {
  from { transform: translateX(-50%) translateY(-12px); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0); opacity: 1; }
}

/* ========== LEAFLET OVERRIDES ========== */
.leaflet-container { font-family: var(--font-sans); background: #e8edf3; }
.leaflet-control-attribution {
  background: rgba(255,255,255,.85) !important;
  backdrop-filter: blur(4px);
  border-radius: 6px 0 0 0;
  font-size: 10.5px !important;
  color: var(--text-muted) !important;
  padding: 2px 8px !important;
}
.leaflet-control-attribution a { color: var(--accent) !important; }
.leaflet-control-zoom { display: none; } /* we use our own */

/* Aircraft marker */
.aircraft-marker {
  background: none !important; border: none !important;
}
.aircraft-icon {
  width: 24px; height: 24px;
  display: grid; place-items: center;
  position: relative;
  transition: transform .8s linear;
}
.aircraft-icon svg {
  width: 22px; height: 22px;
  filter: drop-shadow(0 1px 2px rgba(15,24,34,.35));
}
.aircraft-icon.selected svg {
  width: 30px; height: 30px;
  filter: drop-shadow(0 0 6px var(--accent)) drop-shadow(0 2px 4px rgba(15,24,34,.4));
}
.aircraft-icon.selected::before {
  content: ''; position: absolute; inset: -8px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  animation: pulse-ring 1.8s ease-out infinite;
}
@keyframes pulse-ring {
  0%   { transform: scale(.6); opacity: 1; }
  100% { transform: scale(1.4); opacity: 0; }
}
.aircraft-label {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  background: rgba(255,255,255,.92);
  color: var(--text);
  padding: 1px 5px; border-radius: 3px;
  border: 1px solid var(--border);
  white-space: nowrap;
  pointer-events: none;
  box-shadow: var(--shadow-sm);
}
.aircraft-icon.selected + .aircraft-label {
  background: var(--accent); color: #fff; border-color: var(--accent);
}

/* ========== TOAST ========== */
.toast {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--text); color: #fff;
  padding: 10px 18px; border-radius: var(--radius);
  font-size: 13px; font-weight: 500;
  box-shadow: var(--shadow-lg);
  z-index: 2000;
  opacity: 0; transition: all .25s;
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ========== RESPONSIVE ========== */
@media (max-width: 900px) {
  .sidebar { width: 280px; }
  .search { max-width: 200px; }
  .brand-sub { display: none; }
}
@media (max-width: 640px) {
  .topbar { gap: 8px; padding: 0 10px; }
  .brand-text { display: none; }
  .search { max-width: none; flex: 1; }
  .stat-chip .stat-label { display: none; }
  .sidebar { position: absolute; left: 0; top: var(--topbar-h); bottom: 0; z-index: 900; width: 88%; max-width: 320px; transform: translateX(-100%); transition: transform .25s; box-shadow: var(--shadow-lg); }
  .sidebar.open { transform: translateX(0); }
  .legend-card { display: none; }
  .bottom-left { display: none; }
}