/* =========================================
   1. MOBILE (Phones < 768px)
   - Drawer behavior (Hidden by default)
   ========================================= */
@media (max-width: 767px) {
    .fi-sidebar {
        z-index: 50 !important;
        width: 16rem !important;
        right: 0 !important;
        left: auto !important;
        background-color: #ffffff !important;
        border-left: 1px solid #e5e7eb !important;
        border-right: none !important;

        /* Hidden state */
        transform: translateX(100%) !important;
        transition: transform 0.3s ease-in-out !important;
    }

    /* Open State */
    .fi-sidebar-open {
        transform: translateX(0) !important;
    }

    /* Overlay */
    .fi-sidebar-close-overlay {
        z-index: 40 !important;
        background-color: rgba(0, 0, 0, 0.5) !important;
    }
}

/* =========================================
   2. TABLET & DESKTOP (iPad >= 768px)
   - Persistent Sidebar (Always Visible)
   ========================================= */
@media (min-width: 768px) {
    .fi-sidebar {
        display: block !important;
        visibility: visible !important;
        transform: none !important;
        /* No sliding */
        width: 16rem !important;

        /* Force RTL Position */
        right: 0 !important;
        left: auto !important;

        /* Styling */
        background-color: #ffffff !important;
        border-left: 1px solid #e5e7eb !important;
        z-index: 30 !important;

        /* Ensure scrolling */
        height: 100vh !important;
        bottom: 0 !important;
        overflow-y: auto !important;
    }

    /* Push Main Content */
    /* Push Main Content - DISABLED: Let Filament Native RTL handle it */
    /* .fi-main {
        margin-right: 16rem !important;
        margin-left: 0 !important;
    } */

    /* Force RTL for the whole layout if possible, or just main areas */
    /* .fi-layout, .fi-body { direction: rtl !important; } */

    /* Force Text & Icons Visibility */
    .fi-sidebar-item-label,
    .fi-sidebar-header div {
        display: block !important;
        opacity: 1 !important;
        color: #374151 !important;
    }

    .fi-sidebar-item-icon {
        color: #6b7280 !important;
    }

    /* Active Item Styling */
    .fi-sidebar-item-active {
        background-color: #f3f4f6 !important;
    }

    .fi-sidebar-item-active .fi-sidebar-item-icon,
    .fi-sidebar-item-active .fi-sidebar-item-label {
        color: #4f46e5 !important;
        /* Indigo-600 */
    }

    /* Hide the mobile overlay if it appears */
    .fi-sidebar-close-overlay {
        display: none !important;
    }

    /* Ensure header/nav doesn't overlap weirdly */
    .fi-topbar {
        /* Ensure it sits nicely with content if needed */
    }
}