html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#searchBar {
  position: absolute;
  top: 12px;
  left: 64px;
  z-index: 1000;
  width: 260px;
  max-width: calc(100vw - 120px);
}

#searchInput {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 12px;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.38);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  outline: none;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

#searchInput:focus {
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

#searchResults {
  display: none;
  margin-top: 4px;
  background: rgba(255, 255, 255, 0.38);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  max-height: 220px;
  overflow-y: auto;
}

#searchResults.visible {
  display: block;
}

.search-result-item {
  padding: 8px 14px;
  font-size: 13px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.search-result-item:last-child {
  border-bottom: none;
}

.search-result-item:hover {
  background: rgba(52, 152, 219, 0.1);
}

#pinButton {
  position: absolute;
  top: 12px;
  left: 340px;
  z-index: 1000;

  width: 28px;
  height: 36px;

  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;

  background: transparent;
  border: none;
  border-radius: 4px;
  outline: none;

  cursor: pointer;
  transition: opacity 0.15s ease;
}

#pinButton:focus-visible {
  outline: 2px solid #3498db;
  outline-offset: 2px;
}

#pinButton:hover {
  opacity: 0.7;
}

#pinButton.active {
  opacity: 1;
}

#pinButton svg path {
  fill: #3498db;
  stroke: none;
  transition: fill 0.2s ease;
}

#pinButton svg circle {
  fill: #fff;
  transition: fill 0.2s ease;
}

#pinButton.active svg path {
  fill: rgba(255, 255, 255, 0.85);
  stroke: rgba(255, 255, 255, 0.5);
}

#pinButton.active svg circle {
  fill: rgba(255, 255, 255, 0.35);
}

#map {
  width: 100%;
  height: 100%;
}

/* Full-screen fixed overlay: map fills the viewport, offset below the WP admin bar when logged in */
#cim-map-wrap {
  top: 0;
}

body.admin-bar #cim-map-wrap {
  top: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar #cim-map-wrap {
    top: 46px;
  }
}

/* Leaflet popup frosted glass overrides */

.leaflet-popup-content-wrapper {
  background: rgba(255, 255, 255, 0.38);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

.leaflet-popup-content {
  margin: 12px 14px;
  color: #333;
  font-size: 13px;
  line-height: 1.5;
}

.leaflet-popup-tip {
  background: rgba(255, 255, 255, 0.38);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: none;
}

.leaflet-popup-close-button {
  color: #666 !important;
  font-size: 18px !important;
  top: 6px !important;
  right: 8px !important;
}

.leaflet-popup-close-button:hover {
  color: #333 !important;
}

.leaflet-tooltip {
  font-size: 14px;
  font-weight: bold;
}

.custom-pin {
  background: transparent;
  border: none;
}

/* Map marker: teardrop with a label strip (photo, name, date) below the tip */
.cim-marker {
  position: relative;
  width: 30px;
  height: 42px;
}

.cim-marker-teardrop {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  overflow: visible;
}

.cim-marker-body {
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 42px;
}

/* The photo is baked inside the SAME <svg> as the teardrop (via a clipped
   foreignObject), so it can never be stacked behind the pin by Leaflet. The
   wrapper is a 32px box over the head that holds the shared circular crop. */
.cim-marker-imgwrap {
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

.cim-circle-photo[data-size] {
  border-radius: 50%;
  overflow: hidden;
}

/* Label strip below the teardrop tip: stays centered under the pin. */
.cim-marker-labels {
  position: absolute;
  top: 44px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  pointer-events: none;
}

/* Row holding the name pill. */
.cim-marker-labelrow {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

/* Animal/name label shown below the teardrop tip */
.cim-marker-name {
  white-space: nowrap;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  padding: 1px 5px;
  border-radius: 999px;
  letter-spacing: 0.2px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* Pin placed-date label shown below the teardrop tip, under the name row */
.cim-marker-date {
  white-space: nowrap;
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  background: rgba(0, 0, 0, 0.45);
  padding: 1px 5px;
  border-radius: 999px;
  letter-spacing: 0.2px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.pin-editor {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 270px;
  max-width: 320px;
}

.pin-editor .pin-name {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 10px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  font-size: 13px;
  background: rgba(255, 255, 255, 0.32);
  outline: none;
  transition: border-color 0.15s ease;
}

.pin-editor .pin-name:focus {
  border-color: rgba(52, 152, 219, 0.5);
}

.pin-editor .pin-description {
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 13px;
  resize: vertical;
  padding: 7px 10px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.32);
  outline: none;
  transition: border-color 0.15s ease;
}

.pin-editor .pin-description:focus {
  border-color: rgba(52, 152, 219, 0.5);
}

.pin-editor .pin-photo-url {
  width: 100%;
  box-sizing: border-box;
  font-size: 13px;
  padding: 7px 10px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.32);
  outline: none;
  transition: border-color 0.15s ease;
}

.pin-editor .pin-photo-url:focus {
  border-color: rgba(52, 152, 219, 0.5);
}

.pin-photo {
  margin-bottom: 6px;
}

.pin-photo img {
  display: block;
  width: 100%;
  max-height: 160px;
  object-fit: cover;
  border-radius: 6px;
}

.pin-photo-fallback {
  display: block;
  font-size: 12px;
  color: #999;
  font-style: italic;
}

.pin-editor .pin-coords {
  font-size: 12px;
  color: #666;
  font-variant-numeric: tabular-nums;
}

.coord-tooltip {
  font-size: 12px;
  font-weight: normal;
  font-variant-numeric: tabular-nums;
}

.pin-editor-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pin-editor-row .save-pin {
  flex: 1;
}

.pin-readonly {
  font-size: 14px;
  line-height: 1.4;
  max-width: 240px;
}

.pin-readonly p {
  margin: 4px 0;
  font-size: 13px;
  color: #333;
  white-space: pre-wrap;
}

.pin-readonly span:not(.status-badge) {
  color: #555;
  font-size: 12px;
}

.pin-own-info {
  font-size: 14px;
  line-height: 1.4;
}

.pin-own-info p {
  margin: 4px 0 0;
  font-size: 13px;
  color: #333;
  white-space: pre-wrap;
}

.pin-own-info span {
  display: block;
  margin-top: 4px;
  color: #555;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.pin-own .remove-pin {
  flex-shrink: 0;
  background: none;
  border: none;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 2px;
}
/* -------------------------
   Status checkboxes, health, notify
------------------------- */

.pin-status-group {
  display: flex;
  gap: 10px;
  font-size: 13px;
}

.pin-status-group label {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.pin-collapsible {
  font-size: 13px;
}

.pin-collapsible summary {
  cursor: pointer;
  color: #333;
}

.pin-condition-group,
.pin-notify-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
  padding-left: 4px;
}

.pin-condition-group label,
.pin-notify-group label {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.pin-notify-group input[type="email"] {
  width: 100%;
  box-sizing: border-box;
  font-size: 13px;
  margin-top: 4px;
  padding: 7px 10px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.32);
  outline: none;
  transition: border-color 0.15s ease;
}

.pin-notify-group input[type="email"]:focus {
  border-color: rgba(52, 152, 219, 0.5);
}

.cim-editor-actions {
  display: flex;
  gap: 6px;
}

.update-status {
  align-self: flex-start;
}

.cancel-edit {
  background: rgba(255,255,255,0.32);
  border: 1px solid rgba(255,255,255,0.45);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  color: #555;
  cursor: pointer;
  transition: background 0.15s;
}

.cancel-edit:hover {
  background: rgba(255,255,255,0.55);
  color: #333;
}

.pin-status-badges {
  display: flex;
  gap: 6px;
  margin: 4px 0;
}

.status-badge {
  font-size: 11px;
  font-weight: bold;
  padding: 2px 8px;
  border-radius: 10px;
  color: white;
}

.status-badge-lost {
  background: #1c5c8a;
  color: white;
}

.status-badge-hurt {
  background: #9f3127;
  color: white;
}

.status-badge-found {
  background: #157a3f;
  color: white;
}

.status-badge-health {
  background: #8e44ad;
  color: white;
}

.status-badge-report-crime {
  background: #9f3127;
  color: white;
}

.pin-coords-line {
  display: block;
  color: #555;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  margin: 4px 0;
}

/* -------------------------
   Own-pin popup layout
------------------------- */

.pin-own {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 270px;
  max-width: 320px;
}

.pin-own p {
  margin: 0;
  font-size: 13px;
  color: #333;
  white-space: pre-wrap;
}

.pin-own .remove-pin {
  margin-top: 6px;
  background: rgba(192, 57, 43, 0.08);
  border: 1px solid rgba(192, 57, 43, 0.3);
  color: #c0392b;
  border-radius: 8px;
  padding: 6px;
  cursor: pointer;
  font-size: 12px;
  transition: background 0.15s ease;
}

.pin-own .remove-pin:hover {
  background: rgba(192, 57, 43, 0.15);
}

.pin-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255,255,255,0.32);
  border: 1px solid rgba(255,255,255,0.45);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11px;
  color: #555;
  cursor: pointer;
  transition: background 0.15s;
  margin-top: 4px;
}

.pin-share-btn:hover {
  background: rgba(255,255,255,0.55);
  color: #333;
}

/* -------------------------
   Sightings list (inside popups)
------------------------- */

.pin-sightings {
  margin-top: 2px;
}

.cim-sightings-foldout {
  margin-top: 6px;
  border-top: 1px solid #eee;
  padding-top: 6px;
  font-size: 12px;
}

.cim-sightings-foldout summary {
  cursor: pointer;
  font-weight: bold;
  color: #555;
  list-style: none;
  user-select: none;
}

.cim-sightings-foldout summary::-webkit-details-marker {
  display: none;
}

.cim-sightings-foldout summary::before {
  content: "▸ ";
  color: #666;
}

.cim-sightings-foldout[open] summary::before {
  content: "▾ ";
}

.cim-sightings-foldout[open] .pin-sightings {
  margin-top: 6px;
}

.cim-no-sightings {
  margin: 4px 0 0;
  color: #555;
}

.sighting-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 140px;
  overflow-y: auto;
}

