/* ==========================================================================
   The social link bar (Oct 2026): My Benfica · Feed · Friends · Chat ·
   Notifications · Profile + the Online pill — the bar My Benfica ships
   (.mb-topbar in mybenfica-modern.css), shared by the other social pages.
   --------------------------------------------------------------------------
   Markup: socialBarHtml($active, $online_count) in includes/social_page_ui.php
     <div class="sb-topbar"><nav class="sb-nav"><a class="sb-nav-link is-active">…
     <button class="sb-online"><span class="sb-online-dot"> <span id="onlineCount">…
   printed inside bnSection(..., id 'sb-top', ..., 'bare'), which this file pins
   under the site header; includes/js/sticky-tabs.js follows the header's real
   bottom edge (--pl-sticky-top) and adds .is-stuck.
   Self-contained: its own tokens on .sb-topbar (theme tokens with fallbacks), so
   it works on any page whatever else that page links. No box-shadow on the
   buttons; the bar itself is a card.
   ========================================================================== */
.sb-topbar {
    --sb-card-bg: var(--theme-surface, var(--bs-body-bg));
    --sb-soft: var(--theme-surface-2, var(--bs-tertiary-bg));
    --sb-soft-2: var(--theme-surface-3, var(--bs-secondary-bg));
    --sb-line: var(--theme-border, var(--bs-border-color));
    --sb-ring: rgba(0, 0, 0, .07);
    --sb-shadow: var(--theme-shadow, 0 10px 30px rgba(0, 0, 0, .06));
    --sb-ink: var(--theme-ink, var(--bs-body-color));
    --sb-primary: var(--theme-primary, var(--bs-primary));
    --sb-primary-ink: color-mix(in oklab, var(--sb-primary) 80%, var(--sb-ink));
    --sb-ok: var(--theme-success, var(--bs-success));
    --sb-ok-rgb: var(--theme-success-rgb, 25, 135, 84);
    --sb-on: var(--theme-on-primary, #fff);
    --sb-ease: var(--ease-out, cubic-bezier(.2, .8, .2, 1));

    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    padding: .3rem;
    border: 1px solid var(--sb-ring); border-radius: 999px;
    background: var(--sb-card-bg);
    box-shadow: var(--sb-shadow);
}
[data-bs-theme="dark"] .sb-topbar {
    --sb-card-bg: var(--bs-tertiary-bg, var(--theme-surface-2));
    --sb-soft: color-mix(in oklab, var(--theme-ink, #fff) 6%, var(--sb-card-bg));
    --sb-soft-2: color-mix(in oklab, var(--theme-ink, #fff) 11%, var(--sb-card-bg));
    --sb-line: color-mix(in oklab, var(--theme-ink, #fff) 12%, transparent);
    --sb-ring: rgba(255, 255, 255, .08);
    --sb-shadow: var(--theme-shadow, 0 10px 30px rgba(0, 0, 0, .3));
    --sb-primary-ink: var(--theme-link, var(--sb-ink));
}
.sb-topbar .sb-nav { display: flex; flex-wrap: nowrap; gap: .15rem; min-width: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.sb-topbar .sb-nav::-webkit-scrollbar { display: none; }
.sb-topbar .sb-nav-link {
    position: relative;
    display: inline-flex; align-items: center; gap: .4rem; flex: 0 0 auto;
    padding: .38rem .8rem;
    border-radius: 999px;
    color: var(--sb-ink); text-decoration: none;
    font-size: .82rem; font-weight: 700; white-space: nowrap;
    transition: background-color .2s var(--sb-ease), color .2s ease;
}
.sb-topbar .sb-nav-link i { color: var(--sb-primary-ink); font-size: .85em; }
.sb-topbar .sb-nav-link:hover { background: var(--sb-soft); color: var(--sb-ink); }
.sb-topbar .sb-nav-link.is-active { background: var(--sb-primary); color: var(--sb-on); }
.sb-topbar .sb-nav-link.is-active i { color: var(--theme-accent-on-primary, var(--sb-on)); }
.sb-topbar .sb-nav-link:focus-visible { outline: 2px solid var(--sb-primary); outline-offset: 1px; }
.sb-topbar .sb-online {
    display: inline-flex; align-items: center; gap: .35rem; flex: 0 0 auto;
    padding: .32rem .75rem;
    border: 1px solid var(--sb-line); border-radius: 999px;
    background: var(--sb-soft); color: var(--sb-ink);
    font-size: .76rem; font-weight: 800; line-height: 1.2;
    box-shadow: none; cursor: pointer;
}
.sb-topbar .sb-online:hover { background: var(--sb-soft-2); }
.sb-topbar .sb-online:focus-visible { outline: 2px solid var(--sb-primary); outline-offset: 2px; }
.sb-topbar .sb-online-dot { width: .45rem; height: .45rem; border-radius: 50%; background: var(--sb-ok); box-shadow: 0 0 0 3px rgba(var(--sb-ok-rgb), .2); }
.sb-topbar #onlineCount { font-variant-numeric: tabular-nums; }

/* Pinned under the site header while scrolling (sticky-tabs.js sets --pl-sticky-top / .is-stuck). */
.benfica-layout #sb-top {
    position: sticky; top: var(--pl-sticky-top, calc(var(--navbar-height, 50px) + 8px)); z-index: 1020;
    transition: top .2s ease;
}
.benfica-layout #sb-top.is-stuck .sb-topbar {
    background: var(--theme-surface, var(--bs-body-bg));
    box-shadow: var(--elev-2, 0 4px 12px rgba(0,0,0,.08)), 0 8px 24px rgba(0,0,0,.06);
}

/* Phones: icons only, the same as My Benfica. */
@media (max-width: 767.98px) {
    .sb-topbar { border-radius: 1rem; }
    .sb-topbar .sb-nav-link { padding: .42rem .6rem; }
    .sb-topbar .sb-nav-link span { display: none; }
    .sb-topbar .sb-online { padding: .32rem .6rem; }
    .sb-topbar .sb-online-txt { display: none; }
}
@media (max-width: 379.98px) {
    .sb-topbar { gap: .25rem; padding: .25rem; }
    .sb-topbar .sb-nav-link { padding: .4rem .48rem; }
}
@media (prefers-reduced-motion: reduce) {
    .sb-topbar .sb-nav-link, .benfica-layout #sb-top { transition: none !important; }
}

/* ==========================================================================
   The Online Users pop-up the pill opens (scmOnlineModal(), #onlineUsersModal):
   the social pages' pop-up look (Oct 2026) — a rounded sheet on the card
   surface, a compact head with a tinted icon and a round close, member rows as
   soft tiles; a bottom sheet with a grab handle on phones. Self-contained (its
   own tokens), so it reads the same on every page that links this file (feed,
   friends, notifications, chat).
   ========================================================================== */
.modal#onlineUsersModal {
    --sbm-card: var(--theme-surface, var(--bs-body-bg));
    --sbm-soft: var(--theme-surface-2, var(--bs-tertiary-bg));
    --sbm-soft-2: var(--theme-surface-3, var(--bs-secondary-bg));
    --sbm-line: color-mix(in oklab, var(--theme-border, var(--bs-border-color)) 65%, transparent);
    --sbm-ring: rgba(0, 0, 0, .07);
    --sbm-ink: var(--theme-ink, var(--bs-body-color));
    --sbm-muted: var(--theme-ink-muted, var(--bs-secondary-color));
    --sbm-ok: var(--theme-success, var(--bs-success));
    --sbm-ok-rgb: var(--theme-success-rgb, 25, 135, 84);
    --sbm-ease: var(--ease-out, cubic-bezier(.2, .8, .2, 1));
}
[data-bs-theme="dark"] .modal#onlineUsersModal {
    --sbm-card: var(--bs-tertiary-bg, var(--theme-surface-2));
    --sbm-soft: color-mix(in oklab, var(--theme-ink, #fff) 6%, var(--sbm-card));
    --sbm-soft-2: color-mix(in oklab, var(--theme-ink, #fff) 11%, var(--sbm-card));
    --sbm-line: color-mix(in oklab, var(--theme-ink, #fff) 12%, transparent);
    --sbm-ring: rgba(255, 255, 255, .08);
}
.modal#onlineUsersModal .modal-dialog { --bs-modal-width: 27rem; }
.modal#onlineUsersModal.fade .modal-dialog { transform: translateY(14px) scale(.965); opacity: 0; transition: transform .3s var(--sbm-ease), opacity .22s ease; }
.modal#onlineUsersModal.show .modal-dialog { transform: none; opacity: 1; }
.modal#onlineUsersModal .modal-content {
    overflow: hidden;
    border: 1px solid var(--sbm-ring); border-radius: 1.25rem;
    background: var(--sbm-card); color: var(--sbm-ink);
    box-shadow: 0 24px 64px rgba(0, 0, 0, .28);
}
.modal#onlineUsersModal .modal-header { gap: .6rem; padding: .85rem .85rem .5rem 1rem; border-bottom: 0; }
.modal#onlineUsersModal .modal-title { display: flex; align-items: center; gap: .6rem; margin: 0; font-size: 1rem; font-weight: 900 !important; }
.modal#onlineUsersModal .modal-title > i {
    display: inline-grid; place-items: center; flex: 0 0 auto;
    width: 2rem; height: 2rem; margin: 0 !important; border-radius: .6rem;
    background: rgba(var(--sbm-ok-rgb), .14); color: var(--sbm-ok) !important; font-size: .82rem;
}
.modal#onlineUsersModal .btn-close {
    width: 2rem; height: 2rem; margin: 0 0 0 auto; padding: 0; border-radius: 50%;
    background-color: var(--sbm-soft); background-size: .7rem; opacity: .8; box-shadow: none;
}
.modal#onlineUsersModal .btn-close:hover { background-color: var(--sbm-soft-2); opacity: 1; }
[data-bs-theme="dark"] .modal#onlineUsersModal .btn-close { --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/%3e%3c/svg%3e"); filter: none; }
.modal#onlineUsersModal .modal-body { padding: .35rem 1rem 1rem; }
.modal#onlineUsersModal .list-group { gap: .35rem; }
.modal#onlineUsersModal .list-group-item {
    padding: .5rem .65rem;
    border: 1px solid var(--sbm-line) !important; border-radius: .85rem !important;
    background: var(--sbm-soft); color: var(--sbm-ink);
    transition: background-color .18s ease, transform .18s var(--sbm-ease);
}
.modal#onlineUsersModal .list-group-item:hover { background: var(--sbm-soft-2); transform: translateY(-1px); }
.modal#onlineUsersModal .list-group-item :is(img, .user-avatar-initials) { width: 2.4rem !important; height: 2.4rem !important; object-fit: cover; }
.modal#onlineUsersModal .list-group-item .text-muted { color: var(--sbm-muted) !important; }
.modal#onlineUsersModal .text-center.text-muted { color: var(--sbm-muted) !important; font-size: .84rem; }
.modal#onlineUsersModal .text-center.text-muted > i { font-size: 1.4rem !important; opacity: .55; }
@media (max-width: 575.98px) {
    .modal#onlineUsersModal .modal-dialog {
        display: flex; align-items: flex-end;
        width: 100%; max-width: none; height: 100%; min-height: 100%; margin: 0;
    }
    .modal#onlineUsersModal .modal-content {
        width: 100%; max-height: calc(100dvh - var(--mobile-modal-top-offset, 56px));
        border-width: 1px 0 0; border-radius: 1.25rem 1.25rem 0 0;
        padding-bottom: env(safe-area-inset-bottom);
    }
    .modal#onlineUsersModal .modal-content::before {
        content: ""; flex: 0 0 auto; display: block;
        width: 2.4rem; height: .28rem; margin: .5rem auto 0;
        border-radius: 999px; background: var(--sbm-line);
    }
    .modal#onlineUsersModal .modal-header { padding-top: .45rem; }
    .modal#onlineUsersModal .modal-body { overflow-y: auto; overscroll-behavior: contain; }
    .modal#onlineUsersModal.fade .modal-dialog { transform: translateY(100%); opacity: 1; transition: transform .34s var(--sbm-ease); }
    .modal#onlineUsersModal.show .modal-dialog { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .modal#onlineUsersModal.fade .modal-dialog { transform: none !important; transition: opacity .01s linear !important; }
    .modal#onlineUsersModal .list-group-item { transition: none !important; transform: none !important; }
}
.modal#onlineUsersModal .list-group-item .fw-bold { font-size: .9rem; }
.modal#onlineUsersModal .list-group-item .small { font-size: .74rem; }