/* ==========================================================================
   EWB Radar -- leaflet_overrides.css
   Leaflet-Overrides (Zoom-Control, Standard-Attribution aus), eigene
   Attribution-Bar (#attr-bar) und scharfe Radar-Overlay-Bilder.
   Ein Teil der Regeln trägt !important: Leaflet bringt für dieselben Elemente
   eigene Regeln mit.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Leaflet-Overrides
   -------------------------------------------------------------------------- */
.leaflet-control-zoom {
  border: none !important;
  box-shadow: var(--shadow-md) !important;
  border-radius: var(--radius-xl) !important;
  /* visible statt hidden, sonst klippt der Container den Zoom-Tooltip
     (::after, ragt rechts raus). */
  overflow: visible;
  /* Zoom-Buttons liegen IM Karten-Container → ohne touch-action würde
     ein Pinch hier die Karte zoomen. */
  touch-action: none;
}

.leaflet-control-zoom a {
  background: var(--glass-bg) !important;
  border: none !important;
  border-bottom: 1px solid var(--color-border) !important;
  color: var(--color-text-muted) !important;
  font-size: 1.1rem !important;
  width: 34px !important;
  height: 34px !important;
  line-height: 34px !important;
  transition: background var(--transition-fast), color var(--transition-fast);
}

/* Außenecken der Buttons runden -- oben/unten je nur die äußeren Ecken.
   Die Rundung sitzt an den Buttons, nicht am Container: der trägt
   overflow: visible und klipst deshalb nichts ab.
   !important schlägt Leaflets .leaflet-touch-Radius-Defaults. */
.leaflet-control-zoom a:first-child {
  border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
}
.leaflet-control-zoom a:last-child {
  border-bottom: none !important;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl) !important;
}

.leaflet-control-zoom a:hover {
  background: var(--color-accent-dim) !important;
  color: var(--color-accent) !important;
}

/* Leaflet-Standard-Attribution ausblenden -- eigenes #attr-bar übernimmt. */
.leaflet-control-attribution { display: none !important; }

/* --------------------------------------------------------------------------
   Attribution-Bar -- unten-rechts, bündig am Kartenrand. Auf dem Desktop
   einzeilig; auf schmalen Bildschirmen bricht sie um (right_controls.css).
   Ersetzt das Leaflet-Standard-Attribution-Control.

   Layout: [ewb-link] · [dwd/eumetnet-quelle] · © OSM · CARTO
   Die Datenquellen-Sektion (#attr-source) wird per updateAttribution()
   in map.js nach Produktwechsel dynamisch befüllt oder geleert.

   z-index: 400 = Leaflet-Standard für Controls (unter unseren UI-Elementen).
   border-radius: oben-rechts rund, drei andere Ecken am Rand bündig.
   -------------------------------------------------------------------------- */
#attr-bar {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 5px;
  background: var(--glass-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: var(--radius-md) 0 0 0;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
  pointer-events: auto;
  touch-action: none;  /* Kein Pinch-Zoom der Karte über der Attribution. */
}

/* ⚠️ ECHTE LINKS, und die dürfen ihr langes Drücken behalten. Hier stehen vier
   externe Ziele (EWB, Datenquelle, OSM, CARTO); auf iOS gehört dazu das Menü
   "In neuem Tab öffnen / Kopieren / Teilen". Das universelle Verbot weiter oben
   hatte es mitgenommen -- vom USER am Gerät gefunden.

   ⚠️ ABGRENZUNG, und die ist der Punkt: `user-select` bleibt für sie GESPERRT.
   Der sichtbare Linktext ("OSM", "CARTO") soll weiterhin nicht markierbar sein
   -- zurück kommt allein die Funktion, die einem LINK gehört. Und der Selektor
   ist eng: die Zoom-Knöpfe sind zwar ebenfalls `<a>`, funktional aber Knöpfe,
   nichts zum Teilen. Sie bleiben gesperrt. */
#attr-bar a {
  color: var(--color-text-muted);
  text-decoration: none;
  -webkit-touch-callout: default;
  -webkit-user-drag: auto;
}

#attr-bar a:hover { color: var(--color-text); }

/* Mini-Favicon-Logo neben Quellen-Link */
.attr-logo {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  flex-shrink: 0;
  vertical-align: middle;
}

