/* ──────────────────────────────────────────────────────────────────────────
   Styles der eigenen Steuerelemente (Shared/Controls) - Ersatz für die
   Syncfusion-Komponenten. Nutzt ausschliesslich Bootstrap 5 + Font Awesome,
   die ohnehin schon geladen sind.
   ────────────────────────────────────────────────────────────────────────── */

/* ── Formularfeld: Beschriftung steht ueber dem Eingabefeld ──
   Feste rem-Groessen, damit die (fuer Syncfusion noetige) Regel
   body.e-bigger { font-size: x-large } die Formulare nicht aufblaeht. */
.hpo-field {
    margin-bottom: .85rem;
}

.hpo-label {
    display: block;
    margin-bottom: .25rem;
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.3;
    color: #5a6472;
}

/* 1rem entspricht dem, was Bootstrap fuer .form-control ohnehin setzt - die
   Eingabefelder bleiben also so gross wie bisher, nur die Beschriftung wandert
   nach oben. */
.hpo-field .form-control {
    font-size: 1rem;
    min-height: 2.6rem;
}

.hpo-field textarea.form-control {
    min-height: 5.5rem;
}

.hpo-field .form-control:disabled,
.hpo-field .hpo-readonly {
    background-color: #f2f2f2;
    color: #55606e;
}

