/* Image Container Styles */

/* Editor view - show minimal container with subtle border */
.template-editor .image-container-element {
    border: 1px dashed #ccc !important;
    background: rgba(248, 249, 250, 0.5) !important;
    min-height: 20px !important;
    overflow: visible !important;
}

.template-editor .container-header {
    display: block !important;
    font-size: 10px !important;
    opacity: 0.7;
}

/* Preview/Contract view - hide container visual elements */
.contract-preview .image-container-element,
.contract-content .image-container-element {
    border: none !important;
    background: transparent !important;
}

.contract-preview .container-header,
.contract-content .container-header {
    display: none !important;
}

/* Ensure images in containers maintain their aspect ratio */
.container-image-wrapper {
    display: inline-block;
    vertical-align: top;
}

.container-image-wrapper img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Container content layout */
.container-content {
    text-align: center;
    overflow: visible !important;
}

/* Ensure images are visible and have no borders */
.image-container-element .container-image-wrapper {
    opacity: 1 !important;
    visibility: visible !important;
    border: none !important;
    outline: none !important;
}

.image-container-element .container-image-wrapper .image-element {
    width: 100%;
    height: 100%;
    position: relative;
}

.image-container-element .container-image-wrapper img {
    opacity: 1 !important;
    visibility: visible !important;
    border: none !important;
    outline: none !important;
    object-fit: contain !important;
}

/* Remove any borders from image elements */
.image-element {
    border: none !important;
    outline: none !important;
}

.image-element img {
    border: none !important;
    outline: none !important;
}

/* For print/PDF - ensure no borders */
@media print {
    .image-container-element {
        border: none !important;
        background: transparent !important;
        page-break-inside: avoid;
    }
    
    .container-header {
        display: none !important;
    }
    
    .container-placeholder {
        display: none !important;
    }
}

/* Container images positioning */
.container-image-wrapper {
    transition: none; /* Disable transitions during drag/resize */
    z-index: 100; /* Ensure images appear above container borders */
    position: absolute !important; /* Use absolute positioning */
    display: inline-block;
    /* Note: Width and height are set inline via JavaScript to match image size */
}

.container-image-wrapper.resizing {
    z-index: 1001 !important;
}

.container-image-wrapper:hover {
    outline: 1px dashed #007bff;
}

/* Ensure container content has proper height */
.image-container-element .container-content:has(.container-image-wrapper) {
    min-height: 200px; /* Restore original height */
}

/* Resize handle styles */
.container-image-wrapper .resize-handle {
    position: absolute !important;
    bottom: 0 !important;
    right: 0 !important;
    width: 15px !important;
    height: 15px !important;
    background: #007bff !important;
    cursor: nwse-resize !important;
    z-index: 1000 !important;
    opacity: 0;
    transition: opacity 0.2s;
}

.container-image-wrapper:hover .resize-handle {
    opacity: 1 !important;
}

/* Draggable image styles */
.template-element.free-positioned[draggable="true"] {
    cursor: grab;
}

.template-element.free-positioned[draggable="true"]:active {
    cursor: grabbing;
    opacity: 0.8;
}

/* Visual feedback for drag operations */
.image-container-element .container-content.drag-over {
    background: #e3f2fd !important;
    border: 2px dashed #1976d2 !important;
}

/* Ensure template elements with containers allow overflow */
.template-element:has(.image-container-element) {
    overflow: visible !important;
}


/* Ensure images can extend beyond container bounds */
.image-container-element {
    overflow: visible !important;
    position: relative;
    z-index: 50; /* Higher than regular elements but lower than images */
}

.image-container-element .container-content {
    position: relative;
    overflow: visible !important;
}