/* mobile-nav.css — Flytende bunnmeny (mobil / nav-style-bottom) */

/* ---- Flytende bunnmeny (navigasjonseditor + meny + bug, mørk «pill») ---- */
@media (max-width: 768px) {
    /*
     * Én felles «hake» mot bunn: env() er 0 i noen PWA (da trengs min ~11px), men full rapportert inset (~34px)
     * + ekstra px ga for stor luft under pillen (som bt.no ikke har). clamp begrenser øvre tak.
     */
    body.nav-style-bottom {
        --bottom-nav-chin: clamp(11px, env(safe-area-inset-bottom, 0px), 12px);
        /*
         * Synk viewport-fixed paneler (Spotify, bugtracker) med .bottom-nav-flyout:
         * Flyout er position:fixed inni nav som har transform → offset er relativt til pill, ikke viewport.
         * Tilsvarende viewport-bunn = pill fra bunn (6px + chin) + flyout-offset (40px + chin).
         */
        --bottom-nav-overlay-bottom: calc(6px + 40px + var(--bottom-nav-chin) + var(--bottom-nav-chin));
        /*
         * Flyout: bruker nesten hele skjermen (scroll når JS setter --scrollable).
         * Bunn = samme anker som .bottom-nav-flyout (40px + chin over viewport-bunn); topp = safe area + liten luft.
         */
        --bottom-nav-flyout-max-h: calc(
            100vh - env(safe-area-inset-top, 0px) - 4px - 40px - var(--bottom-nav-chin)
        );
        /* Spotify-skall: litt lavere enn meny-flyout (luft mot status/topp) */
        --bottom-nav-spotify-shell-max-h: calc(
            100vh - env(safe-area-inset-top, 0px) - 4px - 40px - var(--bottom-nav-chin) - 36px
        );
        /* Bug-panelet skal ikke fylle like mye som meny/Spotify-flyout */
        --bottom-nav-bug-panel-max-h: calc(
            100vh - env(safe-area-inset-top, 0px) - 4px - 40px - var(--bottom-nav-chin) - 72px
        );
    }

    @supports (height: 100svh) {
        body.nav-style-bottom {
            --bottom-nav-flyout-max-h: calc(
                100svh - env(safe-area-inset-top, 0px) - 4px - 40px - var(--bottom-nav-chin)
            );
            --bottom-nav-spotify-shell-max-h: calc(
                100svh - env(safe-area-inset-top, 0px) - 4px - 40px - var(--bottom-nav-chin) - 36px
            );
            --bottom-nav-bug-panel-max-h: calc(
                100svh - env(safe-area-inset-top, 0px) - 4px - 40px - var(--bottom-nav-chin) - 72px
            );
        }
    }

    /* Smal, sentrert «pill» — ikke kant-til-kant (overstyrer navigation.css fullbredde) */
    body.nav-style-bottom nav#bottom-nav-bar.bottom-nav-bar.bottom-nav-bar--floating {
        display: flex !important;
        position: fixed !important;
        left: 50% !important;
        right: auto !important;
        bottom: calc(6px + var(--bottom-nav-chin)) !important;
        transform: translateX(-50%) !important;
        /* Horisontal safe area unngår at pillen støter i buede sidekanter */
        width: min(
            640px,
            calc(100vw - 16px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px))
        ) !important;
        max-width: min(
            640px,
            calc(100vw - 16px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px))
        ) !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 14px;
        min-height: 0;
        /* Heldekkende mørk bakgrunn (ingen rgba/backdrop — enklere å overstyre) */
        background: #0a0a0a;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 20px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
        /* Over vanlig innhold/toolbar */
        z-index: 100000;
        align-items: center;
        justify-content: center;
        gap: 0;
        box-sizing: border-box;
    }

    body.nav-style-bottom #main-viewport-container {
        padding-bottom: calc(72px + var(--bottom-nav-chin));
    }

    body.nav-style-bottom .bottom-nav-bar.bottom-nav-bar--floating .bottom-nav-primary-row {
        display: flex;
        width: 100%;
        min-width: 0;
        align-items: stretch;
        justify-content: stretch;
        flex-wrap: nowrap;
        gap: 2px;
    }

    /* Like bredde for alle celler (inntil 6 fra editor + Spotify + bug) */
    body.nav-style-bottom .bottom-nav-bar.bottom-nav-bar--floating .bottom-nav-primary-row > .bottom-nav-dropdown,
    body.nav-style-bottom .bottom-nav-bar.bottom-nav-bar--floating .bottom-nav-primary-row > .bottom-nav-item {
        flex: 1 1 0;
        min-width: 0;
    }

    body.nav-style-bottom .bottom-nav-dropdown[data-bottom-nav-dropdown] {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
    }

    body.nav-style-bottom .bottom-nav-dropdown .bottom-nav-dd-trigger {
        width: 100%;
    }

    /* Kun utseende — flex-fordeling styres av .bottom-nav-primary-row > … over */
    body.nav-style-bottom .bottom-nav-bar.bottom-nav-bar--floating .bottom-nav-item {
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 6px 4px;
        min-height: 44px;
        border: none;
        border-radius: 12px;
        background: transparent;
        color: rgba(255, 255, 255, 0.88);
        text-decoration: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .bottom-nav-item:hover,
    .bottom-nav-item:focus-visible {
        background: rgba(255, 255, 255, 0.08);
        color: #fff;
        outline: none;
    }

    .bottom-nav-item [data-lucide],
    .bottom-nav-item svg {
        width: 22px;
        height: 22px;
        flex-shrink: 0;
    }

    /*
     * Lucide i components.css setter color: var(--text) på .lucide — på mørk pill blir ikoner
     * nesten usynlige. Tving lys stroke via currentColor (kun flytende hovedrad, ikke flyout).
     */
    body.nav-style-bottom nav#bottom-nav-bar.bottom-nav-bar--floating .bottom-nav-item svg.lucide,
    body.nav-style-bottom nav#bottom-nav-bar.bottom-nav-bar--floating .bottom-nav-item svg {
        color: rgba(255, 255, 255, 0.92) !important;
        stroke: currentColor !important;
    }

    /* Gruppe-flyout (fast over innhold, under flytende pill) */
    body.nav-style-bottom .bottom-nav-flyout {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: calc(40px + var(--bottom-nav-chin));
        z-index: 99990;
        max-height: var(--bottom-nav-flyout-max-h);
        /* auto ga scrollbar/spor på korte lister; scroll kun når JS setter --scrollable */
        overflow-y: hidden;
        padding: 6px 0;
        background: #1a1a1a;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 14px;
        box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.45);
    }

    body.nav-style-bottom .bottom-nav-flyout.bottom-nav-flyout--scrollable {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    body.nav-style-bottom .bottom-nav-flyout.hidden {
        display: none !important;
    }

    body.nav-style-bottom .bottom-nav-flyout-link {
        display: block;
        padding: 12px 16px;
        font-size: 0.95rem;
        color: #fff;
        text-decoration: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    body.nav-style-bottom .bottom-nav-flyout-link:last-child {
        border-bottom: none;
    }

    body.nav-style-bottom .bottom-nav-flyout-link:hover {
        background: rgba(255, 255, 255, 0.06);
    }

    body.nav-style-bottom .bottom-nav-flyout-action {
        width: 100%;
        box-sizing: border-box;
        display: block;
        text-align: left;
        font: inherit;
        font-size: 0.95rem;
        color: #fff;
        cursor: pointer;
        border: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        background: transparent;
        padding: 12px 16px;
    }

    body.nav-style-bottom .bottom-nav-flyout-action:last-child {
        border-bottom: none;
    }

    body.nav-style-bottom .bottom-nav-flyout-action:hover {
        background: rgba(255, 255, 255, 0.06);
    }
}

/* Uleste meldinger på innboks-ikon (data-nav-mail-link fra navigasjonseditor) */
#bottom-nav-primary-row .bottom-nav-item.has-unread-badge {
    position: relative;
}
#bottom-nav-primary-row .bottom-nav-item.has-unread-badge::after {
    content: '';
    position: absolute;
    top: 4px;
    right: calc(50% - 14px);
    width: 8px;
    height: 8px;
    background: var(--danger);
    border-radius: 50%;
    border: 2px solid #0a0a0a;
    pointer-events: none;
}