.admin-shell {
    display: flex;
    min-height: 100vh;
}

.admin-sidebar {
    width: 250px;
    flex-shrink: 0;
    background-color: rgba(13, 15, 22, 0.7);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 30%);
    backdrop-filter: blur(28px) saturate(160%);
    -webkit-backdrop-filter: blur(28px) saturate(160%);
    color: #cbd2de;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 40;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    transition: transform 0.2s ease;
}

.admin-sidebar__brand {
    padding: 1.25rem 1.25rem 1rem;
    font-weight: 700;
    color: #fff;
    font-size: 1.05rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.admin-sidebar__brand span {
    display: block;
    font-size: 0.72rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.55);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    margin-top: 0.15rem;
}

.admin-nav {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem 0.6rem;
}

.admin-nav__group {
    margin-bottom: 1.1rem;
}

.admin-nav__label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    /* Helle, halbtransparente Schrift statt fester Grauton - bleibt auf der
       Glas-Sidebar lesbar, egal wie hell/farbig der durchscheinende
       Hintergrund gerade an der Stelle ist (siehe backdrop-filter oben). Der
       Text-Schatten sorgt zusätzlich für Kontrast über helleren Blur-Stellen. */
    color: rgba(255, 255, 255, 0.62);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    padding: 0.4rem 0.6rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.admin-nav__label::-webkit-details-marker {
    display: none;
}

.admin-nav__label::after {
    content: '▾';
    font-size: 0.75rem;
    transition: transform 0.15s ease;
}

.admin-nav__group:not([open]) .admin-nav__label::after {
    transform: rotate(-90deg);
}

.admin-nav a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.7rem;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.82);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    font-size: 0.87rem;
    text-decoration: none;
    margin-bottom: 0.1rem;
    transition: background 0.15s ease, color 0.15s ease;
}

.admin-nav a:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

/* Ausgewählte Seite: helle, hellgraue Glas-Chip mit dunkler Schrift - hebt
   sich klar von der dunklen Sidebar ab, ohne wie ein flacher blauer
   Button-Block zu wirken. */
.admin-nav a.active {
    background-color: rgba(229, 231, 235, 0.92);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    color: #1a1d23;
    font-weight: 600;
    text-shadow: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 4px 14px rgba(0, 0, 0, 0.18);
}

.admin-nav a.active .icon {
    opacity: 1;
}

/* Zähler an einem Menüpunkt (z.B. überfällige Bücher der neuen Bibliothek). */
.admin-nav__count {
    margin-left: auto;
    min-width: 1.35rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.35rem;
    text-align: center;
    text-shadow: none;
    font-variant-numeric: tabular-nums;
}

.admin-nav__count--warn {
    background: #f8efdb;
    color: #97600f;
}

.admin-nav__count--danger {
    background: #fae8e6;
    color: #a03028;
}

.admin-nav a.disabled {
    color: #4b5262;
    cursor: default;
}

.admin-nav a.disabled:hover {
    background: transparent;
    color: #4b5262;
}

.admin-nav .icon {
    width: 1.1rem;
    text-align: center;
    opacity: 0.9;
}

