html, body {
    margin: 0;
    padding: 0;
}

/* Never constrain the width of a Mud element that owns a popover: it hands the constraint down to
   the popover, which then clips its own content (a calendar needs 310px per displayed month, and a
   date range shows two). Constrain the surrounding container instead — the field follows it while
   the popover stays free. This rule is the safety net for the popover itself, so an opened picker
   keeps its content width even where a constraint slips through. */
.mud-picker-open {
    width: max-content;
    max-width: none;
}

#blazor-error-ui {
    background: #fff3cd;
    color: #664d03;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, .2);
    display: none;
    left: 0;
    padding: 0.75rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1200;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* ---------------------------------------------------------------------------------------------------------------
   Das Raster der Startseite.

   Die Zelle ist ein Rechteck im Verhältnis 1 : √2, quer gelegt. Daraus wird die Zeilenhöhe gerechnet:
   Spaltenbreite geteilt durch √2. Damit ergeben die drei angebotenen Größen dieselbe Leiter wie die
   DIN-A-Formate — eine Zelle quer (√2 : 1), zwei Zellen untereinander hoch (1 : √2), vier Zellen quer
   (√2 : 1). Jeder Schritt verdoppelt die Fläche, das Verhältnis bleibt, die Ausrichtung wechselt. Nur bei
   diesem Verhältnis führt das Verdoppeln auf dieselbe Form zurück, und deshalb kommen alle drei Größen mit
   *einer* Zeilenhöhe aus (siehe DashboardTileFormat).

   Gemessen wird über `cqw` und nicht über Prozente: Ein Prozentwert in `grid-auto-rows` bezieht sich auf die
   *Höhe* des Rasters, und die steht hier gerade nicht fest — sie ist ja das Ergebnis. Dafür trägt der Rahmen
   `container-type: inline-size`, womit 100cqw genau die Rasterbreite ist. Das ersetzt ein Messen im Browser
   und damit einen JS-Baustein, der bei jeder Fensteränderung nachrechnen müsste.

   Die Spaltenzahl fällt mit der Breite, und in einer einzigen Spalte kann nichts zwei Spalten breit sein —
   sonst legte das Raster eine zweite, unsichtbare Spalte an und alles darin wäre halb so breit. Deshalb wird
   „groß" dort auf eine Spalte zurückgenommen; die doppelte Höhe behält es.
   --------------------------------------------------------------------------------------------------------------- */
.vera-dashboard-frame {
    container-type: inline-size;
}

.vera-dashboard {
    --vera-tile-cols: 4;
    --vera-tile-gap: 16px;
    --vera-tile-ratio: 1.41421356;
    display: grid;
    grid-template-columns: repeat(var(--vera-tile-cols), minmax(0, 1fr));
    grid-auto-rows: calc((100cqw - (var(--vera-tile-cols) - 1) * var(--vera-tile-gap)) / var(--vera-tile-cols) / var(--vera-tile-ratio));
    /* Dicht, damit eine kleine Kachel die Lücke neben einer hohen füllt statt sie offen zu lassen. */
    grid-auto-flow: row dense;
    gap: var(--vera-tile-gap);
}

@container (max-width: 1000px) {
    .vera-dashboard {
        --vera-tile-cols: 2;
    }
}

@container (max-width: 560px) {
    .vera-dashboard {
        --vera-tile-cols: 1;
    }

    .vera-tile-large {
        grid-column: span 1;
    }
}

/* Die Kachel ist das Rasterelement. `min-width/height: 0` ist nicht Kosmetik: Ohne beides wächst ein
   Rasterelement über seine Zelle hinaus, sobald sein Inhalt breiter oder höher ist — eine Liste würde die
   Kachel aufziehen statt in ihr zu rollen, und die ganze Zeile mit. */
.vera-tile {
    display: flex;
    min-width: 0;
    min-height: 0;
    grid-column: span 1;
    grid-row: span 1;
}

.vera-tile-medium {
    grid-row: span 2;
}

.vera-tile-large {
    grid-column: span 2;
    grid-row: span 2;
}

.vera-tile > .mud-paper {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    /* Der Inhalt wird an der Rundung beschnitten und nicht darüber hinaus gemalt. */
    overflow: hidden;
}

.vera-tile-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 8px 2px 10px;
    flex: 0 0 auto;
}

