لوحة كانبان لإدارة المهام Kanban Board

<!-- Qahera UI Kit — Kanban Board Pattern (Native HTML) -->
<div class="qhr-kanban-board" style="display: flex; gap: var(--qhr-space-4, 16px); overflow-x: auto; padding-block: var(--qhr-space-2, 8px); min-height: 520px;" role="region" aria-label="لوحة إدارة المهام والمشاريع">

  <!-- Column 1: Backlog -->
  <div class="qhr-kanban-column" style="flex: 0 0 300px; background: var(--qhr-surface, #0d121f); border: 1px solid var(--qhr-border, rgba(255,255,255,0.08)); border-radius: var(--qhr-radius-xl, 16px); padding: var(--qhr-space-4, 16px); display: flex; flex-direction: column; gap: 12px;">
    <div style="display: flex; align-items: center; justify-content: space-between;">
      <div style="display: flex; align-items: center; gap: 8px;">
        <span style="width: 8px; height: 8px; border-radius: 50%; background: var(--qhr-color-warning-500, #f59e0b);"></span>
        <h3 style="margin: 0; font-size: 14px; font-weight: 700; color: var(--qhr-text-primary, #f8fafc);">قيد الانتظار</h3>
      </div>
      <span class="qhr-badge qhr-badge--sm">2</span>
    </div>

    <div style="display: flex; flex-direction: column; gap: 10px; flex: 1;">
      <!-- Task Card 1 -->
      <div class="qhr-card" style="padding: 14px; border-radius: 10px; cursor: grab; display: flex; flex-direction: column; gap: 8px;">
        <div style="display: flex; justify-content: space-between; align-items: center;">
          <span class="qhr-chip qhr-chip--sm">هندسة النظام</span>
          <span class="qhr-badge qhr-badge--warning qhr-badge--xs">أولوية متوسطة</span>
        </div>
        <div style="font-weight: 700; font-size: 13px; color: var(--qhr-text-primary, #f8fafc);">مراجعة توثيق عتبة 0kb RSC في مكونات الخادم</div>
        <div style="display: flex; justify-content: space-between; align-items: center; margin-block-start: 6px;">
          <div class="qhr-avatar qhr-avatar--xs" style="width: 24px; height: 24px; border-radius: 50%; background: #d4af37; color: #07090e; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center;">و</div>
          <span style="font-size: 11px; color: var(--qhr-text-muted, #64748b);">مهمة #104</span>
        </div>
      </div>

      <!-- Task Card 2 -->
      <div class="qhr-card" style="padding: 14px; border-radius: 10px; cursor: grab; display: flex; flex-direction: column; gap: 8px;">
        <div style="display: flex; justify-content: space-between; align-items: center;">
          <span class="qhr-chip qhr-chip--sm">إتاحة A11y</span>
          <span class="qhr-badge qhr-badge--sm">عادي</span>
        </div>
        <div style="font-weight: 700; font-size: 13px; color: var(--qhr-text-primary, #f8fafc);">فحص تباين الألوان معايير WCAG 2.1 AA للأزرار الثانوية</div>
        <div style="display: flex; justify-content: space-between; align-items: center; margin-block-start: 6px;">
          <div class="qhr-avatar qhr-avatar--xs" style="width: 24px; height: 24px; border-radius: 50%; background: #0284c7; color: #ffffff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center;">س</div>
          <span style="font-size: 11px; color: var(--qhr-text-muted, #64748b);">مهمة #105</span>
        </div>
      </div>
    </div>

    <button type="button" class="qhr-btn qhr-btn--ghost qhr-btn--sm" style="width: 100%; border: 1px dashed var(--qhr-border, rgba(255,255,255,0.12));">
      <span>+ إضافة مهمة</span>
    </button>
  </div>

  <!-- Column 2: In Progress -->
  <div class="qhr-kanban-column" style="flex: 0 0 300px; background: var(--qhr-surface, #0d121f); border: 1px solid var(--qhr-border, rgba(255,255,255,0.08)); border-radius: var(--qhr-radius-xl, 16px); padding: var(--qhr-space-4, 16px); display: flex; flex-direction: column; gap: 12px;">
    <div style="display: flex; align-items: center; justify-content: space-between;">
      <div style="display: flex; align-items: center; gap: 8px;">
        <span style="width: 8px; height: 8px; border-radius: 50%; background: var(--qhr-color-info-500, #0284c7);"></span>
        <h3 style="margin: 0; font-size: 14px; font-weight: 700; color: var(--qhr-text-primary, #f8fafc);">قيد التنفيذ</h3>
      </div>
      <span class="qhr-badge qhr-badge--primary qhr-badge--sm">1</span>
    </div>

    <div style="display: flex; flex-direction: column; gap: 10px; flex: 1;">
      <!-- Task Card 3 -->
      <div class="qhr-card" style="padding: 14px; border-radius: 10px; cursor: grab; display: flex; flex-direction: column; gap: 8px; border-color: rgba(212,175,55,0.4);">
        <div style="display: flex; justify-content: space-between; align-items: center;">
          <span class="qhr-chip qhr-chip--sm" style="background: rgba(212,175,55,0.15); color: var(--qhr-color-primary-500, #d4af37);">أنماط UX</span>
          <span class="qhr-badge qhr-badge--danger qhr-badge--xs">عاجل</span>
        </div>
        <div style="font-weight: 700; font-size: 13px; color: var(--qhr-text-primary, #f8fafc);">بناء صفحات المعاينة المستقلة للأنماط المعمارية الـ 20</div>
        <div style="display: flex; justify-content: space-between; align-items: center; margin-block-start: 6px;">
          <div class="qhr-avatar qhr-avatar--xs" style="width: 24px; height: 24px; border-radius: 50%; background: #10b981; color: #ffffff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center;">م</div>
          <span style="font-size: 11px; color: var(--qhr-text-muted, #64748b);">مهمة #106</span>
        </div>
      </div>
    </div>

    <button type="button" class="qhr-btn qhr-btn--ghost qhr-btn--sm" style="width: 100%; border: 1px dashed var(--qhr-border, rgba(255,255,255,0.12));">
      <span>+ إضافة مهمة</span>
    </button>
  </div>

  <!-- Column 3: Completed -->
  <div class="qhr-kanban-column" style="flex: 0 0 300px; background: var(--qhr-surface, #0d121f); border: 1px solid var(--qhr-border, rgba(255,255,255,0.08)); border-radius: var(--qhr-radius-xl, 16px); padding: var(--qhr-space-4, 16px); display: flex; flex-direction: column; gap: 12px;">
    <div style="display: flex; align-items: center; justify-content: space-between;">
      <div style="display: flex; align-items: center; gap: 8px;">
        <span style="width: 8px; height: 8px; border-radius: 50%; background: var(--qhr-color-success-500, #10b981);"></span>
        <h3 style="margin: 0; font-size: 14px; font-weight: 700; color: var(--qhr-text-primary, #f8fafc);">مكتمل</h3>
      </div>
      <span class="qhr-badge qhr-badge--success qhr-badge--sm">1</span>
    </div>

    <div style="display: flex; flex-direction: column; gap: 10px; flex: 1;">
      <!-- Task Card 4 -->
      <div class="qhr-card" style="padding: 14px; border-radius: 10px; cursor: grab; display: flex; flex-direction: column; gap: 8px; opacity: 0.85;">
        <div style="display: flex; justify-content: space-between; align-items: center;">
          <span class="qhr-chip qhr-chip--sm">مكونات</span>
          <span class="qhr-badge qhr-badge--success qhr-badge--xs">تم التدقيق</span>
        </div>
        <div style="font-weight: 700; font-size: 13px; color: var(--qhr-text-primary, #f8fafc); text-decoration: line-through;">تطوير نمط الاستبيانات والاختبارات Questionnaire</div>
        <div style="display: flex; justify-content: space-between; align-items: center; margin-block-start: 6px;">
          <div class="qhr-avatar qhr-avatar--xs" style="width: 24px; height: 24px; border-radius: 50%; background: #d4af37; color: #07090e; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center;">و</div>
          <span style="font-size: 11px; color: var(--qhr-text-muted, #64748b);">مهمة #102</span>
        </div>
      </div>
    </div>

    <button type="button" class="qhr-btn qhr-btn--ghost qhr-btn--sm" style="width: 100%; border: 1px dashed var(--qhr-border, rgba(255,255,255,0.12));">
      <span>+ إضافة مهمة</span>
    </button>
  </div>

</div>