شريط التصفية والفلترة المتقدم Filter Bar

<!-- Qahera UI Kit - Filter Bar Pattern (Native HTML) -->
<div class="qhr-filter-bar" style="display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--qhr-space-3); padding: var(--qhr-space-3) 0;">
  <div style="display: flex; flex-wrap: wrap; align-items: center; gap: var(--qhr-space-2);">
    <span style="font-size: var(--qhr-text-sm); font-weight: var(--qhr-font-weight-medium); color: var(--qhr-color-text);">تصفية حسب:</span>
    <button type="button" class="qhr-badge qhr-badge--primary qhr-badge--md" style="cursor: pointer; border: none;">الكل (48)</button>
    <button type="button" class="qhr-badge qhr-badge--outline qhr-badge--md" style="cursor: pointer; border: 1px solid var(--qhr-color-border);">المكتملة (32)</button>
    <button type="button" class="qhr-badge qhr-badge--outline qhr-badge--md" style="cursor: pointer; border: 1px solid var(--qhr-color-border);">قيد المعالجة (12)</button>
    <button type="button" class="qhr-badge qhr-badge--outline qhr-badge--md" style="cursor: pointer; border: 1px solid var(--qhr-color-border);">الملغاة (4)</button>
  </div>
  <div>
    <button type="button" class="qhr-btn qhr-btn--ghost qhr-btn--sm">
      <span>إعادة ضبط الفلاتر</span>
    </button>
  </div>
</div>