/* ─────────────────────────────────────────────────────────────────────────────
   DΛREΛKT_ UI — MODULE: ui.map
   Classification : UI Atom | Map Handler | Responsive
   Version        : 1.0.0
   File           : /tools/modules/ui.map/ui.map.css
   ───────────────────────────────────────────────────────────────────────────── */

@layer ui.map {

/* ─── Container ──────────────────────────────────────────────────────────────── */
.ui-map {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  border-radius: var(--ui-radius, 8px);
  background: var(--ui-bg-muted, #f5f5f5);
}

/* ─── Map Container ─────────────────────────────────────────────────────────── */
.ui-map-container {
  position: relative;
  width: 100%;
  height: 400px;
  min-height: 300px;
  z-index: 1;
}

/* Responsive heights */
@media (max-width: 768px) {
  .ui-map-container {
    height: 300px;
  }
}

@media (min-width: 1024px) {
  .ui-map-container {
    height: 500px;
  }
}

/* ─── Error & Fallback States ───────────────────────────────────────────────── */
.ui-map-error,
.ui-map-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 400px;
  background: var(--ui-bg-muted, #f5f5f5);
  color: var(--ui-fg-muted, #666);
  border: 1px dashed var(--ui-border, #ddd);
  border-radius: var(--ui-radius, 8px);
  font-size: 14px;
  font-family: var(--ui-font-body, system-ui, sans-serif);
}

.ui-map-error {
  color: var(--ui-error, #dc2626);
  border-color: var(--ui-error, #dc2626);
}

/* ─── Leaflet Overrides ─────────────────────────────────────────────────────── */
/* Ensure map controls are properly styled */
.ui-map .leaflet-control-zoom a {
  background-color: var(--ui-bg, #fff);
  color: var(--ui-fg, #333);
}

.ui-map .leaflet-control-zoom a:hover {
  background-color: var(--ui-bg-hover, #f0f0f0);
}

/* Ensure map attribution is readable */
.ui-map .leaflet-control-attribution {
  background-color: rgba(255, 255, 255, 0.8);
  font-size: 11px;
  padding: 2px 5px;
}

/* ─── Loading State ─────────────────────────────────────────────────────────── */
.ui-map.loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border: 3px solid var(--ui-border, #ddd);
  border-top-color: var(--ui-accent, #2d5016);
  border-radius: 50%;
  animation: ui-map-spin 0.8s linear infinite;
  z-index: 10;
}

@keyframes ui-map-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ─── Dark Mode Support ─────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  .ui-map {
    background: var(--ui-bg-dark, #1a1a1a);
  }

  .ui-map-error,
  .ui-map-fallback {
    background: var(--ui-bg-dark, #1a1a1a);
    border-color: var(--ui-border-dark, #333);
    color: var(--ui-fg-dark, #ccc);
  }

  .ui-map .leaflet-control-zoom a {
    background-color: var(--ui-bg-dark, #2a2a2a);
    color: var(--ui-fg-dark, #eee);
  }

  .ui-map .leaflet-control-zoom a:hover {
    background-color: var(--ui-bg-hover-dark, #3a3a3a);
  }
}
}