شريط أدوات جدول البيانات Data Table Toolbar

<!-- Qahera UI Kit - Data Table Toolbar Pattern (Native HTML) -->
<div class="qhr-data-table-toolbar" style="display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--qhr-space-3); padding-bottom: var(--qhr-space-4);">
  <!-- Search and Filters on Start -->
  <div style="display: flex; flex-wrap: wrap; align-items: center; gap: var(--qhr-space-3); flex: 1;">
    <div style="position: relative; min-width: 240px; 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="16" height="16" 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" 
        class="qhr-input qhr-input--sm" 
        placeholder="بحث في الجدول..." 
        style="width: 100%; padding-inline-start: var(--qhr-space-8);" />
    </div>

    <div style="min-width: 130px;">
      <select class="qhr-select qhr-select--sm" aria-label="تصفية حسب الحالة">
        <option value="">كافة الحالات</option>
        <option value="active">نشط</option>
        <option value="pending">معلق</option>
        <option value="suspended">موقوف</option>
      </select>
    </div>
  </div>

  <!-- Actions on End -->
  <div style="display: flex; align-items: center; gap: var(--qhr-space-2);">
    <button type="button" class="qhr-btn qhr-btn--secondary qhr-btn--sm">
      <svg class="qhr-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4m4-5l5 5 5-5m-5 5V3" />
      </svg>
      <span>تصدير البيانات</span>
    </button>
    <button type="button" class="qhr-btn qhr-btn--primary qhr-btn--sm">
      <svg class="qhr-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        <path d="M12 5v14m-7-7h14" />
      </svg>
      <span>إضافة سجل جديد</span>
    </button>
  </div>
</div>