/**
 * ABC Header frontend overrides.
 *
 * The configured banner width/height define the crop/output ratio, not a fixed
 * browser height. The frontend therefore scales the header proportionally to the
 * actual panel width and caps it at the configured maximum height. This avoids
 * the 1920x849 image being displayed as a 849px tall narrow box, which cropped
 * the left and right sides.
 */

html body .panel-profile.abcheader-active,
html body .panel-profile[data-abcheader-banner-height] {
    --abcheader-banner-aspect-ratio: var(--abcheader-banner-width, 1920) / var(--abcheader-banner-height-number, 849);
}

html body .panel-profile.abcheader-active .panel-profile-header,
html body .panel-profile[data-abcheader-banner-height] .panel-profile-header {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: var(--abcheader-banner-height, 849px) !important;
    aspect-ratio: var(--abcheader-banner-aspect-ratio, 1920 / 849) !important;
    position: relative !important;
    overflow: visible !important;
    isolation: isolate !important;
}

html body .panel-profile.abcheader-active .panel-profile-header .image-upload-container.profile-banner-image-container,
html body .panel-profile.abcheader-active .panel-profile-header .profile-banner-image-container,
html body .panel-profile[data-abcheader-banner-height] .panel-profile-header .image-upload-container.profile-banner-image-container,
html body .panel-profile[data-abcheader-banner-height] .panel-profile-header .profile-banner-image-container {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: var(--abcheader-banner-height, 849px) !important;
    aspect-ratio: var(--abcheader-banner-aspect-ratio, 1920 / 849) !important;
    overflow: hidden !important;
    position: relative !important;
    z-index: 1 !important;
    pointer-events: auto !important;
}

html body .panel-profile.abcheader-active .panel-profile-header .image-upload-container.profile-banner-image-container > img.img-profile-header-background:not(.profile-user-photo),
html body .panel-profile.abcheader-active .panel-profile-header .profile-banner-image-container > img.img-profile-header-background:not(.profile-user-photo),
html body .panel-profile[data-abcheader-banner-height] .panel-profile-header .image-upload-container.profile-banner-image-container > img.img-profile-header-background:not(.profile-user-photo),
html body .panel-profile[data-abcheader-banner-height] .panel-profile-header .profile-banner-image-container > img.img-profile-header-background:not(.profile-user-photo) {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: var(--abcheader-banner-position, center center) !important;
    display: block !important;
    position: relative !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

.panel-profile.abcheader-active .panel-profile-header .img-profile-data,
.panel-profile[data-abcheader-banner-height] .panel-profile-header .img-profile-data {
    position: relative !important;
    z-index: 90 !important;
    pointer-events: auto !important;
}

.panel-profile.abcheader-active .image-upload-loader,
.panel-profile[data-abcheader-banner-height] .image-upload-loader {
    z-index: 95 !important;
}

.panel-profile.abcheader-active.abcheader-profile-circle .profile-user-photo,
.panel-profile.abcheader-active.abcheader-profile-circle .profile-user-photo-container img,
.panel-profile.abcheader-active.abcheader-profile-circle .space-acronym,
.panel-profile[data-abcheader-banner-height].abcheader-profile-circle .profile-user-photo,
.panel-profile[data-abcheader-banner-height].abcheader-profile-circle .profile-user-photo-container img,
.panel-profile[data-abcheader-banner-height].abcheader-profile-circle .space-acronym {
    border-radius: 50% !important;
}

.panel-profile.abcheader-active.abcheader-profile-square .profile-user-photo,
.panel-profile.abcheader-active.abcheader-profile-square .profile-user-photo-container img,
.panel-profile.abcheader-active.abcheader-profile-square .space-acronym,
.panel-profile[data-abcheader-banner-height].abcheader-profile-square .profile-user-photo,
.panel-profile[data-abcheader-banner-height].abcheader-profile-square .profile-user-photo-container img,
.panel-profile[data-abcheader-banner-height].abcheader-profile-square .space-acronym {
    border-radius: 0 !important;
}

.panel-profile.abcheader-active.abcheader-profile-rounded .profile-user-photo,
.panel-profile.abcheader-active.abcheader-profile-rounded .profile-user-photo-container img,
.panel-profile.abcheader-active.abcheader-profile-rounded .space-acronym,
.panel-profile[data-abcheader-banner-height].abcheader-profile-rounded .profile-user-photo,
.panel-profile[data-abcheader-banner-height].abcheader-profile-rounded .profile-user-photo-container img,
.panel-profile[data-abcheader-banner-height].abcheader-profile-rounded .space-acronym {
    border-radius: var(--abcheader-logo-radius, 8px) !important;
}

.panel-profile.abcheader-active .profile-user-photo,
.panel-profile[data-abcheader-banner-height] .profile-user-photo {
    background: transparent !important;
    object-fit: var(--abcheader-profile-fit, cover) !important;
}

.panel-profile.abcheader-active .profile-user-photo-container,
.panel-profile[data-abcheader-banner-height] .profile-user-photo-container {
    overflow: visible;
}

/* Keep HumHub image upload controls clickable above the visual banner layer. */
html body .panel-profile.abcheader-active .panel-profile-header .profile-banner-image-container .image-upload-buttons,
html body .panel-profile[data-abcheader-banner-height] .panel-profile-header .profile-banner-image-container .image-upload-buttons {
    position: absolute !important;
    right: 5px !important;
    bottom: 5px !important;
    z-index: 100 !important;
    pointer-events: auto !important;
}

html body .panel-profile.abcheader-active .panel-profile-header .profile-banner-image-container .image-upload-buttons *,
html body .panel-profile[data-abcheader-banner-height] .panel-profile-header .profile-banner-image-container .image-upload-buttons * {
    pointer-events: auto !important;
}

html body .panel-profile.abcheader-active .panel-profile-header .profile-banner-image-container .fileinput-button,
html body .panel-profile[data-abcheader-banner-height] .panel-profile-header .profile-banner-image-container .fileinput-button {
    position: relative !important;
    overflow: hidden !important;
}

html body .panel-profile.abcheader-active .panel-profile-header .profile-banner-image-container .fileinput-button input[type="file"],
html body .panel-profile[data-abcheader-banner-height] .panel-profile-header .profile-banner-image-container .fileinput-button input[type="file"] {
    max-width: 100% !important;
    max-height: 100% !important;
}

html body .panel-profile.abcheader-active .panel-profile-header .profile-user-photo-container,
html body .panel-profile[data-abcheader-banner-height] .panel-profile-header .profile-user-photo-container {
    z-index: 110 !important;
    pointer-events: auto !important;
}

@media (max-width: 767px) {
    html body .panel-profile.abcheader-active .panel-profile-header,
    html body .panel-profile[data-abcheader-banner-height] .panel-profile-header,
    html body .panel-profile.abcheader-active .panel-profile-header .image-upload-container.profile-banner-image-container,
    html body .panel-profile.abcheader-active .panel-profile-header .profile-banner-image-container,
    html body .panel-profile[data-abcheader-banner-height] .panel-profile-header .image-upload-container.profile-banner-image-container,
    html body .panel-profile[data-abcheader-banner-height] .panel-profile-header .profile-banner-image-container {
        max-height: var(--abcheader-mobile-banner-height, 320px) !important;
    }
}