/* ==========================================================================
   PeopleOS — Package 55: تحسينات العرض على الهواتف والشاشات الصغيرة
   يغطي صفحات أُضيفت بحزم لاحقة وما كانت مُختبَرة على الموبايل تحديدًا:
   الداشبورد، المستندات، بطاقات الهوية، إدارة الصلاحيات، قائمة الموظفين.
   ========================================================================== */

@media (max-width: 640px) {

    /* ── الداشبورد: الهيرو + بطاقات الوصول السريع ── */
    .dash-hero {
        padding: var(--space-4) var(--space-3);
        text-align: center;
        justify-content: center;
    }
    .dash-hero-icon { display: none; } /* عنصر زخرفي بس — بياخد مساحة ثمينة عالموبايل */
    .dash-hero-greeting { font-size: 1.15rem; }
    .quick-grid { grid-template-columns: 1fr; }
    .quick-section-title { flex-wrap: wrap; gap: 6px; }

    /* ── صفحة المستندات: فورم الرفع والبحث ── */
    .docs-upload-grid, .docs-search-grid { grid-template-columns: 1fr; }
    .doc-cat-grid { grid-template-columns: repeat(2, 1fr); }
    .doc-grid { grid-template-columns: 1fr; }

    /* ── صفحة بطاقات الهوية ── */
    .tpl-grid { grid-template-columns: 1fr; }
    .emp-picker { max-height: 240px; }
    .preview-wrap { padding: 12px; overflow-x: auto; }

    /* ── صفحة إدارة الصلاحيات: الجدول عريض بطبيعته — نسمح بتمرير أفقي بدل كسر التصميم ── */
    .perm-table-wrap { max-height: 60vh; }
    .perm-table-wrap tbody td:first-child { min-width: 180px; }
    .perm-desc { max-width: 160px; }

    /* ── قائمة الموظفين ── */
    .emp-table-wrap { max-height: none; } /* على الموبايل الجدول أصلاً بيتحوّل لبطاقات (راجع app.css) */
    .filter-bar { flex-direction: column; align-items: stretch; }
    .filter-bar .form-group { min-width: 0; width: 100%; }

    /* ── أدوات التواصل بملف الموظف ── */
    .contact-actions { justify-content: center; }

    /* ── فورم الأقسام الملوّنة (تعديل/إضافة موظف) ── */
    .form-section { padding-inline-start: var(--space-3); }
}

@media (max-width: 480px) {
    .page-header { flex-direction: column; align-items: stretch; gap: var(--space-2); }
    .page-header > a, .page-header > button { width: 100%; text-align: center; }
    .doc-cat-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
    .doc-cat-card { padding: 8px; }
    .doc-cat-card .label { font-size: .68rem; }
}