/* ==========================================
   Progress Bars & Loading Indicators
   ========================================== */

/* ---- Base track ---- */
.progress {
    width: 100%;
    overflow: hidden;
    background: var(--surface-muted);
    border-radius: 999px;
    height: 8px;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.07);
}

/* ---- Fill bar ---- */
.progress-bar {
    height: 100%;
    border-radius: 999px;
    background: var(--primary);
    transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    animation: progressFill 0.6s cubic-bezier(0.4, 0, 0.2, 1) both;
    position: relative;
    overflow: hidden;
}

/* Animated shine on fill */
.progress-bar::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.3) 50%,
        transparent 100%
    );
    animation: shimmer 1.6s ease infinite;
    background-size: 200% 100%;
}

/* ---- Sizes ---- */
.progress-xs { height: 4px; }
.progress-sm { height: 6px; }
.progress-md { height: 8px; }
.progress-lg { height: 12px; }
.progress-xl { height: 18px; }

/* ---- Color variants ---- */
.progress-bar.bg-success,
.progress-bar--success { background: var(--success); }

.progress-bar.bg-warning,
.progress-bar--warning { background: var(--warning); }

.progress-bar.bg-danger,
.progress-bar--danger  { background: var(--danger); }

.progress-bar.bg-info,
.progress-bar--info    { background: var(--info); }

/* ---- Striped animated ---- */
.progress-bar.progress-striped {
    background-image: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 8px,
        rgba(255, 255, 255, 0.2) 8px,
        rgba(255, 255, 255, 0.2) 16px
    );
    background-size: 32px 32px;
    animation: progress-stripes 0.8s linear infinite;
}

@keyframes progress-stripes {
    to { background-position: 32px 0; }
}

/* ---- Progress with label ---- */
.progress-labeled {
    display: grid;
    gap: 6px;
}

.progress-label {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
}

.progress-label .progress-value {
    color: var(--text);
    font-weight: 800;
}

/* ---- Stacked progress ---- */
.progress-stacked {
    display: flex;
    overflow: hidden;
    border-radius: 999px;
    background: var(--surface-muted);
    height: 8px;
}

.progress-stacked .progress-bar {
    border-radius: 0;
    animation: none;
}

.progress-stacked .progress-bar:first-child {
    border-start-start-radius: 999px;
    border-end-start-radius: 999px;
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}

.progress-stacked .progress-bar:last-child {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    border-start-end-radius: 999px;
    border-end-end-radius: 999px;
}