/* Mobile Fix CSS - Override everything */
@media (max-width: 576px) {
    .container {
        padding-left: 8px !important;
        padding-right: 8px !important;
        max-width: 100% !important;
    }
    
    .card {
        margin: 0 !important;
        border-radius: 8px !important;
    }
    
    /* Step Indicators - Horizontal Layout */
    .step-container {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-around !important;
        align-items: center !important;
        gap: 2px !important;
        padding: 6px 4px !important;
        flex-wrap: nowrap !important;
        background: #f8f9fa !important;
        border-radius: 8px !important;
        margin-bottom: 15px !important;
    }
    
    .step-indicator {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.6rem !important;
        padding: 4px 2px !important;
        flex: 1 !important;
        text-align: center !important;
        white-space: nowrap !important;
        border-radius: 4px !important;
    }
    
    .step-indicator i {
        font-size: 0.85rem !important;
        margin-right: 2px !important;
        margin-bottom: 0 !important;
    }
    
    .step-label {
        font-size: 0.55rem !important;
        line-height: 1 !important;
        display: inline !important;
        font-weight: 500 !important;
    }
    
    /* Buttons - Single Line */
    .d-flex.gap-3 {
        gap: 6px !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
    }
    
    .btn {
        font-size: 0.8rem !important;
        padding: 8px 10px !important;
        margin: 0 !important;
        flex: 1 !important;
        min-width: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        border-radius: 6px !important;
    }
    
    .btn-outline-secondary {
        background: white !important;
        border: 1.5px solid #6c757d !important;
        color: #6c757d !important;
    }
    
    .btn-primary {
        background: #007bff !important;
        border: 1.5px solid #007bff !important;
        color: white !important;
    }
    
    /* Form Elements */
    .card-header h2 {
        font-size: 1.05rem !important;
        line-height: 1.2 !important;
        margin-bottom: 6px !important;
    }
    
    .card-header p {
        font-size: 0.75rem !important;
        margin-bottom: 8px !important;
        line-height: 1.3 !important;
    }
    
    .form-control, .form-select {
        font-size: 13px !important;
        padding: 7px 10px !important;
        border-radius: 6px !important;
    }
    
    .form-label {
        font-size: 0.8rem !important;
        margin-bottom: 4px !important;
        font-weight: 500 !important;
    }
    
    .form-check-label {
        font-size: 0.8rem !important;
        line-height: 1.3 !important;
    }
    
    /* Card Body Padding */
    .card-body {
        padding: 12px !important;
    }
    
    .card-header {
        padding: 10px 12px !important;
    }
    
    /* Auto Save Status */
    .auto-save-status {
        font-size: 0.7rem !important;
        padding: 4px 8px !important;
        border-radius: 4px !important;
    }
    
    /* Navigation Background */
    .bg-section {
        padding: 8px !important;
        margin: 0 -8px !important;
        background: #f8f9fa !important;
        border-radius: 8px !important;
    }
}