:root {
  color-scheme: dark;
  --bg: #14161b;
  --panel: #1c1f26;
  --border: #2a2e38;
  --text: #e6e8ec;
  --text-dim: #9aa0ac;
  --accent: #5aa9ff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
}

header.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}

header.site-header h1 {
  font-size: 18px;
  margin: 0;
}

nav.view-tabs a {
  color: var(--text-dim);
  text-decoration: none;
  margin-left: 16px;
  font-size: 14px;
  padding: 6px 10px;
  border-radius: 6px;
}

nav.view-tabs a.active,
nav.view-tabs a:hover {
  color: var(--text);
  background: var(--border);
}

#map {
  height: calc(100vh - 53px);
  width: 100%;
  background: var(--bg);
}

.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  padding: 20px;
}

.camera-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.camera-card .snapshot-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
}

.camera-card img.snapshot {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.camera-card .status-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.6);
}

.status-badge.online { color: #7ee787; }
.status-badge.offline { color: #ff7b72; }

.camera-card .body {
  padding: 12px 14px;
}

.camera-card h3 {
  margin: 0 0 4px;
  font-size: 15px;
}

.camera-card p.description {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--text-dim);
  min-height: 1em;
}

.camera-card .actions {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.camera-card .actions button,
.camera-card .actions a {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: #23262e;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
}

.camera-card .actions button:hover,
.camera-card .actions a:hover {
  border-color: var(--accent);
}

/* The Leaflet-generated icon wrapper (targeted via this className) is inert
   by default — only the actual visible dot/cone shapes below opt back in to
   receiving clicks. Otherwise the full rectangular icon box is clickable even
   where nothing is drawn, so two nearby markers' boxes fight over clicks in
   their overlap based on stacking order rather than what's visually under
   the cursor. !important is needed because Leaflet's own stylesheet sets
   `.leaflet-marker-icon.leaflet-interactive { pointer-events: auto }`, a
   two-class selector that otherwise outranks this one. */
.bearing-divicon {
  pointer-events: none !important;
}

.bearing-marker {
  position: relative;
  width: 36px;
  height: 52px;
}

.bearing-marker .dot {
  position: absolute;
  left: 12px;
  top: 34px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid #fff;
  pointer-events: auto;
  cursor: pointer;
}

.bearing-marker .cone {
  position: absolute;
  left: 0;
  top: 0;
  width: 36px;
  height: 40px;
  background: rgba(90, 169, 255, 0.35);
  clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
  transform-origin: 50% 100%;
  pointer-events: auto;
  cursor: pointer;
}

dialog.camera-fullscreen {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  margin: 0;
  padding: 0;
  border: none;
  background: #000;
}

dialog.camera-fullscreen::backdrop {
  background: #000;
}

dialog.camera-fullscreen img.snapshot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

dialog.camera-fullscreen .close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  z-index: 1;
}

dialog.camera-fullscreen .close:hover {
  background: rgba(255, 255, 255, 0.2);
}

dialog.camera-fullscreen .bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
  color: #fff;
}

dialog.camera-fullscreen .bar .title {
  font-size: 14px;
}

dialog.camera-fullscreen .bar .actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

dialog.camera-fullscreen .bar .actions button,
dialog.camera-fullscreen .bar .actions a {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

dialog.camera-fullscreen .bar .actions button:hover,
dialog.camera-fullscreen .bar .actions a:hover {
  border-color: var(--accent);
}

dialog.timelapse-modal {
  border: none;
  border-radius: 10px;
  padding: 0;
  background: var(--panel);
  color: var(--text);
  width: min(90vw, 960px);
}

dialog.timelapse-modal::backdrop {
  background: rgba(0, 0, 0, 0.6);
}

.timelapse-modal .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}

.timelapse-modal .header button {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 20px;
  cursor: pointer;
}

.timelapse-modal video {
  width: 100%;
  display: block;
  background: #000;
}

.timelapse-modal .footer {
  padding: 10px 16px;
  font-size: 12px;
  color: var(--text-dim);
  display: flex;
  justify-content: space-between;
  align-items: center;
}