/* Theme-aware EALD-GAP diagram preview + enlarged modal (shared by eald-model and eald-process-and-model). */

.eald-gap-diagram-trigger {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    cursor: zoom-in;
    text-align: left;
    font: inherit;
    color: inherit;
}

.eald-gap-diagram-trigger:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
}

.eald-gap-diagram-theme-img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.eald-gap-diagram-theme-img--dark {
    display: none;
}

:is(html[data-theme="dark"], html[data-bs-theme="dark"]) .eald-gap-diagram-theme-img--light {
    display: none;
}

:is(html[data-theme="dark"], html[data-bs-theme="dark"]) .eald-gap-diagram-theme-img--dark {
    display: block;
}

/* Modal chrome follows site theme (html data-theme / data-bs-theme), not Bootstrap body vars alone. */
.eald-gap-diagram-modal-content {
    background-color: #ffffff;
    color: #212529;
    border: 1px solid rgba(15, 23, 42, 0.12);
}

.eald-gap-diagram-modal-content .modal-header {
    border-bottom-color: rgba(15, 23, 42, 0.1);
}

.eald-gap-diagram-modal-content .modal-title {
    color: #1f2937;
}

:is(html[data-theme="dark"], html[data-bs-theme="dark"]) .eald-gap-diagram-modal-content {
    background-color: #1f232a;
    color: #e5e7eb;
    border-color: rgba(255, 255, 255, 0.12);
}

:is(html[data-theme="dark"], html[data-bs-theme="dark"]) .eald-gap-diagram-modal-content .modal-header {
    border-bottom-color: rgba(255, 255, 255, 0.14);
}

:is(html[data-theme="dark"], html[data-bs-theme="dark"]) .eald-gap-diagram-modal-content .modal-title {
    color: #f3f4f6;
}

:is(html[data-theme="dark"], html[data-bs-theme="dark"]) .eald-gap-diagram-modal-content .btn-close {
    filter: invert(1) grayscale(100%);
    opacity: 0.88;
}

:is(html[data-theme="light"], html[data-bs-theme="light"]) .eald-gap-diagram-modal-content .modal-title {
    color: #1f2937;
}

.eald-gap-diagram-modal-img {
    display: block;
    width: 100%;
    height: auto;
    max-height: min(85vh, 1200px);
    object-fit: contain;
    margin-left: auto;
    margin-right: auto;
}