/* Die Überschrift weicht als Erstes: In der kleinen Kachel ist die Kopfzeile schmal, und Griff und Menü sind
   Bedienung — sie dürfen nicht von einem langen Titel hinausgeschoben werden. */
.vera-tile-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vera-tile-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0 12px 10px 12px;
}

.vera-tile-grip {
    display: inline-flex;
    cursor: grab;
    color: var(--mud-palette-text-secondary);
    /* Sonst wischt ein Ziehen auf dem Tablet die Seite. */
    touch-action: none;
}

.vera-tile-grip:active {
    cursor: grabbing;
}

/* Die gezogene Kachel tritt zurück, das Ziel wird umrissen. Der Umriss liegt innen (`outline-offset: -2px`),
   damit er die Nachbarkachel nicht überlappt und das Raster nicht um zwei Bildpunkte springt. */
.vera-tile-dragging {
    opacity: .45;
}

.vera-tile-over > .mud-paper {
    outline: 2px dashed var(--mud-palette-secondary);
    outline-offset: -2px;
}

/* ---------------------------------------------------------------------------------------------------------------
   Die Batteriekachel.

   Schilderzeile fest, Liste rollend: Die Zusammenfassung ist das, was in jeder Größe stehen bleiben muss — sie
   zählt den ganzen Fuhrpark, während die Liste nur zeigt, was gerade hineinpasst.

   In der großen Kachel stehen die Geräte in zwei Spalten. Die Trennlinie hängt an der Zeile selbst und nicht an
   einem eingeschobenen Element: In einem zweispaltigen Raster wäre eine eigene Trennlinie ein weiteres
   Rasterelement und rutschte in die nächste Zelle.
   --------------------------------------------------------------------------------------------------------------- */
.vera-battery {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.vera-battery-summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    flex: 0 0 auto;
}

.vera-battery-rows {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.vera-battery-rows-two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 20px;
    /* Sonst zieht das Raster wenige Zeilen auf die ganze Höhe auseinander. */
    align-content: start;
}

.vera-battery-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.vera-battery-row:last-child {
    border-bottom: none;
}

/* Der Mittelteil gibt nach, die Zahl rechts nicht: Ein langer Gerätename darf den Ladezustand nicht aus der
   Kachel schieben — er ist der Grund, warum man hinsieht. */
.vera-battery-main {
    flex: 1 1 auto;
    min-width: 0;
}

.vera-battery-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vera-battery-value {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex: 0 0 auto;
}

/* Die gewählte Zeile in der Auswertung. Über eine Klasse und nicht über MudBlazors Mehrfachauswahl: Gewählt wird
   durch einen Klick auf die Zeile, und ein Auswahlkästchen je Zeile wäre ein zweites, kleineres Ziel für dieselbe
   Handlung — es nimmt der Liste nur Platz weg.

   Drei Dinge daran sind erkauft und sollten so bleiben:

   · **Zeile und Zellen tragen die Tönung.** MudBlazor rechnet mit `border-collapse: separate` (bei
     `border-spacing: 0`), und dabei malt eine Zelle mit eigener Fläche über die ihrer Zeile. Eine Tönung, die nur
     an einem der beiden hängt, ist deshalb je nach Zelle sichtbar oder nicht — sichtbar wurde das an der
     feststehenden Werkzeugspalte, die eine eigene Fläche braucht (siehe unten) und die Markierung rechts abschnitt.
   · **Deckend gemischt statt durchsichtig getönt.** Eine durchsichtige Tönung wäre für die feststehende Spalte
     unbrauchbar (das seitlich Durchlaufende schiene hindurch), und die zarte Standardfläche für „überfahren" war als
     Markierung einer Auswahl kaum zu erkennen. `color-mix` mit der Sekundärfarbe trägt die Farbe der Anwendung und
     rechnet in beiden Erscheinungsbildern richtig, weil es mit der Fläche mischt und nicht mit Weiß.
   · **Der Balken links sitzt nur an der ersten Zelle.** An allen zöge er vier Striche durch die Zeile.

   Die beiden Flächen stehen als eigene Eigenschaften an der Liste: Sie werden an drei Stellen gebraucht (Zeile,
   Zellen, feststehende Werkzeugspalte), und drei Schreibweisen derselben Mischung würden auseinanderlaufen. */
