/**
 * Map Popups & Drawing Controls (shared component)
 * Unified styles for MapLibre GL + Leaflet popups, drawing toolbars.
 * Theme-aware: works with light/dark via CSS variables.
 *
 * Popup structure (managed by mapPopupManager.js):
 *   .map-popup-enhanced
 *     .map-popup-header  (drag handle + title + minimize/close)
 *     .map-popup-body    (scrollable content)
 *     .map-popup-footer  (optional action buttons)
 */

/* ========================================================================
   CSS CUSTOM PROPERTIES (scoped)
   ======================================================================== */
:root {
  --map-popup-bg: var(--bg-elevated, #ffffff);
  --map-popup-border: var(--border, #e5e7eb);
  --map-popup-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.12), 0 2px 8px -2px rgba(0, 0, 0, 0.08);
  --map-popup-radius: var(--radius-lg, 12px);
  --map-popup-header-bg: var(--bg-secondary, #f9fafb);
  --map-popup-max-w: 400px;
  --map-popup-min-w: 220px;
  --map-popup-max-h: 50vh;
}

/* ========================================================================
   MAPLIBRE POPUP OVERRIDES
   ======================================================================== */

.maplibregl-popup {
  z-index: 20;
  font-family: var(--font-sans);
}

.maplibregl-popup-content {
  background: var(--map-popup-bg);
  border-radius: var(--map-popup-radius);
  box-shadow: var(--map-popup-shadow);
  border: 1px solid var(--map-popup-border);
  padding: 0;
  min-width: var(--map-popup-min-w);
  max-width: var(--map-popup-max-w);
  overflow: hidden;
  font-family: var(--font-sans);
  color: var(--text-primary);
}

.maplibregl-popup-close-button {
  display: none; /* replaced by our custom header buttons */
}

/* Popup tip / anchor */
.maplibregl-popup-tip {
  border-top-color: var(--map-popup-bg);
}

.maplibregl-popup-anchor-bottom .maplibregl-popup-tip {
  border-top-color: var(--map-popup-bg);
}

.maplibregl-popup-anchor-top .maplibregl-popup-tip {
  border-bottom-color: var(--map-popup-bg);
}

.maplibregl-popup-anchor-left .maplibregl-popup-tip {
  border-right-color: var(--map-popup-bg);
}

.maplibregl-popup-anchor-right .maplibregl-popup-tip {
  border-left-color: var(--map-popup-bg);
}

/* ========================================================================
   LEAFLET POPUP OVERRIDES
   ======================================================================== */

.leaflet-popup-content-wrapper {
  background: var(--map-popup-bg);
  border-radius: var(--map-popup-radius);
  box-shadow: var(--map-popup-shadow);
  border: 1px solid var(--map-popup-border);
  padding: 0;
  color: var(--text-primary);
  font-family: var(--font-sans);
}

.leaflet-popup-content {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  min-width: 200px;
  max-width: var(--map-popup-max-w);
  color: var(--text-primary);
}

.leaflet-popup-tip-container .leaflet-popup-tip {
  background: var(--map-popup-bg);
  border: 1px solid var(--map-popup-border);
  border-top: none;
  border-left: none;
}

.leaflet-popup-close-button {
  display: none; /* replaced by header close */
}

/* ========================================================================
   ENHANCED POPUP STRUCTURE (injected by mapPopupManager.js)
   ======================================================================== */

/* Header: drag handle + title + controls */
.map-popup-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: var(--map-popup-header-bg);
  border-bottom: 1px solid var(--map-popup-border);
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  border-radius: var(--map-popup-radius) var(--map-popup-radius) 0 0;
  min-height: 36px;
}

.map-popup-header:active {
  cursor: grabbing;
}

.map-popup-drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  flex-shrink: 0;
  opacity: 0.5;
}

.map-popup-drag-handle svg {
  width: 14px;
  height: 14px;
}

.map-popup-title {
  flex: 1;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.map-popup-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.map-popup-btn {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm, 4px);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
  line-height: 1;
}

