/* ====================================================
   📱 MOBILE-FIRST NATIVE APP ENHANCEMENTS
   ==================================================== */

/* Native App Screen Transitions */
.screen { display: none; }
.screen.active { 
    display: block; 
    animation: fadeSlideUp 0.3s ease-out; 
}

@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Hide Bottom Nav on Desktop */
@media (min-width: 769px) {
    .mobile-bottom-nav { display: none !important; }
}

@media (max-width: 768px) {
    /* Hide Desktop Sidebar */
    .sidebar { display: none !important; }
    
    /* Main Content Adjustments */
    .main-content {
        padding: 16px !important;
        padding-bottom: 100px !important; /* Avoid overlap with bottom nav */
        margin-left: 0 !important;
    }
    
    /* Header Fixes */
    .header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 16px !important;
        border-radius: 16px;
    }
    
    .header > div:last-child {
        width: 100%;
        justify-content: space-between;
        gap: 8px !important;
    }
    
    .user-profile { gap: 10px; }
    .user-profile > div:first-child { display: none; } /* Hide User Name text to save space */
    .user-profile button { 
        padding: 8px 12px !important; 
        font-size: 13px !important; 
        margin-left: auto;
    }
    
    /* Convert Grid Layouts to 1 Column */
    .dashboard-grid, .form-grid, div[style*="grid-template-columns: 1fr 1fr;"] {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }
    
    /* Quick Actions Grid (Keep 2 columns but space better) */
    .actions-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px;
    }
    
    /* Touch-Friendly Inputs (Prevents iOS Auto-Zoom) */
    .form-control {
        font-size: 16px !important; 
        padding: 14px 16px !important;
        border-radius: 12px !important;
    }
    
    /* Sticky Mobile Bottom Navigation */
    .mobile-bottom-nav {
        position: fixed;
        bottom: 0; left: 0; width: 100%;
        background: rgba(15, 23, 42, 0.95);
        backdrop-filter: blur(15px);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        z-index: 1000;
        box-shadow: 0 -10px 30px rgba(0,0,0,0.3);
    }
    
    .mobile-nav-inner {
        display: flex;
        justify-content: space-around;
        padding: 12px 8px;
        padding-bottom: env(safe-area-inset-bottom, 12px);
    }
    
    .mobile-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        color: rgba(255, 255, 255, 0.4);
        font-size: 11px;
        font-weight: 500;
        cursor: pointer;
        transition: 0.2s ease;
    }
    
    .mobile-nav-item.active { color: #00C9A7; }
    .mobile-nav-item i { font-size: 22px; }
    
    /* Make Admin Tabs Swipeable */
    div[style*="overflow-x: auto"] {
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    div[style*="overflow-x: auto"]::-webkit-scrollbar { display: none; }
}