/* ========================================================================
   Processing Component — Figma design
   ======================================================================== */

/* Email notification notice */
.processing-email-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--cf-color-info-surface);
    border: 1px solid var(--cf-color-info-border);
    border-radius: var(--cf-radius-md);
    padding: 12px 16px;
    margin: 16px 0;
    color: var(--cf-color-text-primary);
    font-size: var(--cf-font-size-base);
}

.processing-email-notice__icon {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--cf-color-info-icon);
    font-size: 1rem;
}

.processing-email-notice__body {
    margin: 4px 0 0;
    color: var(--cf-color-text-primary);
    line-height: 1.5;
    font-size: var(--cf-font-size-sm);
}

/* ========================================================================
   Phases Card
   Single bordered container holding all processing phases
   ======================================================================== */
.processing-phases-card {
    border: 1px solid var(--cf-color-border);
    border-radius: var(--cf-radius-lg);
    padding: 16px;
    margin-top: 16px;
    box-shadow: var(--cf-shadow-sm);
}

/* Phase block */
.processing-phase {
    margin-top: 12px;
}

.processing-phase:first-child {
    margin-top: 0;
}

/* Phase title */
.processing-phase__title {
    font-size: 20px;
    font-weight: 300;
    color: var(--cf-color-text-primary);
    margin: 0 0 8px;
    padding: 0;
}

/* Thin rule below each phase title */
.processing-phase__divider {
    border: none;
    border-top: 1px solid var(--cf-color-border);
    margin: 0 0 8px;
}

/* Steps are always visible */
.processing-phase__steps {
    display: block;
}

/* ========================================================================
   Individual Step Items
   Layout: [chevron toggle] [status circle] [label]
   ======================================================================== */

.processing-step-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: var(--cf-font-size-base);
    color: var(--cf-color-text-secondary);
}

/* Chevron toggle — left of the circle */
.processing-step-item__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--cf-radius-md);
    color: var(--cf-color-border-strong);
    flex-shrink: 0;
    font-size: 0.65rem;
    cursor: default;
    user-select: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* Enabled chevron — shown when step has expandable errors */
.processing-step-item__toggle--enabled {
    color: var(--cf-color-danger-icon);
    cursor: pointer;
}

.processing-step-item__toggle--enabled:hover {
    background-color: var(--cf-color-danger-surface);
}

/* Status circle — 24×24 filled circle */
.processing-step-item__icon {
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 11px;
}

/* Pending: light bg with subtle border */
.processing-step-item--pending .processing-step-item__icon {
    background-color: var(--cf-color-surface-secondary);
    border: 1px solid var(--cf-color-border);
}

/* Active: CSS spinner */
.processing-step-item--active .processing-step-item__icon {
    background: transparent;
    border: 2px solid var(--cf-color-border);
    border-top-color: var(--cf-color-text-primary);
    animation: processing-spin 0.8s linear infinite;
}

.processing-step-item--active {
    color: var(--cf-color-text-primary);
    font-weight: 500;
}

/* Complete: green tint circle with check */
.processing-step-item--complete .processing-step-item__icon {
    background-color: var(--cf-color-success-surface);
    border: 1px solid var(--cf-color-success-border);
    color: var(--cf-color-success-icon);
}

.processing-step-item--complete {
    color: var(--cf-color-text-primary);
}

/* Failed: red tint circle with exclamation */
.processing-step-item--failed .processing-step-item__icon {
    background-color: var(--cf-color-danger-surface);
    border: 1px solid var(--cf-color-danger-border);
    color: var(--cf-color-danger-icon);
}

.processing-step-item--failed {
    color: var(--cf-color-text-primary);
}

/* ========================================================================
   Unified Spinner
   ======================================================================== */
@keyframes processing-spin {
    to { transform: rotate(360deg); }
}

.processing-spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid var(--cf-color-border);
    border-top-color: var(--cf-color-text-primary);
    border-radius: 50%;
    animation: processing-spin 0.8s linear infinite;
    flex-shrink: 0;
}

.processing-spinner--small {
    width: 14px;
    height: 14px;
}

.processing-spinner--large {
    width: 24px;
    height: 24px;
}

.processing-spinner--xl {
    width: 32px;
    height: 32px;
    border-width: 3px;
}

/* ========================================================================
   Inline accordion below a failed step
   ======================================================================== */
.processing-step-accordion {
    margin-left: calc(28px + 24px + 8px + 8px);
    padding: 4px 12px 8px 16px;
    border-left: 2px solid var(--cf-color-error-badge);
}

.processing-step-accordion__summary {
    font-size: var(--cf-font-size-sm);
    color: var(--cf-color-danger-text);
    margin: 0;
}

.processing-step-accordion__list {
    margin: 0;
    padding: 0 0 0 16px;
    list-style-type: disc;
}

.processing-step-accordion__list li {
    font-size: var(--cf-font-size-sm);
    color: var(--cf-color-danger-text);
    padding: 2px 0;
    line-height: 1.5;
}

.processing-step-accordion__list li::marker {
    color: var(--cf-color-danger-icon);
}

.processing-step-accordion__overflow {
    font-size: var(--cf-font-size-sm);
    color: var(--cf-color-danger-text);
    font-style: italic;
    margin: 4px 0 0;
}

/* ========================================================================
   Processing Error State
   Infrastructure failure — no recovery action
   ======================================================================== */

