/* Independent round Dynamic Island navbar — overrides full-bleed bar */

.dashboard-body {
    --nav-island-gap: 8px;
    --nav-island-h: 54px;
    --nav-island-below: 12px;
    --nav-h: calc(env(safe-area-inset-top, 0px) + var(--nav-island-gap) + var(--nav-island-h) + var(--nav-island-below));
    padding-top: var(--nav-h);
}

@media (max-width: 860px) {
    .dashboard-body {
        --nav-island-h: 52px;
        --nav-island-gap: 6px;
        --nav-island-below: 10px;
        --nav-h: calc(env(safe-area-inset-top, 0px) + var(--nav-island-gap) + var(--nav-island-h) + var(--nav-island-below));
        padding-top: var(--nav-h);
    }
}

nav.navbar.navbar--island,
:root[data-theme="dark"] nav.navbar.navbar--island,
:root:not([data-theme="dark"]) nav.navbar.navbar--island,
html[data-theme="dark"] nav.navbar.navbar--island,
html:not([data-theme="dark"]) nav.navbar.navbar--island {
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 0;
    padding: calc(env(safe-area-inset-top, 0px) + var(--nav-island-gap, 8px)) 8px 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background: transparent;
    border: 0;
    border-bottom: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    overflow: visible;
    transform: none;
    will-change: auto;
    pointer-events: none;
}

nav.navbar.navbar--island .nav-island,
nav.navbar.navbar--island .nav-island a,
nav.navbar.navbar--island .nav-island button {
    pointer-events: auto;
}

.navbar--island .nav-island {
    --island-bg: var(--c-bg-elev, var(--c-bg-glass, #fff));
    --island-border: var(--c-border-soft, rgba(60, 60, 67, 0.12));
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 4px 8px;
    width: min(1680px, calc(100vw - 20px));
    max-width: calc(100vw - 20px);
    min-height: var(--nav-island-h, 54px);
    padding: 5px 18px 5px 18px;
    border-radius: 999px;
    background: var(--island-bg);
    border: 1px solid var(--island-border);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.28) inset,
        0 10px 32px rgba(0, 0, 0, 0.10),
        0 2px 8px rgba(0, 0, 0, 0.05);
    -webkit-backdrop-filter: blur(28px) saturate(190%);
    backdrop-filter: blur(28px) saturate(190%);
    box-sizing: border-box;
    overflow: hidden;
    pointer-events: auto;
}

:root[data-theme="dark"] .navbar--island .nav-island,
html[data-theme="dark"] .navbar--island .nav-island {
    --island-bg: var(--c-bg-elev, var(--c-bg-glass, rgba(28, 28, 30, 0.78)));
    --island-border: var(--c-border-soft, rgba(255, 255, 255, 0.10));
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.08) inset,
        0 12px 36px rgba(0, 0, 0, 0.42),
        0 2px 10px rgba(0, 0, 0, 0.24);
}

html.preload .navbar--island .nav-island,
html:not(.mio-nav-island-ready) .navbar--island .nav-island {
    opacity: 0;
}

#mio-page {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    width: 100%;
}

.navbar--island .nav-brand,
.navbar--island .nav-brand:hover,
.navbar--island .nav-brand:active,
.navbar--island .nav-brand.active,
.navbar--island a[data-nav-slot="brand"],
.navbar--island a[data-nav-slot="brand"]:hover,
.navbar--island a[data-nav-slot="brand"]:active {
    background: transparent;
    box-shadow: none;
    border: 0;
}

body.prem-body [data-theme-toggle] {
    display: none;
    pointer-events: none;
}

body.prem-body {
    background: #040614;
}

.navbar--island .nav-logo,
.navbar--island .nav-brand img,
.navbar--island .nav-brand svg {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
}

.navbar--island .nav-right,
:root[data-theme="dark"] .navbar--island .nav-right,
:root:not([data-theme="dark"]) .navbar--island .nav-right,
html[data-theme="dark"] .navbar--island .nav-right,
html:not([data-theme="dark"]) .navbar--island .nav-right {
    order: 2;
    display: flex;
    flex: 1 1 auto;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    min-width: 0;
    margin: 0;
    padding: 0;
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: auto;
    max-height: none;
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transform: none;
    animation: none;
}

.navbar--island,
.navbar--island * {
    cursor: default;
}

.navbar--island .nav-link,
.navbar--island .nav-user {
    border-radius: 999px;
}

