@import '_content/Toolbelt.Blazor.PWA.Updater/Toolbelt.Blazor.PWA.Updater.2drl8nn3fe.bundle.scp.css';

/* /Pages/AbsenseView.razor.rz.scp.css */
[b-fbq479wuks] .absense-page {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Reiter "Tag" / "Meine Anträge": sie füllen den Rest der Seite, und nur die
   Liste im Reiter scrollt - Werkzeugleiste und Reiterleiste bleiben stehen. */
[b-fbq479wuks] .absense-tabs {
    flex: 1 1 auto;
    min-height: 0;
}

[b-fbq479wuks] .absense-tabs .hpo-tab-content {
    display: flex;
    flex-direction: column;
}

[b-fbq479wuks] .absense-tabs .hpo-tab-pane:not([hidden]) {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

[b-fbq479wuks] .absense-scroll {
    flex: 1 1 auto;
    min-height: 0;
    margin-top: 1rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Umbrechen erlaubt: die Datumsnavigation behaelt ihre Mindestbreite, "Neu"
   geht bei Platzmangel in die zweite Zeile. */
[b-fbq479wuks] .absense-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
}

/* Flache Kartenliste - jede Abwesenheit eine eigene Karte, wie in den übrigen
   Listen. Der Abwesenheitsgrund steht auf der Karte selbst. */
[b-fbq479wuks] .absense-list {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

[b-fbq479wuks] .absense-item {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: .5rem .6rem;
    transition: box-shadow .15s ease;
}

[b-fbq479wuks] .absense-item:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}

[b-fbq479wuks] .absense-item-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2px;
}

[b-fbq479wuks] .absense-item-name {
    font-weight: 600;
    font-size: 0.95em;
}

[b-fbq479wuks] .absense-item-reason {
    font-size: 0.85em;
    color: var(--hpo-navy);
    font-weight: 600;
}

[b-fbq479wuks] .absense-item-details {
    font-size: 0.85em;
    color: var(--hpo-muted);
}

[b-fbq479wuks] .absense-item-note {
    font-size: 0.8em;
    color: var(--hpo-muted);
    margin-top: 4px;
}
/* /Pages/AppointmentView.razor.rz.scp.css */
[b-3gi73fixv3] .project-card {
    border-radius: 6px;
    border: 1px solid var(--hpo-border);
    overflow: hidden;
    background: #fff;
    transition: box-shadow 0.15s ease;
}

[b-3gi73fixv3] .project-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

[b-3gi73fixv3] .project-header {
    display: flex;
    align-items: center;
    background: var(--hpo-navy);
    color: #fff;
    padding: 8px 12px;
    font-size: 0.85em;
    font-weight: 600;
    min-height: 28px;
}

[b-3gi73fixv3] .project-header-current {
    background: linear-gradient(135deg, var(--hpo-navy) 0%, #3d8bfd 100%);
    font-size: 0.95em;
}

[b-3gi73fixv3] .project-body {
    padding: 12px 16px;
}

[b-3gi73fixv3] .resource-section-label {
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--hpo-muted);
    font-weight: 600;
    margin-top: 8px;
    margin-bottom: 6px;
}

[b-3gi73fixv3] .resource-section-label:first-child {
    margin-top: 0;
}

[b-3gi73fixv3] .resource-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 4px;
}

[b-3gi73fixv3] .resource-chip {
    display: flex;
    align-items: center;
    background: #F5F5F5;
    border-radius: 24px;
    padding: 6px 14px;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
    border: 1.5px solid transparent;
}

[b-3gi73fixv3] .resource-chip:hover {
    background: #E3F2FD;
    box-shadow: 0 1px 4px rgba(25, 118, 210, 0.15);
}

[b-3gi73fixv3] .resource-chip-employee {
    border-color: #4472C4;
    background: #eaf0f9;
}

[b-3gi73fixv3] .resource-chip-vehicle {
    border-color: #ED7D31;
    background: #fdf1e7;
}

[b-3gi73fixv3] .resource-chip-current {
    background: #e7f1ff;
    border: 1.5px solid var(--hpo-navy);
}

[b-3gi73fixv3] .resource-chip-current .resource-name {
    color: var(--hpo-navy);
    font-weight: 700;
}

[b-3gi73fixv3] .resource-name {
    font-size: 0.9em;
    font-weight: 500;
    white-space: nowrap;
}

[b-3gi73fixv3] .note-indicator {
    margin-left: 6px;
    font-size: 0.75em;
    color: #1976D2;
}

[b-3gi73fixv3] .detail-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

[b-3gi73fixv3] .detail-card {
    background: #fff;
    border-radius: 16px;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

[b-3gi73fixv3] .detail-header {
    display: flex;
    align-items: center;
    padding: 16px;
    background: #FAFAFA;
    border-bottom: 1px solid #EEE;
}

[b-3gi73fixv3] .detail-title {
    font-size: 1.1em;
    font-weight: 600;
}

[b-3gi73fixv3] .detail-subtitle {
    font-size: 0.85em;
    color: var(--hpo-muted);
}

[b-3gi73fixv3] .detail-body {
    padding: 16px;
}

[b-3gi73fixv3] .detail-row {
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
    font-size: 0.95em;
}

/* ── Reiter "Projekte" / "Abwesenheiten" ── */
[b-3gi73fixv3] .ap-tabs {
    height: calc(100% - 4rem);
    margin-top: .5rem;
}

[b-3gi73fixv3] .ap-tab-scroll {
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Anzahl je Gruppe im Kartenkopf. */
[b-3gi73fixv3] .project-count {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
    font-size: 0.75em;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 8px;
    margin-left: auto;
}

/* Abwesenheits-Chip: zweizeilig, Name oben, Zeitraum darunter. */
[b-3gi73fixv3] .resource-chip-absence {
    flex-direction: column;
    align-items: flex-start;
    border-color: #4472C4;
    background: #eaf0f9;
    cursor: default;
    line-height: 1.3;
}

[b-3gi73fixv3] .resource-chip-absence:hover {
    background: #eaf0f9;
}

[b-3gi73fixv3] .resource-sub {
    font-size: .8rem;
    color: var(--hpo-muted);
}
/* /Pages/ChatConversation.razor.rz.scp.css */
/* Der Verlauf. Der Kopf steht fest, die Eingabe steht fest, dazwischen scrollt der Verlauf -
   sonst wandert das Eingabefeld beim Tippen aus dem Bild. */

.chat-thread-page[b-hrw20qx92v] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

/* Nur nach unten ein Abstand: seitlich und oben nimmt der Kopf sonst Platz weg, den auf einem
   Telefon der Verlauf braucht - die Kopfzeile der Seite steht ohnehin schon darüber. */
.chat-thread-head[b-hrw20qx92v] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 0 0 .5rem;
    border-bottom: 1px solid #e9ecef;
    background: #fff;
}

.chat-back[b-hrw20qx92v],
.chat-head-button[b-hrw20qx92v] {
    flex: 0 0 auto;
    /* 44px: Mindestgröße eines Ziels für den Finger. */
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    color: var(--hpo-navy);
    font-size: 1.25rem;
    border-radius: 22px;
}

.chat-back:active[b-hrw20qx92v],
.chat-head-button:active[b-hrw20qx92v] {
    background: #e9ecef;
}

.chat-thread-title[b-hrw20qx92v] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.chat-thread-title > span:first-child[b-hrw20qx92v] {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-thread-subtitle[b-hrw20qx92v] {
    font-size: .75rem;
    color: var(--hpo-muted);
}

/* Teilnehmerliste - aufgeklappt über dem Verlauf, damit sie den Platz nicht dauerhaft nimmt. */
.chat-members[b-hrw20qx92v] {
    flex: 0 0 auto;
    max-height: 40vh;
    overflow-y: auto;
    padding: .5rem .75rem;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

.chat-member[b-hrw20qx92v] {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    padding: .25rem 0;
}

.chat-member-name[b-hrw20qx92v] {
    flex: 1 1 auto;
    font-size: .875rem;
}

.chat-member-reason[b-hrw20qx92v] {
    flex: 0 0 auto;
    font-size: .7rem;
    color: var(--hpo-muted);
    background: #e9ecef;
    border-radius: 10px;
    padding: .1rem .5rem;
}

.chat-members-empty[b-hrw20qx92v] {
    font-size: .875rem;
    color: var(--hpo-muted);
    padding: .25rem 0;
}

.chat-messages[b-hrw20qx92v] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: .75rem;
    background: #f8f9fa;
}

.chat-day[b-hrw20qx92v] {
    text-align: center;
    font-size: .75rem;
    color: var(--hpo-muted);
    margin: .75rem 0 .5rem;
}

.chat-bubble-row[b-hrw20qx92v] {
    display: flex;
    margin-bottom: .5rem;
}

.chat-bubble-row.is-own[b-hrw20qx92v] {
    justify-content: flex-end;
}

.chat-bubble[b-hrw20qx92v] {
    max-width: 80%;
    padding: .5rem .75rem;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #e9ecef;
    word-break: break-word;
}

.chat-bubble-row.is-own .chat-bubble[b-hrw20qx92v] {
    background: #dbe7f6;
    border-color: #c9d9ee;
}

.chat-bubble.is-deleted[b-hrw20qx92v] {
    opacity: .6;
    font-style: italic;
}

.chat-bubble-sender[b-hrw20qx92v] {
    font-size: .75rem;
    font-weight: 600;
    color: var(--hpo-navy);
    margin-bottom: .15rem;
}

.chat-bubble-text[b-hrw20qx92v] {
    white-space: pre-wrap;
}

/* Die Übersetzung steht abgesetzt unter dem Original - abgesetzt, damit niemand sie für den
   Wortlaut des Absenders hält. */
.chat-bubble-translation[b-hrw20qx92v] {
    display: flex;
    gap: .35rem;
    margin-top: .35rem;
    padding-top: .35rem;
    border-top: 1px dashed #c9d9ee;
    color: var(--hpo-navy);
    white-space: pre-wrap;
}

.chat-bubble-translation i[b-hrw20qx92v] {
    flex: 0 0 auto;
    opacity: .6;
    margin-top: .15rem;
}

.chat-bubble-translate[b-hrw20qx92v] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-top: .25rem;
    padding: .1rem 0;
    border: 0;
    background: transparent;
    color: var(--hpo-muted);
    font-size: .75rem;
}

.chat-bubble-translate:disabled[b-hrw20qx92v] {
    opacity: .6;
}

.chat-bubble-image[b-hrw20qx92v] {
    display: block;
    max-width: 100%;
    border-radius: 8px;
    margin-bottom: .35rem;
}

.chat-bubble-foot[b-hrw20qx92v] {
    display: flex;
    align-items: center;
    gap: .5rem;
    justify-content: flex-end;
    font-size: .7rem;
    color: var(--hpo-muted);
    margin-top: .15rem;
}

.chat-bubble-pending[b-hrw20qx92v] {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

/* Die Knöpfe der Fußzeile als eine Gruppe links: Das margin-right: auto steht an der Gruppe und
   nicht an einem der Knöpfe - so sitzen sie auch dann links, wenn nur einer von beiden da ist
   (an einer fremden Nachricht gibt es kein Zurücknehmen). */
.chat-bubble-actions[b-hrw20qx92v] {
    display: flex;
    align-items: center;
    gap: .25rem;
    margin-right: auto;
}

/* Kein Innenabstand links: Der erste Knopf soll bündig unter dem Text stehen, nicht um seine
   Polsterung nach rechts versetzt. Die Tastfläche bleibt über die Höhe und den rechten Abstand
   erhalten. */
.chat-bubble-actions > button:first-child[b-hrw20qx92v] {
    padding-left: 0;
}

/* Zurücknehmen. Auf dem Bau wird mit Handschuhen getippt - der Knopf ist deshalb dauerhaft zu
   sehen und groß genug, statt erst bei Berührung zu erscheinen wie im Backoffice. */
.chat-bubble-delete[b-hrw20qx92v] {
    border: 0;
    background: transparent;
    color: var(--hpo-muted);
    padding: .2rem .4rem;
    line-height: 1;
    font-size: .8rem;
}

.chat-bubble-delete:active[b-hrw20qx92v] {
    color: #dc3545;
}

.chat-ack[b-hrw20qx92v],
.chat-closed[b-hrw20qx92v] {
    flex: 0 0 auto;
    padding: .6rem .9rem calc(.6rem + var(--hpo-safe-bottom));
    border-top: 1px solid #e4e8ec;
    background: #fff;
}

/* Ohne seitlichen Abstand: auf einem Telefon zählt jeder Millimeter Schreibbreite. Unten dagegen
   der sichere Abstand (--hpo-safe-bottom, controls.css): Auf einem Gerät mit runden Ecken lagen
   Anhang und Senden - die beiden Knöpfe ganz außen - genau in der Rundung. */
.chat-compose[b-hrw20qx92v] {
    flex: 0 0 auto;
    padding: .6rem 0 calc(.6rem + var(--hpo-safe-bottom));
    border-top: 1px solid #e4e8ec;
    background: #fff;
}

.chat-compose-hint[b-hrw20qx92v] {
    font-size: .75rem;
    color: var(--hpo-muted);
    margin-bottom: .35rem;
}

.chat-compose-offline[b-hrw20qx92v] {
    color: #fd7e14;
}

/* Wie im Backoffice (Content/chat.css, .chat-compose): Bootstrap-Feld und -Knopf, keine eigenen
   Farben und Rundungen. Wer beide Oberflächen benutzt, soll dieselbe Eingabe vor sich haben. */
.chat-compose-row[b-hrw20qx92v] {
    display: flex;
    align-items: flex-end;
    gap: .5rem;
}

/* Die Höhe setzt hpoChat (bis fünf Zeilen), deshalb hier keine feste Obergrenze - sonst
   schnitte das Stylesheet ab, was das Skript gerade zugestanden hat. */
.chat-compose-row textarea[b-hrw20qx92v] {
    flex: 1 1 auto;
    resize: none;
    min-height: 38px;
    overflow-y: hidden;
}

/* Der Kameraknopf. flex: 0 0 auto, damit ihn das mitwachsende Textfeld nicht zusammendrückt;
   align-self: flex-end hält ihn auf der Höhe des Sendeknopfes, wenn die Eingabe mehrzeilig
   geworden ist. Höhe wie die einzeilige Eingabe (min-height dort: 38px). */
.chat-compose-attach[b-hrw20qx92v] {
    flex: 0 0 auto;
    align-self: flex-end;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    cursor: pointer;
    margin-bottom: 0;
}

/* Das gewählte Foto über der Eingabe - klein, denn es ist eine Bestätigung der Wahl und
   keine Ansicht. */
.chat-compose-attachment[b-hrw20qx92v] {
    position: relative;
    display: inline-block;
    margin-bottom: .4rem;
}

.chat-compose-attachment img[b-hrw20qx92v] {
    display: block;
    max-width: 96px;
    max-height: 96px;
    border-radius: 6px;
    border: 1px solid var(--hpo-border);
}

.chat-bubble-image[b-hrw20qx92v] {
    cursor: zoom-in;
}

/* Platzhalter, solange das Vorschaubild geholt wird - ohne ihn springt die Blase, sobald es
   ankommt, und der Verlauf ruckt unter dem Finger weg. */
.chat-bubble-image-loading[b-hrw20qx92v] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 90px;
    border-radius: 6px;
    background: rgba(0, 0, 0, .05);
    color: var(--hpo-muted);
}

/* Die Dateizeile ist jetzt eine Schaltflaeche (der Download laeuft ueber C#), soll aber
   aussehen wie zuvor der Verweis. */
.chat-bubble-file[b-hrw20qx92v] {
    border: 1px solid rgba(0, 0, 0, .12);
    background: rgba(255, 255, 255, .55);
    text-align: left;
    width: 100%;
    cursor: pointer;
}

/* Ohne Vorschaubild steht der Name - in einem Rahmen, damit er als Anhang lesbar ist
   und nicht wie ein Teil der Nachricht. */
.chat-compose-attachment-file[b-hrw20qx92v] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    max-width: 220px;
    padding: .35rem .5rem;
    border: 1px solid var(--hpo-border);
    border-radius: 6px;
    background: #f8f9fa;
    font-size: .8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Die Datei in der Sprechblase. Unterstrichen wird nicht - die Zeile ist ohnehin als
   Kasten erkennbar, und ein Dateiname mit Unterstrich liest sich schlecht. */
.chat-bubble-file[b-hrw20qx92v] {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .5rem;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 6px;
    background: rgba(255, 255, 255, .55);
    color: inherit;
    text-decoration: none;
    word-break: break-all;
}

.chat-bubble-file i[b-hrw20qx92v] {
    flex: 0 0 auto;
    opacity: .7;
}

/* Ein geteilter Standort: Bezeichnung, Koordinaten, zwei Verweise in die Karten-App. Derselbe
   Rahmen wie eine Datei - es ist ein Anhang an die Nachricht, kein Teil ihres Textes. */
.chat-bubble-location[b-hrw20qx92v] {
    padding: .45rem .55rem;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 6px;
    background: rgba(255, 255, 255, .55);
}

.chat-bubble-location-head[b-hrw20qx92v] {
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    font-weight: 600;
    word-break: break-word;
}

.chat-bubble-location-head i[b-hrw20qx92v] {
    margin-top: .15rem;
    color: #b02a37;
}

.chat-bubble-location-coords[b-hrw20qx92v] {
    font-family: monospace;
    font-size: .75rem;
    opacity: .75;
    margin: .15rem 0 .35rem 1.2rem;
}

.chat-bubble-location-links[b-hrw20qx92v] {
    display: flex;
    flex-wrap: wrap;
    gap: .9rem;
    margin-left: 1.2rem;
    font-size: .85rem;
}

.chat-bubble-location-links a[b-hrw20qx92v] {
    color: var(--hpo-navy);
    text-decoration: none;
}

.chat-compose-attachment-remove[b-hrw20qx92v] {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 11px;
    background: var(--hpo-text-secondary);
    color: #fff;
    font-size: .7rem;
    line-height: 22px;
}

.chat-closed[b-hrw20qx92v] {
    font-size: .875rem;
    color: var(--hpo-muted);
    text-align: center;
}

.chat-ack-done[b-hrw20qx92v] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    color: #198754;
    font-weight: 600;
}