.sighting-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 0;
  font-size: 12px;
}

.sighting-row-link {
  background: none;
  border: none;
  color: #2471a3;
  cursor: pointer;
  padding: 0;
  font-size: 12px;
  text-align: left;
  transition: color 0.15s ease;
}

.sighting-row-link:hover {
  color: #2471a3;
}

.sighting-row-note {
  color: #555;
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100px;
}

/* Every report is a unified "tip" placed on the map. */
.sighting-row-tip {
  opacity: 0.9;
}
.tip-badge {
  display: inline-block;
  margin-right: 5px;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  background: #a06b00;
  vertical-align: middle;
}

.delete-sighting {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  padding: 0;
  color: #666;
  transition: color 0.15s ease;
}

.delete-sighting:hover {
  color: #c0392b;
}

/* Inline two-click confirm: button turns red on first click */
.cim-confirm-pending,
.cim-confirm-pending:hover {
  color: #fff !important;
  background: #c0392b !important;
  border-radius: 4px;
  padding: 2px 8px;
  font-weight: 600;
}

.report-sighting {
  margin-top: 6px;
  align-self: flex-start;
  background: rgba(52, 152, 219, 0.9);
  color: #fff;
  border: 1px solid rgba(52, 152, 219, 0.4);
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 12px;
  transition: background 0.15s ease;
}

.report-sighting:hover {
  background: rgba(41, 128, 185, 0.95);
}

/* -------------------------
   Sighting placement mode
------------------------- */

.sighting-mode-banner {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1100;
  background: rgba(255, 255, 255, 0.38);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.45);
  padding: 10px 16px;
  border-radius: 25px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.sighting-mode-cancel {
  background: rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 15px;
  padding: 4px 10px;
  cursor: pointer;
  font-size: 12px;
  transition: background 0.15s ease;
}

.sighting-mode-cancel:hover {
  background: rgba(0, 0, 0, 0.1);
}

.sighting-confirm {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 220px;
}

.sighting-confirm p {
  margin: 0;
  font-size: 13px;
}

.sighting-confirm textarea,
.sighting-confirm input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  font-size: 13px;
  font-family: inherit;
  padding: 7px 10px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.32);
  outline: none;
  transition: border-color 0.15s ease;
}

.sighting-confirm textarea:focus,
.sighting-confirm input[type="text"]:focus {
  border-color: rgba(52, 152, 219, 0.5);
}

.sighting-privacy-ack {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12px;
  color: #666;
}

.sighting-confirm-row {
  display: flex;
  gap: 6px;
}

.sighting-confirm-row .confirm-sighting {
  flex: 1;
  background: rgba(52, 152, 219, 0.9);
  color: #fff;
  border: 1px solid rgba(52, 152, 219, 0.4);
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 12px;
  transition: background 0.15s ease;
}

.sighting-confirm-row .confirm-sighting:hover {
  background: rgba(41, 128, 185, 0.95);
}

.sighting-confirm-row .confirm-sighting:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* -------------------------
   Numbered sighting dots + path
------------------------- */

.sighting-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
}

.sighting-preview {
  pointer-events: none;
}

.sighting-dot-large {
  width: 30px;
  height: 30px;
  font-size: 13px;
}

.sighting-dot-inner {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--pin-color, #333);
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.sighting-dot-date {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 9px;
  font-weight: 600;
  color: #fff;
  background: rgba(0, 0, 0, 0.65);
  padding: 1px 4px;
  border-radius: 3px;
  pointer-events: none;
  line-height: 1.2;
}

.sighting-popup {
  font-size: 13px;
  max-width: 200px;
}

.sighting-popup .sighting-date {
  display: block;
  color: #555;
  font-size: 11px;
  margin-bottom: 4px;
}

.sighting-popup p {
  margin: 4px 0;
}

.sighting-contact {
  color: #555;
  font-size: 12px;
}

.sighting-path {
  animation: cim-dash-flow 1s linear infinite;
}

@keyframes cim-dash-flow {
  to {
    stroke-dashoffset: -14;
  }
}

/* -------------------------
   Visible error banner
------------------------- */

.cim-error-banner {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1200;
  background: rgba(192, 57, 43, 0.65);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 13px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  max-width: 90%;
  text-align: center;
}

/* -------------------------
   View Sightings + Back to Pin buttons
------------------------- */

.view-sightings {
  margin-top: 6px;
  background: rgba(39, 174, 96, 0.9);
  color: #fff;
  border: 1px solid rgba(39, 174, 96, 0.4);
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 12px;
  transition: background 0.15s ease;
}

.view-sightings:hover {
  background: rgba(33, 150, 83, 0.95);
}

.back-to-pin-btn {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1100;
  background: rgba(255, 255, 255, 0.38);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 25px;
  padding: 8px 16px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  font-size: 13px;
  transition: background 0.15s ease;
}

.back-to-pin-btn:hover {
  background: rgba(255, 255, 255, 0.5);
}

/* -------------------------
   Onboarding tooltip
------------------------- */

.cim-onboard-tooltip {
  position: absolute;
  top: 22px;
  left: 380px;
  z-index: 1001;
  background: rgba(255, 255, 255, 0.42);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 10px;
  padding: 8px 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  font-size: 12px;
  color: #333;
  white-space: nowrap;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.4s ease;
}

.cim-onboard-tooltip::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 6px solid rgba(255, 255, 255, 0.42);
}

