/* ===== Farben des Hauses ================================================================

   Alle Stilblaetter lesen das Hausblau aus diesen Variablen (mit var(--hpo-primary, #324E76) als Rueckfall, falls
   eine Seite theme.css einmal nicht laedt). Frueher stand die Zahl 115-mal in elf Dateien, dazu
   drei verschiedene "dunklere" Toene fuer den Zeiger-Zustand (var(--hpo-primary-hover, #283f5f), #283D5C, #243651) - jetzt
   gibt es genau einen.

   --hpo-accent ist die Farbe der Primaerknoepfe und Verweise. Sie ist das Hausblau, ausser die
   Kundenfarbe (Einstellungen, ThemeColor) traegt weisse Schrift lesbar - dann setzt Site.master
   sie hier ein. Tabellenkoepfe, Reiter und Kaestchen bleiben immer beim Hausblau.

   --hpo-sidebar-accent (#4a9eff) ist bewusst ein helleres Blau: die Auswahl in der dunklen
   Seitenleiste und der Ladebalken ueber der farbigen Kopfleiste waeren im Hausblau nicht zu
   sehen. */
:root {
    --hpo-primary: #324E76;
    --hpo-primary-rgb: 50, 78, 118;
    --hpo-primary-hover: #283f5f;
    --hpo-primary-light: #9db2cd;
    --hpo-accent: var(--hpo-primary);
    --hpo-accent-hover: var(--hpo-primary-hover);
    --hpo-sidebar-bg: #172538;
    --hpo-sidebar-accent: #4a9eff;
    --hpo-page-bg: #f0f2f5;
}

/* ===== List Card Layout ===== */

.list-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
    border: 1px solid #e9ecef;
    display: flex;
    flex-direction: column;
    overflow: visible;
}

.list-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 18px;
    background: #fff;
    border-radius: 8px 8px 0 0;
}

.list-card-header-flush {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0 0 14px 0;
    background: #fff;
}

.list-card-header:only-child {
    border-radius: 8px;
}

.list-card-body:first-child {
    border-radius: 8px;
}

.list-card-title {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

    .list-card-title h5 {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 600;
        color: #212529;
        white-space: nowrap;
    }

.list-card-icon {
    font-size: 1.3rem;
    color: #6c757d;
    opacity: 0.7;
}

/* ===== Liste: Trefferzahl und aktiver Filter =====
   ListStatus.ascx in den DynamicData-Listen, dasselbe Markup in den Dashboards und
   Freigaben unter Views (ListStatus.ShowFilters) - deshalb hier und nicht in
   dynamicdata-forms.css, das nur die DynamicData-Seiten laden. */

.list-status {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px 10px;
    min-width: 0;
    font-size: .8rem;
    color: #6c757d;
}

.list-status-count {
    white-space: nowrap;
}

.list-status-filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
    padding: 1px 8px;
    border-radius: 10px;
    background: #fff4d6;
    color: #6b5200;
}

.list-status-filter-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.list-status-filter .list-filter-reset {
    flex-shrink: 0;
    color: #6b5200;
    font-weight: 600;
    text-decoration: underline;
    white-space: nowrap;
}

    .list-status-filter .list-filter-reset:hover {
        color: #3d2f00;
    }

.list-card-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.list-card-search {
    min-width: 0;
}

    .list-card-search .form-control {
        max-width: 180px;
    }

.list-card-actions-separator {
    width: 1px;
    height: 20px;
    background: #dee2e6;
}

/* Labelled control group inside .list-card-actions. The planning toolbars are dense and largely
   icon-only, so each group names itself instead of relying on tooltips alone. Where groups are used,
   the row aligns on the controls' bottom edge so the captions sit on one line. */
.list-card-actions-labelled {
    align-items: flex-end;
}

.list-card-actions-group {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Die Beschriftung ueber einem Bedienelement - in der Kopfzeile einer Liste ebenso wie in einer
   Filterzeile, die als eigene Zeile unter dem Kopf sitzt (Karte, Tageszeitstrahl, Baufortschritt).
   Deshalb bewusst ohne Bindung an .list-card-actions: Bootstraps .form-label small ist mit 0.875em
   fast so gross wie der Wert darunter und laesst dieselbe Leiste je nach Maske anders aussehen. */
.list-card-actions-label {
    font-size: .7rem;
    line-height: 1.1;
    margin-bottom: 2px;
    color: #6c757d;
    white-space: nowrap;
}

/* Fixed row height so every caption sits on the same line: the group bodies hold controls of
   differing heights (a toggle switch is shorter than a btn-sm), and with the row aligned on its
   bottom edge a shorter body would push its caption upwards. */
.list-card-actions-body {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: calc(1.5em + .5rem + 2px);
}

/* A separator sits between groups, so it has to clear the caption line. */
.list-card-actions-labelled .list-card-actions-separator {
    margin-bottom: 6px;
}

.list-card-body {
    padding: 0;
    overflow: visible;
    border-radius: 0 0 8px 8px;
}

.list-card-divider {
    margin: 0;
    border-top: 1px solid #e9ecef;
}

.list-card-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: #fff;
    border-radius: 0 0 8px 8px;
}

/* Rahmen und Rundung gehoeren der Karte; das Gitter uebernimmt sie, statt sie ein zweites Mal
   zu zeichnen. border-radius: inherit nimmt genau das, was .list-card-body fuehrt: nur unten
   gerundet, wenn eine Kopfzeile darueber sitzt, und rundum, wenn die Karte mit dem Gitter
   beginnt (.list-card-body:first-child). Eine feste Angabe liess die oberen Ecken eckig
   hervorschauen, sobald die Karte keine eigene Kopfzeile hatte. */
