/* 公共进度条样式 - 统一所有页面的进度条外观 */

/* 基础进度条容器 */
.progress-bar {
    width: 100%;
    height: 8px;
    background: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 8px;
    position: relative;
}

/* 进度条填充部分 */
.progress-fill {
    height: 100%;
    background: #667eea;
    border-radius: 4px;
    transition: width 0.3s ease, background-color 0.3s ease;
    width: 0;
}

/* 不确定进度动画 */
.progress-fill.indeterminate {
    width: 50% !important;
    position: relative;
    animation: indeterminate 1.5s infinite ease-in-out;
}

@keyframes indeterminate {
    0% { left: -50%; }
    100% { left: 100%; }
}

/* 进度条状态颜色 */
.progress-fill.success {
    background: #28a745 !important;
}

.progress-fill.warning {
    background: #ffc107 !important;
}

.progress-fill.error {
    background: #dc3545 !important;
}

.progress-fill.info {
    background: #17a2b8 !important;
}

/* 进度条容器变体 */
.progress-bar.small {
    height: 4px;
}

.progress-bar.large {
    height: 12px;
}

.progress-bar.rounded {
    border-radius: 10px;
}

.progress-bar.rounded .progress-fill {
    border-radius: 10px;
}

/* 进度条动画效果 */
.progress-bar.animated .progress-fill {
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 进度条条纹效果 */
.progress-fill.striped {
    background-image: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.15) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.15) 75%,
        transparent 75%,
        transparent
    );
    background-size: 1rem 1rem;
    animation: progress-bar-stripes 1s linear infinite;
}

@keyframes progress-bar-stripes {
    0% { background-position: 1rem 0; }
    100% { background-position: 0 0; }
}

/* 进度条发光效果 */
.progress-fill.glow {
    box-shadow: 0 0 10px currentColor;
}

/* 进度条渐变效果 */
.progress-fill.gradient {
    background: linear-gradient(90deg, #667eea, #764ba2) !important;
}

.progress-fill.gradient.success {
    background: linear-gradient(90deg, #28a745, #20c997) !important;
}

.progress-fill.gradient.warning {
    background: linear-gradient(90deg, #ffc107, #fd7e14) !important;
}

.progress-fill.gradient.error {
    background: linear-gradient(90deg, #dc3545, #e83e8c) !important;
}

/* 进度条容器样式变体 */
.progress-container {
    margin: 10px 0;
}

.progress-container.compact {
    margin: 5px 0;
}

.progress-container.with-label {
    display: flex;
    align-items: center;
    gap: 10px;
}

.progress-label {
    font-size: 0.85rem;
    color: #666;
    min-width: 80px;
}

.progress-percentage {
    font-size: 0.85rem;
    color: #666;
    min-width: 60px;
    text-align: right;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .progress-bar {
        height: 6px;
    }
    
    .progress-bar.large {
        height: 10px;
    }
    
    .progress-container.with-label {
        flex-direction: column;
        align-items: stretch;
        gap: 5px;
    }
    
    .progress-label,
    .progress-percentage {
        min-width: auto;
        text-align: left;
    }
}

/* 深色主题支持 */
@media (prefers-color-scheme: dark) {
    .progress-bar {
        background: #495057;
    }
    
    .progress-label,
    .progress-percentage {
        color: #adb5bd;
    }
}

/* 高对比度模式支持 */
@media (prefers-contrast: high) {
    .progress-bar {
        border: 1px solid #000;
    }
    
    .progress-fill {
        border: 1px solid #fff;
    }
}