/* ════════════════════════════════════════════════════════════════════════
   mewa-map.css
   Path: wwwroot/css/mewa-map.css

   EINZIGE QUELLE der Statusfarben (05.08.2026).

   Vorher standen die Farben dreimal im Haus: hier (Marker), im <style>-Block
   der LiveMapPage (Punkte der Seitenliste) und im <style>-Block der FleetPage.
   Die FleetPage-Regeln waren dabei sogar wirkungslos, weil ::deep nur in
   scoped .razor.css-Dateien uebersetzt wird — in einem eingebetteten <style>
   schickt der Browser die ganze Regel in den Muell. Auf der FleetPage hatte
   deshalb KEIN Fahrzeug eine Statusfarbe, ohne dass es jemandem auffiel.
   Damit Karte, Seitenliste und Zaehler nicht wieder auseinanderlaufen, stehen
   die Farben ab jetzt nur noch hier; alle anderen Stellen lesen sie ueber die
   Klassen .mewa-st-* als CSS-Variablen aus.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Statuspalette ───────────────────────────────────────────────────────
   Pro Zustand drei zusammengehoerige Werte:
     --mewa-st-bg    Flaeche des Schilds / der Fuellung
     --mewa-st-fg    Schrift auf dieser Flaeche
     --mewa-st-mark  gesaettigte Variante fuer kleine Punkte und Ringe
   Die Schriftfarbe ist bewusst NICHT pauschal weiss: auf dem hellen Grau von
   "hors ligne" waere Weiss unlesbar. Kontrast nach WCAG 2.1 (kleiner Text
   braucht 4.5:1) gemessen: gruen 5.0:1, indigo 6.0:1, grau 8.5:1, rot 4.8:1.
   Deshalb ist das Gruen dunkler als das fruehere #16A34A (das kam auf 3.3:1
   und war auf dem Schild schlicht nicht lesbar). */
/* Rueckfall, falls ein unbekannter Statusschluessel ankommt: neutrales Grau
   statt "keine Farbe". Ein unbekannter Status darf nicht wie ein Fehler des
   Browsers aussehen. Dieser Block steht VOR der Palette, weil beide Regeln
   dieselbe Gewichtung haben und sonst der Rueckfall die Statusfarbe
   ueberschreiben wuerde (bei gleicher Spezifitaet gewinnt die letzte Regel). */
/* Die Anomaliefarbe steht ab jetzt an EINER Stelle. Warnring und Abzeichen
   am Fahrzeug trugen sie vorher fest verdrahtet (rgba(220,38,38,.35) und
   #DC2626), obwohl beide innerhalb von .mewa-st-anomaly liegen: wer die Farbe
   aenderte, hatte danach einen Ring im alten Rot neben einer Statuspille in
   der neuen Farbe. Die Variable haengt bewusst auch an .mewa-st-anomaly
   selbst, weil dieselbe Statusklasse auf den Seiten an Elementen benutzt wird,
   die weder Marker noch Pille sind — ohne diese Zeile loeste sich die Farbe
   dort in nichts auf.
   Ring und Abzeichen lesen ausdruecklich DIESE Variable und nicht
   --mewa-st-mark: sie werden gezeichnet, sobald ein Fahrzeug als Anomalie
   gemeldet ist, auch wenn sein Statusschluessel etwas anderes sagt. Eine
   Warnung, die dann gruen leuchtet, waere schlimmer als keine. */
.mewa-car-wrap,
.mewa-status-pill,
.mewa-st-anomaly {
    --mewa-anomaly: #DC2626;
}

.mewa-car-wrap,
.mewa-status-pill {
    --mewa-st-bg: #E5E7EB;
    --mewa-st-fg: #374151;
    --mewa-st-mark: #9CA3AF;
}

.mewa-st-online {
    --mewa-st-bg: #15803D;
    --mewa-st-fg: #FFFFFF;
    --mewa-st-mark: #16A34A;
}

.mewa-st-in_trip {
    --mewa-st-bg: #4F46E5;
    --mewa-st-fg: #FFFFFF;
    --mewa-st-mark: #4F46E5;
}

