* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.hidden { display: none !important; }

/* ---------- auth ---------- */
.auth-view {
  height: 100%; display: flex; align-items: center; justify-content: center;
  background: #1b2a1f url("") center/cover;
}
.auth-card {
  width: 380px; max-width: 92vw; background: #fff; border-radius: 10px;
  padding: 24px; box-shadow: 0 8px 30px rgba(0,0,0,.35);
}
.auth-card h1 { margin: 0 0 4px; font-size: 1.4rem; }
.subtitle { margin: 0 0 16px; color: #666; font-size: .9rem; }
.tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.tab { flex: 1; padding: 8px; border: 1px solid #ccc; background: #f5f5f5; border-radius: 6px; cursor: pointer; }
.tab.active { background: #2e5d34; color: #fff; border-color: #2e5d34; }
form label { display: block; margin-bottom: 10px; font-size: .85rem; color: #333; }
form input, form select, form textarea {
  width: 100%; margin-top: 3px; padding: 8px; border: 1px solid #ccc; border-radius: 6px; font: inherit;
}
.radio-row { display: flex; gap: 14px; margin-bottom: 10px; font-size: .85rem; }
.radio-row label { display: flex; align-items: center; gap: 5px; margin: 0; }
.radio-row input { width: auto; margin: 0; }
button { padding: 8px 14px; border: 1px solid #ccc; border-radius: 6px; background: #f5f5f5; cursor: pointer; font: inherit; }
button.primary { background: #2e5d34; border-color: #2e5d34; color: #fff; width: 100%; padding: 10px; }
button.primary:hover { background: #3a7242; }
.error { color: #b00020; font-size: .85rem; min-height: 1.2em; }

/* ---------- map view ---------- */
#map-view { position: relative; height: 100%; }
/* map sits right of the sidebar and below the topbar – the lock applies to this viewport */
#map { position: absolute; top: 44px; left: 320px; right: 0; bottom: 0; }
.topbar {
  position: absolute; top: 0; left: 0; right: 0; height: 44px; z-index: 1000;
  display: flex; align-items: center; gap: 12px;
  background: rgba(20, 30, 24, .95); color: #fff; padding: 0 14px;
}
.topbar .spacer { flex: 1; }
.join-code { font-size: .8rem; background: #2e5d34; padding: 3px 8px; border-radius: 4px; }
.topbar button { padding: 5px 10px; }

/* module navigation in the topbar */
.topnav { display: flex; gap: 6px; margin-left: 14px; }
.topnav-btn {
  background: transparent; border: 1px solid rgba(255,255,255,.4); color: #fff;
  border-radius: 4px; font-size: .85rem;
}
.topnav-btn:hover { background: rgba(255,255,255,.15); }
.topnav-btn.active { background: #fff; color: #1b2a1f; border-color: #fff; font-weight: 600; }
.sos-btn {
  background: #d32f2f; border-color: #d32f2f; color: #fff;
  font-weight: 700; border-radius: 4px; margin-right: 4px;
}
.sos-btn:hover { background: #b71c1c; }

/* pulsing SOS map marker */
.sos-marker {
  width: 18px; height: 18px; border-radius: 50%;
  background: #d32f2f; border: 3px solid #fff;
  box-shadow: 0 0 0 0 rgba(211,47,47,.7);
  animation: sos-pulse 1.2s ease-out infinite;
}
@keyframes sos-pulse { to { box-shadow: 0 0 0 16px rgba(211,47,47,0); } }

/* phone numbers + documents */
.phone-link { font-size: 1.05rem; font-weight: 700; color: #1565c0; text-decoration: none; }
.preline { white-space: pre-line; }

/* module on/test/off selectors in the admin tile */
.module-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.module-row span { flex: 1; font-size: .9rem; }
.module-row select { padding: 5px; border: 1px solid #ccc; border-radius: 5px; }

.sidebar {
  position: absolute; top: 44px; left: 0; bottom: 0; width: 320px; z-index: 900;
  background: rgba(255,255,255,.95); padding: 12px; overflow-y: auto;
  border-right: 1px solid #ddd;
}
.area-row { display: flex; gap: 6px; margin: 8px 0; }
.area-row button { flex: 1; font-size: .8rem; padding: 6px 4px; }
.hint { font-size: .8rem; color: #555; background: #fff8e1; border: 1px solid #f0d878; padding: 8px; border-radius: 6px; margin: 10px 0; }
.hint button { margin-top: 6px; width: 100%; }
.filters { display: flex; gap: 6px; margin: 10px 0; }
.filters select, .filters input { flex: 1; min-width: 0; padding: 5px; border: 1px solid #ccc; border-radius: 5px; font-size: .8rem; }

.stats { margin: 10px 0; font-size: .8rem; }
.stats .sector-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; text-align: center; }
.stats .sector-grid span { background: #eee; border-radius: 4px; padding: 3px 0; }
.stats .sector-grid .hot { background: #d84315; color: #fff; }
.stats h4 { margin: 8px 0 4px; }

.incident-list { list-style: none; margin: 0; padding: 0; }
.incident-list li {
  border: 1px solid #ddd; border-radius: 6px; padding: 8px; margin-bottom: 8px;
  cursor: pointer; background: #fff;
}
.incident-list li:hover { border-color: #2e5d34; }
.incident-list .t { font-weight: 600; font-size: .9rem; }
.incident-list .m { font-size: .75rem; color: #666; }
.incident-list .badge { display: inline-block; font-size: .7rem; padding: 1px 6px; border-radius: 8px; color: #fff; }
.badge.fence_cut { background: #c62828; } .badge.theft { background: #6a1b9a; }
.badge.sighting { background: #1565c0; } .badge.damage { background: #ef6c00; }
.badge.break_in { background: #ad1457; } .badge.robbery { background: #4e342e; }
.badge.stock_theft { background: #6a1b9a; }
.badge.entry_path { background: #1565c0; } .badge.exit_path { background: #d32f2f; }
.badge.other { background: #546e7a; }

/* entry/exit path buttons match the path colours on the map */
.path-btn.entry { border-color: #1565c0; color: #1565c0; font-weight: 600; }
.path-btn.exit { border-color: #d32f2f; color: #d32f2f; font-weight: 600; }

/* path buttons inside event popups */
.popup-actions { display: flex; gap: 6px; margin-top: 8px; }
.popup-actions .path-btn { flex: 1; width: auto; margin: 0; font-size: .78rem; text-align: center; }

.mode-banner {
  position: absolute; top: 52px; left: 50%; transform: translateX(-50%); z-index: 1100;
  background: #c62828; color: #fff; padding: 8px 18px; border-radius: 20px;
  font-size: .9rem; box-shadow: 0 2px 10px rgba(0,0,0,.4);
}

/* visible error/info banner – no silent failures (alert/confirm are blocked in iframes) */
.err-banner {
  position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 3000;
  background: #b00020; color: #fff; padding: 10px 18px; border-radius: 8px;
  font-size: .9rem; max-width: 80vw; box-shadow: 0 2px 12px rgba(0,0,0,.5);
  white-space: pre-line;
}
.err-banner.ok { background: #2e5d34; }

/* while drawing a path the stroke must start even when pressing on a marker/line */
.drawing-mode .leaflet-marker-icon,
.drawing-mode .leaflet-interactive { pointer-events: none !important; }
.leaflet-marker-icon, .leaflet-tile { -webkit-user-drag: none; user-select: none; }

/* ---------- modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center;
}
.modal { width: 420px; max-width: 94vw; max-height: 90vh; overflow-y: auto; background: #fff; border-radius: 10px; padding: 20px; }
.modal h2 { margin-top: 0; font-size: 1.2rem; }
.modal-actions { display: flex; gap: 10px; margin-top: 12px; }
.modal-actions button { flex: 1; }

/* parcel number labels */
.parcel-label {
  background: transparent; border: none; box-shadow: none;
  color: #00e5ff; font-size: 14px; font-weight: 800;
  text-shadow: 0 0 4px #000, 0 0 4px #000, 0 0 6px #000;
}
.leaflet-tooltip.parcel-label::before { display: none; }
.hide-parcel-labels .parcel-label { display: none; }

/* collapsible sidebar tiles */
.panel {
  border: 1px solid #ccc; border-radius: 8px; margin: 8px 0; padding: 0;
  background: #f0f4f0;
}
.panel summary {
  padding: 9px 12px; font-weight: 600; font-size: .9rem; cursor: pointer;
  list-style: none; user-select: none;
}
.panel summary::before { content: '▸ '; }
.panel[open] summary::before { content: '▾ '; }
.panel > *:not(summary) { margin-left: 8px; margin-right: 8px; }
.panel button { display: block; width: calc(100% - 16px); margin: 0 8px 8px; font-size: .82rem; text-align: left; }
.panel .filters { margin: 4px 8px 8px; }
.panel .stats { margin: 4px 8px; }
.panel .incident-list { margin: 0 8px 8px; }
.panel .hint { margin: 4px 8px 8px; }

.zoom-indicator {
  background: rgba(20,30,24,.85); color: #00e5ff; padding: 4px 10px;
  border-radius: 4px; font-size: .85rem; font-weight: 700; cursor: pointer;
}

.members-heading { margin: 14px 0 6px; font-size: .85rem; color: #444; }
.member-row { display: flex; align-items: center; gap: 6px; font-size: .8rem; }
.member-row .role { color: #777; font-size: .7rem; }
.member-row button { margin-left: auto; font-size: .7rem; padding: 2px 6px; }

/* events list items (sidebar tile) */
.ev-item summary { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.ev-item summary .m { margin-left: auto; }
.ev-detail { padding-top: 6px; font-size: .82rem; }
.ev-detail small { color: #666; }
.ev-detail .popup-actions { margin-top: 6px; }
.incident-list li .m { font-size: .75rem; color: #666; }

/* collapsible event tiles inside a shared-point popup */
.ev-group { border: 1px solid #ddd; border-radius: 6px; margin: 6px 0; padding: 4px 6px; }
.ev-group summary { cursor: pointer; font-weight: 600; font-size: .85rem; }
.ev-group[open] summary { border-bottom: 1px solid #eee; margin-bottom: 4px; }

/* incident popup photos */
.popup-photos { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.popup-photos img { width: 90px; height: 90px; object-fit: cover; border-radius: 4px; cursor: pointer; }

@media (max-width: 700px) {
  .sidebar { width: 100%; max-height: 45%; top: auto; bottom: 0; border-right: 0; border-top: 1px solid #ddd; }
  #map { left: 0; bottom: 45%; }
}