@charset "UTF-8";
/*
 * File: css/modules/tnsb-member-directory-palette.css
 * Version: 1.0.2
 * Date: 2026-10-23
 * Purpose: Share the global page background token with the member directory.
 *
 * Change --tnsb-page-bg in tnsb-dark-system.css to change both page and panel.
 * Standalone TOP deployment has the same dark fallback (#121212).
 * Existing directory behavior, member privileges and online status are unchanged.
 */

/* Match the central site background token; override legacy white / .bg_blk. */
.tnsb-member-aside,
.bg_blk .tnsb-member-aside {
    background: var(--tnsb-page-bg, #121212);
    color: #fff;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

/* Mobile directory header (generated through a pseudo element). */
.tnsb-member-aside .tnsb-member-aside-inner::before,
.bg_blk .tnsb-member-aside .tnsb-member-aside-inner::before {
    background: var(--tnsb-page-bg, #121212);
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.tnsb-member-aside .tnsb-member-foot {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

/* The small online marker must keep its green fill; only the outer ring
 * changes to the site background. Handle plugin variants and pseudo-rings. */
.tnsb-member-aside .tnsb-member-item :is(
    [class*="online" i],
    [class*="presence" i],
    [class*="status" i]
) {
    border-color: var(--tnsb-page-bg, #121212) !important;
}
.tnsb-member-aside .tnsb-avatar-wrap::after,
.tnsb-member-aside .tnsb-avatar-wrap::before {
    border-color: var(--tnsb-page-bg, #121212);
}

/* Online dot: change the green fill while preserving the dark outer ring. */
.tnsb-member-item.hot .tnsb-avatar-wrap::after {
    background-color: #9cfe02 !important;
}
.tnsb-member-aside .tnsb-member-item.hot .tnsb-avatar-wrap::after {
    box-shadow: 0 0 0 2px var(--tnsb-page-bg, #121212) !important;
}

.tnsb-member-aside .tnsb-member-close,
.bg_blk .tnsb-member-aside .tnsb-member-close {
    background: var(--tnsb-page-bg, #121212);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
}
