.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;
}
/* ---------------------------------------------------------------------------
   Splash shown inside #app until the Blazor runtime replaces it. Deliberately
   plain CSS with the corporate colors baked in: at this point neither MudBlazor
   nor the theme is running yet, and the first frame should already look like
   the product.
   --------------------------------------------------------------------------- */
.vera-splash {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .9rem;
    background: #F5F7F9;
    color: #17242E;
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
}

.vera-splash-mark {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    background: #007F44;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 24px rgba(0, 127, 68, .28);
}

.vera-splash-mark img {
    width: 48px;
    height: 48px;
}

.vera-splash-name {
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: .3px;
}

/* Indeterminate bar — the download has no reliable percentage worth showing. */
.vera-splash-bar {
    width: 168px;
    height: 4px;
    border-radius: 999px;
    background: #E2E8EE;
    overflow: hidden;
}

.vera-splash-bar span {
    display: block;
    width: 40%;
    height: 100%;
    border-radius: 999px;
    background: #007F44;
    animation: vera-splash-slide 1.4s ease-in-out infinite;
}

@keyframes vera-splash-slide {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(250%); }
}

.vera-splash-hint {
    font-size: .82rem;
    color: #5B6B7A;
}

@media (prefers-color-scheme: dark) {
    .vera-splash {
        background: #14171B;
        color: #E6EBF0;
    }

    .vera-splash-bar {
        background: #2C333A;
    }

    .vera-splash-hint {
        color: #9AA7B4;
    }
}

/* ---------------------------------------------------------------------------------------------------------------
   Die Navigationsleiste: Wortmarke und Doodle-Band. Wortgleich mit der Verwaltungsoberfläche, damit beide
   Anwendungen wie ein Erzeugnis aussehen — nur der Bildpfad geht eine Ebene höher, weil dieses Stylesheet
   unter css/ liegt.

   Die Wortmarke trägt den Produktnamen mit, deshalb steht daneben kein Titeltext. Sie ist weiß auf
   durchsichtigem Grund und liegt damit sowohl auf dem Hausgrün des hellen als auch auf dem Dunkelgrau des
   dunklen Erscheinungsbilds richtig. Im Markup erscheint sie nur, solange keine Tour läuft.

   Das Doodle-Band ist eine *Maske* und kein Hintergrundbild. Die Datei ist bereits weiße Strichzeichnung auf
   durchsichtigem Grund; als Maske gibt sie nur die Form vor, und die Farbe kommt aus `currentColor` — das ist
   an der Leiste die Textfarbe des Themas. Damit stimmt die Tönung in beiden Erscheinungsbildern, ohne eine
   zweite, weicher gezeichnete Bilddatei. Gekachelt wird waagerecht auf voller Leistenhöhe: Das Band ist 16:1,
   und auf einem Tablet in der Breite bliebe eine einzelne Kachel sonst weit vor dem rechten Rand stehen.
   --------------------------------------------------------------------------------------------------------------- */
.vera-appbar-brand {
    display: flex;
    align-items: center;
    /* Nicht schrumpfen: In der Werkzeugleiste ist ein Bild ein Flex-Element wie jedes andere und würde
       zusammengeschoben, sobald rechts Designwechsel und Abmelden Platz fordern. */
    flex: 0 0 auto;
    width: 208px;
}

/* Das Piktogramm von INFA.Vera in der runden Marke der Anmeldekarte. Weiß auf durchsichtigem Grund — die Farbe
   kommt von der Marke, die es trägt. */
.vera-pictogram {
    width: 66%;
    height: 66%;
    object-fit: contain;
}

.vera-appbar-logo {
    display: block;
    height: 40px;
    width: auto;
    flex: 0 0 auto;
}

