/* ============================================================
   Jodit Plugin: Änderungen prüfen (RichTextEditor AenderungenPruefen)
   Markierungen nur in Editoren mit .oo-jodit-aenderungen
   ============================================================ */

.oo-jodit-aenderungen .jodit-wysiwyg ins,
.oo-jodit-aenderungen .jodit-wysiwyg del {
    border-radius: 2px;
    padding: 0 2px;
    cursor: pointer;
}

.oo-jodit-aenderungen .jodit-wysiwyg ins {
    background: color-mix(in oklch, var(--oo-success) 22%, transparent);
    color: var(--oo-success-dark);
    text-decoration: none;
}

.oo-jodit-aenderungen .jodit-wysiwyg del {
    background: color-mix(in oklch, var(--oo-danger) 18%, transparent);
    color: var(--oo-danger-dark);
    text-decoration: line-through;
    text-decoration-color: var(--oo-danger-dark);
}

/* Formatänderung: nur übernehmbar */
.oo-jodit-aenderungen .jodit-wysiwyg ins.mod {
    background: color-mix(in oklch, var(--oo-info) 18%, transparent);
    color: inherit;
}

.oo-jodit-aenderungen .jodit-wysiwyg ins.mod ins.mod {
    background: none;
    padding: 0;
}

/* Bilder, Videos, Audio, iframes, Trennlinien: kein Hintergrund an der Zeile, stattdessen Rahmen am Element; Gelöschtes blass */
.oo-jodit-aenderungen .jodit-wysiwyg ins:has(img, video, audio, iframe, hr),
.oo-jodit-aenderungen .jodit-wysiwyg del:has(img, video, audio, iframe, hr) {
    background: none;
    padding: 0;
}

.oo-jodit-aenderungen .jodit-wysiwyg ins :is(img, video, audio, iframe, hr) {
    outline: 3px solid var(--oo-success);
    outline-offset: 2px;
}

.oo-jodit-aenderungen .jodit-wysiwyg del :is(img, video, audio, iframe, hr) {
    outline: 3px solid var(--oo-danger);
    outline-offset: 2px;
    opacity: 0.5;
}

/* ── Vorschau beim Hovern über eine Aktion ── */

.oo-jodit-aenderungen .jodit-wysiwyg [data-oo-vorschau="weg"] {
    display: none;
}

.oo-jodit-aenderungen .jodit-wysiwyg [data-oo-vorschau="bleibt"] {
    background: none;
    color: inherit;
    text-decoration: none;
    padding: 0;
}

.oo-jodit-aenderungen .jodit-wysiwyg [data-oo-vorschau="bleibt"] :is(img, video, audio, iframe, hr) {
    outline: none;
    opacity: 1;
}

/* ── Hervorhebung der ganzen Gruppe (Overlay, nicht im HTML) ── */

.oo-jodit-aenderung-hervorhebung > div {
    position: absolute;
    z-index: calc(var(--jd-z-index-popup, 10000001) - 1);
    pointer-events: none;
    border: 2px solid var(--oo-primary);
    border-radius: var(--oo-radius-sm);
}

/* ── Leiste mit den beiden Aktionen ── */

.oo-jodit-aenderung-leiste {
    position: absolute;
    /* Über Jodits Popups (Tabellen-, Bild-, Link-Popup) */
    z-index: calc(var(--jd-z-index-popup, 10000001) + 1);
    display: flex;
    align-items: center;
    gap: var(--oo-space-1);
    padding: var(--oo-space-1);
    background: var(--oo-color-background);
    border: var(--oo-border-width) solid var(--oo-color-border);
    border-radius: var(--oo-radius-md);
    box-shadow: var(--oo-shadow-lg);
    font-size: var(--oo-font-size-sm);
}

.oo-jodit-aenderung-leiste[hidden] {
    display: none;
}

.oo-jodit-aenderung-leiste__button {
    display: inline-flex;
    align-items: center;
    gap: var(--oo-space-1);
    padding: var(--oo-space-1) var(--oo-space-2);
    border: none;
    border-radius: var(--oo-radius-sm);
    background: transparent;
    color: var(--oo-color-text);
    font: inherit;
    cursor: pointer;
}

.oo-jodit-aenderung-leiste__button .oo-icon {
    font-size: 1.1em;
}

.oo-jodit-aenderung-leiste__button[data-aktion="uebernehmen"] .oo-icon {
    color: var(--oo-success-dark);
}

.oo-jodit-aenderung-leiste__button[data-aktion="behalten"] .oo-icon {
    color: var(--oo-danger-dark);
}

/* ── Zeile unter der Toolbar (AenderungenLeiste): liegt im Toolbar-Container und klebt mit ihm ── */

.oo-jodit-aenderung-zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--oo-space-1) var(--oo-space-2);
    padding: var(--oo-space-1) var(--oo-space-2);
    border-top: var(--oo-border-width) solid var(--oo-color-border);
    background: var(--oo-color-background);
    font-size: var(--oo-font-size-sm);
    color: var(--oo-color-text);
}

.oo-jodit-aenderung-zeile__navigation {
    display: inline-flex;
    align-items: center;
    gap: var(--oo-space-1);
    white-space: nowrap;
}

.oo-jodit-aenderung-zeile .oo-jodit-aenderung-leiste__button[data-aktion="alleUebernehmen"] .oo-icon {
    color: var(--oo-success-dark);
}

/* Speichern rechts, sonst wie die übrigen Buttons der Zeile – gehört optisch zum Editor */
.oo-jodit-aenderung-zeile .oo-jodit-aenderung-zeile__speichern {
    margin-left: auto;
}

    .oo-jodit-aenderung-zeile .oo-jodit-aenderung-zeile__speichern:not(:disabled) .oo-icon {
        color: var(--oo-primary);
    }

.oo-jodit-aenderung-leiste__button:hover:not(:disabled) {
    background: var(--oo-color-surface);
}

.oo-jodit-aenderung-leiste__button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}