:root {
  --bg: #0f1420;
  --panel: #182031;
  --panel-2: #202b41;
  --text: #e7ecf5;
  --muted: #93a0b8;
  --accent: #37c8c3;
  --green: #16a34a;
  --yellow: #eab308;
  --red: #dc2626;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  /* Full-viewport column layout so the floor plan can be fit to screen without
     page scrolling. dvh tracks the iOS Safari toolbar so it works on iPhone. */
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px;
  background: var(--panel);
  border-bottom: 1px solid #263149;
  flex-wrap: wrap;
}

.title { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
h1 { font-size: 18px; margin: 0; letter-spacing: 0.3px; }
h2 { font-size: 15px; margin: 0 0 8px; }

.status { font-size: 13px; color: var(--muted); }
.status.stale { color: var(--yellow); }
.status.error { color: var(--red); }

.actions { display: flex; align-items: center; gap: 14px; }
.switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.switch input { width: 18px; height: 18px; accent-color: var(--accent); }
button.ghost { flex: 0 0 auto; background: transparent; border-color: #33415e; padding: 7px 12px; }

/* Login screen */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.login-card {
  width: 100%; max-width: 340px;
  background: var(--panel);
  border: 1px solid #263149;
  border-radius: 14px;
  padding: 28px 26px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
  display: flex; flex-direction: column; gap: 12px;
}
.login-card h1 { font-size: 20px; margin: 0; }
.login-sub { margin: 0; color: var(--muted); font-size: 13px; }
.login-card input {
  padding: 11px 12px; border-radius: 8px;
  border: 1px solid #33415e; background: var(--panel-2); color: var(--text);
  font-size: 15px;
}
.login-card button { width: 100%; margin-top: 4px; }
.login-error { color: var(--red); font-size: 13px; margin: 0; min-height: 16px; }

main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  gap: 16px;
  padding: 14px 20px;
  align-items: flex-start;
  justify-content: center;
  overflow: auto; /* only scrolls if the edit panel needs it on small screens */
}

.stage {
  position: relative;
  flex: 0 1 auto;
  max-width: 100%;
  line-height: 0;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0,0,0,0.35);
}
/* width/height auto + max-width keep aspect ratio; max-height is set from JS
   (fitStage) to whatever vertical space is actually available. */
/* Greyscale so the colourful architectural plan doesn't compete with / mislead
   the heatmap colours; the heat overlay is the only thing meant to carry colour. */
.stage img { display: block; width: auto; height: auto; max-width: 100%; user-select: none; -webkit-user-drag: none; filter: grayscale(1) contrast(1.05) brightness(1.02); }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* Container is click-through; only the dots themselves are interactive. */
.markers { position: absolute; inset: 0; pointer-events: none; }
.marker, .hotspot { pointer-events: auto; }

/* View-mode clickable point -> opens the 6h history. */
.hotspot {
  position: absolute;
  width: 18px; height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.9);
  background: rgba(15,20,32,0.35);
  box-shadow: 0 0 0 2px rgba(0,0,0,0.35);
  cursor: pointer;
  transition: transform 0.1s ease;
  touch-action: none;
}
.hotspot:hover { transform: scale(1.25); background: rgba(15,20,32,0.6); }

.marker {
  position: absolute;
  width: 22px; height: 22px;
  margin: -11px 0 0 -11px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: var(--accent);
  box-shadow: 0 0 0 2px rgba(0,0,0,0.35);
  cursor: grab;
  display: flex; align-items: center; justify-content: center;
  touch-action: none; /* let pointer-drag work on touch without scrolling */
}
.marker.dragging { cursor: grabbing; }
.marker .label {
  position: absolute;
  bottom: 18px;
  white-space: nowrap;
  font-size: 11px;
  background: rgba(15,20,32,0.9);
  color: #fff;
  padding: 1px 6px;
  border-radius: 4px;
  pointer-events: none;
}

.panel {
  flex: 0 0 320px;
  background: var(--panel);
  border-radius: 10px;
  padding: 16px;
  max-height: calc(100vh - 120px);
  overflow: auto;
}
.panel.hidden { display: none; }
.hint { font-size: 12px; color: var(--muted); margin: 0 0 12px; line-height: 1.4; }

.area-list { list-style: none; margin: 0 0 16px; padding: 0; }
.area-list li {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--panel-2);
  margin-bottom: 6px;
  cursor: pointer;
  border: 1px solid transparent;
  font-size: 14px;
}
.area-list li.armed { border-color: var(--accent); }
.area-list li.placed .dot { background: var(--accent); }
.area-list .meta { display: flex; align-items: center; gap: 8px; }
.area-list .dot { width: 9px; height: 9px; border-radius: 50%; background: #3a465f; flex: 0 0 auto; }
.area-list .count { color: var(--muted); font-variant-numeric: tabular-nums; }

.control { margin-bottom: 12px; }
.control label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.control input[type=range] { width: 100%; accent-color: var(--accent); }

.buttons { display: flex; gap: 8px; }
button {
  flex: 1;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid #33415e;
  background: var(--panel-2);
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
}
button.primary { background: var(--accent); border-color: var(--accent); color: #06231f; font-weight: 600; }
button.danger { background: transparent; border-color: #6b2233; color: #ff6b7f; }
button.danger:hover { background: rgba(220,38,38,0.12); }
button:hover { filter: brightness(1.08); }
.save-status { font-size: 12px; color: var(--muted); margin: 8px 0 0; min-height: 14px; }

.legend {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 20px 14px;
  font-size: 12px; color: var(--muted);
}
.legend-bar {
  width: 220px; height: 12px; border-radius: 6px;
  background: linear-gradient(90deg, #16a34a 0%, #eab308 55%, #dc2626 100%);
}
.legend-max { margin-left: auto; }

/* History modal */
.modal {
  position: fixed; inset: 0;
  background: rgba(6,10,18,0.7);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; z-index: 50;
}
.modal.hidden { display: none; }
.modal-card {
  width: 100%; max-width: 720px;
  background: var(--panel);
  border: 1px solid #263149;
  border-radius: 14px;
  padding: 18px 20px 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.modal-head h3 { margin: 0; font-size: 16px; }
.modal-card canvas { width: 100%; height: auto; display: block; background: var(--panel-2); border-radius: 8px; }
.modal-card .hint { margin: 10px 0 0; }

.pw-card { max-width: 360px; }
.pw-card .hint { margin: 0 0 10px; }
.pw-card input {
  width: 100%;
  padding: 11px 12px; border-radius: 8px;
  border: 1px solid #33415e; background: var(--panel-2); color: var(--text);
  font-size: 15px; margin-bottom: 10px;
}

@media (max-width: 860px) {
  main { flex-direction: column; }
  .panel { flex: 1 1 auto; width: 100%; max-height: none; }
}