/* 服务器状态栏样式 - 优化版 */
.server-stats-wrapper {
    display: inline-block;
}

.stat-item {
    margin-bottom: 5px;
}

/* 进度条动画优化 */
.progress {
    margin-bottom: 12px;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    background-color: #f5f5f5;
}

.progress-bar {
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 徽章样式 */
.badge-sm {
    font-size: 10px;
    padding: 2px 5px;
    border-radius: 3px;
    display: inline-block;
}

/* 下拉菜单样式优化 */
#StateDataPos .dropdown-menu {
    min-width: 780px;
    padding: 15px;
    box-shadow: 0 6px 12px rgba(0,0,0,0.175);
    border-radius: 4px;
}

/* 响应式设计优化 */
@media (max-width: 992px) {
    #StateDataPos .dropdown-menu {
        min-width: 360px;
        max-width: 90vw;
        right: 0;
        left: auto;
    }
    
    /* 移动端隐藏部分列 */
    .hidden-mobile {
        display: none;
    }
}

@media (max-width: 768px) {
    #StateDataPos .dropdown-menu {
        min-width: 300px;
    }
}

/* 颜色状态 */
.text-success { color: #5cb85c !important; }
.text-warning { color: #f0ad4e !important; }
.text-danger { color: #d9534f !important; }
.text-info { color: #5bc0de !important; }

.bg-success { background-color: #5cb85c !important; }
.bg-warning { background-color: #f0ad4e !important; }
.bg-danger { background-color: #d9534f !important; }
.bg-info { background-color: #5bc0de !important; }
.bg-default { background-color: #e8e8e8 !important; }
.bg-dark { background-color: #333333 !important; color: #ffffff; }

/* 加载动画 */
.fa-spin {
    animation: fa-spin 2s infinite linear;
}

@keyframes fa-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(359deg); }
}

/* 添加脉冲动画效果（可选） */
@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.6; }
    100% { opacity: 1; }
}

.loading-pulse {
    animation: pulse 1.5s ease-in-out infinite;
}