/* ============================================================
   LiveRoad v4 — Map app overlay
   Loaded AFTER style.css so cascade wins.
   IMPORTANT: visual treatment only — do NOT hide/remove any
   id="..." element. app.js has ~160 getElementById hooks.
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  --v4-charcoal: #2a2f3a;
  --v4-amber:    #f5b800;
  --v4-paper:    #ffffff;
  --v4-bg:       #f4f6f9;
  --v4-line:     #e5e7eb;
  --v4-muted:    #6b7280;
  --v4-text:     #1f2330;
}
body.dark {
  --v4-paper: #1a1d24;
  --v4-bg:    #14161c;
  --v4-line:  #2a2f3a;
  --v4-muted: #8b94a8;
  --v4-text:  #f4f6f9;
}

/* Font everywhere inside the app */
#app, #app * {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
#app code, #app pre, #app .mono, #app [data-mono] {
  font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* Top bar */
#top-bar {
  background: var(--v4-paper) !important;
  border-bottom: 1px solid var(--v4-line) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02) !important;
  backdrop-filter: none !important;
}
#top-bar .logo-text { font-weight: 700; letter-spacing: -0.2px; color: var(--v4-text); }
#top-bar .logo-mark { color: var(--v4-amber); }
body.dark #top-bar .logo-mark { color: var(--v4-amber); }

/* Top search */
.top-search {
  background: var(--v4-bg) !important;
  border: 1px solid var(--v4-line) !important;
  border-radius: 8px !important;
  transition: border-color 120ms, box-shadow 120ms;
}
.top-search:focus-within {
  border-color: var(--v4-amber) !important;
  box-shadow: 0 0 0 3px rgba(245,184,0,0.18) !important;
}
.top-search-input { color: var(--v4-text); }
.top-search-input::placeholder { color: var(--v4-muted); }

/* Avatar + dark toggle */
.top-avatar, #btn-dark {
  background: var(--v4-bg) !important;
  border: 1px solid var(--v4-line) !important;
  border-radius: 8px !important;
  color: var(--v4-text) !important;
  font-weight: 500;
}
.top-avatar:hover {
  background: var(--v4-charcoal) !important;
  border-color: var(--v4-charcoal) !important;
  color: #fff !important;
}
#btn-dark:hover { border-color: var(--v4-amber) !important; }

/* Filter rail pills */
#filter-rail { background: transparent !important; }
.pill {
  background: var(--v4-paper) !important;
  border: 1px solid var(--v4-line) !important;
  border-radius: 999px !important;
  color: var(--v4-text) !important;
  font-weight: 500 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transition: background 100ms, border-color 100ms;
}
.pill:hover { border-color: var(--v4-amber) !important; }
.pill.on    { border-color: var(--v4-charcoal) !important; }

.sev-chip .pill-dot {
  width: 8px; height: 8px; border-radius: 50%;
  display: inline-block; margin-right: 6px;
}
.sev-chip.sev-major    .pill-dot { background: #d92d20; }
.sev-chip.sev-moderate .pill-dot { background: var(--v4-amber); }
.sev-chip.sev-minor    .pill-dot { background: #6b7280; }
.sev-chip:not(.on) .pill-dot { opacity: 0.4; }

.status-chip.on {
  background: var(--v4-charcoal) !important;
  border-color: var(--v4-charcoal) !important;
  color: #fff !important;
}

#btn-minor-works[aria-pressed="true"] {
  background: var(--v4-amber) !important;
  border-color: var(--v4-amber) !important;
  color: var(--v4-charcoal) !important;
}

/* Layer rail */
#layer-rail { background: transparent !important; }
.layer-chip {
  background: var(--v4-paper) !important;
  border: 1px solid var(--v4-line) !important;
  border-radius: 999px !important;
  color: var(--v4-text) !important;
  font-weight: 500;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transition: background 100ms, border-color 100ms;
}
.layer-chip:hover { border-color: var(--v4-amber) !important; }
.layer-chip.on {
  background: var(--v4-charcoal) !important;
  border-color: var(--v4-charcoal) !important;
  color: #fff !important;
}
.layer-chip.on .layer-chip-icon { color: var(--v4-amber); }
.layer-chip[data-accent="amber"].on {
  background: var(--v4-amber) !important;
  color: var(--v4-charcoal) !important;
  border-color: var(--v4-amber) !important;
}
.layer-chip[data-accent="amber"].on .layer-chip-icon { color: var(--v4-charcoal); }

/* Buttons (generic) */
.btn-primary, button.primary {
  background: var(--v4-amber) !important;
  color: var(--v4-charcoal) !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  letter-spacing: -0.1px;
}
.btn-primary:hover, button.primary:hover { background: #d99e00 !important; }
.btn-secondary, button.secondary {
  background: var(--v4-paper) !important;
  color: var(--v4-text) !important;
  border: 1px solid var(--v4-line) !important;
  border-radius: 8px !important;
}
.btn-secondary:hover, button.secondary:hover { border-color: var(--v4-amber) !important; }

/* Leaflet popup */
.leaflet-popup-content-wrapper {
  border-radius: 12px !important;
  border: 1px solid var(--v4-line) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
}
.leaflet-popup-content { font-family: "Inter", sans-serif !important; color: var(--v4-text); }
.leaflet-popup-tip { background: var(--v4-paper) !important; }

/* Modals */
.modal, .lr-modal, dialog {
  background: var(--v4-paper) !important;
  border: 1px solid var(--v4-line) !important;
  border-radius: 14px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.12) !important;
}
.modal h2, .lr-modal h2 {
  font-weight: 700; letter-spacing: -0.3px; color: var(--v4-text);
}
.modal input[type="text"], .modal input[type="email"], .modal input[type="password"],
.modal input[type="search"], .modal select, .modal textarea {
  border: 1px solid var(--v4-line) !important;
  border-radius: 8px !important;
  background: var(--v4-bg) !important;
  color: var(--v4-text) !important;
  transition: border-color 120ms, box-shadow 120ms;
}
.modal input:focus, .modal select:focus, .modal textarea:focus {
  border-color: var(--v4-amber) !important;
  box-shadow: 0 0 0 3px rgba(245,184,0,0.18) !important;
  outline: none !important;
}

/* Marker cluster + live dot */
.marker-cluster div { font-weight: 700; }
@keyframes lr-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(245,184,0,0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(245,184,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(245,184,0,0); }
}
.lr-live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--v4-amber);
  animation: lr-pulse 1.8s infinite;
}

/* Mobile */
@media (max-width: 800px) {
  #top-bar { padding: 8px 12px !important; }
  .pill, .layer-chip { font-size: 12px !important; }
}