/* =============================================================================
   Filterleiste – GETEILT von der Suche (search.php) und der Bildverwaltung
   (admin/images.php).

   Lag früher in search.css und war deshalb im Backend nicht verfügbar; admin/images.php
   hatte davon eine handgepflegte Kopie im <style>-Block, die zwangsläufig veraltete.

   Enthält: Filterzeile (Suchfeld, Selects, Veranstaltungs-Dropdown), aktive Filter-Chips,
   Trichter-Button und die Filter-Schublade (Off-Canvas) samt Kategorie-Dropdown.

   HINWEIS zu den Variablen: Frontend (style.css) und Backend (admin.css) teilen sich
   --surface/--border/--border-light/--text/--primary/--ease/--sh-*. Nur die gedämpfte
   Textfarbe heißt im Backend --muted; admin.css spiegelt sie deshalb auf --text-muted.
   ============================================================================= */

/* ── Filterleiste ───────────────────────────────────────────────────────────── */
.search-filters {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0;
    padding: .75rem 1rem;
    box-shadow: var(--sh-xs);
}

.search-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    align-items: center;
}

.search-input-wrap {
    position: relative;
    flex: 1 1 220px;
    min-width: 160px;
}
.search-input-icon {
    position: absolute;
    left: .75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: .82rem;
    pointer-events: none;
    z-index: 2;
}
.search-input {
    padding-left: 2rem;
    padding-right: 2rem;
    font-size: .875rem;
    height: 34px;
    border-radius: 0;
}
.search-clear-btn {
    position: absolute;
    right: .4rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    transition: color var(--ease);
    z-index: 2;
}
.search-clear-btn:hover { color: var(--text); }

