شريط البحث والأوامر المتقدم Search Toolbar

<!-- Qahera UI Kit - Search Toolbar Pattern (Native HTML) -->
<form role="search" class="qhr-search-toolbar" style="display: flex; flex-wrap: wrap; align-items: center; gap: var(--qhr-space-3);">
  <div class="qhr-search-category" style="min-width: 140px;">
    <select name="category" class="qhr-select qhr-select--md" aria-label="تحديد تصنيف البحث">
      <option value="">كافة التصنيفات</option>
      <option value="users">المستخدمين</option>
      <option value="orders">الطلبات</option>
      <option value="products">المنتجات</option>
    </select>
  </div>

  <div class="qhr-search-input-wrapper" style="flex: 1; min-width: 220px; position: relative; display: flex; align-items: center;">
    <span style="position: absolute; inset-inline-start: var(--qhr-space-3); color: var(--qhr-color-neutral-400); pointer-events: none; display: inline-flex;">
      <svg class="qhr-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
      </svg>
    </span>
    <input 
      type="search" 
      name="q" 
      placeholder="ابحث في السجلات..." 
      class="qhr-input qhr-input--md" 
      style="width: 100%; padding-inline-start: var(--qhr-space-9);"
      aria-label="ابحث في السجلات..." />
  </div>

  <div class="qhr-search-actions" style="display: inline-flex; gap: var(--qhr-space-2);">
    <button type="submit" class="qhr-btn qhr-btn--primary qhr-btn--md">
      <span>بحث</span>
    </button>
  </div>

  <div class="qhr-search-active-filters" style="width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: var(--qhr-space-2); margin-top: var(--qhr-space-1);">
    <span style="font-size: var(--qhr-text-xs); color: var(--qhr-color-neutral-500);">الفلاتر النشطة:</span>
    <span class="qhr-badge qhr-badge--neutral qhr-badge--sm">
      <span>الحالة: نشط</span>
    </span>
  </div>
</form>