/* ========================================
   ملف CSS للتصميم المتجاوب (Responsive Design)
   يدعم جميع الأجهزة: الهاتف، التابلت، والكمبيوتر
   ======================================== */

/* ========================================
   1. تصميم البطاقات المصغرة (Mobile Cards)
   ======================================== */

/* حاوية البطاقات */
.mobile-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* تنسيق البطاقة الواحدة */
.mobile-card {
    border-radius: 8px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mobile-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

/* اسم الموظف */
.employee-name {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    margin-bottom: 8px;
}

/* حاوية معلومات الموظف */
.employee-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* صف المعلومات */
.info-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

/* أيقونة المعلومات */
.info-icon {
    color: var(--mud-palette-primary);
    flex-shrink: 0;
}

/* تسمية المعلومات */
.info-label {
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    min-width: 90px;
}

/* قيمة المعلومات */
.info-value {
    font-weight: 400;
    color: var(--mud-palette-text-primary);
}

/* ========================================
   2. تحسين MudDataGrid للشاشات الصغيرة
   ======================================== */

/* تحسين الجدول على جميع الأحجام */
.responsive-datagrid {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* تحسين الخلايا على الشاشات الصغيرة */
.responsive-datagrid .mud-table-cell {
    padding: 8px 4px !important;
    font-size: 0.875rem;
}

/* تحسين رؤوس الأعمدة */
.responsive-datagrid .mud-table-head .mud-table-cell {
    font-weight: bold;
    background-color: var(--mud-palette-background-grey);
}

/* ========================================
   2. نقاط التوقف (Breakpoints)
   ======================================== */

/* الهواتف الصغيرة (≤ 599px) */
@media (max-width: 599px) {

    /* تقليل المسافات */
    .mud-container {
        padding: 8px !important;
    }

    /* تحسين حجم الخط */
    .responsive-datagrid .mud-table-cell {
        padding: 6px 2px !important;
        font-size: 0.75rem;
    }

    /* تحسين الأزرار - تم نقله إلى القسم 43-44 */
    /* تم إزالة التنسيقات القديمة لتجنب التعارض */

    /* تحسين الـ Chips */
    .mud-chip {
        height: 24px !important;
        font-size: 0.75rem !important;
    }

    /* تحسين الـ Toolbar */
    .mud-toolbar {
        min-height: 48px !important;
        padding: 4px 8px !important;
    }

    /* تحسين الـ Card */
    .mud-card {
        margin-bottom: 8px !important;
    }

    /* تحسين الـ Pager */
    .mud-table-pagination {
        font-size: 0.75rem;
    }

    .mud-table-pagination-actions button {
        min-width: 40px !important;
        min-height: 40px !important;
    }

    /* تحسين البطاقات المصغرة */
    .mobile-card {
        margin-bottom: 8px;
    }

    .employee-name {
        font-size: 1rem;
    }

    .info-row {
        font-size: 0.8rem;
    }

    .info-label {
        min-width: 80px;
    }
}

/* التابلت (600px - 1023px) */
@media (min-width: 600px) and (max-width: 1023px) {

    /* تحسين المسافات */
    .mud-container {
        padding: 12px !important;
    }

    /* تحسين حجم الخط */
    .responsive-datagrid .mud-table-cell {
        padding: 8px 6px !important;
        font-size: 0.875rem;
    }

    /* تحسين الـ Toolbar */
    .mud-toolbar {
        min-height: 56px !important;
    }
}

/* الكمبيوتر (≥ 1024px) */
@media (min-width: 1024px) {

    /* المسافات الطبيعية */
    .responsive-datagrid .mud-table-cell {
        padding: 12px 16px !important;
    }
}

/* ========================================
   3. تحسين الأزرار للمس (Touch-Friendly)
   ======================================== */

/* تم نقل جميع تنسيقات الأزرار إلى القسم 43-52 */
/* لتوحيد النظام وتجنب التعارضات */

/* ========================================
   4. تحسين الـ Dialog للشاشات الصغيرة
   ======================================== */

@media (max-width: 599px) {

    /* جعل الـ Dialog يأخذ كامل الشاشة على الهواتف */
    .mud-dialog {
        max-width: 100% !important;
        margin: 8px !important;
    }

    .mud-dialog-content {
        padding: 12px !important;
    }

    /* تحسين الحقول في الـ Dialog */
    .mud-input {
        font-size: 16px !important;
        /* منع التكبير التلقائي في iOS */
    }

    .mud-select {
        font-size: 16px !important;
    }
}

/* ========================================
   5. تحسين RTL (اللغة العربية)
   ======================================== */

/* التأكد من دعم RTL بشكل كامل */
[dir="rtl"] .responsive-datagrid {
    direction: rtl;
}

[dir="rtl"] .mud-table {
    direction: rtl;
}

/* تحسين المسافات في RTL */
[dir="rtl"] .mud-icon-button+.mud-icon-button {
    margin-right: 0;
    margin-left: 4px;
}

/* فرض اتجاه اليمين لليسال في نافذة الموظفين */
.responsive-employee-dialog {
    direction: rtl;
    text-align: right;
}

/* ضمان محاذاة النصوص داخل لوحات التوسيع */
.responsive-employee-dialog .mud-expansion-panel-text {
    text-align: right;
}

/* تصحيح موقع تسميات الحقول (Labels) */
.responsive-employee-dialog .mud-input-label {
    transform-origin: top right !important;
    right: 0 !important;
    left: auto !important;
}

/* ========================================
   6. تحسين التمرير الأفقي
   ======================================== */

/* إضافة شريط تمرير مخصص */
.responsive-datagrid::-webkit-scrollbar {
    height: 8px;
}

.responsive-datagrid::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.responsive-datagrid::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.responsive-datagrid::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* ========================================
   7. تحسين الـ Loading و Empty States
   ======================================== */

/* تحسين رسالة "لا توجد بيانات" */
.mud-table-empty {
    padding: 32px 16px !important;
}

@media (max-width: 599px) {
    .mud-table-empty {
        padding: 24px 12px !important;
    }
}

/* ========================================
   8. تحسين الـ Chips
   ======================================== */

/* تحسين الـ Chips على الشاشات الصغيرة */
@media (max-width: 599px) {
    .mud-chip .mud-chip-icon {
        font-size: 16px !important;
    }

    .mud-chip .mud-chip-content {
        padding: 0 8px !important;
    }
}

/* ========================================
   9. تحسين الـ Toolbar
   ======================================== */

/* تحسين المسافات في الـ Toolbar */
.mud-toolbar .mud-button-root {
    margin: 0 4px;
}

@media (max-width: 599px) {
    .mud-toolbar .mud-button-root {
        margin: 0 2px;
        padding: 6px 8px !important;
    }
}

/* ========================================
   10. تحسين الـ Grid
   ======================================== */

/* تحسين المسافات في الـ Grid */
@media (max-width: 599px) {
    .mud-grid-item {
        padding: 4px !important;
    }
}

/* ========================================
   11. تحسين الـ Card
   ======================================== */

/* تحسين الـ Card على الشاشات الصغيرة */
@media (max-width: 599px) {
    .mud-card-content {
        padding: 12px !important;
    }

    .mud-card-actions {
        padding: 8px !important;
    }
}

/* ========================================
   12. تحسين الـ TextField و Select
   ======================================== */

/* منع التكبير التلقائي في iOS */
@media (max-width: 599px) {

    .mud-input-root input,
    .mud-select-input {
        font-size: 16px !important;
    }
}

/* ========================================
   13. تحسين الـ Pagination
   ======================================== */

/* تحسين الـ Pagination على الشاشات الصغيرة */
@media (max-width: 599px) {
    .mud-table-pagination-caption {
        font-size: 0.75rem;
    }

    .mud-table-pagination-select {
        font-size: 0.75rem;
    }
}

/* ========================================
   14. تحسين Focus للتنقل بالكيبورد
   ======================================== */

/* تحسين Focus للعناصر التفاعلية */
/* تم نقل تنسيقات Focus للأزرار إلى القسم 43 */
.mud-input:focus,
.mud-select:focus {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* ========================================
   15. تحسين الألوان والتباين
   ======================================== */

/* تحسين التباين للقراءة */
.mud-table-cell {
    color: var(--mud-palette-text-primary);
}

.mud-table-head .mud-table-cell {
    color: var(--mud-palette-text-primary);
    font-weight: 600;
}

/* ========================================
   16. تحسين الـ Tooltip
   ======================================== */

/* تحسين الـ Tooltip على الشاشات الصغيرة */
@media (max-width: 599px) {
    .mud-tooltip {
        font-size: 0.75rem;
        padding: 4px 8px;
    }
}

/* ========================================
   17. تحسين نموذج تعديل الموظف (Employee Edit Dialog)
   ======================================== */

/* تحسين Dialog للموظفين */
.responsive-employee-dialog {
    max-width: 900px;
}

/* تحسين النموذج داخل الـ Dialog */
.responsive-form-grid {
    width: 100%;
}

/* تحسين الحقول */
.responsive-field {
    width: 100%;
}

/* تحسين عناوين الأقسام */
.section-title {
    font-weight: 600;
    color: var(--mud-palette-primary);
    display: flex;
    align-items: center;
}

/* تحسين الـ Alert */
.responsive-alert {
    border-radius: 8px;
}

/* تحسين الـ Switch */
.responsive-switch {
    padding: 8px 0;
}

/* تحسين أزرار الـ Dialog */
.responsive-dialog-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    width: 100%;
}

.responsive-button {
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.responsive-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* ========================================
   18. نقاط التوقف لنموذج تعديل الموظف
   ======================================== */

/* الهواتف الصغيرة (≤ 599px) */
@media (max-width: 599px) {

    /* جعل الـ Dialog يأخذ كامل الشاشة */
    .responsive-employee-dialog .mud-dialog-surface {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
    }

    /* تحسين المحتوى */
    .responsive-employee-dialog .mud-dialog-content {
        padding: 12px !important;
        max-height: calc(100vh - 140px) !important;
        overflow-y: auto !important;
    }

    /* تحسين العنوان */
    .responsive-employee-dialog .mud-dialog-title {
        padding: 12px !important;
        font-size: 1.1rem !important;
    }

    /* تحسين الأزرار */
    .responsive-dialog-actions {
        padding: 12px !important;
        gap: 8px;
        flex-wrap: wrap;
    }

    .responsive-button {
        flex: 1;
        min-width: calc(50% - 4px) !important;
        font-size: 0.875rem !important;
    }

    /* تحسين الحقول */
    .responsive-field .mud-input-root input,
    .responsive-field .mud-select-input {
        font-size: 16px !important;
        /* منع التكبير التلقائي في iOS */
    }

    /* تحسين عناوين الأقسام */
    .section-title {
        font-size: 0.95rem !important;
    }

    /* تحسين المسافات في الـ Grid */
    .responsive-form-grid .mud-grid-item {
        padding: 6px !important;
    }

    /* تحسين الـ Helper Text */
    .responsive-field .mud-input-helper-text {
        font-size: 0.7rem !important;
    }

    /* تحسين الـ Divider */
    .responsive-form-grid .mud-divider {
        margin: 8px 0 !important;
    }
}

/* التابلت (600px - 1023px) */
@media (min-width: 600px) and (max-width: 1023px) {

    /* تحسين حجم الـ Dialog */
    .responsive-employee-dialog .mud-dialog-surface {
        max-width: 90% !important;
        margin: 16px !important;
    }

    /* تحسين المحتوى */
    .responsive-employee-dialog .mud-dialog-content {
        padding: 16px !important;
    }

    /* تحسين الأزرار */
    .responsive-dialog-actions {
        padding: 16px !important;
    }

    /* تحسين المسافات في الـ Grid */
    .responsive-form-grid .mud-grid-item {
        padding: 8px !important;
    }
}

/* الكمبيوتر (≥ 1024px) */
@media (min-width: 1024px) {

    /* تحسين حجم الـ Dialog */
    .responsive-employee-dialog .mud-dialog-surface {
        max-width: 900px !important;
    }

    /* المسافات الطبيعية */
    .responsive-employee-dialog .mud-dialog-content {
        padding: 24px !important;
    }

    .responsive-dialog-actions {
        padding: 16px 24px !important;
    }

    /* تحسين المسافات في الـ Grid */
    .responsive-form-grid .mud-grid-item {
        padding: 12px !important;
    }
}

/* ========================================
   19. تحسين التنقل بالكيبورد في النموذج
   ======================================== */

/* تحسين Focus للحقول */
.responsive-field .mud-input-root:focus-within,
.responsive-field .mud-select:focus-within {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* تحسين Focus للأزرار */
.responsive-button:focus {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* ========================================
   20. تحسين الألوان والتباين في النموذج
   ======================================== */

/* تحسين التباين للقراءة */
.section-title {
    color: var(--mud-palette-primary);
}

.responsive-alert {
    background-color: var(--mud-palette-info-lighten);
}

/* تحسين الـ Divider */
.responsive-form-grid .mud-divider {
    border-color: var(--mud-palette-divider);
    opacity: 0.6;
}

/* ========================================
   21. تحسين الأيقونات في النموذج
   ======================================== */

/* تحسين حجم الأيقونات */
.responsive-field .mud-input-adornment .mud-icon-root {
    font-size: 1.25rem;
    color: var(--mud-palette-text-secondary);
}

.section-title .mud-icon-root {
    font-size: 1.1rem;
}

/* ========================================
   22. تحسين الرسوم المتحركة (Animations)
   ======================================== */

/* تحسين الانتقالات */
.responsive-field,
.responsive-button,
.section-title {
    transition: all 0.2s ease-in-out;
}

/* تحسين الـ Hover للحقول */
.responsive-field:hover {
    transform: translateY(-1px);
}

/* ========================================
   23. تحسين الـ Loading State
   ======================================== */

/* تحسين حالة التحميل في الأزرار */
.responsive-button .mud-progress-circular {
    margin-left: 8px;
}

/* ========================================
   24. تحسين الـ Error Messages
   ======================================== */

/* تحسين رسائل الخطأ */
.responsive-field .mud-input-error {
    font-size: 0.75rem;
    color: var(--mud-palette-error);
    margin-top: 4px;
}

@media (max-width: 599px) {
    .responsive-field .mud-input-error {
        font-size: 0.7rem;
    }
}

/* ========================================
   25. تصميم صفحات الحضور والغياب (Attendance Pages)
   ======================================== */

/* نافذة الحضور المتجاوبة */
.responsive-attendance-dialog {
    border-radius: 12px;
}

/* تحسين محاذاة MudDatePicker - توسيط جميع العناصر */
.responsive-datepicker .mud-input-control {
    text-align: center;
}

.responsive-datepicker .mud-input-slot {
    justify-content: center;
}

.responsive-datepicker input {
    text-align: center !important;
}

.responsive-datepicker .mud-input-adornment {
    margin-left: auto;
    margin-right: auto;
}

/* تحسين عرض الأيقونات في حقول التاريخ */
.responsive-datepicker .mud-input-adornment-start {
    margin-right: 8px;
}



/* ========================================
   26. تصميم بطاقات سجلات التدقيق (AuditLogs Cards)
   ======================================== */

/* حاوية بطاقات سجلات التدقيق */
.mobile-cards-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

/* بطاقة سجل التدقيق */
.mobile-card {
    border-radius: 8px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    width: 100%;
}

.mobile-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

/* صف البيانات في البطاقة */
.mobile-card-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.mobile-card-row:last-child {
    border-bottom: none;
}

/* ========================================
   27. تصميم بطاقات الحضور للشاشات الصغيرة
   ======================================== */

/* بطاقة الحضور */
.attendance-card {
    border-radius: 8px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.attendance-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

/* معلومات الحضور */
.attendance-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* صف معلومات الحضور */
.attendance-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
}

/* تسمية معلومات الحضور */
.attendance-label {
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    min-width: 80px;
}

/* قيمة معلومات الحضور */
.attendance-value {
    color: var(--mud-palette-text-primary);
    flex: 1;
}

/* ========================================
   30. تحسين عرض التقويم (DatePicker)
   ======================================== */

/* توسيع مساحة التقويم لعرض جميع الصفوف */
.mud-picker-calendar-container {
    min-height: 340px !important;
}

.mud-picker-month-container {
    min-height: 320px !important;
}

.mud-picker-calendar-transition {
    min-height: 300px !important;
}

/* التأكد من عرض جميع صفوف الأيام */
.mud-picker-calendar-content {
    min-height: 280px !important;
}

/* ========================================
   28. Breakpoints لبطاقات سجلات التدقيق
   ======================================== */

/* 📱 هاتف (≤ 599px) */
@media (max-width: 599px) {

    /* تحسين حاوية البطاقات */
    .mobile-cards-container {
        gap: 12px;
        padding: 0;
    }

    /* تحسين البطاقة */
    .mobile-card {
        margin: 0;
        padding: 0;
    }

    /* تحسين صفوف البيانات */
    .mobile-card-row {
        padding: 8px 0;
        font-size: 0.875rem;
    }

    /* تحسين Pagination */
    .mobile-pagination {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        padding: 12px;
        background-color: rgba(0, 0, 0, 0.02);
        border-radius: 8px;
        margin-top: 12px;
    }

    .mobile-pagination .mud-pagination {
        width: 100%;
    }

    .mobile-pagination .mud-text {
        font-size: 0.75rem;
        text-align: center;
    }
}

/* 📱 تابلت (600px - 1023px) */
@media (min-width: 600px) and (max-width: 1023px) {

    /* تحسين حاوية البطاقات */
    .mobile-cards-container {
        gap: 16px;
    }

    /* تحسين صفوف البيانات */
    .mobile-card-row {
        padding: 10px 0;
        font-size: 0.9rem;
    }

    /* تحسين Pagination */
    .mobile-pagination {
        gap: 16px;
        padding: 16px;
    }
}

/* ========================================
   29. Breakpoints للحضور والغياب
   ======================================== */

/* 📱 هاتف (≤ 599px) */
@media (max-width: 599px) {
    .responsive-attendance-dialog {
        max-width: 100vw !important;
        width: 100vw !important;
        height: 100vh !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    .responsive-attendance-dialog .mud-dialog-content {
        padding: 16px !important;
        max-height: calc(100vh - 120px) !important;
        overflow-y: auto !important;
    }

    .responsive-attendance-dialog .responsive-dialog-actions {
        flex-direction: column;
        gap: 8px;
        padding: 12px !important;
    }

    .responsive-attendance-dialog .responsive-button {
        width: 100%;
        min-height: 48px !important;
    }

    /* تحسين حقول التاريخ على الهواتف */
    .responsive-datepicker {
        font-size: 16px !important;
        /* منع التكبير التلقائي في iOS */
    }

    .responsive-datepicker input {
        font-size: 16px !important;
    }

    /* تحسين عرض البطاقات */
    .mobile-cards {
        gap: 12px;
    }

    .attendance-card {
        margin-bottom: 12px;
    }

    /* تحسين عرض الأيقونات */
    .attendance-row {
        font-size: 0.8rem;
    }

    .attendance-label {
        min-width: 70px;
        font-size: 0.75rem;
    }

    /* تحسين عرض التقويم في وضع الهاتف */
    .mud-picker-calendar-container {
        min-height: 360px !important;
    }

    .mud-picker-month-container {
        min-height: 340px !important;
    }

    .mud-picker-calendar-transition {
        min-height: 320px !important;
    }

    .mud-picker-calendar-content {
        min-height: 300px !important;
    }
}

/* 📱 تابلت (600px - 1023px) */
@media (min-width: 600px) and (max-width: 1023px) {
    .responsive-attendance-dialog {
        max-width: 90vw !important;
        width: 90vw !important;
    }

    .responsive-attendance-dialog .mud-dialog-content {
        padding: 20px !important;
    }

    .responsive-attendance-dialog .responsive-dialog-actions {
        padding: 16px !important;
        gap: 12px;
    }

    .responsive-attendance-dialog .responsive-button {
        min-width: 120px;
        min-height: 44px !important;
    }

    /* تحسين عرض التقويم في وضع التابلت */
    .mud-picker-calendar-container {
        min-height: 350px !important;
    }

    .mud-picker-month-container {
        min-height: 330px !important;
    }

    .mud-picker-calendar-transition {
        min-height: 310px !important;
    }

    .mud-picker-calendar-content {
        min-height: 290px !important;
    }

    /* تحسين عرض البطاقات */
    .mobile-cards {
        gap: 16px;
    }
}

/* 💻 كمبيوتر (≥ 1024px) */
@media (min-width: 1024px) {
    .responsive-attendance-dialog {
        max-width: 900px !important;
        width: 900px !important;
    }

    .responsive-attendance-dialog .mud-dialog-content {
        padding: 24px !important;
    }

    .responsive-attendance-dialog .responsive-dialog-actions {
        padding: 20px !important;
        gap: 16px;
    }

    .responsive-attendance-dialog .responsive-button {
        min-width: 120px;
        min-height: 44px !important;
    }

    /* تحسين عرض التقويم في وضع الكمبيوتر */
    .mud-picker-calendar-container {
        min-height: 340px !important;
    }

    .mud-picker-month-container {
        min-height: 320px !important;
    }

    .mud-picker-calendar-transition {
        min-height: 300px !important;
    }

    .mud-picker-calendar-content {
        min-height: 280px !important;
    }
}

/* ========================================
   31. تحسينات إضافية للحضور
   ======================================== */

/* تحسين عرض الـ Chips في بطاقات الحضور */
.attendance-card .mud-chip {
    font-size: 0.75rem;
    height: 24px;
}

/* تحسين عرض الأزرار في البطاقات */
.attendance-card .mud-icon-button {
    min-width: 44px !important;
    min-height: 44px !important;
}

/* تحسين عرض الـ Pagination للبطاقات */
.mobile-cards+.d-flex {
    margin-top: 16px;
}

/* تحسين عرض الـ Alert في النماذج */
.responsive-alert {
    border-radius: 8px;
}

.responsive-alert .mud-alert-message {
    width: 100%;
}

/* تحسين عرض الـ Section Titles */
.section-title {
    font-weight: 600;
    color: var(--mud-palette-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* تحسين عرض الـ Dividers */
.section-title+.mud-divider {
    margin-top: 8px;
    margin-bottom: 16px;
}

/* تحسين عرض الـ Form Grid */
.responsive-form-grid {
    width: 100%;
}

/* تحسين عرض الـ Counter في الحقول */
.responsive-field .mud-input-helper-text {
    font-size: 0.75rem;
}

@media (max-width: 599px) {
    .responsive-field .mud-input-helper-text {
        font-size: 0.7rem;
    }
}

/* ========================================
   32. تحسين Snackbar للأجهزة المحمولة
   ======================================== */

/* تنسيق عام لـ Snackbar */
.mud-snackbar {
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    direction: rtl !important;
    text-align: right !important;
}

/* تحسين محتوى Snackbar */
.mud-snackbar-content-message {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    line-height: 1.5 !important;
    word-wrap: break-word !important;
    white-space: pre-wrap !important;
}

/* تحسين زر الإغلاق */
.mud-snackbar .mud-button-root {
    min-width: 36px !important;
    min-height: 36px !important;
}

/* ========================================
   33. Breakpoints لـ Snackbar
   ======================================== */

/* 📱 هاتف (≤ 599px) */
@media (max-width: 599px) {
    .mud-snackbar {
        max-width: 90vw !important;
        min-width: 280px !important;
        margin: 0 auto 16px auto !important;
        font-size: 0.875rem !important;
        padding: 12px 16px !important;
    }

    .mud-snackbar-content-message {
        font-size: 0.875rem !important;
        padding: 0 !important;
    }

    /* تحسين أيقونة Snackbar */
    .mud-snackbar .mud-snackbar-icon {
        font-size: 1.25rem !important;
        margin-left: 8px !important;
    }

    /* تحسين زر الإغلاق */
    .mud-snackbar .mud-button-root {
        padding: 4px !important;
        margin-right: -8px !important;
    }

    /* تحسين موضع Snackbar في الأسفل */
    .mud-snackbar-location-bottom-center {
        bottom: 16px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
}

/* 📱 تابلت (600px - 1023px) */
@media (min-width: 600px) and (max-width: 1023px) {
    .mud-snackbar {
        max-width: 500px !important;
        min-width: 320px !important;
        margin: 0 auto 20px auto !important;
        font-size: 0.9375rem !important;
        padding: 14px 18px !important;
    }

    .mud-snackbar-content-message {
        font-size: 0.9375rem !important;
    }

    .mud-snackbar .mud-snackbar-icon {
        font-size: 1.375rem !important;
        margin-left: 10px !important;
    }

    .mud-snackbar-location-bottom-center {
        bottom: 20px !important;
    }
}


/* 💻 كمبيوتر (≥ 1024px) */
@media (min-width: 1024px) {
    .mud-snackbar {
        max-width: 600px !important;
        min-width: 400px !important;
        margin: 0 auto 24px auto !important;
        font-size: 1rem !important;
        padding: 16px 20px !important;
    }

    .mud-snackbar-content-message {
        font-size: 1rem !important;
    }

    .mud-snackbar .mud-snackbar-icon {
        font-size: 1.5rem !important;
        margin-left: 12px !important;
    }

    .mud-snackbar-location-bottom-center {
        bottom: 24px !important;
    }
}

/* ========================================
   34. تحسين ألوان Snackbar حسب النوع
   ======================================== */

/* Success - نجاح */
.mud-snackbar.mud-alert-filled-success {
    background-color: #3dcb6c !important;
    color: #ffffff !important;
}

/* Error - خطأ */
.mud-snackbar.mud-alert-filled-error {
    background-color: #ff3f5f !important;
    color: #ffffff !important;
}

/* Warning - تحذير */
.mud-snackbar.mud-alert-filled-warning {
    background-color: #ffb545 !important;
    color: #1a1a27 !important;
}

/* Info - معلومات */
.mud-snackbar.mud-alert-filled-info {
    background-color: #4a86ff !important;
    color: #ffffff !important;
}

/* ========================================
   35. تحسين الرسوم المتحركة (Animations)
   ======================================== */

/* تحسين ظهور Snackbar */
.mud-snackbar {
    animation: snackbar-slide-up 0.3s ease-out !important;
}

@keyframes snackbar-slide-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* تحسين اختفاء Snackbar */
.mud-snackbar.mud-snackbar-hiding {
    animation: snackbar-slide-down 0.3s ease-in !important;
}

@keyframes snackbar-slide-down {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(20px);
    }
}

/* ========================================
   36. تحسين دعم RTL
   ======================================== */

/* التأكد من دعم RTL بشكل كامل */
[dir="rtl"] .mud-snackbar {
    direction: rtl !important;
    text-align: right !important;
}

[dir="rtl"] .mud-snackbar-content {
    flex-direction: row-reverse !important;
}

[dir="rtl"] .mud-snackbar .mud-snackbar-icon {
    margin-left: 12px !important;
    margin-right: 0 !important;
}

[dir="rtl"] .mud-snackbar .mud-button-root {
    margin-right: 0 !important;
    margin-left: -8px !important;
}

/* ========================================
   37. تحسين التباين والقراءة
   ======================================== */

/* تحسين التباين للنصوص */
.mud-snackbar-content-message {
    font-weight: 500 !important;
    letter-spacing: 0.01em !important;
}

/* تحسين الظل للقراءة الأفضل */
.mud-snackbar {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

/* ========================================
   38. تحسين التكديس (Stacking)
   ======================================== */

/* تحسين المسافة بين Snackbars المتعددة */
.mud-snackbar+.mud-snackbar {
    margin-top: 8px !important;
}

@media (max-width: 599px) {
    .mud-snackbar+.mud-snackbar {
        margin-top: 6px !important;
    }
}

/* ========================================
   39. تحسين الشريط العلوي للهواتف المحمولة (AppBar Responsive)
   ======================================== */

/* 📱 هاتف (≤ 599px) - تحسينات الشريط العلوي */
@media (max-width: 599px) {

    /* تقليل ارتفاع الشريط العلوي */
    .app-bar-responsive {
        min-height: 56px !important;
        height: 56px !important;
        padding: 0 8px !important;
    }

    /* تقليل حجم عنوان التطبيق */
    .app-title-mobile {
        font-size: 1.1rem !important;
        font-weight: 600 !important;
        margin-left: 8px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 120px;
    }

    /* تقليل حجم نص اسم المستخدم */
    .user-name-mobile {
        font-size: 0.7rem !important;
        margin-right: 6px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 80px;
        display: block !important;
        /* إظهار اسم المستخدم على جميع الشاشات */
        font-weight: 500 !important;
        line-height: 1.2 !important;
    }

    /* تحسين حجم الأزرار - الحد الأدنى 44px للمس السهل */
    .menu-button-mobile,
    .theme-toggle-mobile,
    .logout-button-mobile {
        min-width: 44px !important;
        min-height: 44px !important;
        width: 44px !important;
        height: 44px !important;
        padding: 10px !important;
    }

    /* تقليل حجم الأيقونات */
    .menu-button-mobile .mud-icon-root,
    .theme-toggle-mobile .mud-icon-root,
    .logout-button-mobile .mud-icon-root {
        font-size: 1.3rem !important;
    }

    /* تحسين المسافات بين الأزرار */
    .app-bar-responsive .mud-icon-button {
        margin: 0 2px !important;
    }

    /* تحسين المحتوى الرئيسي */
    .mud-main-content {
        padding-top: 56px !important;
    }
}

/* 📱 هاتف متوسط (400px - 599px) - تحسين أحجام النصوص */
@media (min-width: 400px) and (max-width: 599px) {

    /* زيادة حجم نص اسم المستخدم قليلاً */
    .user-name-mobile {
        font-size: 0.75rem !important;
        max-width: 100px;
        margin-right: 8px !important;
    }

    /* زيادة عرض عنوان التطبيق */
    .app-title-mobile {
        max-width: 140px;
    }
}

/* 📱 تابلت (600px - 1023px) - تحسينات متوسطة */
@media (min-width: 600px) and (max-width: 1023px) {

    /* ارتفاع متوسط للشريط العلوي */
    .app-bar-responsive {
        min-height: 64px !important;
        height: 64px !important;
        padding: 0 12px !important;
    }

    /* حجم عنوان متوسط */
    .app-title-mobile {
        font-size: 1.3rem !important;
        margin-left: 12px !important;
        max-width: 200px;
    }

    /* إظهار اسم المستخدم */
    .user-name-mobile {
        display: block !important;
        font-size: 0.85rem !important;
        margin-right: 12px !important;
        max-width: 150px;
    }

    /* حجم أزرار متوسط */
    .menu-button-mobile,
    .theme-toggle-mobile,
    .logout-button-mobile {
        min-width: 48px !important;
        min-height: 48px !important;
        width: 48px !important;
        height: 48px !important;
    }

    /* حجم أيقونات متوسط */
    .menu-button-mobile .mud-icon-root,
    .theme-toggle-mobile .mud-icon-root,
    .logout-button-mobile .mud-icon-root {
        font-size: 1.4rem !important;
    }

    /* تحسين المحتوى الرئيسي */
    .mud-main-content {
        padding-top: 64px !important;
    }
}

/* 💻 كمبيوتر (≥ 1024px) - الحجم الطبيعي */
@media (min-width: 1024px) {

    /* الحجم الطبيعي للشريط العلوي */
    .app-bar-responsive {
        min-height: 64px !important;
        height: 64px !important;
    }

    /* إظهار جميع العناصر بالحجم الطبيعي */
    .app-title-mobile {
        font-size: 1.5rem !important;
        max-width: none;
    }

    .user-name-mobile {
        display: block !important;
        font-size: 0.875rem !important;
        max-width: none;
    }
}

/* ========================================
   40. دعم اتجاه الكتابة RTL للشريط العلوي
   ======================================== */

/* التأكد من دعم RTL بشكل صحيح */
[dir="rtl"] .app-bar-responsive {
    direction: rtl !important;
}

[dir="rtl"] .app-title-mobile {
    margin-left: 0 !important;
    margin-right: 8px !important;
}

[dir="rtl"] .user-name-mobile {
    margin-right: 0 !important;
    margin-left: 8px !important;
    text-align: left !important;
}

@media (min-width: 600px) and (max-width: 1023px) {
    [dir="rtl"] .app-title-mobile {
        margin-right: 12px !important;
    }

    [dir="rtl"] .user-name-mobile {
        margin-left: 12px !important;
    }
}

/* ========================================
   41. تحسينات إضافية للوصول (Accessibility)
   ======================================== */

/* تحسين التباين للأزرار */
.menu-button-mobile:hover,
.theme-toggle-mobile:hover,
.logout-button-mobile:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* تحسين التركيز (Focus) */
.menu-button-mobile:focus,
.theme-toggle-mobile:focus,
.logout-button-mobile:focus {
    outline: 2px solid rgba(255, 255, 255, 0.5) !important;
    outline-offset: 2px !important;
}

/* تحسين الحالة النشطة (Active) */
.menu-button-mobile:active,
.theme-toggle-mobile:active,
.logout-button-mobile:active {
    transform: scale(0.95) !important;
    transition: transform 0.1s ease !important;
}

/* ========================================
   42. تحسين وضوح اسم المستخدم على الهواتف
   ======================================== */

/* تحسين قابلية القراءة لاسم المستخدم */
.user-name-mobile {
    /* تحسين التباين */
    opacity: 0.95 !important;
    letter-spacing: 0.01em !important;
}

/* تحسين الوضوح على الشاشات الصغيرة جداً */
@media (max-width: 360px) {
    .user-name-mobile {
        font-size: 0.65rem !important;
        max-width: 70px;
        margin-right: 4px !important;
    }

    .app-title-mobile {
        font-size: 1rem !important;
        max-width: 100px;
        margin-left: 6px !important;
    }

    /* تقليل المسافات بين الأزرار */
    .app-bar-responsive .mud-icon-button {
        margin: 0 1px !important;
    }
}

/* تحسين للشاشات الصغيرة (361px - 399px) */
@media (min-width: 361px) and (max-width: 399px) {
    .user-name-mobile {
        font-size: 0.7rem !important;
        max-width: 75px;
    }

    .app-title-mobile {
        max-width: 110px;
    }
}

/* ========================================
   43. نظام الأزرار المتجاوبة الشامل (Responsive Buttons System)
   ======================================== */

/* ========== الأزرار العادية (MudButton) ========== */

/* الحجم الافتراضي - جميع الشاشات */
.mud-button-root {
    min-height: 36px !important;
    padding: 8px 16px !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
    transition: all 0.2s ease !important;
}

/* أزرار كبيرة (Large) */
.mud-button-root.mud-button-size-large {
    min-height: 42px !important;
    padding: 10px 22px !important;
    font-size: 0.9375rem !important;
}

/* أزرار صغيرة (Small) */
.mud-button-root.mud-button-size-small {
    min-height: 32px !important;
    padding: 6px 12px !important;
    font-size: 0.8125rem !important;
}

/* ========== الأزرار الأيقونية (MudIconButton) ========== */

/* الحجم الافتراضي - الحد الأدنى 44px للمس السهل */
.mud-icon-button {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 10px !important;
}

/* أيقونات الأزرار */
.mud-icon-button .mud-icon-root {
    font-size: 1.5rem !important;
}

/* أزرار أيقونية كبيرة */
.mud-icon-button.mud-button-size-large {
    min-width: 48px !important;
    min-height: 48px !important;
    padding: 12px !important;
}

.mud-icon-button.mud-button-size-large .mud-icon-root {
    font-size: 1.75rem !important;
}

/* أزرار أيقونية صغيرة */
.mud-icon-button.mud-button-size-small {
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 8px !important;
}

.mud-icon-button.mud-button-size-small .mud-icon-root {
    font-size: 1.25rem !important;
}

/* ========== المسافات بين الأزرار ========== */

/* مسافة أفقية بين الأزرار */
.mud-button-root+.mud-button-root,
.mud-icon-button+.mud-icon-button,
.mud-button-root+.mud-icon-button,
.mud-icon-button+.mud-button-root {
    margin-right: 8px !important;
}

/* مسافة عمودية في الأزرار المكدسة */
.mud-button-group-vertical .mud-button-root {
    margin-bottom: 8px !important;
}

/* ========== تحسينات الوصول (Accessibility) ========== */

/* تحسين التركيز (Focus) */
.mud-button-root:focus-visible,
.mud-icon-button:focus-visible {
    outline: 2px solid var(--mud-palette-primary) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(126, 111, 255, 0.2) !important;
}

/* تحسين الحالة النشطة (Active) */
.mud-button-root:active,
.mud-icon-button:active {
    transform: scale(0.97) !important;
}

/* تحسين التمرير (Hover) */
.mud-button-root:hover:not(:disabled),
.mud-icon-button:hover:not(:disabled) {
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

/* ========== أزرار الحوارات (Dialog Actions) ========== */

.mud-dialog-actions .mud-button-root {
    min-width: 80px !important;
}

/* ========================================
   44. تحسينات الأزرار للهواتف المحمولة
   ======================================== */

/* 📱 هاتف صغير جداً (≤ 360px) */
@media (max-width: 360px) {

    /* تقليل حجم الأزرار العادية */
    .mud-button-root {
        min-height: 36px !important;
        padding: 6px 10px !important;
        font-size: 0.75rem !important;
    }

    /* تقليل حجم الأزرار الكبيرة */
    .mud-button-root.mud-button-size-large {
        min-height: 40px !important;
        padding: 8px 14px !important;
        font-size: 0.8125rem !important;
    }

    /* تقليل حجم الأزرار الصغيرة */
    .mud-button-root.mud-button-size-small {
        min-height: 32px !important;
        padding: 4px 8px !important;
        font-size: 0.75rem !important;
    }

    /* الحفاظ على الحد الأدنى للأزرار الأيقونية */
    .mud-icon-button {
        min-width: 40px !important;
        min-height: 40px !important;
        padding: 8px !important;
    }

    .mud-icon-button .mud-icon-root {
        font-size: 1.25rem !important;
    }

    /* تقليل المسافات بين الأزرار */
    .mud-button-root+.mud-button-root,
    .mud-icon-button+.mud-icon-button,
    .mud-button-root+.mud-icon-button,
    .mud-icon-button+.mud-button-root {
        margin-right: 4px !important;
    }

    /* تحسين أزرار الحوارات */
    .mud-dialog-actions .mud-button-root {
        min-width: 70px !important;
        padding: 6px 8px !important;
    }
}

/* 📱 هاتف صغير (361px - 599px) */
@media (min-width: 361px) and (max-width: 599px) {

    /* تقليل حجم الأزرار العادية */
    .mud-button-root {
        min-height: 38px !important;
        padding: 7px 12px !important;
        font-size: 0.8125rem !important;
    }

    /* تقليل حجم الأزرار الكبيرة */
    .mud-button-root.mud-button-size-large {
        min-height: 42px !important;
        padding: 9px 16px !important;
        font-size: 0.875rem !important;
    }

    /* تقليل حجم الأزرار الصغيرة */
    .mud-button-root.mud-button-size-small {
        min-height: 34px !important;
        padding: 5px 10px !important;
        font-size: 0.75rem !important;
    }

    /* الأزرار الأيقونية */
    .mud-icon-button {
        min-width: 42px !important;
        min-height: 42px !important;
        padding: 9px !important;
    }

    .mud-icon-button .mud-icon-root {
        font-size: 1.375rem !important;
    }

    /* تقليل المسافات بين الأزرار */
    .mud-button-root+.mud-button-root,
    .mud-icon-button+.mud-icon-button,
    .mud-button-root+.mud-icon-button,
    .mud-icon-button+.mud-button-root {
        margin-right: 6px !important;
    }

    /* تحسين أزرار الحوارات */
    .mud-dialog-actions .mud-button-root {
        min-width: 75px !important;
    }
}

/* 📱 تابلت (600px - 1023px) */
@media (min-width: 600px) and (max-width: 1023px) {

    /* الأزرار العادية - حجم قريب من الطبيعي */
    .mud-button-root {
        min-height: 40px !important;
        padding: 8px 14px !important;
        font-size: 0.875rem !important;
    }

    /* الأزرار الكبيرة */
    .mud-button-root.mud-button-size-large {
        min-height: 44px !important;
        padding: 10px 18px !important;
        font-size: 0.9375rem !important;
    }

    /* الأزرار الصغيرة */
    .mud-button-root.mud-button-size-small {
        min-height: 36px !important;
        padding: 6px 12px !important;
        font-size: 0.8125rem !important;
    }

    /* الأزرار الأيقونية */
    .mud-icon-button {
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 10px !important;
    }

    .mud-icon-button .mud-icon-root {
        font-size: 1.5rem !important;
    }
}

/* 💻 كمبيوتر (≥ 1024px) - الحجم الطبيعي */
@media (min-width: 1024px) {
    /* الأحجام الطبيعية - تم تعريفها في القسم الأساسي */
    /* لا حاجة لتعديلات إضافية */
}

/* ========================================
   45. تحسينات خاصة لأزرار الجداول (DataGrid/Table)
   ======================================== */

/* أزرار الإجراءات في الجداول */
.mud-table .mud-icon-button,
.mud-datagrid .mud-icon-button {
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 8px !important;
}

.mud-table .mud-icon-button .mud-icon-root,
.mud-datagrid .mud-icon-button .mud-icon-root {
    font-size: 1.25rem !important;
}

/* تحسين المسافات بين أزرار الجداول */
.mud-table .mud-icon-button+.mud-icon-button,
.mud-datagrid .mud-icon-button+.mud-icon-button {
    margin-right: 4px !important;
}

/* 📱 تحسينات خاصة للهواتف */
@media (max-width: 599px) {

    .mud-table .mud-icon-button,
    .mud-datagrid .mud-icon-button {
        min-width: 36px !important;
        min-height: 36px !important;
        padding: 6px !important;
    }

    .mud-table .mud-icon-button .mud-icon-root,
    .mud-datagrid .mud-icon-button .mud-icon-root {
        font-size: 1.125rem !important;
    }

    .mud-table .mud-icon-button+.mud-icon-button,
    .mud-datagrid .mud-icon-button+.mud-icon-button {
        margin-right: 2px !important;
    }
}

/* ========================================
   46. تحسينات أزرار Toolbar
   ======================================== */

/* أزرار في Toolbar */
.mud-toolbar .mud-button-root {
    min-height: 36px !important;
    padding: 6px 12px !important;
}

.mud-toolbar .mud-icon-button {
    min-width: 40px !important;
    min-height: 40px !important;
}

/* 📱 تحسينات للهواتف */
@media (max-width: 599px) {
    .mud-toolbar .mud-button-root {
        min-height: 32px !important;
        padding: 4px 8px !important;
        font-size: 0.75rem !important;
    }

    .mud-toolbar .mud-icon-button {
        min-width: 36px !important;
        min-height: 36px !important;
        padding: 6px !important;
    }

    .mud-toolbar .mud-icon-button .mud-icon-root {
        font-size: 1.125rem !important;
    }
}

/* ========================================
   47. تحسينات أزرار الحوارات (Dialog Buttons)
   ======================================== */

/* أزرار في DialogActions */
.mud-dialog-actions {
    padding: 16px 24px !important;
    gap: 8px !important;
}

.mud-dialog-actions .mud-button-root {
    min-width: 90px !important;
    min-height: 36px !important;
}

/* 📱 تحسينات للهواتف */
@media (max-width: 599px) {
    .mud-dialog-actions {
        padding: 12px 16px !important;
        gap: 6px !important;
        flex-wrap: wrap !important;
    }

    .mud-dialog-actions .mud-button-root {
        min-width: 80px !important;
        min-height: 36px !important;
        padding: 6px 10px !important;
        font-size: 0.8125rem !important;
        flex: 1 1 auto !important;
    }

    /* أزرار ملء العرض على الشاشات الصغيرة جداً */
    @media (max-width: 360px) {
        .mud-dialog-actions .mud-button-root {
            width: 100% !important;
            margin-bottom: 4px !important;
        }
    }
}

/* ========================================
   48. تحسينات أزرار النماذج (Form Buttons)
   ======================================== */

/* مجموعة أزرار النماذج */
.form-actions,
.mud-form .mud-button-group {
    display: flex !important;
    gap: 12px !important;
    margin-top: 16px !important;
    flex-wrap: wrap !important;
}

/* 📱 تحسينات للهواتف */
@media (max-width: 599px) {

    .form-actions,
    .mud-form .mud-button-group {
        gap: 8px !important;
        margin-top: 12px !important;
    }

    .form-actions .mud-button-root,
    .mud-form .mud-button-group .mud-button-root {
        flex: 1 1 auto !important;
        min-width: 100px !important;
    }

    /* أزرار ملء العرض على الشاشات الصغيرة جداً */
    @media (max-width: 360px) {

        .form-actions .mud-button-root,
        .mud-form .mud-button-group .mud-button-root {
            width: 100% !important;
        }
    }
}

/* ========================================
   49. تحسينات أزرار Floating Action Button (FAB)
   ======================================== */

/* أزرار FAB */
.mud-fab {
    min-width: 56px !important;
    min-height: 56px !important;
    padding: 16px !important;
}

.mud-fab .mud-icon-root {
    font-size: 1.5rem !important;
}

/* FAB صغير */
.mud-fab.mud-button-size-small {
    min-width: 48px !important;
    min-height: 48px !important;
    padding: 12px !important;
}

.mud-fab.mud-button-size-small .mud-icon-root {
    font-size: 1.25rem !important;
}

/* 📱 تحسينات للهواتف */
@media (max-width: 599px) {
    .mud-fab {
        min-width: 52px !important;
        min-height: 52px !important;
        padding: 14px !important;
    }

    .mud-fab .mud-icon-root {
        font-size: 1.375rem !important;
    }

    .mud-fab.mud-button-size-small {
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 10px !important;
    }

    .mud-fab.mud-button-size-small .mud-icon-root {
        font-size: 1.125rem !important;
    }
}

/* ========================================
   50. تحسينات دعم RTL للأزرار
   ======================================== */

/* دعم RTL للمسافات بين الأزرار */
[dir="rtl"] .mud-button-root+.mud-button-root,
[dir="rtl"] .mud-icon-button+.mud-icon-button,
[dir="rtl"] .mud-button-root+.mud-icon-button,
[dir="rtl"] .mud-icon-button+.mud-button-root {
    margin-right: 0 !important;
    margin-left: 8px !important;
}

[dir="rtl"] .mud-table .mud-icon-button+.mud-icon-button,
[dir="rtl"] .mud-datagrid .mud-icon-button+.mud-icon-button {
    margin-right: 0 !important;
    margin-left: 4px !important;
}

/* 📱 تحسينات RTL للهواتف */
@media (max-width: 599px) {

    [dir="rtl"] .mud-button-root+.mud-button-root,
    [dir="rtl"] .mud-icon-button+.mud-icon-button,
    [dir="rtl"] .mud-button-root+.mud-icon-button,
    [dir="rtl"] .mud-icon-button+.mud-button-root {
        margin-left: 6px !important;
    }

    [dir="rtl"] .mud-table .mud-icon-button+.mud-icon-button,
    [dir="rtl"] .mud-datagrid .mud-icon-button+.mud-icon-button {
        margin-left: 2px !important;
    }
}

@media (max-width: 360px) {

    [dir="rtl"] .mud-button-root+.mud-button-root,
    [dir="rtl"] .mud-icon-button+.mud-icon-button,
    [dir="rtl"] .mud-button-root+.mud-icon-button,
    [dir="rtl"] .mud-icon-button+.mud-button-root {
        margin-left: 4px !important;
    }
}

/* ========================================
   51. تحسينات الأزرار المعطلة (Disabled)
   ======================================== */

/* الأزرار المعطلة */
.mud-button-root:disabled,
.mud-icon-button:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

.mud-button-root:disabled:hover,
.mud-icon-button:disabled:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* ========================================
   52. تحسينات أزرار التحميل (Loading State)
   ======================================== */

/* أزرار مع مؤشر التحميل */
.mud-button-root .mud-progress-circular {
    margin-left: 8px !important;
}

[dir="rtl"] .mud-button-root .mud-progress-circular {
    margin-left: 0 !important;
    margin-right: 8px !important;
}

/* 📱 تحسينات للهواتف */
@media (max-width: 599px) {
    .mud-button-root .mud-progress-circular {
        margin-left: 6px !important;
        width: 16px !important;
        height: 16px !important;
    }

    [dir="rtl"] .mud-button-root .mud-progress-circular {
        margin-left: 0 !important;
        margin-right: 6px !important;
    }
}



/* ========================================
   53. تحسين عرض حالة المشروع (Project Status Chip)
   ======================================== */

/* تنسيق عام لـ Chip الحالة */
.project-status-chip {
    font-weight: 600 !important;
    border-radius: 16px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* تأثير Hover */
.project-status-chip:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

/* تحسين الأيقونة داخل Chip */
.project-status-chip .mud-chip-icon {
    margin-left: 4px !important;
    font-size: 1rem !important;
}

/* تحسين النص داخل Chip */
.project-status-chip .mud-chip-content {
    padding: 0 10px !important;
    font-size: 0.8125rem !important;
    letter-spacing: 0.02em !important;
}

/* ========================================
   54. تحسينات حسب حالة المشروع
   ======================================== */

/* حالة "مكتمل" - أخضر */
.project-status-chip.mud-chip-color-success {
    background-color: #3dcb6c !important;
    color: #ffffff !important;
}

.project-status-chip.mud-chip-color-success:hover {
    background-color: #2fb85e !important;
}

/* حالة "قيد التنفيذ" - أزرق */
.project-status-chip.mud-chip-color-info {
    background-color: #4a86ff !important;
    color: #ffffff !important;
}

.project-status-chip.mud-chip-color-info:hover {
    background-color: #3674f0 !important;
}

/* حالة "متوقف" أو أخرى - رمادي */
.project-status-chip.mud-chip-color-default {
    background-color: #9e9e9e !important;
    color: #ffffff !important;
}

.project-status-chip.mud-chip-color-default:hover {
    background-color: #757575 !important;
}

/* ========================================
   55. تحسينات للهواتف المحمولة
   ======================================== */

/* 📱 هاتف صغير جداً (≤ 360px) */
@media (max-width: 360px) {
    .project-status-chip {
        height: 22px !important;
        border-radius: 12px !important;
    }

    .project-status-chip .mud-chip-icon {
        font-size: 0.875rem !important;
        margin-left: 2px !important;
    }

    .project-status-chip .mud-chip-content {
        padding: 0 6px !important;
        font-size: 0.7rem !important;
    }
}

/* 📱 هاتف صغير (361px - 599px) */
@media (min-width: 361px) and (max-width: 599px) {
    .project-status-chip {
        height: 24px !important;
        border-radius: 14px !important;
    }

    .project-status-chip .mud-chip-icon {
        font-size: 0.9375rem !important;
        margin-left: 3px !important;
    }

    .project-status-chip .mud-chip-content {
        padding: 0 8px !important;
        font-size: 0.75rem !important;
    }
}

/* 📱 تابلت (600px - 1023px) */
@media (min-width: 600px) and (max-width: 1023px) {
    .project-status-chip {
        height: 26px !important;
        border-radius: 15px !important;
    }

    .project-status-chip .mud-chip-icon {
        font-size: 1rem !important;
    }

    .project-status-chip .mud-chip-content {
        padding: 0 9px !important;
        font-size: 0.8125rem !important;
    }
}

/* 💻 كمبيوتر (≥ 1024px) - الحجم الطبيعي */
@media (min-width: 1024px) {
    .project-status-chip {
        height: 28px !important;
    }
}

/* ========================================
   56. تحسين محاذاة Chip في صف المعلومات
   ======================================== */

/* تحسين محاذاة Chip مع التسمية */
.info-row .project-status-chip {
    margin-right: auto !important;
    align-self: flex-start !important;
}

/* دعم RTL */
[dir="rtl"] .info-row .project-status-chip {
    margin-right: 0 !important;
    margin-left: auto !important;
}

/* ========================================
   57. تحسين الرسوم المتحركة (Animations)
   ======================================== */

/* تأثير النبض للحالة "قيد التنفيذ" */
@keyframes pulse-info {

    0%,
    100% {
        box-shadow: 0 2px 4px rgba(74, 134, 255, 0.3);
    }

    50% {
        box-shadow: 0 4px 12px rgba(74, 134, 255, 0.5);
    }
}

.project-status-chip.mud-chip-color-info {
    animation: pulse-info 2s ease-in-out infinite;
}

/* إيقاف الرسوم المتحركة عند التمرير */
.project-status-chip:hover {
    animation: none !important;
}

/* ========================================
   58. تحسين التباين والوضوح
   ======================================== */

/* تحسين قابلية القراءة */
.project-status-chip {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

/* تحسين التباين للأيقونة */
.project-status-chip .mud-chip-icon {
    opacity: 0.95 !important;
}

/* ========================================
   59. تحسين الوصول (Accessibility)
   ======================================== */

/* تحسين التركيز (Focus) */
.project-status-chip:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.8) !important;
    outline-offset: 2px !important;
}

/* تحسين الحالة النشطة (Active) */
.project-status-chip:active {
    transform: scale(0.98) !important;
}

/* ========================================
   60. تحسينات إضافية للبطاقات المصغرة
   ======================================== */

/* تحسين المسافة بين التسمية والـ Chip */
.info-row .info-label+.project-status-chip {
    margin-right: 8px !important;
}

[dir="rtl"] .info-row .info-label+.project-status-chip {
    margin-right: 0 !important;
    margin-left: 8px !important;
}

/* تحسين عرض Chip في البطاقات */
.mobile-card .project-status-chip {
    flex-shrink: 0 !important;
}

/* 📱 تحسينات خاصة للهواتف */
@media (max-width: 599px) {
    .info-row .info-label+.project-status-chip {
        margin-right: 6px !important;
    }

    [dir="rtl"] .info-row .info-label+.project-status-chip {
        margin-right: 0 !important;
        margin-left: 6px !important;
    }
}

/* ========================================
   61. تصميم نافذة المواقع المتجاوبة (Locations Dialog)
   ======================================== */

/* نافذة المواقع المتجاوبة */
.responsive-location-dialog {
    border-radius: 12px;
}

/* تحسين محتوى النافذة */
.responsive-location-dialog .mud-dialog-content {
    padding: 24px;
    max-height: 80vh;
    overflow-y: auto;
}

/* تحسين عنوان النافذة */
.responsive-location-dialog .mud-dialog-title {
    padding: 20px 24px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* تحسين أزرار النافذة */
.responsive-location-dialog .mud-dialog-actions {
    padding: 16px 24px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* ========================================
   62. تحسين لوحات التوسيع في النافذة
   ======================================== */

/* لوحات التوسيع */
.dialog-expansion-panels {
    margin-top: 16px;
}

.dialog-expansion-panel {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: hidden;
}

/* عنوان لوحة التوسيع */
.dialog-expansion-title {
    display: flex;

    /* حقول النموذج */
    .dialog-field {
        width: 100%;
        margin-bottom: 8px;
    }

    .dialog-field .mud-input-root {
        border-radius: 8px;
    }

    /* تحسين الأيقونات في الحقول */
    .dialog-field .mud-input-adornment .mud-icon-root {
        font-size: 1.25rem;
        color: var(--mud-palette-text-secondary);
    }

    /* ========================================
   64. تحسين التنبيهات في النافذة
   ======================================== */

    /* تنبيه المعلومات */
    .dialog-alert {
        border-radius: 8px;
        margin-bottom: 16px;
    }

    .dialog-alert .mud-alert-message {
        width: 100%;
    }

    /* ========================================
   65. Breakpoints لنافذة المواقع
   ======================================== */

    /* 📱 هاتف (≤ 599px) */
    @media (max-width: 599px) {

        /* جعل النافذة تأخذ كامل الشاشة */
        .responsive-location-dialog .mud-dialog-surface {
            max-width: 100vw !important;
            width: 100vw !important;
            height: 100vh !important;
            margin: 0 !important;
            border-radius: 0 !important;
        }

        /* تحسين المحتوى */
        .responsive-location-dialog .mud-dialog-content {
            padding: 16px !important;
            max-height: calc(100vh - 140px) !important;
            overflow-y: auto !important;
        }

        /* تحسين العنوان */
        .responsive-location-dialog .mud-dialog-title {
            padding: 16px !important;
            font-size: 1.1rem !important;
        }

        /* تحسين الأزرار */
        .responsive-location-dialog .mud-dialog-actions {
            padding: 12px 16px !important;
            flex-direction: column;
            gap: 8px;
        }

        .responsive-location-dialog .mud-dialog-actions .mud-button-root {
            width: 100%;
            min-height: 48px !important;
            font-size: 0.9375rem !important;
        }

        /* تحسين الحقول */
        .dialog-field .mud-input-root input,
        .dialog-field .mud-select-input {
            font-size: 16px !important;
            /* منع التكبير التلقائي في iOS */
        }

        /* تحسين لوحات التوسيع */
        .dialog-expansion-panel {
            margin-bottom: 8px;
        }

        .dialog-expansion-title {
            gap: 8px;
        }

        .dialog-expansion-text {
            font-size: 0.9375rem !important;
        }

        /* تحسين المسافات في الـ Grid */
        .dialog-expansion-panel .mud-grid-item {
            padding: 6px !important;
        }

        /* تحسين التنبيهات */
        .dialog-alert {
            margin-bottom: 12px;
            padding: 12px !important;
        }

        .dialog-alert .mud-alert-message {
            font-size: 0.875rem !important;
        }
    }

    /* 📱 تابلت (600px - 1023px) */
    @media (min-width: 600px) and (max-width: 1023px) {

        /* تحسين حجم النافذة */
        .responsive-location-dialog .mud-dialog-surface {
            max-width: 90vw !important;
            width: 90vw !important;
            margin: 16px !important;
        }

        /* تحسين المحتوى */
        .responsive-location-dialog .mud-dialog-content {
            padding: 20px !important;
        }

        /* تحسين الأزرار */
        .responsive-location-dialog .mud-dialog-actions {
            padding: 16px 20px !important;
            gap: 12px;
        }

        .responsive-location-dialog .mud-dialog-actions .mud-button-root {
            min-width: 120px;
            min-height: 44px !important;
        }

        /* تحسين المسافات في الـ Grid */
        .dialog-expansion-panel .mud-grid-item {
            padding: 8px !important;
        }
    }

    /* 💻 كمبيوتر (≥ 1024px) */
    @media (min-width: 1024px) {

        /* تحسين حجم النافذة */
        .responsive-location-dialog .mud-dialog-surface {
            max-width: 900px !important;
            width: 900px !important;
        }

        /* المسافات الطبيعية */
        .responsive-location-dialog .mud-dialog-content {
            padding: 24px !important;
        }

        .responsive-location-dialog .mud-dialog-actions {
            padding: 16px 24px !important;
            gap: 16px;
        }

        .responsive-location-dialog .mud-dialog-actions .mud-button-root {
            min-width: 120px;
            min-height: 44px !important;
        }

        /* تحسين المسافات في الـ Grid */
        .dialog-expansion-panel .mud-grid-item {
            padding: 12px !important;
        }
    }

    /* ========================================
   66. تحسين التنقل بالكيبورد
   ======================================== */

    /* تحسين Focus للحقول */
    .dialog-field .mud-input-root:focus-within,
    .dialog-field .mud-select:focus-within {
        outline: 2px solid var(--mud-palette-primary);
        outline-offset: 2px;
        border-radius: 8px;
    }

    /* تحسين Focus للأزرار */
    .responsive-location-dialog .mud-button-root:focus {
        outline: 2px solid var(--mud-palette-primary);
        outline-offset: 2px;
    }

    /* ========================================
   67. تحسين الرسوم المتحركة
   ======================================== */

    /* تحسين الانتقالات */
    .dialog-field,
    .dialog-expansion-panel,
    .responsive-location-dialog .mud-button-root {
        transition: all 0.2s ease-in-out;
    }

    /* تحسين الـ Hover للحقول */
    .dialog-field:hover {
        transform: translateY(-1px);
    }

    /* تحسين الـ Hover للأزرار */
    .responsive-location-dialog .mud-button-root:hover {
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }

    /* ========================================
   68. تحسين رسائل الخطأ
   ======================================== */

    /* تحسين رسائل الخطأ */
    .dialog-field .mud-input-error {
        font-size: 0.75rem;
        color: var(--mud-palette-error);
        margin-top: 4px;
    }

    @media (max-width: 599px) {
        .dialog-field .mud-input-error {
            font-size: 0.7rem;
        }
    }

    /* ========================================
   69. تحسين دعم RTL
   ======================================== */

    /* التأكد من دعم RTL بشكل كامل */
    [dir="rtl"] .responsive-location-dialog {
        direction: rtl;
    }

    [dir="rtl"] .dialog-expansion-title {
        flex-direction: row-reverse;
    }

    [dir="rtl"] .dialog-field .mud-input-adornment-start {
        margin-right: 0;
        margin-left: 8px;
    }

    /* ========================================
   70. تحسين الألوان والتباين
   ======================================== */

    /* تحسين التباين للقراءة */
    .dialog-expansion-text {
        color: var(--mud-palette-text-primary);
    }

    .dialog-alert {
        background-color: var(--mud-palette-info-lighten);
    }

    /* تحسين الـ Divider */
    .dialog-expansion-panel .mud-divider {
        border-color: var(--mud-palette-divider);
        opacity: 0.6;
    }

    /* ========================================
   71. تصميم لوحة الفلاتر والإجراءات (Filters & Actions Panel)
   ======================================== */

    /* حاوية لوحات التوسيع */
    .employees-expansion-panels {
        width: 100%;
    }

    /* لوحة الفلاتر */
    .employees-filter-panel {
        border-radius: 8px;
        overflow: hidden;
    }

    /* عنوان لوحة التوسيع */
    .expansion-panel-title {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
    }

    .panel-icon {
        color: var(--mud-palette-primary);
    }

    .panel-title-text {
        flex: 1;
        font-weight: 600;
    }

    .panel-chip {
        margin-right: auto;
    }

    /* محتوى لوحة الفلاتر */
    .filter-panel-content {
        padding: 16px;
        background-color: var(--mud-palette-background);
    }

    /* عنوان قسم الفلاتر */
    .filter-section-header {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 12px;
    }

    .filter-section-title {
        font-weight: 600;
        color: var(--mud-palette-text-primary);
    }

    /* أزرار الإجراءات */
    .action-button {
        border-radius: 8px;
        font-weight: 500;
        transition: all 0.2s ease;
    }

    .action-button:hover:not(:disabled) {
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }

    /* حقول الفلاتر */
    .employees-filter-field {
        width: 100%;
    }

    /* ========================================
   72. Breakpoints للوحة الفلاتر
   ======================================== */

    /* 📱 هاتف (≤ 599px) */
    @media (max-width: 599px) {
        .filter-panel-content {
            padding: 12px;
        }

        .expansion-panel-title {
            gap: 8px;
        }

        .panel-title-text {
            font-size: 0.95rem;
        }

        .panel-chip {
            font-size: 0.7rem;
            height: 20px;
        }

        .filter-section-header {
            margin-bottom: 8px;
        }

        .filter-section-title {
            font-size: 0.85rem;
        }

        .action-button {
            font-size: 0.875rem;
            padding: 8px 12px;
        }

        .employees-filter-field .mud-input-root input,
        .employees-filter-field .mud-select-input {
            font-size: 16px !important;
            /* منع التكبير التلقائي في iOS */
        }
    }

    /* 📱 تابلت (600px - 1023px) */
    @media (min-width: 600px) and (max-width: 1023px) {
        .filter-panel-content {
            padding: 16px;
        }

        .action-button {
            font-size: 0.9375rem;
        }
    }

    /* 💻 كمبيوتر (≥ 1024px) */
    @media (min-width: 1024px) {
        .filter-panel-content {
            padding: 20px;
        }

        .action-button {
            font-size: 1rem;
        }
    }

    /* ========================================
   73. تحسين دعم RTL للوحة الفلاتر
   ======================================== */

    [dir="rtl"] .expansion-panel-title {
        flex-direction: row-reverse;
    }

    [dir="rtl"] .filter-section-header {
        flex-direction: row-reverse;
    }

    [dir="rtl"] .panel-chip {
        margin-right: 0;
        margin-left: auto;
    }

    /* ========================================
   74. تحسين الألوان والتباين للوحة الفلاتر
   ======================================== */

    .employees-filter-panel .mud-expand-panel-header {
        background-color: var(--mud-palette-background-grey);
    }

    .employees-filter-panel .mud-expand-panel-header:hover {
        background-color: var(--mud-palette-action-default-hover);
    }

    .filter-panel-content {
        border-top: 1px solid var(--mud-palette-divider);
    }

    /* ========================================
   75. تحسينات تصميم صفحة الموظفين الجديدة
   ======================================== */

    .fab-container {
        position: fixed;
        bottom: 24px;
        left: 24px;
        z-index: 1000;
    }

    [dir="rtl"] .fab-container {
        left: 24px;
        right: auto;
    }

    .search-field-custom .mud-input-control-input-container {
        background-color: transparent;
    }

    .search-field-custom .mud-input {
        font-size: 1rem;
    }

    .mud-chip-label {
        padding-left: 12px;
        padding-right: 12px;
    }