/* ============================================================
 * ISOPI · Pattern-Lib CSS
 *
 * Phase 2.8 / ADR 007: Wiederverwendbare UI-Patterns. Wird NACH
 * isopi-bootstrap-theme.css geladen, damit Pattern-Klassen Theme-
 * Defaults überschreiben können (z.B. .isopi-fab--topbar Variante).
 *
 * Aktuell:
 *   - .isopi-fab + .fab-group  (FAB-Pattern, geteilt mit theme.css
 *     Default-Variante; --topbar-Variante nur hier)
 *   - .isopi-chip-toggle       (Multi-Select-Toggle-Chips)
 *   - .isopi-section-head      (Section-Header / Eyebrow)
 * ============================================================ */

/* ---------- FAB ---------- */

/* Default-Variante (floating bottom-right) ist bereits in
   isopi-bootstrap-theme.css definiert für Backward-Compat. Hier nur
   Topbar-Variante: kompakt inline. */

.isopi-fab--topbar {
  position: static;
  width: 38px;
  height: 38px;
  font-size: 1.1rem;
}

.fab-group {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* ---------- Chip-Toggle ---------- */

.isopi-chip-toggle {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.isopi-chip-toggle__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.7rem;
  font-family: var(--font-brandon);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid currentColor;
  color: var(--chip-color, var(--isopi-ink));
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}

.isopi-chip-toggle__chip[aria-pressed="true"] {
  background: var(--chip-color, var(--isopi-ink));
  color: var(--chip-text, var(--isopi-sand-light));
}

.isopi-chip-toggle__chip:focus-visible {
  outline: 2px solid var(--isopi-ink);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .isopi-chip-toggle {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .isopi-chip-toggle::-webkit-scrollbar { display: none; }
  .isopi-chip-toggle__chip { flex-shrink: 0; }
}

/* ---------- Section-Head ---------- */

.isopi-section-head {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  border-bottom: 1px solid var(--isopi-border);
  padding-bottom: 0.5rem;
  margin-bottom: 0.9rem;
}

.isopi-section-head__label {
  font-family: var(--font-brandon);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--isopi-muted);
  margin: 0;
}

.isopi-section-head__count {
  font-size: 0.6rem;
  font-weight: 500;
  color: var(--isopi-muted);
}

.isopi-section-head__action {
  margin-left: auto;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--isopi-ink-soft);
  text-decoration: none;
}

.isopi-section-head__action:hover {
  color: var(--isopi-ink);
}