/* Name: public/assets/css/kalender.css – Gestaltung des Kalenders (FullCalendar), Überschriftzeile der Hauptressourcen, Ressourcennamen in den Überschriftzeilen umbrechend, Terminblöcke im Raster auf ihre Höhe begrenzt, Aufklappfenster „Datum wählen“ (Monatsname auch bei 320 Pixeln Breite vollständig),Ressourcenauswahl mit Gruppen und Schalter „nur belegte anzeigen“, Terminliste „+ weitere“ unter dem Terminfenster, Legende und Fenster für Termineinzelheiten; Listenansicht (Umbruch, normale Schriftgröße, Anfragen nicht blass); ab 992 Pixeln Breite Kopfzeile, Inhalt und Fußzeile von Kalender und Belegungsplan auf 90 % der Bildschirmbreite, offene Anfragen ohne Deckkraft, Tageszahlen anderer Monate in Grau (Kontrast nach WCAG 1.4.3) */

/* Ressourcenauswahl: Schalter „nur belegte anzeigen“ und Schaltfläche rechts über dem Kalender, aufklappbare Liste darunter */
.ressourcenauswahl {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem 1.25rem;
    margin-bottom: 0.75rem;
}

.ressourcenauswahl-belegte {
    margin-bottom: 0;
}

.ressourcenauswahl-belegte .form-check-label {
    cursor: pointer;
}

.ressourcenauswahl-schalter {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
}

.ressourcenauswahl-pfeil {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 0.35rem solid transparent;
    border-right: 0.35rem solid transparent;
    border-top: 0.4rem solid currentColor;
    transition: transform 0.15s ease;
}

.ressourcenauswahl-schalter[aria-expanded="true"] .ressourcenauswahl-pfeil {
    transform: rotate(180deg);
}

.ressourcenauswahl-feld {
    position: absolute;
    top: calc(100% + 0.25rem);
    right: 0;
    z-index: 1000;
    width: min(22rem, calc(100vw - 2rem));
    padding: 0.75rem;
    background-color: #fff;
    border: 1px solid var(--stadion-linie);
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
}

.ressourcenauswahl-feld[hidden] {
    display: none;
}

.ressourcenauswahl-knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.75rem 0 0.5rem;
}

.ressourcenauswahl-liste {
    max-height: min(18rem, 50vh);
    overflow-y: auto;
    padding: 0.25rem 0.25rem 0.25rem 0;
    border-top: 1px solid var(--stadion-linie);
    border-bottom: 1px solid var(--stadion-linie);
}

.ressourcenauswahl-liste .form-check {
    margin: 0.35rem 0;
}

.ressourcenauswahl-leer {
    margin: 0.5rem 0;
    color: var(--stadion-text-leise);
}

.ressourcenauswahl-fuss {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.75rem;
}

.kalender {
    --fc-border-color: var(--stadion-linie);
    --fc-button-bg-color: var(--stadion-gruen);
    --fc-button-border-color: var(--stadion-gruen);
    --fc-button-hover-bg-color: var(--stadion-gruen-dunkel);
    --fc-button-hover-border-color: var(--stadion-gruen-dunkel);
    --fc-button-active-bg-color: var(--stadion-gruen-dunkel);
    --fc-button-active-border-color: var(--stadion-gruen-dunkel);
    --fc-now-indicator-color: var(--stadion-rot);
    --fc-bg-event-opacity: 1;
    --fc-today-bg-color: transparent;
    font-size: 0.875rem;
}

.kalender .fc-header-toolbar {
    flex-wrap: wrap;
    gap: 0.5rem;
}

.kalender .fc-toolbar-title {
    font-size: 1.25rem;
    font-weight: 600;
}

