/* Quick status control -------------------------------------------------
   Shared by desktop and mobile. It keeps status changes fast while the
   backend remains authoritative and every change is written to Audit Trail.
*/
.quick-status-control {
    --quick-status-color: #64748b;
    position: relative;
    min-width: 118px;
    max-width: 154px;
    min-height: 32px;
    display: inline-grid;
    grid-template-columns: 8px minmax(0, 1fr) 13px;
    align-items: center;
    gap: 7px;
    padding-inline: 10px 7px;
    border: 1px solid color-mix(in srgb, var(--quick-status-color) 24%, var(--border));
    border-radius: 9px;
    background: color-mix(in srgb, var(--quick-status-color) 7%, var(--surface));
    color: color-mix(in srgb, var(--quick-status-color) 78%, var(--text));
    transition:
        background-color 160ms cubic-bezier(.2,.8,.2,1),
        border-color 160ms cubic-bezier(.2,.8,.2,1),
        box-shadow 160ms cubic-bezier(.2,.8,.2,1),
        transform 100ms ease;
    isolation: isolate;
}

.quick-status-control:hover {
    border-color: color-mix(in srgb, var(--quick-status-color) 46%, var(--border));
    box-shadow: 0 2px 8px color-mix(in srgb, var(--quick-status-color) 9%, transparent);
}

.quick-status-control:focus-within {
    border-color: color-mix(in srgb, var(--quick-status-color) 62%, var(--border));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--quick-status-color) 13%, transparent);
}

.quick-status-control__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--quick-status-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--quick-status-color) 10%, transparent);
    pointer-events: none;
}

.quick-status-control__select {
    width: 100%;
    min-width: 0;
    min-height: 30px;
    padding: 0;
    border: 0;
    outline: 0;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    color: inherit;
    font-size: 12px;
    font-weight: 720;
    line-height: 1;
    cursor: pointer;
}

.quick-status-control__select:focus { box-shadow: none; }
.quick-status-control__select option { color: var(--text); background: var(--surface); }

.quick-status-control__chevron {
    font-size: 12px;
    color: color-mix(in srgb, var(--quick-status-color) 58%, var(--muted));
    line-height: 1;
    pointer-events: none;
    transition: transform 140ms ease;
}
.quick-status-control:focus-within .quick-status-control__chevron { transform: translateY(1px); }

.quick-status-control__spinner {
    position: absolute;
    inset-inline-end: 8px;
    width: 13px;
    height: 13px;
    border: 2px solid color-mix(in srgb, var(--quick-status-color) 22%, transparent);
    border-top-color: var(--quick-status-color);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
}

.quick-status-control.is-saving .quick-status-control__chevron { opacity: 0; }
.quick-status-control.is-saving .quick-status-control__spinner {
    opacity: 1;
    animation: lltQuickStatusSpin 700ms linear infinite;
}
.quick-status-control.is-saving { opacity: .82; }
.quick-status-control.is-saving .quick-status-control__select { cursor: wait; }

.quick-status-control--large {
    min-width: 144px;
    min-height: 38px;
    border-radius: 10px;
}
.quick-status-control--large .quick-status-control__select { min-height: 36px; font-size: 13px; }

.quick-status--new { --quick-status-color: #3b82f6; }
.quick-status--contact { --quick-status-color: #8b5cf6; }
.quick-status--follow_up { --quick-status-color: #f97316; }
.quick-status--waiting { --quick-status-color: #d49a05; }
.quick-status--preparing { --quick-status-color: #0891b2; }
.quick-status--completed { --quick-status-color: #22a65a; }
.quick-status--cancelled { --quick-status-color: #dc4c57; }

.quick-status-cell { min-width: 136px; }

[data-order-id].is-leaving {
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 160ms ease, transform 160ms ease;
}

@keyframes lltQuickStatusSpin { to { transform: rotate(360deg); } }

@media (max-width: 760px) {
    .quick-status-control {
        min-width: 116px;
        max-width: 142px;
        min-height: 34px;
        border-radius: 10px;
        grid-template-columns: 7px minmax(0, 1fr) 12px;
        padding-inline: 9px 7px;
        gap: 6px;
    }
    .quick-status-control__select {
        min-height: 32px;
        font-size: 12px;
        /* Explicit 16px is normally required for form fields on iOS, but this
           compact selector is not a text-input and Safari does not zoom it. */
    }
    .quick-status-control--large {
        min-width: 140px;
        min-height: 40px;
    }
    .quick-status-control--large .quick-status-control__select { min-height: 38px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
    .quick-status-control,
    [data-order-id].is-leaving { transition-duration: 1ms !important; }
    .quick-status-control__spinner { animation-duration: 1.4s; }
}