.vera-recordings {
    --vera-row-hover: color-mix(in srgb, var(--mud-palette-secondary) 6%, var(--mud-palette-surface));
    --vera-row-chosen: color-mix(in srgb, var(--mud-palette-secondary) 14%, var(--mud-palette-surface));
}

.vera-row-selected {
    background-color: var(--vera-row-chosen);
}

.vera-row-selected > td:first-child {
    box-shadow: inset 3px 0 0 0 var(--mud-palette-secondary);
}

/* Ein Text mit Merkmalsymbolen dahinter — der Tourname und der Zeitraum in der Aufzeichnungsliste.

   Die zweite Regel ist der Grund, warum es diese Klasse gibt: MudBlazor zeichnet ein Symbol als `inline-block`-SVG,
   und der Träger des Kurzhinweises ist ebenfalls `inline-block`. Damit sitzt das Symbol auf der Schriftlinie seines
   eigenen Zeilenkastens, und unter ihm bleibt der Platz der Unterlängen leer — der Kasten ist höher als das Symbol,
   und zentriert man ihn, steht das Symbol sichtbar zu hoch. Ein Flexkasten hat keine Schriftlinie, damit fällt der
   Leerraum weg und das Symbol liegt auf der Zeile des Textes. */
.vera-badges {
    display: flex;
    align-items: center;
    gap: 6px;
}

.vera-badges .mud-tooltip-root {
    display: inline-flex;
    align-items: center;
}

/* Die Werkzeugspalte der Aufzeichnungsliste bleibt am rechten Rand stehen, während die übrigen Spalten darunter
   durchlaufen. Grund: Der Splitter kann schmal gezogen werden, und eine Schaltfläche, die man erst durch seitliches
   Rollen findet, ist in einer Liste keine — die anderen Spalten dürfen dafür abgeschnitten werden.

   Die Zelle muss deckend sein, sonst scheint das seitlich Durchlaufende hindurch. Damit sie die Tönung ihrer Zeile
   nicht abschneidet, bekommt sie jede Lage ausdrücklich: MudBlazor färbt beim Überfahren die *Zeile*, und eine Zelle
   mit eigener Fläche erbt das nicht. Deshalb wird auch das Überfahren an den Zellen nachgezogen — sonst bräche
   dieselbe Tönung an derselben Stelle ab, nur beim Zeigen statt beim Wählen.

   Die Reihenfolge dieser Regeln ist die Rangfolge: „gewählt" steht hinter „überfahren" und gewinnt damit den
   Gleichstand — eine gewählte Zeile soll unter dem Zeiger nicht ihre Markierung verlieren. Den Kopf der Spalte
   versorgt MudBlazor selbst (feststehender Kopf: gleiche Fläche, höhere Ebene). */
.vera-cell-tools {
    position: sticky;
    right: 0;
    z-index: 1;
    background-color: var(--mud-palette-surface);
}

.vera-recordings .mud-table-body .mud-table-row:hover > td {
    background-color: var(--vera-row-hover);
}

.vera-recordings .mud-table-body .vera-row-selected > td {
    background-color: var(--vera-row-chosen);
}

/* Marken auf der Karte: Aktivitätswechsel sowie Anfang und Ende einer Aufzeichnung. Der weiße Rand hebt sie
   von den Stützpunkten ab, die dieselbe Farbe tragen können. */
.vera-map-marker {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
}

.vera-map-marker svg {
    width: 16px;
    height: 16px;
    fill: #ffffff;
}

/* Der Kurzhinweis am Stützpunkt. Bewusst schmal und ohne Überschrift — er soll die Karte nicht verdecken. */
.vera-map-popup .mapboxgl-popup-content {
    padding: 6px 9px;
    border-radius: 8px;
    font-size: .78rem;
    line-height: 1.35;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
}

.vera-map-tip-head {
    font-weight: 600;
    margin-bottom: 2px;
}

.vera-map-tip-label {
    color: #616161;
}

/* ---------------------------------------------------------------------------------------------------------------
   Eigene Bedienelemente auf der Karte.

   Sie tragen die Klassen von Mapbox (.mapboxgl-ctrl-group) und übernehmen damit Hintergrund, Rundung, Schatten und
   die Trennlinien zwischen den Schaltflächen. Hier steht nur, was Mapbox nicht wissen kann: dass unsere Symbole
   SVG-Elemente sind statt Hintergrundbilder, und wie eine eingerastete Schaltfläche aussieht.
   --------------------------------------------------------------------------------------------------------------- */