.admin-sidebar__footer {
    padding: 0.9rem 1.1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.5);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.admin-main {
    margin-left: 250px;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.admin-topbar {
    background-color: var(--glass-bg-strong);
    background-image: var(--glass-sheen);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid var(--glass-border);
    padding: 0.9rem 1.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 20;
}

.admin-topbar__title {
    font-size: 1.05rem;
    font-weight: 600;
}

.admin-topbar__user {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

/* "Zurück" wie im Browser (admin.js blendet ihn ein) */
.admin-topbar__back {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid var(--glass-border);
    background-color: var(--glass-bg-strong);
    color: var(--color-text);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.admin-topbar__back:hover {
    background-color: var(--color-bg);
}

.admin-topbar__back[hidden] {
    display: none;
}

.admin-topbar__menu-btn {
    display: none;
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    color: var(--color-text);
}

.admin-topbar__account-menu {
    position: relative;
}

.admin-topbar__account-btn {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid var(--glass-border);
    background-color: var(--glass-bg-strong);
    color: var(--color-text);
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease;
}

.admin-topbar__account-btn:hover {
    background-color: rgba(var(--glass-tint), 0.92);
}

.admin-topbar__account-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 200px;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    z-index: 40;
}

/* Siehe public.css: die explizite "display:flex" oben gewinnt sonst gegen
   das per JS gesetzte [hidden]-Attribut (gleiche Spezifität, Autor- statt
   UA-Regel) - ohne diese Zeile bliebe das Dropdown dauerhaft sichtbar. */
.admin-topbar__account-dropdown[hidden] {
    display: none;
}

.admin-topbar__account-dropdown-user {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-muted);
    padding: 0.4rem 0.6rem 0.5rem;
    border-bottom: 1px solid var(--glass-border);
    margin-bottom: 0.25rem;
}

.admin-topbar__account-dropdown a,
.admin-topbar__account-dropdown button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.5rem 0.6rem;
    border-radius: var(--radius-sm);
    color: var(--color-text);
    text-decoration: none;
    background: none;
    border: none;
    font-size: 0.9rem;
    font-family: inherit;
    cursor: pointer;
}

.admin-topbar__account-dropdown a:hover,
.admin-topbar__account-dropdown button:hover {
    background-color: #374151;
    color: #fff;
}

.admin-topbar__account-dropdown form {
    margin: 0;
}

.admin-content {
    padding: 1.75rem;
    flex: 1;
}

.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.page-header h1 {
    font-size: 1.35rem;
}

.page-header p {
    color: var(--color-text-muted);
    margin: 0.2rem 0 0;
    font-size: 0.88rem;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-card {
    background-color: var(--glass-bg);
    background-image: var(--glass-sheen);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    box-shadow: var(--glass-shadow), var(--glass-highlight);
}

.stat-card__label {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    margin-bottom: 0.4rem;
}

.stat-card__value {
    font-size: 1.6rem;
    font-weight: 700;
}

.sidebar-backdrop {
    display: none;
}

.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 1rem;
}

.modal-overlay.is-open {
    display: flex;
}

.modal-box {
    background-color: var(--glass-bg-strong);
    background-image: var(--glass-sheen);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--glass-shadow), var(--glass-highlight);
    max-width: 440px;
    width: 100%;
    padding: 1.5rem;
    max-height: 85vh;
    overflow-y: auto;
}

.modal-box__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.modal-box__close {
    background: none;
    border: none;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    color: var(--color-text-muted);
    padding: 0.2rem;
}

.modal-box__row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.85rem;
}

.modal-box__row:last-of-type {
    border-bottom: none;
}

.modal-box__row dt {
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.modal-box__row dd {
    margin: 0;
    text-align: right;
}

/* Anklickbare "Morgens"/"Abends"-Kopfzelle in der Einsatzplan-Matrix (öffnet
   das Bearbeiten-Modal für diesen Termin). */
.matrix-period-trigger {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--color-primary);
    text-decoration: underline dotted;
    cursor: pointer;
}

.calendar-month-grid {
    display: grid;
    /* minmax(0, 1fr) statt 1fr - sonst zwingt ein langer, nicht umbrechender
       Termin-Text seine Spalte breiter als 1fr und quetscht die Nachbartage. */
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.4rem;
}

.calendar-month-grid--header {
    margin-bottom: 0.4rem;
}

.calendar-month-grid__weekday {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text-muted);
    text-align: center;
    padding-bottom: 0.2rem;
}

.calendar-month-grid + .calendar-month-grid {
    margin-top: 0.4rem;
}

.calendar-month-cell {
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: var(--radius-sm);
    padding: 0.35rem;
    /* Quadratisch statt fester Höhe - Höhe folgt automatisch der (responsiven)
       Spaltenbreite, damit die Monatsansicht bei breiteren Fenstern nicht
       unschön in die Höhe gezogen wirkt. Mehr Termine als reinpassen zeigen
       weiterhin die farbigen Punkte statt abgeschnitten zu werden (overflow:hidden). */
    aspect-ratio: 1;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.4);
}

