/*
 * Fallback Bootstrap 5.3 CSS variables. This Velzon build only defines its own
 * "--vz-*" tokens (and those get redefined multiple times across its bundled
 * skin presets), so any "--bs-*" var used below would otherwise resolve to
 * nothing and silently drop the whole declaration (e.g. a "border" shorthand
 * with an undefined var makes the entire border disappear). Values match the
 * app's actual default Velzon skin colors.
 */
:root {
    --bs-border-width: 1px;
    --bs-border-color: #e9ebec;
    --bs-border-radius: 0.25rem;
    --bs-body-bg: #f3f3f9;
    --bs-body-color: #212529;
    --bs-secondary-color: #878a99;
    --bs-gray-100: #f3f6f9;
    --bs-primary: #405189;
    --bs-primary-rgb: 64, 81, 137;
    --bs-danger: #f06548;
    --bs-danger-rgb: 240, 101, 72;
    --bs-danger-text-emphasis: #a52c1a;
    --bs-danger-bg-subtle: #fbeeec;
    --bs-danger-border-subtle: #f3c8bf;
    --bs-navbar-color: rgba(255, 255, 255, .85);
    --bs-navbar-hover-color: #fff;
}

main > .container {
    padding: 20px 15px 28px;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.not-set {
    color: var(--bs-danger);
    font-style: italic;
}

/* add sorting icons to gridview sort links */
a.asc:after, a.desc:after {
    content: '';
    left: 3px;
    display: inline-block;
    width: 0;
    height: 0;
    border: solid 5px transparent;
    margin: 4px 4px 2px 4px;
    background: transparent;
}

a.asc:after {
    border-bottom: solid 7px var(--bs-body-color);
    border-top-width: 0;
}

a.desc:after {
    border-top: solid 7px var(--bs-body-color);
    border-bottom-width: 0;
}

.grid-view th {
    white-space: nowrap;
}

.hint-block {
    display: block;
    margin-top: 5px;
    color: var(--bs-secondary-color);
}

.error-summary {
    color: var(--bs-danger-text-emphasis);
    background: var(--bs-danger-bg-subtle);
    border-left: 3px solid var(--bs-danger-border-subtle);
    padding: 10px 20px;
    margin: 0 0 15px 0;
}

/* align navbar brand baseline with nav links */
.navbar > .container,
.navbar > .container-fluid {
    align-items: baseline;
}

/* style navbar logout link color, hover state, and mobile layout */
.navbar-nav .nav-link.logout {
    color: var(--bs-navbar-color);
}

@media (max-width: 767.98px) {
    .navbar-nav .nav-link.logout {
        display: block;
        text-align: left;
        width: 100%;
        padding: 10px 0;
    }
}

.navbar-nav .nav-link.logout:focus,
.navbar-nav .nav-link.logout:hover {
    color: var(--bs-navbar-hover-color);
}



/* footer logo: light logo by default (light bg-body-tertiary), dark logo for dark theme */
.footer-logo-dark { display: none; }

[data-bs-theme="dark"] .footer-logo-light { display: none; }
[data-bs-theme="dark"] .footer-logo-dark  { display: inline-block; }

/* Yii brand button */
.btn-yii {
    background: #c0d030;
    color: #1b2547 !important;
    border: none;
    font-weight: 600;
    letter-spacing: .02em;
    transition: opacity .2s, transform .1s;
}

.btn-yii:hover {
    opacity: .9;
    transform: translateY(-1px);
}

.btn-yii:active {
    transform: translateY(0);
}

/* form inputs: seamless icon inside input (Volt style) */
.form-card .input-group {
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    overflow: hidden;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.form-card .input-group .input-group-text {
    background: var(--bs-body-bg);
    border: 0;
    padding-left: 1rem;
    padding-right: .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-card .input-group .form-control {
    border: 0;
}

.form-card .input-group .form-control:focus {
    box-shadow: none;
}

.form-card .input-group:focus-within {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
}

/* validation styles for browsers that support :has() */
@supports selector(.input-group:has(.is-invalid)) {
    .form-card .input-group:has(.is-invalid) ~ .invalid-feedback {
        display: block;
        margin-top: .35rem;
        margin-bottom: .5rem;
    }

    .form-card .input-group:has(.is-invalid) {
        border-color: var(--bs-danger);
    }

    .form-card .input-group:has(.is-invalid):focus-within {
        box-shadow: 0 0 0 .25rem rgba(var(--bs-danger-rgb), .25);
    }
}

/* fallback validation styles for browsers without :has() support */
@supports not selector(.input-group:has(.is-invalid)) {
    .form-card .invalid-feedback:not(:empty) {
        display: block;
        margin-top: .35rem;
        margin-bottom: .5rem;
    }

    .form-card .input-group .form-control.is-invalid {
        border: var(--bs-border-width) solid var(--bs-danger);
    }

    .form-card .input-group .form-control.is-invalid:focus {
        box-shadow: 0 0 0 .25rem rgba(var(--bs-danger-rgb), .25);
    }
}

/* login inputs: seamless icon inside input (Volt style) */
.login-split-card .input-group {
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    overflow: hidden;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.login-split-card .input-group .input-group-text {
    background: transparent;
    border: 0;
    padding-left: 1rem;
    padding-right: .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-split-card .input-group .form-control {
    border: 0;
    background: transparent;
}

.login-split-card .input-group .form-control:focus {
    box-shadow: none;
}

.login-split-card .input-group:focus-within {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
}

/* validation styles for login split card (browsers with :has()) */
@supports selector(.input-group:has(.is-invalid)) {
    .login-split-card .input-group:has(.is-invalid) ~ .invalid-feedback {
        display: block;
        margin-top: .35rem;
        margin-bottom: .5rem;
    }

    .login-split-card .input-group:has(.is-invalid) {
        border-color: var(--bs-danger);
    }

    .login-split-card .input-group:has(.is-invalid):focus-within {
        box-shadow: 0 0 0 .25rem rgba(var(--bs-danger-rgb), .25);
    }
}

/* fallback validation styles for login split card (browsers without :has()) */
@supports not selector(.input-group:has(.is-invalid)) {
    .login-split-card .invalid-feedback:not(:empty) {
        display: block;
        margin-top: .35rem;
        margin-bottom: .5rem;
    }

    .login-split-card .input-group .form-control.is-invalid {
        border: var(--bs-border-width) solid var(--bs-danger);
    }

    .login-split-card .input-group .form-control.is-invalid:focus {
        box-shadow: 0 0 0 .25rem rgba(var(--bs-danger-rgb), .25);
    }
}

/* login split card */
.login-split-card {
    border-radius: 1rem;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .10);
    background-color: var(--bs-gray-100);
    width: 100%;
    max-width: 900px;
}

.login-split-card-wide {
    max-width: 960px;
}

.login-brand-title {
    font-size: 1.75rem;
    line-height: 1.3;
}

.login-brand-text {
    font-size: .9rem;
}

.login-brand-panel {
    background: linear-gradient(135deg, #40B3D8 0%, #3a9cbd 40%, #83C933 100%);
    position: relative;
    min-height: 480px;
}

.login-brand-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 80%, rgba(241, 138, 42, .25) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(131, 201, 51, .2) 0%, transparent 40%);
    pointer-events: none;
}

.login-btn {
    background: linear-gradient(135deg, #40B3D8, #3a9cbd);
    border: none;
    font-weight: 600;
    letter-spacing: .02em;
    transition: opacity .2s, transform .1s;
}

.login-btn:hover {
    opacity: .9;
    transform: translateY(-1px);
}

.login-btn:active {
    transform: translateY(0);
}

/* dark mode login card */
[data-bs-theme="dark"] .login-split-card {
    background-color: var(--bs-body-bg);
    box-shadow: 0 0 0 1px var(--bs-border-color), 0 4px 24px rgba(0, 0, 0, .4);
}

[data-bs-theme="dark"] .login-mobile-logo {
    filter: invert(1);
}

/* contact form textarea height */
.site-contact textarea.form-control {
    height: 140px;
}

/* form cards */
.form-card {
    border-radius: 1rem;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .10);
}

/* dark mode: elevate form cards against dark background */
[data-bs-theme="dark"] .form-card {
    box-shadow: 0 0 0 1px var(--bs-border-color), 0 4px 24px rgba(0, 0, 0, .4);
}

/* captcha: blend with card background */
.site-contact img[src*="captcha"] {
    border-radius: var(--bs-border-radius);
    mix-blend-mode: multiply;
}

/* dark mode: invert captcha for visibility on dark background */
[data-bs-theme="dark"] .site-contact img[src*="captcha"] {
    mix-blend-mode: screen;
    filter: invert(1) hue-rotate(180deg);
}

/* centered page layout */
.site-login,
.site-signup,
.site-contact,
.site-request-password-reset,
.site-reset-password,
.site-resend-verification-email,
.site-index,
.site-error,
.site-about {
    flex: 1;
}

.site-error .site-error-content,
.site-about .site-about-content {
    width: 100%;
    max-width: 90%;
}

@media (min-width: 576px) {
    .site-error .site-error-content,
    .site-about .site-about-content {
        max-width: 80%;
    }
}

@media (min-width: 768px) {
    .site-error .site-error-content,
    .site-about .site-about-content {
        max-width: 60%;
    }
}

@media (min-width: 992px) {
    .site-error .site-error-content,
    .site-about .site-about-content {
        max-width: 50%;
    }
}

/* hero banner */
.hero-banner {
    background: linear-gradient(135deg, #83C933 0%, #3a9cbd 40%, #40B3D8 100%);
    position: relative;
}

.hero-lead {
    max-width: 520px;
}

.hero-logo {
    height: 120px;
    opacity: .45;
    right: 2.5rem;
    top: 50%;
    transform: translateY(-50%);
}

.hero-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(circle at 15% 85%, rgba(241, 138, 42, .3) 0%, transparent 45%),
        radial-gradient(circle at 85% 15%, rgba(131, 201, 51, .25) 0%, transparent 40%),
        radial-gradient(ellipse at 50% 50%, rgba(64, 179, 216, .15) 0%, transparent 60%);
    pointer-events: none;
}

/* extension cards */
.extension-card {
    transition: transform .15s ease-in-out, box-shadow .15s ease-in-out;
}

.extension-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12) !important;
}

.extension-icon {
    font-size: 1.5rem;
    line-height: 1;
}

/* dark mode: extension cards */
[data-bs-theme="dark"] .extension-card {
    background-color: var(--bs-body-bg);
    box-shadow: 0 0 0 1px var(--bs-border-color), 0 2px 8px rgba(0, 0, 0, .3);
}

[data-bs-theme="dark"] .extension-card:hover {
    box-shadow: 0 0 0 1px var(--bs-border-color), 0 8px 24px rgba(0, 0, 0, .4) !important;
}

/* Resonance brand logo (JPG has a light background, so sit it on a white chip) */
.brand-logo {
    display: inline-block;
    background: #f7f7f7;
    border-radius: .5rem;
    padding: .35rem .6rem;
    line-height: 0;
}

.brand-logo img {
    display: block;
    height: auto;
    max-width: 100%;
}

.brand-logo-lg img { width: 260px; }
.brand-logo-md img { width: 230px; }
.brand-logo-sm img { width: 150px; }
.brand-logo-sidebar { padding: .25rem .5rem; }
.brand-logo-sidebar img { width: 150px; }

.brand-icon {
    height: 32px;
    width: 32px;
    border-radius: .35rem;
}

@media (max-width: 575.98px) {
    .brand-logo-sm img { width: 120px; }
    .brand-logo-md img { width: 200px; }
}

/* single-card login */
.login-single-card {
    width: 100%;
    max-width: 440px;
    border-radius: 1rem;
    background-color: var(--bs-body-bg);
    box-shadow: 0 4px 24px rgba(0, 0, 0, .12);
}

.login-single-card .input-group {
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    overflow: hidden;
}

.login-single-card .input-group .input-group-text {
    background: transparent;
    border: 0;
}

.login-single-card .input-group .form-control {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.login-single-card .input-group:focus-within {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
}

/* mobile polish */
@media (max-width: 575.98px) {
    header.navbar > .container { flex-wrap: nowrap; gap: .5rem; align-items: center; }
    header.navbar { padding-top: .35rem; padding-bottom: .35rem; }
    header.navbar .navbar-brand { margin-right: 0; flex-shrink: 1; min-width: 0; }
    header.navbar .brand-logo-sm img { width: 110px; }
    header.navbar .brand-logo { padding: .25rem .4rem; }
    header.navbar .nav-link { padding: .4rem .5rem !important; font-size: .8rem; white-space: nowrap; margin-right: 0 !important; }
    header.navbar .nav-link i { display: none; }
    header.navbar .dropdown .btn { font-size: .8rem; padding: .3rem .5rem; }
    main > .container { padding: 16px 16px 28px; }
    .card-body.p-4 { padding: 1rem !important; }
    .card-body h4 { font-size: 1.15rem; }
    .card-body .btn-lg { font-size: 1rem; }
    .table { font-size: .85rem; }
}

/* app header */
.app-header {
    background: linear-gradient(135deg, #1b2547 0%, #1a5f93 100%);
    padding: .6rem 0;
    box-shadow: 0 2px 12px rgba(16, 24, 40, .25);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.app-header-brand { display: inline-flex; text-decoration: none; }
.app-header .brand-logo { box-shadow: 0 2px 8px rgba(0, 0, 0, .2); background: #fff; }

.app-user-btn {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .3rem .75rem .3rem .3rem;
    color: #fff;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50rem;
    font-weight: 600;
    font-size: .95rem;
    transition: background .15s ease;
}

.app-user-btn:hover, .app-user-btn.show { background: rgba(255, 255, 255, .22); color: #fff; }

.app-user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fff;
    color: #1b2547;
    font-weight: 700;
}

.app-user-btn i { font-size: 1.2rem; opacity: .85; }

@media (max-width: 575.98px) {
    .app-header { padding: .45rem 0; }
    .app-header .brand-logo-sm img { width: 110px; }
    .app-user-name { font-size: .85rem; }
    .app-user-avatar { width: 30px; height: 30px; }
}

/* brand green buttons (Resonance logo green) */
.btn-primary, .btn-brand {
    --bs-btn-bg: #c0d030;
    --bs-btn-border-color: #c0d030;
    --bs-btn-color: #1b2547;
    --bs-btn-hover-bg: #aebd24;
    --bs-btn-hover-border-color: #aebd24;
    --bs-btn-hover-color: #1b2547;
    --bs-btn-active-bg: #9fae1f;
    --bs-btn-active-border-color: #9fae1f;
    --bs-btn-active-color: #1b2547;
    --bs-btn-disabled-bg: #c0d030;
    --bs-btn-disabled-border-color: #c0d030;
    --bs-btn-disabled-color: #1b2547;
    font-weight: 600;
}

/* show validation messages inside input-group login fields */
.login-single-card .invalid-feedback {
    display: block;
    margin-top: .35rem;
}

.login-single-card .input-group:has(.is-invalid) {
    border-color: var(--bs-danger);
}

.login-single-card .input-group:has(.is-invalid):focus-within {
    box-shadow: 0 0 0 .25rem rgba(var(--bs-danger-rgb), .25);
}

/* login page: banner on the left, glass form card on the right (colours sampled from the banner) */
.login-bg-wrap {
    min-height: 100vh;
    background:
        radial-gradient(circle at 85% 15%, rgba(64, 179, 216, .22) 0%, transparent 45%),
        linear-gradient(180deg, #004085 0%, #01255f 55%, #011b4b 100%);
    display: flex;
    flex-direction: column;
}

.login-banner {
    line-height: 0;
}

.login-banner-img {
    width: 100%;
    height: auto;
    display: block;
}

.login-form-col {
    flex: 1 1 auto;
}

.login-bg-wrap .login-single-card {
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .28) !important;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
    color: #fff;
}

.login-bg-wrap .login-single-card h1 {
    color: #fff;
}

.login-bg-wrap .login-single-card .text-body-secondary,
.login-bg-wrap .login-single-card .form-label {
    color: rgba(255, 255, 255, .8) !important;
}

.login-bg-wrap .login-single-card .input-group {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .35);
}

.login-bg-wrap .login-single-card .input-group-text,
.login-bg-wrap .login-single-card .form-control {
    color: #fff;
}

.login-bg-wrap .login-single-card .form-control::placeholder {
    color: rgba(255, 255, 255, .55);
}

.login-bg-wrap .login-single-card .input-group:focus-within {
    border-color: #c3d82f;
    box-shadow: 0 0 0 .2rem rgba(195, 216, 47, .3);
}

.login-bg-wrap .login-single-card .invalid-feedback {
    color: #ffb4b4;
}

.login-bg-wrap .login-single-card .login-btn {
    background: linear-gradient(135deg, #c3d82f, #a9c11f);
    color: #0a2a00 !important;
    font-weight: 700;
    opacity: .92;
}

.login-bg-wrap .login-single-card .login-btn:hover {
    opacity: 1;
}

@media (min-width: 992px) {
    .login-bg-wrap {
        flex-direction: row;
        align-items: stretch;
    }

    .login-banner {
        flex: 0 0 62%;
        display: flex;
        align-items: flex-start;
    }

    .login-form-col {
        flex: 1 1 38%;
        padding-top: 4rem !important;
    }
}

/* fade banner edges into the page background */
.login-banner-img {
    -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%), linear-gradient(to bottom, #000 90%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, #000 88%, transparent 100%), linear-gradient(to bottom, #000 90%, transparent 100%);
    mask-composite: intersect;
}

@media (max-width: 991.98px) {
    .login-banner-img {
        -webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
        mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
    }
}

/* mobile / tablet: portrait banner as the page background, form sits in its empty lower area */
@media (max-width: 991.98px) {
    .login-bg-wrap {
        background:
            linear-gradient(to bottom, rgba(1, 37, 95, 0), #01255f 60%) center calc(177.78vw - 110px) / 100% 110px no-repeat,
            url('../images/login-bg-mobile.webp') top center / 100% auto no-repeat,
            #01255f;
    }

    .login-banner {
        display: none;
    }

    .login-form-col {
        padding-top: 88vw !important;
    }
}

@media (min-width: 600px) and (max-width: 991.98px) {
    .login-bg-wrap {
        background:
            linear-gradient(to bottom, rgba(1, 37, 95, 0), #01255f 60%) center 956px / 600px 110px no-repeat,
            url('../images/login-bg-mobile.webp') top center / 600px auto no-repeat,
            #01255f;
    }

    .login-form-col {
        padding-top: 535px !important;
    }
}

/* phones: leave scroll room while the keyboard is open so the card can be lifted above it */
body.field-focused .login-form-col {
    padding-bottom: 55vh !important;
}

html, body {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: auto;
}

/* phones: login fits the visible screen exactly, no scrolling */
@media (max-width: 599.98px) {
    html:has(body.login-page), body.login-page {
        height: 100vh;
        height: 100dvh;
        min-height: 0;
        overflow: hidden;
    }

    body.login-page:not(.field-focused) .login-bg-wrap {
        height: 100vh;
        height: 100dvh;
        min-height: 0;
        overflow: hidden;
        background:
            linear-gradient(to bottom, rgba(1, 37, 95, 0), #01255f 60%) center calc(177.78vw - 110px) / 100% 110px no-repeat,
            url('../images/login-bg-mobile.webp') top center / 100% auto no-repeat,
            #01255f;
    }

    body.login-page .login-form-col {
        padding: 88vw 16px 12px !important;
        align-items: flex-start !important;
    }

    body.login-page .login-single-card .p-4 {
        padding: 1.1rem !important;
    }

    body.login-page .login-single-card .text-center.mb-4 {
        margin-bottom: .75rem !important;
    }

    body.login-page .login-single-card h1 {
        font-size: 1.15rem;
        margin-bottom: .1rem !important;
    }

    body.login-page .login-single-card .mb-4 {
        margin-bottom: .75rem !important;
    }

    body.login-page .login-single-card .form-control,
    body.login-page .login-single-card .btn-lg {
        padding-top: .55rem;
        padding-bottom: .55rem;
        font-size: 1rem;
    }
}

@media (max-width: 599.98px) and (max-height: 640px) {
    body.login-page .login-single-card p { display: none; }
    body.login-page .login-single-card .form-label { margin-bottom: .2rem; }
}

/* keyboard open on a phone: allow scrolling again so the card can be lifted above it */
body.login-page.field-focused,
html:has(body.login-page.field-focused) {
    overflow: auto !important;
    height: auto !important;
}

/* navbar logo (new Resonance logo on a white plate) */
.app-header .brand-logo { padding: .3rem .7rem; }
.app-header .brand-logo-sm img { width: 150px; }
@media (max-width: 575.98px) {
    .app-header .brand-logo-sm img { width: 112px; }
}

/* button animations (all buttons) */
.btn {
    position: relative;
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease, filter .15s ease;
}

.btn:not(:disabled):not(.disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(16, 24, 40, .18);
}

.btn:not(:disabled):not(.disabled):active {
    transform: translateY(0) scale(.97);
    box-shadow: none;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -80%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .4), transparent);
    transform: skewX(-20deg);
    pointer-events: none;
}

.btn:not(:disabled):not(.disabled):hover::before {
    left: 130%;
    transition: left .6s ease;
}

@media (prefers-reduced-motion: reduce) {
    .btn, .btn:hover, .btn:active { transition: none; transform: none; }
    .btn::before { display: none; }
}

/* header polish: proper side padding, aligned logo and user chip */
.app-header > .container {
    padding-left: 20px;
    padding-right: 20px;
    max-width: 1140px;
}

.app-header { padding: .65rem 0; }

.app-header .brand-logo {
    display: inline-flex;
    align-items: center;
    padding: .35rem .8rem;
    border-radius: .75rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}

.app-header .brand-logo-sm img { width: 150px; }

.app-user-btn { padding: .3rem .8rem .3rem .3rem; }

@media (max-width: 575.98px) {
    .app-header { padding: .55rem 0; }
    .app-header > .container { padding-left: 14px; padding-right: 14px; }
    .app-header .brand-logo { padding: .3rem .6rem; border-radius: .6rem; }
    .app-header .brand-logo-sm img { width: 118px; }
    .app-user-btn { gap: .45rem; padding: .25rem .6rem .25rem .25rem; font-size: .85rem; }
    .app-user-avatar { width: 30px; height: 30px; font-size: .85rem; }
}