.vera-map-ctrl-stack {
    position: absolute;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    /* Der Behälter selbst fängt keine Klicks ab, nur die Steuerungen darin — sonst läge über der halben Karte eine
       unsichtbare Fläche, auf der sich nicht mehr schieben und zoomen ließe. */
    pointer-events: none;
}

.vera-map-ctrl-stack > * {
    pointer-events: auto;
}

/* Zwei Gruppen nebeneinander, jede wächst für sich nach unten.

   Über Flex und ausdrücklich nicht über feste Abstände: Ein zweiter Block mit eigenem `top` wird von der
   aufgeklappten ersten Gruppe überdeckt, sobald sie wächst — genau das war der vorige Versuch. In einer Zeile
   kann das nicht passieren, weil die Gruppen nebeneinander liegen und `align-items: flex-start` sie oben hält. */
.vera-map-ctrl-line {
    flex-direction: row;
}

/* Rechts wird von der rechten Kante her gemessen und die Spalte richtet sich dorthin aus. */
.vera-map-ctrl-right {
    right: 10px;
    align-items: flex-end;
}

.vera-map-ctrl {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mapboxgl-ctrl-group .vera-map-ctrl .mud-icon-root {
    width: 18px;
    height: 18px;
    color: #333333; /* wie die Symbole von Mapbox, die als dunkles SVG im Hintergrundbild stecken */
}

/* Eingerastet: eine Tönung und die Sekundärfarbe im Symbol. Bewusst nicht eine gefüllte, bunte Fläche — die
   Schaltfläche soll wie eine eingerastete Standardschaltfläche wirken und nicht wie ein Fremdkörper. */
.vera-map-ctrl-on {
    background-color: rgba(0, 0, 0, .08);
}

.mapboxgl-ctrl-group .vera-map-ctrl-on .mud-icon-root {
    color: var(--mud-palette-secondary);
}

/* Die Auswahl der Kartengrundlage: nach links auf, weil die Steuerung am rechten Rand sitzt. */
.vera-map-popover {
    position: absolute;
    top: 0;
    right: 39px;
    min-width: 140px;
    background: var(--mud-palette-surface);
}

.vera-map-popover-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 6px;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
}

.vera-map-popover-row:hover {
    background: var(--mud-palette-action-default-hover);
}

.vera-map-popover-row-chosen {
    background: var(--mud-palette-action-default-hover);
    font-weight: 600;
}

/* Die Legende liegt frei auf der Karte. Ihre Anfangsstelle steht hier und nicht als Inline-Stil: Verschoben wird sie
   vom Browser (siehe veraMap.attachLegendDrag), und der schreibt dann left/top — so streiten Blazor und Skript
   nicht um dasselbe Attribut. */
.vera-map-legend {
    position: absolute;
    left: 10px;
    bottom: 34px;
    z-index: 3;
    width: 180px;
    max-height: 55%;
    overflow: auto;
    padding: 6px 8px;
    border-radius: 6px;
    background: var(--mud-palette-surface);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, .1);
}

.vera-map-legend-head {
    display: flex;
    align-items: center;
    gap: 4px;
}

.vera-map-legend-grip {
    display: inline-flex;
    cursor: move;
    color: var(--mud-palette-text-secondary);
    touch-action: none;
}

.vera-map-legend-grip .mud-icon-root {
    width: 15px;
    height: 15px;
}

.vera-map-notice {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    max-width: min(360px, calc(100% - 40px));
}

/* Eine Wechselmarke in der Nachbearbeitung: Sie lässt sich ziehen, und das muss man ihr ansehen. Anfang und Ende
   einer Aufzeichnung bekommen diese Klasse nicht — sie sind Messungen des Geräts und keine Auslegung. */
.vera-map-marker-draggable {
    cursor: grab;
}

.vera-map-marker-draggable:active {
    cursor: grabbing;
}

