/*
 * Energy status overlays + analysis shapes coexistence.
 * Stacking uses CSS grid (same cell) so flex never places img + Konva side-by-side.
 * Image size must stay identical when toggling energy ↔ analysis shapes.
 */

.widget-image-container.dc-module-place,
.dc-module-place {
    position: relative !important;
    display: grid !important;
    place-items: center;
    align-content: center;
    justify-content: center;
    overflow: hidden !important;
    width: 100%;
    height: 100%;
    min-height: 0;
}

.dc-module-place > img,
.dc-module-place > .widget-image-shapes-root,
.dc-module-place .widget-image-shapes-root {
    grid-area: 1 / 1;
    max-width: 100% !important;
    margin: 0 !important;
}

/* Energy-only (no shapes): img is the layout size */
.dc-module-place:not(:has(.widget-image-shapes-root)) > img {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    z-index: 1;
}

/*
 * Shapes present: fitted pixel box from JS (contain within column).
 * Do not max-height/overflow-clip here — that cropped the top when the
 * canvas was briefly taller than the slot.
 */
.dc-module-place:has(.widget-image-shapes-root) {
    height: auto;
    max-height: none;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    justify-self: center;
    align-self: center;
    overflow: visible !important;
}

.dc-module-place:has(.widget-image-shapes-root) > img {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: fill !important;
    z-index: 1;
    opacity: 0 !important;
    pointer-events: none !important;
    margin: 0 !important;
    transform: none !important;
}

.dc-module-place:has(.widget-image-shapes-root) .widget-image-shapes-root {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;
    right: auto !important;
    max-width: 100%;
    height: auto !important;
    z-index: 2;
    overflow: visible !important;
    justify-self: center;
    align-self: center;
    margin: 0 auto !important;
}

/* Energy fields sit above analysis shapes; contour separates the two layers */
.dc-module-place .dc-module-place-field,
.dc-module-place .main-sys-view-shape {
    position: absolute;
    opacity: 0.9;
    pointer-events: auto;
    z-index: 4;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), 0 1px 4px rgba(0, 0, 0, 0.25);
    box-sizing: border-box;
}

/*
 * Bolt lives in the widget header controls — NEVER overlay the image.
 * Kill every leftover ENFIT-370 absolute centering rule.
 */
.dc-module-place-start,
button.dc-module-place-start,
.widget-header-icon-btn,
button.widget-header-icon-btn,
.custom-widget-header .dc-module-place-start,
.custom-widget-header .widget-header-icon-btn,
.custom-widget-header .controls .dc-module-place-start,
.custom-widget-header .controls .widget-header-icon-btn,
.widget-controls .dc-module-place-start,
.widget-controls .widget-header-icon-btn,
.controls .dc-module-place-start,
.controls .widget-header-icon-btn,
.pool-content__icon-item .dc-module-place-start,
.pool-content__icon-item .widget-header-icon-btn,
.dc-module-place > .dc-module-place-start {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #17a2b8;
    border-radius: 4px;
    background: transparent;
    color: #17a2b8;
    box-shadow: none !important;
    cursor: pointer;
    z-index: auto !important;
    pointer-events: auto;
    flex-shrink: 0;
    line-height: 1;
    vertical-align: middle;
    float: none !important;
}

.dc-module-place-start .fa-bolt,
.dc-module-place-start i.fas,
.widget-header-icon-btn i.fas {
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    font-size: 14px;
    width: 14px;
    height: 14px;
}

.widget-header-icon-btn:disabled,
.widget-analysis-open-btn:disabled {
    opacity: 1;
    cursor: wait;
}

.dc-module-place-start:hover,
.dc-module-place-start.is-active,
.dc-module-place-start[aria-pressed="true"],
.widget-header-icon-btn:hover,
.widget-header-icon-btn.is-active,
.widget-header-icon-btn[aria-pressed="true"] {
    color: #fff !important;
    background-color: #17a2b8 !important;
    border-color: #17a2b8 !important;
    transform: none !important;
}

@keyframes grow {
    0% {
        transform: scale(0);
        -webkit-transform: scale(0);
    }

    50% {
        transform: scale(1);
        -webkit-transform: scale(1);
    }

    100% {
        transform: scale(0);
        -webkit-transform: scale(0);
    }
}