/* =================================================================
   Members module — built on the shared design tokens.
   ================================================================= */

.members-page-head {
    margin-bottom: 1rem; padding: .9rem 1.1rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius, 5px);
}
.members-page-title { margin: 0; font-size: 1.05rem; }

/* ---------- Sub-nav (All / Online / New / Guests) — matches the friends module ---------- */
.members-subnav {
    display: flex; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius, 5px); margin-bottom: 1.25rem; overflow: hidden;
}
.members-subnav a {
    flex: 1; text-align: center; padding: .4rem .3rem; text-decoration: none;
    color: var(--ink-soft); font-weight: 600; font-size: .72rem; position: relative;
    border-bottom: 2px solid transparent; white-space: nowrap;
}
.members-subnav a.is-active { color: var(--indigo); border-bottom-color: var(--indigo); background: var(--indigo-soft, var(--paper)); }
.members-subnav-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 16px; height: 16px; padding: 0 .28rem; margin-left: .2rem;
    background: var(--success); color: #fff; border-radius: 999px; font-size: .64rem; font-weight: 700;
}
.members-subnav-badge-neutral { background: var(--indigo); }
.members-subnav-online-icon { color: var(--success); font-size: .55rem; vertical-align: .12em; }

/* ---------- Guests browsing (admin/moderator only) ---------- */
.members-guests-note {
    display: flex; align-items: flex-start; gap: .5rem; margin-bottom: 1rem;
    padding: .7rem .85rem; background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius, 5px);
    font-size: .82rem; color: var(--ink-soft); line-height: 1.5;
}
.members-guest-list {
    display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius, 5px);
    overflow: hidden;
}
.members-guest-row { display: flex; align-items: center; gap: .65rem; padding: .7rem .9rem; border-top: 1px solid var(--border); }
.members-guest-list .members-guest-row:first-child { border-top: none; }
.members-guest-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: var(--ink-soft); box-shadow: 0 0 0 3px rgba(91,98,117,.14); }
.members-guest-info { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.members-guest-info strong { font-size: .88rem; font-family: var(--font-body); }
.members-guest-info .muted { font-size: .78rem; }

/* ---------- Grid / cards — sized to match the friends module's compact grid ---------- */
.members-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 128px)); gap: .55rem; }
.member-card {
    position: relative;
    display: flex; flex-direction: column; align-items: center; text-align: center;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius, 5px);
    padding: .7rem .5rem; gap: .2rem;
    transition: transform .1s ease, box-shadow .15s ease;
}
.member-card:hover { transform: translateY(-2px); box-shadow: var(--shadow, 0 4px 14px -6px rgba(0,0,0,.15)); }

.member-card-rank {
    position: absolute; top: .4rem; left: .4rem; z-index: 1;
    background: var(--paper); color: var(--ink-soft); border: 1px solid var(--border);
    min-width: 20px; height: 20px; padding: 0 .3rem; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center; font-size: .68rem; font-weight: 700;
}
.member-card-rank-top { background: color-mix(in srgb, var(--marigold) 20%, var(--surface)); color: var(--marigold-deep, var(--marigold)); border-color: transparent; }
.member-card-points {
    font-size: .68rem; font-weight: 700; color: var(--marigold-deep, var(--marigold));
    display: inline-flex; align-items: center; gap: .25rem; margin-top: .1rem;
}
.member-card-link {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    text-decoration: none; color: inherit; gap: .2rem; width: 100%;
}

.member-card-avatar-wrap { position: relative; display: inline-flex; margin-bottom: .1rem; }
.member-card-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; margin-bottom: 0; }
.member-card-avatar-initial {
    --avatar-color: #6b7280;
    background: color-mix(in srgb, var(--avatar-color) 88%, black 0%);
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 1rem; font-weight: 800; font-family: var(--font-display);
}
.member-online-dot {
    display: inline-block; width: 11px; height: 11px; border-radius: 50%;
    background: var(--success); border: 2px solid var(--surface);
    position: absolute; bottom: 1px; right: 1px;
    flex-shrink: 0;
}
.member-card-online-label {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .64rem; font-weight: 700; color: var(--success);
}
.member-card-online-label .member-online-dot { position: static; border: none; width: 7px; height: 7px; }
.member-card-name { font-weight: 700; font-size: .78rem; }
.member-card-username { font-size: .68rem; }
.member-card-location { font-size: .66rem; }
.member-card .chip { font-size: .64rem; padding: .15rem .5rem; }

/* ---------- Card kebab menu (Send Message / Add Friend / Unfriend) --- */
.member-card-menu { position: absolute; top: .4rem; right: .4rem; z-index: 2; }
.member-card-menu-btn {
    width: 26px; height: 26px; border-radius: 50%; border: none; background: none;
    color: var(--ink-soft); font-size: .95rem; font-weight: 800; line-height: 1;
    cursor: pointer; transition: background .12s ease, color .12s ease;
}
.member-card-menu-btn:hover, .member-card-menu.is-open .member-card-menu-btn { background: var(--paper); color: var(--ink); }
.member-card-menu-dropdown {
    position: absolute; top: 2.1rem; left: .4rem; right: .4rem; z-index: 30;
    padding: .35rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: 5px;
    box-shadow: 0 10px 28px -12px rgba(0,0,0,.35);
    text-align: left;
}
.member-card-menu-dropdown a, .member-card-menu-dropdown button, .member-card-menu-dropdown form {
    display: block; width: 100%;
}
.member-card-menu-dropdown a, .member-card-menu-dropdown button {
    padding: .5rem .6rem; border-radius: 5px; border: none; background: none;
    font-family: inherit; font-size: .86rem; font-weight: 600; text-align: left;
    color: var(--ink); text-decoration: none; cursor: pointer;
}
.member-card-menu-dropdown a:hover, .member-card-menu-dropdown button:hover { background: var(--paper); }
.member-card-menu-danger { color: var(--danger) !important; }
.member-card-menu-danger:hover { background: rgba(214,69,90,.1) !important; }



@media (max-width: 600px) {
    .members-grid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
    .members-stats { gap: 1rem; font-size: .86rem; }
    .members-subnav a { font-size: .72rem; padding: .5rem .25rem; }
}