.mewa-st-offline {
    --mewa-st-bg: #E5E7EB;
    --mewa-st-fg: #374151;
    --mewa-st-mark: #9CA3AF;
}

.mewa-st-anomaly {
    --mewa-st-bg: var(--mewa-anomaly);
    --mewa-st-fg: #FFFFFF;
    --mewa-st-mark: var(--mewa-anomaly);
}

/* ✨ 05.09.2026 — En panne: Bernstein. Gemeldet, nicht vermutet — deshalb
   eine eigene Farbe zwischen Rot (Anomalie) und Grün (en ligne). */
.mewa-st-breakdown {
    --mewa-st-bg: #B45309;
    --mewa-st-fg: #FFFFFF;
    --mewa-st-mark: #D97706;
}

/* Marker-Container — default Leaflet Background überschreiben */
.mewa-marker-wrap {
    background: transparent !important;
    border: none !important;
}

/* Der angeklickte oder ueberfahrene Wagen muss nach VORNE, sonst verdeckt bei
   zwei dicht stehenden Fahrzeugen das noerdlichere Schild das andere und der
   Name ist nicht lesbar. Leaflet schreibt seinen z-index INLINE (nach
   Breitengrad), deshalb geht es nur mit !important. */
.mewa-marker-wrap:hover {
    z-index: 9000 !important;
}

.mewa-marker-wrap.mewa-active {
    z-index: 9500 !important;
}

