/* ═══════════════════════════════════════════
   用户在线状态 — user-online-status
   ═══════════════════════════════════════════ */

/* ── 头像状态圆点 ── */
.zm-avatar-status-wrap {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.zm-status-dot {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: #9ca3af;
    z-index: 2;
    pointer-events: none;
    box-sizing: content-box;
    transition: background .3s ease;
}

/* 大头像的圆点稍大 */
.avatar-lg .zm-status-dot,
.avatar-img.avatar-lg + .zm-status-dot {
    width: 12px;
    height: 12px;
    bottom: 2px;
    right: 2px;
}

/* 小头像的圆点更小 */
.avatar-sm .zm-status-dot {
    width: 7px;
    height: 7px;
    bottom: 0;
    right: 0;
    border-width: 1.5px;
}

/* 状态颜色 */
.zm-status-dot.zm-st-online  { background: #22c55e; }
.zm-status-dot.zm-st-away    { background: #f59e0b; }
.zm-status-dot.zm-st-busy    { background: #ef4444; }
.zm-status-dot.zm-st-offline { background: #9ca3af; }

/* 在线脉冲动画 */
.zm-status-dot.zm-st-online::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: rgba(34, 197, 94, .4);
    animation: zm-status-pulse 2s ease-in-out infinite;
}

@keyframes zm-status-pulse {
    0%, 100% { transform: scale(1); opacity: .6; }
    50%      { transform: scale(1.6); opacity: 0; }
}

/* 暗色模式：圆点边框用暗色背景 */
.dark-theme .zm-status-dot {
    border-color: var(--main-bg-color, #1e293b);
}


/* ── 状态选择器（用户下拉面板中） ── */
.fetl-user-online-status {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
}

.fetl-user-online-status .but {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 12px;
    white-space: nowrap;
    cursor: pointer;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #6b7280;
    transition: all .25s ease;
    line-height: 1.6;
    user-select: none;
}

.fetl-user-online-status .but:hover {
    border-color: #d1d5db;
    background: #f9fafb;
}

/* 状态色圆点 */
.fetl-user-online-status .but > span:first-child {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.fetl-user-online-status .but[data-sta="online"] > span:first-child  { background: #22c55e; }
.fetl-user-online-status .but[data-sta="away"] > span:first-child    { background: #f59e0b; }
.fetl-user-online-status .but[data-sta="busy"] > span:first-child    { background: #ef4444; }
.fetl-user-online-status .but[data-sta="offline"] > span:first-child { background: #9ca3af; }

/* 激活态 */
.fetl-user-online-status .but.fetl-active {
    border-color: currentColor;
    font-weight: 600;
}

.fetl-user-online-status .but.fetl-active[data-sta="online"] {
    color: #22c55e;
    background: rgba(34, 197, 94, .08);
    border-color: #22c55e;
}
.fetl-user-online-status .but.fetl-active[data-sta="away"] {
    color: #f59e0b;
    background: rgba(245, 158, 11, .08);
    border-color: #f59e0b;
}
.fetl-user-online-status .but.fetl-active[data-sta="busy"] {
    color: #ef4444;
    background: rgba(239, 68, 68, .08);
    border-color: #ef4444;
}
.fetl-user-online-status .but.fetl-active[data-sta="offline"] {
    color: #9ca3af;
    background: rgba(156, 163, 175, .08);
    border-color: #9ca3af;
}

/* 切换中loading态 */
.fetl-user-online-status .but.fetl-loading {
    opacity: .5;
    pointer-events: none;
}

/* 暗色模式 */
.dark-theme .fetl-user-online-status .but {
    background: rgba(255,255,255,.05);
    border-color: rgba(255,255,255,.12);
    color: rgba(255,255,255,.6);
}
.dark-theme .fetl-user-online-status .but:hover {
    background: rgba(255,255,255,.08);
}
.dark-theme .fetl-user-online-status .but.fetl-active[data-sta="online"] {
    background: rgba(34, 197, 94, .15);
}
.dark-theme .fetl-user-online-status .but.fetl-active[data-sta="away"] {
    background: rgba(245, 158, 11, .15);
}
.dark-theme .fetl-user-online-status .but.fetl-active[data-sta="busy"] {
    background: rgba(239, 68, 68, .15);
}
.dark-theme .fetl-user-online-status .but.fetl-active[data-sta="offline"] {
    background: rgba(156, 163, 175, .15);
}

/* Navbar user card */
.zm-nav-user-card-host {
    position: relative;
}

.navbar-top,
.navbar-top .container-header,
.navbar-top .navbar-collapse,
.navbar-top .navbar-right,
.navbar-top .navbar-form,
.navbar-top .list-inline,
.navbar-top .splitters,
.navbar-top li:has(> .sub-menu .sub-user-box) {
    overflow: visible !important;
}

.navbar-top li:has(> .sub-menu .sub-user-box) {
    position: relative;
    z-index: 120;
}

.navbar-top .sub-menu:has(.sub-user-box),
.navbar-top .zm-nav-user-card-host > .sub-menu {
    top: 100% !important;
    bottom: auto !important;
    margin-top: 12px !important;
    right: 0 !important;
    left: auto !important;
    min-width: 242px !important;
    max-width: min(320px, calc(100vw - 20px));
    padding: 10px 5px !important;
    z-index: 1001 !important;
    transform: none !important;
}

.zm-nav-user-card {
    position: absolute;
    top: calc(100% + 14px);
    right: -10px;
    z-index: 999;
    width: min(360px, calc(100vw - 24px));
}

.zm-nav-user-card[hidden] {
    display: none !important;
}

.zm-nav-user-card-host.is-open > .zm-nav-user-card {
    display: block;
}

.zm-nav-user-card-panel {
    overflow: hidden;
    border: 1px solid rgba(210, 221, 235, .92);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 22px 50px rgba(22, 45, 76, .18);
}

.zm-nav-user-card-cover {
    height: 94px;
    background:
        radial-gradient(circle at left top, rgba(93, 163, 255, .3), transparent 42%),
        linear-gradient(135deg, #0a3a64, #13528f 55%, #4da1ff);
}

.zm-nav-user-card-body {
    position: relative;
    padding: 0 18px 18px;
    text-align: center;
}

.zm-nav-user-card-avatar {
    width: 72px;
    height: 72px;
    margin: -36px auto 0;
    border-radius: 50%;
    border: 4px solid #fff;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 10px 24px rgba(24, 56, 94, .18);
}

.zm-nav-user-card-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.zm-nav-user-card-name {
    margin-top: 12px;
    color: var(--main-color);
    font-size: 18px;
    font-weight: 700;
}

.zm-nav-user-card-uid {
    margin-top: 8px;
}

.zm-nav-user-card-roles {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.zm-nav-user-card-roles span {
    padding: 4px 10px;
    border-radius: 999px;
    background: #eef4ff;
    color: var(--theme-color, #356fdc);
    font-size: 12px;
    font-weight: 600;
}

.zm-nav-user-card-desc {
    margin-top: 10px;
    color: var(--muted-color);
    font-size: 13px;
    line-height: 1.7;
}

.zm-nav-user-card-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.zm-nav-user-card-stats span {
    padding: 12px 10px;
    border-radius: 14px;
    background: #f7faff;
}

.zm-nav-user-card-stats strong,
.zm-nav-user-card-stats em {
    display: block;
}

.zm-nav-user-card-stats strong {
    color: var(--main-color);
    font-size: 18px;
    font-weight: 700;
}

.zm-nav-user-card-stats em {
    margin-top: 4px;
    color: var(--muted-color);
    font-style: normal;
    font-size: 12px;
}

.zm-nav-user-card-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.zm-nav-user-card-status {
    display: flex;
    justify-content: center;
    margin-top: 14px;
}

.zm-nav-user-card-status .fetl-user-online-status {
    justify-content: center;
    flex-wrap: wrap;
}

.dark-theme .zm-nav-user-card-panel,
:root.dark .zm-nav-user-card-panel {
    border-color: rgba(255, 255, 255, .1);
    background: var(--main-bg-color, #23272f);
    box-shadow: 0 22px 50px rgba(0, 0, 0, .42);
}

.dark-theme .zm-nav-user-card-avatar,
:root.dark .zm-nav-user-card-avatar {
    border-color: var(--main-bg-color, #23272f);
    background: var(--main-bg-color, #23272f);
}

.dark-theme .zm-nav-user-card-name,
:root.dark .zm-nav-user-card-name {
    color: var(--main-color, #eef3f8);
}

.dark-theme .zm-nav-user-card-desc,
:root.dark .zm-nav-user-card-desc {
    color: rgba(255, 255, 255, .64);
}

.dark-theme .zm-nav-user-card-roles span,
:root.dark .zm-nav-user-card-roles span {
    background: rgba(77, 161, 255, .12);
    color: #8ac3ff;
}

.dark-theme .zm-nav-user-card-stats span,
:root.dark .zm-nav-user-card-stats span {
    background: rgba(255, 255, 255, .04);
}

.dark-theme .zm-nav-user-card-stats strong,
:root.dark .zm-nav-user-card-stats strong {
    color: var(--main-color, #eef3f8);
}

.dark-theme .zm-nav-user-card-stats em,
:root.dark .zm-nav-user-card-stats em {
    color: rgba(255, 255, 255, .56);
}

@media (max-width: 768px) {
    .zm-nav-user-card {
        right: 0;
        width: min(340px, calc(100vw - 20px));
    }
}

/* Updated: 2026-05-22 18:00 - Fixed text colors to use theme variables */