/* ==========================================================================
   FPA FINAL MOBILE POLISH
   ========================================================================== */

/* --------------------------------------------------------------------------
   Notification panel
   -------------------------------------------------------------------------- */

.fpa-notification-panel {
    position: fixed;
    top: 74px;
    right: 20px;
    width: min(380px, calc(100vw - 32px));
    max-height: min(560px, calc(100vh - 100px));

    background: #ffffff;
    border: 1px solid rgba(17, 24, 39, 0.10);
    border-radius: 18px;

    box-shadow:
        0 18px 50px rgba(17, 24, 39, 0.16);

    overflow: hidden;

    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(.98);

    transition:
        opacity .18s ease,
        visibility .18s ease,
        transform .18s ease;

    z-index: 10050;
}

.fpa-notification-panel.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.fpa-notification-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 16px 18px;

    border-bottom: 1px solid #eef0f2;
}

.fpa-notification-panel-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: #111827;
}

.fpa-notification-close {
    width: 34px;
    height: 34px;

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

    border: 0;
    border-radius: 10px;

    background: #f3f4f6;
    color: #374151;

    cursor: pointer;
}

.fpa-notification-list {
    max-height: 470px;
    overflow-y: auto;
}

.fpa-notification-item {
    display: block;
    width: 100%;

    padding: 14px 18px;

    border: 0;
    border-bottom: 1px solid #f1f3f5;

    background: #ffffff;

    text-align: left;
    cursor: pointer;

    transition: background .15s ease;
}

.fpa-notification-item:hover {
    background: #f8fafc;
}

.fpa-notification-item.unread {
    background: rgba(7, 146, 63, 0.045);
}

.fpa-notification-item-title {
    display: block;

    font-size: .88rem;
    font-weight: 800;
    color: #111827;
}

.fpa-notification-item-message {
    display: block;

    margin-top: 4px;

    font-size: .82rem;
    line-height: 1.45;

    color: #6b7280;

    overflow-wrap: anywhere;
}

.fpa-notification-item-time {
    display: block;

    margin-top: 6px;

    font-size: .72rem;
    color: #9ca3af;
}

.fpa-notification-empty {
    padding: 36px 20px;

    text-align: center;

    font-size: .86rem;
    color: #9ca3af;
}

.fpa-notification-loading {
    padding: 30px 20px;

    text-align: center;

    font-size: .82rem;
    color: #6b7280;
}


/* --------------------------------------------------------------------------
   Header notification button
   -------------------------------------------------------------------------- */

#notificationToggle {
    position: relative;
    cursor: pointer;
}

#notificationToggle .badge {
    pointer-events: none;
}


/* --------------------------------------------------------------------------
   Mobile bottom navigation
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {

    html,
    body {
        max-width: 100%;
    }

    .site-main {
        padding-bottom: calc(82px + env(safe-area-inset-bottom));
    }

    .mobile-bottom-nav {
        position: fixed;

        left: 0;
        right: 0;
        bottom: 0;

        width: 100%;
        height: 64px;

        padding:
            5px 8px
            calc(5px + env(safe-area-inset-bottom));

        box-sizing: border-box;

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

        align-items: stretch;

        background: rgba(255, 255, 255, .97);

        border-top: 1px solid rgba(17, 24, 39, .08);

        box-shadow:
            0 -8px 25px rgba(17, 24, 39, .07);

        backdrop-filter: blur(14px);

        z-index: 10000;
    }

    .mobile-bottom-nav-item {
        min-width: 0;

        position: relative;

        display: flex;
        flex-direction: column;

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

        gap: 3px;

        padding: 4px 2px;

        border: 0;
        border-radius: 12px;

        background: transparent;

        color: #6b7280;

        text-decoration: none;

        font-size: .62rem;
        font-weight: 700;

        cursor: pointer;

        -webkit-tap-highlight-color: transparent;
    }

    .mobile-bottom-nav-item svg {
        width: 20px;
        height: 20px;

        stroke-width: 1.9;
    }

    .mobile-bottom-nav-item.active {
        color: #078f3f;
    }

    .mobile-bottom-nav-item.active::before {
        content: "";

        position: absolute;

        top: 1px;
        left: 50%;

        width: 24px;
        height: 3px;

        border-radius: 999px;

        background: #078f3f;

        transform: translateX(-50%);
    }

    .mobile-bottom-nav-button {
        appearance: none;
        -webkit-appearance: none;
    }

    .mobile-nav-icon-wrap {
        position: relative;

        width: 22px;
        height: 22px;

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

    .mobile-nav-icon-wrap svg {
        width: 20px;
        height: 20px;
    }

    .nav-badge {
        position: absolute;

        top: -5px;
        right: -8px;

        min-width: 16px;
        height: 16px;

        padding: 0 4px;

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

        border-radius: 999px;

        background: #dc2626;
        color: #ffffff;

        font-size: .58rem;
        font-weight: 800;

        line-height: 1;
    }

    .mobile-nav-profile {
        width: 21px;
        height: 21px;

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

        border-radius: 50%;

        overflow: hidden;

        border: 2px solid transparent;
    }

    .mobile-nav-avatar {
        width: 100%;
        height: 100%;

        object-fit: cover;

        display: block;
    }

    /* Prevent grid/flex children from creating horizontal page overflow. */

    .container,
    .site-main,
    .hero-grid,
    .page-grid.two-col,
    .cards-grid.two-up,
    .cards-grid.three-up,
    .stats-grid {
        min-width: 0;
        max-width: 100%;
    }

    .hero-grid > *,
    .page-grid.two-col > *,
    .cards-grid.two-up > *,
    .cards-grid.three-up > *,
    .stats-grid > * {
        min-width: 0;
        max-width: 100%;
    }

    .panel,
    .card,
    .hero-panel,
    .page-header-panel {
        min-width: 0;
        max-width: 100%;
    }

    img,
    video,
    iframe,
    canvas,
    svg {
        max-width: 100%;
    }

    pre,
    code {
        max-width: 100%;
        overflow-x: auto;
    }

    .fpa-notification-panel {
        top: auto;
        right: 12px;
        bottom: calc(74px + env(safe-area-inset-bottom));

        width: calc(100vw - 24px);
        max-height: min(520px, calc(100vh - 100px));

        transform: translateY(10px) scale(.98);
    }

    .fpa-notification-panel.open {
        transform: translateY(0) scale(1);
    }
}


/* --------------------------------------------------------------------------
   Desktop notification panel positioning
   -------------------------------------------------------------------------- */

@media (min-width: 769px) {

    .fpa-notification-panel {
        top: 70px;
    }

}