.search-select {
    min-width: 115px;
    max-width: 190px;
    flex: 1;
    height: 34px;
    font-size: .8125rem;
    border-radius: 0;
    padding-top: 0;
    padding-bottom: 0;
}
/* Pfeil für native <select>-Felder explizit sicherstellen */
select.search-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%236c757d' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .6rem center;
    background-size: 14px 10px;
    padding-right: 1.75rem;
}
/* Durchsuchbares Veranstaltungs-Dropdown */
.search-evt-wrap {
    position: relative;
    flex: 1;
    min-width: 140px;
    max-width: 220px;
}
.search-evt-wrap .search-select {
    width: 100%;
    max-width: none;
    flex: none;
    padding-right: 1.75rem;
    cursor: default;
}
.search-evt-chevron {
    position: absolute;
    right: .6rem;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    font-size: .72rem;
    color: var(--text-muted);
    pointer-events: none;
    transition: transform .18s ease;
}
.search-evt-wrap.is-open .search-evt-chevron {
    transform: translateY(-50%) rotate(180deg);
}
.search-evt-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 300;
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: none;
    max-height: 220px;
    overflow-y: auto;
    box-shadow: var(--sh-md);
    scrollbar-width: thin;
}
.search-evt-item {
    padding: .3rem .7rem;
    font-size: .8rem;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text);
}
.search-evt-item:hover { background: var(--border-light); }
.search-evt-item.is-active { background: var(--primary); color: #fff; }
.search-filters .btn-outline-secondary { border-radius: 0; height: 34px; }

/* ── Floating-Label-Variante der Filterfelder (analog Backend) ──────────────── */
.search-filter-row .form-floating > label {
    font-size: .875rem;
    line-height: 1.5;
    color: var(--text-muted);
}
/* Suchfeld: Floating-Höhe + Platz für Such-Icon (links) und Clear-Button (rechts) */
.search-input-wrap.form-floating > .search-input {
    height: calc(3.5rem + 2px);
    padding-left: 2.25rem;
    padding-right: 2rem;
}
.search-input-wrap.form-floating > label { padding-left: 2.25rem; }   /* Label startet rechts vom Icon */
.search-input-wrap.form-floating > .search-input-icon,
.search-input-wrap.form-floating > .search-clear-btn { z-index: 3; }
/* Native Selects im Floating-Wrap */
.search-select-wrap { flex: 1; min-width: 115px; max-width: 190px; }
.search-select-wrap > .search-select { width: 100%; min-width: 0; max-width: none; }
.search-filter-row .form-floating > select.search-select {
    height: calc(3.5rem + 2px);
    padding-top: 1.625rem;
    padding-bottom: .625rem;
}
/* Durchsuchbares Veranstaltungs-Feld (Text-Input mit Chevron) */
.search-evt-wrap.form-floating > .search-evt-input {
    height: calc(3.5rem + 2px);
    padding-right: 1.75rem;
}
.search-evt-wrap.form-floating > .search-evt-chevron { z-index: 3; }
/* Veranstaltungs-Dropdown in der Filter-Schublade: volle Breite statt schmaler Filterzeilen-Breite */
.fdr-evt { flex: none; min-width: 0; max-width: none; width: 100%; }

/* Aktive Filter-Chips */
.search-active-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem;
    margin-top: .5rem;
}
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    background: var(--primary);
    color: #fff;
    font-size: .72rem;
    font-weight: 600;
    padding: .15rem .45rem .15rem .5rem;
    border-radius: 2px;
    white-space: nowrap;
}
.filter-chip i { font-size: .72rem; }
.filter-chip__remove {
    color: rgba(255,255,255,.75);
    font-size: .78rem;
    line-height: 1;
    text-decoration: none;
    transition: color var(--ease);
    display: flex;
    align-items: center;
}
.filter-chip__remove:hover { color: #fff; }


/* ── Responsive (Filterzeile) ───────────────────────────────────────────────── */
@media (max-width: 767px) {
    .search-select { min-width: 105px; flex: 1 1 calc(50% - .2rem); max-width: none; }
}
@media (max-width: 480px) {
    .search-input-wrap { flex: 1 1 100%; }
}

/* ── Filter-Schublade (rechte Off-Canvas-Leiste) + Toggle-Button ─────────────── */
.search-filter-toggle {
    flex: 0 0 auto;
    margin-left: auto;                 /* schiebt den Button ganz nach rechts */
    width: calc(3.5rem + 2px);
    height: calc(3.5rem + 2px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 1.15rem;
    border-radius: 0;
    cursor: pointer;
    transition: background var(--ease), border-color var(--ease), color var(--ease);
}
.search-filter-toggle:hover { border-color: var(--primary); color: var(--primary); }
/* Filterleiste links: Toggle-Icon vor das Suchfeld schieben */
body.filter-side-left .search-filter-toggle { order: -1; margin-left: 0; }

.filter-drawer {
    position: fixed;
    top: var(--nav-h, 0);                       /* unterhalb des (sticky) Headers beginnen */
    right: 0;
    height: calc(100vh - var(--nav-h, 0px));
    width: 340px;
    max-width: 90vw;
    background: var(--surface);
    border-left: 1px solid var(--border);
    box-shadow: -8px 0 24px rgba(15, 23, 42, .12);
    transform: translateX(100%);
    transition: transform .28s cubic-bezier(.4, 0, .2, 1);
    z-index: 1010;                             /* über dem Content, aber UNTER der Navbar (1020) +
                                                  deren Dropdowns – liegt via top ohnehin darunter */
    display: flex;
    flex-direction: column;
}
/* Variante: Schublade am linken Bildschirmrand */
.filter-drawer--left {
    right: auto;
    left: 0;
    border-left: 0;
    border-right: 1px solid var(--border);
    box-shadow: 8px 0 24px rgba(15, 23, 42, .12);
    transform: translateX(-100%);
}
body.filter-drawer-open .filter-drawer { transform: translateX(0); }
/* Beim Wieder-Öffnen nach dem Reload ohne Animation (Schublade wirkt durchgehend offen) */
body.filter-drawer-no-anim .filter-drawer,
body.filter-drawer-no-anim #main-content,
body.filter-drawer-no-anim .footer { transition: none !important; }

/* Geöffneter Drawer verkleinert den Content (Header bleibt unberührt, Footer wandert mit). */
#main-content,
.footer { transition: margin .28s cubic-bezier(.4, 0, .2, 1); }
body.filter-drawer-open #main-content,
body.filter-drawer-open .footer { margin-right: 340px; }
/* Links: Content nach rechts schrumpfen */
body.filter-side-left.filter-drawer-open #main-content,
body.filter-side-left.filter-drawer-open .footer { margin-right: 0; margin-left: 340px; }
.filter-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .7rem 1.1rem;
    background: var(--dark);
    color: #fff;
}
.filter-drawer__title {
    margin: 0;
    display: flex;
    align-items: center;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #fff;   /* explizit weiß – überschreibt Bootstraps --bs-heading-color (sonst unsichtbar) */
}
.filter-drawer__title i { color: #fff; }
.filter-drawer__body { flex: 1; overflow-y: auto; padding: 1rem 1.1rem; }

/* Fuß mit „Zurücksetzen" */
.filter-drawer__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .75rem 1.1rem;
    border-top: 1px solid var(--border);
    background: var(--surface);
}

/* Filtergruppen im Drawer */
.fdr-group { margin-bottom: 1.15rem; }
.fdr-group:last-child { margin-bottom: 0; }
/* Aufnahmedatum-Gruppe deaktiviert (bei gewählter Veranstaltung) */
.fdr-group--locked .fdr-label { opacity: .6; }
/* Felder sind NICHT disabled (Werte bleiben erhalten & werden übermittelt), sondern nur optisch
   gesperrt: nicht anklickbar, ausgegraut – der eingestellte Zeitraum greift wieder, sobald
   „Alle Veranstaltungen" gewählt ist. */
.fdr-group--locked .form-floating { pointer-events: none; }
.fdr-group--locked .form-control,
.fdr-group--locked .form-select {
    background-color: var(--border-light);
    color: var(--text-muted);
    opacity: .7;
}
.fdr-lock-hint { margin: .45rem 0 0; font-size: .72rem; color: var(--text-muted); display: flex; align-items: center; }
.fdr-label {
    display: flex;
    align-items: center;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: .35rem;
}
.fdr-dates { display: flex; gap: .5rem; }
.fdr-date { flex: 1; min-width: 0; }
/* Datumsfelder als Floating-Label: Date-Inputs zeigen stets ihre Datums-UI, daher das Label
   dauerhaft anheben und oben Platz schaffen (sonst Überlappung im leeren Zustand). */
.filter-drawer .fdr-date.form-floating > .form-control { padding-top: 1.625rem; padding-bottom: .625rem; }
.filter-drawer .fdr-date.form-floating > label {
    opacity: .65;
    transform: scale(.85) translateY(-.5rem) translateX(.15rem);
}
.filter-drawer .form-select,
.filter-drawer .form-control { font-size: .875rem; border-radius: 0; }
/* Floating-Selects im Drawer (Sortierung, Zeitraum, Ausrichtung): Höhe + Innenabstand */
.filter-drawer .form-floating > .form-select {
    height: calc(3.5rem + 2px);
    padding-top: 1.625rem;
    padding-bottom: .625rem;
}
.filter-drawer .form-floating > label { color: var(--text-muted); }

/* Kategorie-Dropdown: Trigger (zeigt das aktive Element) + ausklappbares Panel mit Baum */
.fdr-catdd { position: relative; }
.fdr-catdd__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .55rem .75rem;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: .875rem;
    border-radius: 0;
    cursor: pointer;
    text-align: left;
    transition: border-color .12s ease;
}
.fdr-catdd__trigger:hover,
.fdr-catdd.is-open .fdr-catdd__trigger { border-color: var(--primary); }
.fdr-catdd__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fdr-catdd__chev { flex-shrink: 0; font-size: .72rem; color: var(--text-muted); transition: transform .18s ease; }
.fdr-catdd.is-open .fdr-catdd__chev { transform: rotate(180deg); }
.fdr-catdd__panel { border: 1px solid var(--border); border-top: 0; background: var(--surface); }
.fdr-catdd__panel[hidden] { display: none; }

