/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-2ctee3xtsd] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-2ctee3xtsd] {
    flex: 1;
}

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

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

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

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

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

@media (max-width: 640.98px) {
    .top-row[b-2ctee3xtsd] {
        justify-content: space-between;
    }

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

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

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

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

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

    .top-row[b-2ctee3xtsd], article[b-2ctee3xtsd] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

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

    #blazor-error-ui .dismiss[b-2ctee3xtsd] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-fanpftpez4],
.components-reconnect-repeated-attempt-visible[b-fanpftpez4],
.components-reconnect-failed-visible[b-fanpftpez4],
.components-pause-visible[b-fanpftpez4],
.components-resume-failed-visible[b-fanpftpez4],
.components-rejoining-animation[b-fanpftpez4] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-fanpftpez4],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-fanpftpez4],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-fanpftpez4],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-fanpftpez4],
#components-reconnect-modal.components-reconnect-retrying[b-fanpftpez4],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-fanpftpez4],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-fanpftpez4],
#components-reconnect-modal.components-reconnect-failed[b-fanpftpez4],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-fanpftpez4] {
    display: block;
}


#components-reconnect-modal[b-fanpftpez4] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-fanpftpez4 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-fanpftpez4 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-fanpftpez4 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-fanpftpez4]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-fanpftpez4 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-fanpftpez4 {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-fanpftpez4 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-fanpftpez4 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-fanpftpez4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-fanpftpez4] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-fanpftpez4] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-fanpftpez4] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-fanpftpez4] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-fanpftpez4] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-fanpftpez4] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-fanpftpez4 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-fanpftpez4] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-fanpftpez4 {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/DispositionCalendar/AbsenceLegend.razor.rz.scp.css */
.absence-legend[b-tmsu93cg9q] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 14px;
    margin-bottom: 12px;
    font-size: 0.75rem;
    color: #546e7a;
}

.absence-legend-title[b-tmsu93cg9q] {
    font-weight: 600;
    color: #37474f;
}

.absence-legend-entry[b-tmsu93cg9q] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

/* Die Farbe selbst kommt inline aus der Palette; hier nur die Form des Farbfelds,
   damit Legende und Tageskopf als verwandt erkennbar bleiben. */
.absence-legend-swatch[b-tmsu93cg9q] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    flex-shrink: 0;
}
/* /Components/Pages/DispositionCalendar/EmployeeCalendar.razor.rz.scp.css */
.emp-calendar[b-ajzv9uehiu] {
    flex: 1 1 320px;
    min-width: 320px;
    border-left: 1px solid #e0e0e0;
    padding: 0 8px;
}

.emp-calendar:first-child[b-ajzv9uehiu] {
    border-left: none;
}

.emp-header[b-ajzv9uehiu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 4px;
    font-size: 0.85rem;
    background: #fafafa;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 4px;
    border-radius: 4px 4px 0 0;
}

.hours-display[b-ajzv9uehiu] {
    font-size: 0.75rem;
    color: #546e7a;
}

.emp-day-headers[b-ajzv9uehiu] {
    display: flex;
}

.emp-time-gutter-spacer[b-ajzv9uehiu] {
    width: 46px;
    flex-shrink: 0;
}

.emp-day-header[b-ajzv9uehiu] {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    padding: 4px 0;
}

.emp-canvas-row[b-ajzv9uehiu] {
    display: flex;
}

.emp-time-gutter[b-ajzv9uehiu] {
    position: relative;
    width: 46px;
    flex-shrink: 0;
}

.emp-hour-label[b-ajzv9uehiu] {
    position: absolute;
    right: 4px;
    font-size: 0.65rem;
    line-height: 1;
    transform: translateY(-50%);
}