.processing-error-box {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background-color: var(--cf-color-danger-surface);
    border: 1px solid var(--cf-color-danger-border);
    border-radius: var(--cf-radius-md);
    margin-bottom: 24px;
}

.processing-error-box__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--cf-color-danger-icon);
    flex-shrink: 0;
    font-size: 1.25rem;
}

.processing-error-box__content {
    flex: 1;
}

.processing-error-box__title {
    font-weight: 700;
    color: var(--cf-color-danger-text);
    margin-bottom: 4px;
}

.processing-error-box__text {
    font-size: var(--cf-font-size-sm);
    color: var(--cf-color-danger-text);
    margin: 0;
}

.processing-error-box__button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background-color: var(--cf-color-btn-dark);
    color: var(--cf-color-text-reverse);
    border: none;
    border-radius: var(--cf-radius-md);
    font-size: var(--cf-font-size-sm);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease;
    cursor: pointer;
}

.processing-error-box__button:hover {
    background-color: var(--cf-color-btn-dark-hover);
}

/* ========================================================================
   Error Action Box
   Two-step call to action shown when validation issues are found
   ======================================================================== */

.processing-error-action {
    background-color: var(--cf-color-danger-surface);
    border: 1px solid var(--cf-color-danger-border);
    border-radius: var(--cf-radius-md);
    padding: 20px;
    margin-bottom: 20px;
    color: var(--cf-color-text-primary);
}

.processing-error-action__header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.processing-error-action__header-icon {
    color: var(--cf-color-danger-text);
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.processing-error-action__header-title {
    display: block;
    font-weight: 700;
    font-size: var(--cf-font-size-base);
}

.processing-error-action__header-sub {
    margin: 4px 0 0;
    font-size: var(--cf-font-size-sm);
}

.processing-error-action__steps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 600px) {
    .processing-error-action__steps {
        grid-template-columns: 1fr;
    }
}

.processing-error-action__step {
    border: 1px solid var(--cf-color-danger-border);
    border-radius: var(--cf-radius-sm);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.processing-error-action__step-label {
    display: inline-flex;
    align-items: center;
    background-color: var(--cf-color-btn-dark);
    color: var(--cf-color-text-reverse);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 9999px;
    align-self: flex-start;
    letter-spacing: 0.03em;
}

.processing-error-action__step-title {
    display: block;
    font-weight: 700;
    margin-top: 4px;
}

.processing-error-action__step-desc {
    font-size: var(--cf-font-size-sm);
    margin: 0;
    flex: 1;
    line-height: 1.5;
}

.processing-error-action__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: var(--cf-radius-md);
    font-size: var(--cf-font-size-sm);
    font-weight: 500;
    cursor: pointer;
    border: none;
    background-color: var(--cf-color-btn-dark);
    color: var(--cf-color-text-reverse);
    transition: background-color 0.15s ease, opacity 0.15s ease;
    margin-top: 8px;
    align-self: flex-start;
}

.processing-error-action__btn:hover:not(:disabled) {
    background-color: var(--cf-color-btn-dark-hover);
}

.processing-error-action__btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.processing-error-action__download-status {
    font-size: var(--cf-font-size-sm);
    color: var(--cf-color-text-primary);
    margin-top: 4px;
}

.processing-error-action__download-status--error {
    color: var(--cf-color-danger-text);
}

/* Issues List (legacy — kept for backward compat) */
.processing-issues {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.processing-issue {
    border: 1px solid var(--cf-color-border);
    border-radius: var(--cf-radius-md);
    overflow: hidden;
}

.processing-issue__header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background-color: var(--cf-color-surface-secondary);
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease;
}

.processing-issue__header:hover {
    background-color: var(--cf-color-border);
}

.processing-issue__header[data-expanded="true"] {
    border-bottom: 1px solid var(--cf-color-border);
}

.processing-issue__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
    font-size: 0.75rem;
}

.processing-issue__icon--error {
    background-color: var(--cf-color-danger-surface);
    color: var(--cf-color-danger-icon);
}

.processing-issue__icon--warning {
    background-color: var(--cf-color-warning-surface);
    color: var(--cf-color-warning-text);
}

.processing-issue__icon--success {
    background-color: var(--cf-color-success-surface);
    color: var(--cf-color-success-icon);
}

.processing-issue__title {
    flex: 1;
    font-weight: 500;
    color: var(--cf-color-text-primary);
}

.processing-issue__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--cf-color-text-secondary);
    flex-shrink: 0;
}

.processing-issue__details {
    padding: 16px;
    background-color: var(--cf-color-surface-primary);
}

.processing-issue__description {
    font-size: var(--cf-font-size-sm);
    color: var(--cf-color-text-secondary);
    margin: 0;
    line-height: 1.5;
}

.processing-issue__count {
    font-size: var(--cf-font-size-sm);
    color: var(--cf-color-text-secondary);
    background-color: var(--cf-color-border);
    padding: 2px 8px;
    border-radius: 9999px;
    flex-shrink: 0;
}

.processing-issue__list {
    margin: 0;
    padding: 0 0 0 20px;
    list-style-type: disc;
}

.processing-issue__list li {
    font-size: var(--cf-font-size-sm);
    color: var(--cf-color-text-secondary);
    padding: 2px 0;
}

.processing-issue__list li::marker {
    color: var(--cf-color-danger-icon);
}