/* Colors follow BRANDBOOK.md: primary #8F5AFF, hover #7142D4, border #DEDEDE, muted text #5F5F5F. */

/* ---------------------------------------------------------------------------
   Drop zone
   --------------------------------------------------------------------------- */

.ic-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2.5rem 1rem;
    border: 2px dashed #DEDEDE;
    border-radius: 0.5rem;
    background: #FAFAFA;
    transition: border-color .15s ease, background-color .15s ease;
}

/* Once files are loaded the upload zone is hidden entirely (its limits line has been read by
   then), but the whole tool stays a drop target - hence the highlight lives on the root. */
#image-converter-tool.ic-dragging {
    outline: 2px dashed #8F5AFF;
    outline-offset: 8px;
    border-radius: 0.5rem;
}

#image-converter-tool.ic-dragging .ic-dropzone {
    border-color: #8F5AFF;
    background: #F5F0FF;
}

.ic-dropzone-hint {
    font-size: 0.875rem;
    color: #5F5F5F;
    margin-bottom: 0;
}

.ic-dropzone-limits {
    font-size: 0.8125rem;
    color: #ADADAD;
    margin-top: 0.5rem;
    margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   File list (multi-upload)
   --------------------------------------------------------------------------- */

/* The workspace is the slider on the left and a right rail (file switcher + settings)
   that soaks up the width the picture leaves free - no dead zone next to a portrait. */
.ic-workspace-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.ic-preview-col {
    flex: 1 1 auto;
    min-width: 0;
}

.ic-side-col {
    flex: 0 0 300px;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Vertical list in the rail; scrolls so a long queue cannot push the settings away. */
.ic-file-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 250px;
    overflow-y: auto;
}

.ic-file-item {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding: 0.5rem;
    border: 1px solid #DEDEDE;
    border-radius: 0.375rem;
    background: #fff;
    cursor: pointer;
}

.ic-file-item:hover {
    border-color: #8F5AFF;
}

.ic-file-item-active {
    border-color: #8F5AFF;
    box-shadow: inset 0 0 0 1px #8F5AFF;
}

.ic-file-thumb {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 0.25rem;
    background: #F1F1F4;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ic-file-thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.ic-file-body {
    flex: 1 1 auto;
    min-width: 0;
    margin-left: 0.625rem;
}

.ic-file-name {
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ic-file-meta {
    font-size: 0.75rem;
    color: #5F5F5F;
}

.ic-file-remove {
    flex: 0 0 auto;
    font-size: 1.125rem;
    line-height: 1;
    opacity: .45;
}

.ic-file-remove:hover {
    opacity: .9;
}

/* ---------------------------------------------------------------------------
   Before / after preview
   --------------------------------------------------------------------------- */

.ic-preview-label {
    font-weight: 500;
    font-size: 0.875rem;
    color: #5F5F5F;
    margin-bottom: 0.4rem;
}

/* The frame takes the aspect ratio of the image itself (set from JS, clamped so that an
   extreme panorama or a tall banner still gets a usable box), so the picture fills it
   edge to edge: no inner padding, no empty letterbox around a 16:9 photo. */
.ic-preview-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 1px solid #DEDEDE;
    border-radius: 0.375rem;
    /* Checkerboard: makes transparency visible instead of looking like a white image. */
    background-color: #fff;
    background-image:
        linear-gradient(45deg, #F1F1F4 25%, transparent 25%),
        linear-gradient(-45deg, #F1F1F4 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #F1F1F4 75%),
        linear-gradient(-45deg, transparent 75%, #F1F1F4 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
    overflow: hidden;
}

.ic-preview-stage img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* The frame is capped in width from JS (aspect x max height), so the picture never grows
   taller than PREVIEW_MAX_HEIGHT. Centered: with a narrow portrait the leftover width is
   split evenly instead of piling up on one side. */
.ic-preview-frame {
    margin: 0 auto;
}

/* Overlays on the picture itself - a toolbar line above it was pure vertical waste. */
.ic-stage-badge {
    position: absolute;
    bottom: 0.5rem;
    left: 0.5rem;
    z-index: 1;
}

.ic-stage-spinner {
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    z-index: 1;
}

/* Unused while the side-by-side view stays commented out in image-converter.blade.php.
.ic-sbs {
    display: flex;
    gap: 4px;
}

.ic-sbs-pane {
    flex: 1 1 0;
    min-width: 0;
}
*/

.ic-info-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.ic-preview-info {
    font-size: 0.8125rem;
    color: #5F5F5F;
    margin-top: 0.4rem;
    min-height: 1.25rem;
}

/* ---------------------------------------------------------------------------
   Before/after comparison slider
   --------------------------------------------------------------------------- */

/* Both images sit in the same box, exactly on top of each other; the converted one is
   revealed by clipping it at the divider. Dragging only moves a clip inset, so nothing
   is ever re-laid out and the two pictures stay pixel-aligned. */
.ic-compare-stage {
    cursor: ew-resize;
    touch-action: none;
    user-select: none;
}

.ic-compare-stage img {
    position: absolute;
    top: 0;
    left: 0;
}

.ic-compare-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    margin-left: -1px;
    background: #8F5AFF;
    pointer-events: none;
}

.ic-compare-handle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2rem;
    height: 2rem;
    transform: translate(-50%, -50%);
    border: 2px solid #8F5AFF;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}

.ic-compare-tag {
    position: absolute;
    top: 0.5rem;
    padding: 0.15rem 0.5rem;
    border-radius: 1rem;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    font-size: 0.75rem;
    pointer-events: none;
}

.ic-compare-tag-left {
    left: 0.5rem;
}

.ic-compare-tag-right {
    right: 0.5rem;
}

.ic-spinner {
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid #DEDEDE;
    border-top-color: #8F5AFF;
    border-radius: 50%;
    animation: ic-spin .7s linear infinite;
}

@keyframes ic-spin {
    to { transform: rotate(360deg); }
}

/* ---------------------------------------------------------------------------
   Settings panel
   --------------------------------------------------------------------------- */

.ic-panel {
    padding: 1rem;
    border: 1px solid #DEDEDE;
    border-radius: 0.375rem;
    background: #FAFAFA;
}

.ic-panel-label {
    font-weight: 500;
    font-size: 0.8125rem;
    color: #5F5F5F;
    margin-bottom: 0.4rem;
}

.ic-disabled {
    opacity: .5;
}

.ic-size-row {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
}

.ic-size-field {
    flex: 1 1 0;
    min-width: 0;
}

.ic-lock-btn {
    flex: 0 0 auto;
    margin-bottom: 0;
    padding: 0.375rem 0.5rem;
    line-height: 1;
}

.ic-lock-btn .ic-lock-closed {
    display: inline;
}

.ic-lock-btn .ic-lock-opened {
    display: none;
}

.ic-lock-btn.ic-lock-open .ic-lock-closed {
    display: none;
}

.ic-lock-btn.ic-lock-open .ic-lock-opened {
    display: inline;
}

.ic-quality-value {
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

.ic-bg-color {
    width: 2.5rem;
    height: 2rem;
    padding: 0.125rem;
}

/* ---------------------------------------------------------------------------
   Crop overlay
   --------------------------------------------------------------------------- */

.ic-crop-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    border: 1px solid #DEDEDE;
    border-radius: 0.375rem;
    background: #fff;
}

.ic-crop-stage {
    position: relative;
    max-width: 100%;
    /* The crop box is dragged with pointer events; without this, touch scrolls the page. */
    touch-action: none;
    user-select: none;
    /* Clips the crop box's 9999px dimming shadow to the image itself. Without it the
       shadow paints over the whole panel - including the toolbar, whose buttons then
       look greyed out and disabled. */
    overflow: hidden;
}

.ic-crop-stage img {
    display: block;
    max-width: 100%;
    max-height: 60vh;
    pointer-events: none;
}


.ic-crop-box {
    position: absolute;
    box-sizing: border-box;
    border: 1px solid #8F5AFF;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, .45);
    cursor: move;
}

.ic-crop-handle {
    position: absolute;
    width: 12px;
    height: 12px;
    background: #fff;
    border: 1px solid #8F5AFF;
    border-radius: 2px;
}

.ic-crop-handle[data-ic-handle="nw"] { top: -6px; left: -6px; cursor: nwse-resize; }
.ic-crop-handle[data-ic-handle="n"]  { top: -6px; left: calc(50% - 6px); cursor: ns-resize; }
.ic-crop-handle[data-ic-handle="ne"] { top: -6px; right: -6px; cursor: nesw-resize; }
.ic-crop-handle[data-ic-handle="e"]  { top: calc(50% - 6px); right: -6px; cursor: ew-resize; }
.ic-crop-handle[data-ic-handle="se"] { bottom: -6px; right: -6px; cursor: nwse-resize; }
.ic-crop-handle[data-ic-handle="s"]  { bottom: -6px; left: calc(50% - 6px); cursor: ns-resize; }
.ic-crop-handle[data-ic-handle="sw"] { bottom: -6px; left: -6px; cursor: nesw-resize; }
.ic-crop-handle[data-ic-handle="w"]  { top: calc(50% - 6px); left: -6px; cursor: ew-resize; }

.ic-crop-toolbar {
    position: relative;
    z-index: 1;
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.ic-actions {
    gap: 0.5rem;
}

/* Below lg the 300px rail would squeeze the picture: stack it underneath instead. */
@media (max-width: 991.98px) {
    .ic-workspace-row {
        flex-direction: column;
        /* Without this the column-direction flex keeps items at their content width and the
           picture never reaches the edges. */
        align-items: stretch;
    }

    /* With the rail underneath, the picture gets the full width. The cap set from JS is an
       inline style, so it takes !important to drop it here. */
    .ic-preview-frame {
        max-width: 100% !important;
    }

    .ic-side-col {
        flex: 1 1 auto;
        max-width: 100%;
    }

    /* The file switcher reads better as a horizontal strip when it is stacked. */
    .ic-file-list {
        flex-direction: row;
        max-height: none;
        overflow-x: auto;
        padding-bottom: 0.25rem;
    }

    .ic-file-item {
        flex: 0 0 200px;
    }
}

@media (max-width: 767.98px) {
    .ic-crop-stage img {
        max-height: 40vh;
    }

    .ic-crop-toolbar .btn-group {
        width: 100%;
    }

    .ic-info-row {
        flex-direction: column;
        gap: 0;
    }

    .ic-info-row .text-right {
        text-align: left !important;
    }
}

/* On phones: two buttons per row instead of three-plus-orphan. */
@media (max-width: 575.98px) {
    .ic-actions .btn {
        flex: 1 1 calc(50% - 0.25rem);
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}