/* ==========================================================================
   Mobile bottom dock — auth / profile / admin actions.
   Markup: Views/Shared/_MobileBottomNav.cshtml

   Visibility is controlled here, NOT by Bootstrap's d-* utilities. Those depend on
   the theme's Bootstrap build shipping the right utility classes in the right source
   order; owning the media query outright removes that whole class of failure.

   Shown  : viewport <= 991.98px  (phones and tablets, incl. phone landscape)
   Hidden : 992px and up          (the header navbar carries these actions there)
   ========================================================================== */

/* Hidden by default; the media query below opts it in. */
.mobile-dock {
    display: none;
}

@media (max-width: 991.98px) {

    .mobile-dock {
        /* !important is deliberate: nothing in the theme should be able to hide the
           only way a phone user can reach Login / Profile / Logout. Scoped inside this
           media query, so it can never leak onto desktop. */
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: fixed;
        left: 50%;
        transform: translateX(-50%);
        /* Plain value first, then the safe-area version. If an engine cannot parse env()
           it drops that declaration entirely, and `bottom` would fall back to auto —
           dropping the dock to the end of the document instead of pinning it to the
           viewport. That is the failure that looks like "works in one browser, not another". */
        bottom: 14px;
        bottom: calc(14px + env(safe-area-inset-bottom, 0px));
        z-index: 1040;
        max-width: calc(100% - 24px);
    }

    /* Keeps the floating dock clear of the last rows of the footer. */
    body {
        padding-bottom: 96px;
        padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    }
}

/* --------------------------------------------------------------------------
   Pill container
   -------------------------------------------------------------------------- */
.mobile-dock__pill {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px;
    border-radius: 999px;
    /* Glassmorphism; the rgba fill doubles as the fallback where blur is unsupported. */
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.65);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.06);
}

/* No blur support: go near-opaque so labels keep contrast instead of sitting on a
   72% translucent panel. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .mobile-dock__pill {
        background: rgba(255, 255, 255, 0.97);
    }
}

/* --------------------------------------------------------------------------
   Items
   -------------------------------------------------------------------------- */
.mobile-dock__form {
    margin: 0;
    display: flex;
}

.mobile-dock__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    /* Comfortably beyond the 44x44 minimum thumb target. */
    min-width: 66px;
    min-height: 56px;
    padding: 6px 10px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #3f464d;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.2px;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.15s ease;
}

.mobile-dock__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s ease;
}

    .mobile-dock__icon svg {
        width: 22px;
        height: 22px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

/* Single-action guest state reads better as a wide pill than a lone square. */
.mobile-dock__item--wide {
    flex-direction: row;
    gap: 8px;
    padding: 6px 22px;
    font-size: 13px;
}

/* --------------------------------------------------------------------------
   States
   -------------------------------------------------------------------------- */
.mobile-dock__item:active {
    transform: scale(0.94);
}

.mobile-dock__item:hover,
.mobile-dock__item:focus-visible {
    color: var(--base-color);
    background-color: rgba(0, 0, 0, 0.05);
}

.mobile-dock__item:focus-visible {
    outline: 2px solid var(--base-color);
    outline-offset: 2px;
}

.mobile-dock__item.is-active {
    color: var(--base-color);
    background-color: rgba(0, 0, 0, 0.06);
}

    .mobile-dock__item.is-active .mobile-dock__icon {
        transform: translateY(-1px) scale(1.08);
    }

.mobile-dock__item--primary,
.mobile-dock__item--primary:hover,
.mobile-dock__item--primary:focus-visible,
.mobile-dock__item--primary.is-active {
    background-color: var(--base-color);
    color: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.mobile-dock__item--danger {
    color: #c0392b;
}

    .mobile-dock__item--danger:hover,
    .mobile-dock__item--danger:focus-visible {
        color: #c0392b;
        background-color: rgba(192, 57, 43, 0.09);
    }

@media (prefers-reduced-motion: reduce) {
    .mobile-dock__item,
    .mobile-dock__icon {
        transition: none;
    }

        .mobile-dock__item:active {
            transform: none;
        }
}