.map-popup-btn:hover {
  background: var(--bg-hover, #f3f4f6);
  border-color: var(--border);
  color: var(--text-secondary);
}

.map-popup-btn-close:hover {
  background: color-mix(in srgb, var(--danger) 12%, var(--bg-primary));
  border-color: color-mix(in srgb, var(--danger) 25%, transparent);
  color: var(--danger);
}

.map-popup-btn svg {
  width: 14px;
  height: 14px;
}

/* Body: scrollable content area */
.map-popup-body {
  padding: 10px 12px;
  max-height: var(--map-popup-max-h);
  overflow-y: auto;
  overflow-x: hidden;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-secondary);
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.map-popup-body::-webkit-scrollbar {
  width: 5px;
}

.map-popup-body::-webkit-scrollbar-track {
  background: transparent;
}

.map-popup-body::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

.map-popup-body::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* Content typography inside popups */
.map-popup-body h3,
.map-popup-body h4 {
  margin: 0 0 6px 0;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}

.map-popup-body h3 { font-size: 0.9375rem; }
.map-popup-body h4 { font-size: 0.8125rem; }

.map-popup-body p {
  margin: 4px 0;
  color: var(--text-secondary);
}

.map-popup-body table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.8125rem;
}

.map-popup-body table tr {
  border-bottom: 1px solid var(--border);
}

.map-popup-body table tr:last-child {
  border-bottom: none;
}

.map-popup-body table td {
  padding: 4px 0;
}

.map-popup-body table td:first-child {
  padding-right: 12px;
  color: var(--text-muted);
}

.map-popup-body table td:last-child {
  font-weight: 500;
  text-align: right;
}

/* Footer: optional action buttons */
.map-popup-footer {
  padding: 8px 10px;
  border-top: 1px solid var(--map-popup-border);
  background: var(--map-popup-header-bg);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  border-radius: 0 0 var(--map-popup-radius) var(--map-popup-radius);
}

.map-popup-footer .btn-sm {
  padding: 4px 10px;
  font-size: 0.75rem;
  border-radius: var(--radius-sm, 4px);
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  transition: all 0.15s ease;
}

.map-popup-footer .btn-sm:hover {
  background: var(--bg-hover);
  border-color: var(--border-strong, var(--border));
}

.map-popup-footer .btn-sm.btn-primary {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.map-popup-footer .btn-sm.btn-primary:hover {
  filter: brightness(1.1);
}

/* ========================================================================
   MINIMIZED STATE
   ======================================================================== */

.map-popup-minimized .map-popup-body,
.map-popup-minimized .map-popup-footer {
  display: none;
}

.map-popup-minimized .map-popup-header {
  border-bottom: none;
  border-radius: var(--map-popup-radius);
}

.map-popup-minimized .maplibregl-popup-content,
.map-popup-minimized .leaflet-popup-content-wrapper {
  min-width: auto;
}

/* Hide tip when minimized */
.map-popup-minimized .maplibregl-popup-tip,
.map-popup-minimized .leaflet-popup-tip-container {
  display: none;
}

/* ========================================================================
   DRAGGING STATE
   ======================================================================== */

.map-popup-dragging {
  opacity: 0.92;
  z-index: 100 !important;
}

.map-popup-dragging .maplibregl-popup-content,
.map-popup-dragging .leaflet-popup-content-wrapper {
  box-shadow: 0 16px 48px -8px rgba(0, 0, 0, 0.2), 0 4px 12px -4px rgba(0, 0, 0, 0.12);
}

/* ========================================================================
   POPUP ANIMATIONS
   ======================================================================== */

@keyframes mapPopupIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.maplibregl-popup-content,
.leaflet-popup-content-wrapper {
  animation: mapPopupIn 0.2s ease-out;
}

/* ========================================================================
   COMMON POPUP CONTENT PATTERNS
   ======================================================================== */

/* Stat row (label: value) */
.popup-stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 0;
  font-size: 0.8125rem;
}

