:root {
  --bg:#0b1020;
  --panel:#ffffff;
  --panel-dark:rgba(17,24,39,0.95);
  --text:#0f172a;
  --muted:#64748b;
  --brand:#2563eb;
  --chip-low:#10b981;
  --chip-mid:#3b82f6;
  --chip-high:#f59e0b;
  --chip-max:#ef4444;
  --shadow:0 10px 30px rgba(0,0,0,0.15);
}

* { box-sizing:border-box; }
html,body { height:100%; margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial; }
body { background:var(--bg); color:var(--text); }
body.dark { background:#0b1020; color:#e2e8f0; }

main { position:relative; height:calc(100% - 70px); }

/* ---------- HEADER ---------- */
.app-header {
  height:auto; min-height:70px;
  padding:10px 14px;
  display:flex; align-items:center; gap:14px;
  background:rgba(255,255,255,0.9);
  backdrop-filter:blur(8px);
  box-shadow:var(--shadow);
  position:sticky; top:0; z-index:1000;
  flex-wrap:wrap;
}
body.dark .app-header { background:var(--panel-dark); color:#e5e7eb; }

.brand { display:flex; align-items:center; gap:10px; }
.brand h1 { font-size:18px; margin:0; }
.logo-dot { width:12px; height:12px; border-radius:50%; background:var(--brand); display:inline-block; box-shadow:0 0 10px rgba(37,99,235,.6); }

.toolbar { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.tool { display:flex; align-items:center; gap:6px; font-size:13px; }
.tool > label { font-size:12px; color:var(--muted); }

/* ---------- SEARCH BOXES ---------- */
.search-wrap { margin-left:auto; display:flex; gap:10px; flex-wrap:nowrap; }
#search, #loc-search {
  width:200px; padding:10px 14px; border-radius:999px;
  border:1px solid #CBD5E1; background:#fff; outline:none; box-shadow:var(--shadow);
  font-size:14px;
}
body.dark #search, body.dark #loc-search { background:#0f172a; color:#e5e7eb; border-color:#334155; }

/* ---------- BUTTONS ---------- */
.btn {
  padding:7px 12px; border-radius:10px; border:1px solid #CBD5E1; background:#fff; cursor:pointer; font-size:13px;
}
.btn:hover { background:#f1f5f9; }
body.dark .btn { background:#0f172a; color:#e5e7eb; border-color:#334155; }
body.dark .btn:hover { background:#111827; }
.only-mobile { display:none; } /* default hidden on desktop */

/* ---------- SWITCH ---------- */
.switch { position:relative; display:inline-block; width:42px; height:22px; }
.switch input { opacity:0; width:0; height:0; }
.slider { position:absolute; cursor:pointer; inset:0; background:#cbd5e1; border-radius:999px; transition:.2s; }
.slider:before { content:""; position:absolute; height:18px; width:18px; left:2px; top:2px; background:white; border-radius:50%; transition:.2s; }
input:checked + .slider { background:#60a5fa; }
input:checked + .slider:before { transform:translateX(20px); }

/* ---------- MAP ---------- */
#map { position:absolute; inset:0; z-index:1; }

/* ---------- SIDEBAR (desktop default) ---------- */
#sidebar {
  position:absolute; right:14px; top:14px; bottom:14px; width:300px;
  z-index:1000; display:flex; flex-direction:column; gap:14px;
}

.card { background:rgba(255,255,255,0.94); border-radius:14px; padding:14px; box-shadow:var(--shadow); }
body.dark .card { background:var(--panel-dark); color:#e5e7eb; }

.stats { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.stat { display:flex; flex-direction:column; background:rgba(148,163,184,0.12); padding:10px; border-radius:10px; }
.stat .label { font-size:12px; color:var(--muted); }
.stat .value { font-weight:600; }

/* ---------- CALLSIGN LIST ---------- */
.card-head { display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.card-head h3 { margin:0; font-size:16px; }
#callsign-filter { flex:1; padding:8px 10px; border-radius:10px; border:1px solid #CBD5E1; outline:none; background:#fff; }
body.dark #callsign-filter { background:#0f172a; color:#e5e7eb; border-color:#334155; }

#callsign-list { list-style:none; margin:0; padding:0; max-height:45vh; overflow:auto; }
#callsign-list li {
  display:flex; justify-content:space-between; align-items:center; gap:8px;
  padding:10px 12px; border-radius:10px; margin-bottom:6px;
  background:rgba(148,163,184,0.12); cursor:pointer;
}
#callsign-list li:hover { background:rgba(59,130,246,0.2); }
.li-main { display:flex; flex-direction:column; }
.li-sub { font-size:12px; color:var(--muted); }

/* ---------- LEGEND ---------- */
.legend h3 { margin:0 0 8px; font-size:14px; }
.legend-row { display:flex; align-items:center; gap:8px; margin-bottom:6px; font-size:13px; }
.chip { width:14px; height:14px; border-radius:4px; display:inline-block; }
.alt-low { background:var(--chip-low); }
.alt-mid { background:var(--chip-mid); }
.alt-high { background:var(--chip-high); }
.alt-max { background:var(--chip-max); }

/* ---------- SELECT DROPDOWNS ---------- */
#basemap, #unit-select, #pad-select {
  padding:6px 10px; border-radius:10px; border:1px solid #CBD5E1; background:#fff; outline:none; font-size:13px;
}
body.dark #basemap, body.dark #unit-select, body.dark #pad-select { background:#0f172a; color:#e5e7eb; border-color:#334155; }

/* ---------- ERROR BANNER ---------- */
#error-banner {
  position:fixed; left:50%; transform:translateX(-50%); bottom:16px; z-index:2000;
  min-width:280px; max-width:90vw; padding:12px 14px; border-radius:12px;
  background:#fee2e2; color:#7f1d1d; border:1px solid #fecaca; box-shadow:var(--shadow);
}
.hidden { display:none; }

/* ---------- PLANE ICON ---------- */
.airplane-marker {}
.airplane-marker .plane { width:22px; height:22px; transform-origin:50% 55%; filter:drop-shadow(0 1px 1px rgba(0,0,0,0.6)); }

/* ========== MOBILE LAYOUT ========== */
@media (max-width: 900px) {
  /* Header: stack elements and make inputs full width */
  .app-header {
    gap:10px;
  }
  .toolbar {
    order:3; width:100%;
    overflow:auto; padding-bottom:6px;
  }
  .search-wrap {
    order:2; width:100%; gap:8px; justify-content:stretch;
  }
  #search, #loc-search {
    width:100%; box-shadow:none; /* reduce shadows on mobile */
  }
  .only-mobile { display:inline-block; } /* show Panel button on mobile */

  /* Map takes full screen; sidebar off-canvas */
  #sidebar {
    position:fixed; right:0; top:0; bottom:0; width:min(92vw, 380px);
    background:rgba(255,255,255,0.98);
    padding:16px; gap:14px;
    transform:translateX(105%); transition:transform .25s ease;
    border-left:1px solid rgba(0,0,0,0.08);
    border-top-left-radius:14px; border-bottom-left-radius:14px;
  }
  body.dark #sidebar { background:var(--panel-dark); }

  body.sidebar-open #sidebar {
    transform:translateX(0);
  }

  /* Larger tap targets */
  #callsign-list li { padding:12px 14px; }
  .btn { padding:9px 14px; }

  /* Overlay behind drawer */
  .overlay {
    position:fixed; inset:0; z-index:999; background:rgba(0,0,0,0.4);
    backdrop-filter:blur(2px);
  }
}

/* Slightly larger phones (reduce sidebar width a bit more) */
@media (max-width: 420px) {
  #sidebar { width: 88vw; }
}