/* LitmuSuite Admin — Mobile Optimization */

/* Mobile: stack sidebar overlay, maximize content */
@media (max-width: 768px) {
    /* Tighter padding on mobile */
    .fi-page-header-heading { font-size: 1.25rem !important; }
    .fi-header-actions { flex-wrap: wrap; gap: 0.5rem; }
    
    /* Cards and sections: less padding */
    .fi-section-content { padding: 0.75rem !important; }
    .fi-fo-field-wrp { margin-bottom: 0.5rem; }
    
    /* Tables: more compact on mobile */
    .fi-ta-cell { padding: 0.5rem 0.375rem !important; font-size: 0.8125rem; }
    .fi-ta-header-cell { padding: 0.5rem 0.375rem !important; font-size: 0.75rem; }
    
    /* Action buttons: full width on mobile */
    .fi-btn { font-size: 0.8125rem; padding: 0.5rem 0.75rem; }
    
    /* Modals: full width on mobile */
    .fi-modal-window { max-width: 100% !important; margin: 0.5rem !important; }
    
    /* Stats overview: single column */
    .fi-wi-stats-overview-stats-ctn { grid-template-columns: 1fr !important; }
    
    /* Global search: full width */
    .fi-global-search-field { max-width: 100% !important; }
    
    /* Navigation group labels: smaller */
    .fi-sidebar-group-label { font-size: 0.6875rem; }
    
    /* Tabs: scrollable on mobile */
    .fi-tabs-ctn { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .fi-tabs { flex-wrap: nowrap; }
    .fi-tab { white-space: nowrap; flex-shrink: 0; font-size: 0.8125rem; }
    
    /* Table filters: full width */
    .fi-ta-filters { flex-direction: column; }
    
    /* Infolist entries: full width */
    .fi-in-entry-wrp { grid-column: span 1 / span 1 !important; }
    
    /* Brand logo: smaller on mobile */
    .fi-logo { transform: scale(0.85); transform-origin: left center; }
    
    /* Notification badge */
    .fi-topbar-database-notifications-btn { padding: 0.25rem; }
}

/* Small phone optimization */
@media (max-width: 480px) {
    .fi-page-header-heading { font-size: 1.1rem !important; }
    .fi-ta-cell { padding: 0.375rem 0.25rem !important; font-size: 0.75rem; }
    .fi-btn { font-size: 0.75rem; padding: 0.375rem 0.5rem; }
    .fi-section-content { padding: 0.5rem !important; }
}

/* Touch-friendly targets */
@media (pointer: coarse) {
    /* Ensure minimum 44px touch targets */
    .fi-btn, .fi-dropdown-trigger, .fi-ta-row-checkbox label,
    .fi-sidebar-item-button, .fi-breadcrumbs-item a {
        min-height: 2.75rem;
        display: inline-flex;
        align-items: center;
    }
    
    /* Larger checkbox/toggle touch targets */
    .fi-fo-checkbox label, .fi-fo-toggle label {
        padding: 0.5rem 0;
    }
    
    /* Table rows: more breathing room */
    .fi-ta-row { min-height: 3rem; }
}


/* Mission Control Mobile Optimizations */
@media (max-width: 768px) {
    /* Responsive stats grid: 2 columns on mobile, 3 on tablet, 6 on desktop */
    .grid.grid-cols-2.sm\:grid-cols-3.lg\:grid-cols-6 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }
    
    /* Stat cards get full 44px minimum height on mobile for touch */
    .grid.grid-cols-2.sm\:grid-cols-3.lg\:grid-cols-6 > a {
        min-height: 44px;
    }
    
    /* Top brands and provisions: stack to single column */
    .grid.grid-cols-1.lg\:grid-cols-2 {
        grid-template-columns: 1fr !important;
    }
    
    /* Chart containers: reduce height on mobile */
    .fi-section canvas {
        max-height: 180px !important;
    }
    
    /* Quick actions: ensure 44px minimum touch targets */
    .flex.flex-wrap.gap-2 > a {
        min-height: 44px;
        padding: 0.5rem 0.75rem;
    }
    
    /* Alerts section: full width */
    .fi-section {
        margin: 0;
        padding: 1rem;
    }
    
    /* Remove excess padding from list items on mobile */
    .flex.items-center.gap-3.px-3.py-2 {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }
}

/* Extra small phones (< 480px) */
@media (max-width: 480px) {
    /* Single column stat cards */
    .grid.grid-cols-2.sm\:grid-cols-3.lg\:grid-cols-6 {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    
    /* Tighter quick actions on very small screens */
    .flex.flex-wrap.gap-2 > a {
        font-size: 0.75rem;
        padding: 0.375rem 0.5rem;
    }
}