/* Freie buchbare Zeit (Farbe in den Einstellungen, Variable aus Ansicht::kalenderFarbenStil) */
.kalender.fc .fc-timegrid-col.fc-day,
.kalender.fc .fc-daygrid-day.fc-day {
    background-color: var(--kalender-frei, #E4E4E4);
}

.kalender.fc .fc-daygrid-day.fc-day-other {
    background-color: #f1f1f1;
}

/* Tage anderer Monate: ohne die Deckkraft 0.3 von FullCalendar, graue Tageszahl mit 6,2 : 1 Kontrast auf #f1f1f1 (WCAG 1.4.3) */
.kalender.fc .fc-daygrid-day.fc-day-other .fc-daygrid-day-top {
    opacity: 1;
}

.kalender.fc .fc-daygrid-day.fc-day-other .fc-daygrid-day-number {
    color: #595959;
}

.kalender.fc .fc-col-header-cell.fc-day-today,
.kalender.fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number {
    font-weight: 700;
    color: var(--stadion-gruen);
}

/* Termine */
/* Raster (Tag, Woche): Inhalt auf die Blockhöhe begrenzen, damit er bei größeren Textabständen nicht über die
   Zeit darunter oder folgende Termine ragt (WCAG 1.4.12); vollständige Angaben im Terminfenster und in der Liste */
.kalender .fc-timegrid-event .fc-event-main {
    height: 100%;
    overflow: hidden;
}

.kalender .termin-inhalt {
    overflow: hidden;
    padding: 1px 3px;
    line-height: 1.25;
    font-size: 0.8rem;
}

.kalender .termin-zeile {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kalender .termin-fett {
    font-weight: 600;
}

/* Offene Anfragen: heller Farbton mit dunkler Schrift (aus kalender.js, ohne Deckkraft wegen des Kontrasts nach WCAG 1.4.3),
   gestrichelter Rahmen in abgedunkelter Termin-Farbe (Rahmenfarbe aus den Kalenderdaten) */
.kalender .termin-angefragt {
    border-style: dashed !important;
    border-width: 2px !important;
}

/* Sperrungen */
.kalender .sperrung-hintergrund .termin-inhalt {
    color: #1c1c1c;
}

.kalender .sperrung .termin-inhalt {
    color: #1c1c1c;
}

/* Terminliste „+ weitere“ (Monatsansicht): unter dem grauen Hintergrund (Ebene 1050) und dem Terminfenster (Ebene 1055) von Bootstrap,
   über der Ressourcenauswahl (Ebene 1000); FullCalendar setzt sonst Ebene 9999 */
.kalender.fc .fc-popover {
    z-index: 1040;
}

/* Legende */
.kalender-legende {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin-top: 1rem;
    font-size: 0.9rem;
}

.legende-feld {
    display: inline-block;
    width: 1.25rem;
    height: 0.9rem;
    margin-right: 0.4rem;
    vertical-align: -1px;
    border: 1px solid var(--stadion-linie);
    border-radius: 3px;
}

.legende-frei {
    background-color: var(--kalender-frei, #E4E4E4);
}

.legende-gesperrt {
    background-color: var(--kalender-gesperrt, #F2A14F);
    border-color: var(--kalender-gesperrt, #F2A14F);
}

/* Anklicken */
.kalender .fc-timegrid-col,
.kalender .fc-daygrid-day,
.kalender .fc-event {
    cursor: pointer;
}

/* Gast-Belegungsplan: freie Zeit ist nicht anklickbar, Tage vor heute ausgegraut */
.kalender-gast .fc-timegrid-col {
    cursor: default;
}

.kalender.fc .fc-timegrid-col.fc-day-disabled,
.kalender.fc .fc-daygrid-day.fc-day-disabled {
    background-color: #f1f1f1;
}

/* Fenster mit Termineinzelheiten */
.termin-angaben {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.35rem 1rem;
}

.termin-angaben dt {
    font-weight: 600;
}

.termin-angaben dd {
    margin: 0;
    white-space: pre-line;
}

/* Überschriftzeile: Hauptressource über ihren Unterressourcen (Tag und Woche) */
.kalender .fc-gruppenzeile .fc-gruppenzelle {
    padding: 2px 4px;
    text-align: center;
    font-weight: 600;
    background-color: #f6f6f6;
    border-color: var(--fc-border-color);
}

.kalender .fc-gruppenzeile .fc-gruppenzelle-leer {
    background-color: transparent;
    border-bottom-color: transparent;
}

/* Ressourcennamen in den Überschriftzeilen (Tag und Woche): umbrechen mit Silbentrennung statt kürzen oder überlappen,
   die Spalten werden dabei nicht breiter (WCAG 1.4.4, 1.4.10) */
.kalender .fc-gruppenzelle-text,
.kalender .fc-resourceTimeGridDay-view .fc-col-header-cell-cushion,
.kalender .fc-resourceTimeGridWeek-view .fc-col-header-cell-cushion {
    display: block;
    white-space: normal;
    hyphens: auto;
    overflow-wrap: anywhere;
}

/* Datum wählen: Monatskalender als Aufklappfenster (über der Ressourcenauswahl, unter Bootstrap-Fenstern) */
.datumswahl {
    position: absolute;
    z-index: 1045;
    width: min(20rem, calc(100vw - 1rem));
    padding: 0.75rem;
    background-color: #fff;
    border: 1px solid var(--stadion-linie);
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
    font-size: 0.9rem;
}

.datumswahl[hidden] {
    display: none;
}

.datumswahl-kopf {
    display: flex;
    gap: 0.35rem;
    align-items: center;
    margin-bottom: 0.5rem;
}

/* Monats- und Jahresauswahl: kleinerer Pfeilabstand und schmalere Jahresauswahl, damit „September“ auch bei 320 Pixeln Breite vollständig sichtbar ist (WCAG 1.4.10) */
.datumswahl-kopf .form-select {
    padding-right: 1.75rem;
    background-position: right 0.4rem center;
}

.datumswahl-kopf select:first-of-type {
    min-width: 0;
    flex: 1 1 auto;
}

.datumswahl-kopf select:last-of-type {
    flex: 0 0 4.75rem;
}

.datumswahl-wochentage,
.datumswahl-raster {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    text-align: center;
}

.datumswahl-wochentage {
    margin-bottom: 0.25rem;
    font-weight: 600;
    color: var(--stadion-text-leise);
}

.datumswahl-tag {
    padding: 0.3rem 0;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 0.35rem;
    color: inherit;
    line-height: 1.2;
}

.datumswahl-tag:hover:not(:disabled),
.datumswahl-tag:focus-visible {
    background-color: #E4E4E4;
}

.datumswahl-anderer-monat {
    color: var(--stadion-text-leise);
}

.datumswahl-heute {
    border-color: var(--stadion-gruen);
    font-weight: 700;
}

.datumswahl-gewaehlt,
.datumswahl-gewaehlt:hover:not(:disabled) {
    background-color: var(--stadion-gruen);
    color: #fff;
}

.datumswahl-tag:disabled {
    opacity: 0.35;
    cursor: default;
}

.datumswahl-fuss {
    display: flex;
    justify-content: space-between;
    margin-top: 0.5rem;
}

/* Ressourcenauswahl: Hauptressource als Gruppe, Unterressourcen eingerückt */
.ressourcenauswahl-gruppe .form-check-label {
    font-weight: 600;
}

.ressourcenauswahl-liste .ressourcenauswahl-unter {
    margin-left: 1.5rem;
}

/* Termin einer Hauptressource als ein Block über mehrere Unterspalten */
.kalender .termin-verbunden {
    z-index: 2;
}

/* Kalender und Belegungsplan (Seiten mit Kopfzeile): ab 992 Pixeln Breite 90 % der Bildschirmbreite statt der
   Bootstrap-Höchstbreite; darunter volle Breite wie bisher. Eingebettete Pläne (container-fluid) sind nicht betroffen. */
@media (min-width: 992px) {
    .kopfzeile .container.kopfzeile-innen,
    main.container.inhalt,
    .fusszeile .container {
        max-width: 90%;
    }
}

/* Liste: Einträge umbrechen statt abschneiden (Reflow), normale Schriftgröße, offene Anfragen nicht blass (Kontrast; Kennzeichnung über „(Anfrage)“) */
.kalender .fc-list-event .termin-inhalt {
    font-size: 0.9375rem;
    padding: 0;
    cursor: pointer;
}

.kalender .fc-list-event .termin-zeile {
    white-space: normal;
    overflow-wrap: anywhere;
}

.kalender .fc-list-event.termin-angefragt {
    opacity: 1;
    border-style: none !important;
    border-width: 0 !important;
}

.kalender .fc-list-event .fc-list-event-time {
    white-space: normal;
}