/* Benutzername und Tenant stehen untereinander und werden als eine Angabe gelesen: wer bin ich, wo bin
   ich. Die Zeilenhöhe ist gedrückt, damit beide zusammen in die Leiste passen, ohne sie höher zu machen.

   Gedämpft wird über die Deckkraft und nicht über eine eigene Farbe: In der Leiste gilt die Textfarbe des
   Themas, und die ist im hellen und im dunklen Erscheinungsbild verschieden — eine feste Farbe wäre in
   einem von beiden falsch. */
.vera-appbar-identity {
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.25;
}

.vera-appbar-tenant {
    opacity: .72;
}

/* `inset: 0` braucht keinen eigenen Bezugsrahmen: MudBlazor gibt der Leiste `position: relative`. */
.vera-appbar::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    /* Der Schleier fängt nichts ab — darunter liegen Designwechsel, Tour beenden und Abmelden. */
    pointer-events: none;
    background-color: currentColor;
    opacity: .16;
    -webkit-mask-image: url("../images/vera-doodle-banner.png");
    mask-image: url("../images/vera-doodle-banner.png");
    -webkit-mask-size: auto 100%;
    mask-size: auto 100%;
    -webkit-mask-repeat: repeat-x;
    mask-repeat: repeat-x;
}

/* Ohne diese Regel malt das Überlager über den Inhalt statt hinter ihn: Ein absolut gesetztes Pseudoelement
   liegt in der Ebene der positionierten Nachfahren, die Werkzeugleiste selbst ist unpositioniert und damit
   darunter. Erst mit eigener Ebene liegen Wortmarke, Tourname und Schaltflächen wieder obenauf. */
.vera-appbar > .mud-toolbar {
    position: relative;
    z-index: 1;
}

/* ---------------------------------------------------------------------------------------------------------------
   Zeilenhöhen der Eingabefelder. MudBlazor bemisst sie für Roboto: den Feldinhalt mit `line-height: 1.1876em` und
   die Beschriftung mit `line-height: 1.15rem`, beides knapp über Robotos eigener Zeilenhöhe (rund 1.17em). Segoe UI,
   die erste Schrift des Themas, braucht rund 1.33em. Die Beschriftung schneidet mit `overflow: hidden` alles ab,
   was über ihre Zeile hinausragt — bei „Menge" oder „Gewicht" die Unterlänge des „g". Der Feldinhalt ist mit
   `height: 1lh` genau eine Zeile hoch und steht damit ebenso knapp.

   `normal` nimmt die Maße der Schrift, die tatsächlich gezeichnet wird, und stimmt damit unter Segoe UI ebenso wie
   unter Roboto, auf das Android-Geräte zurückfallen. Die Selektoren der Beschriftung wiederholen die von MudBlazor
   wortgleich, damit sie bei gleicher Spezifität nur durch die spätere Einbindung gewinnen.

   Weil die Zeile damit um einige Pixel wächst, nimmt das umrandete Feld seinen senkrechten Innenabstand von 18.5px
   auf 17px zurück, damit die Gesamthöhe nahe den 56px bleibt. Die ruhende Beschriftung rückt um denselben Weg nach
   oben, von 20px auf 17px: Beschriftung und Wert haben jetzt dieselbe Zeilenhöhe, und erst mit demselben Abstand
   steht die Beschriftung genau dort, wo später der Wert steht. Die geschrumpfte Beschriftung auf dem Rahmen und
   die dichte Variante (`Margin.Dense`, in dieser Anwendung unbenutzt) behalten ihre spezifischeren Regeln.
   --------------------------------------------------------------------------------------------------------------- */
.mud-input {
    line-height: normal;
}

.mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol,
.mud-input-control > .mud-input-control-input-container > .mud-input-label-outlined.mud-input-label-inputcontrol {
    line-height: normal;
}

.mud-input > input.mud-input-root-outlined,
div.mud-input-slot.mud-input-root-outlined {
    padding-top: 17px;
    padding-bottom: 17px;
}

.mud-input-label-outlined {
    transform: translate(14px, 17px) scale(1);
}