.cim-onboard-tooltip.cim-fade-out {
  opacity: 0;
}

/* -------------------------
   Responsive: small screens
------------------------- */

@media (max-width: 480px) {
  #searchBar {
    left: 40px;
    top: 12px;
    width: calc(100vw - 160px);
  }

  #pinButton {
    left: auto;
    right: 56px;
    top: 12px;
  }

  .cim-fit-btn {
    left: auto;
    right: 100px;
    top: 12px;
  }

  .cim-pin-list-toggle {
    right: 12px;
  }

  .cim-filter-group {
    display: none;
  }

  .cim-recent-bars {
    display: none !important;
  }

  .cim-onboard-tooltip {
    left: auto;
    right: 70px;
    top: 22px;
  }

  .cim-onboard-tooltip::before {
    left: auto;
    right: -6px;
    border-right: none;
    border-left: 6px solid rgba(255, 255, 255, 0.42);
  }
}

/* -------------------------
   Control buttons (shared frosted glass)
------------------------- */

.cim-control-btn {
  position: absolute;
  z-index: 1000;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255,255,255,0.38);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.45);
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  transition: background 0.15s;
}

.cim-control-btn:hover {
  background: rgba(255,255,255,0.55);
}

/* Language selector (EN/NL) — sits beside the right-side control stack. */
.cim-lang-toggle {
  position: absolute;
  right: 56px;
  top: 12px;
  z-index: 1000;
  display: flex;
  gap: 2px;
  padding: 2px;
  background: rgba(255,255,255,0.38);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.45);
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.cim-lang-btn {
  appearance: none;
  border: none;
  background: transparent;
  border-radius: 6px;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 600;
  color: #555;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.cim-lang-btn:hover {
  background: rgba(255,255,255,0.35);
}
.cim-lang-btn.active {
  background: rgba(52,152,219,0.85);
  color: #fff;
}

/* Recent pins + tips bars: sit at the bottom-center, between the account
   readout (bottom-left) and the Leaflet scale reference (bottom-right). "Recent"
   (newest pins) and "Tips" (newest reports) are rendered as two separate bars. */
.cim-recent-bars {
  position: absolute;
  left: 200px;
  right: 200px;
  bottom: 12px;
  z-index: 1000;
  display: none;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  pointer-events: none;
}
.cim-recent-bars.cim-recent-strip-visible {
  display: flex;
}
.cim-recent-bar {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  max-width: 100%;
}
.cim-recent-title {
  font-size: 11px;
  font-weight: 700;
  color: #5b6770;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
  white-space: nowrap;
}
.cim-recent-pill {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px 6px;
  border-radius: 12px;
  background: rgba(255,255,255,0.32);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.45);
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: thin;
}
.cim-recent-item {
  appearance: none;
  border: none;
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 6px 2px 2px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}
.cim-recent-item:hover {
  background: rgba(52,152,219,0.12);
  transform: translateY(-1px);
}
.cim-recent-photo {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,0.85);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cim-recent-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cim-recent-photo-empty {
  background: color-mix(in srgb, var(--pin-color, #3498db) 22%, #eef2f7);
}
.cim-recent-photo span {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0,0,0,0.3);
  line-height: 1;
}
.cim-recent-name {
  font-size: 11px;
  font-weight: 600;
  color: #444;
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Visitor owner ID readout at the map's bottom-left corner. */
#cim-owner-id-display {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 1000;
}
.cim-owner-id {
  display: inline-block;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: rgba(255,255,255,0.35);
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 400;
  line-height: 1.4;
  color: rgba(85,85,85,0.8);
  user-select: text;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  text-align: left;
}
.cim-owner-id:hover {
  background: rgba(255,255,255,0.55);
  color: rgba(85,85,85,0.95);
}
.cim-owner-id:active {
  transform: translateY(1px);
}

/* -------------------------
   Account / login modal
------------------------- */

.cim-identity-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.cim-identity-modal {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
  width: 100%;
  max-width: 380px;
  max-height: 88vh;
  overflow: auto;
}

.cim-identity-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid #eee;
}

.cim-identity-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

.cim-identity-close {
  border: 0;
  background: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: #555;
  padding: 0 4px;
}
.cim-identity-close:hover { color: #000; }

.cim-identity-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cim-identity-status {
  margin: 0;
  font-size: 13px;
  color: #333;
}
.cim-identity-name { font-weight: 600; }

.cim-identity-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  color: #555;
}
.cim-identity-name-input {
  padding: 8px 10px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 6px;
}
.cim-identity-name-input:focus {
  outline: none;
  border-color: #3498db;
}

