/* Buyback Progress Stepper — injected via app_include_css */

.buyback-stepper {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    margin: 0 0 15px 0;
    background: var(--subtle-fg);
    border-radius: var(--border-radius-lg);
    overflow-x: auto;
}

.buyback-stepper .step {
    display: flex;
    align-items: center;
    white-space: nowrap;
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.buyback-stepper .step.active {
    color: var(--primary);
    font-weight: 600;
}

.buyback-stepper .step.completed {
    color: var(--green-600);
}

.buyback-stepper .step.rejected {
    color: var(--red-600);
}

.buyback-stepper .step-circle {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 6px;
    font-size: 11px;
    font-weight: 700;
    background: var(--subtle-accent);
    color: var(--text-muted);
    flex-shrink: 0;
}

.buyback-stepper .step.active .step-circle {
    background: var(--primary);
    color: white;
}

.buyback-stepper .step.completed .step-circle {
    background: var(--green-500);
    color: white;
}

.buyback-stepper .step.rejected .step-circle {
    background: var(--red-500);
    color: white;
}

.buyback-stepper .step-connector {
    width: 30px;
    height: 2px;
    background: var(--border-color);
    margin: 0 8px;
    flex-shrink: 0;
}

.buyback-stepper .step.completed + .step-connector,
.buyback-stepper .step-connector.done {
    background: var(--green-500);
}

/* Status badges in list view */
.list-row .indicator-pill[data-state="Draft"] { --indicator-dot-color: var(--red-500); }
.list-row .indicator-pill[data-state="Quoted"] { --indicator-dot-color: var(--blue-500); }
.list-row .indicator-pill[data-state="Accepted"] { --indicator-dot-color: var(--green-500); }
.list-row .indicator-pill[data-state="In Progress"] { --indicator-dot-color: var(--orange-500); }
.list-row .indicator-pill[data-state="Completed"] { --indicator-dot-color: var(--green-500); }
.list-row .indicator-pill[data-state="Awaiting Approval"] { --indicator-dot-color: var(--orange-500); }
.list-row .indicator-pill[data-state="Approved"] { --indicator-dot-color: var(--blue-500); }
.list-row .indicator-pill[data-state="Paid"] { --indicator-dot-color: var(--green-500); }
.list-row .indicator-pill[data-state="Closed"] { --indicator-dot-color: var(--green-700); }
.list-row .indicator-pill[data-state="Rejected"] { --indicator-dot-color: var(--red-500); }
.list-row .indicator-pill[data-state="Expired"] { --indicator-dot-color: var(--gray-500); }
.list-row .indicator-pill[data-state="Cancelled"] { --indicator-dot-color: var(--gray-500); }