/* ViewImages page styling to match legacy app */

/* Carousel container - replaces Bootstrap col-sm-8 col-md-6 offset-sm-2 offset-md-3 to avoid size jumps */
.carousel-container {
    width: 100%;
    max-width: 50%;
    margin: 0 auto;
    padding: 0; /* Remove all padding to eliminate white space on left/right */
}

@media (max-width: 991px) {
    .carousel-container {
        max-width: 66.666667%;
        padding: 0;
    }
}

@media (max-width: 575px) {
    .carousel-container {
        max-width: 100%;
        padding: 0;
    }
}

/* Support high zoom levels (WCAG 1.4.10 Reflow) */
@media (max-width: 1280px) {
    .carousel-container {
        max-width: 100%;
        padding: 0 10px; /* Small padding only for high zoom accessibility */
    }
}

/* Ultra-wide screen optimization - enforce strict layout */
@media (min-width: 1920px) {
    .carousel-container {
        max-width: 50%;
        padding: 0; /* Absolutely no padding on ultra-wide to prevent white space */
    }
    
    /* Ensure carousel controls stay positioned over the image */
    #PPCarousel .carousel-control-prev,
    #PPCarousel .carousel-control-next {
        position: absolute;
        z-index: 10;
    }
}

/* ibox content - remove all padding so carousel fills the entire area */
.carousel-container .ibox-content {
    padding: 0 !important; /* Force remove padding */
}

/* ibox title styling */
.carousel-container .ibox-title h2 {
    margin: 0;
    padding: 10px 0;
    font-size: 1.5rem;
}

/* Carousel container - remove all spacing so it fills ibox-content */
#divPPAttachments {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

/* Carousel positioning and sizing */
#PPCarousel {
    width: 100% !important;
    position: relative;
    margin: 0 !important;
    padding: 0 !important;
}

/* Carousel inner - contains slide animation */
#PPCarousel .carousel-inner {
    width: 100%;
    position: relative;
    overflow: hidden; /* Required for proper slide animation */
}

/* Carousel item - use flexbox to stack image and caption vertically */
#PPCarousel .carousel-item {
    width: 100%;
    position: relative;
    flex-direction: column;
    align-items: center;
}

/* Active item uses flexbox */
#PPCarousel .carousel-item.active {
    display: flex;
}

/* Transitioning items also need flex for proper layout during animation */
#PPCarousel .carousel-item-next,
#PPCarousel .carousel-item-prev {
    display: flex;
}

/* Constrain only the image height, not the entire carousel-item */
#PPCarousel .carousel-item img {
    max-height: calc(100vh - 350px);
    width: 100%;
    height: auto;
    object-fit: cover; /* Fill container width, may crop top/bottom */
    object-position: center center; /* Center the image content */
    margin: 0 auto;
    display: block;
    padding: 0; /* Ensure no padding on images */
    flex-shrink: 0; /* Don't shrink the image */
}

/* Override any Bootstrap or legacy img-responsive styles */
#PPCarousel .carousel-item img.img-responsive,
#PPCarousel .carousel-item img.d-block {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    padding: 0;
}

/* Ensure images reflow properly at high zoom levels (WCAG 1.4.10 Reflow) */
@media (max-width: 1280px) {
    #PPCarousel .carousel-item img {
        max-height: none; /* Allow images to scale naturally at high zoom */
        max-width: 100%;
        height: auto;
        object-fit: contain; /* At high zoom, use contain to show full image */
    }
}

/* Carousel controls - positioned over the image with proper contrast for accessibility */
#PPCarousel .carousel-control-prev,
#PPCarousel .carousel-control-next {
    position: absolute;
    width: 50px;
    height: 50px;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(118, 118, 118, 0.9); /* Semi-transparent gray, high opacity for contrast */
    border-radius: 50%;
    opacity: 1 !important; /* Override Bootstrap default opacity */
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    border: 2px solid rgba(255, 255, 255, 0.8); /* White border for visibility on any background */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); /* Strong shadow for depth and contrast */
    z-index: 10; /* Ensure controls are above the image */
}

#PPCarousel .carousel-control-prev {
    left: 15px; /* Position over the image, near left edge */
}