@media (hover: hover) and (pointer: fine) {
    .navbar--island .nav-link:hover:not(.active) {
        color: var(--c-text, #1c1c1e);
        background: var(--c-bg-soft, rgba(118, 118, 128, 0.12));
    }

    .navbar--island .nav-user:hover {
        background: color-mix(in srgb, var(--c-bg-soft, #f2f2f7) 80%, var(--c-text, #1c1c1e) 8%);
    }
}

.navbar--island .nav-burger {
    order: 3;
    display: none;
    width: 40px;
    height: 40px;
    margin: 0 0 0 auto;
    border-radius: 999px;
    background: color-mix(in srgb, var(--c-bg-soft, #f2f2f7) 80%, transparent);
    border: 0;
    flex-shrink: 0;
}

.navbar--island .nav-burger:hover {
    background: var(--c-bg-soft, #f2f2f7);
}

.navbar--island .mio-theme-switch--lottie.mio-theme-switch--navbar {
    width: 76px;
    height: 42px;
    border-radius: 999px;
    flex-shrink: 0;
}

@media (min-width: 861px) {
    .navbar--island .nav-burger {
        display: none;
    }

    .navbar--island .nav-island {
        flex-wrap: nowrap;
        white-space: nowrap;
        max-width: min(1680px, calc(100vw - 20px));
    }

    .navbar--island .nav-brand > span {
        display: inline-block;
        overflow: hidden;
        white-space: nowrap;
        vertical-align: middle;
    }

    .navbar--island .nav-link {
        padding: 6px 12px;
        min-height: 36px;
        font-size: 13px;
        white-space: nowrap;
    }

    .navbar--island .nav-user {
        padding: 3px 10px 3px 3px;
        min-height: 38px;
        background: color-mix(in srgb, var(--c-bg-soft, #f5f5f5) 70%, transparent);
        white-space: nowrap;
    }
}

@media (max-width: 860px) {
    /* Beat dashboard/ios `height: 60px` + `top: var(--nav-h)` so the island can expand. */
    .dashboard-body {
        --nav-island-h: 52px;
        --nav-island-gap: 6px;
        --nav-island-below: 10px;
        --nav-h: calc(env(safe-area-inset-top, 0px) + var(--nav-island-gap) + var(--nav-island-h) + var(--nav-island-below));
        padding-top: var(--nav-h);
    }

    nav.navbar.navbar--island,
    :root[data-theme="dark"] nav.navbar.navbar--island,
    :root:not([data-theme="dark"]) nav.navbar.navbar--island,
    html[data-theme="dark"] nav.navbar.navbar--island,
    html:not([data-theme="dark"]) nav.navbar.navbar--island {
        height: auto;
        min-height: 0;
        max-height: none;
        overflow: visible;
        isolation: isolate;
        background: transparent;
        border: 0;
        box-shadow: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .navbar--island .nav-island {
        width: calc(100vw - 12px);
        max-width: calc(100vw - 12px);
        padding: 5px 8px 5px 12px;
        overflow: hidden;
        height: auto;
        max-height: none;
    }

    body.nav-open .navbar--island .nav-island {
        flex-wrap: wrap;
        align-items: flex-start;
        padding-bottom: 10px;
        border-radius: 28px;
        overflow: visible;
        height: auto;
    }

    .navbar--island .nav-brand {
        flex: 1 1 auto;
        min-width: 0;
        order: 1;
    }

    .navbar--island .nav-burger {
        display: inline-flex;
        margin-left: auto;
        order: 2;
        pointer-events: auto;
        z-index: 2;
    }

    .navbar--island .nav-right,
    :root[data-theme="dark"] .navbar--island .nav-right,
    :root:not([data-theme="dark"]) .navbar--island .nav-right,
    html[data-theme="dark"] .navbar--island .nav-right,
    html:not([data-theme="dark"]) .navbar--island .nav-right,
    body.nav-open .navbar--island .nav-right,
    :root[data-theme="dark"] body.nav-open .navbar--island .nav-right,
    :root:not([data-theme="dark"]) body.nav-open .navbar--island .nav-right {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
        flex: 1 0 100%;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 4px;
        width: 100%;
        max-width: none;
        max-height: none;
        order: 3;
        margin: 0;
        padding: 4px 0 0;
        contain: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        animation: none;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        z-index: 2;
        pointer-events: auto;
    }

    .navbar--island .nav-right,
    :root[data-theme="dark"] .navbar--island .nav-right,
    :root:not([data-theme="dark"]) .navbar--island .nav-right,
    html[data-theme="dark"] .navbar--island .nav-right,
    html:not([data-theme="dark"]) .navbar--island .nav-right {
        display: none;
    }

    body.nav-open .navbar--island .nav-right,
    :root[data-theme="dark"] body.nav-open .navbar--island .nav-right,
    :root:not([data-theme="dark"]) body.nav-open .navbar--island .nav-right,
    html[data-theme="dark"] body.nav-open .navbar--island .nav-right,
    html:not([data-theme="dark"]) body.nav-open .navbar--island .nav-right {
        display: flex;
    }

    .navbar--island .nav-link,
    .navbar--island .nav-user,
    .navbar--island .mio-theme-switch--navbar {
        width: 100%;
        justify-content: flex-start;
        text-align: left;
        align-self: stretch;
    }

    .navbar--island .nav-link {
        min-height: 44px;
        padding: 10px 14px;
        border-radius: 16px;
    }

    .navbar--island .nav-user {
        min-height: 52px;
        padding: 8px 12px 8px 8px;
        border-radius: 18px;
        margin: 0 0 4px;
        order: -1;
        background: var(--c-bg-soft, #f5f5f5);
    }

    .navbar--island .mio-theme-switch--navbar {
        width: 96px;
        height: 48px;
        margin: 4px 6px 2px;
        align-self: flex-start;
    }

    body.nav-open::before {
        inset: var(--nav-h) 0 0;
        z-index: 9998;
    }
}

@media (prefers-reduced-motion: reduce) {
    .navbar--island .nav-island {
        will-change: auto;
        transition: none;
    }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .navbar--island .nav-island {
        background: var(--c-bg-elev, #fff);
    }
    :root[data-theme="dark"] .navbar--island .nav-island,
    html[data-theme="dark"] .navbar--island .nav-island {
        background: var(--c-bg-elev, rgba(28, 28, 30, 0.92));
    }
}