/* =====================================================
   mobile.css — أنماط الهاتف فقط (أقل من 600px)
   ===================================================== */

@media (max-width: 599.98px) {

    /* --- إخفاء AppBar الجانبي على الهاتف --- */
    .mud-appbar {
        display: none !important;
    }

    /* --- مساحة أسفل المحتوى لعدم تغطيته بالشريط السفلي --- */
    .mobile-content {
        padding-bottom: 64px !important;
    }

    /* --- الشريط السفلي --- */
    .mobile-bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        border-radius: 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .mobile-bottom-nav .mud-paper {
        border-radius: 0;
    }

    .mobile-bottom-nav__inner {
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: 56px;
        padding: 0 4px;
    }

    .mobile-bottom-nav__item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex: 1;
        text-decoration: none;
        color: inherit;
        font-size: 10px;
        padding: 4px 0;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
        gap: 2px;
        min-height: 48px;
    }

    .mobile-bottom-nav__item:hover {
        text-decoration: none;
    }

    .mobile-bottom-nav__item.active {
        color: var(--mud-palette-primary);
    }

    .mobile-bottom-nav__item .mud-icon-root {
        font-size: 20px;
    }

    /* --- الزر المركزي FAB --- */
    .mobile-bottom-nav__item--center {
        flex: 0 0 auto;
        padding: 0;
    }

    .mobile-bottom-nav__fab {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: var(--mud-palette-primary);
        color: var(--mud-palette-primary-text);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: -22px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        transition: transform 0.15s ease;
    }

    .mobile-bottom-nav__fab:active {
        transform: scale(0.92);
    }

    .mobile-bottom-nav__item--center span {
        display: none;
    }

    /* --- منع zoom في iOS Safari على حقول الإدخال --- */
    .mud-input input,
    .mud-input select,
    .mud-input textarea,
    .mud-select-input input {
        font-size: 16px !important;
    }

    /* --- تحسين حجم الخطوط على الهاتف --- */
    .mud-table {
        font-size: 13px;
    }

    .mud-table-cell {
        padding: 6px 8px !important;
    }

    /* --- أزرار إجراءات الحوارات (FormActions) ---
       تصغير مقاس الأزرار على الهاتف حتى يتّسع الصف في سطر واحد بدل ثلاثة
       أسطر رأسية، فينخفض ارتفاع الحوار قرابة 90px.
       المحدِّدات أعل تخصيصاً من MudBlazor: padding 6px 16px وخط 14px وأيقونة 24px. */
    .mud-dialog-actions .fa-actions .mud-button {
        padding: 5px 12px;
        font-size: 13px;
        min-width: 64px; /*أرضية اللمس محفوظة*/
    }

    /* .mud-button-outlined يعرّف حشواً خاصاً به — لا بد من تجاوزه صراحةً */
    .mud-dialog-actions .fa-actions .mud-button-outlined {
        padding: 5px 12px;
    }

    /* .mud-icon-size-medium = 1.5rem (24px) — ينزل إلى 16px، والعرض والارتفاع
       يتبعانها تلقائياً لأن .mud-icon-root يستخدم 1em */
    .mud-dialog-actions .fa-actions .mud-button .mud-icon-root {
        font-size: 16px !important;
    }

    .mud-dialog-actions .fa-actions .mud-button-icon-start {
        margin-inline-start: -4px;
        margin-inline-end: 4px; /*بدل 8px*/
    }

    /* مؤشّر الانتظار داخل الزر أثناء الحفظ */
    .mud-dialog-actions .fa-actions .mud-progress-circular {
        width: 14px;
        height: 14px;
        margin-inline-start: 4px !important;
    }
}