.calendar-month-cell--muted {
    background: rgba(255, 255, 255, 0.12);
    opacity: 0.55;
}

.calendar-month-cell--today {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary);
}

.calendar-month-cell__date {
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    text-decoration: none;
    color: inherit;
    display: inline-block;
}

.calendar-month-cell__date:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

/* Jeder Termin in der Monatsansicht ist ein kurzer, einzeiliger Titel-Block
   (Rest wird abgeschnitten mit "…", voller Titel/Uhrzeit als title-Tooltip) -
   dadurch lässt sich ein Termin auf einen Blick zuordnen statt nur an der
   Farbe eines bloßen Punkts zu raten. Was in der kleinen Zelle nicht mehr
   reinpasst, zeigt stattdessen "+N" (siehe .calendar-month-cell__dot--more
   weiter unten) - overflow:hidden auf der Zelle selbst verhindert dabei ein
   Sprengen des Monatsrasters. */
.calendar-month-cell__entries {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    overflow: hidden;
}

.calendar-month-cell__entry {
    padding: 0.05rem 0.3rem;
    border-radius: 4px;
    font-size: 0.66rem;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    flex-shrink: 0;
}

.calendar-month-cell__dot.calendar-month-cell__dot--more {
    /* "+N"-Verlinkung für Termine, die zusätzlich zu den Titel-Blöcken oben
       (siehe .calendar-month-cell__entry) nicht mehr in die Zelle passen -
       bewusst als kleine runde Pille, damit sie sich von den Titel-Blöcken
       optisch abhebt. */
    width: auto;
    height: auto;
    line-height: 1.1;
    padding: 0.05rem 0.25rem;
    border-radius: 999px;
    font-size: 0.55rem;
    font-weight: 700;
    color: var(--color-text-muted);
    background: rgba(148, 163, 184, 0.25);
    text-decoration: none;
}

@media (max-width: 900px) {
    .calendar-month-grid {
        grid-template-columns: repeat(7, minmax(38px, 1fr));
    }

    .calendar-month-cell {
        /* aspect-ratio (von der Desktop-Regel) explizit zurücksetzen - sonst
           errechnet der Browser aus der festen Höhe unten eine bevorzugte
           Breite von ebenfalls 130px pro Zelle, was bei 7 Spalten die
           gesamte Monatsansicht auf ca. 900px aufbläht und auf schmalen
           Bildschirmen zu waagerechtem Scrollen samt überlappenden Zellen führt. */
        aspect-ratio: auto;
        height: 130px;
        padding: 0.2rem;
    }
}

.calendar-entry {
    cursor: pointer;
    border: none;
    width: 100%;
    text-align: left;
    display: block;
    font-family: inherit;
}

.calendar-entry:hover {
    filter: brightness(0.96);
}

