/* Mobile-specific styles */

/* Ensure proper touch targets */
@media (max-width: 768px) {
    /* Minimum touch target size */
    button, a, input, select, textarea {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Improve table readability on mobile */
    .mobile-table-card {
        background: white;
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        margin-bottom: 1rem;
        padding: 1rem;
    }
    
    /* Better spacing for mobile forms */
    .mobile-form-group {
        margin-bottom: 1.5rem;
    }
    
    .mobile-form-group label {
        display: block;
        margin-bottom: 0.5rem;
        font-weight: 500;
        color: #374151;
    }
    
    .mobile-form-group input,
    .mobile-form-group select,
    .mobile-form-group textarea {
        width: 100%;
        padding: 0.75rem;
        border: 1px solid #d1d5db;
        border-radius: 0.375rem;
        font-size: 1rem;
    }
    
    /* Mobile-friendly buttons */
    .mobile-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.75rem 1.5rem;
        border-radius: 0.375rem;
        font-weight: 500;
        text-decoration: none;
        transition: all 0.2s;
        min-height: 44px;
    }
    
    .mobile-btn-primary {
        background-color: #3b82f6;
        color: white;
        border: 1px solid #3b82f6;
    }
    
    .mobile-btn-primary:hover {
        background-color: #2563eb;
        border-color: #2563eb;
    }
    
    .mobile-btn-secondary {
        background-color: #6b7280;
        color: white;
        border: 1px solid #6b7280;
    }
    
    .mobile-btn-secondary:hover {
        background-color: #4b5563;
        border-color: #4b5563;
    }
    
    /* Mobile navigation improvements */
    .mobile-nav-item {
        display: block;
        padding: 0.75rem 1rem;
        color: #374151;
        text-decoration: none;
        border-radius: 0.375rem;
        margin-bottom: 0.25rem;
    }
    
    .mobile-nav-item:hover {
        background-color: #f3f4f6;
        color: #1f2937;
    }
    
    .mobile-nav-item.active {
        background-color: #dbeafe;
        color: #1e40af;
    }
    
    /* Mobile card improvements */
    .mobile-card {
        background: white;
        border-radius: 0.5rem;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        padding: 1rem;
        margin-bottom: 1rem;
    }
    
    /* Mobile grid improvements */
    .mobile-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    @media (min-width: 640px) {
        .mobile-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }
    
    @media (min-width: 1024px) {
        .mobile-grid {
            grid-template-columns: repeat(3, 1fr);
        }
    }
    
    /* Mobile modal improvements */
    .mobile-modal {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 50;
        padding: 1rem;
    }
    
    .mobile-modal-content {
        background: white;
        border-radius: 0.5rem;
        padding: 1.5rem;
        max-width: 90vw;
        max-height: 90vh;
        overflow-y: auto;
    }
    
    /* Mobile search improvements */
    .mobile-search {
        position: relative;
        margin-bottom: 1rem;
    }
    
    .mobile-search input {
        width: 100%;
        padding: 0.75rem 1rem;
        padding-left: 2.5rem;
        border: 1px solid #d1d5db;
        border-radius: 0.375rem;
        font-size: 1rem;
    }
    
    .mobile-search-icon {
        position: absolute;
        left: 0.75rem;
        top: 50%;
        transform: translateY(-50%);
        color: #6b7280;
    }
    
    /* Mobile filter improvements */
    .mobile-filters {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-bottom: 1rem;
    }
    
    .mobile-filter-chip {
        display: inline-flex;
        align-items: center;
        padding: 0.25rem 0.75rem;
        background-color: #f3f4f6;
        border-radius: 9999px;
        font-size: 0.875rem;
        color: #374151;
    }
    
    .mobile-filter-chip.active {
        background-color: #3b82f6;
        color: white;
    }
}

/* Tablet improvements */
@media (min-width: 768px) and (max-width: 1023px) {
    .tablet-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

/* Ensure proper spacing on all devices */
@media (max-width: 640px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    .mobile-p-4 {
        padding: 1rem;
    }
    
    .mobile-p-6 {
        padding: 1.5rem;
    }
    
    .mobile-mb-4 {
        margin-bottom: 1rem;
    }
    
    .mobile-mb-6 {
        margin-bottom: 1.5rem;
    }
}