:root {
  --ok: #2e7d32;
  --idle: #888;
  --alarm: #d32f2f;
  --bg: #0f1115;
  --fg: #e6e6e6;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--bg);
  color: var(--fg);
}

#bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #171a21;
  border-bottom: 1px solid #262b36;
  font-size: 14px;
}

#spacer { flex: 1; }

#coord-readout {
  font-variant-numeric: tabular-nums;
  color: #b7c0cc;
}

#viewers {
  margin-left: 12px;
  padding: 3px 8px;
  font-size: 13px;
  color: #cdd6e0;
  background: #222734;
  border-radius: 6px;
  font-variant-numeric: tabular-nums;
}

#notify-btn {
  margin-left: 12px;
  padding: 5px 10px;
  font-size: 13px;
  color: #fff;
  background: #2b7cff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
#notify-btn:hover { filter: brightness(1.1); }
/* State colours set from JS: */
#notify-btn.bad  { background: var(--alarm); color: #fff; }   /* not enabled / blocked (red) */
#notify-btn.warn { background: #e0a800; color: #1a1a1a; }      /* notifications on, no sound (yellow) */
#notify-btn.ok   { background: var(--ok); color: #fff; }       /* fully enabled (green) */

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  background: var(--idle);
}
.dot.ok    { background: var(--ok); }
.dot.idle  { background: var(--idle); }
.dot.alarm { background: var(--alarm); box-shadow: 0 0 0 4px rgba(211,47,47,.25); }

#banner {
  padding: 12px 16px;
  background: var(--alarm);
  color: #fff;
  font-weight: 600;
  text-align: center;
}
#banner.hidden { display: none; }

#map {
  position: absolute;
  top: 0; /* overlaid controls handle offset; map fills remaining space */
  left: 0;
  right: 0;
  bottom: 0;
  /* pushed below the header via JS-independent layout: use flin parent */
}

/* Keep the map below the header/banner using a simple column layout. */
body {
  display: flex;
  flex-direction: column;
}
#bar, #banner { flex: 0 0 auto; position: relative; }
#map { position: relative; flex: 1 1 auto; top: 0; }

/* Pulsing marker when triggered. */
.pos-marker {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: #2b7cff;
}
.pos-marker.alarm {
  background: var(--alarm);
  animation: pulse 1s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(211,47,47,.6); }
  70%  { box-shadow: 0 0 0 14px rgba(211,47,47,0); }
  100% { box-shadow: 0 0 0 0 rgba(211,47,47,0); }
}