/* ---------------------------------------------------------------------------------------------------------------
   Die Werkzeugleiste der Nachbearbeitung: Zeitgrenzen · Stand · Verwenden · Speichern als eine Schaltflächengruppe.

   Der Standwähler ist ein MudMenu und damit eine Schaltfläche — nur so fügt er sich in die Gruppe ein (ein
   Eingabefeld bringt eigenen Rahmen und schwebende Beschriftung mit). Er bekommt eine feste Breite, weil sein Text
   zwischen „Rohdaten (Gerät)" und „Revision 3" wechselt: Ohne sie wandert alles rechts davon unter dem Zeiger weg.
   Die Beschriftung steht links, der Pfeil rechts.

   Absteigender Selektor und kein Kindselektor: MudBlazor legt zwischen `.mud-menu` und die Schaltfläche noch einen
   Träger (`.mud-menu-activator` mit `display:contents`). Die Einträge des Menüs trifft er trotzdem nicht — die
   stehen in einem Überlager am Ende des Dokuments und nicht in diesem Zweig.
   --------------------------------------------------------------------------------------------------------------- */
.vera-version-menu .mud-button-root {
    width: 190px;
    justify-content: space-between;
}

/* ---------------------------------------------------------------------------------------------------------------
   Der Zeitstrahl der Nachbearbeitung.

   Alle Stellen sind Prozentwerte der Breite: Die Spur stellt das Zeitfenster der Aufzeichnung dar, und dann kostet
   eine Größenänderung des Fensters keine Neuberechnung — weder in C# noch im Browser. Während des Ziehens schreibt
   vera-timeline.js genau dieselben Prozentwerte, die Blazor beim nächsten Rendern verbindlich setzt.
   --------------------------------------------------------------------------------------------------------------- */
.vera-timeline {
    position: relative;
    /* Die Beschriftung der Griffe liegt über der Spur und die Auswahl darüber; beides darf nicht abgeschnitten
       werden. */
    padding-top: 20px;
}

.vera-timeline-track {
    position: relative;
    /* Hoch genug, dass das Fahrtenschreiberprofil eine Form hat: An ihr liest man ab, ob gesammelt oder
       transportiert wurde, und dafür braucht es mehr als einen Streifen. */
    height: 78px;
    border-radius: 6px;
    background: var(--mud-palette-background-gray);
    overflow: visible;
    touch-action: none; /* sonst wischt ein Zeigerziehen auf dem Tablet die Seite */
}

/* Das Profil füllt die Spur und wird auf ihre Breite gestreckt (preserveAspectRatio="none"): Damit sind alle
   Stellen darin Werte im Koordinatensystem und müssen bei einer Fensteränderung nicht neu gerechnet werden. */
.vera-timeline-profile {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 6px;
    pointer-events: none; /* der Klick gehört den Abschnittsflächen darüber */
}

.vera-timeline-grid {
    stroke: var(--mud-palette-lines-default);
    stroke-width: 1;
    stroke-dasharray: 4 4;
    vector-effect: non-scaling-stroke; /* sonst zöge die Streckung die Linie in die Breite */
}

.vera-timeline-scale {
    position: absolute;
    top: 1px;
    left: 4px;
    font-size: .6rem;
    line-height: 1;
    color: var(--mud-palette-text-secondary);
    pointer-events: none;
}

/* Ein Abschnitt liegt als durchsichtige Fläche über dem Profil: Er trägt den Klick, zeichnet unten einen farbigen
   Streifen und legt einen zarten Schleier über sein Stück. Der Streifen ist das Entscheidende — ein Abschnitt, in
   dem das Fahrzeug nur stand, hat keinen Balken und wäre sonst unsichtbar. */
.vera-timeline-segment {
    position: absolute;
    top: 0;
    height: 100%;
    display: flex;
    align-items: flex-start;
    overflow: hidden;
    cursor: pointer;
    box-sizing: border-box;
}

.vera-timeline-segment:first-of-type {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

.vera-timeline-segment:last-of-type {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

/* Die Beschriftung in der Farbe der Aktivität auf hellem Grund: Weiß mit Schatten war über einem flächigen Balken
   richtig, über einem Profil mit Lücken wäre es stellenweise unlesbar. */
.vera-timeline-segment-label {
    margin: 2px 0 0 4px;
    padding: 0 4px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--mud-palette-surface) 82%, transparent);
    font-size: .66rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    pointer-events: none;
}

/* Der Griff ist breiter als der Strich, den man sieht: Ein Wechsel muss anfassbar bleiben, auch wenn die
   Abschnitte links und rechts nur wenige Pixel breit sind. Er reicht über die Spur hinaus — oben die Uhrzeit,
   unten der Knopf zum Entfernen. */
