/*
 * HoloRyn TCG
 * Mobile Navigation v2.1
 *
 * Presentation only.
 * Does not modify burger/sidebar behaviour.
 */

:root {
    --hr-nav-height: 72px;
}

/* New nav is mobile only */

.hr-mobile-nav {
    display: none;
}

/* More sheet */

.hr-more-backdrop {
    display: none;
}

.hr-more-sheet {
    display: none;
}

@media (max-width: 860px) {

    body {
        padding-bottom:
            calc(
                92px
                + env(safe-area-inset-bottom)
            );
    }

    /*
     * Only hide the OLD bottom navigation.
     * Do not touch sidebar/burger/menu behaviour.
     */

    .bottom-nav {
        display: none !important;
    }

    /*
     * NEW FLOATING NAV
     */

    .hr-mobile-nav {
        position: fixed;
        left: 10px;
        right: 10px;
        bottom:
            calc(
                8px
                + env(safe-area-inset-bottom)
            );

        height: var(--hr-nav-height);

        display: grid;
        grid-template-columns: repeat(5, minmax(0,1fr));

        padding: 7px 5px;

        background: rgba(17,22,33,.97);

        border: 1px solid var(--line);
        border-radius: 21px;

        box-shadow:
            0 18px 55px rgba(0,0,0,.5);

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

        z-index: 950;
    }

    .hr-mobile-nav a,
    .hr-mobile-nav button {

        appearance: none;
        -webkit-appearance: none;

        border: 0;
        background: transparent;

        color: var(--muted);

        min-width: 0;
        min-height: 56px;

        padding: 4px 2px;

        border-radius: 14px;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        gap: 4px;

        font: inherit;
        font-size: 10px;
        font-weight: 750;

        text-decoration: none;

        cursor: pointer;
    }

    .hr-mobile-nav a.active,
    .hr-mobile-nav button.active {

        background: var(--panel2);
        color: var(--text);
    }

    .hr-mobile-nav-icon {

        height: 23px;
        min-width: 23px;

        display: grid;
        place-items: center;

        font-size: 20px;
        font-weight: 500;
        line-height: 1;
    }

    /*
     * Main scan/till action
     */

    .hr-mobile-nav .hr-primary
    .hr-mobile-nav-icon {

        width: 42px;
        height: 42px;

        margin-top: -21px;

        border-radius: 50%;

        background:
            linear-gradient(
                135deg,
                var(--accent),
                var(--accent2)
            );

        color: #fff;

        font-size: 25px;

        box-shadow:
            0 8px 24px
            rgba(139,92,246,.36);
    }

    .hr-mobile-nav .hr-primary span:last-child {
        margin-top: -2px;
    }

    /*
     * MORE OVERLAY
     */

    .hr-more-backdrop {

        position: fixed;
        inset: 0;

        background: rgba(0,0,0,.64);

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

        z-index: 970;
    }

    .hr-more-backdrop.open {
        display: block;
    }

    .hr-more-sheet {

        position: fixed;

        left: 10px;
        right: 10px;

        bottom:
            calc(
                88px
                + env(safe-area-inset-bottom)
            );

        max-height: min(72vh,620px);

        overflow-y: auto;

        padding: 17px;

        background: var(--panel);

        border: 1px solid var(--line);
        border-radius: 22px;

        box-shadow:
            0 24px 70px rgba(0,0,0,.6);

        z-index: 980;
    }

    .hr-more-sheet.open {
        display: block;
    }

    .hr-more-handle {

        width: 42px;
        height: 4px;

        margin: 0 auto 17px;

        border-radius: 99px;

        background: var(--line);
    }

    .hr-more-header {

        display: flex;
        align-items: center;
        justify-content: space-between;

        gap: 14px;

        margin-bottom: 15px;
    }

    .hr-more-header h2 {

        margin: 0;
        font-size: 20px;
    }

    .hr-more-close {

        width: 42px;
        height: 42px;

        border: 1px solid var(--line);
        border-radius: 50%;

        background: var(--panel2);
        color: var(--text);

        font-size: 21px;

        cursor: pointer;
    }

    /*
     * WORKSPACE SWITCHER
     */

    .hr-workspaces {

        display: grid;
        grid-template-columns:
            repeat(
                var(--hr-workspace-count,1),
                minmax(0,1fr)
            );

        gap: 7px;

        padding: 5px;

        margin-bottom: 18px;

        border: 1px solid var(--line);
        border-radius: 15px;

        background: rgba(0,0,0,.16);
    }

    .hr-workspaces a {

        min-height: 44px;

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

        padding: 8px;

        border-radius: 11px;

        color: var(--muted);

        font-size: 12px;
        font-weight: 750;
    }

    .hr-workspaces a.active {

        background: var(--panel2);
        color: var(--text);
    }

    /*
     * MORE LINKS
     */

    .hr-more-section {
        margin-top: 18px;
    }

    .hr-more-label {

        margin: 0 0 8px 4px;

        color: var(--muted);

        font-size: 10px;
        font-weight: 800;

        letter-spacing: .13em;
        text-transform: uppercase;
    }

    .hr-more-links {

        display: grid;
        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap: 8px;
    }

    .hr-more-links a {

        min-height: 52px;

        padding: 12px;

        border: 1px solid var(--line);
        border-radius: 14px;

        background: var(--panel2);

        display: flex;
        align-items: center;

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

    .hr-more-links a:active {
        transform: scale(.98);
    }

    /*
     * Keep content clear of floating nav.
     */

    .app-main {

        padding-bottom:
            calc(
                105px
                + env(safe-area-inset-bottom)
            );
    }
}

@media (max-width: 390px) {

    .hr-mobile-nav {

        left: 6px;
        right: 6px;
    }

    .hr-mobile-nav a,
    .hr-mobile-nav button {

        font-size: 9px;
    }

    .hr-more-sheet {

        left: 6px;
        right: 6px;
    }

    .hr-more-links {

        grid-template-columns: 1fr 1fr;
    }
}