/* ==============================================================
   FILAMENT ADMIN: MOBILE APP UI OVERRIDES
   ============================================================== */

/* Base hide for desktop */
.admin-mobile-bottom-nav,
.admin-mobile-fab {
    display: none;
}

@media (max-width: 768px) {
    /* 1. Reset Body & Scrolling for Native Feel */
    body {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: none;
        padding-bottom: 70px !important; /* Space for bottom nav */
    }

    /* 2. Hide Top App Bar Search & Clutter */
    .fi-topbar {
        border-bottom: none !important;
        background: #ffffff !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    
    /* Center the title if possible, hide search on mobile */
    .fi-topbar .fi-global-search {
        display: none !important;
    }

    /* 3. Transform Data Tables into Cards */
    .fi-ta-content {
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }
    .fi-ta-table {
        background-color: transparent !important;
    }
    .fi-ta-row {
        background: #ffffff !important;
        border-radius: 12px !important;
        margin-bottom: 12px !important;
        display: flex !important;
        flex-direction: column !important;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important;
        border: 1px solid #E2E8F0 !important;
        padding: 8px !important;
    }
    .fi-ta-cell {
        display: block !important;
        border: none !important;
        padding: 4px 8px !important;
    }
    .fi-ta-header-cell {
        display: none !important; /* Hide table headers on mobile */
    }

    /* 4. Floating Action Button (FAB) */
    .admin-mobile-fab {
        display: flex;
        position: fixed;
        bottom: 80px;
        right: 20px;
        width: 56px;
        height: 56px;
        background: #1769D2;
        color: #ffffff;
        border-radius: 50%;
        box-shadow: 0 4px 12px rgba(23, 105, 210, 0.4);
        align-items: center;
        justify-content: center;
        z-index: 50;
        transition: transform 0.2s ease;
    }
    .admin-mobile-fab:active {
        transform: scale(0.95);
    }
    .admin-mobile-fab a {
        display: flex;
        width: 100%;
        height: 100%;
        align-items: center;
        justify-content: center;
        color: inherit;
    }
    .admin-mobile-fab svg {
        width: 28px;
        height: 28px;
    }

    /* 5. Bottom Navigation Bar */
    .admin-mobile-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 65px;
        background: #ffffff;
        border-top: 1px solid #E2E8F0;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.03);
        z-index: 50;
        justify-content: space-around;
        align-items: center;
        padding-bottom: env(safe-area-inset-bottom);
    }
    .admin-mobile-bottom-nav .nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        color: #64748B;
        text-decoration: none;
        font-size: 0.65rem;
        font-weight: 500;
        gap: 4px;
        transition: color 0.2s ease;
    }
    .admin-mobile-bottom-nav .nav-item svg {
        width: 22px;
        height: 22px;
    }
    .admin-mobile-bottom-nav .nav-item.active {
        color: #1769D2;
    }
    .admin-mobile-bottom-nav .nav-item.active svg {
        fill: rgba(23, 105, 210, 0.15); /* Soft fill for active icon */
    }
}