.popup-stat-label {
  color: var(--text-muted);
}

.popup-stat-value {
  font-weight: 600;
  color: var(--text-primary);
}

/* Coordinate display */
.popup-coords {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
  padding: 2px 0;
}

/* Tags / badges in popups */
.popup-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 0.7rem;
  font-weight: 500;
  border-radius: var(--radius-full, 9999px);
  background: color-mix(in srgb, var(--primary) 10%, var(--bg-secondary));
  color: var(--primary);
  gap: 3px;
}

/* Divider */
.popup-divider {
  height: 1px;
  background: var(--border);
  margin: 8px 0;
}

/* ========================================================================
   DRAWING / EDITING TOOLBAR — UNIFIED STYLES
   ======================================================================== */

/* Leaflet Draw toolbar */
.leaflet-draw-toolbar a,
.leaflet-bar a {
  background-color: var(--bg-elevated, #fff) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border) !important;
  transition: all 0.15s ease;
}

.leaflet-draw-toolbar a:hover,
.leaflet-bar a:hover {
  background-color: var(--bg-hover, #f3f4f6) !important;
  color: var(--text-primary) !important;
}

.leaflet-bar {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md, 8px) !important;
  box-shadow: var(--shadow-md) !important;
  overflow: hidden;
}

.leaflet-bar a:first-child {
  border-top-left-radius: var(--radius-md, 8px) !important;
  border-top-right-radius: var(--radius-md, 8px) !important;
}

.leaflet-bar a:last-child {
  border-bottom-left-radius: var(--radius-md, 8px) !important;
  border-bottom-right-radius: var(--radius-md, 8px) !important;
  border-bottom: none !important;
}

/* Leaflet.PM / Geoman toolbar */
.leaflet-pm-toolbar .leaflet-pm-icon-delete,
.leaflet-pm-toolbar .leaflet-pm-icon-edit,
.leaflet-pm-toolbar .leaflet-pm-icon-draw {
  filter: var(--icon-filter, none);
}

.leaflet-pm-actions-container {
  background: var(--bg-elevated, #fff) !important;
  border-radius: var(--radius, 6px) !important;
  box-shadow: var(--shadow-md) !important;
  border: 1px solid var(--border) !important;
  padding: 2px !important;
}

.leaflet-pm-action {
  color: var(--text-primary) !important;
  padding: 6px 12px !important;
  font-size: 0.8125rem !important;
  font-family: var(--font-sans) !important;
  border-radius: var(--radius-sm, 4px) !important;
  transition: background 0.15s ease !important;
}

.leaflet-pm-action:hover {
  background: var(--bg-hover, #f3f4f6) !important;
}

/* Active drawing/editing state indicator */
.leaflet-pm-toolbar .active a,
.leaflet-draw-toolbar a.leaflet-draw-toolbar-button-enabled {
  background-color: color-mix(in srgb, var(--primary) 15%, var(--bg-elevated)) !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

/* MapboxDraw controls (MapLibre) */
.mapboxgl-ctrl-group,
.maplibregl-ctrl-group {
  background: var(--bg-elevated, #fff) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md, 8px) !important;
  box-shadow: var(--shadow-md) !important;
  overflow: hidden;
}

.mapboxgl-ctrl-group button,
.maplibregl-ctrl-group button {
  background-color: var(--bg-elevated, #fff) !important;
  border-color: var(--border) !important;
  color: var(--text-secondary) !important;
  transition: all 0.15s ease;
}

.mapboxgl-ctrl-group button:hover,
.maplibregl-ctrl-group button:hover {
  background-color: var(--bg-hover, #f3f4f6) !important;
  color: var(--text-primary) !important;
}

.mapboxgl-ctrl-group button.active,
.maplibregl-ctrl-group button.active {
  background-color: color-mix(in srgb, var(--primary) 15%, var(--bg-elevated)) !important;
  color: var(--primary) !important;
}

/* MapLibre navigation controls */
.maplibregl-ctrl-zoom-in,
.maplibregl-ctrl-zoom-out,
.maplibregl-ctrl-compass {
  background-color: var(--bg-elevated, #fff) !important;
  color: var(--text-secondary) !important;
}

.maplibregl-ctrl-zoom-in:hover,
.maplibregl-ctrl-zoom-out:hover,
.maplibregl-ctrl-compass:hover {
  background-color: var(--bg-hover, #f3f4f6) !important;
  color: var(--text-primary) !important;
}

/* ========================================================================
   EDIT MODE INDICATOR (shared across dashboards)
   ======================================================================== */

.edit-mode-indicator {
  position: fixed;
  top: 52px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 16px;
  border-radius: var(--radius-full, 9999px);
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: var(--font-sans);
  z-index: 1000;
  display: none;
  box-shadow: var(--shadow-lg);
  pointer-events: none;
  white-space: nowrap;
}

.edit-mode-indicator.active {
  display: block;
  animation: mapPopupIn 0.2s ease-out;
}

.edit-mode-indicator--drawing {
  background: color-mix(in srgb, var(--primary) 90%, white);
  color: #fff;
  border: 1px solid var(--primary);
}

.edit-mode-indicator--editing {
  background: color-mix(in srgb, var(--warning) 90%, white);
  color: #fff;
  border: 1px solid var(--warning);
}

.edit-mode-indicator--deleting {
  background: color-mix(in srgb, var(--danger) 90%, white);
  color: #fff;
  border: 1px solid var(--danger);
}

/* ========================================================================
   DARK THEME OVERRIDES
   ======================================================================== */

[data-theme="dark"] {
  --map-popup-bg: var(--bg-elevated, #1f2937);
  --map-popup-border: var(--border, #374151);
  --map-popup-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.4), 0 2px 8px -2px rgba(0, 0, 0, 0.3);
  --map-popup-header-bg: var(--bg-secondary, #111827);
  --icon-filter: invert(0.85);
}

[data-theme="dark"] .maplibregl-popup-content,
[data-theme="dark"] .leaflet-popup-content-wrapper {
  box-shadow:
    0 8px 24px -4px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .maplibregl-popup-tip {
  border-top-color: var(--map-popup-bg);
}

[data-theme="dark"] .maplibregl-popup-anchor-top .maplibregl-popup-tip {
  border-bottom-color: var(--map-popup-bg);
}

[data-theme="dark"] .maplibregl-popup-anchor-left .maplibregl-popup-tip {
  border-right-color: var(--map-popup-bg);
}

[data-theme="dark"] .maplibregl-popup-anchor-right .maplibregl-popup-tip {
  border-left-color: var(--map-popup-bg);
}

[data-theme="dark"] .leaflet-popup-tip-container .leaflet-popup-tip {
  background: var(--map-popup-bg);
  border-color: var(--map-popup-border);
}

[data-theme="dark"] .leaflet-bar a,
[data-theme="dark"] .leaflet-draw-toolbar a,
[data-theme="dark"] .leaflet-pm-action,
[data-theme="dark"] .mapboxgl-ctrl-group button,
[data-theme="dark"] .maplibregl-ctrl-group button {
  background-color: var(--bg-elevated) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border) !important;
}

[data-theme="dark"] .leaflet-bar,
[data-theme="dark"] .mapboxgl-ctrl-group,
[data-theme="dark"] .maplibregl-ctrl-group {
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.4) !important;
}

/* ========================================================================
   RESPONSIVE
   ======================================================================== */

@media (max-width: 768px) {
  :root {
    --map-popup-max-w: 320px;
    --map-popup-max-h: 40vh;
  }

  .map-popup-header {
    padding: 6px 8px;
    min-height: 32px;
  }

  .map-popup-body {
    padding: 8px 10px;
    font-size: 0.75rem;
  }

  .map-popup-title {
    font-size: 0.75rem;
  }
}