/**
 * Backend Stylesheet
 * Adding Styling for the Foundation Bundle
 **/

/* Class to add information to a dca-table-view - with different colors*/
.backend-info {
    color: #a0a0a0;
    display: inline-block;
}

.backend-info--green {
    color: #74b63a;
}

.backend-info--red {
    color: #c9483d;
}

.backend-info--blue {
    color: #196a98;
}

.backend-info:first-child {
    margin-left: 7px;
}

/* Language Management */
[id^="pal_translation"] legend:before,
fieldset[data-contao--toggle-fieldset-id-value^="translation_"] > legend:before {
    content: " ";
    display: inline-block;
    vertical-align: middle;
    background-image: url(/bundles/memofoundation/icons/language-flags/default.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    margin-right: -4px;
    margin-top: -3px;
    margin-left: 20px;
    width: 24px;
    height: 16px;
}

/* Language Management */
[id^="pal_translation"] legend > button,
fieldset[data-contao--toggle-fieldset-id-value^="translation_"] legend > button {
    width: auto !important;
}

#pal_translation_de legend:before,
fieldset[data-contao--toggle-fieldset-id-value="translation_de"] legend:before {
    background-image: url(/bundles/memofoundation/icons/language-flags/de.svg);
}

#pal_translation_de_ch legend:before,
fieldset[data-contao--toggle-fieldset-id-value="translation_de_ch"] legend:before{
    background-image: url(/bundles/memofoundation/icons/language-flags/de.svg);
}

#pal_translation_en legend:before,
fieldset[data-contao--toggle-fieldset-id-value="translation_en"] legend:before {
    background-image: url(/bundles/memofoundation/icons/language-flags/en.svg);
}

#pal_translation_es legend:before,
fieldset[data-contao--toggle-fieldset-id-value="translation_es"] legend:before {
    background-image: url(/bundles/memofoundation/icons/language-flags/en.svg);
}

#pal_translation_fr legend:before,
fieldset[data-contao--toggle-fieldset-id-value="translation_fr"] legend:before {
    background-image: url(/bundles/memofoundation/icons/language-flags/fr.svg);
}

#pal_translation_it legend:before,
fieldset[data-contao--toggle-fieldset-id-value="translation_it"] legend:before {
    background-image: url(/bundles/memofoundation/icons/language-flags/it.svg);
}

#pal_translation_pt legend:before,
fieldset[data-contao--toggle-fieldset-id-value="translation_pt"] legend:before {
    background-image: url(/bundles/memofoundation/icons/language-flags/pt.svg);
}

#pal_translation_ru legend:before,
fieldset[data-contao--toggle-fieldset-id-value="translation_ru"] legend:before {
    background-image: url(/bundles/memofoundation/icons/language-flags/ru.svg);
}

#pal_translation_zh legend:before,
fieldset[data-contao--toggle-fieldset-id-value="translation_zh"] legend:before {
    background-image: url(/bundles/memofoundation/icons/language-flags/zh.svg);
}

#pal_translation_nl legend:before,
fieldset[data-contao--toggle-fieldset-id-value="translation_nl"] legend:before {
    background-image: url(/bundles/memofoundation/icons/language-flags/nl.svg);
}


/* --- JSON-LD wizard: two-column field layout --------------------------- */
.jsonld-field {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 18px;
    align-items: start;
}

.jsonld-field > h3 {
    grid-column: 1 / -1;
}

.jsonld-field > textarea {
    grid-column: 1;
}

.jsonld-field > .jsonld-tools {
    grid-column: 2;
}

.jsonld-field > .tl_help {
    grid-column: 1 / -1;
}

@media (max-width: 900px) {
    .jsonld-field {
        grid-template-columns: 1fr;
    }

    .jsonld-field > textarea,
    .jsonld-field > .jsonld-tools {
        grid-column: 1;
    }
}

.jsonld-buttons .tl_submit {
    margin: 0 6px 6px 0;
    vertical-align: middle;
}

.jsonld-outline {
    margin-top: 4px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 2px;
    background: var(--content-bg);
}

.jsonld-outline-head {
    font-weight: bold;
}

.jsonld-tree {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.6;
}

.jsonld-children {
    padding-left: 18px;
}

/* Collapsible node, styled like the Contao file tree (native chevron icons). */
.jsonld-node > summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 4px;
}

.jsonld-node > summary::-webkit-details-marker {
    display: none;
}

.jsonld-node > summary::before {
    content: "";
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    background: url("/system/themes/flexible/icons/chevron-right.svg") center / 16px no-repeat;
    transition: transform .1s ease;
}

html[data-color-scheme="dark"] .jsonld-node > summary::before {
    background-image: url("/system/themes/flexible/icons/chevron-right--dark.svg");
}

.jsonld-node[open] > summary::before {
    transform: rotate(90deg);
}

.jsonld-node--root > summary {
    font-weight: bold;
}

.jsonld-type {
    color: var(--info);
    font-weight: normal;
}

.jsonld-row {
    display: flex;
    gap: 8px;
    align-items: baseline;
    padding-left: 20px;
}

.jsonld-k {
    flex: 0 0 auto;
    min-width: 110px;
    color: var(--info);
}

.jsonld-v {
    word-break: break-word;
    overflow-wrap: anywhere;
    cursor: text;
    border-radius: 2px;
    padding: 0 2px;
}

.jsonld-v:hover,
.jsonld-v:focus {
    background: rgba(244, 124, 0, .14);
    outline: none;
}

/* While editing, let the value cell fill the row so the textarea is full width. */
.jsonld-v.jsonld-editing {
    flex: 1 1 auto;
    min-width: 0;
    background: none;
    padding: 0;
}

.jsonld-edit {
    width: 100%;
    min-width: 120px;
    box-sizing: border-box;
    font: inherit;
    padding: 1px 4px;
    line-height: 1.4;
    resize: vertical;
    overflow: hidden;
    white-space: pre-wrap;
    word-break: break-word;
}

.jsonld-edit--error {
    border-color: var(--error, #c33);
    background: rgba(204, 51, 51, .08);
}

/* Highlight the hovered preview entry (correlates with the textarea overlay). */
.jsonld-node > summary:hover {
    color: var(--contao);
}

.jsonld-row:hover .jsonld-k {
    color: var(--contao);
}

/* --- Highlight the located range via the native textarea selection ----- */
.jsonld-field textarea::selection {
    background: rgba(244, 124, 0, .45);
}

.jsonld-field textarea::-moz-selection {
    background: rgba(244, 124, 0, .45);
}