/* Varial — Leaflet overrides */

/* Interconnectors map — region label (DivIcon) */
.intx-map-region-label {
  font-size: var(--text-xs, 0.75rem);
  font-weight: 600;
  background: none;
  border: none;
  box-shadow: none;
  color: var(--varial-gray-700, #38352F);
}

/* Styleguide demo — fullscreen-button override (Leaflet injects inline styles
   on .leaflet-control a, so !important is permitted here per CLAUDE.md). */
.sg-leaflet-fullscreen-btn {
  font-size: 1rem;
  line-height: 26px;
  text-align: center;
  text-decoration: none;
  color: var(--varial-gray-600, #4D4A46) !important;
  display: block;
  width: 26px;
  height: 26px;
}

/* Dark mode — the dark_all basemap pairs with a dark container bg + readable
   zoom/layer controls (JS swaps the tile URL on theme toggle). */
[data-bs-theme="dark"] .leaflet-container {
  background: #0F172A;
}

[data-bs-theme="dark"] .leaflet-bar a,
[data-bs-theme="dark"] .leaflet-control-zoom a {
  background: var(--varial-bg-subtle, #1E293B);
  color: var(--varial-gray-500, #CBD5E1);
  border-color: var(--varial-border, #334155);
}

[data-bs-theme="dark"] .leaflet-bar a:hover,
[data-bs-theme="dark"] .leaflet-control-zoom a:hover {
  background: var(--varial-gray-100, #334155);
}