/* ===== Pickup workflow styles ============================================== */

/* ─── Status badge ─────────────────────────────────────────────────────────── */
.st-pickup-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: 6px;
    font-family: var(--st-font-mono, "JetBrains Mono", monospace);
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: #f6f3ec;
    color: #555;
    border: 1px solid #e0dbd333;
    white-space: nowrap;
}
.st-pickup-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}
.st-pickup-badge-received  { color: #92710a; background: rgba(146,113,10,.10); border-color: rgba(146,113,10,.33); }
.st-pickup-badge-picking   { color: #9b1b30; background: rgba(155,27,48,.08); border-color: rgba(155,27,48,.33); }
.st-pickup-badge-checked   { color: #5563a8; background: rgba(85,99,168,.10); border-color: rgba(85,99,168,.33); }
.st-pickup-badge-ready     { color: #365d43; background: rgba(54,93,67,.10); border-color: rgba(54,93,67,.33); }
.st-pickup-badge-pickedup  { color: #7a6e5d; background: rgba(122,110,93,.10); border-color: rgba(122,110,93,.33); }
.st-pickup-badge-cancelled { color: #999;    background: #eee;                  border-color: #ddd; }

/* ─── Payment badge ────────────────────────────────────────────────────────── */
.st-pickup-payment {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 6px;
    font-family: var(--st-font-mono, "JetBrains Mono", monospace);
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    background: #fff;
    color: #555;
    border: 1px solid #99999955;
    white-space: nowrap;
}
.st-pickup-payment-notinitiated { color: #92710a; border-color: #92710a55; }
.st-pickup-payment-initiated    { color: #5563a8; border-color: #5563a855; }
.st-pickup-payment-settled      { color: #365d43; border-color: #365d4355; }
.st-pickup-payment-failed       { color: #9b1b30; border-color: #9b1b3055; }
.st-pickup-payment-reversed     { color: #7a6e5d; border-color: #7a6e5d55; }
.st-pickup-payment-waived       { color: #5c5347; border-color: #5c534755; }
.st-pickup-payment-voided       { color: #999;    border-color: #99999955; }

/* ─── Buttons (suggested + neutral + danger) ───────────────────────────────── */
.st-pickup-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 9px;
    font-family: var(--st-font-sans, "DM Sans", sans-serif);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color 150ms ease, border-color 150ms ease;
}
.st-pickup-btn:disabled { cursor: not-allowed; opacity: 0.55; }
.st-pickup-btn-neutral {
    background: #fff;
    color: #1a1a1a;
    border-color: #d8d3cb;
}
.st-pickup-btn-neutral:hover:not(:disabled) {
    background: rgba(155,27,48,.04);
    border-color: rgba(155,27,48,.20);
}
.st-pickup-btn-danger {
    background: #fff;
    color: #9b1b30;
    border-color: rgba(155,27,48,.30);
}
.st-pickup-btn-danger:hover:not(:disabled) {
    background: rgba(155,27,48,.06);
    border-color: rgba(155,27,48,.45);
}
.st-pickup-btn-suggested {
    background: #9b1b30;
    color: #fff;
    border-color: #9b1b30;
    animation: st-pickup-pulse 1.8s ease-out infinite;
}
.st-pickup-btn-suggested:hover:not(:disabled) {
    background: #7a1525;
    border-color: #7a1525;
}
.st-pickup-suggested-star {
    color: #ffd9a8;
    font-size: 13px;
    line-height: 1;
    margin-top: -1px;
}
@keyframes st-pickup-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(155,27,48,.40); }
    70%  { box-shadow: 0 0 0 8px rgba(155,27,48,0); }
    100% { box-shadow: 0 0 0 0 rgba(155,27,48,0); }
}

/* ─── Progress bar ─────────────────────────────────────────────────────────── */
.st-pickup-progress {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 0;
}
.st-pickup-progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 0;
}
.st-pickup-progress-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid #d8d3cb;
    flex-shrink: 0;
    transition: background-color 150ms ease, box-shadow 240ms ease;
}
.st-pickup-progress-compact .st-pickup-progress-dot { width: 10px; height: 10px; }
.st-pickup-progress-label {
    font-family: var(--st-font-mono, "JetBrains Mono", monospace);
    font-size: 9px;
    color: #bbb;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 500;
}
.st-pickup-progress-step.done .st-pickup-progress-dot { border: none; background: #555; }
.st-pickup-progress-step.done .st-pickup-progress-label { color: #555; }
.st-pickup-progress-step.current .st-pickup-progress-dot { border: none; }
.st-pickup-progress-step.current .st-pickup-progress-label { font-weight: 700; }
/* per-status dot color for current step */
.st-pickup-progress-step[data-status="received"].current .st-pickup-progress-dot { background: #92710a; box-shadow: 0 0 0 4px rgba(146,113,10,.10); }
.st-pickup-progress-step[data-status="received"].current .st-pickup-progress-label { color: #92710a; }
.st-pickup-progress-step[data-status="picking"].current .st-pickup-progress-dot { background: #9b1b30; box-shadow: 0 0 0 4px rgba(155,27,48,.08); }
.st-pickup-progress-step[data-status="picking"].current .st-pickup-progress-label { color: #9b1b30; }
.st-pickup-progress-step[data-status="checked"].current .st-pickup-progress-dot { background: #5563a8; box-shadow: 0 0 0 4px rgba(85,99,168,.10); }
.st-pickup-progress-step[data-status="checked"].current .st-pickup-progress-label { color: #5563a8; }
.st-pickup-progress-step[data-status="ready"].current .st-pickup-progress-dot { background: #365d43; box-shadow: 0 0 0 4px rgba(54,93,67,.10); }
.st-pickup-progress-step[data-status="ready"].current .st-pickup-progress-label { color: #365d43; }
.st-pickup-progress-step[data-status="pickedup"].current .st-pickup-progress-dot { background: #7a6e5d; box-shadow: 0 0 0 4px rgba(122,110,93,.10); }
.st-pickup-progress-step[data-status="pickedup"].current .st-pickup-progress-label { color: #7a6e5d; }
.st-pickup-progress-step.cancelled .st-pickup-progress-dot { background: #ddd; border: none; }
.st-pickup-progress-step.cancelled .st-pickup-progress-label { color: #bbb; }
.st-pickup-progress-rail {
    flex: 1;
    height: 2px;
    background: #e8e3da;
    margin: 0 6px;
    margin-top: -14px;
    border-radius: 1px;
}
.st-pickup-progress-compact .st-pickup-progress-rail { margin: 0 4px; margin-top: 0; }
.st-pickup-progress-rail.done { background: #555; }
.st-pickup-progress-rail.cancelled { background: #ddd; }

/* ─── Attention ribbon ─────────────────────────────────────────────────────── */
.st-pickup-attention {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 6px;
    font-family: var(--st-font-mono, "JetBrains Mono", monospace);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.st-pickup-attention-compact { padding: 2px 8px; font-size: 10px; }
.st-pickup-attention-icon { font-size: 12px; line-height: 1; }
.st-pickup-attention-stalepicking,
.st-pickup-attention-unpaidready {
    color: #92710a;
    background: rgba(146,113,10,.10);
    border: 1px solid rgba(146,113,10,.33);
}
.st-pickup-attention-staleready {
    color: #9b1b30;
    background: rgba(155,27,48,.08);
    border: 1px solid rgba(155,27,48,.33);
}

/* ───────────────────────────── Pickup card ─────────────────────────────── */
.st-pickup-card {
    background: #fff;
    border: 1px solid #e0dbd3;
    border-left-width: 4px;
    border-radius: 10px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
}
.st-pickup-card-compact { padding: 14px 16px; gap: 10px; }
.st-pickup-card-flagged {
    border-color: rgba(155,27,48,.20);
    box-shadow: 0 0 0 1px rgba(155,27,48,.10);
}

/* per-status left border accent — mirrors STATUS_VIZ in the design */
.st-pickup-card-received  { border-left-color: #92710a; }
.st-pickup-card-picking   { border-left-color: #9b1b30; }
.st-pickup-card-checked   { border-left-color: #5563a8; }
.st-pickup-card-ready     { border-left-color: #365d43; }
.st-pickup-card-pickedup  { border-left-color: #7a6e5d; }
.st-pickup-card-cancelled { border-left-color: #999; }

.st-pickup-card-row1 {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}
.st-pickup-card-left {
    min-width: 0;
    flex: 1;
}
.st-pickup-card-headline {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 3px;
}
.st-pickup-card-account {
    font-family: var(--st-font-sans, "DM Sans", sans-serif);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.2px;
    color: #1a1a1a;
    margin: 0;
    line-height: 1.2;
}
.st-pickup-card-compact .st-pickup-card-account { font-size: 15px; }
.st-pickup-card-id {
    font-family: var(--st-font-mono, "JetBrains Mono", monospace);
    font-size: 11px;
    color: #888;
}
.st-pickup-card-address {
    font-family: var(--st-font-sans, "DM Sans", sans-serif);
    font-size: 13px;
    color: #555;
}
.st-pickup-card-badges {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
}

.st-pickup-card-progress { padding-top: 2px; }

.st-pickup-card-items {
    background: #fafaf8;
    border: 1px dashed #e0dbd3;
    border-radius: 8px;
    padding: 10px 14px;
}
.st-pickup-card-compact .st-pickup-card-items { padding: 8px 12px; }
.st-pickup-card-overline {
    font-family: var(--st-font-mono, "JetBrains Mono", monospace);
    font-size: 10.5px;
    font-weight: 500;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 3px;
}
.st-pickup-card-items-text {
    font-family: var(--st-font-sans, "DM Sans", sans-serif);
    font-size: 13.5px;
    color: #1a1a1a;
    line-height: 1.45;
}
.st-pickup-card-items-empty {
    color: #aaa;
    font-style: italic;
    font-size: 13.5px;
}

.st-pickup-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.st-pickup-card-audit {
    font-family: var(--st-font-mono, "JetBrains Mono", monospace);
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.st-pickup-card-value {
    font-family: var(--st-font-mono, "JetBrains Mono", monospace);
    font-size: 14px;
    font-weight: 700;
    color: #1a1a1a;
}

.st-pickup-card-cancel-reason {
    padding: 10px 12px;
    background: #fafaf8;
    border-radius: 8px;
    border: 1px dashed #e0dbd3;
}
.st-pickup-card-cancel-reason-text {
    font-size: 13px;
    color: #555;
    font-style: italic;
}

.st-pickup-card-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ───────────────────────────── Dialogs ─────────────────────────────────── */
.st-pickup-dialog .mud-dialog { border-radius: 14px; }
.st-pickup-dialog-header {
    display: flex;
    align-items: center;
    gap: 12px;
}
.st-pickup-dialog-icon {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: rgba(155,27,48,.08);
    color: #9b1b30;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.st-pickup-dialog-eyebrow {
    font-family: var(--st-font-mono, "JetBrains Mono", monospace);
    font-size: 10.5px;
    font-weight: 500;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}
.st-pickup-dialog-title {
    font-family: var(--st-font-sans, "DM Sans", sans-serif);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.2px;
    color: #1a1a1a;
}
.st-pickup-dialog-body {
    font-size: 13.5px;
    color: #555;
    line-height: 1.55;
    margin-top: 14px;
}

.st-pickup-customer-block {
    background: #fafaf8;
    border: 1px solid #e0dbd3;
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 14px;
}
.st-pickup-customer-overline {
    font-family: var(--st-font-mono, "JetBrains Mono", monospace);
    font-size: 10.5px;
    font-weight: 500;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
    display: block;
}
.st-pickup-customer-name {
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
}
.st-pickup-customer-address {
    font-size: 13px;
    color: #555;
    margin-top: 1px;
}
.st-pickup-customer-items {
    margin-top: 10px;
    padding: 8px 10px;
    background: #fff;
    border: 1px dashed #e0dbd3;
    border-radius: 6px;
}
.st-pickup-customer-items-text { font-size: 13px; color: #1a1a1a; line-height: 1.45; }
.st-pickup-customer-items-empty { color: #aaa; font-style: italic; }
.st-pickup-customer-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    gap: 10px;
}
.st-pickup-customer-value {
    font-family: var(--st-font-mono, "JetBrains Mono", monospace);
    font-size: 13px;
    font-weight: 700;
    color: #1a1a1a;
}

.st-pickup-dialog-notice {
    padding: 10px 12px;
    border-radius: 8px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 12px;
}
.st-pickup-dialog-notice-info {
    background: rgba(85,99,168,.08);
    border: 1px solid rgba(85,99,168,.20);
}
.st-pickup-dialog-notice-amber {
    background: rgba(146,113,10,.08);
    border: 1px solid rgba(146,113,10,.22);
}
.st-pickup-dialog-notice-amber-soft {
    background: rgba(146,113,10,.10);
    border: 1px solid rgba(146,113,10,.25);
    font-size: 12.5px;
    color: #5c5347;
    line-height: 1.5;
}
.st-pickup-dialog-notice-crimson {
    background: rgba(155,27,48,.05);
    border: 1px solid rgba(155,27,48,.15);
    font-size: 12.5px;
    color: #5c5347;
    line-height: 1.5;
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 8px;
}
.st-pickup-dialog-notice-label {
    font-family: var(--st-font-mono, "JetBrains Mono", monospace);
    font-size: 11px;
    color: #5563a8;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.st-pickup-dialog-notice-text {
    font-size: 12.5px;
    color: #555;
    line-height: 1.45;
}
.st-pickup-dialog-notice-strong {
    font-size: 13.5px;
    font-weight: 700;
    color: #92710a;
    margin-bottom: 3px;
}
.st-pickup-dialog-notice-icon-circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #92710a;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-weight: 700;
    font-size: 13px;
}
.st-pickup-dialog-field { margin-top: 14px; }
.st-pickup-dialog-input { margin-top: 4px; }
.st-pickup-dialog-helper {
    font-family: var(--st-font-mono, "JetBrains Mono", monospace);
    font-size: 10.5px;
    color: #888;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    margin-top: 6px;
}
.st-pickup-dialog-counter {
    display: flex;
    justify-content: space-between;
    font-family: var(--st-font-mono, "JetBrains Mono", monospace);
    font-size: 10.5px;
    color: #888;
    margin-top: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.st-pickup-btn-danger-fill {
    background: #9b1b30;
    color: #fff;
    border: 1px solid #9b1b30;
    padding: 9px 16px;
    border-radius: 9px;
    font-family: var(--st-font-sans, "DM Sans", sans-serif);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
}
.st-pickup-btn-danger-fill:hover:not(:disabled) { background: #7a1525; border-color: #7a1525; }
.st-pickup-btn-danger-fill:disabled { background: #c9a3ab; border-color: #c9a3ab; cursor: not-allowed; }

/* ───────────────────────────── Create dialog ───────────────────────────── */
.st-pickup-dialog-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.st-pickup-dialog-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    margin-top: 12px;
}
.st-pickup-dialog-input-mono input { font-family: var(--st-font-mono, "JetBrains Mono", monospace); }
.st-pickup-dialog-collapsible {
    margin-top: 8px;
    padding: 10px 14px;
    background: #fafaf8;
    border: 1px solid #e0dbd3;
    border-radius: 8px;
}
.st-pickup-dialog-collapsible-summary {
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: #1a1a1a;
}
.st-pickup-account-option { padding: 2px 0; }
.st-pickup-account-option-name { font-weight: 600; font-size: 13.5px; color: #1a1a1a; }
.st-pickup-account-option-addr { font-size: 12px; color: #888; margin-top: 1px; }
.st-pickup-btn-create-fill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #9b1b30;
    color: #fff;
    border: 1px solid #9b1b30;
    padding: 9px 16px;
    border-radius: 9px;
    font-family: var(--st-font-sans, "DM Sans", sans-serif);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
}
.st-pickup-btn-create-fill:hover:not(:disabled) { background: #7a1525; border-color: #7a1525; }
.st-pickup-btn-create-fill:disabled { background: #c9a3ab; border-color: #c9a3ab; cursor: not-allowed; }

/* ───────────────────────────── Dashboard ───────────────────────────────── */
.st-pickup-dash {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px;
}
.st-pickup-dash-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}
.st-pickup-dash-title {
    font-family: var(--st-font-sans, "DM Sans", sans-serif);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.4px;
    margin: 0;
    line-height: 1.15;
    color: #1a1a1a;
}
.st-pickup-dash-sub {
    font-size: 13px;
    color: #555;
    margin-top: 6px;
}
.st-pickup-dash-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.st-pickup-density-toggle {
    display: inline-flex;
    border-radius: 8px;
    border: 1px solid #e0dbd3;
    overflow: hidden;
    background: #fff;
}
.st-pickup-density-toggle button {
    padding: 7px 12px;
    font-size: 12.5px;
    font-weight: 600;
    background: transparent;
    color: #555;
    border: none;
    cursor: pointer;
    font-family: var(--st-font-sans, "DM Sans", sans-serif);
}
.st-pickup-density-toggle button.active {
    background: #1a1a1a;
    color: #fff;
}

.st-pickup-dash-tabs {
    display: flex;
    gap: 0;
    overflow-x: auto;
    border-bottom: 1px solid #e0dbd3;
}
.st-pickup-tab {
    background: transparent;
    border: none;
    padding: 11px 16px;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    color: #555;
    font-family: var(--st-font-sans, "DM Sans", sans-serif);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
.st-pickup-tab.active {
    border-bottom-color: #9b1b30;
    color: #9b1b30;
}
.st-pickup-tab-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.st-pickup-tab-dot-received  { background: #92710a; }
.st-pickup-tab-dot-picking   { background: #9b1b30; }
.st-pickup-tab-dot-checked   { background: #5563a8; }
.st-pickup-tab-dot-ready     { background: #365d43; }
.st-pickup-tab-dot-pickedup  { background: #7a6e5d; }
.st-pickup-tab-dot-cancelled { background: #999; }
.st-pickup-tab-count {
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 9px;
    background: #f0ece4;
    color: #555;
    font-family: var(--st-font-mono, "JetBrains Mono", monospace);
    font-size: 10.5px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.st-pickup-tab.active .st-pickup-tab-count {
    background: #9b1b30;
    color: #fff;
}
.st-pickup-tab-attention {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px;
    border-radius: 6px;
    background: rgba(155,27,48,.10);
    color: #9b1b30;
    font-family: var(--st-font-mono, "JetBrains Mono", monospace);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.st-pickup-dash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
    gap: 14px;
}
.st-pickup-dash-grid-compact {
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 10px;
}

.st-pickup-dash-loading {
    padding: 60px;
    display: flex;
    justify-content: center;
}
.st-pickup-dash-empty {
    padding: 60px;
    text-align: center;
    background: #fff;
    border: 1px dashed #e0dbd3;
    border-radius: 10px;
    color: #555;
    font-size: 14px;
}
.st-pickup-dash-empty .st-pickup-card-overline { margin-bottom: 8px; }

.st-pickup-dash-footer {
    display: flex;
    justify-content: space-between;
    font-family: var(--st-font-mono, "JetBrains Mono", monospace);
    font-size: 10.5px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 8px;
}