/**

· 在线用户统计插件 - 前端样式
· 现代优雅设计，参考子比主题风格
· 修复版
  */

/* ==========================================================================
CSS 变量定义 - 现代设计系统
========================================================================== */

:root {
--outs-primary: #3b82f6;
--outs-success: #10b981;
--outs-warning: #f59e0b;
--outs-text-primary: #1a202c;
--outs-text-secondary: #64748b;
--outs-text-muted: #94a3b8;
--outs-bg-primary: #ffffff;
--outs-bg-secondary: #fafbfc;
--outs-border: rgba(0, 0, 0, 0.06);
--outs-border-hover: rgba(59, 130, 246, 0.2);
--outs-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
--outs-shadow-md: 0 8px 25px rgba(0, 0, 0, 0.08), 0 3px 6px rgba(0, 0, 0, 0.1);
--outs-radius: 12px;
--outs-radius-sm: 8px;
--outs-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
小工具基础样式 - 现代卡片设计
========================================================================== */

.online-users-tracker-widget {
background: var(--outs-bg-primary);
border-radius: var(--outs-radius);
padding: 24px;
margin-bottom: 24px;
box-shadow: var(--outs-shadow-sm);
border: 1px solid var(--outs-border);
transition: var(--outs-transition);
position: relative;
overflow: hidden;
}

.online-users-tracker-widget:hover {
transform: translateY(-2px);
box-shadow: var(--outs-shadow-md);
}

/* 小工具标题 - 简洁现代 */
.online-users-tracker-widget.widget-title {
font-size: 16px;
font-weight: 600;
color: var(--outs-text-primary);
margin: 0 0 20px 0;
display: flex;
align-items: center;
gap: 8px;
}

.online-users-tracker-widget .widget-title::before {
content: '👥';
font-size: 18px;
}

/* ==========================================================================
在线用户列表样式
========================================================================== */

.online-users-list {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 默认3列，可通过小工具设置覆盖 */
gap: 12px;
margin: 0;
padding: 10px 0;
}

/* 确保动态生成的列数样式优先级更高 /
.online-users-list[class*="online-users-cols-"]{
/ 动态样式会覆盖这里 */
}

/* 虚假访客样式 */
.online-user-item.fake-visitor{
opacity: 0.85;
}

.online-user-item.fake-visitor .user-avatar {
filter: brightness(0.95);
}

.online-user-item.fake-visitor .user-name {
color: #888;
}

.online-user-item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 6px;
background: none;
border: none;
transition: all 0.3s ease;
position: relative;
}

.online-user-item:hover {
transform: translateY(-2px);
}

/* 用户头像 - 参考样式设计 */
.user-avatar{
width: 40px;
height: 40px;
border-radius: 50%;
margin-bottom: 4px;
border: 2px solid white;
box-shadow:
0 1px 1px rgba(0,0,0,0.05),
0 2px 2px rgba(0,0,0,0.05),
0 4px 4px rgba(0,0,0,0.05),
0 6px 6px rgba(0,0,0,0.06);
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
object-fit: cover;
}

.online-user-item:hover .user-avatar {
transform: scale(1.05);
box-shadow:
0 2px 2px rgba(0,0,0,0.06),
0 4px 4px rgba(0,0,0,0.06),
0 8px 8px rgba(0,0,0,0.07),
0 12px 12px rgba(0,0,0,0.08);
}