/* Trennzeichen zwischen den Attributions-Einträgen */
.attr-sep {
  color: var(--color-text-faint);
  font-size: 10px;
  user-select: none;
}

/* Inline-Flex damit Logo + Text innerhalb des Quellen-Spans
   exakt vertikal zentriert sind -- verhindert Baseline-Versatz
   durch das <a><img></a> neben dem Textlink. */
#attr-source {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.attr-source-dwd .attr-logo {
  margin-right: 3px;
}

.attr-source-eumetnet .attr-logo {
  margin-right: 5px;
}

/* Wenn #attr-source leer ist (kein Produkt mit Quellenangabe),
   den span selbst und den direkt nachfolgenden Trenner ausblenden --
   verhindert doppelte Punkte in der Bar. */
#attr-source:empty + .attr-sep,
#attr-source:empty { display: none; }

/* Radar-Overlay-Bilder scharf halten -- Browser-Bilinear-Interpolation
   beim Zoom unterdrücken; pixelated = Chrome/Edge/Safari, crisp-edges = Firefox */
.leaflet-image-layer {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Angeklickte Vektorflächen bekommen in Chromium den Standard-Fokusrahmen --
   bei den großflächigen Warngebieten umrandet er die halbe Karte.
   :focus-visible bleibt bewusst unangetastet: der Rahmen verschwindet nur beim
   Klick mit der Maus, bei Tastaturnavigation bleibt er als Orientierung stehen. */
.leaflet-pane > svg path.leaflet-interactive:focus:not(:focus-visible) {
  outline: none;
}

/* Fadenkreuz-Cursor im Ziel-Modus (Lineal / Standort-Pin) auch über den
   interaktiven Warnflächen. Ohne diese Regel gewinnt Leaflets
   .leaflet-interactive{cursor:pointer} lokal gegen den crosshair, den ruler.js
   bzw. location.js auf den Karten-Container setzen -- genau zielen kann man aber
   nur mit dem +. Die Modi setzen dazu die Klasse .alerts-aim am Container.
   Greift nur auf Vektorflächen (svg path), nicht auf Marker-Icons. */
.alerts-aim .leaflet-pane > svg path.leaflet-interactive {
  cursor: crosshair;
}

/* Zeigefinger über einem Blitzsymbol. Er kommt sonst von Leaflets
   .leaflet-interactive, das an eigenen Elementen hängt -- die Blitze liegen aber
   auf einer Zeichenfläche und haben keine. lightning_layer.js setzt die Klasse
   am Karten-Container, sobald ein Symbol unter dem Zeiger liegt.
   Zwei Klassen, damit die Regel Leaflets .leaflet-grab{cursor:grab} (eine
   Klasse) überbietet. Der Ziel-Modus von ruler.js/location.js bleibt trotzdem
   vorn: er setzt seinen crosshair inline, und inline schlägt jede Regel. */
.leaflet-container.lightning-hand {
  cursor: pointer;
}

/* ---------------------------------------------------------------------------
   Pflichttexte, die an einem LAYER hängen (#attr-layers)

   Sie kommen mit ihrem Layer und gehen mit ihm; gefüllt wird der Span aus
   map.js (setLayerAttribution). Leer heißt: kein solcher Layer ist an -- dann
   verschwinden Span und nachfolgender Trenner, wie bei #attr-source.

   ⚠️ Auf schmalen Bildschirmen ist die ganze Leiste versteckt, und ein
   Infobutton vertritt sie (right_controls.css, #attr-info-btn). Hier steht
   deshalb KEIN eigenes Einklappen mehr: zwei Bedienwege für dieselbe Angabe
   wären einer zu viel, und der ältere hätte im aufgeklappten Popover ein
   Zeichen statt des Pflichttextes gezeigt.
   --------------------------------------------------------------------------- */
#attr-layers:empty + .attr-sep,
#attr-layers:empty { display: none; }

/* ⚠️ Dieselbe Farbe wie die Quellenangabe daneben. Der Pflichttext ist zum
   größten Teil KLARTEXT (nur das Wort EUMETSAT ist ein Link) und erbte sonst
   die kräftigere Grundfarbe -- er stünde dann dunkler in der Bar als "DWD Open
   Data" direkt daneben und sähe aus wie eine andere Art Angabe. Größe,
   Zeilenhöhe und Schrift kommen aus #attr-bar und gelten hier ohnehin. */
#attr-layers {
  color: var(--color-text-muted);
}