/*
 * BadgeID Filament Mobile Responsive Overrides
 *
 * Breakpoints:
 *  - 375px: iPhone SE / small phones
 *  - 640px: sm breakpoint (large phones)
 *  - 768px: md breakpoint (tablets)
 *  - 1024px: lg breakpoint (desktop)
 */

/* ============================================================
   1. Responsive Tables — Horizontal Scroll on Mobile
   ============================================================ */

/* Wrap Filament table containers to allow horizontal scrolling */
.fi-ta-ctn {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 640px) {
    /* Ensure table doesn't break layout */
    .fi-ta-ctn table {
        min-width: 600px;
        width: max-content;
    }

    /* Reduce padding on mobile table cells */
    .fi-ta-ctn td,
    .fi-ta-ctn th {
        padding: 0.5rem 0.375rem !important;
        font-size: 0.8125rem;
        white-space: nowrap;
    }

    /* Hide less-important columns on very small screens */
    .fi-ta-ctn .fi-ta-col.hidden-xs {
        display: none;
    }
}

/* ============================================================
   2. Touch-Friendly Action Buttons (min 44px tap targets)
   ============================================================ */

@media (max-width: 768px) {
    /* Table row actions */
    .fi-ta-actions-cell .fi-btn {
        min-height: 44px;
        min-width: 44px;
        padding: 0.5rem;
    }

    /* Bulk actions */
    .fi-ta-bulk-actions .fi-btn {
        min-height: 44px;
        min-width: 44px;
    }

    /* Header actions */
    .fi-header-actions .fi-btn {
        min-height: 44px;
        padding: 0.5rem 1rem;
    }

    /* Icon buttons need larger tap area */
    .fi-icon-btn {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Pagination buttons */
    .fi-pagination .fi-pagination-item {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* ============================================================
   3. Collapsible Sidebar Improvements
   ============================================================ */

@media (max-width: 768px) {
    /* Full-width sidebar overlay on mobile */
    .fi-sidebar {
        position: fixed !important;
        z-index: 50;
        height: 100vh;
        transition: transform 0.3s ease;
    }

    /* Ensure main content takes full width */
    .fi-main {
        width: 100% !important;
        margin-left: 0 !important;
    }

    /* Sidebar items should have adequate touch targets */
    .fi-sidebar-item {
        min-height: 44px;
        padding: 0.625rem 0.75rem;
    }

    /* Brand area spacing */
    .fi-sidebar-brand {
        padding: 0.75rem;
    }
}

/* ============================================================
   4. Mobile-Optimized Forms & Modals
   ============================================================ */

@media (max-width: 640px) {
    /* Full-width form fields */
    .fi-fo-field,
    .fi-fo-component {
        width: 100%;
    }

    /* Stacked grid on mobile */
    .fi-fo-grid {
        grid-template-columns: 1fr !important;
    }

    /* Modal should be nearly full-width */
    .fi-modal {
        margin: 0.5rem;
        max-height: calc(100vh - 1rem);
    }

    .fi-modal-ctn {
        max-width: calc(100vw - 1rem) !important;
        margin: 0.5rem auto;
    }

    /* Reduce modal header padding */
    .fi-modal-header {
        padding: 0.75rem;
    }

    .fi-modal-body {
        padding: 0.75rem;
    }

    /* Select dropdowns should be usable */
    .fi-input-wrp {
        min-height: 44px;
    }

    .fi-select {
        min-height: 44px;
    }
}

/* ============================================================
   5. Widget Grid Responsive
   ============================================================ */

@media (max-width: 640px) {
    /* Single column widgets on mobile */
    .fi-widgets-grid {
        grid-template-columns: 1fr !important;
    }

    /* Stats widgets */
    .fi-ww-stats-overview-ctn {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================================
   6. Header & Breadcrumb Responsive
   ============================================================ */

@media (max-width: 640px) {
    .fi-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .fi-header-heading {
        font-size: 1.25rem;
    }

    .fi-breadcrumbs {
        flex-wrap: wrap;
        font-size: 0.8125rem;
    }

    /* Global search full width */
    .fi-global-search {
        width: 100%;
    }

    .fi-global-search input {
        min-height: 44px;
    }
}

/* ============================================================
   7. Resource Page Responsive Adjustments
   ============================================================ */

@media (max-width: 768px) {
    /* Resource relation manager tabs */
    .fi-relation-manager .fi-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* View page sections stack */
    .fi-section-grid {
        grid-template-columns: 1fr !important;
    }

    /* Infolist entries */
    .fi-infolist-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================================
   8. Print & Accessibility Helpers
   ============================================================ */

/* Focus visible for keyboard navigation */
@media (max-width: 768px) {
    .fi-btn:focus-visible,
    .fi-icon-btn:focus-visible,
    .fi-select:focus-visible,
    .fi-input:focus-visible {
        outline: 2px solid #3b82f6;
        outline-offset: 2px;
    }
}