.calendar-week-cell {
    padding: 0.75rem;
    height: 400px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.calendar-week-cell__header {
    text-decoration: none;
    color: inherit;
    display: block;
    margin-bottom: 0.6rem;
    flex-shrink: 0;
}

.calendar-week-cell__header:hover .calendar-week-cell__date {
    color: var(--color-primary);
    text-decoration: underline;
}

.calendar-week-cell__weekday {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.calendar-week-cell__date {
    font-weight: 600;
}

.calendar-week-cell__entries {
    flex: 1;
    overflow: hidden;
}

.calendar-week-cell__entry {
    display: block;
    width: 100%;
    border-radius: var(--radius-sm);
    padding: 0.4rem 0.5rem;
    margin-bottom: 0.4rem;
    font-size: 0.78rem;
    cursor: pointer;
    border: none;
    text-align: left;
    font-family: inherit;
}

.calendar-week-cell__entry:hover {
    filter: brightness(0.96);
}

.calendar-week-cell__entry-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.calendar-week-cell__more {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
}

/* Ein Punkt pro nicht angezeigtem Termin, in der jeweiligen Kalender-/
   Raumfarbe (siehe $entryColor in admin/calendar/index.php) - statt eines
   reinen "…", damit man auch ohne Klick schon sieht, WAS ungefähr noch an dem
   Tag ansteht (z.B. 2 Punkte in Raumfarbe = 2 weitere Termine in dem Raum). */
.calendar-more-dot {
    display: inline-block;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 999px;
    flex-shrink: 0;
}

.day-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* .card benutzt backdrop-filter, was einen eigenen Stacking-Context erzeugt -
   ohne diese Regel würde die darunterliegende Kalender-Karte (gleicher,
   automatischer z-index, aber später im DOM) die Kategorien-Auswahl-Box
   trotz ihres z-index von 30 optisch verdecken, weil deren z-index nur
   innerhalb des Stacking-Contexts der Toolbar-Karte selbst gilt. */
.calendar-toolbar-card {
    position: relative;
    z-index: 5;
}

.category-filter {
    position: relative;
}

.category-filter summary {
    list-style: none;
    cursor: pointer;
}

.category-filter summary::-webkit-details-marker {
    display: none;
}

.category-filter__panel {
    position: absolute;
    top: calc(100% + 0.3rem);
    right: 0;
    z-index: 30;
    /* Bewusst deckendes Weiß statt des sonst hier verwendeten
       Glassmorphism-Effekts - über dem Kalenderraster war die Liste sonst zu
       transparent und schwer lesbar (Rückmeldung Nutzer). */
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md), 0 0 0 1px rgba(0, 0, 0, 0.04);
    padding: 0.75rem;
    min-width: 220px;
    max-height: 320px;
    overflow-y: auto;
}

.category-filter__option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0;
    font-size: 0.85rem;
    cursor: pointer;
}

.category-filter__panel hr {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 0.3rem 0;
}

.category-filter__apply {
    width: 100%;
    margin-top: 0.5rem;
}

.day-agenda {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.day-agenda__hour {
    display: flex;
    border-bottom: 1px solid var(--color-border);
    min-height: 3rem;
}

.day-agenda__hour:last-child {
    border-bottom: none;
}

.day-agenda__hour-label {
    width: 64px;
    flex-shrink: 0;
    padding: 0.5rem 0.6rem;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    border-right: 1px solid var(--color-border);
}

.day-agenda__hour-entries {
    flex: 1;
    padding: 0.4rem 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.day-agenda__entry {
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.7rem;
    font-size: 0.85rem;
    cursor: pointer;
    border: none;
    text-align: left;
    font-family: inherit;
    width: 100%;
}

.day-agenda__entry:hover {
    filter: brightness(0.96);
}

@media (max-width: 900px) {
    .calendar-week-cell {
        height: auto;
    }

    .day-agenda__hour-label {
        width: 48px;
        font-size: 0.68rem;
    }
}

.dev-idea-group__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    margin: 1.75rem 0 0.75rem;
}

.dev-idea-group__title:first-child {
    margin-top: 0;
}

.dev-idea-group__count {
    background: var(--color-bg);
    color: var(--color-text-muted);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.05rem 0.55rem;
}

.dev-idea-card {
    padding: 0;
    margin-bottom: 0.75rem;
}

.dev-idea-card__summary {
    cursor: pointer;
    list-style: none;
    padding: 1rem 1.25rem;
}

.dev-idea-card__summary::-webkit-details-marker {
    display: none;
}

.dev-idea-card__heading {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.dev-idea-card__title {
    font-weight: 600;
}

.dev-idea-card__short {
    color: var(--color-text-muted);
    font-size: 0.86rem;
    margin-top: 0.3rem;
}

.dev-idea-card__body {
    padding: 0 1.25rem 1.25rem;
    border-top: 1px solid var(--color-border);
    margin-top: 0.25rem;
    padding-top: 1rem;
}

.dev-idea-card__field {
    margin-bottom: 0.9rem;
}

.dev-idea-card__label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text-muted);
    margin-bottom: 0.25rem;
}