.chat-empty[b-hrw20qx92v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    padding: 3rem 1rem;
    color: var(--hpo-muted-light);
    text-align: center;
}

.chat-empty i[b-hrw20qx92v] {
    font-size: 2.5rem;
}

/* Der Griff zum Entfernen steht am rechten Rand der Zeile und nicht als Zeile darunter - eine
   Liste, in der jeder Name zwei Zeilen belegt, füllt auf dem Telefon den halben Bildschirm. */
.chat-member-remove[b-hrw20qx92v] {
    flex: 0 0 auto;
    /* Trefferfläche 44px, sichtbar bleibt der kleine Kreis: der negative Rand nimmt den
       Zuwachs wieder aus der Zeile, die Liste wird nicht höher. */
    width: 44px;
    height: 44px;
    margin: -8px -8px -8px 0;
    border: 0;
    background: transparent;
    color: var(--hpo-muted-light);
    border-radius: 22px;
    font-size: .9rem;
}

.chat-member-remove:active[b-hrw20qx92v] {
    background: #e9ecef;
    color: #dc3545;
}

.chat-member-add[b-hrw20qx92v] {
    padding-top: .25rem;
    border-top: 1px solid #e9ecef;
    margin-top: .35rem;
}

/* Antworten: das Zitat in der Blase und der Streifen über der Eingabe. Beide sehen gleich aus -
   ein schmaler Balken links, darüber der Absender, darunter eine Zeile. */
.chat-quote[b-hrw20qx92v] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .1rem;
    width: 100%;
    margin-bottom: .35rem;
    padding: .25rem .5rem;
    border: 0;
    border-left: 3px solid var(--hpo-navy);
    border-radius: 4px;
    background: rgba(50, 78, 118, .07);
    text-align: left;
}

.chat-quote-sender[b-hrw20qx92v] {
    font-size: .72rem;
    font-weight: 600;
    color: var(--hpo-navy);
}