.list-card-body .grid-enhanced-wrapper {
    border: none;
    border-radius: inherit;
}

/* Unten gerundet wird nur, wenn das Gitter die Karte auch abschliesst. Folgt darunter noch ein
   Fussstreifen - etwa die Zeile "Geprueft: hoechstens 10 Stunden am Tag ..." -, dann endete die
   Flaeche mitten in der Karte rund und der eckige Streifen sass darunter. Oben bleibt es bei
   der Rundung der Karte. */
.list-card-body .grid-enhanced-wrapper:not(:last-child) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* Fussstreifen einer Karte: die Zeile unter dem Gitter, die sagt, wogegen geprueft oder was
   gezaehlt wurde. Eigene Klasse statt gestapelter Hilfsklassen (px-3 py-2 + text-muted small),
   damit Abstand, Trennlinie und die Rundung der Karte an einer Stelle stehen und in jeder Maske
   gleich aussehen. */
.list-card-note {
    padding: 10px 18px;
    background: #fff;
    border-top: 1px solid #e9ecef;
    border-radius: 0 0 8px 8px;
    font-size: .8rem;
    line-height: 1.45;
    color: #6c757d;
}

/* Ist die Liste leer, faellt auch die Trennlinie weg: die Karte traegt dann eine einzige
   Flaeche - Hinweis in der Mitte, Fussnote darunter - und keinen Kasten im Kasten. */
.list-card-body:has(tr.hpo-empty-row) .list-card-note {
    border-top: none;
}

/* ===== Detail Card Layout (Edit / Insert / Details) ===== */

.detail-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
    border: 1px solid #e9ecef;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Das overflow:hidden darueber haelt Tabellen und Reiter in den runden Ecken der Karte - es
   beschneidet aber auch jedes Menue, das aus der Karte herausklappt. Eine Karte, die in ihrem Kopf
   die Tabelleneinstellungen traegt, ist reine Bedienleiste: dort gibt es nichts zu beschneiden, und
   das Zahnradmenue klappt nach unten aus dem Kopf heraus. Dieselbe Karte gilt fuer die Suche und
   jedes weitere Dropdown der Leiste.

   Der Listenkopf (.list-card) hat das Problem nicht, er steht ohnehin auf overflow: visible.
   Wo :has() fehlt, bleibt es beim bisherigen Zustand - das Menue ist dann beschnitten wie zuvor. */
.detail-card:has(> .detail-card-header .grid-settings-menu),
.detail-card:has(> .detail-card-header .dropdown-menu) {
    overflow: visible;
}

.detail-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid #e9ecef;
    background: #fff;
    border-radius: 8px 8px 0 0;
}

    .detail-card-header:only-child {
        border-radius: 8px;
        border-bottom: none;
    }

