/* Manuals: images are shown small by default (thumbnails) and can be opened full size. */

/* In the manual view: small thumbnail, clickable to enlarge. */
.manual-view img {
    max-width: 25%;
    height: auto;
    cursor: zoom-in;
    border-radius: 4px;
}

/* Inside the rich-text editor: keep images small too, so the surrounding text stays visible. */
.rz-html-editor-content img {
    max-width: 25%;
    height: auto;
}

/* Videos fit their container in both the editor and the view. */
.manual-view video,
.rz-html-editor-content video {
    max-width: 100%;
    height: auto;
}

/* Fullscreen overlay that shows an image at full size when a thumbnail is clicked. */
.manual-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 2vmin;
    background: rgba(0, 0, 0, 0.85);
    cursor: zoom-out;
}

.manual-lightbox img {
    max-width: 96vw;
    max-height: 96vh;
    width: auto;
    height: auto;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.6);
    border-radius: 4px;
}

/* Schließen-Button (X) oben rechts im Vollbild-Overlay. */
.manual-lightbox__close {
    position: fixed;
    top: 1.5vmin;
    right: 2vmin;
    z-index: 2001;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 28px;
    line-height: 1;
    color: #fff;
    background: rgba(0, 0, 0, 0.45);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.15s ease-in-out;
}

.manual-lightbox__close:hover {
    background: rgba(0, 0, 0, 0.75);
}

/* Approval page: the live/proposed comparison panes scroll independently so long manuals stay manageable. */
.manual-approval-pane {
    max-height: 60vh;
    overflow: auto;
}

/* Highlight the proposed version so the approver immediately sees which pane is the change. */
.manual-approval-pane--proposed {
    border: 1px solid var(--rz-primary, #1976d2);
}

/* Word-level diff marks in the comparison: removed text is tinted red in the live pane,
   added text green in the proposed pane. Translucent backgrounds work on both themes. */
.manual-view mark.manual-diff-removed,
.manual-view mark.manual-diff-added {
    color: inherit;
    border-radius: 3px;
    padding: 0 2px;
}

.manual-view mark.manual-diff-removed {
    background-color: rgba(244, 67, 54, 0.3);
}

.manual-view mark.manual-diff-added {
    background-color: rgba(76, 175, 80, 0.3);
}