.cim-identity-save,
.cim-identity-qr-btn,
.cim-identity-copy-token {
  padding: 9px 12px;
  font-size: 13px;
  border-radius: 6px;
  border: 1px solid #3498db;
  background: #3498db;
  color: #fff;
  cursor: pointer;
}
.cim-identity-save:hover { background: #2f89c2; }
.cim-identity-save:disabled,
.cim-identity-qr-btn:disabled {
  opacity: 0.6;
  cursor: default;
}
.cim-identity-qr-btn,
.cim-identity-copy-token {
  background: #fff;
  color: #3498db;
}
.cim-identity-qr-btn:hover,
.cim-identity-copy-token:hover { background: #eaf3fb; }

.cim-identity-done {
  padding: 9px 12px;
  font-size: 13px;
  border-radius: 6px;
  border: 1px solid #ccc;
  background: #fff;
  color: #444;
  cursor: pointer;
}
.cim-identity-done:hover { background: #f5f5f5; }
.cim-identity-done-primary {
  border-color: #3498db;
  background: #3498db;
  color: #fff;
  font-weight: 600;
}
.cim-identity-done-primary:hover { background: #2f89c2; }

.cim-identity-msg {
  min-height: 16px;
  margin: 0;
  font-size: 12px;
  color: #2e9e5b;
}
.cim-identity-msg-error { color: #c0392b; }

.cim-identity-sep {
  border: 0;
  border-top: 1px solid #eee;
  margin: 4px 0;
}

.cim-identity-hint {
  margin: 0;
  font-size: 12px;
  color: #555;
}

.cim-identity-qr {
  display: flex;
  justify-content: center;
  padding: 8px 0;
}
.cim-identity-qr svg {
  width: 220px;
  height: 220px;
  max-width: 100%;
  height: auto;
}

.cim-identity-advanced {
  font-size: 12px;
  color: #555;
}
.cim-identity-advanced summary {
  cursor: pointer;
  color: #666;
  padding: 4px 0;
}

/* Recovery email field + verification note */
.cim-identity-email-input {
  width: 100%;
  padding: 8px;
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  font-size: 14px;
}
.cim-identity-email-input:focus {
  outline: none;
  border-color: #3ca0e3;
  box-shadow: 0 0 0 2px rgba(60,160,227,0.2);
}
.cim-identity-email-note {
  display: block;
  font-size: 12px;
  color: #666;
  margin-top: 4px;
}

/* "Email me my login card" recovery */
.cim-identity-recover,
.cim-identity-resend {
  margin-top: 8px;
  width: 100%;
  display: block;
  padding: 8px 12px;
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  background: #fafafa;
  font-size: 13px;
  cursor: pointer;
  color: #4a4a4a;
}
.cim-identity-recover:hover,
.cim-identity-resend:hover { background: #eaf3fb; }
.cim-identity-recover:disabled,
.cim-identity-resend:disabled { opacity: 0.6; cursor: default; }

/* Backup section (copy login link / download card PNG) */
.cim-identity-backup {
  margin-top: 10px;
}
.cim-identity-backup-warn {
  font-size: 12px;
  color: #a05a12;
  background: #fdf3e1;
  border: 1px solid #f2d9a8;
  border-radius: 6px;
  padding: 6px 8px;
  margin: 0 0 8px;
}
.cim-identity-backup-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.cim-identity-copy-link,
.cim-identity-download-card {
  flex: 1 1 auto;
  padding: 8px 10px;
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  background: #fff;
  font-size: 13px;
  cursor: pointer;
  color: #4a4a4a;
  text-align: center;
}
.cim-identity-copy-link:hover,
.cim-identity-download-card:hover { background: #eaf3fb; }
.cim-identity-copy-link:disabled,
.cim-identity-download-card:disabled { opacity: 0.6; cursor: default; }

/* Multi-step account wizard: choice buttons + secondary actions */
.cim-identity-choice {
  display: block;
  width: 100%;
  padding: 11px 12px;
  margin: 0 0 8px;
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  background: #fff;
  color: #4a4a4a;
  font-size: 14px;
  cursor: pointer;
  text-align: left;
}
.cim-identity-choice:hover { background: #eaf3fb; }
.cim-identity-choice-primary {
  background: #3498db;
  border-color: #3498db;
  color: #fff;
  font-weight: 600;
  text-align: center;
}
.cim-identity-choice-primary:hover { background: #2f89c2; }
.cim-identity-choice-quiet {
  color: #888;
  border-style: dashed;
  text-align: center;
}
.cim-identity-choice-quiet:hover { background: #f6f7f7; }
.cim-identity-choice-danger {
  color: #b32d2e;
  border-color: #e8b7b7;
  text-align: left;
}
.cim-identity-choice-danger:hover { background: #fbeaea; }
.cim-identity-status-danger {
  color: #b32d2e;
  font-weight: 600;
}
.cim-identity-delete-confirm-btn {
  display: block;
  width: 100%;
  padding: 11px 12px;
  margin: 4px 0 8px;
  border: 1px solid #b32d2e;
  border-radius: 6px;
  background: #b32d2e;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}
.cim-identity-delete-confirm-btn:hover:not(:disabled) { background: #942424; }
.cim-identity-delete-confirm-btn:disabled {
  background: #e8b7b7;
  border-color: #e8b7b7;
  cursor: not-allowed;
}

.cim-identity-secret-input {
  width: 100%;
  padding: 8px;
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  font-size: 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.cim-identity-secret-input:focus {
  outline: none;
  border-color: #3ca0e3;
  box-shadow: 0 0 0 2px rgba(60,160,227,0.2);
}

.cim-identity-show-backup,
.cim-identity-login-btn {
  padding: 9px 12px;
  font-size: 13px;
  border-radius: 6px;
  border: 1px solid #3498db;
  background: #3498db;
  color: #fff;
  cursor: pointer;
}
.cim-identity-show-backup:hover,
.cim-identity-login-btn:hover { background: #2f89c2; }

.cim-identity-back-to-choose,
.cim-identity-back-to-manage {
  align-self: flex-start;
  border: 0;
  background: none;
  color: #888;
  font-size: 12px;
  cursor: pointer;
  padding: 2px 0;
}
.cim-identity-back-to-choose:hover,
.cim-identity-back-to-manage:hover { color: #555; }

/* -------------------------
   Pin list panel (foldout from right)
------------------------- */

#cim-pin-list-panel {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1001;
  height: 100%;
  pointer-events: none;
}

#cim-pin-list-panel.cim-foldout-open {
  pointer-events: auto;
}

.cim-foldout-content {
  position: absolute;
  top: 0;
  right: 0;
  width: 280px;
  height: 100%;
  background: rgba(255,255,255,0.38);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-left: 1px solid rgba(255,255,255,0.45);
  box-shadow: -2px 0 12px rgba(0,0,0,0.1);
  transform: translateX(100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
  padding: 14px;
}

.cim-foldout-open .cim-foldout-content {
  transform: translateX(0);
}

.cim-foldout-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.cim-foldout-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

/* List tabs: Pins | Sightings | Tips */
.cim-pin-list-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 8px;
  padding: 3px;
}
.cim-pin-list-tab {
  flex: 1;
  border: none;
  background: transparent;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #666;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.cim-pin-list-tab:hover {
  color: #3498db;
}
.cim-pin-list-tab.cim-pin-tab-active {
  background: #ffffff;
  color: #3498db;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

/* Sightings/Tips tab rows */
.cim-pin-list-report-badge {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
}
.cim-tip-badge { background: #f39c12; }
.cim-pin-list-yours-badge {
  flex-shrink: 0;
  padding: 1px 7px;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  background: #9b59b6;
}
.cim-pin-list-report-date {
  font-size: 11px;
  font-weight: 400;
  color: #999;
}
.cim-pin-list-report-note {
  display: block;
  font-size: 11px;
  color: #666;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 260px;
}

.cim-foldout-close {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(255,255,255,0.32);
  border: 1px solid rgba(255,255,255,0.45);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #555;
  transition: background 0.15s;
  flex-shrink: 0;
}

.cim-foldout-close:hover {
  background: rgba(255,255,255,0.55);
  color: #333;
}

/* -------------------------
   Pin list toggle (right side)
------------------------- */

.cim-pin-list-toggle {
  top: 12px;
  right: 12px;
}

.cim-pin-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  margin-bottom: 6px;
  border-radius: 8px;
  background: rgba(255,255,255,0.25);
  border: 1px solid rgba(255,255,255,0.3);
  border-left: 4px solid var(--pin-color, rgba(255,255,255,0.3));
  background: color-mix(in srgb, var(--pin-color, #ffffff) 12%, rgba(255,255,255,0.25));
  cursor: pointer;
  transition: background 0.15s;
}

.cim-pin-list-item:hover {
  background: color-mix(in srgb, var(--pin-color, #ffffff) 22%, rgba(255,255,255,0.45));
}

/* Highlight the selected (or most recently selected) pin's row. Uses the pin's
   own color — but darker — plus a thicker left offset so it reads as "selected"
   rather than looking like a Saved/status badge. */
.cim-pin-list-item.cim-pin-list-selected {
  border-left-width: 10px;
  background: color-mix(in srgb, var(--pin-color, #3498db) 22%, rgba(0, 0, 0, 0.08));
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

.cim-pin-list-section + .cim-pin-list-section {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.35);
}
.cim-pin-list-section-title {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(52, 152, 219, 0.9);
}

.cim-pin-list-item .pin-name {
  font-size: 13px;
  font-weight: 600;
  color: #333;
}

.cim-pin-list-item .pin-status {
  font-size: 11px;
  color: #666;
}

.cim-pin-list-main {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
}

/* Magnifier button on each pin-list row: opens the full history modal. */
.cim-pin-list-zoom {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  color: #3498db;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.cim-pin-list-zoom:hover {
  background: rgba(52, 152, 219, 0.85);
  color: #fff;
}

.cim-pin-list-item .cim-list-photo {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.cim-pin-list-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cim-pin-list-namewrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.cim-pin-list-name {
  font-size: 13px;
  font-weight: 600;
  color: #333;
}

.cim-pin-list-status {
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  padding: 1px 7px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.cim-pin-list-status.status-badge-lost { background: #1c5c8a; }
.cim-pin-list-status.status-badge-report-crime { background: #9f3127; }
.cim-pin-list-status.status-badge-found { background: #157a3f; }
.cim-pin-list-status.cim-draft-badge { background: #9b59b6; }

.cim-pin-list-meta {
  display: flex;
  gap: 12px;
  font-size: 11px;
  color: #666;
}

.cim-pin-list-desc {
  font-size: 11px;
  color: #555;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 260px;
}

/* -------------------------
   Circular photos
------------------------- */

.cim-circle-photo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,0.6);
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  flex-shrink: 0;
}

.cim-circle-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cim-circle-photo-sm {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,0.6);
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  flex-shrink: 0;
}

.cim-list-photo {
  width: 32px;
  height: 32px;
}

/* -------------------------
   Image crop tool
------------------------- */

.cim-crop-tool {
  margin: 8px 0;
}

.cim-crop-viewport {
  width: 120px;
  height: 120px;
  overflow: hidden;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,0.1);
  background: #f0f0f0;
  cursor: grab;
  position: relative;
  margin: 0 auto;
}

.cim-crop-viewport:active {
  cursor: grabbing;
}

.cim-crop-preview {
  max-width: none;
  transform-origin: 0 0;
}

.cim-crop-controls {
  margin-top: 6px;
  font-size: 11px;
  color: #555;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cim-crop-slider {
  width: 120px;
}

/* -------------------------
   Form validation errors
------------------------- */

.cim-input-error,
.cim-input-error[aria-invalid="true"],
[aria-invalid="true"].pf-field input,
[aria-invalid="true"].pf-field select,
[aria-invalid="true"].cim-identity-name-input,
[aria-invalid="true"].cim-identity-email-input,
[aria-invalid="true"].cim-identity-secret-input {
  border-color: #d63638 !important;
}

.cim-field-error {
  font-size: 11px;
  color: #d63638;
  margin-top: 2px;
}

.cim-char-count {
  font-size: 10px;
  color: #888;
  text-align: right;
  margin-top: 1px;
}

/* -------------------------
   Photo hint
------------------------- */

.cim-photo-hint {
  font-size: 10px;
  color: #888;
  margin-top: 1px;
  font-style: italic;
}

/* -------------------------
   Cooldown info
------------------------- */

.cim-cooldown-info {
  font-size: 11px;
  color: #666;
  margin-bottom: 4px;
  padding: 4px 8px;
  background: rgba(0,0,0,0.04);
  border-radius: 4px;
}

/* -------------------------
   Button loading spinner
------------------------- */

.cim-btn-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.cim-btn-loading::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  top: 50%;
  left: 50%;
  margin: -7px 0 0 -7px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: cim-spin 0.6s linear infinite;
}

@keyframes cim-spin {
  to { transform: rotate(360deg); }
}

.cim-loading-spinner {
  width: 28px;
  height: 28px;
  margin: 20px auto;
  border: 3px solid rgba(0, 0, 0, 0.12);
  border-top-color: #3498db;
  border-radius: 50%;
  animation: cim-spin 0.7s linear infinite;
}

/* -------------------------
   Pin mode banner + crosshair
------------------------- */

.cim-pin-mode {
  cursor: crosshair !important;
}

.cim-pin-mode-banner {
  position: absolute;
  top: 52px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1001;
  background: rgba(52,152,219,0.88);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(52,152,219,0.6);
  border-radius: 10px;
  padding: 6px 14px;
  font-size: 12px;
  color: #fff;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  pointer-events: none;
}

/* -------------------------
   Sighting context banner
------------------------- */

.cim-sighting-context {
  position: fixed;
  top: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1001;
  background: rgba(255,255,255,0.88);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.45);
  border-radius: 10px;
  padding: 6px 14px;
  font-size: 12px;
  color: #333;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* -------------------------
   Search loading / empty states
------------------------- */

.cim-search-loading {
  padding: 8px 12px;
  font-size: 12px;
  color: #888;
  font-style: italic;
}

.cim-search-empty {
  padding: 8px 12px;
  font-size: 12px;
  color: #999;
}

.cim-search-active {
  background: rgba(52,152,219,0.12) !important;
}

/* -------------------------
   Found suggestion banner
------------------------- */

.cim-found-suggestion {
  margin-top: 6px;
  padding: 6px 8px;
  background: rgba(46,204,113,0.12);
  border-radius: 6px;
  font-size: 11px;
  color: #27ae60;
}

/* -------------------------
   Popup max-height + scroll
------------------------- */

.leaflet-popup-content {
  max-height: min(580px, calc(100vh - 80px));
  overflow-y: auto;
}

/* -------------------------
   Pin own header with edit button
------------------------- */

.pin-own-header {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.pin-edit-btn,
.pin-edit-done-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(255,255,255,0.32);
  border: 1px solid rgba(255,255,255,0.45);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #555;
  transition: background 0.15s;
  flex-shrink: 0;
  margin-top: 2px;
}

.pin-edit-btn:hover,
.pin-edit-done-btn:hover {
  background: rgba(255,255,255,0.55);
  color: #333;
}

/* Mobile relocate handle: lets the owner drag the pin without panning the map.
   touch-action:none keeps the touch gesture from scrolling/panning so the
   pointer events drive the pin directly. */
.pin-grab-handle {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(255,255,255,0.32);
  border: 1px solid rgba(255,255,255,0.45);
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #555;
  transition: background 0.15s;
  flex-shrink: 0;
  margin-top: 2px;
  touch-action: none;
}
.pin-grab-handle:hover {
  background: rgba(255,255,255,0.55);
  color: #333;
}
.pin-grab-handle.cim-grabbing {
  background: rgba(52, 152, 219, 0.25);
  border-color: rgba(52, 152, 219, 0.6);
  cursor: grabbing;
  color: #1f77b3;
}

/* -------------------------
   Notify row
------------------------- */

.pin-notify-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 2px;
  font-size: 13px;
  cursor: pointer;
}

/* -------------------------
   Cancel button styling
------------------------- */

.cancel-btn {
  background: rgba(255,255,255,0.32) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.45) !important;
  color: #555 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
  transition: background 0.15s ease, color 0.15s ease !important;
  text-decoration: none;
}

.cancel-btn:hover {
  background: rgba(255,255,255,0.55) !important;
  color: #333 !important;
}

/* -------------------------
   Created-at timestamp
------------------------- */

.pin-created-at {
  display: block;
  color: #888;
  font-size: 11px;
  margin-top: 2px;
}

.pin-last-seen {
  display: block;
  color: #27ae60;
  font-size: 11px;
  font-weight: 600;
  margin-top: 2px;
}

/* -------------------------
   Zip-to-fit button
------------------------- */

.cim-fit-btn {
  top: 12px;
  left: 380px;
}

.cim-filter-group {
  display: flex;
  gap: 2px;
  padding: 2px;
  width: auto;
  height: auto;
}

/* Shared top-row container: holds the status filter + animal filter side by
   side with a comfortable gap in the full (wide) layout. It sits where the
   status filter used to live; the two bars are repositioned as flex children. */
.cim-filter-row {
  position: absolute;
  top: 12px;
  left: 424px;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: calc(100vw - 300px);
}
#cim-map-wrap .cim-filter-row #cim-filter-group,
#cim-map-wrap .cim-filter-row #cim-animal-filter-wrap {
  position: static;
  top: auto;
  left: auto;
  min-width: 0;
}

.cim-filter-btn {
  background: transparent;
  border: none;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  color: #555;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.cim-filter-btn:hover {
  background: rgba(255,255,255,0.35);
}

.cim-filter-btn.cim-filter-active {
  background: rgba(52, 152, 219, 0.85);
  color: #fff;
}

/* Status filter buttons are color-coded to match pin markers. Each button
   always carries its status color (text + a leading dot), and becomes a solid
   chip of that color when active — acting as a live legend for the map. */
.cim-filter-btn[data-filter="lost"] {
  color: #1f77b3;
}
.cim-filter-btn[data-filter="report_crime"] {
  color: #c0392b;
}
.cim-filter-btn[data-filter="found"] {
  color: #1e8a56;
}
.cim-filter-btn[data-filter]::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
}
.cim-filter-btn[data-filter="lost"]::before {
  background: #3498db;
}
.cim-filter-btn[data-filter="report_crime"]::before {
  background: #e74c3c;
}
.cim-filter-btn[data-filter="found"]::before {
  background: #2ecc71;
}
.cim-filter-btn[data-filter="lost"].cim-filter-active {
  background: #3498db;
}
.cim-filter-btn[data-filter="report_crime"].cim-filter-active {
  background: #e74c3c;
}
.cim-filter-btn[data-filter="found"].cim-filter-active {
  background: #2ecc71;
}
.cim-filter-btn[data-filter].cim-filter-active::before {
  background: #fff;
}
.cim-filter-btn[data-filter].cim-filter-active {
  color: #fff;
}

/* Active-filters summary bar: appears below the filter row when any filter
   is narrowed from "all". Shows a compact label + "Clear filters" button. */
.cim-active-filters-bar {
  position: absolute;
  top: 44px;
  left: 424px;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.45);
  border-radius: 8px;
  padding: 4px 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.cim-active-filters-label {
  font-size: 11px;
  font-weight: 600;
  color: #555;
}

.cim-active-filters-clear {
  font-size: 11px;
  font-weight: 600;
  color: #3498db;
  background: none;
  border: 1px solid #3498db;
  border-radius: 4px;
  padding: 2px 8px;
  cursor: pointer;
  transition: background 0.15s;
  min-height: 28px;
}

.cim-active-filters-clear:hover {
  background: #eaf3fb;
}

/* Animal filter: always-visible flat chip row to the right of the status bar,
   given extra breathing room. Its buttons look identical to the status filter
   chips so the whole top filter row reads as one unified control. */
.cim-animal-filter-wrap {
  display: flex;
}

.cim-animal-filter-group {
  display: flex;
  flex-wrap: nowrap;
  gap: 2px;
  padding: 2px;
  background: rgba(255,255,255,0.38);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.45);
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  overflow-x: auto;
  scrollbar-width: thin;
}

/* -------------------------
   Search input condensed after selection
------------------------- */

#searchInput:focus {
  width: 100%;
}

/* -------------------------
   Dirty-warning modal
------------------------- */

.cim-dirty-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.cim-dirty-modal {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 12px;
  padding: 20px 24px;
  max-width: 320px;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

.cim-dirty-modal p {
  margin: 0 0 16px;
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.cim-dirty-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.cim-dirty-save,
.cim-dirty-discard {
  padding: 6px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.45);
  transition: background 0.15s, transform 0.1s;
}

.cim-dirty-save {
  background: rgba(52, 152, 219, 0.85);
  color: #fff;
}

.cim-dirty-save:hover {
  background: rgba(41, 128, 185, 0.9);
}

.cim-dirty-discard {
  background: rgba(255, 255, 255, 0.5);
  color: #555;
}

.cim-dirty-discard:hover {
  background: rgba(255, 255, 255, 0.7);
}

/* -------------------------
   Rate-limited search message
------------------------- */

.cim-search-rate-limited {
  color: #e67e22;
  font-style: italic;
  cursor: default;
  pointer-events: none;
}

/* -------------------------
   Empty pin list message
------------------------- */

.cim-pin-list-empty {
  padding: 12px 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.cim-pin-list-empty-text {
  font-size: 12px;
  color: #555;
}

.cim-pin-list-clear-filters {
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid #3498db;
  border-radius: 6px;
  background: #fff;
  color: #3498db;
  cursor: pointer;
  transition: background 0.15s;
  min-height: 32px;
}

.cim-pin-list-clear-filters:hover {
  background: #eaf3fb;
}

/* -------------------------
   Crop reset button
------------------------- */

.cim-crop-reset {
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 11px;
  cursor: pointer;
  margin-left: 6px;
}

.cim-crop-reset:hover {
  background: rgba(255, 255, 255, 0.7);
}

/* -------------------------
   Clickable photos / lightbox
------------------------- */

.cim-photo-zoom {
  cursor: zoom-in;
}

.cim-photo-zoom:hover {
  opacity: 0.92;
}

.cim-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
  animation: cim-fade-in 0.15s ease;
}

.cim-lightbox-img {
  max-width: 92vw;
  max-height: 92vh;
  border-radius: 6px;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.6);
  object-fit: contain;
  cursor: default;
}

.cim-lightbox-close {
  position: absolute;
  top: 16px;
  right: 20px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: #111;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.cim-lightbox-close:hover {
  background: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .cim-lightbox {
    animation: none;
  }
}

/* -------------------------
   Touch targets (44px minimum for coarse pointers)
------------------------- */

@media (pointer: coarse) {
  .cim-filter-btn,
  .delete-sighting,
  .report-sighting,
  .cim-pin-list-zoom,
  .cim-pin-list-clear-filters,
  .pin-share-btn,
  .pin-edit-btn,
  .cim-identity-save,
  .cim-identity-done,
  .cim-identity-show-backup,
  .cim-identity-resend,
  .cim-identity-close,
  .cim-identity-choice,
  .cim-identity-copy-link,
  .cim-identity-download-card,
  .cim-identity-login-btn,
  .cim-identity-back-to-choose,
  .cim-identity-back-to-manage,
  .cim-identity-copy-token,
  .cim-active-filters-clear,
  .cim-fit-btn,
  .cim-pin-list-toggle,
  .cim-investigation-toggle,
  .cim-fold-btn {
    min-height: 44px;
    min-width: 44px;
  }

  .cim-filter-row {
    gap: 8px;
  }

  .cim-filter-btn {
    padding: 8px 14px;
    font-size: 13px;
  }

  .cim-pin-list-item {
    min-height: 48px;
    padding: 10px 12px;
  }

  .leaflet-popup-close-button {
    min-width: 44px;
    min-height: 44px;
    font-size: 22px !important;
  }

  .sighting-confirm textarea,
  .sighting-confirm input[type="text"] {
    min-height: 44px;
  }

  #searchInput {
    min-height: 44px;
    font-size: 16px;
  }
}

/* -------------------------
   Sighting photos (candid, square)
------------------------- */

.cim-sighting-photo {
  margin: 6px 0;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.5);
  cursor: zoom-in;
  background: #f0f0f0;
  text-align: center;
}

.cim-sighting-photo:hover {
  opacity: 0.94;
}

.cim-sighting-photo img {
  width: 100%;
  display: block;
  max-height: 200px;
  object-fit: cover;
}

.cim-sighting-photo figcaption {
  font-size: 10px;
  color: #777;
  padding: 2px 0;
}

.sighting-row .cim-sighting-photo img {
  max-height: 120px;
}

/* -------------------------
   Prefers reduced motion
------------------------- */

@media (prefers-reduced-motion: reduce) {
  .leaflet-marker-icon,
  .leaflet-popup {
    transition: none !important;
  }

  .cim-dash-flow,
  .sighting-path,
  .cim-inv-dash-flow,
  .cim-dark-path {
    animation: none !important;
  }

  .cim-spin,
  .cim-loading-spinner {
    animation-duration: 1.5s !important;
  }

  .cim-fade-in,
  .cim-lightbox {
    animation: none !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* -------------------------
   Photo upload widget
------------------------- */

.cim-photo-upload-wrap {
  margin: 8px 0;
}

.cim-photo-upload-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.cim-upload-btn {
  background: #3498db;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
}

.cim-upload-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.cim-upload-status {
  font-size: 11px;
  color: #888;
}

.cim-upload-preview {
  position: relative;
  display: inline-block;
  margin-top: 8px;
}

.cim-upload-preview-img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid #ddd;
  display: block;
}

.cim-upload-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: #c0392b;
  color: #fff;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
}

.cim-url-foldout {
  font-size: 13px;
  margin-top: 6px;
}

.cim-url-foldout summary {
  cursor: pointer;
  color: #333;
  font-size: 12px;
}

.cim-url-foldout[open] summary {
  margin-bottom: 4px;
}

/* -------------------------
   Pet form (pf-*) — new-pin & own-pin editors
------------------------- */

.pf-fieldset {
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.pf-legend {
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #777;
}

.pf-state-group {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.pf-state {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  padding: 5px 10px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.25);
  font-size: 12px;
  color: #555;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.pf-state input {
  display: none;
}

.pf-state.pf-selected {
  background: rgba(52, 152, 219, 0.15);
  border-color: rgba(52, 152, 219, 0.5);
  color: #2c6fa8;
  font-weight: bold;
}

.pf-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12px;
  color: #444;
}

.pf-field > span,
.pf-label-only {
  font-size: 11px;
  color: #555;
}

.pf-field select,
.pf-field input[type="text"],
.pf-field input[type="email"],
.pf-field input[type="number"],
.pf-field input[type="date"] {
  width: 100%;
  box-sizing: border-box;
  font-size: 13px;
  padding: 6px 9px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.32);
  outline: none;
  transition: border-color 0.15s ease;
}

.pf-field select:focus,
.pf-field input[type="text"]:focus,
.pf-field input[type="email"]:focus,
.pf-field input[type="number"]:focus,
.pf-field input[type="date"]:focus {
  border-color: rgba(52, 152, 219, 0.5);
}

.pf-hint {
  font-size: 11px;
  color: #555;
  margin: 2px 0 0;
  line-height: 1.4;
}

.pf-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.pf-inline {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.cim-inline {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  font-size: 12px;
  color: #444;
}

.cim-check-inline {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  font-size: 12px;
  color: #444;
}

.pf-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
}

.pf-colour-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px 8px;
}

.pf-colour-option {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
  color: #444;
  min-width: 0;
}

.pf-colour-option input {
  accent-color: #3498db;
}

.pf-colour-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.18);
  flex-shrink: 0;
  background-size: cover;
  box-sizing: border-box;
}

.pf-colour-name {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* -------------------------
   Pin code line & pet meta tags (popups)
------------------------- */

.pin-code-line {
  display: inline-block;
  font-size: 11px;
  color: #888;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  margin: 2px 0;
}

.pin-meta-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 4px 0;
}

.pin-meta-tag {
  background: rgba(52, 152, 219, 0.1);
  border: 1px solid rgba(52, 152, 219, 0.25);
  color: #2c6fa8;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  white-space: nowrap;
}

/* Fur colour dots shown in popups (colour name is a tooltip) */
.pin-colour-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 4px 0;
}

.pin-colour-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.18);
  box-sizing: border-box;
  background-size: cover;
  cursor: help;
}

/* -------------------------
   Single-pin sighting range circle
------------------------- */

.sighting-range {
  pointer-events: none;
}

/* -------------------------
   Investigation toggle + panel
------------------------- */

.cim-investigation-toggle {
  top: 56px;
  right: 12px;
}

.cim-investigation-toggle.active {
  background: rgba(231, 76, 60, 0.15);
  border-color: rgba(231, 76, 60, 0.5);
  color: #c0392b;
}

.cim-investigation-panel {
  position: absolute;
  top: 100px;
  right: 12px;
  z-index: 1001;
  background: rgba(255, 255, 255, 0.38);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 10px;
  padding: 10px 14px;
  width: 230px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  font-size: 12px;
  color: #333;
}

.cim-investigation-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: 13px;
}

.cim-investigation-close {
  background: none;
  border: none;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  color: #555;
}

.cim-inv-slider-label {
  display: block;
  margin: 4px 0 2px;
  font-size: 11px;
  color: #555;
}

.cim-inv-slider {
  width: 100%;
  margin: 0 0 6px;
}

.cim-inv-hint {
  margin: 6px 0 0;
  font-size: 10px;
  line-height: 1.4;
  color: #888;
  font-style: italic;
}

/* Investigation aggregated dot (small, unnumbered) */
.investigation-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
}

.investigation-dot-inner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--pin-color, #333);
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  box-sizing: border-box;
}

/* Investigation range circle (per-pin) */
.investigation-range:hover {
  filter: brightness(1.15);
}

/* Investigation cluster connector lines (animated dots flowing along the
   segment between pin centres within the proximity radius). */
.investigation-link path {
  stroke-linecap: round;
  animation: cim-inv-dash-flow 0.9s linear infinite;
}
@keyframes cim-inv-dash-flow {
  to { stroke-dashoffset: -8; }
}

/* Distance label at the midpoint of each investigation connector line. */
.investigation-link-label {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 999px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 600;
  color: #8e44ad;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transform: translate(-50%, -50%);
  white-space: nowrap;
  pointer-events: none;
}

@media (max-width: 480px) {
  .cim-investigation-panel {
    top: 130px;
    right: 8px;
    width: 200px;
  }
}

/* -------------------------
   Pin history modal (from the pin list magnifier)
------------------------- */

.cim-history-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.cim-history-modal {
  display: flex;
  flex-direction: column;
  width: min(560px, 100%);
  max-height: min(80vh, 720px);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.cim-history-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.5);
}

.cim-history-header .cim-circle-photo {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
}

.cim-history-heading {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}

.cim-history-close {
  flex-shrink: 0;
  border: none;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: 20px;
  line-height: 1;
  color: #555;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.cim-history-close:hover {
  background: rgba(0, 0, 0, 0.2);
  color: #000;
}

.cim-history-scroll {
  overflow-y: auto;
  padding: 12px 16px;
}

.cim-history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cim-history-entry {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

/* History entries in the modal are clickable, like in the popup. */
.cim-history-entry-sighting {
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.cim-history-entry-sighting:hover {
  background: rgba(52, 152, 219, 0.12);
  border-color: rgba(52, 152, 219, 0.4);
}

.cim-history-badge {
  flex-shrink: 0;
  align-self: flex-start;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #fff;
  background: #f39c12;
}

.cim-history-body {
  min-width: 0;
  flex: 1;
}

.cim-history-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  color: #333;
}

.cim-history-coords {
  color: #777;
  font-weight: 400;
}

.cim-history-date {
  color: #999;
  font-weight: 400;
}

.cim-history-note {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: #444;
}

.cim-history-contact {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: #777;
}

.cim-history-entry .cim-sighting-photo img {
  margin-top: 6px;
  border-radius: 8px;
}

.cim-history-empty {
  color: #888;
  font-size: 13px;
  text-align: center;
  padding: 24px 0;
}

/* -------------------------
   Compact (phone) toolbar
   The full top control row (search + status filters + animal filters +
   language) only fits when there's enough space. When map.js detects there
   isn't (narrow width or a tall/short viewport), it adds .cim-compact to the
   wrapper: the important direct buttons (pin, zoom-to-fit, list, investigation)
   stay visible in the top row, and everything else collapses into a top fold
   panel opened via the hamburger toggle.
------------------------- */
.cim-fold-toggle,
.cim-fold-panel {
  display: none;
}

#cim-map-wrap.cim-compact .cim-fold-toggle {
  display: flex;
  top: 12px;
  left: 256px;
}
#cim-map-wrap.cim-compact .cim-fold-toggle[aria-expanded="true"] {
  background: rgba(52, 152, 219, 0.9);
  color: #fff;
}

#cim-map-wrap.cim-compact .cim-fold-panel {
  position: absolute;
  top: 96px;
  left: 8px;
  right: 8px;
  z-index: 1200;
  display: block;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 14px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  padding: 10px 10px 12px;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
  overscroll-behavior: contain;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
#cim-map-wrap.cim-compact .cim-fold-panel.cim-open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}
#cim-map-wrap.cim-compact .cim-fold-close {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  border: none;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #555;
}
#cim-map-wrap.cim-compact .cim-fold-close:hover {
  background: rgba(0, 0, 0, 0.06);
}