.emp-day-column[b-ajzv9uehiu] {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    border-left: 1px solid #eceff1;
    background-image: repeating-linear-gradient(to bottom, transparent 0 59px, #eceff1 59px 60px);
}

/* Hinweis: die Drop-Vorschau + der Zeit-Tooltip während des Ziehens werden NICHT hier gestylt.
   Sie werden per JS erzeugt und an document.body gehängt (siehe DispositionTest.razor.js), liegen
   also außerhalb des Blazor-Renderbaums dieser Komponente - Blazor CSS Isolation (das automatisch
   injizierte Scope-Attribut, das diese Datei nur auf von dieser Komponente gerenderte Elemente
   anwendet) würde hier nie greifen. Deshalb wird dort komplett inline gestylt. */

/* Die Abwesenheits-Farben stehen hier bewusst NICHT. Sie kommen inline aus
   Disposition.Domain.AbsenceReasonPalette - die eine Quelle gilt für Tageskopf, Tooltip,
   Ablehnungstext und Legende, und die Farbe ist von Tests prüfbar (bUnit lädt .razor.css
   nicht, eine CSS-Klasse wäre es nicht). Das hatching markiert dagegen nur die
   Planungssperre, nicht den Abwesenheitsgrund, und gehört deshalb ins Layout-Stylesheet. */
.emp-day-column-absent[b-ajzv9uehiu] {
    background-color: #fafafa;
    background-image:
        repeating-linear-gradient(to bottom, transparent 0 59px, #eceff1 59px 60px),
        repeating-linear-gradient(45deg, transparent 0 7px, rgba(0, 0, 0, 0.045) 7px 14px);
}

/* /Components/Pages/DispositionTest.razor.rz.scp.css */
[b-kvqaf49khl] .cal-grid {
    font-size: 0.8rem;
}

[b-kvqaf49khl] .cal-time {
    white-space: nowrap;
    text-align: right;
    padding-right: 4px;
    color: #78909c;
}

[b-kvqaf49khl] .cal-event {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    padding: 2px 6px;
    border-radius: 4px;
    cursor: grab;
    font-size: 0.75rem;
    overflow: hidden;
    z-index: 5;
    user-select: none;
    /* outline statt border, damit die exakte Pixel-Positionierung/-Höhe unverändert bleibt. */
    outline: 1px solid #000;
    outline-offset: -1px;
}

[b-kvqaf49khl] .cal-event-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[b-kvqaf49khl] .cal-event-time {
    font-size: 0.68rem;
    opacity: 0.85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[b-kvqaf49khl] .cal-event:active {
    cursor: grabbing;
}

[b-kvqaf49khl] .cal-event.dragging,
[b-kvqaf49khl] .pool-event.dragging {
    opacity: 0.35;
}

[b-kvqaf49khl] .cal-event-yellow {
    background: yellow;
    color: #000;
}

[b-kvqaf49khl] .cal-event-blue {
    background: blue;
    color: #fff;
}


[b-kvqaf49khl] .cal-event-orange {
    background: orange;
    color: #000;
}

[b-kvqaf49khl] .cal-event-gray {
    background: gray;
    color: #fff;
}

[b-kvqaf49khl] .cal-event-green {
    background: green;
    color: #fff;
}

[b-kvqaf49khl] .cal-event-default {
    background: white;
    color: #000;
}



[b-kvqaf49khl] .pool-event {
    padding: 8px 12px;
    border-radius: 4px;
    cursor: grab;
    font-size: 0.85rem;
    user-select: none;
    line-height: 1.4;
}

[b-kvqaf49khl] .pool-event-title {
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 2px;
}

[b-kvqaf49khl] .pool-event-desc {
    font-size: 0.8rem;
    opacity: 0.9;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

[b-kvqaf49khl] .pool-event-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.75rem;
    opacity: 0.85;
}

[b-kvqaf49khl] .pool-event:active {
    cursor: grabbing;
}

[b-kvqaf49khl] .pool-empty {
    color: #90a4ae;
    font-size: 0.85rem;
    text-align: center;
    padding: 20px 0;
}

[b-kvqaf49khl] .pool-empty button {
    margin-top: 8px;
}

/* Der Pool ist ein Geschwister der Kalenderspalte, kein Kind davon. Genau deshalb
   hilft hier kein stretch: align-items: stretch macht alle Geschwister so hoch wie das
   höchste - und der Pool ist selbst eines davon. Sein eigener Inhalt geht also in die
   Zeilenhöhe ein, er kann nie das niedrigere Geschwister sein und sich damit nie selbst
   begrenzen. Ein Deckel muss deshalb von außen kommen; er steht inline am Panel
   (max-height, aus dem gewählten Zeitraum berechnet - siehe EventPool.KalenderHoehePx).
   min-height: 0 an der Liste ist die zweite Hälfte: es erlaubt der Liste, unter ihre
   Inhaltshöhe zu schrumpfen, damit dort überhaupt ein Rollbalken entstehen kann. */
[b-kvqaf49khl] .event-pool {
    width: 220px;
    min-height: 300px;
    padding: 12px;
    border: 2px dashed #b0bec5;
    border-radius: 8px;
    background: #f5f5f5;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

/* Überschrift und Filterknopf stehen untereinander, nicht nebeneinander: der Panel-Inhalt
   ist nur 192px breit (220px minus 2x12px Padding minus 2x2px Rahmen), und Überschrift
   ("Offene Ausführungen") plus beschrifteter Knopf brauchen zusammen rund 260-280px. Als
   Zeile nebeneinander schrumpft beides, der Text bricht um und das Icon steht mittig vor
   einem zweizeiligen Block. Gestapelt bekommt jedes Element die volle Breite, und zwar
   ohne Breitenangabe - align-items: stretch ist im Spaltenlayout der Default. */
[b-kvqaf49khl] .event-pool-header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    margin-bottom: 8px;
}

[b-kvqaf49khl] .event-pool-header h3 {
    margin: 0;
    font-size: 1rem;
    color: #546e7a;
}

/* Der Knopf hat rund das Doppelte Platz, wie sein Text braucht. nowrap ist nur Absicherung
   gegen eine spätere Schriftgrößenänderung - verhindert aber zuverlässig den Umbruch,
   der vorher die Beschriftung auf zwei Zeilen gerissen hat. */
[b-kvqaf49khl] .plz-filter-trigger {
    white-space: nowrap;
}

[b-kvqaf49khl] .plz-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 8px;
}

[b-kvqaf49khl] .plz-filter-count {
    opacity: 0.7;
    font-size: 0.75rem;
}

[b-kvqaf49khl] .pool-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* Steht als letztes Flex-Element unterhalb der scrollenden Liste und ist deshalb
   immer sichtbar, auch wenn die Kartenliste lang ist. */
[b-kvqaf49khl] .pool-no-location {
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-top: 1px solid #cfd8dc;
    padding-top: 6px;
    margin-top: 6px;
    flex-shrink: 0;
}

[b-kvqaf49khl] .pool-can-drop {
    border-color: #4CAF50;
    background-color: rgba(76, 175, 80, 0.08);
}

.cal-scroll[b-kvqaf49khl] {
    display: flex;
    overflow-x: auto;
    gap: 0;
    flex: 1;
    padding-bottom: 8px;
}