/* ============================================================================
   Mobile / tablet bottom navigation — pairs with AppBottomNav.razor.

   Only exists below 992px, the same breakpoint at which app-nav.css turns the
   desktop rail into an off-canvas drawer. Above it the rail and the slim top
   menu already cover navigation, so the bar is display:none and costs nothing.

   Follows the app theme: surfaces come from the --appnav-* tokens app-nav.css
   defines for light and body.dark-only, and the active accent is the user's
   theme colour (--theme-default via --appnav-accent).

   Native-app rules this file exists to honor: >=44px targets, no hover-only
   affordances, safe-area insets so the bar clears the iOS home indicator, and
   nothing that scrolls horizontally.
   ============================================================================ */

.appbnav { display: none; }
.appbnav-sheet,
.appbnav-sheet-backdrop { display: none; }

@media (max-width: 991.98px) {

    /* ---- The bar ---------------------------------------------------------- */
    .appbnav {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 1040;                     /* under the FABs (1049/1050), over page content */
        display: flex;
        align-items: stretch;
        background: var(--appnav-bg, #fff);
        border-top: 1px solid var(--appnav-border, #e7ecf3);
        box-shadow: 0 -2px 14px var(--appnav-shadow, rgba(16,28,61,.10));
        /* Home-indicator clearance on iOS; resolves to 0 everywhere else. */
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .appbnav__tab {
        position: relative;                /* anchors the active indicator + badge */
        flex: 1 1 0;
        min-width: 0;                      /* lets labels ellipsis instead of widening the bar */
        min-height: 56px;                  /* comfortably past the 44px minimum */
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 3px;
        padding: 6px 4px;
        border: 0; background: transparent;
        color: var(--appnav-fg-dim, #8291ac);
        font: inherit; cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: color .15s ease;
    }
    /* Press feedback, not hover — a finger has no hover state. */
    .appbnav__tab:active { background: var(--appnav-hover, #eef2f8); }

    .appbnav__icon { position: relative; font-size: 1.15rem; line-height: 1; }

    .appbnav__label {
        font-size: .68rem; font-weight: 600; letter-spacing: .01em;
        max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }

    .appbnav__tab.is-active { color: var(--appnav-accent, #7366ff); }
    /* Active marker rides the top edge so it reads as a tab indicator, not a border. */
    .appbnav__tab.is-active::before {
        content: "";
        position: absolute; top: 0;
        width: 28px; height: 3px; border-radius: 0 0 3px 3px;
        background: var(--appnav-accent, #7366ff);
    }
    .appbnav__tab { position: relative; }

    .appbnav__badge {
        position: absolute; top: -5px; left: 60%;
        min-width: 15px; height: 15px; padding: 0 4px;
        border-radius: 8px;
        background: #dc3545; color: #fff;
        font-size: .58rem; font-weight: 700; line-height: 15px; text-align: center;
    }

    /* ---- Overflow sheet --------------------------------------------------- */
    .appbnav-sheet-backdrop {
        display: block;
        position: fixed; inset: 0;
        background: rgba(6, 12, 28, .5);
        z-index: 1060;
    }

    .appbnav-sheet {
        display: flex; flex-direction: column;
        position: fixed; left: 0; right: 0; bottom: 0;
        z-index: 1061;
        max-height: 78vh;
        background: var(--appnav-bg, #fff);
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -8px 34px rgba(0,0,0,.32);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        animation: appbnav-sheet-in .2s ease-out;
    }

    @keyframes appbnav-sheet-in {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
    }

    .appbnav-sheet__grip {
        width: 38px; height: 4px; border-radius: 2px;
        background: var(--appnav-scroll, #cdd8ea);
        margin: 8px auto 2px;
        flex: 0 0 auto;
    }

    .appbnav-sheet__head {
        display: flex; align-items: center; justify-content: space-between;
        padding: 6px 16px 10px;
        border-bottom: 1px solid var(--appnav-border, #e7ecf3);
        flex: 0 0 auto;
    }
    .appbnav-sheet__title { font-weight: 700; font-size: .9rem; color: var(--appnav-fg-strong, #16233d); }
    .appbnav-sheet__close {
        width: 44px; height: 44px;                     /* full-size target, not a 20px glyph */
        display: inline-flex; align-items: center; justify-content: center;
        border: 0; background: transparent;
        color: var(--appnav-fg-dim, #8291ac); font-size: 1.05rem; cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .appbnav-sheet__body {
        overflow-y: auto;                              /* vertical only — the bar never scrolls */
        overscroll-behavior: contain;                  /* don't chain scroll into the page behind */
        padding: 6px 8px 12px;
    }

    .appbnav-sheet__row,
    .appbnav-sheet__subrow {
        width: 100%;
        min-height: 48px;
        display: flex; align-items: center; gap: 10px;
        padding: 8px 10px;
        border: 0; background: transparent; border-radius: 10px;
        color: var(--appnav-fg, #46536b);
        font: inherit; font-size: .84rem; text-align: left; cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .appbnav-sheet__row:active,
    .appbnav-sheet__subrow:active { background: var(--appnav-hover, #eef2f8); }

    .appbnav-sheet__row.is-active,
    .appbnav-sheet__subrow.is-active {
        color: var(--appnav-accent, #7366ff);
        background: color-mix(in srgb, var(--appnav-accent, #7366ff) 10%, transparent);
        font-weight: 600;
    }

    .appbnav-sheet__rowicon {
        flex: 0 0 auto; width: 26px; text-align: center; font-size: .95rem;
    }
    .appbnav-sheet__rowtext {
        flex: 1 1 auto; min-width: 0;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .appbnav-sheet__rowbadge {
        flex: 0 0 auto;
        min-width: 18px; padding: 1px 6px; border-radius: 9px;
        background: #dc3545; color: #fff; font-size: .62rem; font-weight: 700;
    }
    .appbnav-sheet__caret {
        flex: 0 0 auto; font-size: .7rem; color: var(--appnav-fg-dim, #8291ac);
        transition: transform .18s ease;
    }
    .appbnav-sheet__group.is-open .appbnav-sheet__caret { transform: rotate(180deg); }

    .appbnav-sheet__sub { padding: 2px 0 6px 18px; }
    .appbnav-sheet__subdot {
        flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%;
        background: var(--appnav-fg-dim, #8291ac); margin-left: 8px;
    }
    .appbnav-sheet__subrow.is-active .appbnav-sheet__subdot { background: var(--appnav-accent, #7366ff); }

    /* ---- Give the bar somewhere to sit ------------------------------------ */
    /* Page content must clear the bar or the last row/button is unreachable. */
    #pageWrapper .page-body,
    #pageWrapper .footer {
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* The floating action buttons all park at bottom:20px, which is now behind
       the bar. Lift them by its height so they stay tappable. */
    .ai-fab,
    .spq-bugwidget-fab,
    .spq-claudechat-fab {
        bottom: calc(20px + 60px + env(safe-area-inset-bottom, 0px)) !important;
    }
}