/* GPS Radar — shared Palantir Gotham dark theme
   Antidrone Ukraine */

:root {
  --bg: #07090f;
  --bg-2: #0e1218;
  --bg-3: #11161e;
  --bg-4: #182030;
  --fg: #d8eaf8;
  --fg-mute: #8aa2b8;
  --fg-dim: #5b6d80;
  --accent: #4da6ff;
  --critical: #ff4d6e;
  --warning: #ffb347;
  --info: #5eda9c;
  --border: rgba(255,255,255,0.07);
  --border-strong: rgba(255,255,255,0.14);
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font: 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  overflow: hidden;
}
.mono { font-family: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace; }

/* ============== Top bar (shared) ============== */
#top {
  height: 44px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 14px;
  flex-shrink: 0;
}
#top h1 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--fg);
}
#top h1 .accent { color: var(--accent); }
#top .spacer { flex: 1; }
#top .item { font-size: 12px; color: var(--fg-mute); display: flex; gap: 6px; align-items: center; }
#top .item b { color: var(--fg); font-weight: 500; }

/* ============== Tab bar (shared) ============== */
#tabs {
  display: flex;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  height: 36px;
  flex-shrink: 0;
}
#tabs a {
  display: flex;
  align-items: center;
  padding: 0 18px;
  color: var(--fg-mute);
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  border-bottom: 2px solid transparent;
  transition: all 0.15s;
}
#tabs a:hover { color: var(--fg); background: var(--bg-3); }
#tabs a.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: var(--bg-3);
}

/* ============== WS dot ============== */
#wsdot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--fg-dim);
  box-shadow: 0 0 8px var(--fg-dim);
  transition: all 0.3s;
}
#wsdot.live { background: var(--info); box-shadow: 0 0 8px var(--info); }
#wsdot.fail { background: var(--critical); box-shadow: 0 0 8px var(--critical); }

/* ============== Form controls (shared) ============== */
input[type="text"], input[type="datetime-local"], input[type="number"],
input[type="password"], select {
  background: var(--bg-3);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 12px;
  font-family: inherit;
}
input:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(77,166,255,0.15);
}
button {
  background: var(--accent);
  color: var(--bg);
  border: none;
  border-radius: 4px;
  padding: 7px 12px;
  cursor: pointer;
  font-weight: 600;
  font-size: 12px;
  font-family: inherit;
}
button.ghost {
  background: var(--bg-3);
  color: var(--fg);
  border: 1px solid var(--border);
}
button:hover { filter: brightness(1.15); }
button:disabled { opacity: 0.5; cursor: wait; }

label { display: block; font-size: 11px; color: var(--fg-mute); margin-bottom: 3px; }
.group { margin-bottom: 18px; }
.group h3 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--fg-dim);
  margin: 0 0 8px 0;
  font-weight: 600;
}
.group .row { margin-bottom: 6px; }

/* ============== Tables (shared) ============== */
table {
  width: 100%; border-collapse: collapse;
  font-size: 12px;
}
th, td {
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
}
th { color: var(--fg-dim); font-weight: 600; font-size: 10px; text-transform: uppercase; }
td { color: var(--fg); }
tr:hover td { background: var(--bg-3); }
tr.critical td.sev-cell { color: var(--critical); font-weight: 600; }
tr.warning  td.sev-cell { color: var(--warning); }
tr.info     td.sev-cell { color: var(--info); }
.pill {
  display: inline-flex; align-items: center;
  height: 18px; padding: 0 8px;
  border-radius: 9px;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.5px;
}
.pill.critical { background: rgba(255,77,110,0.18); color: var(--critical); }
.pill.warning  { background: rgba(255,179,71,0.18); color: var(--warning); }
.pill.info     { background: rgba(94,218,156,0.18); color: var(--info); }

/* ============== Map markers (shared) ============== */
.anomaly-marker {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--critical);
  border: 2px solid #fff;
  box-shadow: 0 0 0 0 rgba(255,77,110,0.7);
  animation: pulse 1.4s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,77,110,0.7); }
  70%  { box-shadow: 0 0 0 14px rgba(255,77,110,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,77,110,0); }
}
.ref-marker {
  width: 16px; height: 16px;
  border-radius: 2px;
  background: var(--accent);
  border: 2px solid var(--bg);
  box-shadow: 0 0 6px var(--accent);
  transform: rotate(45deg);
}
.replay-cursor {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid #fff;
  box-shadow: 0 0 12px var(--accent), 0 0 0 4px rgba(77,166,255,0.3);
}

/* ============== Leaflet dark overrides ============== */
.leaflet-container { background: var(--bg) !important; }
.leaflet-control-attribution {
  background: rgba(7,9,15,0.7) !important;
  color: var(--fg-dim) !important;
  font-size: 10px !important;
}
.leaflet-control-attribution a { color: var(--fg-mute) !important; }
.leaflet-control-zoom a, .leaflet-control-layers {
  background: var(--bg-2) !important;
  color: var(--fg) !important;
  border: 1px solid var(--border-strong) !important;
}
.leaflet-control-zoom a { color: var(--fg) !important; }
.leaflet-control-zoom a:hover { background: var(--bg-3) !important; }
.leaflet-control-layers-toggle {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d8eaf8' stroke-width='2'><polygon points='12 2 22 8.5 12 15 2 8.5 12 2'/><polyline points='2 15.5 12 22 22 15.5'/></svg>") !important;
  background-size: 18px !important;
}
.leaflet-control-layers-expanded { color: var(--fg) !important; padding: 8px 10px !important; }
.leaflet-control-layers label { font-size: 12px !important; color: var(--fg) !important; margin: 2px 0 !important; }
.leaflet-control-layers-separator { border-top: 1px solid var(--border) !important; }
.leaflet-popup-content-wrapper {
  background: var(--bg-2);
  color: var(--fg);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
}
.leaflet-popup-tip { background: var(--bg-2); }
.leaflet-popup-content { font-size: 12px; margin: 8px 12px; }
.leaflet-popup-content b { color: var(--accent); }

/* ============== Auth gate (shared) ============== */
#authOverlay {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
}
#authOverlay::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(77,166,255,0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(255,77,110,0.04) 0%, transparent 50%);
  pointer-events: none;
}
.auth-box {
  position: relative;
  background: var(--bg-2);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 36px 40px 32px;
  width: 380px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.auth-box h1 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 1.2px;
  color: var(--fg);
}
.auth-box h1 .accent { color: var(--accent); }
.auth-box .sub {
  margin: 0 0 24px;
  font-size: 11px;
  color: var(--fg-dim);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.auth-box .row { margin-bottom: 14px; }
.auth-box label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--fg-mute);
  display: block;
  margin-bottom: 6px;
}
.auth-box input[type="password"] {
  width: 100%;
  background: var(--bg-3);
  color: var(--fg);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  padding: 10px 12px;
  font-size: 13px;
  font-family: ui-monospace, monospace;
  letter-spacing: 1px;
  box-sizing: border-box;
}
.auth-box input[type="password"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(77,166,255,0.15);
}
.auth-box button[type="submit"] {
  width: 100%;
  padding: 11px 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-top: 10px;
}
.auth-box .err {
  color: var(--critical);
  font-size: 12px;
  margin-top: 10px;
  min-height: 16px;
  text-align: center;
}
.auth-box .footer {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 10px;
  color: var(--fg-dim);
  text-align: center;
  letter-spacing: 0.4px;
}
body.locked { overflow: hidden; }
body.locked main, body.locked #top, body.locked #tabs {
  filter: blur(4px); pointer-events: none; user-select: none;
}