.hpo-field .form-control:focus {
    border-color: var(--hpo-navy, #324E76);
    box-shadow: 0 0 0 .18rem rgba(50, 78, 118, .15);
}

/* ── Schalter (HpoCheckBox) ── */
.hpo-checkbox {
    font-size: .95rem;
    padding-left: 3rem;
}

.hpo-checkbox.form-switch .form-check-input {
    width: 2.5rem;
    height: 1.25rem;
    margin-left: -3rem;
    margin-top: .1rem;
    flex-shrink: 0;
}

.hpo-checkbox.form-switch .form-check-input:checked {
    background-color: var(--hpo-navy, #324E76);
    border-color: var(--hpo-navy, #324E76);
}

.hpo-checkbox.form-switch .form-check-input:focus {
    border-color: var(--hpo-navy, #324E76);
    box-shadow: 0 0 0 .18rem rgba(50, 78, 118, .15);
}

.hpo-checkbox .form-check-label {
    line-height: 1.45rem;
}

/* ── Kopfzeile einer Liste: links die Ueberschrift, rechts die Aktion ──
   "Neu" steht rechts wie in den Views mit Datumsauswahl - der Knopf soll auf
   jedem Bildschirm an derselben Stelle sitzen. */
.hpo-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: .5rem;
    flex-shrink: 0;
    margin-bottom: .75rem;
}

.hpo-toolbar > .btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

.hpo-toolbar-title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #495057;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hpo-toolbar-count {
    margin-left: .4rem;
    font-weight: 400;
    color: #8a929c;
}

/* Foto-/Datei-Schaltflaechen in den Erfassungsdialogen. */
.hpo-file-buttons {
    display: flex;
    gap: .5rem;
    margin-top: .25rem;
}

.hpo-file-buttons > label {
    flex: 1 1 0;
    margin: 0;
}

/* ── Statuskennzeichen der Listeneintraege ──
   Der Status steckt einheitlich im Badge, nicht im Rand der Karte. Palette wie
   bei den Toasts (Bootstraps Alert-Toene), damit "gelb heisst offen" ueberall
   dasselbe bedeutet. */
.hpo-badge {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    padding: .1rem .55rem;
    border-radius: 10rem;
    border: 1px solid #ced4da;
    background: #e9ecef;
    color: #495057;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

.hpo-badge i {
    font-size: .85em;
}

/* offen, Entwurf, gemeldet, beantragt, wartet auf Uebertragung */
.hpo-badge-open {
    background: #fff3cd;
    border-color: #ffecb5;
    color: #664d03;
}

/* in Bearbeitung, bereit zur Uebertragung */
.hpo-badge-progress {
    background: #cff4fc;
    border-color: #b6effb;
    color: #055160;
}

/* erledigt, genehmigt, uebertragen */
.hpo-badge-done {
    background: #d1e7dd;
    border-color: #badbcc;
    color: #0f5132;
}

/* abgelehnt */
.hpo-badge-rejected {
    background: #f8d7da;
    border-color: #f5c2c7;
    color: #842029;
}

/* freigegeben, abgerechnet - abgeschlossen und nicht mehr aenderbar */
.hpo-badge-locked {
    background: #dbe4f0;
    border-color: #c3d1e4;
    color: #263f60;
}

/* ── Aufbau einer Listenkarte ──
   Aktionen immer oben rechts, Statuskennzeichen immer unten rechts - in jeder
   Liste an derselben Stelle. */
.hpo-card-actions {
    display: flex;
    align-items: center;
    gap: .1rem;
    flex: 0 0 auto;
    margin-left: auto;
}

.hpo-card-action {
    border: 0;
    background: transparent;
    color: #8a929c;
    padding: .25rem .45rem;
    border-radius: 4px;
    line-height: 1;
    font-size: .95rem;
}

.hpo-card-action:hover {
    background: #eef1f5;
    color: var(--hpo-navy, #324E76);
}

.hpo-card-action-delete:hover {
    background: #fdf2f3;
    color: #dc3545;
}

.hpo-card-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .45rem;
}

/* ── Spinner ── */
.hpo-spinner-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .6);
}

.hpo-spinner-box {
    text-align: center;
    color: var(--hpo-navy, #324E76);
}

.hpo-spinner-label {
    margin-top: .5rem;
    font-size: .9rem;
}

/* ── Gemeinsamer Hintergrund für Overlay-Elemente ──
   Ebenen (von unten nach oben): Seitenmenü 1400 · Dialog 1500 · verschachtelter
   Dialog 1600 · Auswahlliste 1690 · Toast 1750 · Melde-/Bestätigungsdialog 1800 ·
   Spinner 2000. Eine Auswahlliste muss über jedem Dialog liegen, in dem sie steht. */
.hpo-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 1400;
}

.hpo-modal-overlay {
    z-index: 1500;
}

.hpo-modal-nested.hpo-modal-overlay {
    z-index: 1600;
}

.hpo-select-overlay {
    z-index: 1690;
    background: rgba(0, 0, 0, .3);
}

/* ── Auswahlliste (HpoSelect) ── */
.hpo-select-box {
    position: relative;
}

.hpo-select-trigger {
    display: flex;
    align-items: center;
    background-color: #fff;
    /* Platz fuer den Pfeil am rechten Rand ... */
    padding-right: 2.25rem;
}

/* ... und zusaetzlich fuer die Leeren-Schaltflaeche, wenn sie sichtbar ist. */
.hpo-select-clearable .hpo-select-trigger {
    padding-right: 3.75rem;
}

.hpo-select-trigger > span {
    flex: 1 1 auto;
    min-width: 0;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.hpo-select-trigger:disabled {
    background-color: #f2f2f2;
    opacity: 1;
}

.hpo-select-empty {
    color: #9aa3ad;
}

.hpo-select-caret {
    position: absolute;
    right: .75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #8a929c;
    font-size: .85rem;
    pointer-events: none;
}

.hpo-select-clear {
    position: absolute;
    right: 2.1rem;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: #9aa3ad;
    padding: .2rem .35rem;
    line-height: 1;
    font-size: .85rem;
    z-index: 3;
}

.hpo-select-clear:hover {
    color: #dc3545;
}

/* ── Datumsauswahl mit Blättern (HpoDateNavigator) ──
   Immer einzeilig. Die Pfeile sind buendig ans Datumsfeld gesetzt (input-group),
   danach folgt "Heute" mit Abstand. Der Navigator waechst mit, damit eine
   nachfolgende Schaltflaeche ("Neu") rechts am Rand steht. */
/* Die Datumsnavigation bleibt immer eine Zeile und faellt nie unter 215px -
   darunter wird das Datum abgeschnitten und "Heute" rueckt vom Datum ab.
   Reicht der Platz nicht, weicht die Schaltflaeche daneben in die zweite
   Zeile aus (siehe .ts-toolbar / .absense-toolbar). */
.hpo-datenav {
    display: flex;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: .5rem;
    flex: 1 1 auto;
    min-width: 215px;
}

.hpo-datenav-group {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: nowrap;
}

.hpo-datenav-btn,
.hpo-datenav-today {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Das Datumsfeld ist das einzige Element, das mitwaechst und schrumpft -
   nach oben aber begrenzt, sonst zieht es sich auf breiten Geraeten unnoetig auf.

   Das Kalendersymbol zeichnen wir selbst, weil Chrome unter Android
   ::-webkit-calendar-picker-indicator gar nicht darstellt - dort stuende das
   Feld sonst ohne jeden Hinweis da. Es sitzt rechts an derselben Stelle wie
   das native, damit es nur eines bleibt; das native wird unsichtbar geschaltet
   (nicht entfernt) und liegt als Schaltflaeche darunter. Am Rechner oeffnet ein
   Klick darauf weiterhin den Kalender, auf dem Handy tut das ein Tippen ins Feld.
   Der Innenabstand ist beidseitig gleich, sonst stuende das Datum nicht mittig. */
.hpo-datenav-input {
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
    max-width: 300px;
    padding-left: 1.9rem;
    padding-right: 1.9rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236c757d' stroke-width='1.3' stroke-linecap='round'%3E%3Crect x='1.6' y='2.6' width='12.8' height='11.8' rx='1.6'/%3E%3Cpath d='M1.6 6.4h12.8M5 1.2v2.8M11 1.2v2.8'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .55rem center;
    background-size: 1rem 1rem;
}

/* Unsichtbar, aber weiterhin anklickbar - und per negativem Aussenabstand unter
   das gezeichnete Symbol geschoben, damit der Klick dort landet, wo man ihn
   erwartet. Browser ohne dieses Pseudoelement ignorieren die Regel. */
.hpo-datenav-input::-webkit-calendar-picker-indicator {
    opacity: 0;
    width: 2rem;
    margin-right: -1.4rem;
    cursor: pointer;
}

/* Schaltflaechen neben der Datumsauswahl ("Neu") behalten ihre Breite und
   stehen dadurch immer rechts am Rand. Wird es zu eng, rutschen sie in die
   zweite Zeile - die Datumsnavigation gibt ihre 215px nicht her (das Umbrechen
   erlauben .ts-toolbar und .absense-toolbar in ihrem eigenen CSS). */
.absense-toolbar > .btn,
.ts-toolbar > .btn {
    flex: 0 0 auto;
    white-space: nowrap;
    margin-left: auto;
}

/* Auswahl-Overlay: auf dem Handy als Blatt von unten, ab Tablet zentriert. */
.hpo-sheet {
    position: fixed;
    z-index: 1700;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 85vh;
    /* Die Hoehe wird beim Oeffnen aus der Zahl der Eintraege eingefroren (--hpo-sheet-rows,
       gesetzt von HpoSelect). Ohne das schrumpft das Blatt beim Filtern mit der Trefferzahl
       und wandert dabei nach unten - die Liste springt einem beim Tippen unter den Fingern weg. */
    height: min(calc(var(--hpo-sheet-rows, 100vh) + var(--hpo-sheet-chrome, 0px)), 85vh);
    display: flex;
    flex-direction: column;
    background: #fff;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, .25);
}

@media (min-width: 768px) {
    .hpo-sheet {
        left: 50%;
        right: auto;
        bottom: auto;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 480px;
        max-width: calc(100vw - 2rem);
        max-height: 70vh;
        height: min(calc(var(--hpo-sheet-rows, 100vh) + var(--hpo-sheet-chrome, 0px)), 70vh);
        border-radius: 8px;
        box-shadow: 0 4px 24px rgba(0, 0, 0, .25);
    }
}

.hpo-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .75rem 1rem;
    background: var(--hpo-navy, #324E76);
    color: #fff;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

.hpo-sheet-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.hpo-sheet-title {
    font-weight: 600;
    font-size: 1.05rem;
}

.hpo-sheet-search {
    padding: .5rem .75rem;
    border-bottom: 1px solid #e5e5e5;
}

.hpo-sheet-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.hpo-sheet-item {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    border-bottom: 1px solid #f0f0f0;
    background: transparent;
    padding: .75rem 1rem;
    min-height: 46px;
    font-size: .95rem;
}

.hpo-sheet-item:hover {
    background: #E3F2FD;
}

.hpo-sheet-item-selected {
    background: #E3F2FD;
    font-weight: 600;
}

.hpo-sheet-item-empty {
    color: #888;
    font-style: italic;
}

.hpo-sheet-empty {
    padding: 1rem;
    text-align: center;
    color: #888;
}

/* ── Dialog / Modal ── */
.hpo-modal-wrap {
    position: fixed;
    inset: 0;
    z-index: 1550;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.hpo-modal-nested.hpo-modal-wrap {
    z-index: 1650;
}

.hpo-dialog.hpo-modal-wrap {
    z-index: 1850;
}

.hpo-dialog.hpo-modal-overlay {
    z-index: 1800;
}

.hpo-modal {
    pointer-events: auto;
    background: #fff;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 1rem);
    max-width: calc(100vw - 1rem);
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .3);
}

.hpo-modal-full {
    width: 100vw;
    max-width: 100vw;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
}

.hpo-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .75rem 1rem;
    background: var(--hpo-navy, #324E76);
    color: #fff;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    flex: 0 0 auto;
}

.hpo-modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.hpo-modal-title {
    font-weight: 600;
    font-size: 1.05rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hpo-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: .75rem 1rem 1rem;
}

/* Dialoge mit Reitern: oben kein Polster. Die Reiterleiste klebt per sticky am
   oberen Rand - bliebe darueber Polster stehen, wuerde durchscrollender Inhalt
   in diesem Streifen sichtbar. */
.hpo-modal-tabs .hpo-modal-body {
    padding-top: 0;
}

.hpo-modal-footer {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    padding: .75rem 1rem;
    border-top: 1px solid #e5e5e5;
    background: #fafafa;
}

.hpo-dialog .hpo-modal-body {
    padding: 1.25rem 1rem;
}

.hpo-dialog-text {
    white-space: pre-line;
    font-size: .95rem;
    line-height: 1.5;
}

/* Fehlerlisten der DataAnnotations-Prüfung erben sonst ebenfalls die
   x-large-Schrift von body.e-bigger. */
.hpo-modal-body .validation-errors,
.hpo-modal-body .validation-message {
    font-size: .85rem;
}

/* ── Reiter (HpoTabs) ── */
.hpo-tabs {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Bleibt beim Scrollen des Dialoginhalts oben stehen. sticky ersetzt hier
   relative - als Bezugsrahmen fuer die Pfeile wirkt es genauso. */
.hpo-tab-header-wrap {
    position: sticky;
    top: 0;
    z-index: 3;
    flex: 0 0 auto;
    background: #fff;
}

.hpo-tab-header {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-bottom: 3px solid #e5e5e5;
    /* Scrollbalken ausblenden - stattdessen zeigen die Pfeile die Richtung an. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.hpo-tab-header::-webkit-scrollbar {
    display: none;
}

/* Pfeile am Rand: liegen ueber der Leiste, der Verlauf laesst den angeschnittenen
   Reiter darunter weich auslaufen. */
.hpo-tab-scroll {
    position: absolute;
    top: 0;
    bottom: 3px;
    width: 2.5rem;
    border: 0;
    padding: 0;
    display: flex;
    align-items: center;
    color: var(--hpo-navy, #324E76);
    font-size: .9rem;
    z-index: 2;
}

.hpo-tab-scroll-left {
    left: 0;
    justify-content: flex-start;
    padding-left: .25rem;
    background: linear-gradient(to right, #fff 55%, rgba(255, 255, 255, 0));
}

.hpo-tab-scroll-right {
    right: 0;
    justify-content: flex-end;
    padding-right: .25rem;
    background: linear-gradient(to left, #fff 55%, rgba(255, 255, 255, 0));
}

.hpo-tab-button {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    padding: .85rem 1.15rem;
    white-space: nowrap;
    color: var(--hpo-navy, #324E76);
    border-bottom: 3px solid transparent;
    margin-bottom: -3px;
    font-size: 1.05rem;
}

.hpo-tab-button.active {
    font-weight: 600;
    border-bottom-color: var(--hpo-orange, #DD6B2A);
}

.hpo-tab-content {
    flex: 1 1 auto;
    min-height: 0;
    /* Etwas Luft, damit das erste Feld nicht an der Reiterleiste klebt. */
    padding-top: .75rem;
}

.hpo-tab-pane[hidden] {
    display: none;
}

/* ── Kopfzeile (Ersatz für SfAppBar) ── */
.hpo-appbar {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 48px;
    /* Rechts mehr Luft als links: links steht eine Schaltflaeche, die ihren eigenen
       Innenabstand mitbringt, rechts endet die Leiste mit einem blanken Symbol. Mit
       gleichem Wert auf beiden Seiten klebte der Verbindungszustand am Bildschirmrand. */
    padding: 0 .9rem 0 .5rem;
    background-color: var(--hpo-orange, #DD6B2A);
    color: #fff;
}

/* Nimmt den freien Platz selbst ein. Ohne flex-grow schluckt ein separates
   Fuellelement den Platz, und ein langer Titel wird beim Schrumpfen bis auf
   Null gestaucht - dann steht in der Kopfzeile gar nichts mehr. */
.hpo-appbar-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 1.05rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hpo-appbar-button {
    border: 0;
    background: transparent;
    color: #fff;
    padding: .4rem .6rem;
    border-radius: 4px;
    font-size: 1rem;
}

/* Feste Groesse fuer die Symbole rechts (Abgleich, Online-Status): sie erben
   sonst die x-large-Schrift von body.e-bigger. line-height: 1, weil das Symbol
   sonst auf der Grundlinie der geerbten Zeilenhoehe sitzt und dadurch tiefer
   steht als die Mitte der Leiste. */
.hpo-appbar .fa {
    font-size: 1rem;
    line-height: 1;
}

/* Eigener Flex-Kasten je Statussymbol - zentriert es unabhaengig von der
   Zeilenhoehe, die sein Umfeld vorgibt. */
.hpo-appbar-status {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

/* Der Abgleich zeigt nur waehrend eines Laufs ein Symbol. Bliebe die leere Huelle
   stehen, riss der Abstand der Leiste um eine Luecke auf und die Symbole rechts
   ruecken beim Abgleich sichtbar hin und her. */
.hpo-appbar-status:empty {
    display: none;
}

.hpo-appbar-button:hover,
.hpo-appbar-button:focus {
    background-color: var(--hpo-orange-hover, #BB5B24);
    color: #fff;
}

/* ── Seitenmenü (Ersatz für SfSidebar) ── */
.hpo-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    max-width: 85vw;
    background: #fff;
    z-index: 1420;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 2px 0 12px rgba(0, 0, 0, .2);
    transform: translateX(-100%);
    transition: transform .25s ease;
    /* Feste Basisgroesse: body.e-bigger (x-large, fuer Syncfusion) darf das Menue
       nicht aufblaehen. */
    font-size: 1rem;
}

.hpo-nav {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

/* ── Benutzerblock im Menuekopf ── */
.hpo-nav-user {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .9rem .85rem;
    border-bottom: 1px solid #e6e9ed;
    background: #f7f8fa;
}

.hpo-nav-avatar {
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--hpo-navy, #324E76);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .02em;
}

.hpo-nav-user-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.hpo-nav-user-name {
    font-size: .9rem;
    font-weight: 600;
    color: #212529;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hpo-nav-user-link {
    font-size: .75rem;
    color: #6c757d;
    text-decoration: none;
}

.hpo-nav-user-link:hover {
    color: var(--hpo-navy, #324E76);
    text-decoration: underline;
}

/* ── Fuss des Menues ── */
.hpo-nav-footer {
    margin-top: auto;
    border-top: 1px solid #e6e9ed;
}

.hpo-nav-version {
    padding: 0 .85rem .85rem;
    text-align: center;
    font-size: .7rem;
    color: #9aa3ad;
}

.hpo-sidebar.open {
    transform: translateX(0);
}

/* Schmaler Streifen am linken Rand, über den sich das Menü aufziehen lässt
   (Ersatz für SfSidebar EnableGestures). */
.hpo-sidebar-edge {
    position: fixed;
    top: 48px;
    left: 0;
    bottom: 0;
    width: 18px;
    z-index: 1100;
}

/* ── Navigationsbaum (Ersatz für SfTreeView) ── */
.hpo-navtree,
.hpo-navtree ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hpo-navtree {
    padding: .35rem 0;
}

.hpo-navtree ul {
    padding-left: 1.1rem;
}

.hpo-navtree-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    padding: 0 .85rem;
    height: 42px;
    line-height: 42px;
    color: #212529;
    font-size: .95rem;
}

.hpo-navtree-item:hover {
    background: #f2f4f7;
}

.hpo-navtree-item.active {
    background: var(--hpo-navy, #324E76);
    color: #fff;
}

.hpo-navtree-item .hpo-navtree-icon {
    width: 1.2rem;
    text-align: center;
}

.hpo-navtree-item .hpo-navtree-caret {
    margin-left: auto;
    font-size: .8rem;
    opacity: .6;
}

.hpo-sidebar .nav-actions {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: .75rem .85rem .5rem;
}


/* ── Toasts (Ersatz für SfToast) ── */
.hpo-toast-container {
    position: fixed;
    z-index: 1750;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    pointer-events: none;
}

.hpo-toast-container.bottom-right {
    right: 1rem;
    bottom: 1rem;
    align-items: flex-end;
}

.hpo-toast-container.top-center {
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    align-items: center;
}

/* Flaechige Farben nach Bootstrap-Palette. Feste rem-Groessen fuer den Text,
   sonst erbt er die x-large-Schrift von body.e-bigger. */
.hpo-toast {
    pointer-events: auto;
    min-width: 320px;
    max-width: calc(100vw - 2rem);
    border-radius: 6px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .15);
    background: #e9ecef;
    color: #212529;
    border: 1px solid #ced4da;
    overflow: hidden;
}

.hpo-toast-body {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .9rem 1rem;
}

.hpo-toast-icon {
    flex: 0 0 auto;
    font-size: 1.25rem;
    line-height: 1.4;
    color: inherit;
}

.hpo-toast-text {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
}

.hpo-toast-title {
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.4;
    word-break: break-word;
}

.hpo-toast-content {
    font-size: .9rem;
    line-height: 1.4;
    color: inherit;
    opacity: .9;
    word-break: break-word;
}

.hpo-toast .btn-close {
    flex: 0 0 auto;
    font-size: .7rem;
    opacity: .6;
}

/* Farbpalette von Bootstraps Alerts: getoenter Hintergrund, dunkler Text in
   derselben Farbfamilie. Deutlich ruhiger als die vollen Signalfarben und
   trotzdem auf den ersten Blick unterscheidbar. */
.hpo-toast-success {
    background: #d1e7dd;
    border-color: #badbcc;
    color: #0f5132;
}

.hpo-toast-warning {
    background: #fff3cd;
    border-color: #ffecb5;
    color: #664d03;
}

.hpo-toast-danger {
    background: #f8d7da;
    border-color: #f5c2c7;
    color: #842029;
}

.hpo-toast-info {
    background: #cff4fc;
    border-color: #b6effb;
    color: #055160;
}

.hpo-toast-progress {
    height: 2px;
    background: rgba(0, 0, 0, .18);
    width: 100%;
    animation-name: hpo-toast-progress;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

@keyframes hpo-toast-progress {
    from { width: 100%; }
    to   { width: 0; }
}

/* ── Statusanzeigen in der Kopfzeile ──
   Keine eigene Farbe: die Kopfzeile ist über AdvancedSettings.ThemeColor
   einstellbar, deshalb erben die Symbole ihre Farbe von ihr.
   Unterschieden wird über das Symbol selbst (Haken bzw. Kreuz). */
.hpo-status-ok,
.hpo-status-off {
    color: inherit;
}

/* ── Positionslisten in den Arbeitsnachweis-Reitern (bisher SfGrid) ── */
.ts-poslist {
    padding: .25rem 0;
}


.ts-posrow {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: .6rem .75rem;
    margin-bottom: .5rem;
    background: #fff;
}

.ts-posrow-main {
    flex: 1 1 auto;
    min-width: 0;
    cursor: pointer;
}

.ts-posrow-title {
    font-weight: 600;
    font-size: .95rem;
}

.ts-posrow-detail {
    font-size: .85rem;
    color: #555;
    word-break: break-word;
}

.ts-posrow-actions {
    flex: 0 0 auto;
    display: flex;
    gap: .15rem;
}

.btn-pos-action {
    border: 0;
    background: transparent;
    color: #666;
    padding: .3rem .45rem;
    border-radius: 4px;
}

.btn-pos-action:hover {
    background: #f0f0f0;
}

/* Bewusst ohne feste Hoehe: die Reiterleiste klebt per position:sticky oben und
   kann das nur innerhalb der Box ihres Elternelements. Waere .hpo-tabs auf die
   sichtbare Hoehe begrenzt, wuerde die Leiste beim Weiterscrollen doch
   verschwinden. */
.ts-tabs {
    min-height: 100%;
}

/* Karte, die sich zum Ansehen/Bearbeiten oeffnen laesst. */
.hpo-card-clickable {
    cursor: pointer;
}

/* Uebertragene Datensaetze bekommen eine gruene Kante links - auf einen Blick
   erkennbar, was schon beim Server ist, ohne das Badge lesen zu muessen.
   !important, weil die Karten ihren Rahmen in ihrem eigenen scoped CSS setzen. */
.hpo-card-synced {
    border-left: 4px solid #198754 !important;
}

/* Aktionen im Kopf einer Karte, deren Kopf kein Flex-Container ist. */
.attachment-title {
    display: flex;
    align-items: center;
    gap: .4rem;
}

/* ── "Update verfuegbar"-Leiste (Toolbelt.Blazor.PWA.Updater) ──
   Das Paket steuert seine Groesse ueber CSS-Variablen. Seine eigene Regel traegt
   das Scope-Attribut [b-pwa-updater] und damit hoehere Spezifitaet - deshalb
   !important. */
.pwa-updater {
    --pwa-updater-font-size: 15px !important;
    --pwa-updater-bar-height: 46px !important;
}

/* ── Unterschrift (HpoSignaturePad) ──
   touch-action: none ist Pflicht - ohne das scrollt das Handy die Seite, statt
   den Strich zu zeichnen. Die feste Hoehe gibt der Flaeche eine Groesse, bevor
   das Canvas vermessen wird. */
.hpo-signature {
    width: 100%;
}

.hpo-signature-canvas {
    display: block;
    width: 100%;
    height: 180px;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: .375rem;
    touch-action: none;
}