/*
|--------------------------------------------------------------------------
| Royal Servicess LLC
| Professional Application Header V4
|--------------------------------------------------------------------------
|
| Exact production selector refinement for the existing V3 header.
|
| Goals:
| - balanced left / center / right structure
| - true centered navigation
| - better desktop side gutters
| - more refined header height
| - cleaner brand proportions
| - compact premium account control
| - preserve existing dropdown/navigation behavior
|
*/


/*
|--------------------------------------------------------------------------
| Header surface
|--------------------------------------------------------------------------
*/

.app-shell-header {
    --shell-v4-max-width: 1580px;
    --shell-v4-desktop-gutter: 200px;

    border-bottom:
        1px solid
        rgba(215, 180, 73, .15);

    background:
        linear-gradient(
            180deg,
            rgba(8, 9, 10, .985) 0%,
            rgba(8, 9, 10, .965) 100%
        );

    box-shadow:
        0 8px 28px
        rgba(0, 0, 0, .20);

    backdrop-filter:
        blur(18px);

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


/*
|--------------------------------------------------------------------------
| Balanced desktop frame
|--------------------------------------------------------------------------
|
| The important change:
|
|      1fr       auto       1fr
|     brand      nav       account
|
| This keeps the navigation geometrically centered even though
| the brand and account blocks are different widths.
|
*/

.app-shell-header__inner {
    grid-template-columns:
        minmax(0, 1fr)
        auto
        minmax(0, 1fr);

    gap: 28px;

    width:
        min(
            var(--shell-v4-max-width),
            calc(
                100vw
                -
                var(--shell-v4-desktop-gutter)
            )
        );

    min-height: 70px;
}


/*
|--------------------------------------------------------------------------
| Brand
|--------------------------------------------------------------------------
*/

.app-shell-brand-group {
    justify-self: start;

    gap: 11px;
}

.app-shell-brand {
    gap: 10px;
}

.app-shell-brand__mark {
    width: 34px;
    height: 34px;

    flex:
        0
        0
        34px;

    border-color:
        rgba(215, 180, 73, .40);

    box-shadow:
        inset
        0
        0
        15px
        rgba(215, 180, 73, .035);
}

.app-shell-brand__mark::before {
    width: 12px;
}

.app-shell-brand__mark::after {
    height: 12px;
}

.app-shell-brand__name {
    font-size: 19px;

    letter-spacing:
        -.012em;
}

.app-shell-context {
    min-height: 24px;

    padding:
        4px
        9px;

    border-color:
        rgba(255, 255, 255, .08);

    background:
        rgba(255, 255, 255, .018);

    font-size: 8px;

    letter-spacing: .10em;
}


/*
|--------------------------------------------------------------------------
| Navigation
|--------------------------------------------------------------------------
*/

.app-shell-nav {
    justify-self: center;

    gap: 6px;
}

.app-shell-nav__link {
    min-height: 40px;

    padding:
        9px
        14px;

    border-radius: 9px;

    font-size: 11px;
    font-weight: 760;

    letter-spacing:
        -.005em;
}

.app-shell-nav__link:hover,
.app-shell-nav__link:focus-visible {
    border-color:
        rgba(255, 255, 255, .095);

    background:
        rgba(255, 255, 255, .028);
}

.app-shell-nav__link.is-active {
    border-color:
        rgba(215, 180, 73, .30);

    background:
        linear-gradient(
            180deg,
            rgba(215, 180, 73, .09),
            rgba(215, 180, 73, .055)
        );

    box-shadow:
        inset
        0
        1px
        0
        rgba(255, 255, 255, .025);
}

.app-shell-nav__link.is-active::after {
    right: 13px;
    left: 13px;
}


/*
|--------------------------------------------------------------------------
| Account control
|--------------------------------------------------------------------------
*/

.app-shell-user {
    justify-self: end;
}

.app-shell-user > summary {
    min-width: 218px;
    min-height: 46px;

    padding:
        6px
        10px
        6px
        7px;

    border-color:
        rgba(255, 255, 255, .09);

    border-radius: 11px;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, .032),
            rgba(255, 255, 255, .018)
        );

    box-shadow:
        inset
        0
        1px
        0
        rgba(255, 255, 255, .018);

    transition:
        border-color .16s ease,
        background .16s ease,
        transform .16s ease,
        box-shadow .16s ease;
}

.app-shell-user > summary:hover,
.app-shell-user > summary:focus-visible,
.app-shell-user[open] > summary {
    border-color:
        rgba(215, 180, 73, .29);

    background:
        linear-gradient(
            180deg,
            rgba(215, 180, 73, .055),
            rgba(215, 180, 73, .025)
        );

    box-shadow:
        0 7px 18px
        rgba(0, 0, 0, .16);

    transform:
        translateY(-1px);
}

.app-shell-user__avatar {
    width: 32px;
    height: 32px;

    flex:
        0
        0
        32px;

    border-radius: 9px;
}

.app-shell-user__avatar svg {
    width: 15px;
    height: 15px;
}

.app-shell-user__identity {
    gap: 3px;
}

.app-shell-user__context {
    font-size: 10px;

    line-height: 1.05;
}

