/* WIPF Kursportal – gemeinsame Komponentenstile */

/* Barrierefreier, nur für Screenreader sichtbarer Text. Im Backend deckt sich
   das mit der WordPress-Kernklasse; im Kursmanager-Arbeitsplatz (außerhalb
   von wp-admin) steht sie sonst nicht zur Verfügung. */
.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    border: 0;
    word-wrap: normal !important;
}

.wipf-info { width: 100%; }

.wipf-person-picker { display: grid; gap: .45rem; }
.wipf-person-picker__hint { margin: 0; }
.wipf-person-picker__empty { margin: 0; color: var(--wipf-danger, #b32d2e); }

.wipf-bulk-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: .55rem;
    margin: .8rem 0;
    padding: .65rem .75rem;
    border: 1px solid var(--wipf-border, #dcdcde);
    border-radius: var(--wipf-style-control-radius, 6px);
    background: #f6f7f7;
}
.wipf-bulk-toolbar label { display: grid; gap: .2rem; font-weight: 600; }
.wipf-bulk-toolbar .wipf-field-hint { flex-basis: 100%; }

.wipf-empty { padding: 1rem; text-align: center; }

.wipf-download-table th a { color: inherit; text-decoration: none; }
.wipf-download-table th a:hover { text-decoration: underline; }
.wipf-download-pagination { display: flex; align-items: center; justify-content: flex-end; margin-top: 1rem; }
.wipf-download-pagination__pages { display: inline-flex; align-items: center; }

.wipf-document-batch-titles {
    display: grid;
    gap: var(--wipf-document-batch-gap, .55rem);
    margin: var(--wipf-document-batch-margin, 0);
}
.wipf-document-batch-row {
    display: grid;
    grid-template-columns: minmax(180px, .8fr) minmax(240px, 1.2fr);
    gap: .8rem;
    align-items: center;
    padding: var(--wipf-document-batch-padding, .65rem .75rem);
    border: 1px solid var(--wipf-border, #dcdcde);
    border-radius: var(--wipf-document-batch-radius, 6px);
    background: #fff;
}
.wipf-document-batch-filename { overflow-wrap: anywhere; color: var(--wipf-text-soft, #50575e); }
.wipf-document-batch-row label {
    display: grid;
    grid-template-columns: auto minmax(160px, 1fr);
    gap: .5rem;
    align-items: center;
    font-weight: var(--wipf-document-batch-label-weight, 600);
}
.wipf-document-batch-row input { width: 100%; }
.wipf-document-batch-errors {
    margin: var(--wipf-document-batch-error-margin, .5rem 0 .5rem 1.25rem);
    list-style: disc;
}

.wipf-schedule-blocks,
.wipf-units-editor { display: grid; gap: .55rem; }
/* Abfrage-Container für die Terminzeile: Cockpit und Kursmanager-Arbeitsplatz
   nutzen dieselbe Ausgabe, aber der verfügbare Platz unterscheidet sich durch
   die Seitennavigation im Kursmanager-Arbeitsplatz dauerhaft, unabhängig von
   der Fensterbreite. Container Queries (siehe unten) reagieren auf die
   tatsächliche Breite dieses Kastens statt auf den Viewport. */
.wipf-schedule-blocks { container-type: inline-size; container-name: wipf-schedule; }
.wipf-schedule-block {
    overflow: hidden;
    border: 1px solid var(--wipf-border, #c3c4c7);
    border-radius: var(--wipf-style-control-radius, 7px);
    background: #fff;
}
.wipf-schedule-block > summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .65rem .8rem; cursor: pointer; background: #eef5fa; color: var(--wipf-primary, #174b78); }
.wipf-schedule-block > summary::-webkit-details-marker { display: none; }
.wipf-schedule-block__title-group { display: inline-flex; flex: 1 1 auto; align-items: center; gap: .35rem; min-width: 0; }
/* `display: flex` auf <summary> unterdrückt den nativen Aufklapp-Pfeil (die
   Markierung erscheint nur bei `display: list-item`); daher ein eigenes
   Pfeilsymbol, das den Auf-/Zu-Zustand des <details> nachbildet. */
.wipf-schedule-block__chevron { display: inline-flex; flex: 0 0 auto; transition: transform .15s ease; }
.wipf-schedule-block[open] > summary .wipf-schedule-block__chevron { transform: rotate(90deg); }
.wipf-schedule-block__body { padding: .7rem; }
.wipf-schedule-block__header { display: flex; justify-content: flex-end; margin-bottom: .6rem; }
.wipf-schedule-block__title-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 2.35rem;
    box-sizing: border-box;
    padding: 0 .5rem;
    border: 1px solid var(--wipf-border, #c3c4c7);
    border-radius: var(--wipf-style-control-radius, 6px);
    background: #fff;
    color: inherit;
    cursor: text;
    font: inherit;
    font-weight: 700;
}
.wipf-schedule-block__title-input:focus { outline: 2px solid var(--wipf-primary, #174b78); outline-offset: 1px; }

.wipf-unit-row {
    display: grid;
    grid-template-columns: minmax(125px, .8fr) 138px minmax(76px, .5fr) minmax(76px, .5fr) minmax(250px, 1.55fr) auto;
    gap: .5rem;
    align-items: end;
    padding: .55rem .65rem;
    border: 1px solid var(--wipf-border, #dcdcde);
    border-radius: var(--wipf-style-control-radius, 6px);
    background: #f9f9fa;
}
.wipf-unit-row > label,
.wipf-instructor-picker { display: grid; gap: .22rem; min-width: 0; font-weight: 600; }
.wipf-unit-row input,
.wipf-unit-row select,
.wipf-unit-row textarea { box-sizing: border-box; min-width: 0; }

/* Einheitliche Höhe und Schriftgröße der Eingabefelder in Block- und
   Terminzeile, damit z. B. die Tagesbezeichnung nicht größer wirkt als
   Datum/Zeit (beides Textfelder, aber nur mit passendem `type`-Attribut
   greift diese Regel). */
.wipf-unit-row input[type="text"],
.wipf-unit-row input[type="date"],
.wipf-unit-row input[type="time"],
.wipf-unit-row input[type="url"],
.wipf-unit-row input[type="search"],
.wipf-unit-row select,
.wipf-instructor-picker__controls input,
.wipf-instructor-picker__controls select {
    width: 100%;
    height: 2.35rem;
    padding: 0 .5rem;
    border: 1px solid var(--wipf-border, #c3c4c7);
    border-radius: var(--wipf-style-control-radius, 6px);
    font: inherit;
    font-weight: 400;
}
.wipf-unit-row textarea {
    width: 100%;
    padding: .4rem .5rem;
    border: 1px solid var(--wipf-border, #c3c4c7);
    border-radius: var(--wipf-style-control-radius, 6px);
    font: inherit;
    resize: vertical;
}
.wipf-instructor-picker__controls { display: grid; grid-template-columns: minmax(115px, .85fr) minmax(145px, 1.15fr); gap: .35rem; }
.wipf-instructor-picker__selected { display: flex; flex-wrap: wrap; gap: .28rem; min-height: 1.65rem; }
.wipf-instructor-chip { display: inline-flex; align-items: center; gap: .25rem; max-width: 100%; padding: .16rem .22rem .16rem .48rem; border: 1px solid var(--wipf-border, #c3c4c7); border-radius: 999px; background: #fff; font-size: .86rem; font-weight: 500; }
.wipf-instructor-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wipf-instructor-chip button { display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #8a2424; cursor: pointer; font: inherit; font-size: 1.1rem; line-height: 1; }
.wipf-instructor-chip button:hover,
.wipf-instructor-chip button:focus { background: #fcf0f1; outline: 1px solid #d63638; }
.wipf-unit-row .wipf-row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; padding-bottom: .1rem; }
/* Checkbox-Beschriftung der Terminzeile: früher nur in admin.css definiert,
   dadurch im Kursmanager-Arbeitsplatz (lädt admin.css nicht) völlig
   ungestylt und dort umgebrochen bis auf einzelne Buchstaben. Jetzt hier,
   damit sie in Backend und Frontend gleichermaßen gilt. */
.wipf-mail-choice { display: inline-flex; grid-template-columns: none; flex-direction: row; align-items: center; gap: .3rem; font-weight: 400; }
.wipf-mail-choice input { margin: 0; }
/* Der Zoom-Meeting-Link steht direkt sichtbar unter der Terminzeile, ohne
   eigene Aufklapp-Zusammenfassung ("Weitere Angaben"). */
.wipf-unit-row__extra { grid-column: 1 / -1; padding-top: .5rem; margin-top: .1rem; border-top: 1px solid var(--wipf-border, #dcdcde); }
.wipf-unit-calendar-grid { display: grid; grid-template-columns: minmax(190px, 1fr); gap: .6rem; }
.wipf-unit-calendar-grid > label { display: grid; gap: .22rem; min-width: 0; font-weight: 600; }

/* Kompakte Icon-Buttons (Duplizieren, Absagen, Entfernen) – Bedeutung
   ausschließlich über aria-label/title. */
.wipf-icon-btn {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    padding: 0;
    border: 1px solid var(--wipf-border, #c3c4c7);
    border-radius: var(--wipf-style-control-radius, 6px);
    background: #fff;
    color: var(--wipf-text-soft, #50575e);
    cursor: pointer;
}
.wipf-icon-btn:hover,
.wipf-icon-btn:focus-visible { background: #f0f4f8; color: var(--wipf-primary, #174b78); }
.wipf-icon-btn:focus-visible { outline: 2px solid var(--wipf-primary, #174b78); outline-offset: 1px; }
.wipf-icon-btn--danger { color: #8a2424; }
.wipf-icon-btn--danger:hover,
.wipf-icon-btn--danger:focus-visible { background: #fcf0f1; color: #8a2424; border-color: #d63638; }

/* Grunddaten-/Zahlungseditor: identisch im Cockpit und im Kursmanager-Portal. */
.wipf-panel {
    margin: 1rem 0;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--wipf-border, #dcdcde);
    border-radius: 8px;
    background: var(--wipf-surface, #fff);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
}
.wipf-table-wrap { overflow-x: auto; }
.wipf-checklist { max-height: 220px; overflow: auto; padding: .5rem; border: 1px solid var(--wipf-border, #dcdcde); border-radius: 4px; background: #fff; }
.wipf-checklist label { padding: .15rem 0; }
.wipf-category-assignment { margin-top: 1rem; }
.wipf-form-editor { margin: 1rem 0; padding: .8rem 1rem; border: 1px solid var(--wipf-border, #dcdcde); border-radius: 7px; background: #fff; }
.wipf-form-editor .wipf-section-heading { margin-top: 0; }
.wipf-sticky-actions {
    position: sticky;
    bottom: 0;
    z-index: 3;
    margin: 0;
    padding: .8rem 1rem;
    border: 1px solid var(--wipf-border, #c3c4c7);
    background: rgba(255, 255, 255, .96);
    text-align: right;
}
.wipf-payment-mode-panel[hidden] { display: none; }
.wipf-installments input { width: 100%; min-width: 90px; }
.wipf-installments td:first-child input,
.wipf-installments td:nth-child(5) input { min-width: 150px; }
.wipf-installments tfoot.is-valid th { background: #edfaef; color: #1b6b37; }
.wipf-installments tfoot.is-invalid th { background: #fcf0f1; color: #8a2424; }
.wipf-field-invalid { border-color: #d63638 !important; box-shadow: 0 0 0 1px #d63638 !important; }
.wipf-installment-validation {
    margin-top: .75rem;
    padding: .65rem .8rem;
    border-left: 4px solid #d63638;
    background: #fcf0f1;
    color: #8a2424;
    font-weight: 600;
}
.wipf-installment-validation[hidden] { display: none; }
.wipf-form-fields input,
.wipf-form-fields select,
.wipf-form-fields textarea { width: 100%; min-width: 115px; }
.wipf-form-fields th:first-child { min-width: 180px; }

@media (max-width: 782px) {
    .wipf-document-batch-row { grid-template-columns: 1fr; }
}

/* Die Terminzeile reagiert auf die Breite ihres eigenen Containers
   (.wipf-schedule-blocks, siehe oben) statt auf die Browser-Fensterbreite.
   Im Kurscockpit ist dieser Kasten breit, im Kursmanager-Arbeitsplatz durch
   die Seitennavigation dauerhaft schmaler – mit @media würde die schmale
   Anordnung dort nie greifen, obwohl der verfügbare Platz das erfordert.
   Die beiden Schwellenwerte sind aus den Mindestbreiten der Spalten
   hergeleitet und ggf. nach visueller Prüfung nachzujustieren. */
@container wipf-schedule (max-width: 900px) {
    .wipf-unit-row { grid-template-columns: repeat(5, minmax(90px, 1fr)); }
    .wipf-instructor-picker { grid-column: span 4; }
    .wipf-unit-calendar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container wipf-schedule (max-width: 620px) {
    .wipf-unit-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wipf-instructor-picker,
    .wipf-unit-row .wipf-row-actions { grid-column: 1 / -1; }
    .wipf-instructor-picker__controls { grid-template-columns: 1fr; }
    .wipf-unit-calendar-grid { grid-template-columns: 1fr; }
}