.dev-idea-card__value {
    font-size: 0.9rem;
    white-space: pre-wrap;
}

.dev-idea-card__actions {
    margin-top: 1rem;
}

@media (max-width: 900px) {
    .admin-sidebar {
        transform: translateX(-100%);
    }

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

    .admin-main {
        margin-left: 0;
    }

    .admin-topbar__menu-btn {
        display: inline-flex;
    }

    .sidebar-backdrop.is-open {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.35);
        z-index: 30;
    }
}

/* Auf Telefonbreite reicht der Platz neben Titel + Menü-Button nicht mehr für
   Rollen-Umschalter + Name + Abmelden in einer Zeile - alles wird umbruchfähig,
   sonst laufen die Felder rechts über den Bildschirmrand hinaus. */
@media (max-width: 640px) {
    .admin-topbar {
        flex-wrap: wrap;
        row-gap: 0.6rem;
        padding: 0.75rem 1rem;
    }

    .admin-topbar__user {
        width: 100%;
        flex-wrap: wrap;
        justify-content: flex-end;
        row-gap: 0.5rem;
    }

    .topbar-view-switch {
        flex-wrap: wrap;
        justify-content: flex-end;
    }
}

/* "Nur Ansicht"-Sperre (siehe admin.js/admin/layout/base.php) - deaktivierte
   Formularfelder und Bearbeiten-/Erstellen-Links deutlich sichtbar ausgegraut,
   statt sich nur auf die dezente Browser-Standarddarstellung zu verlassen. */
.admin-view-only form[method="post"] input:disabled,
.admin-view-only form[method="post"] select:disabled,
.admin-view-only form[method="post"] textarea:disabled,
.admin-view-only form[method="post"] button:disabled {
    opacity: 0.5;
    filter: grayscale(60%);
    cursor: not-allowed;
}

.admin-view-only a.is-view-only-disabled {
    opacity: 0.45;
    filter: grayscale(70%);
    cursor: not-allowed;
    pointer-events: none;
}

/* Liedanmeldungen: "Dashboard"-Board (Übersicht je aktivem Status) - siehe
   admin/song-submissions/index.php. Spalten im gleichen Glas-Stil wie
   .stat-card, farbiger oberer Rand je Status statt vollflächiger Pastellfarbe
   (dezenter als das frühere Notion-Board, aber sofort unterscheidbar). */
.song-board {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
    align-items: start;
}

.song-board__column {
    background-color: var(--glass-bg);
    background-image: var(--glass-sheen);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--glass-shadow), var(--glass-highlight);
    overflow: hidden;
}

.song-board__column-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1.1rem;
    font-weight: 600;
    font-size: 0.9rem;
    border-bottom: 1px solid var(--glass-border);
    border-top: 3px solid var(--color-text-muted);
}

.song-board__column-header--new { border-top-color: var(--color-primary); }
.song-board__column-header--in_training { border-top-color: var(--color-warning); }
.song-board__column-header--in_program { border-top-color: #0284c7; }

.song-board__count {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-text-muted);
    background: rgba(107, 114, 128, 0.12);
    border-radius: 999px;
    padding: 0.1rem 0.55rem;
    min-width: 1.4rem;
    text-align: center;
}

.song-board__cards {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    max-height: 70vh;
    overflow-y: auto;
}

.song-card {
    display: block;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.85rem 1rem;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow-sm);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.song-card__link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.song-card__action {
    margin: 0.6rem 0 0;
}

.song-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.song-card__title {
    font-weight: 600;
    font-size: 0.92rem;
    margin-bottom: 0.25rem;
}

.song-card__meta {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin-bottom: 0.5rem;
}

.song-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.35rem;
}