/* Search stays docked top-left (its original position) but shrinks to ~40% of
   its full width in compact mode so it clears the button cluster + right side. */
#cim-map-wrap.cim-compact #searchBar {
  position: absolute;
  top: 12px;
  left: 64px;
  width: 40%;
  min-width: 96px;
  max-width: 104px;
}
#cim-map-wrap.cim-compact #cim-filter-group {
  position: relative;
  top: auto;
  left: auto;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 2px;
  margin-bottom: 14px;
  border: none;
  background: transparent;
  box-shadow: none;
}
#cim-map-wrap.cim-compact #cim-animal-filter-wrap {
  position: relative;
  top: auto;
  left: auto;
  max-width: none;
  margin-bottom: 14px;
}
#cim-map-wrap.cim-compact #cim-animal-filter-group {
  flex-wrap: wrap;
  overflow-x: visible;
}
#cim-map-wrap.cim-compact #cim-lang-toggle {
  position: relative;
  top: auto;
  right: auto;
  width: max-content;
  margin-top: 2px;
}

/* Always-visible direct buttons (pin, zoom-to-fit, fold, list, investigation).
   Pin/zoom/fold sit to the RIGHT of the shrunk searchbar (search ends ~left:168)
   so nothing overlaps; list + investigation hug the right edge. */