.chat-quote-text[b-hrw20qx92v] {
    font-size: .78rem;
    color: var(--hpo-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.chat-quote-text.is-deleted[b-hrw20qx92v] {
    font-style: italic;
    opacity: .7;
}

/* Der Pfeil steht ganz links in der Fußzeile, vor dem Papierkorb - dieselbe Größe, damit beide
   mit Handschuhen zu treffen sind. */
.chat-bubble-reply[b-hrw20qx92v] {
    border: 0;
    background: transparent;
    color: var(--hpo-muted);
    padding: .2rem .4rem;
    line-height: 1;
    font-size: .8rem;
}

.chat-bubble-reply:active[b-hrw20qx92v] {
    color: var(--hpo-navy);
}

.chat-compose-quote[b-hrw20qx92v] {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .4rem;
    padding: .3rem .5rem;
    border-left: 3px solid var(--hpo-navy);
    border-radius: 4px;
    background: #f1f4f8;
}

.chat-compose-quote .chat-quote-body[b-hrw20qx92v] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Das Kreuz sitzt IN der Karte, als letztes Glied der Zeile.
   Hier stand zuerst .chat-compose-attachment-remove - die Klasse des Foto-Anhangs. Die ist
   absolut positioniert (sie klebt in der Ecke des Vorschaubildes), und weil diese Karte kein
   position: relative traegt, flog das Kreuz an den oberen rechten Bildschirmrand. Eine geerbte
   Klasse bringt ihre Positionierung mit; wer sie woanders benutzt, erbt sie auch. */
.chat-quote-remove[b-hrw20qx92v] {
    flex: 0 0 auto;
    /* Trefferfläche 44px bei unveränderter Kartenhöhe (negativer Rand). */
    width: 44px;
    height: 44px;
    margin: -8px -8px -8px 0;
    padding: 0;
    border: 0;
    border-radius: 22px;
    background: transparent;
    color: var(--hpo-muted);
    font-size: .9rem;
    line-height: 1;
}

.chat-quote-remove:active[b-hrw20qx92v] {
    background: #dde4ee;
    color: var(--hpo-navy);
}

/* Kurz aufblitzen, wenn ein Zitat hierher gesprungen ist - ohne das weiss niemand, welche der
   Blasen gemeint war. */
.chat-bubble-row.is-flash .chat-bubble[b-hrw20qx92v] {
    animation: chat-flash-b-hrw20qx92v 1.2s ease-out;
}

@keyframes chat-flash-b-hrw20qx92v {
    0% { box-shadow: 0 0 0 3px rgba(50, 78, 118, .45); }
    100% { box-shadow: 0 0 0 3px rgba(50, 78, 118, 0); }
}

/* Schnellantworten über der Eingabe. Waagerecht scrollend statt umbrechend: Die Reihe soll die
   Höhe der Eingabe nie verändern - sonst springt das Feld beim Tippen. */
.chat-quick[b-hrw20qx92v] {
    display: flex;
    gap: .4rem;
    overflow-x: auto;
    padding-bottom: .4rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.chat-quick[b-hrw20qx92v]::-webkit-scrollbar {
    display: none;
}

.chat-quick-item[b-hrw20qx92v] {
    flex: 0 0 auto;
    padding: .3rem .7rem;
    border: 1px solid #c9d9ee;
    border-radius: 1rem;
    background: #eef3fa;
    color: var(--hpo-navy);
    font-size: .8rem;
    white-space: nowrap;
}

.chat-quick-item:active[b-hrw20qx92v] {
    background: #dbe7f6;
}

/* ── Erwähnungen ─────────────────────────────────────────────────────────────── */

/* Die Auswahl beim Tippen von @: über der Eingabe, höchstens sechs Zeilen, darüber hinaus
   wird gerollt. Sie liegt in der Verfassen-Spalte und schiebt den Verlauf nicht weg. */
.chat-mentions[b-hrw20qx92v] {
    display: flex;
    flex-direction: column;
    max-height: 13rem;
    overflow-y: auto;
    border: 1px solid var(--hpo-border);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, .08);
    margin-bottom: .4rem;
}

.chat-mention-item[b-hrw20qx92v] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .1rem;
    border: 0;
    border-bottom: 1px solid #f1f3f5;
    background: transparent;
    text-align: left;
    padding: .5rem .6rem;
}

    .chat-mention-item:last-child[b-hrw20qx92v] {
        border-bottom: 0;
    }

    .chat-mention-item:active[b-hrw20qx92v] {
        background: #eef4ff;
    }

.chat-mention-name[b-hrw20qx92v] {
    font-size: .88rem;
    font-weight: 600;
    color: #212529;
}

/* Warum jemand mitliest - dieselbe Auskunft wie unter „Teilnehmer". */
.chat-mention-reason[b-hrw20qx92v] {
    font-size: .72rem;
    color: var(--hpo-muted);
}

/* Der Name im Verlauf. Zurückhaltend bei einem anderen - und deutlich, wenn ich gemeint
   bin: Genau dafür steht er da. */
.chat-mention[b-hrw20qx92v] {
    color: var(--hpo-navy);
    font-weight: 600;
}

    .chat-mention.is-me[b-hrw20qx92v] {
        background: #dbe7ff;
        border-radius: 4px;
        padding: 0 .15rem;
    }

/* Bin ich genannt, trägt die Blase einen Streifen - im Verlauf sieht man das, ohne zu lesen. */
.chat-bubble.is-mention[b-hrw20qx92v] {
    border-left: 3px solid var(--hpo-navy);
}

.chat-bubble-forme[b-hrw20qx92v] {
    font-size: .68rem;
    font-weight: 600;
    color: var(--hpo-navy);
    margin-bottom: .15rem;
}
/* /Pages/ChatView.razor.rz.scp.css */
/* Liste der Unterhaltungen. Eine Zeile ist so hoch, dass sie sich mit dem Daumen treffen lässt -
   auf der Baustelle wird mit Handschuhen getippt. */

.chat-list-page[b-x8swz4676h] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.chat-translate-setting[b-x8swz4676h] {
    flex: 0 0 auto;
    padding: .5rem 0 .6rem;
    border-bottom: 1px solid #e9ecef;
}

.chat-translate-hint[b-x8swz4676h] {
    font-size: .75rem;
    color: var(--hpo-muted);
    margin-top: .1rem;
}

.chat-list[b-x8swz4676h] {
    flex: 1 1 auto;
    overflow-y: auto;
}

/* Ohne seitlichen Abstand: die Zeile reicht von Rand zu Rand, damit für Name und Vorschau der
   ganze Bildschirm zur Verfügung steht. */
.chat-row[b-x8swz4676h] {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 0;
    border-bottom: 1px solid #e9ecef;
    cursor: pointer;
    min-height: 64px;
}

.chat-row:active[b-x8swz4676h] {
    background: #f1f3f5;
}

.chat-row-icon[b-x8swz4676h] {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.05rem;
}

.chat-row-icon-office[b-x8swz4676h] {
    background: var(--hpo-navy);
}

.chat-row-icon-project[b-x8swz4676h] {
    background: #198754;
}

.chat-row-icon-broadcast[b-x8swz4676h] {
    background: #fd7e14;
}

.chat-row-body[b-x8swz4676h] {
    flex: 1 1 auto;
    min-width: 0;
}

.chat-row-head[b-x8swz4676h] {
    display: flex;
    align-items: baseline;
    gap: .5rem;
}

.chat-row-title[b-x8swz4676h] {
    flex: 1 1 auto;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-row-date[b-x8swz4676h] {
    flex: 0 0 auto;
    font-size: .75rem;
    color: var(--hpo-muted);
}

.chat-row-preview[b-x8swz4676h] {
    font-size: .875rem;
    color: var(--hpo-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-row-badge[b-x8swz4676h] {
    flex: 0 0 auto;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    background: #dc3545;
    color: #fff;
    font-size: .75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Eine Mitteilung, die noch nicht bestätigt ist, ruft lauter als ein Zähler. */
.chat-row-ack[b-x8swz4676h] {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 11px;
    background: #fd7e14;
    color: #fff;
    font-size: .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-empty[b-x8swz4676h] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    padding: 3rem 1rem;
    color: var(--hpo-muted-light);
    text-align: center;
}

.chat-empty i[b-x8swz4676h] {
    font-size: 2.5rem;
}

/* Die Wahl der Art im Anlege-Dialog. Nebeneinander und nicht als Auswahlliste: es sind drei, sie
   ändern sich nicht, und was zur Wahl steht, soll man sehen, ohne etwas aufzuklappen. */
.chat-new-types[b-x8swz4676h] {
    display: flex;
    gap: .5rem;
    margin-bottom: 1rem;
}

.chat-new-type[b-x8swz4676h] {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    padding: .6rem .25rem;
    border: 1px solid var(--hpo-border);
    border-radius: .5rem;
    background: #fff;
    color: var(--hpo-text-secondary);
    font-size: .8rem;
    line-height: 1.1;
    text-align: center;
}

.chat-new-type i[b-x8swz4676h] {
    font-size: 1.2rem;
}

.chat-new-type.is-active[b-x8swz4676h] {
    border-color: var(--hpo-navy);
    background: var(--hpo-navy);
    color: #fff;
}

.chat-new-hint[b-x8swz4676h] {
    margin-top: .5rem;
    font-size: .75rem;
    color: var(--hpo-muted);
}

/* Steht in der Unterhaltung eine ungelesene Nachricht mit meinem Namen, ist die Zahl
   eingefärbt - im Hausblau statt im Rot der gewöhnlichen Meldung. Ein zweites Zeichen
   daneben wäre in einer Zeile mit Titel, Vorschau und Uhrzeit zu viel. */
.chat-row-badge.is-mention[b-x8swz4676h] {
    background: var(--hpo-navy);
}
/* /Pages/DamageReportView.razor.rz.scp.css */
.damage-page[b-yi8bqufw6d] {
    padding: 0;
}

.damage-attachment[b-yi8bqufw6d] {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: #f8f9fa;
    border-radius: 6px;
    padding: .25rem .5rem;
}

    /* Vorschau oder Symbol - HpoFileThumb füllt die 44 px und erbt Größe und Farbe des Symbols. */
    .damage-attachment-thumb[b-yi8bqufw6d] {
        flex: 0 0 44px;
        display: inline-flex;
        border-radius: 4px;
        font-size: 1.5rem;
        color: var(--hpo-muted);
        cursor: pointer;
    }

.damage-attachment-open[b-yi8bqufw6d] {
    cursor: pointer;
}

.damage-attachment-name[b-yi8bqufw6d] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.damage-list[b-yi8bqufw6d] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.damage-item[b-yi8bqufw6d] {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: .5rem .6rem;
}

.damage-item-head[b-yi8bqufw6d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.damage-item-vehicle[b-yi8bqufw6d] {
    font-size: .85rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.damage-item-sub[b-yi8bqufw6d] {
    font-size: .8rem;
    color: var(--hpo-muted);
}

.damage-item-text[b-yi8bqufw6d] {
    font-size: .82rem;
    margin-top: .15rem;
    white-space: pre-wrap;
}

.damage-item-note[b-yi8bqufw6d] {
    font-size: .8rem;
    color: var(--hpo-text-secondary);
    background: #f8f9fa;
    border-radius: 4px;
    padding: .2rem .4rem;
    margin-top: .25rem;
}
/* /Pages/EmployeeAccountView.razor.rz.scp.css */
/* Kartenoptik in Anlehnung an die Startseite (cal-card): weisse Karte, Rahmen #dee2e6,
   Akzentfarbe #324E76, Ampelfarben wie in der Kalenderlegende (#198754 / #dc3545). */

[b-7ebgt4840j] .account-page {
    max-width: 980px;
    margin: 0 auto;
    height: 100%;
    overflow-y: auto;
}

[b-7ebgt4840j] .account-card {
    background: #fff;
    border: 1px solid var(--hpo-border);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

[b-7ebgt4840j] .account-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 1rem;
    background: var(--hpo-navy);
    color: #fff;
    font-weight: 600;
    font-size: 0.95em;
}

/* ── Kennzahl ── */
[b-7ebgt4840j] .account-hero {
    text-align: center;
    padding: 1.1rem 1rem 0.9rem 1rem;
    border-bottom: 1px solid #eee;
}

[b-7ebgt4840j] .account-hero-value {
    font-size: 2.6em;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
}

[b-7ebgt4840j] .account-hero-unit {
    font-size: 0.8em;
    color: var(--hpo-muted);
    margin-top: 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

[b-7ebgt4840j] .account-hero.value-plus {
    background: #f3fff6;
}

[b-7ebgt4840j] .account-hero.value-minus {
    background: #fff5f5;
}

[b-7ebgt4840j] .account-hero.value-plus .account-hero-value {
    color: #198754;
}

[b-7ebgt4840j] .account-hero.value-minus .account-hero-value {
    color: #dc3545;
}

[b-7ebgt4840j] .account-hero.value-neutral .account-hero-value {
    color: var(--hpo-navy);
}

/* ── Fortschritt genommener Urlaub ── */
[b-7ebgt4840j] .account-progress {
    height: 8px;
    background: #eef0f2;
    margin: 0.9rem 1rem 0.35rem 1rem;
    border-radius: 999px;
    overflow: hidden;
}

[b-7ebgt4840j] .account-progress-fill {
    height: 100%;
    background: var(--hpo-navy);
    border-radius: 999px;
    transition: width 0.3s ease;
}

[b-7ebgt4840j] .account-progress-legend {
    display: flex;
    justify-content: space-between;
    padding: 0 1rem;
    font-size: .8rem;
    color: var(--hpo-muted);
}

/* ── Aufschlüsselung ── */
[b-7ebgt4840j] .account-rows {
    padding: 0.5rem 1rem 0.25rem 1rem;
}

[b-7ebgt4840j] .account-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f0f0f0;
}

[b-7ebgt4840j] .account-row:last-child {
    border-bottom: none;
}

[b-7ebgt4840j] .account-label {
    font-size: 0.9em;
    color: var(--hpo-text-secondary);
}

[b-7ebgt4840j] .account-value {
    font-weight: 700;
    font-size: 1em;
    color: #333;
    white-space: nowrap;
}

[b-7ebgt4840j] .account-value.value-plus {
    color: #198754;
}

[b-7ebgt4840j] .account-value.value-minus {
    color: #dc3545;
}

/* ── Hinweise ── */
[b-7ebgt4840j] .account-note {
    font-size: .8rem;
    color: var(--hpo-muted);
    padding: 0.5rem 1rem 0.8rem 1rem;
    line-height: 1.4;
}

[b-7ebgt4840j] .account-updated {
    font-size: .8rem;
    color: #9e9e9e;
    text-align: center;
    padding-bottom: 0.75rem;
}
/* /Pages/EquipmentRequestView.razor.rz.scp.css */
.equip-page[b-5y9c8dmemb] {
    padding: 0;
}

/* Der Anlegen-Knopf steht im Reiter, rechts über der Liste - dort, wo vorher die
   Werkzeugleiste war. */
.equip-actions[b-5y9c8dmemb] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: .5rem;
}

/* Was bereitliegt, ist der Grund, warum jemand diese Seite öffnet - deshalb oben. */
.equip-hint[b-5y9c8dmemb] {
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: 8px;
    padding: .4rem .6rem;
    font-size: .8rem;
    color: #7a5c00;
    margin-bottom: .5rem;
}

.equip-list[b-5y9c8dmemb] {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.equip-item[b-5y9c8dmemb] {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: .5rem .6rem;
}

.equip-item-head[b-5y9c8dmemb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.equip-item-type[b-5y9c8dmemb] {
    font-size: .9rem;
    font-weight: 600;
}

.equip-item-sub[b-5y9c8dmemb] {
    font-size: .8rem;
    color: var(--hpo-muted);
}

.equip-item-note[b-5y9c8dmemb] {
    font-size: .8rem;
    color: var(--hpo-text-secondary);
    margin-top: .2rem;
}

.equip-item-actions[b-5y9c8dmemb] {
    display: flex;
    gap: .4rem;
    margin-top: .4rem;
}

    .equip-item-actions .btn[b-5y9c8dmemb] {
        flex: 1 1 0;
        font-size: .8rem;
    }

/* Der Hinweis im Dialog: er gehört zur gewählten Art und nicht zur Eingabe, deshalb ruhiger. */
.equip-return-hint[b-5y9c8dmemb] {
    font-size: .8rem;
    color: #055160;
    background: #cff4fc;
    border: 1px solid #b6effb;
    border-radius: 6px;
    padding: .3rem .5rem;
    margin-bottom: .5rem;
}

.equip-issue[b-5y9c8dmemb] {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: .4rem .6rem;
}

.equip-issue-head[b-5y9c8dmemb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.equip-issue-date[b-5y9c8dmemb] {
    font-size: .8rem;
    color: var(--hpo-muted);
    white-space: nowrap;
}

/* Zurückgegeben heißt: hat er nicht mehr. Das soll man sehen, ohne das Datum zu lesen. */
.equip-issue-returned[b-5y9c8dmemb] {
    opacity: .6;
}
/* /Pages/ExpenseView.razor.rz.scp.css */
.expense-page[b-i6jddzvwqy] {
    padding: 0;
}

/* Betrag und Herleitung stehen zusammen - der Mitarbeiter sieht, wie die Summe entsteht. */
.expense-calc[b-i6jddzvwqy] {
    background: #f1f5fa;
    border-radius: 6px;
    padding: .35rem .5rem;
}

.expense-calc-amount[b-i6jddzvwqy] {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--hpo-navy);
    margin-right: .5rem;
}

.expense-calc-info[b-i6jddzvwqy] {
    font-size: .8rem;
    color: var(--hpo-text-secondary);
}

.expense-attachment[b-i6jddzvwqy] {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: #f8f9fa;
    border-radius: 6px;
    padding: .25rem .5rem;
}

    /* Vorschau oder Symbol - HpoFileThumb füllt die 44 px und erbt Größe und Farbe des Symbols. */
    .expense-attachment-thumb[b-i6jddzvwqy] {
        flex: 0 0 44px;
        display: inline-flex;
        border-radius: 4px;
        font-size: 1.5rem;
        color: var(--hpo-muted);
        cursor: pointer;
    }

.expense-attachment-open[b-i6jddzvwqy] {
    cursor: pointer;
}

.expense-attachment-name[b-i6jddzvwqy] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.expense-list[b-i6jddzvwqy] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.expense-item[b-i6jddzvwqy] {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: .5rem .6rem;
}

.expense-item-head[b-i6jddzvwqy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.expense-item-type[b-i6jddzvwqy] {
    font-size: .85rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.expense-item-sub[b-i6jddzvwqy] {
    font-size: .8rem;
    color: var(--hpo-muted);
}

.expense-item-amount[b-i6jddzvwqy] {
    font-size: .95rem;
    font-weight: 700;
    color: #212529;
}

.expense-item-text[b-i6jddzvwqy] {
    font-size: .82rem;
    margin-top: .15rem;
    white-space: pre-wrap;
}

.expense-item-note[b-i6jddzvwqy] {
    font-size: .8rem;
    color: var(--hpo-text-secondary);
    background: #f8f9fa;
    border-radius: 4px;
    padding: .2rem .4rem;
    margin-top: .25rem;
}
/* /Pages/InstructionView.razor.rz.scp.css */
.instr-page[b-pqygl2iowj] {
    padding: 0;
}

.instr-list[b-pqygl2iowj] {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.instr-item[b-pqygl2iowj],
.instr-done[b-pqygl2iowj] {
    border: 1px solid var(--hpo-border);
    border-radius: 8px;
    padding: .55rem .65rem;
    background: #fff;
}

/* Was offen ist, ist der Grund, aus dem jemand diese Seite öffnet - der Rand sagt es, ohne dass
   man das Abzeichen lesen muss. */
.instr-item-open[b-pqygl2iowj] {
    border-left: 4px solid #dc3545;
}

.instr-item-head[b-pqygl2iowj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .4rem;
}

.instr-item-name[b-pqygl2iowj] {
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.instr-item-sub[b-pqygl2iowj] {
    font-size: .8rem;
    color: var(--hpo-muted);
    margin-top: .1rem;
}

.instr-item-text[b-pqygl2iowj] {
    font-size: .82rem;
    margin-top: .35rem;
    white-space: pre-wrap;
}

.instr-item-actions[b-pqygl2iowj] {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
    margin-top: .5rem;
}

.instr-item-hint[b-pqygl2iowj] {
    font-size: .8rem;
    color: var(--hpo-muted);
    margin-top: .35rem;
}

.instr-done-date[b-pqygl2iowj] {
    font-size: .8rem;
    color: var(--hpo-muted);
    white-space: nowrap;
}

/* Der Satz, den die Unterschrift bestätigt: er steht über der Fläche und ist der eigentliche
   Inhalt des Dialogs - deshalb nicht kleiner als der Rest. */
.instr-confirm[b-pqygl2iowj] {
    font-size: .88rem;
    margin-bottom: .5rem;
    white-space: pre-wrap;
}

.instr-signer[b-pqygl2iowj] {
    font-size: .8rem;
    color: var(--hpo-muted);
    margin-bottom: .35rem;
}

.instr-pad-actions[b-pqygl2iowj] {
    display: flex;
    justify-content: flex-end;
    margin-top: .4rem;
}
/* /Pages/OnCallContactsView.razor.rz.scp.css */
.oncall-contacts-page[b-ikyr1qkz0p] {
    padding: 0;
}

/* Der Tag ist die Ueberschrift der Seite - deshalb Groesse, Gewicht und Abstand der
   Werkzeugleiste (.hpo-toolbar-title), damit die Seite im selben Takt beginnt wie die uebrigen. */
.oncall-contacts-day[b-ikyr1qkz0p] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--hpo-text-secondary);
    margin-bottom: .75rem;
}

.oncall-contacts-time[b-ikyr1qkz0p] {
    display: block;
    font-size: .8rem;
    font-weight: 400;
    color: var(--hpo-muted);
    margin-top: .1rem;
}

.oncall-contact[b-ikyr1qkz0p] {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: .6rem;
    margin-bottom: .5rem;
}

.oncall-contact-role[b-ikyr1qkz0p] {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--hpo-navy);
    font-weight: 600;
}

.oncall-contact-name[b-ikyr1qkz0p] {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: .25rem;
}

/* Das Fahrzeug gehört zur Auskunft, ist aber nicht das, was gewählt wird - deshalb
   unter dem Namen und ruhiger als dieser. */
.oncall-contact-vehicle[b-ikyr1qkz0p] {
    font-size: .82rem;
    color: var(--hpo-text-secondary);
    margin-bottom: .25rem;
}

/* Nummer links, Knopf rechts: die Nummer will gelesen und weitergegeben werden, gewaehlt wird
   im Ernstfall mit einem Daumen. */
.oncall-contact-phone[b-ikyr1qkz0p] {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-top: .35rem;
}

.oncall-contact-icon[b-ikyr1qkz0p] {
    flex: 0 0 auto;
    width: 1rem;
    text-align: center;
    color: var(--hpo-muted);
}

.oncall-contact-number[b-ikyr1qkz0p] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.oncall-contact-call[b-ikyr1qkz0p] {
    flex: 0 0 auto;
    white-space: nowrap;
}

.oncall-contact-hint[b-ikyr1qkz0p] {
    font-size: .8rem;
    opacity: .75;
    margin-left: .3rem;
}

.oncall-contact-none[b-ikyr1qkz0p] {
    font-size: .8rem;
    color: #7a5c00;
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: 6px;
    padding: .3rem .5rem;
}

.oncall-contacts-stand[b-ikyr1qkz0p] {
    font-size: .8rem;
    color: var(--hpo-muted);
    text-align: center;
    margin-top: .75rem;
}
/* /Pages/OnCallView.razor.rz.scp.css */
.oncall-page[b-dnt7fxheyx] {
    padding: 0;
}

/* Offene Rückmeldungen sind der Grund, warum jemand diese Seite öffnet - deshalb oben. */
.oncall-hint[b-dnt7fxheyx] {
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: 8px;
    padding: .4rem .6rem;
    font-size: .8rem;
    color: #7a5c00;
    margin-bottom: .5rem;
}

.oncall-month[b-dnt7fxheyx] {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--hpo-muted);
    font-weight: 600;
    margin: .75rem 0 .25rem;
}

.oncall-list[b-dnt7fxheyx] {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.oncall-item[b-dnt7fxheyx] {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: .5rem .6rem;
}

/* Ein Tag ohne Rückmeldung hebt sich ab, ohne wie ein Fehler auszusehen. */
.oncall-item-open[b-dnt7fxheyx] {
    border-left: 3px solid #ffc107;
}

.oncall-item-head[b-dnt7fxheyx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.oncall-item-date[b-dnt7fxheyx] {
    font-size: .85rem;
    font-weight: 600;
}

.oncall-item-role[b-dnt7fxheyx] {
    font-size: .8rem;
    color: var(--hpo-navy);
    font-weight: 600;
    white-space: nowrap;
}

.oncall-item-sub[b-dnt7fxheyx] {
    font-size: .8rem;
    color: var(--hpo-muted);
}

.oncall-item-note[b-dnt7fxheyx] {
    font-size: .8rem;
    color: var(--hpo-text-secondary);
    margin-top: .2rem;
}

.oncall-item-actions[b-dnt7fxheyx] {
    display: flex;
    gap: .4rem;
    margin-top: .4rem;
}

    .oncall-item-actions .btn[b-dnt7fxheyx] {
        flex: 1 1 0;
        font-size: .8rem;
    }
/* /Pages/ProjectFilesView.razor.rz.scp.css */
.files-page[b-hboeqr0csh] {
    padding: 0;
}

.files-filter[b-hboeqr0csh] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin: 0 0 .75rem;
}

/* Der Schalter sitzt in der Kopfzeile neben den Knoepfen. Er kommt aus einem eigenen Baustein,
   deshalb ::deep - und ohne den Abstand nach unten, den ein Feld sonst traegt. */
.files-toolbar[b-hboeqr0csh] {
    justify-content: flex-start;
}

    .files-toolbar[b-hboeqr0csh]  .files-today {
        margin-bottom: 0;
        min-width: 0;
        white-space: nowrap;
    }

/* Nur das Symbol: quadratisch, damit der Knopf neben "Neu" nicht wie ein Strich wirkt. */
.files-refresh[b-hboeqr0csh] {
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.files-actions[b-hboeqr0csh] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: 0 0 auto;
}
/* /Pages/ProjectLogView.razor.rz.scp.css */
/* Aufbau wie beim Arbeitsnachweis (TimeSheetView): oben die Werkzeugleiste mit Datum und
   "Neu", darunter die Karten des Tages in einer Zeitleiste. Die Werte sind von dort
   uebernommen, damit beide Seiten gleich aussehen - wer eine aendert, zieht die andere nach.
   Ohne ::deep: alles hier steht im Markup dieser Seite (auch im Inhalt der Dialoge und
   Reiter) und traegt deshalb ihr Kennzeichen; die Datumsauswahl regelt controls.css. */
.pl-page[b-q3mencwbbx] {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Wie .ts-toolbar - die gemeinsamen Umbruchregeln fuer Datumsauswahl und "Neu" stehen in
   controls.css. */
.pl-toolbar[b-q3mencwbbx] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    flex-shrink: 0;
}

.pl-cards-area[b-q3mencwbbx] {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding-top: 0.75rem;
    padding-bottom: 1rem;
}

.pl-day-summary[b-q3mencwbbx] {
    background: #fff;
    border: 1px solid var(--hpo-border);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 12px;
}

.pl-day-title[b-q3mencwbbx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pl-day-count[b-q3mencwbbx] {
    font-size: 0.8em;
    color: var(--hpo-muted);
    margin-top: 2px;
}

/* Spalte links (40px) traegt Punkt und Linie, beide auf derselben Mitte (16px).
   Punkt und Linienstueck haengen absolut an der Karte; Bezug ist deren Innenkante, also
   40px plus Rahmenbreite links. */
.pl-timeline[b-q3mencwbbx] {
    position: relative;
    padding-left: 40px;
}

.pl-timeline-item[b-q3mencwbbx] {
    position: relative;
    display: flex;
    align-items: flex-start;
    margin-bottom: 12px;
    cursor: pointer;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 6px;
    transition: box-shadow 0.15s, background 0.15s;
}

    .pl-timeline-item:hover[b-q3mencwbbx] {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        background: #f8fbff;
    }

    /* Verbindungslinie von der Mitte dieses Punkts bis unter den naechsten - ab dem letzten
       keine mehr. Unten: 12px Abstand + 2px Rahmen + 22px bis zur naechsten Punktmitte. */
    .pl-timeline-item:not(:last-child)[b-q3mencwbbx]::before {
        content: '';
        position: absolute;
        left: -26px;
        top: 22px;
        bottom: -36px;
        width: 2px;
        border-radius: 1px;
        background: #dee2e6;
    }

/* Offen (Entwurf oder noch kein Bericht) im Blau des Hauses, freigegeben gruen wie beim
   Arbeitsnachweis. */
.pl-timeline-dot[b-q3mencwbbx] {
    position: absolute;
    left: -39px;
    top: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--hpo-navy) 0%, #4a6fa5 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.65em;
    box-shadow: 0 0 0 3px #fff, 0 1px 3px rgba(0, 0, 0, .15);
    z-index: 1;
}

.pl-timeline-dot-done[b-q3mencwbbx] {
    background: linear-gradient(135deg, #2e7d32 0%, #43a047 100%);
}

.pl-timeline-content[b-q3mencwbbx] {
    flex: 1;
    min-width: 0;
}

.pl-timeline-header[b-q3mencwbbx] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 4px;
}

.pl-timeline-project[b-q3mencwbbx] {
    font-size: 1em;
    font-weight: 700;
    color: #333;
}

.pl-timeline-detail[b-q3mencwbbx] {
    font-size: 0.82em;
    color: var(--hpo-muted);
    margin-top: 1px;
}

/* Hinweise oben im ersten Reiter - im Ton der Hinweise bei der Arbeitskleidung. */
.pl-hint[b-q3mencwbbx] {
    border-radius: 8px;
    padding: .4rem .6rem;
    font-size: .8rem;
    margin-bottom: .5rem;
}

.pl-hint-warning[b-q3mencwbbx] {
    background: #fff8e1;
    border: 1px solid #ffe082;
    color: #7a5c00;
}

.pl-hint-done[b-q3mencwbbx] {
    background: #e8f5e9;
    border: 1px solid #a5d6a7;
    color: #1b5e20;
}

/* Solange niemand das Wetter angegeben hat, fragt die Seite nach - nicht zu uebersehen, aber
   ohne Alarmfarbe: Es ist eine Rueckfrage, kein Fehler. */
.pl-weather-open[b-q3mencwbbx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    flex-wrap: wrap;
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: 6px;
    padding: .35rem .5rem;
    font-size: .8rem;
    color: #7a5c00;
    margin-bottom: .5rem;
}

.pl-pre[b-q3mencwbbx] {
    white-space: pre-line;
}

.pl-signature-image[b-q3mencwbbx] {
    display: block;
    height: 40px;
    max-width: 140px;
    object-fit: contain;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    background: #fff;
    margin-top: .3rem;
}
/* /Pages/QualificationView.razor.rz.scp.css */
.qual-page[b-ehoqemf31y] {
    padding: 0;
}

.qual-list[b-ehoqemf31y] {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.qual-item[b-ehoqemf31y] {
    border: 1px solid var(--hpo-border);
    border-radius: 8px;
    padding: .55rem .65rem;
    background: #fff;
}

/* Was abläuft, ist der Grund, aus dem jemand diese Seite öffnet - der Rand sagt es, ohne dass man
   das Abzeichen lesen muss. Wie bei den Unterweisungen. */
.qual-item-open[b-ehoqemf31y] {
    border-left: 4px solid #dc3545;
}

.qual-item-head[b-ehoqemf31y] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .4rem;
}

.qual-item-name[b-ehoqemf31y] {
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qual-item-sub[b-ehoqemf31y] {
    font-size: .8rem;
    color: var(--hpo-muted);
    margin-top: .1rem;
}

.qual-item-hint[b-ehoqemf31y] {
    font-size: .8rem;
    color: var(--hpo-muted);
    margin-top: .35rem;
}

.qual-item-actions[b-ehoqemf31y] {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
    margin-top: .5rem;
}

/* Gewaehlte oder eingereichte Datei: eine kompakte Zeile mit kleiner Vorschau - wie der Beleg im
   Dialog der Betankung (fuel-attachment). */
.qual-attachment[b-ehoqemf31y] {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: #f8f9fa;
    border-radius: 6px;
    padding: .25rem .5rem;
}

.qual-attachment-thumb[b-ehoqemf31y] {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    overflow: hidden;
    font-size: 1.5rem;
    color: var(--hpo-muted);
}

.qual-attachment-thumb img[b-ehoqemf31y] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.qual-attachment-name[b-ehoqemf31y] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Pages/RefuelingView.razor.rz.scp.css */
.fuel-page[b-nhx8h5iqsf] {
    padding: 0;
}

.fuel-attachment[b-nhx8h5iqsf] {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: #f8f9fa;
    border-radius: 6px;
    padding: .25rem .5rem;
}

    /* Vorschau oder Symbol - HpoFileThumb füllt die 44 px und erbt Größe und Farbe des Symbols. */
    .fuel-attachment-thumb[b-nhx8h5iqsf] {
        flex: 0 0 44px;
        display: inline-flex;
        border-radius: 4px;
        font-size: 1.5rem;
        color: var(--hpo-muted);
        cursor: pointer;
    }

.fuel-attachment-open[b-nhx8h5iqsf] {
    cursor: pointer;
}

.fuel-attachment-name[b-nhx8h5iqsf] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fuel-list[b-nhx8h5iqsf] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.fuel-item[b-nhx8h5iqsf] {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: .5rem .6rem;
}

.fuel-item-head[b-nhx8h5iqsf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.fuel-item-vehicle[b-nhx8h5iqsf] {
    font-size: .85rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Die getankte Menge ist die eine Zahl, die beim Durchblättern zählt. */
.fuel-item-quantity[b-nhx8h5iqsf] {
    flex: 0 0 auto;
    font-size: .85rem;
    font-weight: 600;
}

.fuel-item-sub[b-nhx8h5iqsf] {
    font-size: .8rem;
    color: var(--hpo-muted);
}
/* /Pages/SettingsView.razor.rz.scp.css */
/* Einstellungen: eine Spalte, je Thema ein Abschnitt mit kleiner Überschrift. */
.hpo-settings[b-piuqojkqg3] {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: .5rem 0 1rem;
    max-width: 40rem;
}

.hpo-settings-section[b-piuqojkqg3] {
    padding: .85rem 0;
    border-bottom: 1px solid #e6e9ed;
}

.hpo-settings-section:last-child[b-piuqojkqg3] {
    border-bottom: 0;
}

.hpo-settings-title[b-piuqojkqg3] {
    margin: 0 0 .6rem;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--hpo-muted);
}

.hpo-settings-hint[b-piuqojkqg3] {
    margin: .4rem 0 0;
    font-size: .85rem;
    color: var(--hpo-muted);
}
/* /Pages/TimeSheetView.razor.rz.scp.css */
[b-imtu0ox0zz] .timesheet-page {
    height: 100%;
    display: flex;
    flex-direction: column;
}

[b-imtu0ox0zz] .hidden-grid {
    height: 0;
    width: 0;
    overflow: hidden;
    position: fixed;
    left: -9999px;
    top: -9999px;
}

[b-imtu0ox0zz] .hidden-grid .e-dialog,
[b-imtu0ox0zz] .hidden-grid .e-dlg-overlay {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Umbrechen erlaubt: die Datumsnavigation behaelt ihre Mindestbreite, "Neu"
   geht bei Platzmangel in die zweite Zeile. */
[b-imtu0ox0zz] .ts-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    flex-shrink: 0;
}

/* "Neu" und Mikrofon bleiben beieinander. */
[b-imtu0ox0zz] .ts-actions,
[b-imtu0ox0zz] .ts-form-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
}

/* Wie "Heute" in der Datumsauswahl: umrandet, 2,5rem breit, so hoch wie die Zeile. */
[b-imtu0ox0zz] .ts-icon-button {
    flex: 0 0 auto;
    width: 2.5rem;
    align-self: stretch;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Das Mikrofon in der Leiste der Maske: links, Abbrechen und Speichern bleiben rechts. */
[b-imtu0ox0zz] .ts-footer-start {
    margin-right: auto;
}

/* "Kopieren": derselbe Stil, nur mit Text. */
[b-imtu0ox0zz] .ts-text-button {
    flex: 0 0 auto;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
}

[b-imtu0ox0zz] .ts-cards-area {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding-top: 0.75rem;
    padding-bottom: 1rem;
}

[b-imtu0ox0zz] .ts-day-summary {
    background: #fff;
    border: 1px solid var(--hpo-border);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 12px;
}

[b-imtu0ox0zz] .ts-day-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

[b-imtu0ox0zz] .ts-day-badges {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Freistehendes rotes Warndreieck; die Trefferfläche bleibt 44px wie bei den Kartenknöpfen,
   der negative Rand hält die Zusammenfassung trotzdem so hoch wie bisher. */
[b-imtu0ox0zz] .ts-day-problems {
    min-width: 44px;
    min-height: 44px;
    margin: -8px 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--bs-danger, #dc3545);
    font-size: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}

[b-imtu0ox0zz] .ts-day-problems:hover {
    background: #fdf2f3;
}

/* Mittig gesetzt, damit die Zahl auf einer Linie mit dem Warndreieck daneben steht. */
[b-imtu0ox0zz] .ts-total-hours {
    display: inline-flex;
    align-items: center;
    height: 28px;
    line-height: 1;
    background: #e7f1ff;
    color: var(--hpo-navy);
    padding: 0 10px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.95em;
}

[b-imtu0ox0zz] .ts-day-count {
    font-size: 0.8em;
    color: var(--hpo-muted);
    margin-top: 2px;
}

/* Spalte links (40px) traegt Punkt und Linie, beide auf derselben Mitte (16px).
   Punkt und Linienstueck haengen absolut an der Karte; Bezug ist deren Innenkante, also
   40px plus Rahmenbreite links. */
[b-imtu0ox0zz] .ts-timeline {
    position: relative;
    padding-left: 40px;
}

[b-imtu0ox0zz] .ts-timeline-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    margin-bottom: 12px;
    cursor: pointer;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 6px;
    transition: box-shadow 0.15s, background 0.15s;
}

    [b-imtu0ox0zz] .ts-timeline-item:hover {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        background: #f8fbff;
    }

    /* Verbindungslinie von der Mitte dieses Punkts bis unter den naechsten - ab dem letzten
       keine mehr. Unten: 12px Abstand + 2px Rahmen + 22px bis zur naechsten Punktmitte. */
    [b-imtu0ox0zz] .ts-timeline-item:not(:last-child)::before {
        content: '';
        position: absolute;
        left: -26px;
        top: 22px;
        bottom: -36px;
        width: 2px;
        border-radius: 1px;
        background: #dee2e6;
    }

    /* Die gruene Kante (hpo-card-synced) ist 4px statt 1px breit - Punkt und Linie gleichen das aus. */
    [b-imtu0ox0zz] .ts-timeline-item.hpo-card-synced::before {
        left: -29px;
    }

    [b-imtu0ox0zz] .ts-timeline-item.hpo-card-synced .ts-timeline-dot {
        left: -42px;
    }

[b-imtu0ox0zz] .ts-timeline-dot {
    position: absolute;
    left: -39px;
    top: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2e7d32 0%, #43a047 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.65em;
    box-shadow: 0 0 0 3px #fff, 0 1px 3px rgba(0, 0, 0, .15);
    z-index: 1;
}

[b-imtu0ox0zz] .ts-timeline-content {
    flex: 1;
    min-width: 0;
}

[b-imtu0ox0zz] .ts-timeline-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 4px;
}

[b-imtu0ox0zz] .ts-timeline-project-hours {
    display: flex;
    flex-direction: column;
}

[b-imtu0ox0zz] .ts-timeline-project {
    font-size: 1em;
    font-weight: 700;
    color: #333;
}

[b-imtu0ox0zz] .ts-timeline-hours {
    font-size: 1.1em;
    font-weight: 700;
    color: #004896;
}

[b-imtu0ox0zz] .ts-timeline-worktime {
    font-size: 0.85em;
    color: var(--hpo-muted);
    margin-bottom: 2px;
}

[b-imtu0ox0zz] .ts-break {
    color: var(--hpo-muted);
    margin-left: 4px;
}

[b-imtu0ox0zz] .ts-timeline-detail {
    font-size: 0.82em;
    color: var(--hpo-muted);
    margin-top: 1px;
}

[b-imtu0ox0zz] .ts-item-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

[b-imtu0ox0zz] .btn-delete-item {
    background: none;
    border: none;
    color: var(--hpo-muted);
    cursor: pointer;
    padding: 2px 6px;
    font-size: 0.9em;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}

    [b-imtu0ox0zz] .btn-delete-item:hover {
        color: #dc3545;
        background: #fff5f5;
    }

[b-imtu0ox0zz] .ts-item-note {
    font-size: 0.8em;
    color: var(--hpo-muted);
    margin-top: 4px;
}

/* Arbeitsnachweis per Sprache: die laufende Aufnahme als Leiste mit pulsierendem Punkt -
   wie die Aufnahmeanzeige des Telefons, damit klar ist, dass das Mikrofon offen ist. */
[b-imtu0ox0zz] .ts-voice-recording {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .6rem;
    border: 1px solid var(--hpo-border);
    border-radius: .375rem;
}

[b-imtu0ox0zz] .ts-voice-dot {
    width: .7rem;
    height: .7rem;
    border-radius: 50%;
    background: #dc3545;
    animation: ts-voice-pulse-b-imtu0ox0zz 1.2s ease-in-out infinite;
    flex: 0 0 auto;
}

@keyframes ts-voice-pulse-b-imtu0ox0zz {
    0%, 100% { opacity: 1; }
    50% { opacity: .3; }
}

[b-imtu0ox0zz] .ts-voice-transcript summary {
    cursor: pointer;
}

/* Sprach-Dialog: ein Verlauf wie im Chat - die App links, der Mitarbeiter rechts. */
[b-imtu0ox0zz] .ts-voice-chat {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

[b-imtu0ox0zz] .ts-voice-line {
    max-width: 85%;
    padding: .5rem .75rem;
    border-radius: .75rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* „Eingetragen:“ - je Stichwort eine Zeile, das Zeichen wie oben in den Stichworten. Kompakt:
   volle Breite, etwas kleiner, Namen und Geräte einzeilig (zu Langes endet mit „…“), Texte
   höchstens zwei Zeilen - die ganze Fassung steht in der Maske. */
[b-imtu0ox0zz] .ts-voice-line.ts-voice-summary {
    max-width: 100%;
    width: 100%;
    font-size: .95rem;
    line-height: 1.3;
}

[b-imtu0ox0zz] .ts-voice-sum-line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[b-imtu0ox0zz] .ts-voice-sum.is-text .ts-voice-sum-line {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

[b-imtu0ox0zz] .ts-voice-summary-title {
    font-weight: 500;
    margin-bottom: .35rem;
}

[b-imtu0ox0zz] .ts-voice-sum {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    white-space: normal;
}

[b-imtu0ox0zz] .ts-voice-sum + .ts-voice-sum {
    margin-top: .15rem;
}

[b-imtu0ox0zz] .ts-voice-sum > .fa {
    flex: 0 0 auto;
    margin-top: .2em;
    color: var(--hpo-muted);
}

[b-imtu0ox0zz] .ts-voice-sum.is-done > .fa {
    color: #198754;
}

[b-imtu0ox0zz] .ts-voice-sum.is-missing > .fa,
[b-imtu0ox0zz] .ts-voice-sum.is-partial > .fa {
    color: var(--hpo-orange);
}

[b-imtu0ox0zz] .ts-voice-sum-body {
    flex: 1 1 auto;
    min-width: 0;
}

[b-imtu0ox0zz] .ts-voice-sum-empty {
    color: var(--hpo-muted);
}

[b-imtu0ox0zz] .ts-voice-sum.is-missing .ts-voice-sum-empty {
    color: inherit;
}

[b-imtu0ox0zz] .ts-voice-line.from-app {
    align-self: flex-start;
    background: var(--hpo-login-card-bg);
    border: 1px solid var(--hpo-border);
}

/* Was man alles sagen kann - leiser als die Frage darüber. */
[b-imtu0ox0zz] .ts-voice-line.ts-voice-hint {
    color: var(--hpo-muted);
    font-size: .95rem;
}

[b-imtu0ox0zz] .ts-voice-line.from-user {
    align-self: flex-end;
    background: var(--hpo-navy);
    color: #fff;
}

/* Fuß: Aufnahmeanzeige links, Knöpfe rechts; auf dem Telefon bricht es um. */
[b-imtu0ox0zz] .ts-voice-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    width: 100%;
}

[b-imtu0ox0zz] .ts-voice-actions .ts-voice-recording {
    margin-right: auto;
    border: none;
    padding: 0;
}

/* Stichworte oben im Sprach-Dialog: das Wort, dahinter der Stand. Grün = erfasst,
   Orange = fehlt noch / unvollständig, Grau = darf fehlen. */
[b-imtu0ox0zz] .ts-voice-checklist {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .5rem;
    list-style: none;
    margin: 0 0 .75rem;
    padding: 0 0 .6rem;
    border-bottom: 1px solid var(--hpo-border);
}

[b-imtu0ox0zz] .ts-voice-item {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .15rem .55rem;
    border: 1px solid var(--hpo-border);
    border-radius: 1rem;
    font-size: .9em;
    color: var(--hpo-text-secondary);
}

[b-imtu0ox0zz] .ts-voice-item.is-done {
    border-color: #198754;
    color: #146c43;
}

[b-imtu0ox0zz] .ts-voice-item.is-done .fa {
    color: #198754;
}

[b-imtu0ox0zz] .ts-voice-item.is-missing .fa,
[b-imtu0ox0zz] .ts-voice-item.is-partial .fa {
    color: var(--hpo-orange);
}

[b-imtu0ox0zz] .ts-voice-item.is-optional {
    color: var(--hpo-muted);
}

/* Auswahl im Sprach-Dialog: Knöpfe untereinander, auf dem Telefon in voller Breite. */
/* Schnellantworten rechtsbündig - auf der Seite, auf der die eigenen Antworten stehen. */
[b-imtu0ox0zz] .ts-voice-options {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .5rem;
    margin-top: .75rem;
}

[b-imtu0ox0zz] .ts-voice-options .btn {
    max-width: 85%;
    text-align: right;
}

/* Am Telefon bleibt :hover nach einem Tipp an der Stelle stehen - die nächste Schnellantwort,
   die dort erscheint, stünde sonst gefüllt blau da. Hell wie "Ansehen", bis man sie antippt. */
@media (hover: none) {
    [b-imtu0ox0zz] .ts-voice-options .btn-outline-primary:hover,
    [b-imtu0ox0zz] .ts-voice-options .btn-outline-primary:focus-visible:not(:active),
    [b-imtu0ox0zz] .ts-voice-options .btn-outline-primary:focus:not(:active) {
        background-color: transparent;
        border-color: var(--bs-primary);
        color: var(--bs-primary);
        box-shadow: none;
    }

    [b-imtu0ox0zz] .ts-voice-options .btn-outline-secondary:hover,
    [b-imtu0ox0zz] .ts-voice-options .btn-outline-secondary:focus-visible:not(:active),
    [b-imtu0ox0zz] .ts-voice-options .btn-outline-secondary:focus:not(:active) {
        background-color: transparent;
        border-color: var(--bs-secondary);
        color: var(--bs-secondary);
        box-shadow: none;
    }
}

[b-imtu0ox0zz] .ts-voice-planned {
    display: inline-block;
    margin-left: .4rem;
    padding: 0 .4rem;
    border-radius: .5rem;
    font-size: .75em;
    background: rgba(255, 255, 255, .25);
}

/* Pegel: ein dünner Balken neben der Zeit; grün, solange gesprochen wird. */
[b-imtu0ox0zz] .ts-voice-meter {
    display: inline-block;
    width: 4rem;
    height: .4rem;
    border-radius: .2rem;
    background: var(--hpo-border);
    overflow: hidden;
}

[b-imtu0ox0zz] .ts-voice-meter-bar {
    display: block;
    height: 100%;
    width: 0;
    background: var(--hpo-muted-light);
    transition: width .1s linear;
}

[b-imtu0ox0zz] .ts-voice-meter-bar.is-speech {
    background: #198754;
}

/* Die Knöpfe im Sprach-Dialog sind so hoch wie die im Erfassen-Dialog - Bootstraps eigene Größe. */

/* Am Ende zwei Zeilen: oben rechts ergänzen, darunter Ansehen/Speichern. */
[b-imtu0ox0zz] .ts-voice-row {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    width: 100%;
}

[b-imtu0ox0zz] .ts-voice-line {
    font-size: 1.05rem;
}

/* Halten zum Sprechen: gross genug für den Daumen, ohne Textauswahl und Kontextmenü beim
   langen Drücken. Gedrückt = rot wie die laufende Aufnahme. */
[b-imtu0ox0zz] .ts-voice-hold {
    /* Feste Breite: "Gedrückt halten" und "Loslassen" dürfen den Knopf unter dem Finger
       nicht schrumpfen lassen. */
    flex: 0 0 12rem;
    max-width: 100%;
    white-space: nowrap;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    touch-action: none;
}

[b-imtu0ox0zz] .ts-voice-hold.is-active {
    background-color: #c0392b;
    border-color: #c0392b;
}

/* Während die App spricht, unterbricht ein Tipp in den Chat. */
[b-imtu0ox0zz] .ts-voice-chat.is-speaking {
    cursor: pointer;
}

/* Von der KI eingetragen, noch nicht angefasst: ein Strich in der Markenfarbe links. Er liegt
   im Feld, nicht davor: ein Schatten nach links ragte aus der Breite der klebenden
   Reiterleiste heraus und war beim Scrollen neben ihr zu sehen. */
[b-imtu0ox0zz] .ts-ai-filled:not(.ts-posrow) {
    border-left: 3px solid var(--hpo-orange);
    padding-left: .6rem;
}

/* Die Karten einer Liste (Mitarbeiter, Fahrzeuge, Material) behalten ihr eigenes Polster -
   der Strich liegt innen als Schatten. */
[b-imtu0ox0zz] .ts-posrow.ts-ai-filled {
    box-shadow: inset 3px 0 0 var(--hpo-orange);
}

[b-imtu0ox0zz] .ts-ai-hint {
    color: var(--hpo-text-secondary);
    font-size: .9rem;
    border-left: 3px solid var(--hpo-orange);
    padding: .25rem .5rem;
    margin-bottom: .5rem;
}

[b-imtu0ox0zz] .ts-ai-hint .fa {
    color: var(--hpo-orange);
}

/* "Verbessern" unter einem Freitext - leise, rechts. */
[b-imtu0ox0zz] .ts-improve {
    display: flex;
    justify-content: flex-end;
    margin-top: -.5rem;
    margin-bottom: .25rem;
}

[b-imtu0ox0zz] .ts-improve .btn-link {
    color: var(--hpo-navy);
    text-decoration: none;
    padding: .1rem .25rem;
}
/* /Shared/ChatBadge.razor.rz.scp.css */
/* Wie die Glocke aufgebaut, damit beide im Kopf der App gleich aussehen. */

.hpo-chat-badge[b-09e6cdqft6] {
    position: relative;
}

.hpo-chat-badge-count[b-09e6cdqft6] {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: #dc3545;
    color: #fff;
    font-size: .65rem;
    font-weight: 600;
    line-height: 16px;
    text-align: center;
}
/* /Shared/ChatLocationPicker.razor.rz.scp.css */
/* Standort teilen: drei Wege oben als Knöpfe, darunter der jeweilige Teil und zuletzt der
   gewählte Ort mit seiner Bezeichnung. Die Knöpfe umbrechen auf schmalen Telefonen, statt aus
   dem Dialog zu ragen. */
.chat-location-modes[b-9lwbitv85a] {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: .9rem;
}

.chat-location-hint[b-9lwbitv85a] {
    font-size: .8rem;
    color: var(--hpo-muted);
    margin-top: .4rem;
}

.chat-location-error[b-9lwbitv85a] {
    font-size: .85rem;
    color: #b02a37;
    margin-top: .4rem;
}

.chat-location-search[b-9lwbitv85a] {
    display: flex;
    gap: .4rem;
}

.chat-location-result[b-9lwbitv85a] {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    width: 100%;
    margin-top: .4rem;
    padding: .55rem .6rem;
    border: 1px solid var(--hpo-border);
    border-radius: 6px;
    background: #fff;
    color: inherit;
    font-size: .875rem;
    text-align: left;
}

.chat-location-result i[b-9lwbitv85a] {
    margin-top: .15rem;
    color: var(--hpo-navy);
}

.chat-location-result.is-picked[b-9lwbitv85a] {
    border-color: var(--hpo-navy);
    background: #eef2f8;
}

.chat-location-picked[b-9lwbitv85a] {
    margin-top: 1rem;
    padding-top: .8rem;
    border-top: 1px solid #e9ecef;
}

.chat-location-coords[b-9lwbitv85a] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin-bottom: .6rem;
    font-family: monospace;
    font-size: .9rem;
}

.chat-location-coords i[b-9lwbitv85a] {
    color: var(--hpo-navy);
}

.chat-location-accuracy[b-9lwbitv85a] {
    font-family: inherit;
    font-size: .75rem;
    color: var(--hpo-muted);
}
/* /Shared/ChatMediaPicker.razor.rz.scp.css */

/* Medien: die Dateien der Unterhaltung im Dialog, nach Kategorie. Die Gruppe ist eine Zeile zum
   Antippen - auf dem Telefon ist das der Griff, nicht ein kleines Dreieck daneben. */
.chat-media-hint[b-zdmnyg5ack] {
    font-size: .8rem;
    color: var(--hpo-muted);
    margin-bottom: .75rem;
}

.chat-media-group[b-zdmnyg5ack] {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .6rem .25rem;
    border: 0;
    border-bottom: 1px solid #e9ecef;
    background: transparent;
    color: var(--hpo-navy);
    font-size: .875rem;
    font-weight: 600;
    text-align: left;
}

.chat-media-group:active[b-zdmnyg5ack] {
    background: #f1f3f5;
}

.chat-media-dot[b-zdmnyg5ack] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.chat-media-group-name[b-zdmnyg5ack] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-media-count[b-zdmnyg5ack] {
    flex: 0 0 auto;
    font-size: .75rem;
    font-weight: 400;
    color: var(--hpo-muted);
}

/* Feste Spaltenbreite statt fester Anzahl: Auf einem schmalen Gerät rutschen die Kacheln
   untereinander, statt zu schrumpfen. */
.chat-media-grid[b-zdmnyg5ack] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: .5rem;
    padding: .6rem 0;
}

/* Die Kachel traegt zwei Knoepfe: die ganze Flaeche oeffnet, das Teilen-Symbol oben rechts haengt
   an. Ineinander verschachtelt duerfen Knoepfe nicht sein, deshalb der Rahmen um beide. */
.chat-media-item[b-zdmnyg5ack] {
    position: relative;
    min-width: 0;
}

.chat-media-open[b-zdmnyg5ack] {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    width: 100%;
    padding: .4rem;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    background: #fff;
    text-align: left;
}

.chat-media-open:active[b-zdmnyg5ack] {
    border-color: var(--hpo-navy);
    background: #f8f9fa;
}

.chat-media-attach[b-zdmnyg5ack] {
    position: absolute;
    top: .7rem;
    right: .7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--hpo-navy);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}

.chat-media-attach:active[b-zdmnyg5ack] {
    background: var(--hpo-navy);
    color: #fff;
}

/* Fester Rahmen fuer das Bild - sonst steht jede Kachel so hoch wie ihr Foto, und die Reihe
   sieht aus wie eine Treppe. */
.chat-media-thumb[b-zdmnyg5ack] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    border-radius: 4px;
    background: #f1f3f5;
    color: var(--hpo-muted-light);
    overflow: hidden;
}

.chat-media-thumb img[b-zdmnyg5ack] {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}

.chat-media-thumb-file[b-zdmnyg5ack] {
    font-size: 1.6rem;
}

.chat-media-name[b-zdmnyg5ack] {
    font-size: .72rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-media-date[b-zdmnyg5ack] {
    font-size: .68rem;
    color: var(--hpo-muted);
}

.chat-media-empty[b-zdmnyg5ack] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    padding: 2.5rem 1rem;
    color: var(--hpo-muted-light);
    text-align: center;
}

.chat-media-empty i[b-zdmnyg5ack] {
    font-size: 2.2rem;
}

/* Suchfeld im Medien-Dialog: das Zeichen liegt im Feld, damit die Zeile nicht zwei Kaesten
   nebeneinander hat - auf einem Telefon ist dafuer kein Platz. */
.chat-media-search[b-zdmnyg5ack] {
    position: relative;
    margin-bottom: .75rem;
}

.chat-media-search i[b-zdmnyg5ack] {
    position: absolute;
    top: 50%;
    left: .6rem;
    transform: translateY(-50%);
    color: var(--hpo-muted-light);
    font-size: .85rem;
}

.chat-media-search .form-control[b-zdmnyg5ack] {
    padding-left: 2rem;
}
/* /Shared/Controls/HpoFileEditDialog.razor.rz.scp.css */
/* Aufbau wie der Beleg der Schadensmeldung (.damage-attachment), die Vorschau aber gross genug,
   um das Foto zu erkennen - hier geht es um genau diese eine Datei. */
.file-edit-attachment[b-b2ut66v7vf] {
    display: flex;
    align-items: center;
    gap: .75rem;
    background: #f8f9fa;
    border-radius: 6px;
    padding: .5rem;
    margin-bottom: .5rem;
}

.file-edit-thumb[b-b2ut66v7vf] {
    flex: 0 0 120px;
    display: inline-flex;
    border-radius: 6px;
    background: #fff;
    font-size: 3rem;
    color: var(--hpo-muted-light);
    cursor: pointer;
}

.file-edit-name[b-b2ut66v7vf] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.file-edit-sub[b-b2ut66v7vf] {
    display: block;
    color: var(--hpo-muted);
}
/* /Shared/Controls/HpoFilePicker.razor.rz.scp.css */
/* Kachelliste der angehängten Dateien.

   Dieselbe Darstellung wie in der Projektdokumentation. Die Regeln stehen hier noch einmal,
   weil scoped CSS nur für die Elemente gilt, die das jeweilige Bauteil selbst rendert -
   die Seite kann sie dem Steuerelement nicht vererben. */

.attachment-list[b-dszan8ldhw] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.attachment-item[b-dszan8ldhw] {
    display: flex;
    align-items: center;
    gap: .6rem;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: .4rem .5rem;
}

.attachment-thumb[b-dszan8ldhw] {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    border-radius: 6px;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--hpo-muted-light);
    font-size: 1.6rem;
}

    .attachment-thumb img[b-dszan8ldhw] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.attachment-info[b-dszan8ldhw] {
    flex: 1 1 auto;
    min-width: 0;
}

/* Feste Groesse - sonst erbt der Text die x-large-Schrift von body.e-bigger. */
.attachment-title[b-dszan8ldhw] {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .85rem;
    font-weight: 600;
}

.attachment-sub[b-dszan8ldhw] {
    font-size: .8rem;
    color: var(--hpo-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Gewaehlte, noch nicht gespeicherte Dateien im Erfassungsdialog - wie in ProjectFilesMine. */
.files-staged[b-dszan8ldhw] {
    list-style: none;
    margin: .5rem 0 0 0;
    padding: 0;
}

    .files-staged li[b-dszan8ldhw] {
        display: flex;
        align-items: center;
        gap: .5rem;
        padding: .25rem 0;
        border-bottom: 1px solid #f1f3f5;
        font-size: .9em;
    }

.files-staged-thumb[b-dszan8ldhw] {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 4px;
}

.files-staged-icon[b-dszan8ldhw] {
    flex: 0 0 44px;
    font-size: 1.5rem;
    color: var(--hpo-muted);
    text-align: center;
}

.files-staged-name[b-dszan8ldhw] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.files-staged-size[b-dszan8ldhw] {
    flex: 0 0 auto;
    color: var(--hpo-muted);
    font-size: .85em;
}

.files-staged-remove[b-dszan8ldhw] {
    flex: 0 0 auto;
    color: #b02a37;
    padding: 0 .25rem;
}
/* /Shared/Controls/HpoFileThumb.razor.rz.scp.css */
/* Füllt den Behälter des Aufrufers; das Bild wird beschnitten, nicht verzerrt. */
.hpo-file-thumb[b-4cn8eccvhd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: inherit;
}

    .hpo-file-thumb img[b-4cn8eccvhd] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: inherit;
    }
/* /Shared/Controls/HpoImageViewer.razor.rz.scp.css */
/* Großansicht eines Bildes. Fest über der Seite und über jedem Dialog (die liegen bis 1690,
   das Auswahlblatt auf 1700) - aus einem Dialog heraus geöffnet muss sie obenauf liegen. */
.hpo-image-viewer[b-y78p7csksg] {
    position: fixed;
    inset: 0;
    z-index: 1800;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(0, 0, 0, .85);
}

.hpo-image-viewer img[b-y78p7csksg] {
    display: block;
    max-width: 100%;
    /* Höhe des Fensters abzüglich des Innenabstands - sonst läuft das Bild unten heraus. */
    max-height: calc(100vh - 3rem);
    max-height: calc(100dvh - 3rem);
    border-radius: 4px;
}

/* Herunterladen sitzt links neben dem Schließen-Kreuz - gleicher Abstand, gleiche Größe,
   damit die beiden als Paar lesbar sind. 44px: die Mindestgröße eines Ziels für den Finger
   (mit Handschuh auf der Baustelle erst recht). */
.hpo-image-viewer-action[b-y78p7csksg],
.hpo-image-viewer-close[b-y78p7csksg] {
    position: absolute;
    top: .75rem;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 22px;
    background: rgba(255, 255, 255, .15);
    color: #fff;
    font-size: 1.1rem;
}

.hpo-image-viewer-action[b-y78p7csksg] {
    right: calc(1rem + 52px);
}

.hpo-image-viewer-close[b-y78p7csksg] {
    right: 1rem;
}

/* Der Fokus liegt beim Öffnen auf der Überlagerung selbst (Dialog) - ohne Rahmen darum. */
.hpo-image-viewer:focus[b-y78p7csksg] {
    outline: none;
}
/* /Shared/LanguageSelector.razor.rz.scp.css */
/* Sprachwahl: ein Auswahlfeld im Muster der uebrigen (HpoSelect), nur mit Flagge im Inhalt.
   Die Breite ist fest, damit das Feld im Menuefuss und auf der Anmeldemaske gleich aussieht -
   und damit es eine Zeile bleibt, gleich wie viele Sprachen dazukommen. */
.hpo-language[b-9icso2y2wf] {
    width: 11rem;
}

/* Inhalt des zugeklappten Feldes: Flagge und Name in einer Zeile. Das aeussere span traegt
   bereits die Regeln von ".hpo-select-trigger > span" aus controls.css. */
.hpo-language-value[b-9icso2y2wf] {
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* Eine Zeile des aufgeklappten Blattes - .hpo-sheet-item ist sonst ein Block. */
.hpo-language-option[b-9icso2y2wf] {
    display: flex;
    align-items: center;
    gap: .6rem;
}

/* Die Flagge braucht einen Rahmen: Weiss auf Weiss (Polen) waere sonst ein halber Balken. */
.hpo-language-flag[b-9icso2y2wf] {
    display: block;
    width: 20px;
    height: 14px;
    flex: 0 0 auto;
    border: 1px solid #c9ced4;
    border-radius: 2px;
    overflow: hidden;
    line-height: 0;
}

    /* ::deep, weil das SVG als Markup eingesetzt wird und die Kennung des bereichsbezogenen
       CSS nicht traegt. */
    .hpo-language-flag[b-9icso2y2wf]  svg {
        display: block;
        width: 100%;
        height: 100%;
    }

.hpo-language-name[b-9icso2y2wf] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Shared/MainLayout.razor.rz.scp.css */
.page[b-vd6i2qjw69] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-vd6i2qjw69] {
    flex: 1;
}

.sidebar[b-vd6i2qjw69] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-vd6i2qjw69] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-vd6i2qjw69]  a, .top-row[b-vd6i2qjw69]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-vd6i2qjw69]  a:hover, .top-row[b-vd6i2qjw69]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-vd6i2qjw69]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row:not(.auth)[b-vd6i2qjw69] {
        display: none;
    }

    .top-row.auth[b-vd6i2qjw69] {
        justify-content: space-between;
    }

    .top-row[b-vd6i2qjw69]  a, .top-row[b-vd6i2qjw69]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-vd6i2qjw69] {
        flex-direction: row;
    }

    .sidebar[b-vd6i2qjw69] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-vd6i2qjw69] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-vd6i2qjw69]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-vd6i2qjw69], article[b-vd6i2qjw69] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}
