/* filter-popover.css — Filter-Popover-Layout + Sections + Items. */

/* ──────────────────────────────────────────────────────────────────────
 * Filter-Popover
 * ────────────────────────────────────────────────────────────────────── */

.app-filter-popover {
  padding: var(--space-3-5) var(--space-4) var(--space-2-5);
  font-family: var(--lod-font-sans);
  min-width: min(360px, calc(100vw - 24px));
  max-width: 440px;
}
.app-filter-popover-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3-5) var(--space-4-5);
}
.app-filter-popover-section-title {
  margin: 0 0 8px;
  font-size: var(--font-size-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--lod-gray-500);
}
/* Full-Width-Sektionen (Schnellfilter + Mitarbeiter, Phase, Projekt, Status).
   Zeit-Chips (Heute/Diese Woche/...) wrappen ueber die volle Breite;
   Prio + Firma teilen sich darunter die Zeile. */
.app-filter-popover-section[data-filter-popover-section="quick"],
.app-filter-popover-section[data-filter-popover-section="schnell"],
.app-filter-popover-section[data-filter-popover-section="herkunft"],
.app-filter-popover-section[data-filter-popover-section="mitarbeiter"],
.app-filter-popover-section[data-filter-popover-section="phase"],
.app-filter-popover-section[data-filter-popover-section="projekt"],
.app-filter-popover-section[data-filter-popover-section="status"],
.app-filter-popover-section[data-filter-popover-section="aufgabengeber"],
/* Projekte-Filter Kunde/Projektleiter/Betreff je eine volle Zeile — analog
   zu Kanban Phase/Projekt. Berechtigungstyp + Fakturierbar bleiben in
   Zeile 1 nebeneinander im 2-Spalten-Grid. Kontingente: Abrechnungsart auf
   volle Zeile (es gibt nur den Mitarbeiter als zweite Dimension und der ist
   auch volle Zeile). */
.app-filter-popover-section[data-filter-popover-section="kunde"],
.app-filter-popover-section[data-filter-popover-section="kontakt"],
.app-filter-popover-section[data-filter-popover-section="projektleiter"],
.app-filter-popover-section[data-filter-popover-section="betreff"],
.app-filter-popover-section[data-filter-popover-section="abrechnungsart"],
/* Paket ANFR-V2: Anfragen-Besitzer als full-width avatar-chips, analog zu
   Kanban-"mitarbeiter". Status erbt bereits den full-width-Selektor oben. */
.app-filter-popover-section[data-filter-popover-section="besitzer"],
/* Paket WISS-V2: Ansicht, Kategorie, Autor, Keyword je eine volle Zeile.
   Prio + Ursprung stehen in Zeile 2 nebeneinander (bleiben im 2-Col-Grid). */
.app-filter-popover-section[data-filter-popover-section="view"],
.app-filter-popover-section[data-filter-popover-section="kategorie"],
.app-filter-popover-section[data-filter-popover-section="autor"],
.app-filter-popover-section[data-filter-popover-section="keyword"] {
  grid-column: 1 / -1;
}
.app-filter-popover-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1-5);
}
/* Searchable-chips: kompaktes Such-Dropdown statt endloser Chip-Liste. Max-Hoehe
   mit Scroll - das Popover bleibt schlank, egal wie viele Optionen es gibt.
   Beobachtet bei Projekt-Filter (viele Projekte) und Phase-Filter (viele Phasen). */
.app-filter-popover-chips[data-fp-searchable-list] {
  max-height: 180px;
  overflow-y: auto;
  padding: var(--space-1);
  border: 1px solid var(--lod-gray-100);
  border-radius: var(--radius-md);
  background: #fff;
  transition: max-height var(--duration-fast), padding var(--duration-fast), border-color var(--duration-fast);
}
/* Leere searchable-Liste (grosse Menge, nichts gewaehlt/gesucht): kollabieren,
   damit kein verwaister umrandeter Leer-Kasten unter der Suche steht. */
