/* ==========================================================================
   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: der Container schneidet nichts ab, was über seinen
     Rand ragt. Die Sprechblasen der Zoom-Knöpfe stehen in der Ebene
     (tooltip_layer.js) und hängen nicht daran. */
  overflow: visible;
  /* Zoom-Buttons liegen IM Karten-Container → ohne touch-action würde
     ein Pinch hier die Karte zoomen. */
  touch-action: none;
}

/* Abstand der Zoom-Buttons zum linken Rand: derselbe wie der der Legende (legend.css),
   in jeder Stufe, in der sie ihn ändert. Zwei Klassen wie Leaflets eigene Regel für
   .leaflet-left .leaflet-control; diese hier gewinnt, weil sie später geladen wird. */
.leaflet-left .leaflet-control-zoom {
  margin-left: 16px;
}

@media (max-width: 1059.9px) {
  .leaflet-left .leaflet-control-zoom {
    margin-left: 8px;
  }
}

.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;
}

/* Dasselbe für die Kacheln eines lokalen Kachelprodukts (Klasse aus
   CRISP_TILES_CLASS in renderers/tiles.js). Kartenkacheln und RainViewer tragen
   die Klasse nicht und bleiben geglättet. Die Regel hat dieselbe Spezifität wie
   `.leaflet-safari .leaflet-tile` in leaflet.css und gewinnt nur, weil diese Datei
   danach geladen wird (index.html). Am Container der Stufe steht sie auch: zwischen
   zwei ganzen Stufen skaliert Leaflet ihn per Transform, und setzt ein Browser ihn
   dafür als eigene Ebene zusammen, soll auch sie nicht glätten. Über der nativen
   Stufe vergrößert die Ebene selbst (createUpscaledTile in renderers/tiles.js). */
.radar-tiles-crisp .leaflet-tile,
.radar-tiles-crisp .leaflet-tile-container {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Ein Platzhalter (renderers/tiles.js, createTile: Kachel, die das Verzeichnis des
   Frames nicht listet) ist ein <img> ohne src. Er soll nichts zeigen, aber Chrome,
   Firefox und Safari zeichnen um ein Bild ohne Quelle einen grauen Rahmen -- über
   eine Ebene aus Platzhaltern wird das ein Gitter. visibility statt opacity: die
   Deckkraft einer Kachel setzt Leaflet selbst beim Einblenden. Die Regel schlägt
   `.leaflet-tile-loaded { visibility: inherit }` aus leaflet.css über die Spezifität.
   Nur src-lose Kacheln der lokalen Ebene sind gemeint; beim Abräumen setzt Leaflet
   ein src, dann greift sie nicht mehr. */
.radar-tiles-crisp img.leaflet-tile:not([src]) {
  visibility: hidden;
}

/* 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;
}

/* Fadenkreuz, solange der Inspector an ist (inspector.js setzt die Klasse am
   Container). Dieselbe Spezifität wie .lightning-hand darüber; diese Regel steht
   danach und gewinnt, falls beide Klassen zugleich stehen. */
.leaflet-container.inspector-aim {
  cursor: crosshair;
}

/* ---------------------------------------------------------------------------
   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);
}

/* Haftungshinweis von MeteoAlarm als Sprechblase am Eintrag der Quelle
   (alert_sources.js, meteoalarmAttribution): einmal da, nie dauerhaft sichtbar.
   Die Leiste liegt unten, die Blase steht deshalb darüber und beginnt an der
   linken Kante des Eintrags; sie ist breiter als eine Knopfblase, weil der
   Wortlaut lang ist. Im Popover des Infoknopfs (schmale Bildschirme, die Leiste
   ist dort versteckt) gibt es kein Überfahren -- dort steht der Text fest unter
   dem Eintrag. */
#attr-layers .attr-disclaimer[data-t-tooltip]::after {
  bottom: calc(100% + 4px);
  left: 0;
  max-width: min(320px, 90vw);
  text-align: left;
}
#attr-layers .attr-disclaimer[data-t-tooltip]:hover::after,
#attr-layers .attr-disclaimer[data-t-tooltip]:focus-within::after {
  opacity: 1;
}
body.attr-info-open #attr-layers .attr-disclaimer[data-t-tooltip]::after {
  position: static;
  display: block;
  opacity: 1;
  margin-top: 2px;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Quellenangabe der Karte (#attr-basemap), gefüllt aus map.js
   (setBasemapAttribution). ⚠️ `contents`, damit ihre Teile selbst Kinder der
   Leiste sind: die Abstände kommen aus dem `gap` von #attr-bar, und ein
   Behälter dazwischen nähme sie ihnen. */
#attr-basemap { display: contents; }

/* Ein Eintrag mit „©“ (copyrightEntry() in map.js): Zeichen und Name sind EIN Teil der
   Leiste und bleiben in einer Zeile. Popover und Aufnahme brechen die Reihe zwischen
   ihren Teilen um und den Text in einem Teil (right_controls.css); beides trennte das
   Zeichen sonst von seinem Namen. */
#attr-bar .attr-entry { white-space: nowrap; }

/* Schrift-Ebene eines Kartenstils mit Schrift-Filter (LABEL_FILTER_CLASS in
   basemap.js). Welcher SVG-Filter gilt, nennt der Behälter der Ebene in der
   Variablen (LABEL_FILTER_PROPERTY); die Regel hängt an der KACHEL, nicht am
   Behälter: der hat keine Fläche, an der sich die Fläche eines SVG-Filters
   bemessen könnte, und ein CSS-Filter am Behälter (Sepia, Umkehrung) gilt so
   weiter. */
.basemap-labels-filtered .leaflet-tile {
  filter: var(--basemap-label-filter);
}

/* Wer wenig Bewegung will, bekommt das Radarbild ohne jeden Übergang. Die globale
   Dämpfung (style.css) kürzt jeden Übergang auf einen Bruchteil einer
   Millisekunde, lässt ihn aber bestehen: am Pane des Radars, an seinen Ebenen,
   Kachel-Behältern und Kacheln läuft er dann bei jedem Wechsel des Frames an.
   Hier steht er ausdrücklich still. `!important`, weil die globale Regel es
   trägt; diese hier ist die genauere und gewinnt. */
@media (prefers-reduced-motion: reduce) {
  .leaflet-radar-pane,
  .leaflet-radar-pane * {
    transition: none !important;
  }
}