/* CLEAN MOBILE CSS - NO CONFLICTS */
@media (max-width: 768px) {
    /* Basic responsive layout only */
    .col-12.col-sm-6.col-lg-4 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        margin-bottom: 1rem !important;
    }
    
    .report-card {
        margin-bottom: 1rem !important;
        clear: both !important;
        display: block !important;
    }
    
    /* Fix report type card content truncation on mobile */
    .report-type-card {
        height: auto !important; /* Allow cards to expand */
        min-height: 160px !important; /* Minimum height for consistency */
    }
    
    .report-type-card .card-body {
        padding: 20px !important;
        height: auto !important;
    }
    
    .report-type-card h4,
    .report-type-card h5 {
        font-size: 1.1rem !important;
        line-height: 1.3 !important;
        margin-bottom: 12px !important;
        white-space: normal !important;
        word-wrap: break-word !important;
    }
    
    .report-type-card p {
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
        margin-bottom: 0 !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow: visible !important;
        text-overflow: initial !important;
        display: block !important;
        -webkit-line-clamp: initial !important;
        -webkit-box-orient: initial !important;
    }
    
    /* Report types grid mobile optimization */
    .report-types-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    
    .report-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    
    /* Form elements - minimal mobile-friendly styling */
    input,
    select,
    textarea {
        font-size: 16px !important; /* Prevent iOS zoom */
        min-height: 48px !important; /* Touch target size */
    }
    
    /* Ensure native select appearance */
    select {
        -webkit-appearance: menulist !important;
        appearance: menulist !important;
    }
    
    /* Button touch targets */
    button,
    .btn {
        min-height: 44px !important;
        font-size: 16px !important;
    }
}