/* Back to Top Button */
#back-to-top {
    position: fixed;
    bottom: 56px;
    right: 24px;
    display: none;
    z-index: 1005;
}

/* Toast notifications — frosted glass effect.
   Use --bs-bg-opacity (not opacity) so backdrop-filter is not composited into
   an offscreen layer, which breaks blur in most browsers.
   --bs-bg-opacity makes text-bg-* colour backgrounds semi-transparent.
   opacity-75 on toast-alert toasts is left alone intentionally. */
.toast {
    --bs-bg-opacity: 0.6;

    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

/* Bring Menu Above Uppy Menu */
.dropdown-menu {
    z-index: 1005;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.file-context-dropdown-menu {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

[data-bs-theme='dark'] .dropdown-menu {
    background-color: rgba(0 0 0 / 70%);
}

[data-bs-theme='dark'] .file-context-dropdown-menu {
    background-color: rgba(0 0 0 / 70%);
}

[data-bs-theme='light'] .dropdown-menu {
    background-color: rgba(200 200 200 / 70%);
}

[data-bs-theme='light'] .file-context-dropdown-menu {
    background-color: rgba(200 200 200 / 70%);
}

.hvr-grow {
    display: inline-block;
    vertical-align: middle;
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    transition-duration: 0.3s;
    transition-property: transform;
}

.hvr-grow:hover {
    transform: scale(1.05);
}

.offcanvas {
    --bs-offcanvas-width: 260px;
}

/* TODO: CONFIRM THIS REMOVAL: */
/*body {*/
/*    padding-top: 37px;*/
/*}*/

/* Unsupported image format placeholder */
.img-error-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    color: var(--bs-secondary-color);
    padding: 1rem;
    text-align: center;
}

.img-error-placeholder i {
    font-size: 3rem;
}

.img-error-placeholder p {
    margin: 0;
    font-size: 0.8rem;
    max-width: 200px;
}

/* Skeleton glisten loading placeholder */
.img-skeleton {
    background-color: var(--bs-secondary-bg, #e9ecef);
    overflow: hidden;
}

.img-skeleton::after {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    background: linear-gradient(
        110deg,
        transparent 20%,
        rgba(255, 255, 255, 0.6) 50%,
        transparent 80%
    );
    animation: glisten 1.5s linear infinite;
}

[data-bs-theme='dark'] .img-skeleton::after {
    background: linear-gradient(
        110deg,
        transparent 20%,
        rgba(255, 255, 255, 0.12) 50%,
        transparent 80%
    );
}

@keyframes glisten {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(200%);
    }
}

@supports (padding-top: env(safe-area-inset-top)) {
    body {
        padding-top: calc(61px + env(safe-area-inset-top));
    }

    .navbar {
        padding-top: max(env(safe-area-inset-top, 0px), 8px);
    }

    @media (max-width: 992px) {
        .offcanvas {
            padding-top: env(safe-area-inset-top);
        }
    }
}