.vera-timeline-handle {
    position: absolute;
    top: -18px;
    bottom: -20px;
    width: 20px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: ew-resize;
    touch-action: none;
}

.vera-timeline-handle-time {
    font-size: .62rem;
    line-height: 1;
    padding: 1px 3px;
    border-radius: 3px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    white-space: nowrap;
    pointer-events: none;
}

.vera-timeline-handle-grip {
    flex: 1 1 auto;
    width: 3px;
    margin-top: 2px;
    border-radius: 2px;
    background: var(--mud-palette-text-primary);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .8);
}

/* Hervorgehoben wird der Griff unter dem Zeiger und der, der gerade gezogen wird — beides an ihm selbst und nicht
   am Strahl: Eine Klasse am Strahl träfe jeden Griff darin und zeigte damit gerade nicht, welcher gemeint ist. */
.vera-timeline-handle:hover .vera-timeline-handle-grip,
.vera-timeline-handle-active .vera-timeline-handle-grip {
    background: var(--mud-palette-secondary);
    width: 5px;
}

/* Die runden Knöpfe am Strahl: „−" unter einem bestehenden Wechsel, „+" über der vorläufigen Trennlinie. Oben
   hinzufügen, unten entfernen — die Richtung allein sagt schon, was geschieht. */
.vera-timeline-round {
    display: inline-flex;
    padding: 0;
    font: inherit;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    border-radius: 50%;
    cursor: pointer;
    background: var(--mud-palette-surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}

.vera-timeline-round .mud-icon-root {
    width: 13px;
    height: 13px;
}

/* Gefüllt in der Farbe des Griffs, mit weißem Minus: Der Knopf ist das untere Ende derselben Trennlinie und soll
   auch so aussehen — ein roter Ring daneben hätte ihn zu einem eigenen Ding gemacht. Rot wird er erst beim Zeigen,
   denn dann geht es tatsächlich um das Entfernen. */
.vera-timeline-round-remove {
    margin-top: 2px;
    border: 1px solid var(--mud-palette-surface);
    background: var(--mud-palette-text-primary);
    color: var(--mud-palette-surface);
}

.vera-timeline-round-remove:hover {
    background: var(--mud-palette-error);
    color: var(--mud-palette-error-text);
}

.vera-timeline-round-add {
    margin-bottom: 2px;
    border: 1px solid var(--mud-palette-secondary);
    color: var(--mud-palette-secondary);
}

.vera-timeline-round-add:hover {
    background: var(--mud-palette-secondary);
    color: var(--mud-palette-secondary-text);
}

/* Die vorläufige Trennlinie unter dem Zeiger. Vom Stylesheet verborgen; der Browser blendet sie ein und setzt ihre
   Stelle (siehe vera-timeline.js). Gestrichelt und in der Sekundärfarbe, damit sie sich von den bestehenden
   Wechseln unterscheidet — sie ist ein Vorschlag, kein Zustand. */
.vera-timeline-insert {
    display: none;
    position: absolute;
    top: -18px;
    bottom: 0;
    width: 20px;
    transform: translateX(-50%);
    flex-direction: column;
    align-items: center;
    pointer-events: none; /* die Linie fängt nichts ab; nur das Pluszeichen ist anklickbar */
}

.vera-timeline-insert-line {
    flex: 1 1 auto;
    width: 0;
    border-left: 2px dashed var(--mud-palette-secondary);
}

.vera-timeline-insert .vera-timeline-round-add {
    pointer-events: auto;
}

/* Die eingerastete Trennlinie, solange die Aktivität dafür gewählt wird: durchgezogen und gefüllt statt gestrichelt
   und offen. Aus einem Vorschlag ist eine Festlegung geworden — man soll beim Wählen sehen, wo geteilt wird. */
.vera-timeline-pinned {
    position: absolute;
    top: -18px;
    bottom: 0;
    width: 20px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
}

.vera-timeline-pinned-line {
    flex: 1 1 auto;
    width: 2px;
    background: var(--mud-palette-secondary);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .8);
}

.vera-timeline-round-pinned {
    margin-bottom: 2px;
    border: 1px solid var(--mud-palette-surface);
    background: var(--mud-palette-secondary);
    color: var(--mud-palette-secondary-text);
    cursor: default;
}

.vera-timeline-axis {
    position: relative;
    height: 14px;
    /* Platz für die Knöpfe, die unter der Spur hängen. */
    margin-top: 22px;
}

