.ufs-app-shell {
    min-height: 100vh;
    background: var(--ufs-background);
    color: var(--ufs-navy);
}

.ufs-app-frame {
    display: grid;
    min-height: calc(100vh - var(--ufs-header-height, 64px));
}

.ufs-app-frame--with-navigation {
    grid-template-columns: minmax(15.5rem, 17rem) minmax(0, 1fr);
}

.ufs-app-frame--without-navigation {
    grid-template-columns: minmax(0, 1fr);
}

.ufs-app-sidebar {
    position: sticky;
    top: var(--ufs-header-height, 64px);
    align-self: start;
    height: calc(100vh - var(--ufs-header-height, 64px));
    overflow-y: auto;
    padding: var(--ufs-space-5) var(--ufs-space-3);
    border-inline-end: 1px solid var(--ufs-gray-lighter);
    background: var(--ufs-surface);
}

.ufs-app-main {
    min-width: 0;
    padding: clamp(1rem, 2vw, 2rem);
}

.ufs-app-main--public {
    padding: 0;
}

.ufs-app-content {
    width: 100%;
    margin-inline: auto;
}

.ufs-content-standard { max-width: var(--ufs-content-standard, 1180px); }
.ufs-content-wide { max-width: var(--ufs-content-wide, 1440px); }
.ufs-content-fluid { max-width: none; }

.ufs-app-footer {
    border-top: 1px solid var(--ufs-gray-lighter);
    background: var(--ufs-surface);
}

.ufs-context-nav {
    display: grid;
    gap: var(--ufs-space-5);
}

.ufs-context-nav__identity {
    display: flex;
    align-items: center;
    gap: var(--ufs-space-3);
    padding: var(--ufs-space-3);
    border: 1px solid color-mix(in srgb, var(--ufs-context-primary) 18%, var(--ufs-gray-lighter));
    border-radius: var(--ufs-radius);
    background: var(--ufs-context-lighter);
}

.ufs-context-nav__icon {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 auto;
    border-radius: var(--ufs-radius-md);
    background: var(--ufs-context-primary);
    color: #fff;
    font-size: 1.2rem;
}

.ufs-context-nav__icon--personal-photo {
    width: 3.25rem;
    height: 3.25rem;
    overflow: hidden;
    border-radius: 50%;
    background: #fff;
}

