/* Reading hover tooltip */
.reading-hover-tooltip {
  background-color: var(--bg-surface, rgba(19, 19, 21, 0.95));
  border: 1px solid var(--primary);
  box-shadow: var(--shadow-glow);
  padding: 8px 12px;
  font-size: 14px;
  color: var(--primary-color);
  font-family: var(--font-display, 'Rajdhani'), monospace;
  position: fixed;
  pointer-events: none;
  z-index: 1000;
  white-space: nowrap;
  border-radius: var(--radius-sm, 4px);
  transition: opacity 0.2s;
  max-width: 250px;
}

/* Reading detailed popup */
.reading-detail-popup .mapboxgl-popup-content {
  background-color: var(--dark-color);
  color: var(--primary-color);
  border: 2px solid var(--secondary-color);
  box-shadow: var(--shadow-elevated);
  padding: 15px;
  min-width: 200px;
  max-width: 300px;
  font-family: var(--font-display, 'Rajdhani'), monospace;
}

.reading-detail-popup .mapboxgl-popup-tip {
  border-top-color: var(--secondary-color);
  border-bottom-color: var(--secondary-color);
  border-left-color: var(--secondary-color);
  border-right-color: var(--secondary-color);
}

.reading-popup-content {
  margin-top: 10px;
  line-height: 1.5;
}

/* Popup action buttons container */
.popup-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-top: 15px;
  gap: 5px;
}

/* Delete button specific styling */
.delete-btn {
  background-color: var(--danger-dim, rgba(255, 107, 107, 0.3)) !important;
  border-color: var(--danger, #ff6b6b) !important;
}

.delete-btn:hover {
  background-color: var(--danger, #ff6b6b) !important;
  color: var(--dark-color) !important;
}

/* Custom close button */
.reading-detail-popup .custom-popup-close-button {
  position: absolute;
  top: 5px;
  right: 5px;
  border: none;
  background-color: transparent;
  font-size: 18px;
  color: var(--secondary-color);
  cursor: pointer;
  padding: 0 5px;
  line-height: 1;
}

.reading-detail-popup .custom-popup-close-button:hover {
  color: var(--primary-color);
  text-shadow: none;
}

.mapboxgl-popup-close-button {
  color: var(--text-medium); /* Using a variable for consistency */
  font-size: 28px;
  padding-right: 8px;
}

.mapboxgl-popup-content {
  color: var(--light-color);
  background: var(--dark-color);
    border-radius: var(--radius-sm, 4px);
    box-shadow: var(--shadow-glow);
    padding: 10px 10px 15px;
    pointer-events: auto;
    position: relative;
    font-size: 16px;
    text-shadow: none !important;
    position: relative; /* Needed for absolute positioning of the close button */
}

.popup-header {
  font-weight: bold;
  margin-bottom: 8px;
  color: var(--primary-color);
  border-bottom: solid;
  padding-top:3px;
}

.reading-popup-track {
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis; 

}

.reading-move-popup .mapboxgl-popup-content,
.reading-move-popup .mapboxgl-popup-tip {
  cursor: grab;
  touch-action: none;
}

.reading-move-popup.is-dragging .mapboxgl-popup-content,
.reading-move-popup.is-dragging .mapboxgl-popup-tip {
  cursor: grabbing;
}

.reading-move-title {
  color: var(--primary-color);
  font-weight: 700;
  margin-bottom: 4px;
}

.reading-move-help,
.reading-move-coordinates {
  font-size: 0.78rem;
  opacity: 0.78;
}

.reading-move-help {
  margin-bottom: 4px;
}

.reading-move-coordinates {
  margin-bottom: 8px;
}

.readingModalButton:hover {
  background-color: var(--secondary-color);
  color: var(--primary-color);
  text-shadow: none;
}

.readings-count-overlay {
    position: absolute;
    top: 70px; /* Adjust as needed */
    right: 10px;
    background-color: var(--bg-surface, rgba(19, 19, 21, 0.85));
    color: var(--primary);
    padding: 5px 10px;
    border-radius: var(--radius-sm, 4px);
    font-size: 16px;
    z-index: 1000; /* Ensure it's above the map */
    display: none; /* Hidden by default */
}

/* Mini Spinner for Readings Loading */
.readings-loading-spinner {
    position: absolute;
    top: 40px;
    right: 40px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: conic-gradient(var(--primary, #FFE030) 0deg 60deg, var(--bg-base, #0b0b0d) 60deg 120deg, var(--primary, #FFE030) 120deg 180deg, var(--bg-base, #0b0b0d) 180deg 240deg, var(--primary, #FFE030) 240deg 300deg, var(--bg-base, #0b0b0d) 300deg 360deg);
    animation: spin 1.5s linear infinite;
    filter: drop-shadow(0 0 2px var(--primary, #FFE030));
    z-index: 1000;
    display: none;
}

/* Ensure the spinner doesn't block map interaction */
.readings-loading-spinner::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 35%;
    height: 35%;
    background-color: var(--bg-base, #0b0b0d);
    border-radius: 50%;
    z-index: 2;
}