.vera-timeline-tick {
    position: absolute;
    transform: translateX(-50%);
    font-size: .62rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.vera-timeline-tick::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -3px;
    width: 1px;
    height: 3px;
    background: var(--mud-palette-lines-default);
}

/* Die Auswahl eines Abschnitts. Sie öffnet nach oben über die Karte: Unter dem Strahl ist kein Platz, und über ihm
   verdeckt sie nur einen Teil der Fläche, die man ohnehin gerade nicht bearbeitet. */
/* Vollständig oberhalb des Strahls und nicht ein Stück darüber gelegt: Sonst verdeckte sie genau das, worauf sie
   sich bezieht — die eingerastete Trennlinie und die Uhrzeiten der Wechsel. */
.vera-timeline-picker {
    position: absolute;
    bottom: calc(100% + 4px);
    transform: translateX(-50%);
    z-index: 5;
    width: 240px;
}

.vera-timeline-picker-list {
    max-height: 168px;
    overflow-y: auto;
}

.vera-timeline-picker-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 4px;
    border-radius: 4px;
    cursor: pointer;
}

.vera-timeline-picker-row:hover {
    background: var(--mud-palette-action-default-hover);
}

.vera-timeline-picker-row-chosen {
    background: var(--mud-palette-action-default-hover);
    box-shadow: inset 2px 0 0 0 var(--mud-palette-secondary);
}

.vera-timeline-backdrop {
    position: fixed;
    inset: 0;
    z-index: 4;
}

/* ---------------------------------------------------------------------------------------------------------------
   Die Flottenkachel der Startseite.

   Die Karte braucht eine gemessene Höhe. Sie steht hier als `flex: 1 1 auto` in einer Kachel, deren Höhe das
   Raster vorgibt (siehe „Das Raster der Startseite") — deshalb `min-height: 0` an den Vorfahren: Ohne das wächst
   ein Flexkind über seinen Kasten hinaus, und die Kachel zieht die ganze Rasterzeile auf.
   --------------------------------------------------------------------------------------------------------------- */
.vera-fleet {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    gap: 4px;
}

.vera-fleet-head-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

/* Die Breite trägt der Behälter und nicht das Auswahlfeld: Ein MudSelect mit eigener Breite gibt sie an sein
   Überlager weiter, und dann schneidet die Projektliste ihre eigenen Einträge ab. */
.vera-fleet-project {
    width: 180px;
    max-width: 55%;
}

.vera-fleet-map-frame {
    position: relative;
    flex: 1 1 auto;
    min-height: 140px;
    border-radius: 10px;
    overflow: hidden;
}

.vera-fleet-map {
    position: absolute;
    inset: 0;
}

/* Die Geräteliste unter der Karte. In der großen Kachel zweispaltig, damit die zusätzliche Breite den Geräten
   zugutekommt und nicht dem Leerraum. */
.vera-fleet-list {
    flex: 0 0 auto;
    max-height: 30%;
    overflow: auto;
}

.vera-fleet-list-two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
    align-content: start;
}

.vera-fleet-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
}

.vera-fleet-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Der Punkt in der Liste trägt die Farbe des Schweifs auf der Karte — das ist die einzige Verbindung zwischen
   Liste und Karte, und sie muss ohne Beschriftung tragen. Ein schweigendes Gerät erscheint blass. */
.vera-fleet-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 auto;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .25);
}

/* Die Spitze eines Schweifs. Der Pfeil dreht mit der Karte (rotationAlignment: 'map'), zeigt also in die
   Fahrtrichtung im Gelände. Steht das Fahrzeug, wird daraus ein Punkt — ein Pfeil ohne Richtung wäre eine
   Behauptung. */
.vera-fleet-head {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45));
}

.vera-fleet-head svg {
    width: 26px;
    height: 26px;
}

.vera-fleet-head-still {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #FFFFFF;
}

/* Das Auswahlrechteck der Nachbearbeitung. Ein Aufsatz über der Leinwand und keine Kartenebene: Es wird in
   Bildschirmpunkten aufgezogen, und genau das soll es bleiben, wenn die Karte darunter zoomt. */
.vera-map-box {
    position: absolute;
    border: 2px dashed var(--mud-palette-primary, #1976d2);
    background: rgba(25, 118, 210, .12);
    pointer-events: none;
    z-index: 3;
}