شبكة إدارة الملفات والمجلدات File Manager Grid

<!-- Qahera UI Kit — File Manager Grid Pattern (Native HTML) -->
<div class="qhr-file-manager" style="display: grid; grid-template-columns: 260px 1fr; gap: var(--qhr-space-5, 20px); 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-5, 20px); min-height: 520px;" role="region" aria-label="مدير الملفات السحابي">

  <!-- Sidebar: Folders Treeview & Storage Meter -->
  <aside style="display: flex; flex-direction: column; justify-content: space-between; border-inline-end: 1px solid var(--qhr-border, rgba(255,255,255,0.08)); padding-inline-end: var(--qhr-space-4, 16px);">
    <div>
      <div style="font-family: var(--qhr-font-heading, sans-serif); font-size: 13px; font-weight: 700; color: var(--qhr-text-muted, #64748b); text-transform: uppercase; margin-block-end: 12px; letter-spacing: 0.05em;">المجلدات</div>
      
      <!-- Folders List -->
      <div style="display: flex; flex-direction: column; gap: 4px;">
        <button type="button" class="ctrl-btn is-active" style="display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 8px 12px; border-radius: 8px; background: rgba(212,175,55,0.12); color: var(--qhr-color-primary-500, #d4af37); border: none; font-size: 13px; font-weight: 600; cursor: pointer;">
          <span style="display: flex; align-items: center; gap: 8px;">
            <svg class="qhr-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>
            <span>كافة الملفات</span>
          </span>
          <span class="qhr-badge qhr-badge--sm" style="font-size: 10px;">128</span>
        </button>

        <button type="button" class="ctrl-btn" style="display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 8px 12px; border-radius: 8px; background: transparent; color: var(--qhr-text-secondary, #94a3b8); border: none; font-size: 13px; font-weight: 600; cursor: pointer;">
          <span style="display: flex; align-items: center; gap: 8px;">
            <svg class="qhr-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>
            <span>أصول التصميم</span>
          </span>
          <span class="qhr-badge qhr-badge--sm" style="font-size: 10px;">42</span>
        </button>

        <button type="button" class="ctrl-btn" style="display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 8px 12px; border-radius: 8px; background: transparent; color: var(--qhr-text-secondary, #94a3b8); border: none; font-size: 13px; font-weight: 600; cursor: pointer;">
          <span style="display: flex; align-items: center; gap: 8px;">
            <svg class="qhr-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>
            <span>وثائق العقود</span>
          </span>
          <span class="qhr-badge qhr-badge--sm" style="font-size: 10px;">19</span>
        </button>
      </div>
    </div>

    <!-- Storage Meter Widget -->
    <div style="background: var(--qhr-surface-elevated, #131b2e); border: 1px solid var(--qhr-border, rgba(255,255,255,0.08)); border-radius: 12px; padding: 14px;">
      <div style="display: flex; justify-content: space-between; align-items: center; margin-block-end: 8px; font-size: 12px;">
        <span style="font-weight: 600; color: var(--qhr-text-primary, #f8fafc);">سعة التخزين</span>
        <span style="color: var(--qhr-color-primary-500, #d4af37); font-weight: 700;">68%</span>
      </div>
      <div class="qhr-progress qhr-progress--luxury qhr-progress--xs" role="progressbar" aria-valuenow="68" aria-valuemin="0" aria-valuemax="100">
        <div class="qhr-progress-bar" style="width: 68%;"></div>
      </div>
      <div style="font-size: 11px; color: var(--qhr-text-muted, #64748b); margin-block-start: 6px;">34.2 جيجابايت من أصل 50 جيجابايت</div>
    </div>
  </aside>

  <!-- Main Area: Toolbar & Files Grid -->
  <div style="display: flex; flex-direction: column; gap: var(--qhr-space-4, 16px);">

    <!-- Toolbar -->
    <div style="display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;">
      <div style="display: flex; align-items: center; gap: 8px; flex: 1; min-width: 200px;">
        <input type="text" class="qhr-input" placeholder="بحث بالاسم أو النوع..." style="width: 100%; font-size: 13px;" />
      </div>
      <div style="display: flex; align-items: center; gap: 8px;">
        <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"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon></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"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg>
          <span>رفع ملفات</span>
        </button>
      </div>
    </div>

    <!-- Files Grid -->
    <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px;">
      
      <!-- File Card 1 -->
      <div class="qhr-card" style="padding: 14px; display: flex; flex-direction: column; gap: 10px; cursor: pointer; border-radius: 12px; transition: all 150ms ease;">
        <div style="display: flex; align-items: center; justify-content: space-between;">
          <span style="color: var(--qhr-color-primary-500, #d4af37);">
            <svg class="qhr-icon" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
          </span>
          <span class="qhr-badge qhr-badge--sm">PDF</span>
        </div>
        <div>
          <div style="font-weight: 700; font-size: 13px; color: var(--qhr-text-primary, #f8fafc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">ميثاق_قاهرة_المعماري.pdf</div>
          <div style="font-size: 11px; color: var(--qhr-text-muted, #64748b);">4.2 ميجابايت · منذ ساعتين</div>
        </div>
      </div>

      <!-- File Card 2 -->
      <div class="qhr-card" style="padding: 14px; display: flex; flex-direction: column; gap: 10px; cursor: pointer; border-radius: 12px; transition: all 150ms ease;">
        <div style="display: flex; align-items: center; justify-content: space-between;">
          <span style="color: var(--qhr-color-success-500, #10b981);">
            <svg class="qhr-icon" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
          </span>
          <span class="qhr-badge qhr-badge--sm">PNG</span>
        </div>
        <div>
          <div style="font-weight: 700; font-size: 13px; color: var(--qhr-text-primary, #f8fafc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">شعار_الوكالة_الذهبي.png</div>
          <div style="font-size: 11px; color: var(--qhr-text-muted, #64748b);">1.8 ميجابايت · أمس</div>
        </div>
      </div>

      <!-- File Card 3 -->
      <div class="qhr-card" style="padding: 14px; display: flex; flex-direction: column; gap: 10px; cursor: pointer; border-radius: 12px; transition: all 150ms ease;">
        <div style="display: flex; align-items: center; justify-content: space-between;">
          <span style="color: var(--qhr-color-info-500, #0284c7);">
            <svg class="qhr-icon" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="12" y1="18" x2="12" y2="12"></line><line x1="9" y1="15" x2="15" y2="15"></line></svg>
          </span>
          <span class="qhr-badge qhr-badge--sm">YAML</span>
        </div>
        <div>
          <div style="font-weight: 700; font-size: 13px; color: var(--qhr-text-primary, #f8fafc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">عقد_المكونات_v1.yaml</div>
          <div style="font-size: 11px; color: var(--qhr-text-muted, #64748b);">64 كيلوبايت · 3 سبتمبر</div>
        </div>
      </div>

    </div>

  </div>

</div>