.detail-card-title {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

    .detail-card-title h5 {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 600;
        color: #212529;
    }

.detail-card-subtitle {
    display: block;
    margin-top: 1px;
}

.detail-card-icon {
    font-size: 1.3rem;
    color: #6c757d;
    opacity: 0.7;
}

.detail-card-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.detail-card-body {
    padding: 16px 18px;
}

/* Scrollable detail card - tab body scrolls, page does not scroll */
.detail-card-scrollable {
    display: flex;
    flex-direction: column;
}

    .detail-card-scrollable .detail-card-body {
        padding: 0;
        overflow: hidden;
    }

    /* Die 0 darueber gilt nur, weil den Innenabstand sonst jemand anderes mitbringt: bei Reitern
       das aktive Blatt (.tab-pane-scroll.active.show), in der Anzeige der Feldbehaelter aus
       EntityTemplates/Default.ascx (.tab-fields-row).

       Eine Entitaet ohne [EntityUIHint("TabGroups")] hat beim Bearbeiten weder das eine noch das
       andere - Default_Edit.ascx rendert die Felder als blanke .form-group direkt in den
       Kartenkoerper. Sie klebten dort am Rand. Betrifft die Tabellen aus dem hpo.Data-Paket, die
       keine Reiter deklarieren: Fehler- und Anwendungsprotokoll.

       Wo :has() fehlt, bleibt es beim bisherigen Zustand - kein Rueckschritt. */
    .detail-card-scrollable .detail-card-body:not(:has(.tab-content, .tab-fields-row)) {
        padding: 16px 18px;
    }

    .detail-card-scrollable .tab-content {
        overflow: hidden;
    }

/* Suppress Bootstrap's fade transition on tab panes to prevent layout flash */
.tab-pane-scroll.fade {
    transition: none !important;
    opacity: 1 !important;
}

.tab-pane-scroll {
    display: none;
}

    .tab-pane-scroll.active {
        display: block;
        visibility: hidden;
    }

        .tab-pane-scroll.active.show {
            visibility: visible;
        }

/* Die Hoehe des aktiven Blatts misst masterpage.js (fitDetailCardPanes) und legt sie als
   --detail-card-pane-height an die Karte: vom Beginn des Reiterinhalts bis zum unteren
   Bildrand, Fussleiste abgezogen. Der feste Wert dahinter ist nur der Rueckfall, bis das
   Skript gelaufen ist - als Schaetzung war er zu vorsichtig: auf den meisten Masken blieb
   unter der Karte eine Handbreit frei, waehrend das Blatt darueber schon rollte. */
.detail-card-scrollable .tab-content .tab-pane-scroll.active.show {
    max-height: var(--detail-card-pane-height, calc(100vh - 340px));
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px 18px;
    box-sizing: border-box;
}

    .detail-card-scrollable .tab-content .tab-pane-scroll.active.show .grid-enhanced-wrapper,
    .detail-card-scrollable .tab-content .tab-pane-scroll.active.show .table-responsive {
        max-height: calc(var(--detail-card-pane-height, calc(100vh - 340px)) - 20px);
        overflow-y: auto;
    }

        .detail-card-scrollable .tab-content .tab-pane-scroll.active.show .grid-enhanced-wrapper .table thead th,
        .detail-card-scrollable .tab-content .tab-pane-scroll.active.show .table-responsive .table thead th,
        .tab-pane-scroll.active.show .grid-enhanced-wrapper .table thead th,
        .grid-enhanced-wrapper .table thead th {
            position: sticky;
            top: 0;
            z-index: 2;
            background: #fff;
        }

.detail-card-scrollable .nav-tabs {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #fff;
    flex-shrink: 0;
    padding: 0 18px;
    border-bottom: 2px solid #e9ecef;
    margin: 0;
}

/* ===== Tab styling inside detail cards ===== */

/* Auch im Kartenkopf: Reiter stehen dort, wo sie die ganze Karte umschalten (Arbeitskleidung,
   Kostensätze). Ohne diese Zeile blieben sie beim Bootstrap-Grau stehen, während dieselben
   Reiter im Kartenkörper die Hausfarbe tragen - zwei Sorten Reiter in einer Anwendung. */
.detail-card-header .nav-tabs,
.detail-card-body .nav-tabs {
    border-bottom: 2px solid #e9ecef;
    padding: 0;
    margin: 0 0 16px 0;
}

    .detail-card-header .nav-tabs .nav-link,
    .detail-card-body .nav-tabs .nav-link {
        border: none;
        border-bottom: 2px solid transparent;
        color: #6c757d;
        font-weight: 500;
        font-size: 0.9rem;
        padding: 8px 16px;
        margin-bottom: -2px;
        transition: color 0.15s, border-color 0.15s;
    }

        .detail-card-header .nav-tabs .nav-link:hover,
        .detail-card-body .nav-tabs .nav-link:hover {
            color: #495057;
            border-bottom-color: #adb5bd;
        }

        .detail-card-header .nav-tabs .nav-link.active,
        .detail-card-body .nav-tabs .nav-link.active {
            color: var(--hpo-primary, #324E76);
            border-bottom-color: var(--hpo-primary, #324E76);
            background: transparent;
        }

/* Fix form labels inside tab groups - push right with more space */
.detail-card-body .form-group.row {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
    padding: 6px 0;
}

    .detail-card-body .form-group.row .col-form-label {
        padding-left: 4px;
    }

/* ===== Breadcrumb Card ===== */

/* Kompakter als frueher (10px/16px): die Zeile ist Orientierung, kein Inhalt. Das letzte Glied
   ist die Seite selbst und kein Verweis (Site.master). */
.breadcrumb-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
    border: 1px solid #e9ecef;
    padding: 6px 14px;
    margin-bottom: 12px;
}

    .breadcrumb-card .breadcrumb {
        margin: 0;
        padding: 0;
        background: transparent;
        font-size: 0.875rem;
    }

        .breadcrumb-card .breadcrumb-item.active {
            color: #495057;
        }

/* Telefon: kein Navigationspfad und keine Unterzeile unter dem Titel. Beide kosten dort eine
   bis drei Zeilen über der Liste, und der Weg zurück führt über das Menü. Die Trefferzahl und
   "Filter aktiv" (ListStatus) bleiben stehen - sie sind Zustand, keine Beschreibung. */
@media (max-width: 767.98px) {
    .breadcrumb-card,
    .detail-card-subtitle {
        display: none !important;
    }
}

/* ===== Kopf einer Maske auf dem Telefon (Scripts/mobile-header.js) =====

   Konzepte/Mobile-Kopfzeile.md. Das Skript setzt mh-ready an einen Kopf mit vielen
   Filtergruppen, mh-fold an jedes Element, das hinter den Knopf wandert, und mh-open, solange
   die Flaeche offen ist. Am Schreibtisch greift keine dieser Regeln, Knopf und "Fertig" bleiben
   dort unsichtbar. */
.mh-toggle,
.mh-done {
    display: none;
}

@media (max-width: 767.98px) {
    .mh-ready {
        row-gap: 8px;
    }

        .mh-ready > .list-card-title,
        .mh-ready > .detail-card-title {
            flex: 1 1 0;
            min-width: 0;
        }

            .mh-ready > .list-card-title > .list-card-icon,
            .mh-ready > .detail-card-title > .detail-card-icon {
                display: none;
            }

            .mh-ready > .list-card-title h5,
            .mh-ready > .detail-card-title h5 {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

        /* inline-block wie das Zahnrad daneben: als Flex-Behaelter verlor der Knopf die
           Zeilenhoehe des btn-sm (das Symbol hat line-height 1) und war niedriger. */
        .mh-ready > .mh-toggle {
            display: inline-block;
            align-self: center;
            position: relative;
            flex: 0 0 auto;
        }

            /* Ein Filter ist gesetzt (die Statuszeile meldet ihn) - der Punkt sagt es auch bei
               geschlossener Flaeche. Farbe wie das Feld "Filter aktiv" in ListStatus. */
            .mh-ready > .mh-toggle .mh-dot {
                display: none;
                position: absolute;
                top: -3px;
                right: -3px;
                width: 9px;
                height: 9px;
                border-radius: 50%;
                background: #e0a800;
                box-shadow: 0 0 0 2px #fff;
            }

            .mh-ready > .mh-toggle.mh-active .mh-dot {
                display: block;
            }

        .mh-ready.mh-open > .mh-toggle {
            background: rgba(var(--hpo-primary-rgb, 50, 78, 118), .1);
        }

        /* Zu: Die Leiste selbst tritt zurueck (display: contents), ihre stehenbleibenden Teile
           ordnen sich im Kopf ein - Zahnrad und Ansichten neben dem Titel vor dem Knopf, Tag/Monat
           und die Suche je auf einer Zeile darunter. Verschoben wird dabei nichts im DOM. */
        .mh-ready:not(.mh-open) > .list-card-actions {
            display: contents;
        }

            .mh-ready:not(.mh-open) > .list-card-actions > .mh-fold,
            .mh-ready:not(.mh-open) > .list-card-actions > .list-card-actions-separator {
                display: none !important;
            }

        .mh-ready > .list-card-title,
        .mh-ready > .detail-card-title {
            order: 0;
        }

        .mh-ready:not(.mh-open) > .list-card-actions > .mh-icon {
            order: 1;
            flex: 0 0 auto;
        }

        .mh-ready > .mh-toggle {
            order: 2;
        }

        .mh-ready:not(.mh-open) > .list-card-actions > .mh-keep {
            order: 3;
            flex: 1 1 100%;
            min-width: 0;
        }

        .mh-ready:not(.mh-open) > .list-card-actions > .mh-search {
            order: 4;
            flex: 1 1 100%;
            min-width: 0;
        }

            .mh-ready:not(.mh-open) > .list-card-actions > .mh-search .form-control {
                max-width: none;
            }

        .mh-ready.mh-open > .list-card-actions {
            order: 5;
            flex: 1 1 100%;
            min-width: 0;
        }

        /* Offen: jede Gruppe eine Zeile, Beschriftung darueber, Feld ueber die volle Breite. Die
           feste Breite der Seite (style="width: ...px") gilt hier nicht. */
        .mh-ready.mh-open > .list-card-actions {
            flex-direction: column;
            align-items: stretch;
            gap: 10px;
        }

            .mh-ready.mh-open > .list-card-actions > .list-card-actions-separator {
                display: none;
            }

            .mh-ready.mh-open > .list-card-actions .list-card-actions-body {
                flex-wrap: wrap;
            }

            .mh-ready.mh-open > .list-card-actions .list-card-actions-group:not([data-mobile-keep]) .list-card-actions-body > .form-control,
            .mh-ready.mh-open > .list-card-actions .list-card-actions-group:not([data-mobile-keep]) .list-card-actions-body > select,
            .mh-ready.mh-open > .list-card-actions .list-card-actions-group:not([data-mobile-keep]) .list-card-actions-body > .select2-container,
            .mh-ready.mh-open > .list-card-actions .list-card-actions-group:not([data-mobile-keep]) .list-card-actions-body > .input-group,
            .mh-ready.mh-open > .list-card-actions .list-card-search,
            .mh-ready.mh-open > .list-card-actions .list-card-search .input-group {
                width: 100% !important;
                max-width: none !important;
                flex: 1 1 auto;
            }

            /* Das Feld in der Suchgruppe teilt sich die Zeile mit seinen Knoepfen. */
            .mh-ready.mh-open > .list-card-actions .list-card-search .form-control {
                max-width: none;
            }

            .mh-ready.mh-open > .list-card-actions > .mh-done {
                display: block;
                align-self: flex-end;
            }

    /* Der Kopf allein in seiner Karte bleibt oben stehen, solange die Flaeche zu ist. Die Liste
       darunter scrollt mit der Seite (grid-enhanced.js, fitWrapper). Offen bliebe sonst ein
       halber Bildschirm Filter ueber den Karten stehen. */
    .list-card:has(> .mh-ready:only-child:not(.mh-open)),
    .detail-card:has(> .mh-ready:only-child:not(.mh-open)) {
        position: sticky;
        top: 0;
        z-index: 20;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    }
}

.detail-card-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
}

    .detail-card-table tr {
        border-bottom: 1px solid #f0f0f0;
    }

        .detail-card-table tr:last-child {
            border-bottom: none;
        }

        .detail-card-table tr:hover {
            background: #f8f9fa;
        }

    .detail-card-table td {
        padding: 10px 18px;
        vertical-align: middle;
    }

        .detail-card-table td:first-child {
            font-weight: 500;
            color: #495057;
            white-space: nowrap;
            width: 220px;
            background: rgba(0, 0, 0, 0.01);
        }

.detail-card-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    border-top: 1px solid #e9ecef;
    background: #fff;
}

/* ===== Button Color Overrides ===== */

/* Grundfarbe und Zustaende des Knopfes stehen weiter unten bei den Bootstrap-Variablen. */

    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:not(:disabled):not(.disabled):active,
    .btn-primary:not(:disabled):not(.disabled).active,
    .show > .btn-primary.dropdown-toggle {
        background-color: var(--hpo-accent-hover, #283f5f);
        border-color: var(--hpo-accent-hover, #283f5f);
        box-shadow: none;
    }

.btn-success {
    background-color: #3a9d5c;
    border-color: #3a9d5c;
}

    .btn-success:hover,
    .btn-success:focus,
    .btn-success:not(:disabled):not(.disabled):active,
    .btn-success:not(:disabled):not(.disabled).active,
    .show > .btn-success.dropdown-toggle {
        background-color: #328a50;
        border-color: #328a50;
        box-shadow: none;
    }

.btn-danger {
    background-color: #c9444d;
    border-color: #c9444d;
}

    .btn-danger:hover,
    .btn-danger:focus,
    .btn-danger:not(:disabled):not(.disabled):active,
    .btn-danger:not(:disabled):not(.disabled).active,
    .show > .btn-danger.dropdown-toggle {
        background-color: #b33b43;
        border-color: #b33b43;
        box-shadow: none;
    }

.btn-info {
    background-color: #3a8fb5;
    border-color: #3a8fb5;
    color: #fff;
}

    .btn-info:hover,
    .btn-info:focus,
    .btn-info:not(:disabled):not(.disabled):active,
    .btn-info:not(:disabled):not(.disabled).active,
    .show > .btn-info.dropdown-toggle {
        background-color: #327da0;
        border-color: #327da0;
        color: #fff;
        box-shadow: none;
    }

/* Syncfusion link buttons in brand blue instead of bootstrap #0d6efd */
.e-btn.e-link,
.e-css.e-btn.e-link {
    color: var(--hpo-primary, #324E76);
}

    .e-btn.e-link:hover,
    .e-css.e-btn.e-link:hover,
    .e-btn.e-link:focus,
    .e-css.e-btn.e-link:focus {
        color: var(--hpo-primary-hover, #283f5f);
    }

.btn-warning {
    background-color: #c99a2e;
    border-color: #c99a2e;
    color: #fff;
}

    .btn-warning:hover,
    .btn-warning:focus,
    .btn-warning:not(:disabled):not(.disabled):active,
    .btn-warning:not(:disabled):not(.disabled).active,
    .show > .btn-warning.dropdown-toggle {
        background-color: #b38828;
        border-color: #b38828;
        color: #fff;
        box-shadow: none;
    }

.btn-secondary {
    background-color: #5a6473;
    border-color: #5a6473;
}

    .btn-secondary:hover,
    .btn-secondary:focus,
    .btn-secondary:not(:disabled):not(.disabled):active,
    .btn-secondary:not(:disabled):not(.disabled).active,
    .show > .btn-secondary.dropdown-toggle {
        background-color: #4e5766;
        border-color: #4e5766;
        box-shadow: none;
    }

.btn-outline-secondary {
    color: #5a6473;
    border-color: #ced4da;
}

    .btn-outline-secondary:hover,
    .btn-outline-secondary:focus,
    .btn-outline-secondary:not(:disabled):not(.disabled):active,
    .btn-outline-secondary:not(:disabled):not(.disabled).active,
    .show > .btn-outline-secondary.dropdown-toggle {
        background-color: #f0f2f5;
        color: #3d4654;
        border-color: #b8bfc9;
        box-shadow: none;
    }

/* ===== Dialog centering in sidebar layout ===== */

/* When sidebar is open (260px wide), offset dialogs so they center over the content area */
@media screen and (min-width: 768px) {
    .page-wrapper.toggled .modal,
    .page-wrapper.toggled .swal2-container {
        padding-left: 260px;
    }
}

/* ===== Link Color Overrides ===== */

/* Farbe und Unterstreichung an einer Stelle - die Unterstreichung stand frueher in Site.css. */
a {
    color: var(--hpo-accent, #324E76);
    text-decoration: none;
}

    a:hover {
        color: var(--hpo-accent-hover, #283f5f);
        text-decoration: none;
    }

/* ===== SweetAlert-Dialoge ===== */

/* SweetAlert bringt eigene Knopffarben mit - der Bestaetigungsknopf ist von Haus aus lila
   (#7066e0) und faellt damit aus der Anwendung heraus. Die Farben werden hier zentral
   gesetzt und nicht bei jedem Aufruf, denn Swal.fire steht an vielen Stellen: in hpo.js
   (Dialog, ContinueDialog), in den Masken und in den Toasts. Eine Regel im Stilblatt
   erwischt alle, auch die, die spaeter dazukommen. */
.swal2-styled.swal2-confirm {
    background-color: var(--hpo-accent, #324E76);
    border-color: var(--hpo-accent, #324E76);
}

    .swal2-styled.swal2-confirm:hover,
    .swal2-styled.swal2-confirm:focus {
        background-color: var(--hpo-accent-hover, #283f5f);
        border-color: var(--hpo-accent-hover, #283f5f);
        box-shadow: none;
    }

/* Der Abbrechen-Knopf ist ab Werk kraeftig rot. Abbrechen ist keine Warnung, sondern der
   harmlose der beiden Wege - deshalb dieselbe zurueckhaltende Form wie btn-outline-secondary. */
.swal2-styled.swal2-cancel {
    background-color: transparent;
    border: 1px solid #6c757d;
    color: #6c757d;
}

    .swal2-styled.swal2-cancel:hover,
    .swal2-styled.swal2-cancel:focus {
        background-color: #6c757d;
        border-color: #6c757d;
        color: #fff;
        box-shadow: none;
    }

/* Erfolgs- und Hinweismeldungen sind Toasts unten rechts (SuccessAlert/InfoAlert in hpo.js).
   Unten rechts liegt nichts, womit gerade gearbeitet wird; oben rechts deckten sie Filter, Suche
   und Zahnrad der Listen ab. Sie stehen ueber der festen Fusszeile (41px), nicht auf ihr.
   Erkennbar machen sie der farbige Rand links und der Ablaufbalken in derselben Farbe - die Art
   der Meldung sieht man, bevor man sie liest. */
.swal2-container.hpo-toast-container {
    padding: 0 16px 57px 16px;
}

/* SweetAlert gibt dem Behaelter eines Toasts 360px (body.swal2-toast-shown .swal2-container),
   der Toast fuellt ihn - deshalb hier dieselbe Gewichtung wie dort. */
body.swal2-toast-shown .swal2-container.hpo-toast-container {
    width: calc(380px + 32px);
    max-width: 100%;
}

    .swal2-container.hpo-toast-container .swal2-popup.hpo-toast {
        --hpo-toast-color: var(--hpo-primary, #324E76);
        padding: 12px 12px 14px 14px;
        border-left: 5px solid var(--hpo-toast-color);
        border-radius: 8px;
        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22);
    }

    .swal2-container.hpo-toast-container .swal2-popup.hpo-toast-success {
        --hpo-toast-color: #2e7d32;
    }

    .swal2-container.hpo-toast-container .hpo-toast .swal2-html-container {
        font-size: 0.95rem;
        line-height: 1.4;
        color: #212529;
    }

    .swal2-container.hpo-toast-container .hpo-toast .swal2-timer-progress-bar {
        background: var(--hpo-toast-color);
        opacity: 0.6;
    }

    /* Die Symbole ab Werk sind blass (hellgruener Ring, Cyan) - hier in der Farbe des Rands. */
    .swal2-container.hpo-toast-container .hpo-toast-info .swal2-icon.swal2-info {
        border-color: var(--hpo-toast-color);
        color: var(--hpo-toast-color);
    }

    .swal2-container.hpo-toast-container .hpo-toast-success .swal2-icon.swal2-success {
        border-color: var(--hpo-toast-color);
    }

        .swal2-container.hpo-toast-container .hpo-toast-success .swal2-icon.swal2-success .swal2-success-ring {
            border-color: rgba(46, 125, 50, 0.35);
        }

        .swal2-container.hpo-toast-container .hpo-toast-success .swal2-icon.swal2-success [class^='swal2-success-line'] {
            background-color: var(--hpo-toast-color);
        }

/* Ist die KI-Tafel offen, steht sie unten rechts - der Toast weicht nach links aus. */
@media (min-width: 768px) {
    body.swal2-toast-shown:has(.ai-chat-dock-open) .swal2-container.hpo-toast-container {
        width: calc(380px + 32px + 380px + 2rem);
        padding-right: calc(380px + 2rem + 16px);
    }
}

/* Telefon: ueber die ganze Breite (mit Rand), damit der Text nicht in schmale Zeilen bricht. */
@media (max-width: 767.98px) {
    .swal2-container.hpo-toast-container {
        padding: 0 10px 51px 10px;
    }

    body.swal2-toast-shown .swal2-container.hpo-toast-container {
        width: 100%;
    }
}

/* Ein Dialog, der wirklich etwas zerstoert, faerbt seinen Bestaetigungsknopf rot ein -
   dafuer bekommt der Aufruf customClass: { confirmButton: 'swal-gefahr' }. */
.swal2-styled.swal2-confirm.swal-gefahr {
    background-color: #c9444d;
    border-color: #c9444d;
}

    .swal2-styled.swal2-confirm.swal-gefahr:hover,
    .swal2-styled.swal2-confirm.swal-gefahr:focus {
        background-color: #b33b43;
        border-color: #b33b43;
    }

/* ===== Bootstrap-Blau auf das Hausblau =====================================================

   Bootstrap bringt sein eigenes Blau mit (#0d6efd). Es taucht dort auf, wo eine Maske nichts
   dagegen setzt: im angehakten Kästchen, im Fokusrahmen eines Eingabefelds, im Umriss-Knopf, im
   Fortschrittsbalken, in der Blätterleiste. Neben dem Hausblau der Listen (var(--hpo-primary, #324E76)) sieht das
   nach zwei Anwendungen aus.

   Zwei Wege, je nachdem was Bootstrap 5.2 anbietet: wo die Komponente ihre Farbe über eine
   eigene CSS-Variable bezieht, wird die Variable gesetzt - damit stimmen auch Hover, Aktiv und
   Deaktiviert. Wo sie fest im Stilblatt steht (Formularfelder), muss die Regel selbst noch
   einmal her.

   #9db2cd ist das aufgehellte Hausblau für Fokusrahmen, rgba(50,78,118,.25) der Fokusschein -
   dieselben Rollen, die Bootstrap mit #86b7fe und rgba(13,110,253,.25) besetzt. */

:root {
    --bs-primary: var(--hpo-primary);
    --bs-primary-rgb: var(--hpo-primary-rgb);
    --bs-link-color: var(--hpo-accent);
    --bs-link-color-rgb: var(--hpo-primary-rgb);
    --bs-link-hover-color: var(--hpo-accent-hover);
}

/* --- Komponenten mit eigenen Variablen --- */

.btn-primary {
    --bs-btn-bg: var(--hpo-accent, #324E76);
    --bs-btn-border-color: var(--hpo-accent, #324E76);
    --bs-btn-hover-bg: var(--hpo-accent-hover, #283f5f);
    --bs-btn-hover-border-color: var(--hpo-accent-hover, #283f5f);
    --bs-btn-active-bg: var(--hpo-accent-hover, #283f5f);
    --bs-btn-active-border-color: var(--hpo-accent-hover, #283f5f);
    --bs-btn-disabled-bg: var(--hpo-accent, #324E76);
    --bs-btn-disabled-border-color: var(--hpo-accent, #324E76);
    --bs-btn-focus-shadow-rgb: 50, 78, 118;
}

.btn-outline-primary {
    --bs-btn-color: var(--hpo-accent, #324E76);
    --bs-btn-border-color: var(--hpo-accent, #324E76);
    --bs-btn-hover-bg: var(--hpo-accent, #324E76);
    --bs-btn-hover-border-color: var(--hpo-accent, #324E76);
    --bs-btn-active-bg: var(--hpo-accent, #324E76);
    --bs-btn-active-border-color: var(--hpo-accent, #324E76);
    --bs-btn-disabled-color: var(--hpo-accent, #324E76);
    --bs-btn-disabled-border-color: var(--hpo-accent, #324E76);
    --bs-btn-focus-shadow-rgb: 50, 78, 118;
}

.btn-link {
    --bs-btn-color: var(--hpo-accent, #324E76);
    --bs-btn-hover-color: var(--hpo-accent-hover, #283f5f);
    --bs-btn-active-color: var(--hpo-accent-hover, #283f5f);
}

.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--hpo-primary, #324E76);
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--hpo-primary, #324E76);
}

.pagination {
    --bs-pagination-color: var(--hpo-primary, #324E76);
    --bs-pagination-hover-color: var(--hpo-primary-hover, #283f5f);
    --bs-pagination-focus-color: var(--hpo-primary-hover, #283f5f);
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(50, 78, 118, 0.25);
    --bs-pagination-active-bg: var(--hpo-primary, #324E76);
    --bs-pagination-active-border-color: var(--hpo-primary, #324E76);
}

.progress {
    --bs-progress-bar-bg: var(--hpo-primary, #324E76);
}

.list-group {
    --bs-list-group-active-bg: var(--hpo-primary, #324E76);
    --bs-list-group-active-border-color: var(--hpo-primary, #324E76);
}

.accordion {
    --bs-accordion-active-color: var(--hpo-primary, #324E76);
    --bs-accordion-active-bg: #eef2f7;
    --bs-accordion-btn-focus-border-color: var(--hpo-primary-light, #9db2cd);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(50, 78, 118, 0.25);
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23324E76'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* ===== Auswahlkaestchen des Hauses =====

   Das Kaestchen des Browsers passt in kein Programm: es traegt die Farbe des Betriebssystems, ist
   auf jedem Geraet anders gross und steht neben Tabellenkopf und Schaltern wie ein Fremdkoerper.
   Deshalb ein eigenes - im selben Blau wie der Tabellenkopf und der Schalter (.toggle-switch).

   Es gilt ueberall dort, wo ausgewaehlt wird: in der Liste (Kopf und Zeile), in den Filterlisten
   der Planungsmasken und in den Dialogen. Wo ein neues Kaestchen dazukommt, genuegt die Huelle
   .hpo-check darum - dann sieht es aus wie alle anderen.

   Nicht betroffen sind die Ja/Nein-Schalter (.toggle-switch) und die Kaestchen von Bootstrap
   (.form-check-input); die tragen das Hausblau in ihrer eigenen Regel. */
.grid-enhanced-wrapper table .bulk-select-cb input[type="checkbox"],
.grid-enhanced-wrapper table > thead > tr > th input[type="checkbox"],
.abs-cbl input[type="checkbox"],
.bp-cbl input[type="checkbox"],
.oncall-cbl input[type="checkbox"],
.hpo-check input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    vertical-align: middle;
    background-color: #fff;
    border: 1.5px solid #adb5bd;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

/* In der Zeile steht das Kaestchen allein in seiner Spalte - dort darf es keinen Abstand
   mitbringen, sonst sitzt es nicht mittig. Das Kaestchen im Kopf laesst grid-enhanced.css ueber
   margin: 0 auto einruecken; ein margin: 0 von hier wuerde das aufheben, weil theme.css spaeter
   geladen wird. In den Auswahllisten steht der Text daneben; deren eigene Regeln setzen den
   Abstand. */
.grid-enhanced-wrapper table .bulk-select-cb input[type="checkbox"] {
    margin: 0;
}

.grid-enhanced-wrapper table .bulk-select-cb input[type="checkbox"]:hover,
.grid-enhanced-wrapper table > thead > tr > th input[type="checkbox"]:hover,
.abs-cbl input[type="checkbox"]:hover,
.bp-cbl input[type="checkbox"]:hover,
.oncall-cbl input[type="checkbox"]:hover,
.hpo-check input[type="checkbox"]:hover {
    border-color: var(--hpo-primary, #324E76);
}

.grid-enhanced-wrapper table .bulk-select-cb input[type="checkbox"]:focus,
.grid-enhanced-wrapper table > thead > tr > th input[type="checkbox"]:focus,
.abs-cbl input[type="checkbox"]:focus,
.bp-cbl input[type="checkbox"]:focus,
.oncall-cbl input[type="checkbox"]:focus,
.hpo-check input[type="checkbox"]:focus {
    outline: none;
    border-color: var(--hpo-primary, #324E76);
    box-shadow: 0 0 0 .2rem rgba(50, 78, 118, .25);
}

/* Der Haken steckt im Kaestchen selbst und kommt aus keiner Schriftart - so sitzt er auf jedem
   Rechner an derselben Stelle, auch wenn Font Awesome einmal nicht geladen ist. */
.grid-enhanced-wrapper table .bulk-select-cb input[type="checkbox"]:checked,
.grid-enhanced-wrapper table > thead > tr > th input[type="checkbox"]:checked,
.abs-cbl input[type="checkbox"]:checked,
.bp-cbl input[type="checkbox"]:checked,
.oncall-cbl input[type="checkbox"]:checked,
.hpo-check input[type="checkbox"]:checked {
    background-color: var(--hpo-primary, #324E76);
    border-color: var(--hpo-primary, #324E76);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m5.5 10.5 3 3 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* --- Was der Browser selbst zeichnet --- */

/* Ein blankes <input type="checkbox"> ohne Bootstrap-Klasse - davon gibt es im Programm viele,
   vom Filter über den Dialog bis zur Massenbearbeitung - malt der Browser in der Farbe des
   Betriebssystems, unter Windows also im Systemblau. accent-color gibt ihm dieselbe Farbe wie
   .btn-primary. Die Angabe wird vererbt, deshalb genügt sie einmal an der Wurzel; sie gilt
   ebenso für Auswahlknöpfe, Fortschrittsbalken und Schieberegler. Kästchen mit eigenem Anstrich
   (appearance: none, etwa .toggle-switch oder .bulk-select-cb) bleiben davon unberührt - die
   tragen das Hausblau bereits in ihrer eigenen Regel. */
:root {
    accent-color: var(--hpo-primary, #324E76);
}

/* --- Formularfelder: hier steht die Farbe fest im Bootstrap-Stilblatt --- */

.form-check-input:checked,
.form-check-input[type=checkbox]:indeterminate {
    background-color: var(--hpo-primary, #324E76);
    border-color: var(--hpo-primary, #324E76);
}

.form-check-input:focus {
    border-color: var(--hpo-primary-light, #9db2cd);
    box-shadow: 0 0 0 0.25rem rgba(50, 78, 118, 0.25);
}

/* Der Schieber des Bootstrap-Schalters: sein Punkt ist ein eingebettetes Bild und muss deshalb
   als Ganzes ersetzt werden. (Der Hausschalter .toggle-switch in Site.css ist davon unberührt -
   er traegt das Hausblau schon.) */
.form-switch .form-check-input:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%239db2cd'/%3e%3c/svg%3e");
}

.form-control:focus,
.form-select:focus {
    border-color: var(--hpo-primary-light, #9db2cd);
    box-shadow: 0 0 0 0.25rem rgba(50, 78, 118, 0.25);
}

.form-range::-webkit-slider-thumb {
    background-color: var(--hpo-primary, #324E76);
}

.form-range::-moz-range-thumb {
    background-color: var(--hpo-primary, #324E76);
}

.form-range:focus::-webkit-slider-thumb,
.form-range:focus::-moz-range-thumb {
    box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(50, 78, 118, 0.25);
}

.btn-close:focus {
    box-shadow: 0 0 0 0.25rem rgba(50, 78, 118, 0.25);
}

/* Die Hilfsklassen: sie stehen mit !important im Bootstrap-Stilblatt und brauchen es deshalb
   hier ebenso. */
.text-primary {
    color: var(--hpo-primary, #324E76) !important;
}

.bg-primary {
    background-color: var(--hpo-primary, #324E76) !important;
}

.border-primary {
    border-color: var(--hpo-primary, #324E76) !important;
}

.link-primary {
    color: var(--hpo-accent, #324E76) !important;
}

    .link-primary:hover,
    .link-primary:focus {
        color: var(--hpo-accent-hover, #283f5f) !important;
    }

/* ===== select2: Mehrfachauswahl ===== */

/* Das Bootstrap-Thema stellt die gewaehlten Eintraege und das Suchfeld untereinander: die Liste
   der Eintraege ist ein Block, das Suchfeld darunter ein zweiter (width: 100%). Dazu ist ein
   Eintrag hoeher als die Zeile des leeren Feldes - er traegt eine eigene Polsterung, einen Rand
   und einen Aussenabstand nach unten. Zusammen sprang das Feld beim ersten gewaehlten Eintrag
   auf mehr als die doppelte Hoehe, auch wenn der Name bequem in die Zeile gepasst haette.

   Hier wird daraus eine Zeile, die erst umbricht, wenn die Breite wirklich nicht mehr reicht:
   Das Feld selbst ist der Flex-Behaelter, die Eintragsliste und das Suchfeld sind seine Glieder.

   Alle Masse in em und nicht in Pixeln: Das Thema kennt drei Groessen (select2--small/--large,
   gesetzt von select2SizeClass in masterpage.js), und die unterscheiden sich allein in der
   Schriftgroesse. 1.5em ist deshalb in jeder von ihnen genau die Zeilenhoehe des leeren Feldes -
   dieselbe Rechnung, die das Thema fuer das Suchfeld anstellt.

   Gilt fuer jede Mehrfachauswahl im Haus (Empfaenger im Chat, Filter der Projektkarte,
   DynamicData): Die Ursache steckt im Thema und nicht in einer einzelnen Maske. */
.select2-container--bootstrap-5 .select2-selection--multiple {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25em;
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered {
    flex: 0 1 auto;
    gap: .25em;
}

/* Ein Eintrag ist genau so hoch wie die Zeile des leeren Feldes - deshalb ohne senkrechte
   Polsterung und ohne den unteren Aussenabstand des Themas. Den Abstand zwischen zwei Zeilen
   macht jetzt das gap darueber, und das faellt bei einer einzigen Zeile weg. Die Schriftgroesse
   bleibt die des Themas: Sie ist dieselbe wie die des Feldes, und daran haengt die Rechnung. */
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
    height: 1.5em;
    max-width: 100%;
    padding: 0 .5em;
    margin: 0;
    overflow: hidden;
}

/* Ein langer Name sprengt den Eintrag nicht, er endet mit drei Punkten - vollstaendig steht er
   im Tooltip, den select2 an den Eintrag haengt. */
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice .select2-selection__choice__display {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Das Suchfeld steht neben den Eintraegen und nimmt, was von der Zeile uebrig ist; bleiben
   weniger als vier Zeichenbreiten, rueckt es in die naechste. Seine Hoehe bleibt die des Themas. */
.select2-container--bootstrap-5 .select2-selection--multiple .select2-search {
    display: flex;
    flex: 1 1 4em;
    align-items: center;
    width: auto;
    min-width: 2em;
}

/* !important gegen einen Inline-Stil: select2 bemisst das Eingabefeld selbst und schreibt die
   Breite an das Element (resizeSearch). Sobald etwas gewaehlt ist, sind das 0,75em - ein
   Kaestchen von der Breite eines Buchstabens. Hier soll es den Rest der Zeile fuellen, damit man
   dort hineinklicken und tippen kann, wo der Text erscheint. */
.select2-container--bootstrap-5 .select2-selection--multiple .select2-search .select2-search__field {
    width: 100% !important;
    margin: 0;
    padding: 0;
}