/* ═══════════════════════════════════════════════════════════════════════════ */
/* FILTER PANEL                                                               */
/* ═══════════════════════════════════════════════════════════════════════════ */

.filter-panel-overlay {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(0,0,0,0.4); display: none;
}
.filter-panel-overlay.open { display: block; }

.filter-panel {
  position: fixed; top: 0; left: -320px; bottom: 0;
  width: 300px; z-index: 450;
  background: var(--sidebar-bg); border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  transition: left 0.3s ease;
}
.filter-panel.open { left: 0; }

.fp-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 20px 16px;
}
.fp-header h3 { font-size: 1.1rem; font-weight: 700; color: var(--text); }

.fp-body { flex: 1; overflow-y: auto; padding: 0 20px; }

.fp-field { margin-bottom: 20px; }
.fp-field label {
  display: block; font-size: 0.65rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--primary); margin-bottom: 6px;
}
.fp-field select {
  width: 100%; padding: 10px 12px;
  background: var(--card-bg); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
  outline: none; font-size: 0.875rem;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238a9ab5' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
  transition: var(--transition);
}
.fp-field select:focus { border-color: var(--primary); }
.fp-field select option { background: var(--card-bg); color: var(--text); }

.fp-footer { padding: 16px 20px; }
.btn-filter-apply {
  width: 100%;
  transition: var(--transition);
}