/* 在线状态指示器 */
.online-user-item::after{
content: '';
position: absolute;
top: 28px;
right: calc(50% - 20px);
width: 12px;
height: 12px;
background: linear-gradient(135deg, #4CAF50 0%, #81C784 100%);
border: 2px solid white;
border-radius: 50%;
box-shadow:
0 0 0 1px rgba(76, 175, 80, 0.2),
0 0 0 2px rgba(76, 175, 80, 0.15);
animation: pulse 1.5s infinite;
z-index: 2;
}

/* 访客状态指示器 */
.online-user-item[data-user-type="visitor"]::after{
background: linear-gradient(135deg, #FFB74D 0%, #FFCC80 100%);
box-shadow:
0 0 0 1px rgba(255, 183, 77, 0.2),
0 0 0 2px rgba(255, 183, 77, 0.15);
}

/* 用户信息 - 简洁现代 */
.user-info{
width: 100%;
}

.user-name {
font-size: 11px;
font-weight: 500;
color: #1a202c;
margin-bottom: 2px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 1.2;
}

/* ==========================================================================
更多用户和空状态样式 - 现代简洁设计
========================================================================== */

.more-users {
text-align: center;
padding: 16px;
background: rgba(148, 163, 184, 0.05);
border-radius: 12px;
color: #64748b;
font-size: 13px;
border: 1px solid rgba(148, 163, 184, 0.1);
margin-top: 16px;
transition: all 0.2s ease;
}

.more-users:hover {
background: rgba(148, 163, 184, 0.08);
}

.no-users {
text-align: center;
padding: 48px 24px;
color: #94a3b8;
background: rgba(148, 163, 184, 0.03);
border-radius: 12px;
border: 1px solid rgba(148, 163, 184, 0.1);
}

.no-users::before {
content: '😴';
display: block;
font-size: 40px;
margin-bottom: 12px;
opacity: 0.6;
}

/* 最后更新时间 - 现代样式 */
.last-update{
text-align: center;
font-size: 11px;
color: #94a3b8;
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid rgba(148, 163, 184, 0.1);
}

/* ==========================================================================
响应式设计 - 现代移动优先
========================================================================== */

@media (max-width: 768px) {
.online-users-list {
/* 平板设备：最多显示4列 */
grid-template-columns: repeat(auto-fit, minmax(55px, 1fr)) !important;
max-width: calc(4 * 55px + 3 * 6px);
gap: 6px;
}

}

@media (max-width: 480px) {
.online-users-tracker-widget {
padding: 20px 16px;
margin-bottom: 20px;
border-radius: 16px;
}

}

/* ==========================================================================
动画效果 - 现代微动画
========================================================================== */

@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(16px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

@keyframes pulse {
0% {
transform: scale(0.95);
box-shadow:
0 0 0 0 rgba(76, 175, 80, 0.4),
0 0 0 1px rgba(76, 175, 80, 0.3);
}
70% {
transform: scale(1.05);
box-shadow:
0 0 0 4px rgba(76, 175, 80, 0.1),
0 0 0 6px rgba(76, 175, 80, 0);
}
100% {
transform: scale(0.95);
box-shadow:
0 0 0 0 rgba(76, 175, 80, 0),
0 0 0 1px rgba(76, 175, 80, 0.1);
}
}

/* ==========================================================================
实时更新动画效果
========================================================================== */

/* 用户列表更新动画 */
.online-users-list.updating{
opacity: 0.7;
transform: scale(0.98);
transition: all 0.3s ease;
}

.online-users-list {
transition: all 0.3s ease;
}

/* 更多用户提示 */
.more-users{
grid-column: 1 / -1;
text-align: center;
font-size: 11px;
color: #666;
padding: 8px;
background: rgba(0, 0, 0, 0.02);
border-radius: 6px;
margin-top: 8px;
}

.online-user-item {
animation: slideInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
opacity: 0;
}

.online-user-item:nth-child(1) { animation-delay: 0.05s; }
.online-user-item:nth-child(2){ animation-delay: 0.1s; }
.online-user-item:nth-child(3){ animation-delay: 0.15s; }
.online-user-item:nth-child(4){ animation-delay: 0.2s; }
.online-user-item:nth-child(5){ animation-delay: 0.25s; }
.online-user-item:nth-child(6){ animation-delay: 0.3s; }

/* ==========================================================================
深色模式支持 - 现代深色主题
========================================================================== */

@media (prefers-color-scheme: dark) {
.online-users-tracker-widget {
background: #1e293b;
color: #e2e8f0;
border-color: rgba(148, 163, 184, 0.1);
}

}

/* ==========================================================================
打印样式 - 优化打印效果
========================================================================== */

@media print {
.online-users-tracker-widget {
box-shadow: none;
border: 1px solid #ddd;
background: #fff !important;
color: #000 !important;
}

}

/* ==========================================================================
现代化增强效果
========================================================================== */

/* 自定义滚动条 */
.online-users-tracker-widget::-webkit-scrollbar{
width: 6px;
}

.online-users-tracker-widget::-webkit-scrollbar-track {
background: rgba(148, 163, 184, 0.1);
border-radius: 3px;
}

.online-users-tracker-widget::-webkit-scrollbar-thumb {
background: rgba(148, 163, 184, 0.3);
border-radius: 3px;
transition: background 0.2s ease;
}

.online-users-tracker-widget::-webkit-scrollbar-thumb:hover {
background: rgba(148, 163, 184, 0.5);
}

/* 焦点状态优化 */
.online-user-item:focus{
outline: 2px solid var(--outs-primary);
outline-offset: 2px;
}

/* 减少动画对于偏好减少动画的用户 */
@media(prefers-reduced-motion: reduce) {
.online-user-item,
.online-users-tracker-widget {
animation: none;
transition: none;
}
}

/* 高对比度模式支持 */
@media(prefers-contrast: high) {
.online-users-tracker-widget {
border: 2px solid #000;
}

}

/* ==========================================================================
修复和优化
========================================================================== */

/* 确保图片在头像容器中正确显示 */
.user-avatar img{
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
}

/* 修复状态指示器位置 */
.online-user-item::after{
top: 28px;
right: calc(50% - 20px);
}

/* 修复网格布局的列数设置 */
.online-users-cols-1{ grid-template-columns: repeat(1, 1fr); }
.online-users-cols-2{ grid-template-columns: repeat(2, 1fr); }
.online-users-cols-3{ grid-template-columns: repeat(3, 1fr); }
.online-users-cols-4{ grid-template-columns: repeat(4, 1fr); }
.online-users-cols-5{ grid-template-columns: repeat(5, 1fr); }
.online-users-cols-6{ grid-template-columns: repeat(6, 1fr); }

/* 修复动画延迟设置，避免过多的延迟 */
.online-user-item:nth-child(n+7){ animation-delay: 0.35s; }

/* 修复悬停状态下的层级问题 */
.online-user-item:hover{
z-index: 1;
}

/* 修复深色模式下的文字对比度 */
@media(prefers-color-scheme: dark) {
.user-name {
color: #e2e8f0;
}
}