#cim-map-wrap.cim-compact #pinButton {
  left: 176px;
  top: 12px;
  display: flex;
  opacity: 1;
  z-index: 1300;
}
#cim-map-wrap.cim-compact .cim-fit-btn {
  left: 208px;
  top: 12px;
}
#cim-map-wrap.cim-compact .cim-pin-list-toggle {
  right: 12px;
  top: 12px;
}
#cim-map-wrap.cim-compact .cim-investigation-toggle {
  right: 12px;
}


/* -------------------------
   Accessibility: visible keyboard focus
   ------------------------- */
/* Give a clear, consistent focus ring to interactive controls that otherwise
   suppress the default outline, so keyboard/navigation users can always see
   where they are. Uses :focus-visible so mouse clicks don't flash a ring. */
#searchInput:focus-visible,
#pinButton:focus-visible,
.cim-identity-name-input:focus-visible,
.cim-identity-email-input:focus-visible,
.cim-identity-secret-input:focus-visible,
.pin-editor .pin-name:focus-visible,
.pin-editor .pin-description:focus-visible,
.pin-editor .pin-photo-url:focus-visible,
.pin-notify-group input[type="email"]:focus-visible,
.sighting-confirm textarea:focus-visible,
.sighting-confirm input[type="text"]:focus-visible,
.pf-field select:focus-visible,
.pf-field input[type="text"]:focus-visible,
.pf-field input[type="email"]:focus-visible,
.pf-field input[type="number"]:focus-visible,
.pf-field input[type="date"]:focus-visible,
.cim-lang-btn:focus-visible,
.cim-identity-choice:focus-visible,
.cim-identity-save:focus-visible,
.cim-identity-done:focus-visible,
.cim-identity-show-backup:focus-visible,
.cim-identity-resend:focus-visible,
.cim-identity-recover:focus-visible,
.cim-identity-close:focus-visible,
.cim-identity-copy-link:focus-visible,
.cim-identity-download-card:focus-visible,
.cim-identity-login-btn:focus-visible,
.cim-identity-back-to-choose:focus-visible,
.cim-identity-back-to-manage:focus-visible,
.cim-identity-copy-token:focus-visible,
.pin-share-btn:focus-visible,
.pin-edit-btn:focus-visible,
.report-sighting:focus-visible,
.cim-pin-list-item:focus-visible,
.cim-filter-btn:focus-visible,
.cim-fit-btn:focus-visible,
.cim-pin-list-toggle:focus-visible,
.cim-investigation-toggle:focus-visible,
.cim-fold-btn:focus-visible,
.flatpickr-input:focus-visible,
button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #3498db;
  outline-offset: 2px;
}

/* Leaflet's own controls and popup close button */
.leaflet-control-zoom a:focus-visible,
.leaflet-popup-close-button:focus-visible,
.leaflet-bar a:focus-visible {
  outline: 2px solid #3498db;
  outline-offset: 1px;
}