/* Wrapper */
.mewa-car-wrap {
    position: relative;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Car-Image pur */
.mewa-car-img {
    position: relative;
    width: 40px;
    height: 40px;
    object-fit: contain;
    z-index: 2;
    transform-origin: center center;
    transition: transform 0.5s ease-out;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

/* Statusanzeige am Fahrzeug selbst */
.mewa-status-online .mewa-car-img {
    filter: drop-shadow(0 0 4px var(--mewa-st-mark));
}

.mewa-status-in_trip .mewa-car-img {
    filter: drop-shadow(0 0 4px var(--mewa-st-mark));
}

.mewa-status-offline .mewa-car-img {
    opacity: 0.55;
    filter: grayscale(1);
}

/* ── Namensschild am Fahrzeug ────────────────────────────────────────────
   Der Name haengt UNTER dem Wagen, damit er das Fahrzeugsymbol nicht
   verdeckt, und ist zentriert. nowrap + feste Hoehe: ein Schild darf nie
   umbrechen, sonst wandert die Karte optisch zu.

   06.08.2026 — max-width von 132 auf 176 px: im Namensfeld steht laengst
   nicht immer ein Personenname, sondern auch eine Telefonnummer
   ("+237 6 99 88 77 66", 18 Zeichen) oder die ID-Ersatzform
   ("Chauffeur 3fa85f64"). Bei 132 px schnitt der Auslassungspunkt die
   Nummer ab — eine abgeschnittene Telefonnummer kann man nicht waehlen.
   Dass breitere Schilder dichter gedraengt stehen, faengt die Notbremse
   weiter unten ab (Klasse mewa-plates-off).

   ACHTUNG — mewa-map.js rechnet mit den Massen dieser Regel: max-width,
   top, die Zeilenhoehe, der Innenabstand, der Rand und der Schlagschatten
   ergeben dort die Konstanten PLATE_W_MAX / PLATE_H, die senkrechten
   Zuschlaege der Dichtemessung (PLATE_PAD_TOP / _BOTTOM), den Rueckfallwert
   fuer die Schildbreite (PLATE_BASE_W: Glyphe 10 + Abstand 4 + Innenabstand
   2 x 7 + Rand 2 x 1,5) und den Rand fuer fitBounds (PLATE_OVERHANG_X / _Y).
   Wer hier eine Zahl aendert, muss sie dort nachziehen — sonst misst die
   Notbremse an Schildern, die es so nicht mehr gibt, und das faellt niemandem
   auf, weil nichts kaputtgeht: die Namen verschwinden nur zum falschen
   Zeitpunkt.
   Die BREITE misst mewa-map.js seit dem 06.08. selbst im DOM (offsetWidth
   dieser Regel) — sie haengt am Inhalt und nicht an max-width. Wer hier
   display, position oder das Zentrieren aendert, macht die Messung falsch:
   ein ausgeblendetes Schild meldet die Breite 0. */
.mewa-car-plate {
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 4px;
    max-width: 176px;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--mewa-st-bg);
    color: var(--mewa-st-fg);
    border: 1.5px solid rgba(255, 255, 255, 0.92);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    font-family: 'DM Sans', -apple-system, system-ui, sans-serif;
    font-size: 11px;
    font-weight: 700;
    line-height: 15px;
    white-space: nowrap;
    z-index: 4;
    pointer-events: auto;
}

/* Das Zeichen vor dem Namen traegt denselben Zustand wie die Farbe.
   Farbe allein reicht nicht: Rot-Gruen-Schwaeche betrifft etwa jeden
   zwoelften Mann, der wuerde "en ligne" und "anomalie" nicht unterscheiden.
   Die vier Zeichen sind bewusst verschieden GEFORMT (Kreis, Dreieck,
   Ring, Warndreieck), nicht nur verschieden gefaerbt. */
.mewa-plate-glyph {
    font-size: 10px;
    line-height: 1;
    flex-shrink: 0;
    opacity: 0.95;
}

.mewa-plate-name {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Hors ligne tritt zurueck, bleibt aber lesbar (dunkle Schrift auf Hellgrau). */
.mewa-status-offline .mewa-car-plate {
    opacity: 0.85;
}

/* ── Notbremse gegen den Schilder-Teppich ────────────────────────────────
   mewa-map.js misst, wie viele der sichtbaren Schilder einander beruehren
   wuerden, und haengt bei zu dichtem Stand die Klasse mewa-plates-off an
   den Kartenbehaelter. Dann bleibt nur noch das Fahrzeugzeichen stehen.
   Gezaehlt werden dabei nur Schilder, die im Bildausschnitt ueberhaupt
   auftauchen koennen — ein Wagen weit neben oder unter dem Ausschnitt darf
   die sichtbaren Namen nicht abschalten (06.08.2026).
   Ohne diese Bremse liegen 50 Wagen im Kern von Douala beim Startzoom 12
   auf 105 x 105 px, waehrend ihre Schilder das Fuenfzehnfache dieser
   Flaeche brauchen — die Karte ist dann eine einzige Schilderwand, und
   weil Leaflet nach Breitengrad stapelt, ist der noerdlichere Wagen darin
   nicht einmal mehr anklickbar. */
.mewa-plates-off .mewa-car-plate {
    display: none;
}

/* Der Ausweg: das ueberfahrene und das ausgewaehlte Fahrzeug zeigen ihr
   Schild einzeln weiter — der Betreiber kommt also ohne Zoomen an jeden
   Namen, ohne dass alle gleichzeitig stehen. */
.mewa-plates-off .mewa-marker-wrap:hover .mewa-car-plate,
.mewa-plates-off .mewa-marker-wrap.mewa-active .mewa-car-plate {
    display: flex;
}

/* Hinweis unten links, solange die Schilder ausgeblendet sind. Eine
   Anzeige, die sich ohne Erklaerung veraendert, sieht wie ein Fehler aus;
   dieser Streifen nennt den Grund UND den Weg zurueck. Er steht nur dann
   im Bild, wenn die Bremse wirklich greift (Klasse "on" aus mewa-map.js). */
.mewa-plate-hint {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 900;
    display: none;
    align-items: center;
    gap: 7px;
    background: rgba(17, 24, 39, 0.88);
    color: #fff;
    border-radius: 10px;
    padding: 7px 11px;
    font-family: 'DM Sans', -apple-system, system-ui, sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
    pointer-events: none;
}

    .mewa-plate-hint.on {
        display: flex;
    }

    .mewa-plate-hint i {
        font-size: 14px;
        opacity: 0.9;
    }

/* Die Notbremse nimmt AUSSCHLIESSLICH das Namensschild weg. Warnring und
   Anomalie-Zeichen bleiben stehen — eine Warnung darf nie an einer
   Anzeigeregel scheitern: wer den roten Wagen nicht mehr sieht, ruft auch
   nicht an. Wer hier spaeter aufraeumt, darf deshalb keine Regel bauen,
   die alle Kinder von .mewa-car-wrap ausblendet. */
.mewa-plates-off /* ✨ 09.09.2026 (Betreiber-Wunsch) — NOTRUF am Fahrzeug.
   Der Notruf sticht Panne und Anomalie aus: er ist der dringendste Zustand,
   den diese Karte kennt. Rot, groesser als die uebrigen Zeichen, und der
   ganze Wagen bekommt einen roten Hof, damit er aus fuenfzig Fahrzeugen
   heraussticht. */
.mewa-car-badge-sos {
    background: #DC2626;
    width: 19px;
    height: 19px;
    font-size: 11px;
    top: -4px;
    right: -4px;
}

.mewa-car-sos .mewa-car-img {
    filter: drop-shadow(0 0 6px rgba(220, 38, 38, .95)) drop-shadow(0 0 12px rgba(220, 38, 38, .6));
}

.mewa-car-sos .mewa-car-plate {
    border-color: #DC2626;
    font-weight: 700;
}
.mewa-car-badge {
    display: flex;
}

/* Anomaly Pulse Ring (außen)
   Die Durchsichtigkeit steckt jetzt allein in der Animation, die Farbe allein
   in der Variablen. Vorher war beides in einem rgba()-Wert verklebt und damit
   nur zusammen aenderbar. Der sichtbare Eindruck bleibt gleich: 0,35 Alpha mal
   0,7 Deckkraft der Animation ergaben rund 0,25 — genau der Wert, der jetzt
   im Bild der Animation steht. */
.mewa-car-pulse {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: var(--mewa-anomaly);
    animation: mewa-car-pulse 1.5s infinite;
    z-index: 0;
}

/* Anomaly Badge top-right */
.mewa-car-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 16px;
    height: 16px;
    background: var(--mewa-anomaly);
    color: #fff;
    border: 1.5px solid #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    z-index: 3;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Pulse-Animation */
@keyframes mewa-car-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.25;
    }

    50% {
        transform: scale(1.4);
        opacity: 0;
    }
}