.song-card__date {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.song-card__empty {
    font-size: 0.82rem;
    color: var(--color-text-muted);
    padding: 0.5rem 0.25rem;
    text-align: center;
}

/* Dienste: ausklappbare Baumansicht (Grundlage für die spätere Organigramm-/
   Druckansicht) - jeder Dienst ist eine per <details> auf-/zuklappbare Box,
   Unterdienste hängen eingerückt darunter, ohne die Verschachtelungstiefe
   manuell berechnen zu müssen (die Einrückung ergibt sich rein aus der
   HTML-Verschachtelung). */
.ministry-tree-node {
    margin-bottom: 0.6rem;
}

.ministry-tree-team {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--ministry-color, var(--color-primary));
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.ministry-tree-team > summary {
    list-style: none;
    cursor: pointer;
    padding: 0.7rem 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.ministry-tree-team > summary::-webkit-details-marker {
    display: none;
}

.ministry-tree-team > summary::before {
    content: '▸';
    color: var(--color-text-muted);
    transition: transform 0.15s ease;
    flex-shrink: 0;
}

.ministry-tree-team[open] > summary::before {
    transform: rotate(90deg);
}

.ministry-tree-color {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--ministry-color, var(--color-primary));
}

.ministry-tree-name {
    font-weight: 600;
    flex: 1;
}

.ministry-tree-actions {
    display: flex;
    gap: 0.4rem;
}

.ministry-tree-body {
    padding: 0 0.9rem 0.9rem 2.2rem;
}

.ministry-tree-description {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin: 0 0 0.5rem;
}

.ministry-tree-members {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.ministry-tree-members li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.88rem;
}

.ministry-tree-children {
    margin-top: 0.6rem;
    margin-left: 1.4rem;
    padding-left: 1rem;
    border-left: 2px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* Dienste: Organigramm-Ansicht (Baum quer, wie eine klassische
   Organisationsgrafik). Klassisches Pure-CSS-Baummuster über verschachtelte
   <ul>/<li> mit ::before/::after als Verbindungslinien - funktioniert mit
   beliebig vielen Kindern je Ebene, ohne JS oder eine Grafikbibliothek. */
.orgchart-scroll {
    overflow-x: auto;
    padding: 1.5rem 1rem;
}

.orgchart {
    display: table;
    margin: 0 auto;
}

.orgchart ul {
    display: flex;
    justify-content: center;
    padding-top: 2rem;
    margin: 0;
    position: relative;
}

.orgchart > ul {
    padding-top: 0;
}

.orgchart li {
    list-style: none;
    position: relative;
    padding: 2rem 0.6rem 0 0.6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.orgchart > ul > li {
    padding-top: 0;
}

.orgchart li::before,
.orgchart li::after {
    content: '';
    position: absolute;
    top: 0;
    width: 50%;
    height: 2rem;
    border-top: 2px solid var(--color-border);
}

.orgchart li::before {
    right: 50%;
}

.orgchart li::after {
    left: 50%;
    border-left: 2px solid var(--color-border);
}

.orgchart li:only-child {
    padding-top: 0;
}

.orgchart li:only-child::before,
.orgchart li:only-child::after {
    display: none;
}

.orgchart li:first-child::before,
.orgchart li:last-child::after {
    border: none;
}

.orgchart li:last-child::before {
    border-right: 2px solid var(--color-border);
    border-radius: 0 6px 0 0;
}

.orgchart li:first-child::after {
    border-radius: 6px 0 0 0;
}

.orgchart > ul > li::before,
.orgchart > ul > li::after {
    display: none;
}

.orgchart ul ul::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    border-left: 2px solid var(--color-border);
    width: 0;
    height: 2rem;
}

.orgchart-box {
    display: inline-block;
    min-width: 130px;
    max-width: 190px;
    padding: 0.55rem 0.75rem;
    border-radius: var(--radius-sm);
    background: var(--box-color, var(--color-primary));
    color: #fff;
    font-weight: 600;
    font-size: 0.82rem;
    line-height: 1.25;
    box-shadow: var(--shadow-sm);
    word-break: break-word;
}

.orgchart-box__count {
    font-weight: 400;
    font-size: 0.7rem;
    opacity: 0.85;
    margin-top: 0.2rem;
}

/* Kompakte Spalte für Dienste, deren Kinder alle Blätter sind (keine
   Enkel) - Teams stehen untereinander statt nebeneinander aufgefächert,
   verbunden über eine senkrechte Linie mit kurzen Stichleitungen (wie in
   der Organigramm-Vorlage). Hält den Baum bei vielen Geschwistern schmal. */
.orgchart-stack {
    position: relative;
    margin-top: 1.4rem;
    padding-left: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    align-items: flex-start;
}

.orgchart-stack::before {
    content: '';
    position: absolute;
    top: -1.4rem;
    left: 0;
    width: 0;
    height: calc(100% + 1.4rem - 0.7rem);
    border-left: 2px solid var(--color-border);
}

.orgchart-stack__item {
    position: relative;
    padding: 0.3rem 0.55rem;
    border-radius: var(--radius-sm);
    background: var(--box-color, var(--color-primary));
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.2;
    box-shadow: var(--shadow-sm);
    white-space: nowrap;
}

.orgchart-stack__item::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -1.1rem;
    width: 1.1rem;
    height: 0;
    border-top: 2px solid var(--color-border);
}

.orgchart-stack__count {
    font-weight: 400;
    opacity: 0.85;
}

/* Zoom-Werkzeugleiste und der eigentliche zoom-/verschiebbare Bereich
   darunter (siehe orgchart.js) - .orgchart-scroll bleibt der scrollbare
   Rahmen, .orgchart-zoom-wrap bekommt die transform:scale()-Skalierung,
   damit Scroll-Position und Zoom sich nicht gegenseitig stören. */
.orgchart-toolbar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
    position: sticky;
    left: 0;
}