#PPCarousel .carousel-control-next {
    right: 15px; /* Position over the image, near right edge */
}

/* Hover state for controls */
#PPCarousel .carousel-control-prev:hover,
#PPCarousel .carousel-control-next:hover {
    background-color: rgba(28, 132, 198, 0.95); /* Blue with high opacity */
    border-color: rgba(255, 255, 255, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7); /* Enhanced shadow on hover */
    opacity: 1 !important;
}

/* Focus state for controls - WCAG compliant contrast */
#PPCarousel .carousel-control-prev:focus,
#PPCarousel .carousel-control-next:focus {
    background-color: rgba(28, 132, 198, 0.95);
    outline: 3px solid #FFFFFF; /* High contrast white outline */
    outline-offset: 2px;
    border-color: rgba(255, 255, 255, 1);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.8), 0 4px 12px rgba(0, 0, 0, 0.7);
    opacity: 1 !important;
}

/* Carousel control icons - maximum visibility with text shadow */
#PPCarousel .carousel-control-prev-icon,
#PPCarousel .carousel-control-next-icon {
    width: 24px;
    height: 24px;
    background-size: 100% 100%;
    filter: brightness(0) invert(1) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.8)); /* White with strong shadow */
}

/* Mobile responsive - keep controls over the image with optimized sizing */
@media (max-width: 768px) {
    #PPCarousel .carousel-control-prev {
        left: 10px; /* Position over the image */
    }
    
    #PPCarousel .carousel-control-next {
        right: 10px; /* Position over the image */
    }
    
    /* Maintain proper touch target size */
    #PPCarousel .carousel-control-prev,
    #PPCarousel .carousel-control-next {
        width: 44px;
        height: 44px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.7); /* Enhanced shadow for mobile */
        opacity: 1 !important;
    }
    
    #PPCarousel .carousel-control-prev-icon,
    #PPCarousel .carousel-control-next-icon {
        width: 20px;
        height: 20px;
    }
}

/* Carousel indicators styling - WCAG 3:1 contrast */
/* Indicators are inside caption, using natural document flow after the text */
#PPCarousel .carousel-indicators {
    position: relative !important; /* Override Bootstrap absolute positioning */
    bottom: auto !important; /* Remove bottom positioning */
    left: auto !important;
    right: auto !important;
    display: flex;
    justify-content: center;
    margin: 0; /* removed top margin so indicators sit directly under the caption */
    padding: 0 0 8px 0; /* removed top padding; keep bottom padding so the dark band shows beneath the circles */
    background: #262626; /* Dark gray background behind the indicator circles (requested) */
    border-radius: 4px; /* Slight rounding to the background band */
    z-index: 2;
}

#PPCarousel .carousel-indicators button {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #767676; /* revert to original gray for the circle itself */
    border: 2px solid #FFFFFF; /* White border for visibility against the black background */
    opacity: 1;
    margin: 0 6px; /* Increased margin for better spacing with larger buttons */
    transition: background-color 0.2s ease, transform 0.2s ease;
}

#PPCarousel .carousel-indicators button.active {
    background-color: #1C84C6; /* Blue for active state */
    transform: scale(1.2); /* Slightly larger to indicate active state */
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12); /* Subtle highlight to show active */
}

#PPCarousel .carousel-indicators button:hover {
    background-color: #1C84C6; /* retain hover color for affordance */
    transform: scale(1.1);
}

#PPCarousel .carousel-indicators button:focus {
    background-color: #1C84C6;
    outline: 2px solid #767676; /* 3:1 contrast with white */
    outline-offset: 2px;
}

/* Caption styling - contains both text and indicators, flows after image in flexbox */
#PPCarousel .carousel-caption {
    position: relative !important; /* Override any absolute positioning */
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100%;
    padding: 10px 15px 15px 15px !important; /* Padding around text and indicators */
    background: rgba(0, 0, 0, 0.85);
    flex-shrink: 0; /* Don't shrink the caption */
}

#PPCarousel .carousel-caption p {
    margin: 0;
    font-size: 1rem;
    color: #fff;
    line-height: 1.4;
}