/* ════════════════════════════════════════════════════════════════
 * formstube · Controlling · fs-list-filter.css
 * Phase 8.12 Welle A · 2026-05-25 · Marc-Direktive
 * ════════════════════════════════════════════════════════════════
 * Wiederverwendbares Filter-Pattern für Listen-Pages.
 *   - Status-Pills mit Counter (Hex-Marker pro Status)
 *   - Such-Box + Date-Quick-Picks + Sort-Dropdown
 *   - Stats-Strip (Count + Sum + Avg)
 *   - Pagination-Footer
 *   - Brand-konform mit Hex-Markern + Lime + Mona-Sans + Geist-Mono
 * ════════════════════════════════════════════════════════════════ */

/* ─── Toolbar-Container ───────────────────────────────────────── */
.lf-toolbar {
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--graphite, #2A2C30);
  padding: 16px 18px;
  margin-bottom: 18px;
  display: flex; flex-direction: column; gap: 14px;
}

/* ─── Status-Pills ────────────────────────────────────────────── */
.lf-pills { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lf-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px 7px 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--graphite, #2A2C30);
  border-left: 3px solid var(--stone, #888);
  color: var(--paper, #F0F0F0);
  font-family: 'Geist Mono', monospace;
  font-size: 11px; letter-spacing: 0.06em;
  text-decoration: none;
  transition: all 0.15s;
  white-space: nowrap;
}
.lf-pill:hover { background: rgba(255,255,255,0.06); color: var(--accent, #D8FF3C); }
.lf-pill.is-active {
  background: var(--accent, #D8FF3C);
  color: var(--ink, #0A0A0C);
  border-color: var(--accent, #D8FF3C);
  font-weight: 600;
}
.lf-pill-count {
  background: rgba(255,255,255,0.08);
  padding: 1px 7px;
  font-weight: 700;
  font-size: 10px;
  border-radius: 0;
}
.lf-pill.is-active .lf-pill-count {
  background: rgba(10,10,12,0.18);
  color: var(--ink, #0A0A0C);
}

/* Status-spezifische Marker-Farben */
.lf-pill[data-status="draft"]     { border-left-color: var(--stone, #888); }
.lf-pill[data-status="sent"]      { border-left-color: #FFB13C; }
.lf-pill[data-status="accepted"]  { border-left-color: #D8FF3C; }
.lf-pill[data-status="paid"]      { border-left-color: #D8FF3C; }
.lf-pill[data-status="open"]      { border-left-color: #3CCBFF; }
.lf-pill[data-status="overdue"]   { border-left-color: #FF6B6B; }
.lf-pill[data-status="declined"]  { border-left-color: #FF6B6B; }
.lf-pill[data-status="cancelled"] { border-left-color: var(--stone, #888); }
.lf-pill[data-status="expired"]   { border-left-color: var(--stone, #888); }
.lf-pill[data-status="all"]       { border-left-color: var(--accent, #D8FF3C); }

/* ─── Filter-Row · Such + Date + Sort ─────────────────────────── */
.lf-row {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
}
.lf-search {
  flex: 1; min-width: 200px;
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--graphite, #2A2C30);
  padding: 9px 13px;
  transition: border-color 0.15s, background 0.15s;
}
.lf-search:focus-within {
  border-color: var(--accent, #D8FF3C);
  background: rgba(216,255,60,0.04);
}
.lf-search svg { color: var(--stone, #888); flex-shrink: 0; }
.lf-search input {
  flex: 1; background: none; border: 0;
  color: var(--paper, #F0F0F0); font: inherit;
  font-size: 13px; outline: none; padding: 0;
}
.lf-search input::placeholder { color: var(--fg-mute, #6E6E72); }
.lf-search-clear {
  color: var(--fg-mute, #6E6E72);
  font-size: 18px; padding: 0 4px;
  background: none; border: 0; cursor: pointer;
  text-decoration: none;
}
.lf-search-clear:hover { color: #FF6B7A; }

.lf-select {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--graphite, #2A2C30);
  color: var(--paper, #F0F0F0);
  font: inherit; font-size: 12px;
  padding: 9px 12px;
  cursor: pointer;
  transition: border-color 0.15s;
  font-family: 'Geist Mono', monospace;
  letter-spacing: 0.04em;
}
.lf-select:hover, .lf-select:focus {
  border-color: var(--accent, #D8FF3C);
  outline: none;
}

/* ─── Stats-Strip · Count + Sum + Avg ─────────────────────────── */
.lf-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--graphite, #2A2C30);
}
.lf-stat {
  padding: 8px 10px;
  border-left: 2px solid var(--accent, #D8FF3C);
  background: rgba(216,255,60,0.03);
}
.lf-stat-label {
  font-family: 'Geist Mono', monospace;
  font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg-mute, #6E6E72);
}
.lf-stat-value {
  font-family: 'Mona Sans', sans-serif;
  font-weight: 900; font-stretch: 125%;
  font-size: 17px; color: var(--paper, #F0F0F0);
  line-height: 1.1; margin-top: 2px;
}
.lf-stat-value.is-warn { color: #FFB13C; }
.lf-stat-value.is-danger { color: #FF6B6B; }
.lf-stat-value.is-ok { color: var(--accent, #D8FF3C); }

/* ─── Active-Filter-Chips (Reset-Quick-Access) ────────────────── */
.lf-active {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding-top: 6px;
}
.lf-active-label {
  font-family: 'Geist Mono', monospace; font-size: 10px;
  color: var(--fg-mute, #6E6E72); letter-spacing: 0.06em;
  padding: 4px 0;
}
.lf-active-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px;
  background: rgba(216,255,60,0.08);
  border: 1px solid rgba(216,255,60,0.2);
  color: var(--accent, #D8FF3C);
  font-family: 'Geist Mono', monospace;
  font-size: 10px; letter-spacing: 0.04em;
  text-decoration: none;
  transition: all 0.15s;
}
.lf-active-chip:hover { background: rgba(216,255,60,0.15); }
.lf-active-chip::after { content: '✕'; font-size: 11px; opacity: 0.6; }
.lf-active-reset {
  margin-left: auto;
  color: var(--fg-mute, #6E6E72);
  font-family: 'Geist Mono', monospace;
  font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 4px 8px;
}
.lf-active-reset:hover { color: #FF6B7A; }

/* ─── Empty-State ──────────────────────────────────────────────── */
.lf-empty {
  padding: 60px 24px; text-align: center;
  background: rgba(255,255,255,0.02);
  border: 1px dashed var(--graphite, #2A2C30);
  margin-bottom: 20px;
}
.lf-empty-title {
  font-family: 'Mona Sans', sans-serif; font-weight: 900; font-stretch: 125%;
  font-size: 18px; color: var(--paper, #F0F0F0); margin: 0 0 8px;
}
.lf-empty-sub {
  color: var(--fg-mute, #6E6E72); font-size: 13px;
}

/* ─── Pagination-Footer ──────────────────────────────────────── */
.lf-pagi {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 18px; padding-top: 14px;
  border-top: 1px solid var(--graphite, #2A2C30);
  font-family: 'Geist Mono', monospace;
  font-size: 11px; color: var(--fg-mute, #6E6E72);
  letter-spacing: 0.06em;
}
.lf-pagi-info { letter-spacing: 0.08em; }
.lf-pagi-nav { display: flex; gap: 4px; }
.lf-pagi-btn {
  padding: 6px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--graphite, #2A2C30);
  color: var(--paper, #F0F0F0);
  text-decoration: none;
  font-family: 'Geist Mono', monospace;
  font-size: 11px; letter-spacing: 0.06em;
  transition: all 0.15s;
}
.lf-pagi-btn:hover {
  background: rgba(216,255,60,0.05);
  border-color: var(--accent, #D8FF3C);
  color: var(--accent, #D8FF3C);
}
.lf-pagi-btn.is-disabled {
  opacity: 0.3; pointer-events: none;
}
.lf-pagi-btn.is-current {
  background: var(--accent, #D8FF3C);
  color: var(--ink, #0A0A0C);
  border-color: var(--accent, #D8FF3C);
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE-RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
  .lf-toolbar { padding: 12px 14px; gap: 10px; margin-bottom: 14px; }
  .lf-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: -4px -14px;
    padding: 4px 14px;
    scrollbar-width: none;
  }
  .lf-pills::-webkit-scrollbar { display: none; }
  .lf-pill { flex-shrink: 0; }
  .lf-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .lf-search { width: 100%; }
  .lf-select { width: 100%; }
  .lf-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .lf-stat-value { font-size: 15px; }
  .lf-pagi { flex-direction: column; gap: 10px; align-items: center; }
}