/* =================================== */
/* MOBILE FORM FIXES - Prevents Overlap */
/* =================================== */

/* Critical fixes for form elements that overlap on mobile */

@media (max-width: 768px) {
    /* Force all columns to stack vertically */
    .row {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* All column classes become full width */
    [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-bottom: 1rem !important;
    }
    
    /* Form controls - Reduced padding to prevent overlap */
    .form-control,
    .form-select,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="date"],
    input[type="time"],
    input[type="search"],
    textarea {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 10px 12px !important;
        margin: 0 !important;
        min-height: 44px !important;
        font-size: 16px !important;
    }
    
    /* Labels */
    .form-label {
        display: block !important;
        width: 100% !important;
        margin-bottom: 0.5rem !important;
        margin-top: 0 !important;
    }
    
    /* Form groups */
    .form-group,
    .mb-2,
    .mb-3,
    .mb-4 {
        margin-bottom: 1rem !important;
        width: 100% !important;
    }
    
    /* Input groups */
    .input-group {
        flex-direction: column !important;
        width: 100% !important;
    }
    
    .input-group-text {
        width: 100% !important;
        border-radius: 8px 8px 0 0 !important;
        margin-bottom: 0 !important;
    }
    
    .input-group .form-control {
        width: 100% !important;
        border-radius: 0 0 8px 8px !important;
        margin-top: -1px !important;
    }
    
    /* Prevent any element from overflowing */
    .container,
    .container-fluid,
    .card,
    .card-body,
    .modal-body {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}