/*
 * ICARYS V18.2A
 * Canonical shared application navigation.
 *
 * Intentionally scoped to .icx-nav so it does not alter
 * Dashboard cards, page buttons, tables, or legacy page CSS.
 */

:root {
    --icx-nav-ink: #07111f;
    --icx-nav-text: #233144;
    --icx-nav-muted: #708095;
    --icx-nav-line: #dce5ee;
    --icx-nav-soft: #f3f7fb;
    --icx-nav-blue: #1769ff;
}


.icx-nav,
.icx-nav *,
.icx-nav *::before,
.icx-nav *::after {
    box-sizing: border-box;
}


.icx-nav {
    position: relative;
    z-index: 1000;

    width: 100%;

    border-bottom:
        1px solid
        var(--icx-nav-line);

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

    backdrop-filter:
        blur(16px);

    -webkit-backdrop-filter:
        blur(16px);

    font-family:
        Inter,
        ui-sans-serif,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}


.icx-nav__inner {
    width:
        min(
            1540px,
            calc(
                100% - 30px
            )
        );

    min-height: 62px;

    margin: 0 auto;

    display: flex;
    align-items: center;

    gap: 22px;
}


.icx-nav__brand {
    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;

    gap: 9px;

    color:
        var(--icx-nav-ink)
        !important;

    text-decoration: none;
}


.icx-nav__mark {
    width: 31px;
    height: 31px;

    display: grid;
    place-items: center;

    border:
        1px solid
        #bdd0e1;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            #ffffff 0,
            #eff8ff 42%,
            #d6efff 100%
        );

    color:
        #07111f;

    font-size: 13px;
    font-weight: 900;
}


.icx-nav__identity {
    display: grid;
    gap: 1px;
}


.icx-nav__name {
    color:
        var(--icx-nav-ink);

    font-size: 15px;
    line-height: 1.05;

    font-weight: 900;

    letter-spacing:
        -.025em;
}


.icx-nav__sub {
    color:
        var(--icx-nav-muted);

    font-size: 8px;
    line-height: 1;

    font-weight: 800;

    letter-spacing:
        .11em;

    text-transform:
        uppercase;
}


.icx-nav__links {
    min-width: 0;

    margin-left: auto;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    flex-wrap: wrap;

    gap: 4px;
}


.icx-nav__link {
    min-height: 32px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding:
        0 9px;

    border:
        1px solid
        transparent;

    border-radius:
        9px;

    background:
        transparent;

    color:
        var(--icx-nav-text)
        !important;

    -webkit-text-fill-color:
        var(--icx-nav-text)
        !important;

    text-decoration:
        none;

    font-size:
        11px;

    line-height:
        1;

    font-weight:
        720;

    transition:
        background .15s ease,
        color .15s ease,
        border-color .15s ease;
}


.icx-nav__link:hover,
.icx-nav__link:focus-visible {
    border-color:
        #d3e0ec;

    background:
        var(--icx-nav-soft);

    color:
        #07111f
        !important;

    -webkit-text-fill-color:
        #07111f
        !important;
}


.icx-nav__link.is-active {
    border-color:
        #07111f;

    background:
        #07111f;

    color:
        #ffffff
        !important;

    -webkit-text-fill-color:
        #ffffff
        !important;
}


.icx-nav__link.is-logout {
    margin-left: 2px;

    color:
        #697789
        !important;

    -webkit-text-fill-color:
        #697789
        !important;
}


@media (
    max-width: 1180px
) {

    .icx-nav__inner {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap: 8px;

        padding:
            12px 0;
    }


    .icx-nav__links {
        width: 100%;

        margin-left: 0;

        justify-content:
            flex-start;
    }
}


@media (
    max-width: 640px
) {

    .icx-nav__inner {
        width:
            min(
                100% - 20px,
                1540px
            );
    }


    .icx-nav__links {
        gap: 3px;
    }


    .icx-nav__link {
        min-height:
            30px;

        padding:
            0 8px;

        font-size:
            10px;
    }
}