/* Styles for the FBA Threat Database + Anti-Black List pages.
   Loaded in addition to the main style.css — only additive rules here. */

/* Danger level badges: green -> yellow -> orange -> red -> dark red */
.dl-badge { color: #fff; }
.dl-1 { background: #f2b8b5; }
.dl-2 { background: #e08281; }
.dl-3 { background: #c94c4c; }
.dl-4 { background: #a11d1d; }
.dl-5 { background: #5c0a0a; }

/* Operating status tags on the Anti-Black List */
.status-operating { background: #d11149; color: #fff; }
.status-shutdown { background: #666; color: #fff; }

/* Database-driven Leaflet maps */
.db-map {
  width: 100%;
  height: 340px;
  border-radius: 8px;
  margin-top: 0.5rem;
  background: #e8e8e8; /* visible placeholder while tiles load */
}
.db-map-tall { height: 70vh; min-height: 420px; }

/* Danger level legend on the full map page */
.dl-legend { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0.5rem 0; }
.dl-legend-item { display: inline-flex; align-items: center; gap: 0.3rem; }
.dl-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
}

/* Draw-a-map box on add/edit threat and Anti-Black List forms */
#drawMap { height: 420px; border-radius: 8px; margin-top: 0.5rem; background: #e8e8e8; }
.map-help { font-size: 0.85rem; color: #5b6b7f; margin-top: 0.4rem; }

/* --- Full map page (threat_map.php) -------------------------------------
   Previously lived as an inline <style nonce> block on the old admin-only
   Leaflet map page -- that doesn't work under this site's CSP
   (style-src 'self', no nonce allowance for styles), so none of it was
   actually rendering. Moved here as real external CSS, now that this map
   is the main public map page, and reskinned with the site's own red
   palette instead of the old hardcoded admin-tool colors. */
.map-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: 0.6rem 0.8rem;
  width: 260px;
  box-sizing: border-box;
  font-size: 0.9rem;
}

.map-panel input[type="text"] {
  width: 100%;
  min-height: 42px;
  margin-bottom: 0;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
}

.map-search-results {
  max-height: 220px;
  overflow-y: auto;
  margin-top: 0.4rem;
}

.map-search-results:empty {
  margin-top: 0;
  max-height: 0;
}

.map-search-results > div {
  padding: 0.4rem 0.5rem;
  border-radius: 6px;
  font-size: 0.9rem;
  cursor: pointer;
}

.map-search-results > div:hover {
  background: var(--primary-soft);
}

.map-panel-divider {
  border-top: 1px solid var(--border);
  margin: 0.6rem 0;
}

.map-filters-wrap {
  background: var(--surface-alt);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.7rem;
}

.map-filter-group { margin-bottom: 0.6rem; }
.map-filter-group:last-child { margin-bottom: 0; }
.map-filter-group > label { font-weight: 700; display: flex; align-items: center; gap: 0.5rem; color: var(--heading); }
.map-filter-sub { margin-left: 1.6rem; margin-top: 0.35rem; display: flex; flex-direction: column; gap: 0.3rem; }
.map-filter-sub label { display: flex; align-items: center; gap: 0.5rem; font-weight: 400; }

input.fba-checkbox {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: inline-block;
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  box-sizing: border-box;
  border: 2px solid var(--border-strong);
  border-radius: 4px;
  background-color: var(--surface);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px 13px;
  cursor: pointer;
  margin: 0;
  padding: 0;
  outline: none;
}
input.fba-checkbox:checked {
  background-color: var(--primary);
  border-color: var(--primary);
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M13.485 1.929a1 1 0 010 1.414L6.414 10.414a1 1 0 01-1.414 0L2.515 7.929a1 1 0 111.414-1.414L5.707 8.293l6.364-6.364a1 1 0 011.414 0z'/%3E%3C/svg%3E");
}
input.fba-checkbox:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.map-choose-popup { max-width: 240px; }
.map-choose-popup .choose-msg { font-size: 0.85em; color: var(--muted); margin-bottom: 6px; }
.map-choose-popup .choose-item {
  color: var(--primary);
  text-decoration: underline;
  font-weight: 700;
  cursor: pointer;
  padding: 3px 0;
}
.map-choose-popup .choose-item:hover { color: var(--primary-dark); }

.map-popup-name { font-size: 1.1em; }
.map-popup-address,
.map-popup-desc { font-size: 0.85em; color: var(--muted); margin-top: 2px; }
.map-popup-link { margin-top: 4px; }

.map-fullscreen-btn {
  background: var(--surface) !important;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  cursor: pointer;
  color: var(--heading);
}

/* Near Me -- deliberately a small, understated icon-only control in its
   own corner rather than a labeled button competing with the search
   panel for attention. */
.map-near-me-wrap {
  position: relative;
}

.map-near-me-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--muted);
  box-shadow: var(--shadow);
}

.map-near-me-icon-btn:hover {
  background: var(--primary-soft);
  color: var(--primary-dark);
  border-color: var(--primary);
}

.map-near-me-icon-btn svg {
  width: 18px;
  height: 18px;
}

.map-near-me-status {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.4rem);
  width: 200px;
  margin: 0;
  padding: 0.5rem 0.7rem;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  font-size: 0.8rem;
  color: var(--muted);
}

.user-location-marker { position: relative; }

.user-location-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.user-location-pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border-radius: 50%;
  background: var(--primary);
  opacity: 0.35;
  animation: user-location-pulse 1.8s ease-out infinite;
}

@keyframes user-location-pulse {
  0% { transform: scale(0.5); opacity: 0.45; }
  100% { transform: scale(1.8); opacity: 0; }
}