.orgchart-toolbar__level {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    min-width: 3rem;
    text-align: center;
}

.orgchart-zoom-wrap {
    transform-origin: top left;
    width: fit-content;
    cursor: grab;
}

.orgchart-zoom-wrap.is-panning {
    cursor: grabbing;
    user-select: none;
}

/* Boxen sind jetzt <button>-Elemente, sobald Personen zugeordnet sind
   (ausklappbar) - Browser-Standardstil des <button> zurücksetzen, damit sie
   optisch identisch zu den nicht ausklappbaren <div>-Boxen bleiben. */
.orgchart-box--toggle,
.orgchart-stack__item--toggle {
    font-family: inherit;
    border: none;
    cursor: pointer;
    text-align: center;
}

.orgchart-stack__item--toggle {
    text-align: left;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.orgchart-box__caret,
.orgchart-stack__item--toggle .orgchart-box__caret {
    display: inline-block;
    transition: transform 0.15s ease;
    font-size: 0.65rem;
}

.orgchart-box--toggle.is-open .orgchart-box__caret,
.orgchart-stack__item--toggle.is-open .orgchart-box__caret {
    transform: rotate(180deg);
}

/* Ausklappbare Mitgliederliste unter einer Box/einem Stack-Eintrag - per
   Default eingeklappt (max-height:0), damit umliegende Boxen sich nicht
   ruckartig verschieben, sondern die Zeile sanft aufklappt. */
.orgchart-members {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    margin-top: 0.3rem;
    /* Bewusst NICHT width:100% - im umgebenden Flex-Baum (siehe .orgchart li,
       align-items:center ohne eigene Breite) löst eine Prozentbreite hier
       gegen einen völlig falschen, riesigen Bezugsrahmen auf und schiebt das
       Panel weit aus dem sichtbaren Bereich. Stattdessen am Inhalt orientiert,
       mit Ober-/Untergrenze wie die Box selbst. */
    width: max-content;
    min-width: 160px;
    max-width: 280px;
}

.orgchart-members.is-open {
    max-height: 240px;
    overflow-y: auto;
}

.orgchart-members ul {
    display: block !important;
    padding: 0.4rem 0.6rem !important;
    margin: 0;
    list-style: none;
}

.orgchart-members li {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    padding: 0.15rem 0 !important;
    text-align: left;
    font-size: 0.75rem;
    color: var(--color-text);
}

.orgchart-stack__row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
}

.orgchart-stack__row .orgchart-members {
    margin-left: 0;
}