/* ── Popup (voller Name beim Anklicken) ──────────────────────────────── */
.mewa-pop {
    font-family: 'DM Sans', -apple-system, system-ui, sans-serif;
    min-width: 160px;
}

.mewa-pop-name {
    font-size: 13.5px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 6px;
}

.mewa-pop-row {
    font-size: 12px;
    color: #4B5563;
    margin-top: 2px;
}

/* ✨ 09.09.2026 — Alter der Position im Popup. Frisch bleibt unauffaellig grau,
   veraltet (ueber 5 min, IsStale) wird bernstein und faellt damit auf: das ist
   die Auskunft, die vorher voellig fehlte. */
.mewa-pop-alter {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 5px;
    padding-top: 4px;
    border-top: 1px solid #E5E7EB;
    color: #6B7280;
    font-variant-numeric: tabular-nums;
}

.mewa-pop-alter.mewa-pop-alt-alt {
    color: #B45309;
    font-weight: 600;
}

/* Dieselbe Statuspille wird im Popup UND (ueber .mewa-st-*) in den Listen
   und Zaehlern der Seiten benutzt — eine Farbe, eine Quelle. */
.mewa-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--mewa-st-bg);
    color: var(--mewa-st-fg);
    font-size: 11.5px;
    font-weight: 700;
}

/* Tooltip-Styling subtle */
.leaflet-tooltip {
    background: rgba(11, 11, 11, 0.92) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 6px 10px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    font-family: 'DM Sans', -apple-system, sans-serif !important;
}

.leaflet-tooltip-top:before {
    border-top-color: rgba(11, 11, 11, 0.92) !important;
}

.leaflet-tooltip strong {
    color: #fff;
    font-size: 12px;
}

.leaflet-tooltip small {
    color: rgba(255, 255, 255, 0.85);
    font-size: 10px;
}