/* ============================================================================
   Shared mobile bottom tab bar
   ----------------------------------------------------------------------------
   Linked by both transactions.html and net-worth.html so the two pages Lamar
   lives in share one navigation. Neutral light styling by default (suits the
   transactions page); net-worth.css overrides these same classes for its dark
   "private wealth" theme. Hidden entirely above the mobile breakpoint.
   ============================================================================ */

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

@media (max-width: 640px) {
    /* Clear the fixed bar so the last row of content is never hidden behind it. */
    body {
        padding-bottom: calc(64px + env(safe-area-inset-bottom));
    }

    .mobile-bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        background-color: color-mix(in srgb, var(--app-surface, #fff) 96%, transparent);
        border-top: 1px solid var(--app-border, #e5e7eb);
        box-shadow: 0 -2px 16px rgba(15, 23, 42, 0.09);
        padding-bottom: env(safe-area-inset-bottom);
        z-index: 100;
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }

    .mobile-nav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 9px 4px;
        margin: 0;
        background: none;
        border: none;
        text-decoration: none;
        color: var(--app-dim, #9ca3af);
        font-size: 11px;
        font-weight: 500;
        cursor: pointer;
    }

    .mobile-nav-item.active {
        color: var(--app-accent, #1f2937);
    }

    .mobile-nav-icon {
        font-size: 18px;
        line-height: 1;
    }
}