.ufs-context-nav__icon--personal-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.ufs-context-nav__eyebrow {
    color: var(--ufs-gray-600);
    font-size: var(--ufs-font-size-xs);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.ufs-context-nav__title {
    color: var(--ufs-navy);
    font-size: .9rem;
    line-height: 1.2;
    font-weight: 800;
}

.ufs-context-nav__links {
    display: grid;
    gap: .22rem;
}

.ufs-context-nav__link {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 2.45rem;
    padding: .5rem .72rem;
    border-radius: var(--ufs-radius-md);
    color: var(--ufs-gray-700);
    font-size: .84rem;
    line-height: 1.2;
    font-weight: 650;
    text-decoration: none;
    transition: background-color var(--ufs-duration-fast) var(--ufs-ease-standard), color var(--ufs-duration-fast) var(--ufs-ease-standard), transform var(--ufs-duration-fast) var(--ufs-ease-standard);
}

.ufs-context-nav__link:hover {
    background: var(--ufs-context-lighter);
    color: var(--ufs-context-darker);
}

.ufs-context-nav__link.active {
    background: var(--ufs-context-primary);
    color: #fff;
    box-shadow: var(--ufs-shadow-sm);
}

.ufs-context-nav__link i {
    width: 1.25rem;
    text-align: center;
}

.ufs-public-layout,
.ufs-public-layout__content {
    min-height: 100vh;
}


.ufs-auth-layout {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(22rem, 36rem) minmax(0, 1fr);
    background: #f5f7fb;
}

.ufs-auth-profile {
    position: sticky;
    top: 0;
    isolation: isolate;
    display: flex;
    align-items: center;
    min-height: 100vh;
    height: 100vh;
    overflow: hidden;
    padding: clamp(1.5rem, 3vw, 3rem);
    background:
        radial-gradient(circle at 12% 10%, rgba(10, 99, 224, .32), transparent 32%),
        radial-gradient(circle at 90% 88%, rgba(27, 148, 96, .25), transparent 34%),
        linear-gradient(145deg, #061a33 0%, #0b2d4b 51%, #082c37 100%);
    color: #fff;
}

.ufs-auth-profile::after {
    content: "";
    position: absolute;
    inset: auto -18% -6rem -10%;
    height: 13rem;
    border-radius: 50%;
    border-top: 1px solid rgba(255, 255, 255, .14);
    box-shadow: 0 -1.6rem 0 rgba(10, 99, 224, .08), 0 -3.2rem 0 rgba(27, 148, 96, .05);
    transform: rotate(-5deg);
    pointer-events: none;
    z-index: -1;
}

.ufs-auth-profile__glow {
    position: absolute;
    width: 17rem;
    height: 17rem;
    border-radius: 50%;
    filter: blur(72px);
    opacity: .17;
    pointer-events: none;
    z-index: -1;
}

.ufs-auth-profile__glow--blue { top: -6rem; left: -6rem; background: #0a63e0; }
.ufs-auth-profile__glow--green { right: -7rem; bottom: 3rem; background: #1b9460; }

.ufs-auth-profile__content {
    width: min(100%, 29.5rem);
    margin-inline: auto;
}

.ufs-auth-profile__logo-link {
    display: inline-flex;
    align-items: center;
    gap: .85rem;
    margin-bottom: 1.65rem;
    color: inherit;
    text-decoration: none;
}

.ufs-auth-profile__logo-badge {
    display: grid;
    place-items: center;
    width: 4.65rem;
    height: 4.65rem;
    padding: .55rem;
    flex: 0 0 auto;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 50%;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 1rem 2.4rem rgba(0, 0, 0, .22);
}

.ufs-auth-profile__logo-badge img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ufs-auth-profile__brand-copy { display: grid; gap: .05rem; }
.ufs-auth-profile__brand-copy strong { font-size: 1.08rem; letter-spacing: .08em; }
.ufs-auth-profile__brand-copy small { color: rgba(255,255,255,.62); font-size: .76rem; }

.ufs-auth-profile__heading { margin-bottom: 1.55rem; }
.ufs-auth-profile__eyebrow {
    margin: 0 0 .5rem;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255,255,255,.58);
}

.ufs-auth-profile__heading h1 {
    margin: 0 0 .8rem;
    max-width: 28rem;
    font-size: clamp(1.7rem, 2.4vw, 2.4rem);
    line-height: 1.08;
    font-weight: 760;
    letter-spacing: -.032em;
    color: #fff;
}

.ufs-auth-profile__intro {
    margin: 0;
    max-width: 28rem;
    font-size: .92rem;
    line-height: 1.62;
    color: rgba(255,255,255,.72);
}

.ufs-auth-profile__features { display: grid; gap: .7rem; }
.ufs-auth-profile__feature {
    display: grid;
    grid-template-columns: 2.3rem minmax(0,1fr);
    gap: .75rem;
    padding: .82rem .9rem;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: .9rem;
    background: rgba(255,255,255,.05);
    backdrop-filter: blur(10px);
}

.ufs-auth-profile__feature-icon {
    display: grid;
    place-items: center;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: .7rem;
    background: rgba(255,255,255,.1);
    color: #fff;
    font-size: 1rem;
}

.ufs-auth-profile__feature strong,
.ufs-auth-profile__feature span { display: block; }
.ufs-auth-profile__feature strong { margin-bottom: .13rem; font-size: .9rem; color: #fff; }
.ufs-auth-profile__feature div > span { font-size: .77rem; line-height: 1.45; color: rgba(255,255,255,.62); }

.ufs-auth-profile__trust {
    display: flex;
    gap: .6rem;
    margin-top: 1rem;
    padding-top: .9rem;
    border-top: 1px solid rgba(255,255,255,.1);
    font-size: .74rem;
    line-height: 1.45;
    color: rgba(255,255,255,.54);
}
.ufs-auth-profile__trust i { margin-top: .08rem; color: #70d0a6; }

.ufs-auth-layout__content {
    display: grid;
    place-items: center;
    min-width: 0;
    min-height: 100vh;
    padding: clamp(1.25rem, 3vw, 3rem);
}

.ufs-auth-form-shell {
    width: min(100%, 31rem);
    padding: clamp(1.5rem, 3vw, 2.5rem);
    border: 1px solid #e1e7ef;
    border-radius: 1.5rem;
    background: rgba(255,255,255,.98);
    box-shadow: 0 1.5rem 4rem rgba(11,45,75,.10);
}

.ufs-auth-form-shell--register { width: min(100%, 53rem); }

.ufs-auth-form-heading {
    display: grid;
    grid-template-columns: 3.1rem minmax(0,1fr);
    gap: 1rem;
    align-items: start;
    margin-bottom: 1.55rem;
}

.ufs-auth-form-heading__icon {
    display: grid;
    place-items: center;
    width: 3.1rem;
    height: 3.1rem;
    border-radius: 1rem;
    background: rgba(27,148,96,.1);
    color: #1b9460;
    font-size: 1.2rem;
}

.ufs-auth-form-heading__eyebrow {
    margin: 0 0 .22rem;
    color: #1b9460;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.ufs-auth-form-heading h2 { margin: 0; color: #0b2d4b; font-size: clamp(1.65rem,2vw,2.05rem); font-weight: 760; letter-spacing: -.025em; }
.ufs-auth-form-heading p:last-child { margin: .35rem 0 0; color: #6b7785; font-size: .9rem; }
.ufs-auth-form-heading__title-row { display: flex; align-items: center; gap: .5rem; }

.ufs-auth-form { display: grid; gap: 1rem; }
.ufs-auth-field { min-width: 0; }
.ufs-auth-field label,
.ufs-auth-label-row label { display: block; margin-bottom: .42rem; color: #18324a; font-size: .87rem; font-weight: 700; }
.ufs-auth-label-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.ufs-auth-label-row label { margin-bottom: .42rem; }
.ufs-auth-optional { margin-inline-start: .25rem; color: #97a2ad; font-size: .68rem; font-weight: 600; }

.ufs-auth-field .form-control {
    min-height: 3rem;
    border: 1px solid #d8e0e8;
    border-radius: .8rem;
    background: #fbfcfe;
    color: #102a43;
    box-shadow: none;
}
.ufs-auth-field .form-control:focus { border-color: rgba(27,148,96,.72); background: #fff; box-shadow: 0 0 0 .2rem rgba(27,148,96,.10); }

.ufs-auth-input-wrap { position: relative; }
.ufs-auth-input-wrap > i { position: absolute; top: 50%; left: 1rem; transform: translateY(-50%); z-index: 2; color: #83909d; }
.ufs-auth-input-wrap .form-control { padding-left: 2.8rem; }
.ufs-auth-field__help { margin-top: .35rem; color: #86919d; font-size: .74rem; line-height: 1.4; }

.ufs-auth-options-row { padding: .2rem 0; }
.ufs-auth-check,
.ufs-auth-acknowledgement { display: flex; align-items: flex-start; gap: .65rem; cursor: pointer; }
.ufs-auth-check input,
.ufs-auth-acknowledgement input { width: 1rem; height: 1rem; margin-top: .15rem; accent-color: #1b9460; }
.ufs-auth-check span,
.ufs-auth-acknowledgement span { display: grid; }
.ufs-auth-check strong,
.ufs-auth-acknowledgement strong { color: #213b52; font-size: .84rem; }
.ufs-auth-check small,
.ufs-auth-acknowledgement small { margin-top: .12rem; color: #7f8a96; font-size: .72rem; line-height: 1.35; }

.ufs-auth-submit {
    min-height: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    width: 100%;
    border-radius: .85rem;
    font-weight: 700;
}
.ufs-auth-switch {
    display: grid;
    gap: .25rem;
    margin-top: 1.15rem;
    padding-top: 1rem;
    border-top: 1px solid #edf0f4;
    color: #7d8792;
    font-size: .8rem;
}
.ufs-auth-switch a { color: #0a63e0; font-weight: 700; text-decoration: none; }
.ufs-auth-switch a:hover { text-decoration: underline; }

.ufs-auth-alert { display: flex; gap: .55rem; align-items: flex-start; padding: .75rem .85rem; border-radius: .8rem; font-size: .8rem; }
.ufs-auth-alert--danger { background: #fff0f1; color: #a81622; border: 1px solid #f5c8cc; }
.ufs-auth-alert--success { background: #edf9f3; color: #126843; border: 1px solid #c3ead8; }

.ufs-auth-register-context {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin: -0.2rem 0 1.2rem;
    padding: .7rem .8rem;
    border: 1px solid #e5ebf1;
    border-radius: .8rem;
    background: #f8fafc;
    color: #4d6173;
}
.ufs-auth-register-context i { color: #1b9460; }
.ufs-auth-register-context div { display: grid; }
.ufs-auth-register-context small { color: #87929d; font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.ufs-auth-register-context strong { font-size: .82rem; color: #213b52; }

.ufs-auth-register-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .9rem 1rem; }
.ufs-auth-register-form { gap: .9rem; }
.ufs-auth-register-form .ufs-auth-field .form-control { min-height: 2.65rem; }
.ufs-auth-acknowledgement { padding: .75rem .85rem; border: 1px solid #e5ebf1; border-radius: .8rem; background: #f8fafc; }
.ufs-auth-register-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .2rem; }
.ufs-auth-switch--inline { margin: 0; padding: 0; border: 0; }
.ufs-auth-submit--register { width: auto; min-width: 11rem; padding-inline: 1.35rem; }

@media (max-width: 1199.98px) {
    .ufs-auth-layout { grid-template-columns: minmax(20rem, 30rem) minmax(0,1fr); }
    .ufs-auth-profile { padding: 2rem; }
    .ufs-auth-profile__heading h1 { font-size: 1.9rem; }
    .ufs-auth-profile__feature div > span { font-size: .72rem; }
}

@media (max-width: 991.98px) {
    .ufs-app-frame { grid-template-columns: 1fr; }
    .ufs-app-sidebar { position: static; height: auto; padding: .75rem 1rem 0; border-inline-end: 0; background: transparent; }
    .ufs-context-nav__links { display: flex; overflow-x: auto; padding-bottom: .5rem; scrollbar-width: thin; }
    .ufs-context-nav__link { white-space: nowrap; }
    .ufs-app-main { padding-top: 1rem; }

    .ufs-auth-layout { grid-template-columns: minmax(18rem, 24rem) minmax(0,1fr); }
    .ufs-auth-profile { padding: 1.5rem; }
    .ufs-auth-profile__features { gap: .5rem; }
    .ufs-auth-profile__feature { padding: .7rem; }
    .ufs-auth-profile__heading h1 { font-size: 1.65rem; }
    .ufs-auth-register-grid { grid-template-columns: 1fr; }
}

@media (max-height: 820px) and (min-width: 768px) {
    .ufs-auth-profile__logo-link { margin-bottom: 1rem; }
    .ufs-auth-profile__logo-badge { width: 3.9rem; height: 3.9rem; }
    .ufs-auth-profile__heading { margin-bottom: 1rem; }
    .ufs-auth-profile__heading h1 { font-size: 1.65rem; margin-bottom: .5rem; }
    .ufs-auth-profile__intro { font-size: .82rem; line-height: 1.45; }
    .ufs-auth-profile__features { gap: .45rem; }
    .ufs-auth-profile__feature { padding: .58rem .7rem; }
    .ufs-auth-profile__trust { margin-top: .7rem; padding-top: .65rem; }
    .ufs-auth-layout--register .ufs-auth-profile__feature div > span { display: none; }
    .ufs-auth-form-shell { padding: 1.35rem 1.5rem; }
    .ufs-auth-form-heading { margin-bottom: 1rem; }
    .ufs-auth-register-context { margin-bottom: .8rem; }
    .ufs-auth-register-grid { gap: .65rem .85rem; }
    .ufs-auth-register-form .ufs-auth-field .form-control { min-height: 2.45rem; }
}

@media (max-width: 767.98px) {
    .ufs-context-nav__identity { display: none; }
    .ufs-auth-layout { grid-template-columns: 1fr; }
    .ufs-auth-profile { position: relative; height: auto; min-height: auto; padding: 1.2rem 1.25rem; }
    .ufs-auth-profile__content { width: 100%; }
    .ufs-auth-profile__logo-link { margin: 0 0 .85rem; }
    .ufs-auth-profile__logo-badge { width: 3.5rem; height: 3.5rem; padding: .42rem; }
    .ufs-auth-profile__heading { margin-bottom: 0; }
    .ufs-auth-profile__heading h1 { margin-bottom: .45rem; font-size: 1.4rem; }
    .ufs-auth-profile__intro { font-size: .82rem; line-height: 1.45; }
    .ufs-auth-profile__features, .ufs-auth-profile__trust { display: none; }
    .ufs-auth-layout__content { min-height: auto; padding: 1rem; }
    .ufs-auth-form-shell, .ufs-auth-form-shell--register { width: 100%; padding: 1.25rem; border-radius: 1.1rem; }
    .ufs-auth-register-grid { grid-template-columns: 1fr; }
    .ufs-auth-register-actions { align-items: stretch; flex-direction: column-reverse; }
    .ufs-auth-submit--register { width: 100%; }
}

/* ==========================================================================\n   Auto-collapsing application navigation\n   Desktop sidebars stay compact by default and expand on hover or keyboard focus.\n   ========================================================================== */
@media (min-width: 992px) {
    .ufs-app-frame--with-navigation {
        grid-template-columns: var(--ufs-sidebar-collapsed-width, 76px) minmax(0, 1fr);
        transition: grid-template-columns var(--ufs-duration-normal, 220ms) var(--ufs-ease-standard, ease);
    }

    .ufs-app-frame--with-navigation:has(.ufs-app-sidebar:hover),
    .ufs-app-frame--with-navigation:has(.ufs-app-sidebar:focus-within) {
        grid-template-columns: var(--ufs-sidebar-width, 280px) minmax(0, 1fr);
    }

    .ufs-app-sidebar {
        width: 100%;
        overflow-x: hidden;
        padding-inline: .65rem;
        transition: padding-inline var(--ufs-duration-normal, 220ms) var(--ufs-ease-standard, ease),
                    box-shadow var(--ufs-duration-fast, 160ms) var(--ufs-ease-standard, ease);
    }

    .ufs-app-sidebar:hover,
    .ufs-app-sidebar:focus-within {
        padding-inline: var(--ufs-space-3);
        box-shadow: var(--ufs-shadow-md);
    }

    .ufs-context-nav {
        min-width: 0;
    }

    .ufs-context-nav__identity {
        justify-content: center;
        padding-inline: .35rem;
        overflow: hidden;
        transition: justify-content var(--ufs-duration-normal, 220ms) var(--ufs-ease-standard, ease),
                    padding-inline var(--ufs-duration-normal, 220ms) var(--ufs-ease-standard, ease);
    }

    .ufs-app-sidebar:hover .ufs-context-nav__identity,
    .ufs-app-sidebar:focus-within .ufs-context-nav__identity {
        justify-content: flex-start;
        padding-inline: var(--ufs-space-3);
    }

    .ufs-context-nav__identity-copy,
    .ufs-context-nav__link > span {
        max-width: 0;
        opacity: 0;
        overflow: hidden;
        white-space: nowrap;
        pointer-events: none;
        transform: translateX(-.35rem);
        transition: max-width var(--ufs-duration-normal, 220ms) var(--ufs-ease-standard, ease),
                    opacity var(--ufs-duration-fast, 160ms) var(--ufs-ease-standard, ease),
                    transform var(--ufs-duration-normal, 220ms) var(--ufs-ease-standard, ease);
    }

    [dir="rtl"] .ufs-context-nav__identity-copy,
    [dir="rtl"] .ufs-context-nav__link > span {
        transform: translateX(.35rem);
    }

    .ufs-app-sidebar:hover .ufs-context-nav__identity-copy,
    .ufs-app-sidebar:focus-within .ufs-context-nav__identity-copy,
    .ufs-app-sidebar:hover .ufs-context-nav__link > span,
    .ufs-app-sidebar:focus-within .ufs-context-nav__link > span {
        max-width: 14rem;
        opacity: 1;
        pointer-events: auto;
        transform: translateX(0);
    }

    .ufs-context-nav__link {
        justify-content: center;
        gap: 0;
        padding-inline: .65rem;
        overflow: hidden;
        transition: gap var(--ufs-duration-normal, 220ms) var(--ufs-ease-standard, ease),
                    padding-inline var(--ufs-duration-normal, 220ms) var(--ufs-ease-standard, ease),
                    background-color var(--ufs-duration-fast) var(--ufs-ease-standard),
                    color var(--ufs-duration-fast) var(--ufs-ease-standard),
                    transform var(--ufs-duration-fast) var(--ufs-ease-standard);
    }

    .ufs-app-sidebar:hover .ufs-context-nav__link,
    .ufs-app-sidebar:focus-within .ufs-context-nav__link {
        justify-content: flex-start;
        gap: .62rem;
        padding-inline: .72rem;
    }

    .ufs-context-nav__link i {
        flex: 0 0 1.25rem;
        font-size: 1.12rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ufs-app-frame--with-navigation,
    .ufs-app-sidebar,
    .ufs-context-nav__identity,
    .ufs-context-nav__identity-copy,
    .ufs-context-nav__link,
    .ufs-context-nav__link > span {
        transition: none !important;
    }
}

/* Facility portfolio selector: the portfolio has no active facility context yet,
   so the sidebar becomes a facility picker instead of showing disabled commands. */
.ufs-facility-selector {
    display: grid;
    gap: .7rem;
}

.ufs-facility-selector__heading {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: 0 .65rem;
    color: var(--ufs-gray-600);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.ufs-facility-selector__heading i {
    color: var(--ufs-context-primary);
    font-size: 1rem;
}

.ufs-facility-selector__list {
    display: grid;
    gap: .42rem;
}

.ufs-facility-selector__item {
    width: 100%;
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr) auto;
    align-items: center;
    gap: .65rem;
    padding: .62rem .68rem;
    border: 1px solid color-mix(in srgb, var(--ufs-context-primary) 14%, var(--ufs-gray-lighter));
    border-radius: var(--ufs-radius-md);
    background: var(--ufs-surface);
    color: var(--ufs-navy);
    text-align: start;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .04);
    transition: transform var(--ufs-duration-fast) var(--ufs-ease-standard),
                box-shadow var(--ufs-duration-fast) var(--ufs-ease-standard),
                border-color var(--ufs-duration-fast) var(--ufs-ease-standard),
                background-color var(--ufs-duration-fast) var(--ufs-ease-standard);
}

.ufs-facility-selector__item:hover,
.ufs-facility-selector__item:focus-visible {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--ufs-context-primary) 38%, var(--ufs-gray-lighter));
    background: var(--ufs-context-lighter);
    box-shadow: 0 10px 22px rgba(15, 23, 42, .11);
    outline: none;
}

.ufs-facility-selector__item-icon {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: .72rem;
    background: color-mix(in srgb, var(--ufs-context-primary) 12%, #fff);
    color: var(--ufs-context-primary);
    font-size: 1rem;
}

.ufs-facility-selector__item-copy {
    min-width: 0;
    display: grid;
    gap: .12rem;
}

.ufs-facility-selector__item-copy strong {
    overflow: hidden;
    color: var(--ufs-navy);
    font-size: .84rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ufs-facility-selector__item-copy small {
    overflow: hidden;
    color: var(--ufs-gray-600);
    font-size: .7rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ufs-facility-selector__item-arrow {
    color: var(--ufs-gray-500);
    font-size: .78rem;
}


.ufs-facility-selector__create {
    width: 100%;
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr) auto;
    align-items: center;
    gap: .65rem;
    margin-top: .55rem;
    padding: .72rem .68rem;
    border: 1px solid color-mix(in srgb, #E09E00 58%, #f8e9b2);
    border-radius: var(--ufs-radius-md);
    background: linear-gradient(145deg, #fffdf4 0%, #fff4c8 100%);
    color: #7a5200;
    text-align: start;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(176, 118, 0, .10), inset 0 1px 0 rgba(255, 255, 255, .9);
    transition: transform var(--ufs-duration-fast) var(--ufs-ease-standard),
                box-shadow var(--ufs-duration-fast) var(--ufs-ease-standard),
                border-color var(--ufs-duration-fast) var(--ufs-ease-standard),
                background-color var(--ufs-duration-fast) var(--ufs-ease-standard);
}

.ufs-facility-selector__create .ufs-facility-selector__item-icon {
    background: #fff3bf;
    color: #a56f00;
}

.ufs-facility-selector__create .ufs-facility-selector__item-copy strong {
    color: #684600;
}

.ufs-facility-selector__create .ufs-facility-selector__item-copy small,
.ufs-facility-selector__create .ufs-facility-selector__item-arrow {
    color: #8a671d;
}

.ufs-facility-selector__create:hover,
.ufs-facility-selector__create:focus-visible {
    transform: translateY(-2px);
    border-color: #d18f00;
    background: linear-gradient(145deg, #fff9df 0%, #ffe9a1 100%);
    box-shadow: 0 12px 26px rgba(176, 118, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .95);
    outline: none;
}

.ufs-facility-selector__state {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .72rem;
    border-radius: var(--ufs-radius-md);
    background: var(--ufs-context-lighter);
    color: var(--ufs-gray-600);
    font-size: .78rem;
    font-weight: 650;
}

.ufs-facility-selector__state--error {
    color: var(--ufs-danger, #C71F2A);
}

@media (min-width: 992px) {
    .ufs-app-sidebar:not(:hover):not(:focus-within) .ufs-facility-selector__heading > span,
    .ufs-app-sidebar:not(:hover):not(:focus-within) .ufs-facility-selector__item-copy,
    .ufs-app-sidebar:not(:hover):not(:focus-within) .ufs-facility-selector__item-arrow,
    .ufs-app-sidebar:not(:hover):not(:focus-within) .ufs-facility-selector__state > span {
        display: none;
    }

    .ufs-app-sidebar:not(:hover):not(:focus-within) .ufs-facility-selector__heading,
    .ufs-app-sidebar:not(:hover):not(:focus-within) .ufs-facility-selector__state {
        justify-content: center;
    }

    .ufs-app-sidebar:not(:hover):not(:focus-within) .ufs-facility-selector__item,
    .ufs-app-sidebar:not(:hover):not(:focus-within) .ufs-facility-selector__create {
        grid-template-columns: 2.25rem;
        padding-inline: .4rem;
    }
}