.orgchart-print-wrapper {
    overflow: hidden;
}

.orgchart-print__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

@media print {
    .orgchart-box {
        color: #fff !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* Formatierungs-Editor für Telegram-Texte (siehe public/assets/js/telegram-editor.js) */
.tg-editor { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.tg-editor:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); }
.tg-editor__toolbar { display: flex; flex-wrap: wrap; gap: 0.25rem; padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--color-border); background: var(--color-bg); border-radius: var(--radius-md) var(--radius-md) 0 0; }
.tg-editor__btn { min-width: 2.1rem; height: 2rem; padding: 0 0.5rem; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--color-text); font-size: 0.95rem; cursor: pointer; }
.tg-editor__btn:hover { background: var(--color-surface); border-color: var(--color-border); }
.tg-editor__btn.is-active { background: var(--color-primary); color: #fff; }
.tg-editor__area { padding: 0.65rem 0.8rem; line-height: 1.5; outline: none; overflow-wrap: anywhere; }
.tg-editor__area.is-empty::before { content: attr(data-placeholder); color: var(--color-text-muted); pointer-events: none; }
/* Zitat wie in Telegram: farbiger Balken links */
.tg-editor__area blockquote { margin: 0.35rem 0; padding: 0.2rem 0.75rem; border-left: 3px solid var(--color-primary); background: rgba(37, 99, 235, 0.07); border-radius: 0 6px 6px 0; }
.tg-editor__area a { color: var(--color-primary); text-decoration: underline; }

/* Gruppen als aufklappbare Unterpunkte im Abschnitt "Gruppen" (AdminNav: subgroup) */
.admin-nav__sub-label {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.7rem;
    border-radius: 999px;
    cursor: pointer;
    list-style: none;
    font-size: 0.87rem;
    color: rgba(255, 255, 255, 0.82);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    margin-bottom: 0.1rem;
}
.admin-nav__sub-label::-webkit-details-marker { display: none; }
.admin-nav__sub-label::after { content: '▾'; margin-left: auto; font-size: 0.75rem; opacity: 0.6; }
.admin-nav__sub:not([open]) > .admin-nav__sub-label::after { content: '▸'; }
.admin-nav__sub-label:hover { background: rgba(255, 255, 255, 0.08); }
.admin-nav__sub > a { padding-left: 2.1rem; font-size: 0.84rem; }

/* Dashboard: „Ereignisse diese Woche“ + Social-Media-Kanäle nebeneinander (siehe admin/dashboard/calendar_only.php). */
.dashboard-highlights {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 1.25rem;
    margin-bottom: 1.25rem;
    align-items: start;
}

/* .card + .card (app.css) gibt gestapelten Karten Abstand nach oben - nebeneinander
   würde die rechte Karte dadurch tiefer sitzen als die linke. */
.dashboard-highlights > .card + .card {
    margin-top: 0;
}

.dashboard-highlights > .card:only-child {
    grid-column: 1 / -1;
}

@media (max-width: 900px) {
    .dashboard-highlights {
        grid-template-columns: 1fr;
    }
}

.dashboard-card-title {
    font-size: 1.05rem;
    margin: 0 0 0.85rem;
}

/* „Unsere Social Media Kanäle“ im Dashboard: je Kanal Logo + Konten als Links. */
.social-channels {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.social-channel__head {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.45rem;
}

.social-channel__logo svg {
    display: block;
    width: 28px;
    height: 28px;
}

.social-channel__accounts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.social-account {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--color-text);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.social-account:hover {
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.social-account--youtube {
    color: #fff;
    background: #ff0000;
    border-color: #ff0000;
}

.social-account--instagram {
    color: #fff;
    background: linear-gradient(45deg, #f9a13a, #e1306c 45%, #833ab4);
    border-color: transparent;
}

.social-account--telegram {
    color: #fff;
    background: #229ed9;
    border-color: #229ed9;
}

.social-account--facebook {
    color: #fff;
    background: #1877f2;
    border-color: #1877f2;
}