.navbar-brand img {
    height: 32px;
}

@media (min-width: 992px) {
    .sidebar-main:not(.sidebar-main-resized):not(.sidebar-collapsed) {
        --sidebar-width: 20rem;
    }

    .sidebar-main:not(.sidebar-main-resized):not(.sidebar-collapsed) .nav-sidebar .nav-link {
        white-space: nowrap;
    }

    .sidebar-main:not(.sidebar-main-resized):not(.sidebar-collapsed) .nav-sidebar .nav-link > span {
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

.content > .page-header {
    margin: calc(var(--spacer) * -1) -1.25rem var(--spacer);
}

.content > .page-header .page-header-content.container-xxl,
.content > .content.container-xxl,
.content .container-xxl {
    max-width: none !important;
    width: 100% !important;
}

.content > .content.container-xxl {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
}

.content > .page-header .page-header-content.container-xxl {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
}

.login-bg {
    min-height: 100vh;
    background: var(--login-bg-fallback);
    background-image: var(--login-bg-image), var(--login-bg-fallback);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 2rem 0 2rem clamp(1rem, 7vw, 8rem);
}

.login-panel {
    width: min(100%, 405px);
    opacity: 0;
    transform: translateY(24px) scale(0.98);
}

.login-ready .login-panel {
    animation: loginPanelIn 0.7s cubic-bezier(.2,.75,.25,1) forwards;
}

.login-panel .card {
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.62);
    border-radius: 0.75rem;
    box-shadow: 0 1.5rem 4rem rgba(15, 23, 42, 0.18) !important;
    backdrop-filter: blur(15px) saturate(125%);
    -webkit-backdrop-filter: blur(15px) saturate(125%);
}

.login-panel .form-control {
    background-color: rgba(255, 255, 255, 0.76);
}

.login-panel .card-body {
    padding: 2rem 1.25rem;
}

.brand-mark {
    width: 9.5rem;
    height: 9.5rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1rem 2.5rem rgba(15, 23, 42, 0.08);
}

.login-ready .brand-mark {
    animation: brandFloat 3.8s ease-in-out 0.7s infinite;
}

.login-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    color: #4167ce;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgba(248, 251, 255, 0.9);
    backdrop-filter: blur(8px);
    transition: opacity 0.45s ease, visibility 0.45s ease;
}

.login-loader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.login-loader-ring {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(65, 103, 206, 0.18);
    border-top-color: #4167ce;
    border-radius: 50%;
    animation: loginSpin 0.8s linear infinite;
}

@keyframes loginSpin { to { transform: rotate(360deg); } }
@keyframes loginPanelIn { to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes brandFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

@media (prefers-reduced-motion: reduce) {
    .login-ready .login-panel { animation-duration: 0.01ms; }
    .login-ready .brand-mark { animation: none; }
    .login-loader-ring { animation-duration: 1.5s; }
}

.brand-mark img {
    max-width: 6.5rem;
    max-height: 6.5rem;
}

@media (max-width: 767.98px) {
    .login-page {
        align-items: center;
        justify-content: center;
        padding: 1rem;
        background-color: rgba(219, 234, 254, 0.72);
    }

    .login-panel {
        width: min(100%, 24rem);
    }
}