/* PWA Mobile Optimization CSS */

/* 📶 1. Better Table Scroll */
.table-responsive {
    -webkit-overflow-scrolling: touch;
    border-radius: 0.375rem;
}

/* 📱 2. Small Screen Padding & Typography */
@media (max-width: 576px) {
    .card-body {
        padding: 1rem !important;
    }
    
    .card-title {
        font-size: 1.1rem !important;
    }

    h3 {
        font-size: 1.5rem !important;
    }

    /* Hide less critical columns on mobile for major tables */
    .table th:nth-child(3), 
    .table td:nth-child(3),
    .table th:nth-child(4), 
    .table td:nth-child(4) {
        display: none !important;
    }

    /* User Avatar size reduction for mobile navbar */
    .navbar-dropdown .avatar {
        width: 35px !important;
        height: 35px !important;
    }
}

/* 🖐️ 3. Touch Targets */
.btn-sm {
    padding: 0.5rem 1rem !important;
    font-size: 0.85rem !important;
    min-height: 40px;
}

.dropdown-item {
    padding: 0.75rem 1.5rem !important;
}

/* 🎯 4. Floating Action Button feel for mobile primary actions */
@media (max-width: 768px) {
    .btn-success[data-bs-target="#addBetModal"] {
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 1000;
        border-radius: 50px;
        padding: 12px 24px !important;
        box-shadow: 0 4px 12px rgba(40, 199, 111, 0.4);
    }
}