/* /Shared/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-w7tvt0fvoi] {
    background-color: rgba(255, 255, 255, 0.1);
}

.top-row[b-w7tvt0fvoi] {
    height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-w7tvt0fvoi] {
    font-size: 1.1rem;
}

.oi[b-w7tvt0fvoi] {
    width: 2rem;
    font-size: 1.1rem;
    vertical-align: text-top;
    top: -2px;
}

.nav-item[b-w7tvt0fvoi] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-w7tvt0fvoi] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-w7tvt0fvoi] {
        padding-bottom: 1rem;
    }

    .nav-item[b-w7tvt0fvoi]  a {
        color: #d7d7d7;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
    }

.nav-item[b-w7tvt0fvoi]  a.active {
    background-color: rgba(255,255,255,0.25);
    color: white;
}

.nav-item[b-w7tvt0fvoi]  a:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

@media (min-width: 641px) {
    .navbar-toggler[b-w7tvt0fvoi] {
        display: none;
    }

    .collapse[b-w7tvt0fvoi] {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }
}
/* /Shared/NotificationBell.razor.rz.scp.css */
.hpo-bell[b-ykxx0h385z] {
    position: relative;
    display: flex;
    align-items: center;
}

/* Zähler an der Glocke - klein und oben rechts, wie man es vom Telefon kennt. */
.hpo-bell-badge[b-ykxx0h385z] {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    border-radius: 8px;
    background: #dc3545;
    color: #fff;
    font-size: .62rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

/* Fängt den Klick daneben ab, damit die Liste wieder zugeht. */
.hpo-bell-backdrop[b-ykxx0h385z] {
    position: fixed;
    inset: 0;
    z-index: 1040;
}

/* Die Farbe muss hier stehen: die Glocke haengt in der Kopfzeile, und die vererbt
   color: #fff. Ohne eigene Angabe stuenden Ueberschrift und Titel weiss auf weiss. */
/* Am Bildschirm ausgerichtet, nicht an der Glocke.
   Vorher hing das Feld mit right: 0 am Glockensymbol - und rechts daneben steht noch der
   Verbindungszustand. Seine Breite (92vw) wurde also von einem Punkt aus gemessen, der gar
   nicht am Bildschirmrand liegt, und der Rest schob sich links aus dem Bild.
   left und right zusammen mit margin-left: auto: das Feld füllt auf schmalen Geräten die
   Breite zwischen den beiden Rändern und bleibt auf breiten bei 340px, rechts angeschlagen.
   top folgt der Kopfleiste (min-height: 48px in controls.css) plus demselben Abstand wie
   zuvor. */
.hpo-bell-panel[b-ykxx0h385z] {
    position: fixed;
    top: 54px;
    left: .5rem;
    right: .5rem;
    margin-left: auto;
    z-index: 1050;
    width: auto;
    max-width: 340px;
    max-height: 70vh;
    overflow-y: auto;
    background: #fff;
    color: #212529;
    border: 1px solid var(--hpo-border);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
}

.hpo-bell-head[b-ykxx0h385z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .5rem .6rem;
    border-bottom: 1px solid #e9ecef;
    font-weight: 600;
    font-size: .85rem;
}

.hpo-bell-clear[b-ykxx0h385z] {
    border: none;
    background: none;
    padding: 0;
    color: #dc3545;
    font-size: .75rem;
}

.hpo-bell-empty[b-ykxx0h385z] {
    padding: 1rem .6rem;
    text-align: center;
    color: var(--hpo-muted);
    font-size: .8rem;
}

.hpo-bell-item[b-ykxx0h385z] {
    display: flex;
    align-items: flex-start;
    gap: .35rem;
    padding: .45rem .6rem;
    border-bottom: 1px solid #f1f3f5;
}

    /* Ungelesenes hebt sich ab, bis die Liste einmal offen war. */
    .hpo-bell-item.is-unread[b-ykxx0h385z] {
        background: #f1f5fa;
    }

.hpo-bell-item-body[b-ykxx0h385z] {
    flex: 1 1 auto;
    min-width: 0;
}

.hpo-bell-item-title[b-ykxx0h385z] {
    font-size: .82rem;
    font-weight: 600;
}

.hpo-bell-item-text[b-ykxx0h385z] {
    font-size: .76rem;
    color: var(--hpo-text-secondary);
}

.hpo-bell-item-date[b-ykxx0h385z] {
    font-size: .68rem;
    color: var(--hpo-muted-light);
}

.hpo-bell-remove[b-ykxx0h385z] {
    flex: 0 0 auto;
    border: none;
    background: none;
    color: var(--hpo-muted-light);
    padding: 0 .15rem;
}
/* /Shared/ProjectFilesMine.razor.rz.scp.css */
.attachment-page[b-cpqogpwehw] {
    padding: 0;
}

.attachment-status[b-cpqogpwehw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin: 0 0 .75rem;
}

/* Feste Groesse - sonst erbt der Text die x-large-Schrift von body.e-bigger. */
.attachment-status-text[b-cpqogpwehw] {
    font-size: .875rem;
    color: var(--hpo-muted);
}

.attachment-list[b-cpqogpwehw] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.attachment-item[b-cpqogpwehw] {
    display: flex;
    align-items: center;
    gap: .6rem;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: .4rem .5rem;
}

.attachment-thumb[b-cpqogpwehw] {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    border-radius: 6px;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--hpo-muted-light);
    font-size: 1.6rem;
}

    .attachment-thumb img[b-cpqogpwehw] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.attachment-info[b-cpqogpwehw] {
    flex: 1 1 auto;
    min-width: 0;
}