/* Kategorie-Baum (durchsuchbar, auf-/zuklappbar) – analog admin/event-edit.php */
.fdr-cat__search { border-bottom: 1px solid var(--border); }
.fdr-cat__search > .form-control { border: 0; border-radius: 0; }
.fdr-cat__list { max-height: 260px; overflow-y: auto; scrollbar-width: thin; }
.fdr-cat-item {
    display: flex;
    align-items: flex-start;
    gap: .35rem;
    padding: .4rem .55rem;
    border-bottom: 1px solid var(--border-light);
    font-size: .82rem;
    color: var(--text);
}
.fdr-cat-item:last-of-type { border-bottom: 0; }
.fdr-cat-item:hover { background: var(--border-light); }
.fdr-cat-item.is-selected { background: rgba(249, 115, 22, .1); }
.fdr-cat-item.is-selected .fdr-cat-name { color: var(--primary); font-weight: 600; }
.fdr-cat-item.cat-collapsed,
.fdr-cat-item.cat-filtered-out { display: none !important; }
.fdr-cat-pick {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 0;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
    line-height: 1.3;
}
.fdr-cat-name { display: block; }
.fdr-cat-parent { display: block; font-size: .65rem; color: var(--text-muted); }
.fdr-cat__empty { padding: .6rem; color: var(--text-muted); font-size: .8rem; text-align: center; }
/* Auf-/Zuklapp-Pfeil */
.cat-toggle {
    flex-shrink: 0;
    width: 1.1rem; height: 1.1rem;
    margin-top: .05rem;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; background: transparent; border-radius: 3px;
    color: var(--text-muted); cursor: pointer;
    transition: background .12s, color .12s;
}
.cat-toggle:hover { background: var(--border); color: var(--primary); }
.cat-toggle i { font-size: .7rem; transition: transform .15s ease; }
.cat-toggle[aria-expanded="true"] i { transform: rotate(90deg); }
.cat-toggle-spacer { display: inline-block; width: 1.1rem; flex-shrink: 0; }

/* Schmale Screens: zu wenig Platz zum Verkleinern → Drawer legt sich als Overlay über
   den Content (weiterhin unter dem Header), der Content wird nicht geschoben. */
@media (max-width: 767px) {
    .filter-drawer { width: min(340px, 85vw); }
    body.filter-drawer-open #main-content,
    body.filter-drawer-open .footer,
    body.filter-side-left.filter-drawer-open #main-content,
    body.filter-side-left.filter-drawer-open .footer { margin-right: 0; margin-left: 0; }
}