القائمة القابلة للترتيب والسحب Sortable List

<!-- Qahera UI Kit — Sortable List Pattern (Native HTML) -->
<div class="qhr-sortable-list" style="display: flex; flex-direction: column; gap: var(--qhr-space-3, 12px); max-width: 640px; margin: 0 auto;" role="list" aria-label="قائمة تفاعلية قابلة لإعادة الترتيب">

  <!-- Sortable Item 1 -->
  <div class="qhr-card is-draggable" style="display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-radius: 12px; cursor: grab;" role="listitem">
    <div style="display: flex; align-items: center; gap: 14px;">
      <span class="drag-handle" style="color: var(--qhr-text-muted, #64748b); cursor: grab;" aria-label="مقبض السحب">
        <svg class="qhr-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <circle cx="9" cy="5" r="1"></circle><circle cx="9" cy="12" r="1"></circle><circle cx="9" cy="19" r="1"></circle>
          <circle cx="15" cy="5" r="1"></circle><circle cx="15" cy="12" r="1"></circle><circle cx="15" cy="19" r="1"></circle>
        </svg>
      </span>
      <span class="qhr-badge qhr-badge--primary qhr-badge--sm" style="font-weight: 700;">1</span>
      <div>
        <div style="font-weight: 700; font-size: 14px; color: var(--qhr-text-primary, #f8fafc);">تهيئة ميثاق التوكنات وتعيين لوحة الألوان الأساسية</div>
        <div style="font-size: 12px; color: var(--qhr-text-muted, #64748b);">الأولوية العليا · قسم التأسيس</div>
      </div>
    </div>
    <div style="display: flex; align-items: center; gap: 6px;">
      <button type="button" class="qhr-btn qhr-btn--ghost qhr-btn--xs" aria-label="تحريك لأعلى">
        <svg class="qhr-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="18 15 12 9 6 15"></polyline></svg>
      </button>
      <button type="button" class="qhr-btn qhr-btn--ghost qhr-btn--xs" aria-label="تحريك لأسفل">
        <svg class="qhr-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg>
      </button>
    </div>
  </div>

  <!-- Sortable Item 2 -->
  <div class="qhr-card is-draggable" style="display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-radius: 12px; cursor: grab;" role="listitem">
    <div style="display: flex; align-items: center; gap: 14px;">
      <span class="drag-handle" style="color: var(--qhr-text-muted, #64748b); cursor: grab;" aria-label="مقبض السحب">
        <svg class="qhr-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <circle cx="9" cy="5" r="1"></circle><circle cx="9" cy="12" r="1"></circle><circle cx="9" cy="19" r="1"></circle>
          <circle cx="15" cy="5" r="1"></circle><circle cx="15" cy="12" r="1"></circle><circle cx="15" cy="19" r="1"></circle>
        </svg>
      </span>
      <span class="qhr-badge qhr-badge--primary qhr-badge--sm" style="font-weight: 700;">2</span>
      <div>
        <div style="font-weight: 700; font-size: 14px; color: var(--qhr-text-primary, #f8fafc);">مراجعة التماثل الاتجاهي 100% Logical CSS للأزرار</div>
        <div style="font-size: 12px; color: var(--qhr-text-muted, #64748b);">الأولوية الفائقة · قسم الواجهة</div>
      </div>
    </div>
    <div style="display: flex; align-items: center; gap: 6px;">
      <button type="button" class="qhr-btn qhr-btn--ghost qhr-btn--xs" aria-label="تحريك لأعلى">
        <svg class="qhr-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="18 15 12 9 6 15"></polyline></svg>
      </button>
      <button type="button" class="qhr-btn qhr-btn--ghost qhr-btn--xs" aria-label="تحريك لأسفل">
        <svg class="qhr-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg>
      </button>
    </div>
  </div>

  <!-- Sortable Item 3 -->
  <div class="qhr-card is-draggable" style="display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-radius: 12px; cursor: grab;" role="listitem">
    <div style="display: flex; align-items: center; gap: 14px;">
      <span class="drag-handle" style="color: var(--qhr-text-muted, #64748b); cursor: grab;" aria-label="مقبض السحب">
        <svg class="qhr-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <circle cx="9" cy="5" r="1"></circle><circle cx="9" cy="12" r="1"></circle><circle cx="9" cy="19" r="1"></circle>
          <circle cx="15" cy="5" r="1"></circle><circle cx="15" cy="12" r="1"></circle><circle cx="15" cy="19" r="1"></circle>
        </svg>
      </span>
      <span class="qhr-badge qhr-badge--primary qhr-badge--sm" style="font-weight: 700;">3</span>
      <div>
        <div style="font-weight: 700; font-size: 14px; color: var(--qhr-text-primary, #f8fafc);">اختبار قراءة الشاشة والتنقل بلوحة المفاتيح عبر أزرار Tab</div>
        <div style="font-size: 12px; color: var(--qhr-text-muted, #64748b);">الأولوية القياسية · الوصولية A11y</div>
      </div>
    </div>
    <div style="display: flex; align-items: center; gap: 6px;">
      <button type="button" class="qhr-btn qhr-btn--ghost qhr-btn--xs" aria-label="تحريك لأعلى">
        <svg class="qhr-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="18 15 12 9 6 15"></polyline></svg>
      </button>
      <button type="button" class="qhr-btn qhr-btn--ghost qhr-btn--xs" aria-label="تحريك لأسفل">
        <svg class="qhr-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg>
      </button>
    </div>
  </div>

</div>