/*DNNCutList V2 Beginning */

/* Modal shell */
.edge-modal-content {
    width: 720px;
    border-radius: 10px;
    padding: 18px 18px 12px;
}

    /* Header layout */
    .edge-modal-content label {
        font-weight: 600;
    }

    .edge-modal-content select {
        width: 100%;
        max-width: 280px;
    }

/* Preview area */
.edge-preview {
    position: relative;
    width: 320px;
    margin: 14px auto;
}

.edge-baseimg {
    width: 100%;
    display: block;
    border-radius: 6px;
}

/* Overlay edges */
.edge-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.edge {
    position: absolute;
    opacity: 0;
    transition: opacity 0.15s ease;
}

    /* Edge thickness + highlight */
    .edge.edge-top, .edge.edge-bottom {
        left: 0;
        right: 0;
        height: 8px;
        background: rgba(255, 193, 7, 0.9);
    }

    .edge.edge-top {
        top: 0;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
    }

    .edge.edge-bottom {
        bottom: 0;
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;
    }

    .edge.edge-left, .edge.edge-right {
        top: 0;
        bottom: 0;
        width: 8px;
        background: rgba(255, 193, 7, 0.9);
    }

    .edge.edge-left {
        left: 0;
        border-top-left-radius: 6px;
        border-bottom-left-radius: 6px;
    }

    .edge.edge-right {
        right: 0;
        border-top-right-radius: 6px;
        border-bottom-right-radius: 6px;
    }

    /* Active class */
    .edge.on {
        opacity: 1;
    }

/* Buttons */
.edge-actions {
    display: flex;
    gap: 12px;
    margin-top: 12px;
}

.edge-preview.small {
    width: 180px;
    margin: 0;
}

    .edge-preview.small .edge.edge-top,
    .edge-preview.small .edge.edge-bottom {
        height: 6px;
    }

    .edge-preview.small .edge.edge-left,
    .edge-preview.small .edge.edge-right {
        width: 6px;
    }

.panelPreview {
    position: relative;
    display: inline-block;
    line-height: 0; /* prevents extra whitespace affecting overlay */
}

.panelImg {
    display: block; /* critical: removes inline baseline issues */
    max-width: 260px; /* optional – keep it tidy */
    height: auto;
}

.edge {
    position: absolute;
    pointer-events: none;
    opacity: 0; /* hidden unless .on */
}

    .edge.on {
        opacity: 1;
    }

/* thickness of highlight */
.edge-top,
.edge-bottom {
    height: 6px;
    left: 0;
    right: 0;
}

.edge-left,
.edge-right {
    width: 6px;
    top: 0;
    bottom: 0;
}

.edge-top {
    top: 0;
}

.edge-right {
    right: 0;
}

.edge-bottom {
    bottom: 0;
}

.edge-left {
    left: 0;
}

/* optional styling */
.edge.on {
    background: rgba(255, 193, 7, 0.95);
}
/* yellow-ish */

.popup-error {
    color: #b00020;
    margin-top: 8px;
    display: block;
    font-weight: 600;
}