/* Mobile Image Overflow Prevention System */

/* Universal image responsiveness for all images */
img {
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
}

/* Prevent image overflow in containers */
.container, .container-fluid, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl {
    overflow-x: hidden !important;
}

/* Mobile-specific image fixes */
@media (max-width: 768px) {
    /* Force all images to be responsive on mobile */
    img, 
    .img-fluid,
    .img-responsive,
    img[class*="rounded"],
    img[class*="border"],
    img[style*="width"],
    img[style*="height"] {
        max-width: 100% !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
        box-sizing: border-box !important;
    }
    
    /* Newsfeed header profile images - maintain 40px sizing */
    .user-avatar-header {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        max-width: 40px !important;
        max-height: 40px !important;
        border-radius: 50% !important;
        object-fit: cover !important;
    }
    
    .user-avatar-placeholder-header {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        max-width: 40px !important;
        max-height: 40px !important;
        border-radius: 50% !important;
    }
    
    /* Post profile images - maintain exact 40px sizing */
    .user-avatar,
    .rounded-circle.me-2,
    .avatar,
    .profile-image {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        max-width: 40px !important;
        max-height: 40px !important;
        border-radius: 50% !important;
        object-fit: cover !important;
    }
    
    /* User avatar placeholder sizing */
    .user-avatar-placeholder {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        max-width: 40px !important;
        max-height: 40px !important;
        border-radius: 50% !important;
    }
    
    /* Business Hub newsfeed images */
    .newsfeed-post img,
    .newsfeed-content img,
    .modern-newsfeed-container img {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        border-radius: 12px !important;
        object-fit: cover !important;
        margin: 8px 0 !important;
    }
    
    /* Modal images */
    .modal img,
    .modal-body img,
    .modal-content img {
        max-width: 100% !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
    }
    
    /* Card images */
    .card img,
    .card-img-top,
    .card-img-bottom,
    .provider-card img {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
    }
    
    /* Gallery and grid images */
    .gallery img,
    .image-grid img,
    .grid-item img {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
    }
    
    /* Prevent horizontal scrolling from images */
    body, html {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    
    /* Fix image containers */
    .image-container,
    .img-container,
    .photo-container,
    [class*="image"],
    [class*="photo"] {
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
    
    /* Ensure text doesn't wrap around overflowing images */
    .text-content,
    .content-area,
    p, div {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Fix inline styles that might cause overflow */
    *[style*="width: "] {
        max-width: 100% !important;
    }
    
    /* Prevent flexbox items from overflowing */
    .d-flex,
    .flex-row,
    .flex-column {
        overflow-x: hidden !important;
        flex-wrap: wrap !important;
    }
    
    /* Fix Bootstrap grid overflow */
    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
    }
    
    .col, [class*="col-"] {
        padding-left: 8px !important;
        padding-right: 8px !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* Ultra-small mobile devices (≤480px) */
@media (max-width: 480px) {
    img {
        max-width: calc(100vw - 20px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        display: block !important;
    }
    
    .container-fluid {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    /* Ultra-compact profile images */
    .rounded-circle,
    .avatar,
    .profile-image {
        max-width: 60px !important;
        max-height: 60px !important;
    }
}

/* Landscape mobile orientation fixes */
@media (max-width: 768px) and (orientation: landscape) {
    img {
        max-height: 40vh !important;
        object-fit: contain !important;
    }
    
    .newsfeed-post img {
        max-height: 30vh !important;
        object-fit: cover !important;
    }
}

/* Fix for images with explicit dimensions */
img[width], img[height] {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
}

/* Prevent canvas and video overflow */
canvas, video {
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
}

/* Image editor and photo manipulation tools */
#imageCanvasContainer,
#modernImageCanvas,
.image-editor-container {
    max-width: 100% !important;
    overflow: hidden !important;
}

@media (max-width: 768px) {
    #imageCanvasContainer,
    #modernImageCanvas,
    .image-editor-container {
        width: 100% !important;
        height: auto !important;
        max-height: 60vh !important;
    }
}