/* ============================================================
   WatuLead — Member Portal styling
   - On desktop (>=992px): normal pinned-sidebar site (from style.css).
   - On phones/tablets (<=991.98px): a native mobile-app shell.
   Scoped to `body.portal-app` so the admin UI is unaffected.
   ============================================================ */

/* The bottom tab bar never shows on desktop. */
.app-bottomnav { display: none; }

/* Round profile avatar in the top-right corner */
.topbar-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    margin: -2px 0;
}

/* Install banner base (desktop) position; refined on mobile below. */
.pwa-install-banner {
    position: fixed;
    right: 16px;
    bottom: 16px;
    max-width: 360px;
    z-index: 1060;
    display: none;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1rem;
    border-radius: 1rem;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
}
.pwa-install-banner .pwa-icon {
    width: 38px;
    height: 38px;
    border-radius: .6rem;
    object-fit: cover;
    flex: 0 0 auto;
}

/* The centered app page-title in the top bar only appears in app mode. */
body.portal-app .app-title { display: none; }

/* ===========================================================
   MOBILE APP SHELL  (phones & tablets)
   =========================================================== */
@media (max-width: 991.98px) {

    body.portal-app {
        background: var(--bs-body-bg);
        -webkit-tap-highlight-color: transparent;
        overscroll-behavior-y: contain;
    }

    /* Slide-in drawer */
    body.portal-app .sidebar {
        width: 280px;
        max-width: 85vw;
        transition: transform .25s ease;
        z-index: 1050;
    }
    body.portal-app .sidebar-overlay { transition: opacity .25s ease; }

    /* Sticky app top bar */
    body.portal-app .topbar {
        height: calc(56px + env(safe-area-inset-top));
        padding: 0 .75rem;
        padding-top: env(safe-area-inset-top);
    }
    body.portal-app .topbar .btn-sidebar-toggle { font-size: 1.4rem; }

    body.portal-app .app-title {
        display: block;
        flex: 1 1 auto;
        min-width: 0;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight: 600;
        font-size: 1.05rem;
        padding: 0 .5rem;
    }
    body.portal-app .topbar > .d-flex { flex: 0 0 auto; }
    body.portal-app .topbar-right { flex: 0 0 auto; gap: .35rem; }
    body.portal-app .topbar-right .btn { border: 0; }

    /* Content: centered phone-width column, room for the bottom nav */
    body.portal-app .content-wrapper {
        max-width: 600px;
        margin: 0 auto;
        padding: 1rem 1rem calc(86px + env(safe-area-inset-bottom));
    }

    /* App-style cards */
    body.portal-app .card {
        border-radius: 1rem;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    }

    /* Fixed bottom tab navigation */
    body.portal-app .app-bottomnav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1035;
        display: flex;
        background: var(--topbar-bg);
        border-top: 1px solid var(--card-border);
        padding-bottom: env(safe-area-inset-bottom);
        box-shadow: 0 -1px 8px rgba(0, 0, 0, .06);
    }
    .app-bottomnav a,
    .app-bottomnav button {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        padding: .5rem 0 .45rem;
        color: var(--text-muted);
        text-decoration: none;
        font-size: .68rem;
        font-weight: 500;
        background: none;
        border: 0;
        transition: color .15s ease, transform .1s ease;
    }
    .app-bottomnav a i,
    .app-bottomnav button i { font-size: 1.3rem; line-height: 1; }
    .app-bottomnav a.active { color: var(--sidebar-active-bg); }
    .app-bottomnav a:active,
    .app-bottomnav button:active { transform: scale(.93); }

    /* Install banner sits above the bottom nav on mobile */
    .pwa-install-banner {
        left: 12px;
        right: 12px;
        max-width: none;
        bottom: calc(90px + env(safe-area-inset-bottom));
    }
}