.attachment-title[b-cpqogpwehw] {
    font-size: .85rem;
    font-weight: 600;
}

.attachment-sub[b-cpqogpwehw] {
    font-size: .8rem;
    color: var(--hpo-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Die noch nicht gespeicherte Auswahl: eine schlichte Liste unter den beiden Knoepfen. Sie soll
   nach Zwischenstand aussehen und nicht nach Ablage - deshalb ohne Rahmen und ohne Vorschau. */
.files-staged[b-cpqogpwehw] {
    list-style: none;
    margin: .5rem 0 0 0;
    padding: 0;
}

    .files-staged li[b-cpqogpwehw] {
        display: flex;
        align-items: center;
        gap: .5rem;
        padding: .25rem 0;
        border-bottom: 1px solid #f1f3f5;
        font-size: .9em;
    }

/* Dieselben Masse wie das Vorschaubild der Schadensmeldung (DamageReportView). */
.files-staged-thumb[b-cpqogpwehw] {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 4px;
}

.files-staged-icon[b-cpqogpwehw] {
    flex: 0 0 44px;
    font-size: 1.5rem;
    color: var(--hpo-muted);
    text-align: center;
}

.files-staged-name[b-cpqogpwehw] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.files-staged-size[b-cpqogpwehw] {
    flex: 0 0 auto;
    color: var(--hpo-muted);
    font-size: .85em;
}

.files-staged-remove[b-cpqogpwehw] {
    flex: 0 0 auto;
    color: #b02a37;
    padding: 0 .25rem;
}
/* /Shared/ProjectFilesProvided.razor.rz.scp.css */
.docs-page[b-cfn7182kfw] {
    padding: 0;
}

.docs-filter[b-cfn7182kfw] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin: 0 0 .75rem;
}

.docs-group[b-cfn7182kfw] {
    margin-bottom: 1rem;
}

/* Feste Groesse - sonst erbt der Text die x-large-Schrift von body.e-bigger. */
.docs-group-title[b-cfn7182kfw] {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--hpo-navy);
    margin: 0 0 .35rem;
}

.docs-group-dot[b-cfn7182kfw] {
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    flex: 0 0 auto;
}

.docs-group-count[b-cfn7182kfw] {
    font-weight: 400;
    color: var(--hpo-muted);
}

.attachment-list[b-cfn7182kfw] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.attachment-item[b-cfn7182kfw] {
    display: flex;
    align-items: center;
    gap: .6rem;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: .4rem .5rem;
}

.docs-item[b-cfn7182kfw] {
    cursor: pointer;
}

    .docs-item:active[b-cfn7182kfw] {
        background: #f1f4f8;
    }

.docs-item-busy[b-cfn7182kfw] {
    opacity: .7;
}

.attachment-thumb[b-cfn7182kfw] {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 6px;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6c8ebf;
    font-size: 1.4rem;
}

.attachment-info[b-cfn7182kfw] {
    flex: 1 1 auto;
    min-width: 0;
}

.attachment-title[b-cfn7182kfw] {
    font-size: .85rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attachment-sub[b-cfn7182kfw] {
    font-size: .8rem;
    color: var(--hpo-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}