/* Swatch Studio Styles */

#previewContainer {
    position: relative;
    background-color: #f8f9fa;
    border-radius: 0.25rem;
    cursor: pointer;
    width: 100%;
    min-height: 320px;
    /* Override global #previewContainer rules coming from other tool CSS (e.g., label-merge.css) */
    overflow: hidden !important;
}

/* Dark mode support */
html[data-theme="dark"] #previewContainer,
html[data-theme="true-dark"] #previewContainer,
html.theme-dark #previewContainer,
html.theme-true-dark #previewContainer,
[data-theme="dark"] #previewContainer,
[data-theme="true-dark"] #previewContainer {
    background-color: #1a1a1a;
    border-color: #444;
}

html[data-theme="dark"] #previewContainer:not(.has-file),
html[data-theme="true-dark"] #previewContainer:not(.has-file),
html.theme-dark #previewContainer:not(.has-file),
html.theme-true-dark #previewContainer:not(.has-file),
[data-theme="dark"] #previewContainer:not(.has-file),
[data-theme="true-dark"] #previewContainer:not(.has-file) {
    background-color: #0d1117;
}

#previewContainer.drag-over {
    background-color: #e7f3ff !important;
    border-color: #0d6efd !important;
}

html[data-theme="dark"] #previewContainer.drag-over,
html[data-theme="true-dark"] #previewContainer.drag-over,
html.theme-dark #previewContainer.drag-over,
html.theme-true-dark #previewContainer.drag-over,
[data-theme="dark"] #previewContainer.drag-over,
[data-theme="true-dark"] #previewContainer.drag-over {
    background-color: #1e3a5f !important;
    border-color: #4a9eff !important;
}

/* Checkerboard background for transparency */
#previewContainer.transparent-bg {
    background-image: 
        linear-gradient(45deg, #ccc 25%, transparent 25%),
        linear-gradient(-45deg, #ccc 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #ccc 75%),
        linear-gradient(-45deg, transparent 75%, #ccc 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

[data-theme="dark"] #previewContainer.transparent-bg,
[data-theme="true-dark"] #previewContainer.transparent-bg {
    background-image: 
        linear-gradient(45deg, #444 25%, transparent 25%),
        linear-gradient(-45deg, #444 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #444 75%),
        linear-gradient(-45deg, transparent 75%, #444 75%);
}

#previewContainer.solid-bg {
    background-image: none;
}

#previewPlaceholder {
    user-select: none;
    width: 100%;
    height: 100%;
}

#previewPlaceholder:hover {
    opacity: 0.8;
}

[data-theme="dark"] #previewPlaceholder,
[data-theme="true-dark"] #previewPlaceholder {
    color: #c9d1d9;
}

#previewCanvas {
    display: none;
    margin: 0 auto;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    /* scaled previews should look smooth */
    image-rendering: auto;
    touch-action: none;
    -ms-touch-action: none;
}

#previewContainer {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* When a file is loaded, shrink-wrap the preview to the canvas size */
#previewContainer.has-file {
    width: fit-content;
    min-height: auto;
    display: inline-flex;
    padding: 0 !important; /* remove extra border-to-canvas gap */
    overflow: visible !important; /* allow overlay/handles */
    max-width: 100%;
    max-height: 70vh; /* Prevent overflow, allow scrolling at viewport level if needed */
}

/* Swatch Studio preview panel should not be its own scroll container (label-merge.css sets overflow-y:auto globally) */
.responsive-preview-panel {
    max-height: none !important;
    overflow: visible !important;
}

#previewContainer.has-file #previewCanvas {
    display: block;
}

#previewContainer.has-file #previewPlaceholder {
    display: none !important;
}

.swatch-studio-loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

[data-theme="dark"] .swatch-studio-loading,
[data-theme="true-dark"] .swatch-studio-loading {
    background-color: rgba(13, 17, 23, 0.95);
}

.swatch-studio-loading .spinner-border {
    width: 3rem;
    height: 3rem;
}

#fileInfo {
    word-break: break-all;
}

/* Badge styling */
#previewSizeBadge,
#previewShapeBadge,
#previewFormatBadge {
    font-size: 0.875rem;
    padding: 0.25rem 0.5rem;
}

/* Crop overlay */
#cropOverlayCanvas {
    position: absolute;
    pointer-events: auto;
    cursor: move;
    z-index: 10;
    margin: 0 auto;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    touch-action: none;
    -ms-touch-action: none;
}

/* Prevent accidental selection while dragging on touch */
#previewContainer.has-crop,
#previewContainer.has-text-drag {
    user-select: none;
    -webkit-user-select: none;
}

#previewContainer.has-crop #cropOverlayCanvas {
    display: block;
}

#previewContainer.has-crop #previewCanvas {
    cursor: crosshair;
}

/* Draggable text cursor */
#previewContainer.has-text-drag #previewCanvas {
    cursor: move;
}

/* Responsive adjustments */
@media (max-width: 767.98px) {
    #previewContainer {
        min-height: 300px;
    }
}