.app-shell-user__email {
    max-width: 148px;

    font-size: 9px;

    line-height: 1.05;
}

.app-shell-user__chevron {
    margin-left: 2px;
}


/*
|--------------------------------------------------------------------------
| Dropdown
|--------------------------------------------------------------------------
*/

.app-shell-menu {
    top:
        calc(
            100%
            +
            9px
        );

    width: 292px;

    border-color:
        rgba(255, 255, 255, .12);

    border-radius: 13px;

    background:
        linear-gradient(
            145deg,
            rgba(27, 29, 33, .99),
            rgba(15, 17, 20, .995)
        );

    box-shadow:
        0 24px 65px
        rgba(0, 0, 0, .48);

    backdrop-filter:
        blur(18px);

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

.app-shell-menu__header {
    padding:
        14px
        15px
        12px;
}

.app-shell-menu__items {
    padding:
        7px;
}

.app-shell-menu__item {
    border-radius: 9px;
}


/*
|--------------------------------------------------------------------------
| Wide desktop refinement
|--------------------------------------------------------------------------
*/

@media (min-width: 1500px) {
    .app-shell-header__inner {
        min-height: 72px;
    }

    .app-shell-brand__name {
        font-size: 20px;
    }

    .app-shell-nav__link {
        padding-right: 15px;
        padding-left: 15px;
    }
}


/*
|--------------------------------------------------------------------------
| Standard laptop
|--------------------------------------------------------------------------
*/

@media (
    max-width: 1480px
) {
    .app-shell-header {
        --shell-v4-desktop-gutter:
            128px;
    }
}

@media (
    max-width: 1280px
) {
    .app-shell-header {
        --shell-v4-desktop-gutter:
            64px;
    }

    .app-shell-header__inner {
        gap: 18px;
    }

    .app-shell-brand-group {
        gap: 8px;
    }

    .app-shell-brand__name {
        font-size: 17px;
    }

    .app-shell-context {
        padding-right: 7px;
        padding-left: 7px;
    }

    .app-shell-nav {
        gap: 3px;
    }

    .app-shell-nav__link {
        padding-right: 10px;
        padding-left: 10px;

        font-size: 10px;
    }

    .app-shell-user > summary {
        min-width: 195px;
    }

    .app-shell-user__email {
        max-width: 125px;
    }
}


/*
|--------------------------------------------------------------------------
| Tablet / narrower application shell
|--------------------------------------------------------------------------
|
| At this width we intentionally return to the V3-style grid behavior,
| because forcing perfectly symmetrical desktop columns would make the
| center navigation too compressed.
|
*/

@media (
    max-width: 980px
) {
    .app-shell-header {
        --shell-v4-desktop-gutter:
            24px;
    }

    .app-shell-header__inner {
        grid-template-columns:
            minmax(0, 1fr)
            auto;

        gap:
            10px
            14px;

        min-height: 0;

        padding:
            11px
            0;
    }

    .app-shell-brand-group {
        grid-column:
            1;

        grid-row:
            1;

        align-self: center;
    }

    .app-shell-user {
        grid-column:
            2;

        grid-row:
            1;
    }

    .app-shell-nav {
        grid-column:
            1
            / -1;

        grid-row:
            2;

        width: 100%;

        justify-content: flex-start;

        overflow-x: auto;

        padding-bottom: 1px;
    }

    .app-shell-nav__link {
        min-height: 36px;

        flex:
            0
            0
            auto;
    }
}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (
    max-width: 640px
) {
    .app-shell-header {
        --shell-v4-desktop-gutter:
            20px;
    }

    .app-shell-header__inner {
        gap:
            9px
            10px;

        padding:
            9px
            0;
    }

    .app-shell-brand-group {
        gap: 7px;
    }

    .app-shell-brand {
        gap: 8px;
    }

    .app-shell-brand__mark {
        width: 31px;
        height: 31px;

        flex-basis: 31px;
    }

    .app-shell-brand__name {
        max-width: 170px;

        font-size: 15px;
    }

    .app-shell-context {
        display: none;
    }

    .app-shell-user > summary {
        min-width: 43px;
        min-height: 43px;

        padding: 5px;

        justify-content: center;
    }

    .app-shell-user__avatar {
        width: 31px;
        height: 31px;

        flex-basis: 31px;
    }

    .app-shell-user__identity,
    .app-shell-user__chevron {
        display: none;
    }

    .app-shell-nav {
        gap: 3px;
    }

    .app-shell-nav__link {
        min-height: 34px;

        padding:
            7px
            10px;

        border-radius: 8px;

        font-size: 9px;
    }

    .app-shell-menu {
        right: 0;

        width:
            min(
                292px,
                calc(100vw - 20px)
            );
    }
}


/*
|--------------------------------------------------------------------------
| Reduced motion
|--------------------------------------------------------------------------
*/

@media (
    prefers-reduced-motion: reduce
) {
    .app-shell-nav__link,
    .app-shell-user > summary,
    .app-shell-user__chevron {
        transition: none;
    }

    .app-shell-user > summary:hover,
    .app-shell-user > summary:focus-visible,
    .app-shell-user[open] > summary {
        transform: none;
    }
}