/* ── Progress Bar Component ── */
.async-progress {
    position: relative;
    display:none;
    margin-top:12px;
    padding:16px;
    background:var(--white);
    border-radius:12px;
    border:1px solid var(--border);
}

.async-progress .progress-header,
.processing-progress .progress-header
{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
}

/* Progress step line items */
.auth-view-results-wrapper { padding: 12px 0; text-align: center; }
.async-progress .progress-steps,
.processing-progress .progress-steps {
    margin: 0 0 12px 0;
    padding: 0;
    list-style: none;
}
.async-progress .progress-step,
.processing-progress .progress-step {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--muted);
    font-weight: 500;
    padding: 3px 0;
    opacity: 0;
    transform: translateY(4px);
    animation: step-fade-in 0.3s ease forwards;
}
@keyframes step-fade-in {
    to { opacity: 1; transform: translateY(0); }
}
.async-progress .progress-step.done,
.processing-progress .progress-step.done {
    color: #16a34a;
}
.async-progress .progress-step.active,
.processing-progress .progress-step.active {
    color: var(--text);
}
.async-progress .progress-step .step-icon,
.processing-progress .progress-step .step-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.async-progress .progress-step.done .step-icon,
.processing-progress .progress-step.done .step-icon {
    color: #16a34a;
}
.async-progress .progress-step.active .step-icon,
.processing-progress .progress-step.active .step-icon {
    color: #4f46e5;
}
.async-progress .progress-step .step-eta,
.processing-progress .progress-step .step-eta {
    margin-left: auto;
    font-size: 11px;
    color: var(--muted);
    opacity: 0.7;
}
[data-theme="dark"] .async-progress .progress-step.done,
[data-theme="dark"] .processing-progress .progress-step.done {
    color: #22c55e;
}
[data-theme="dark"] .async-progress .progress-step.active,
[data-theme="dark"] .processing-progress .progress-step.active {
    color: #e5e7eb;
}
[data-theme="dark"] .async-progress .progress-step .step-eta,
[data-theme="dark"] .processing-progress .progress-step .step-eta {
    color: #9ca3af;
}

.async-progress .progress-bar-wrapper,
.processing-progress .progress-bar-wrapper {
    position: relative;
    margin: 0;
}

.async-progress .progress-bar-container,
.processing-progress .progress-bar-container {
    height: 8px;
    background: rgba(79, 70, 229, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.async-progress .progress-bar-fill,
.processing-progress .progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #4f46e5 0%, #7c3aed 50%, #a855f7 100%);
    border-radius: 4px;
    transition: width 0.15s ease-out;
    position: relative;
    overflow: hidden;
}

/* Animated shimmer effect on progress bar */
.async-progress .progress-bar-fill::after,
.processing-progress .progress-bar-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%);
    animation: progress-shimmer 1.5s ease-in-out infinite;
}

@keyframes progress-shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Progress complete - green checkmark */
.async-progress .progress-checkmark,
.processing-progress .progress-checkmark {

    display:none;
    position:absolute;
    right:0;
    top:8px;
    transform:translateY(-50%);
    width:24px;
    height:24px;
    background:linear-gradient(135deg,#22c55e,#16a34a);
    border-radius:50%;
    box-shadow:0 2px 8px rgba(34,197,94,0.4);
}

@keyframes checkmark-pop {
    0% { transform: translateY(-50%) scale(0); }
    80% { transform: translateY(-50%) scale(1.1); }
    100% { transform: translateY(-50%) scale(1); }
}

.async-progress .progress-checkmark svg,
.processing-progress .progress-checkmark svg {

    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

@keyframes checkmark-draw {
    to { stroke-dashoffset: 0; }
}

/* Progress error state - red */
.async-progress.error .progress-bar-fill,
.processing-progress.error .progress-bar-fill {
    background: linear-gradient(90deg, #ef4444 0%, #dc2626 100%);
}

.async-progress.error .progress-bar-fill::after,
.processing-progress.error .progress-bar-fill::after {
    display: none;
}

/* Progress text styling */
.async-progress .progress-text,
.processing-progress .progress-text {
    font-size: 13px;
    color: var(--muted);
    margin-top: 10px;
    text-align: left;
    font-weight: 500;
}

.async-progress .async-error,
.processing-progress .async-error {
  display:none;
  margin-top:12px;
  padding:12px;
  background:#fef2f2;
  border:none;
  border-radius:8px;
  flex-direction:row;
  align-items:center;
  gap:10px;
}

.async-progress .async-error-text,
.processing-progress .async-error-text {
  font-size:13px;
  color:white;
  flex:1;
}

.async-progress .retry-btn,
.processing-progress .retry-btn {
  background:var(--danger);
  color:white;
  border:none;
  padding:6px 14px;
  border-radius:6px;
  font-size:12px;
  font-weight:500;
  cursor:pointer;
  white-space:nowrap;
  flex-shrink:0;
  transition:opacity 0.2s ease;
}


/* Filename in progress */
.async-progress .progress-filename,
.processing-progress .progress-filename {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.async-progress .delete-upload-btn,
.processing-progress .delete-upload-btn
{
  display:none;
  background:var(--danger);
  border:none;
  color:white;
  padding:4px 10px;
  border-radius:6px;
  font-size:12px;
  cursor:pointer;
  transition:all 0.2s ease;
}

.async-progress .delete-upload-btn svg,
.processing-progress .delete-upload-btn svg
{
  vertical-align:middle;
  margin-right:4px;
}

/* Async-progress dark mode */
[data-theme="dark"] .async-progress {
  background: #1f2937;
  border-color: #374151;
}
[data-theme="dark"] .async-progress .progress-filename,
[data-theme="dark"] .processing-progress .progress-filename {
  color: #e5e7eb;
}
[data-theme="dark"] .async-progress .progress-text,
[data-theme="dark"] .processing-progress .progress-text {
  color: #9ca3af;
}
[data-theme="dark"] .async-progress .progress-bar-container,
[data-theme="dark"] .processing-progress .progress-bar-container {
  background: rgba(99, 102, 241, 0.15);
}
[data-theme="dark"] .async-progress .async-error,
[data-theme="dark"] .processing-progress .async-error {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.4);
}
[data-theme="dark"] .async-progress .async-error-text,
[data-theme="dark"] .processing-progress .async-error-text {
  color: #f87171;
}
[data-theme="dark"] .async-progress .retry-btn,
[data-theme="dark"] .processing-progress .retry-btn {
  background: #dc2626;
}
[data-theme="dark"] .async-progress .delete-upload-btn,
[data-theme="dark"] .processing-progress .delete-upload-btn {
  background: #dc2626;
  border: none;
  color: white;
}