/* Bounded frame for XAF ImagePropertyEditor in DetailViews.
   Applied via xafml CustomCSSClassName="xaf-image-frame" on a LayoutItem.
   Colours are --vl-* role reads (see theme-aware-ui.md). */
.xaf-image-frame .dxbl-fl-ctrl {
    border: 1px solid var(--vl-line);
    border-radius: var(--vl-control-radius);
    padding: 8px;
    background: var(--vl-surface-2);
}

/* DX renders the editor as: .dxbl-fl-ctrl > .xaf-image-editor > .progress-container > .img-thumbnail.
   .xaf-image-editor fills the control area, so flex/justify on the wrapper can't push anything.
   .img-thumbnail has an explicit inline width (240px for Image, 320px for SignatureImage) set by DX,
   so auto horizontal margins on it center it within .progress-container. */
.xaf-image-frame .img-thumbnail {
    margin-left: auto;
    margin-right: auto;
}

/* Preview tile in Image_DetailView / ImageAttachment_DetailView popups:
   FileImageEditor sets PreviewWidth/Height inline (240×240). Override to fill the layout
   cell at a fixed 320px height (prevents bleed-through) with the <img> using object-fit:
   contain so the image's aspect ratio is preserved. !important beats the inline style. */
.file-image-preview-full .file-image-editor {
    width: 100% !important;
    height: 320px !important;
    background: var(--vl-surface-2);
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.file-image-preview-full .ipt-wrapper {
    width: auto !important;
    height: 100% !important;
    max-width: 100% !important;
}
.file-image-preview-full .ipt-tile {
    width: auto !important;
    height: 100% !important;
    max-width: 100% !important;
    background: transparent;
    border: none;
}
.file-image-preview-full .ipt-img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
}

/* Popup title: bump font-size + weight so the entity caption reads like a header rather
   than a label. Covers both DxPopup and DxWindow render paths (XAF uses both across versions).
   !important is needed to beat DX theme rules that target descendants with higher specificity. */
.dxbl-popup-header,
.dxbl-popup-header *,
.dxbl-window-header,
.dxbl-window-header *,
[class*="dxbl-popup-header"],
[class*="dxbl-window-header"],
[class*="popup-header"] h1,
[class*="popup-header"] h2,
[class*="window-header"] h1,
[class*="window-header"] h2 {
    font-size: 18px !important;
    font-weight: 600 !important;
}