/* Burgermenü-Button pulsiert grün, solange der angemeldete Techniker ungelesene
   Benachrichtigungen hat (siehe MainLayout.razor) */
@keyframes menu-button-blink-green {
    0%, 100% { color: inherit; }
    50% { color: #10B981; }
}

.menu-button-blink-green {
    animation: menu-button-blink-green 1.2s ease-in-out infinite;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

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

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto 0 auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

code {
    color: #c02d76;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}
/* Die Zeile, auf die sich der Bereich unterhalb der Liste bezieht - das Bearbeitungsformular oder
   ein aufgeschlagener Unterbereich wie die Wartung eines Geräts. Ohne die Markierung ist nicht mehr
   erkennbar, welchen Eintrag man angeklickt hat, weil der Bereich weit unter der Liste steht.

   Transluzent statt einer festen Farbe, damit es auf hellem wie dunklem Untergrund funktioniert und
   die Zeilentrennung der Tabelle sichtbar bleibt. Der linke Balken trägt die Markierung auch dort,
   wo die Flächenfarbe im Kontrast untergeht. */
/* Der Selektor nennt zusätzlich die MudBlazor-Zeilenklasse: Deren eigene Regeln für Zeilen und
   Hover-Zustand sind spezifischer als eine einzelne Klasse und überstimmten die Markierung sonst -
   sichtbar besonders in Tabellen innerhalb eines Dialogs. */
.mud-table-row.zeile-hervorgehoben > td,
.zeile-hervorgehoben > td {
    background-color: rgba(37, 99, 235, 0.14);
}

/* Auch beim Überfahren bestehen bleiben: Sonst verschwindet gerade dann die Markierung, wenn der
   Zeiger auf der Zeile steht, die man bearbeitet. */
.mud-table-hover .mud-table-row.zeile-hervorgehoben:hover > td {
    background-color: rgba(37, 99, 235, 0.22);
}

.mud-table-row.zeile-hervorgehoben > td:first-child,
.zeile-hervorgehoben > td:first-child {
    box-shadow: inset 3px 0 0 0 var(--mud-palette-primary);
}

/* Dauerhafte Beschriftung der Kartenpunkte (siehe js/fahrerkarte.js). Ohne eigenen Stil malt Leaflet
   eine Sprechblase mit Rahmen - bei vielen Kunden nebeneinander wird die Karte davon unlesbar. */
.leaflet-tooltip.karte-label {
    background: rgba(255, 255, 255, 0.85);
    border: none;
    box-shadow: none;
    color: #222;
    font-size: 12px;
    font-weight: 600;
    padding: 1px 5px;
}

.leaflet-tooltip.karte-label::before {
    display: none;
}

/* Anmeldebildschirm: Das Logo des Labors füllt den Hintergrund (siehe Login.razor und
   SystembildController). Es liegt fest hinter dem Inhalt, wird auf die Fläche eingepasst statt
   beschnitten und leicht abgeblendet - sonst kämpfen Logo und Eingabefelder um Aufmerksamkeit.
   Fehlt das Bild, liefert die Adresse 404 und der Browser zeigt schlicht nichts an. */
.anmelde-hintergrund {
    position: fixed;
    inset: 0;
    background-image: url("/api/systembild/anmeldehintergrund");
    background-repeat: no-repeat;
    background-position: center;
    /* Gestreckt ist die Vorgabe; "eingepasst" wählt man in den Einstellungen, wenn das Logo
       vollständig zu sehen sein soll (siehe SystembildController.Darstellung). */
    background-size: cover;
    opacity: 0.18;
    pointer-events: none;
    z-index: 0;
}

.anmelde-karte {
    position: relative;
    z-index: 1;
}

/* Dasselbe Bild auf den Arbeitsseiten - deutlich blasser als auf dem Anmeldeschirm, weil dort
   Tabellen und Formulare darüber liegen und lesbar bleiben müssen. */
.app-hintergrund {
    position: fixed;
    inset: 0;
    background-image: url("/api/systembild/anmeldehintergrund");
    background-size: cover;
    background-position: center;
    opacity: 0.06;
    pointer-events: none;
    z-index: 0;
}

.logo-eingepasst .app-hintergrund {
    background-size: contain;
    background-repeat: no-repeat;
}

/* Vom Startskript in index.html gesetzt, wenn in den Einstellungen "einpassen" gewählt ist. */
.logo-eingepasst .anmelde-hintergrund {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}