.app-filter-popover-chips[data-fp-searchable-list].is-empty {
  max-height: 0;
  padding: 0;
  border-color: transparent;
}
/* Versteckte Chips im grossen searchable-Set: JS toggelt das Attribut beim
   Suchen/Auswaehlen (filter-popover.js) — kein Inline-display-Style.
   Spezifitaet 0,2,0 schlaegt .app-f-chip (display:inline-flex). */
.app-filter-popover [data-fp-hidden] { display: none; }
.app-f-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: 5px var(--space-2-5);
  border-radius: var(--radius-md);
  background: #fff;
  border: 1px solid var(--lod-gray-200);
  color: var(--lod-gray-700);
  font-size: var(--font-size-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
}
.app-f-chip:hover { border-color: var(--lod-darkblue-300); color: var(--lod-darkblue); }
.app-f-chip.is-active {
  background: var(--lod-darkblue);
  color: #fff;
  border-color: var(--lod-darkblue);
}
.app-f-chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.app-f-chip-avatar {
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2-5) var(--space-1) var(--space-1);
}
/* Einheitliche Avatar-Groesse im Filter-Chip: Egal ob M365-Foto,
   Initialen-Avatar oder Noch-nicht-zugewiesen-Kreis — alle bekommen 20x20
   mit runden Border. avatar-slot, avatar und das innere img werden gleich
   behandelt. */
.app-f-chip-avatar .avatar-slot,
.app-f-chip-avatar .avatar {
  width: 20px;
  height: 20px;
  font-size: 9px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  box-sizing: border-box;
}
.app-f-chip-avatar .avatar-slot > .avatar,
.app-f-chip-avatar .avatar-slot > img {
  width: 100%;
  height: 100%;
  font-size: 9px;
  border-radius: 50%;
  object-fit: cover;
}
.app-f-chip-avatar .avatar {
  color: #fff;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
}
.app-f-chip-avatar .avatar.empty {
  background: var(--lod-gray-200);
}
.app-f-chip-avatar .avatar.empty img {
  width: 60%; height: 60%; opacity: 0.55;
}
.app-f-chip-avatar.is-active .avatar,
.app-f-chip-avatar.is-active .avatar-slot {
  box-shadow: 0 0 0 1.5px #fff;
}
.app-filter-popover-searchbox {
  margin-bottom: var(--space-1-5);
  padding: var(--space-1-5) var(--space-2);
  background: var(--lod-gray-50);
  border-radius: var(--radius-md);
}
.app-filter-popover-searchbox input {
  width: 100%;
  border: none;
  background: transparent;
  font-size: 12.5px;
  color: var(--lod-darkblue);
}
.app-filter-popover-searchbox input:focus { outline: none; }
/* Hint-Zeile unter Suche bei grossen Listen ohne Eingabe. */
.app-filter-popover-searchhint {
  font-size: 11.5px;
  color: var(--lod-gray-500);
  font-style: italic;
  padding: var(--space-1) var(--space-xxs);
}

.app-filter-popover-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-3-5);
  padding-top: var(--space-2-5);
  border-top: 1px solid var(--lod-gray-100);
}
.app-filter-popover-reset {
  background: transparent;
  border: none;
  color: var(--lod-gray-500);
  font-size: var(--font-size-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
  padding: var(--space-1-5) var(--space-2);
  border-radius: var(--radius-md);
}
.app-filter-popover-reset:hover { color: var(--lod-danger); background: var(--lod-gray-50); }
.app-filter-popover-apply {
  padding: 7px var(--space-4-5);
  font-size: 12.5px;
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-md);
}

/* Mobile: Single-Column */
@media (max-width: 599px) {
  .app-filter-popover {
    min-width: 0;
    max-width: none;
    padding: 0;
  }
  .app-filter-popover-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  .app-filter-popover-section[data-filter-popover-section="mitarbeiter"],
  .app-filter-popover-section[data-filter-popover-section="phase"],
  .app-filter-popover-section[data-filter-popover-section="status"] {
    grid-column: 1;
  }
}

.app-filter-popover-sheet-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2-5);
  padding-bottom: max(0px, env(safe-area-inset-bottom));
}