/**
 * Order detail / builder page
 */

.order-page {
    padding: var(--space-lg);
    max-width: 1400px;
    margin: 0 auto;
}

.order-back-bar {
    display: flex;
    gap: 8px;
    margin-bottom: var(--space-md);
}
.order-back-bar .dashboard-link::before { content: '⌂  '; }

.order-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-lg);
    gap: var(--space-lg);
}
.order-title {
    margin: 0 0 8px 0;
    font-size: 24px;
    color: var(--text-primary);
}

/* Editable title — styled to look like an h1, but is a text input so the
   user can rename the order inline. Goes flat/visible on focus. */
.order-header-main {
    flex: 1;
    min-width: 0;
}
.order-title-input {
    display: block;
    width: 100%;
    margin: 0 0 4px 0;
    padding: 2px 6px;
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    font-family: inherit;
    transition: background 0.1s, border-color 0.1s;
}
.order-title-input:hover {
    background: var(--surface-alt, rgba(255,255,255,0.04));
}
.order-title-input:focus {
    outline: none;
    border-color: var(--accent, #3b82f6);
    background: var(--surface, rgba(255,255,255,0.06));
}
.order-title-input::placeholder {
    color: var(--text-secondary);
    opacity: 0.6;
    font-style: italic;
    font-weight: 400;
}
.order-subtitle {
    margin: 0 0 8px 6px;
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
    letter-spacing: 0.3px;
}
.order-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    color: var(--text-secondary);
    font-size: 13px;
}
.order-status-block {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Status / payment pills — match OrdersWidget for consistency */
.status-badge, .payment-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    white-space: nowrap;
    border: none;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.1s;
}
.status-btn:hover, .payment-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.status-pending     { background: #fff3cd; color: #856404; }
.status-confirmed   { background: #cce5ff; color: #004085; }
.status-in-production { background: #d4edda; color: #155724; }
.status-ready       { background: #d1ecf1; color: #0c5460; }
.status-shipped     { background: #e2e3e5; color: #383d41; }
.status-delivered   { background: #c3e6cb; color: #155724; }
.status-cancelled   { background: #f8d7da; color: #721c24; }

.payment-unpaid  { background: #f8d7da; color: #721c24; }
.payment-deposit { background: #fff3cd; color: #856404; }
.payment-paid    { background: #d4edda; color: #155724; }

/* Popup for changing status / payment */
.order-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.order-modal-content {
    background: var(--bg-primary);
    border-radius: 8px;
    min-width: 260px;
    max-width: 90%;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    border: 1px solid var(--border-color);
}
.order-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
}
.order-modal-title { font-weight: 600; font-size: 14px; color: var(--text-primary); }
.order-modal-close {
    background: none; border: none;
    font-size: 20px; cursor: pointer;
    color: var(--text-secondary); padding: 0; line-height: 1;
}
.order-modal-close:hover { color: var(--text-primary); }
.order-modal-body { padding: 8px; }
.order-modal-option {
    display: block;
    width: 100%;
    padding: 10px 16px;
    text-align: left;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 13px;
    border-radius: 4px;
    transition: background 0.1s;
    color: var(--text-primary);
}
.order-modal-option:hover { background: var(--bg-tertiary); }
.order-modal-option.selected { background: var(--accent-color, var(--accent)); color: white; }
.order-modal-option .option-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
}

/* Per-item editor body. Sections stack vertically with a small visual
   separator. The editor sits inside the existing .modal-large shell so it
   inherits width / centering from base styles. */
.item-editor-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 12px;
}
.ie-section {
    padding-top: 4px;
}

/* Design header — clickable thumbnail + name. Sits above the fabric
   section when a design is attached to the line item; click opens the
   shared DesignChat modal so the rep can comment without leaving the
   order. */
.ie-design-section {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}
.ie-design-thumb {
    flex-shrink: 0;
    width: 96px;
    height: 48px;          /* design thumbs are always 2:1 */
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    transition: border-color 0.15s, transform 0.05s;
}
.ie-design-thumb:hover {
    border-color: var(--accent, #2563eb);
}
.ie-design-thumb:active { transform: translateY(1px); }
.ie-design-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ie-design-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.ie-design-name {
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 500;
}
.ie-design-code {
    font-size: 11px;
    color: var(--text-secondary);
}
.ie-design-approve {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-primary);
    cursor: pointer;
    user-select: none;
}
.ie-design-approve input[type="checkbox"] { cursor: pointer; }
/* Pill that surfaces the post-approve state ("waiting for AI upload")
   so the rep doesn't have to dig into the design-request widget to
   check whether the source has landed. */
.ie-design-approve-pill {
    background: #f59e0b;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 8px;
}
.ie-design-ai-link {
    margin-top: 4px;
    font-size: 12px;
    color: var(--accent);
    text-decoration: none;
}
.ie-design-ai-link:hover { text-decoration: underline; }
.ie-section-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    margin-bottom: 6px;
}
.ie-label {
    display: inline-block;
    font-size: 12px;
    color: var(--text-secondary);
    min-width: 60px;
}
.ie-input {
    width: 100%;
    padding: 6px 10px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 13px;
    box-sizing: border-box;
    font-family: inherit;
}
.ie-input:focus { outline: none; border-color: var(--accent, #2563eb); }
.ie-fixed-row {
    display: flex;
    gap: 12px;
    padding: 4px 0;
    font-size: 13px;
    color: var(--text-primary);
}
.ie-empty {
    font-size: 12px;
    color: var(--text-muted, var(--text-secondary));
    font-style: italic;
}
.ie-variant {
    margin-bottom: 6px;
    font-size: 13px;
}
.ie-radio-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}
.ie-radio,
.ie-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: var(--text-primary);
}
.ie-radio input,
.ie-checkbox input {
    accent-color: var(--accent, #2563eb);
}
.ie-pantone-section {
    background: color-mix(in srgb, var(--accent, #2563eb) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent, #2563eb) 30%, transparent);
    border-radius: 6px;
    padding: 8px 10px;
}

/* Base-printing section follows the fabric and lights up subtly so the
   rep notices it appearing when they change fabric. The hint below the
   radios calls out the matching downstream requirement (Pantone vs
   design). */
.ie-printing-section {
    background: color-mix(in srgb, #f59e0b 5%, transparent);
    border: 1px solid color-mix(in srgb, #f59e0b 30%, transparent);
    border-radius: 6px;
    padding: 8px 10px;
}
.ie-printing-hint {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 6px;
    min-height: 1em;
}

/* Decorations multi-select. Rendered as a stacked checklist filtered to
   the decorations whose `applies_to` contains the current production_tech.
   Decorations stack on a per-unit cost basis per the source spreadsheet,
   but we don't model pricing impact here yet. */
.ie-decorations-section {
    background: color-mix(in srgb, #8b5cf6 5%, transparent);
    border: 1px solid color-mix(in srgb, #8b5cf6 30%, transparent);
    border-radius: 6px;
    padding: 8px 10px;
}
.ie-decorations-hint {
    font-size: 11px;
    color: var(--text-secondary);
    margin-bottom: 6px;
    line-height: 1.35;
}
.ie-decorations-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ie-decoration-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border-radius: 4px;
    cursor: pointer;
    color: var(--text-primary);
    font-size: 13px;
    margin: 0;
}
.ie-decoration-row:hover { background: var(--bg-tertiary); }
.ie-decoration-check { accent-color: var(--accent, #2563eb); }
.ie-decoration-name { flex: 1; }

/* Design Request body — product thumbnail + meta header at the top, then
   reuses the .ie-section / .ie-input visual language from the per-item
   editor for consistency. */
.dr-modal-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 12px;
}
.dr-product-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}
.dr-product-thumb {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
}
.dr-product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.dr-product-meta { display: flex; flex-direction: column; gap: 2px; }
.dr-product-name { font-size: 14px; color: var(--text-primary); font-weight: 500; }
.dr-product-sku  { font-size: 12px; color: var(--text-secondary); }

/* Designer + Complexity side-by-side row in the design request modal. */
.dr-row-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.dr-row-2col .ie-section { padding-top: 0; }
@media (max-width: 540px) {
    .dr-row-2col { grid-template-columns: 1fr; gap: 8px; }
}

/* Design Request (🎨) button — secondary tone, same footprint as ✎/×. */
.order-item-design-request {
    background: var(--bg-tertiary) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-color) !important;
    padding: 4px !important;
    width: 32px;
    height: 32px;
    line-height: 1;
}
.order-item-design-request:hover {
    color: var(--text-primary) !important;
    border-color: #8b5cf6 !important;       /* same purple as decorations section */
}

/* Edit (✎) button — same footprint as the remove ×, just secondary tone. */
.order-item-edit {
    background: var(--bg-tertiary) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-color) !important;
    padding: 4px !important;
    width: 32px;
    height: 32px;
    line-height: 1;
}
.order-item-edit:hover {
    color: var(--text-primary) !important;
    border-color: var(--accent, #2563eb) !important;
}

/* Doc-type chooser body — bigger card-style options so the rep can see at
   a glance what each button will do (Estimate vs Quote). */
.order-doc-type-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
}
.order-doc-type-option {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s, border-color 0.15s, transform 0.05s;
    color: var(--text-primary);
}
.order-doc-type-option:hover {
    background: var(--bg-secondary);
    border-color: var(--accent, #2563eb);
}
.order-doc-type-option:active { transform: translateY(1px); }
.order-doc-type-icon {
    font-size: 24px;
    flex-shrink: 0;
}
.order-doc-type-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.order-doc-type-text strong {
    font-size: 14px;
    color: var(--text-primary);
}
.order-doc-type-desc {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.35;
}

.order-body {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--space-lg);
    align-items: start;
}
@media (max-width: 900px) {
    .order-body { grid-template-columns: 1fr; }
}

.order-main { display: flex; flex-direction: column; gap: var(--space-lg); }
.order-sidebar { display: flex; flex-direction: column; gap: var(--space-lg); position: sticky; top: var(--space-md); }

/* Items table */
.order-items-header,
.order-item-row {
    display: grid;
    /* 120 design | 1fr nickname | 16 status | 80 qty | 100 price | 80 total | 36 design-req | 36 edit | 36 remove */
    grid-template-columns: 120px 1fr 16px 80px 100px 80px 36px 36px 36px;
    gap: 10px;
    align-items: center;
    padding: 8px 4px;
}
/* Rows are now twice as tall so the 2:1 design thumbnail can fill the
   row vertically. Header stays compact. */
.order-item-row {
    min-height: 80px;
}

/* Readiness indicator — green when every required attribute (fabric +
   any radio variants + a Pantone if a solid-colour option is selected)
   has been set; red otherwise so the rep knows to ✎ edit. Boolean
   variants don't affect readiness — being unchecked is a valid answer. */
.order-item-status-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    border: 1px solid rgba(0, 0, 0, 0.15);
    transition: background 0.2s, box-shadow 0.2s;
}
.order-item-status-dot.is-ready {
    background: #22c55e;          /* green */
    box-shadow: 0 0 0 2px color-mix(in srgb, #22c55e 25%, transparent);
}
.order-item-status-dot.is-blocked {
    background: #ef4444;          /* red */
    box-shadow: 0 0 0 2px color-mix(in srgb, #ef4444 25%, transparent);
}
.order-items-header {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
    text-transform: uppercase;
}
.order-item-row { border-bottom: 1px solid var(--border-color); }
.order-item-row:last-child { border-bottom: none; }
.order-item-name { font-weight: 500; color: var(--text-primary); }
.order-item-qty,
.order-item-price-input {
    padding: 5px 8px;
    font-size: 13px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-primary);
    width: 100%;
    box-sizing: border-box;
}
.order-item-total {
    font-weight: 600;
    font-family: monospace;
    text-align: right;
    color: var(--text-primary);
}

/* Designs — the grid uses the Project page's .design-versions-grid class
   so the card layout matches exactly. Only the detach (×) overlay below is
   unique to the Order page, since orders can unlink designs from an order
   (projects can't "unlink" an uploaded version). */
.dvt-detach-btn {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    padding: 0;
}
.dvt-detach-btn:hover {
    background: #dc2626;
}
/* Reveal on hover so the card stays clean at rest but the remove action is
   a hover away. Matches how the Project page handles similar overlays. */
.design-version-thumb:hover .dvt-detach-btn {
    display: flex;
}

/* Totals */
.order-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    color: var(--text-secondary);
    gap: 8px;
}
.order-total-row input {
    padding: 4px 6px;
    font-size: 13px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-primary);
}
/* Square invoice row in the Payment card — appears only when an invoice
   exists. Status badge sits next to the click-through link. */
.order-square-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.order-square-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--accent, #2563eb);
    text-decoration: none;
    font-size: 13px;
}
.order-square-link:hover { text-decoration: underline; }
.order-square-status {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    border-radius: 10px;
    padding: 1px 8px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Wraps "Tax:" + the ⟳ button so they sit together as a single flex
   child of the totals row. Without this wrapper the button would push the
   right-side amount column out of alignment with the Discount row above. */
.order-tax-label-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

/* Tax row's lookup-from-ZIP button + hint. The button triggers the API
   Ninjas wrapper; the hint shows what address it pulled from on success
   (or the failure reason on click-triggered lookups). */
.order-tax-lookup-btn {
    padding: 2px 6px !important;
    font-size: 12px !important;
    line-height: 1;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    border-radius: 4px;
    cursor: pointer;
    margin-left: 2px;
}
.order-tax-lookup-btn:hover:not(:disabled) {
    color: var(--text-primary);
    border-color: var(--accent, #2563eb);
}
.order-tax-lookup-btn:disabled { opacity: 0.5; cursor: default; }

.order-tax-hint {
    font-size: 11px;
    color: var(--text-secondary);
    padding: 0 0 6px 0;
    line-height: 1.3;
    text-align: right;
}

.order-total-row.total {
    border-top: 1px solid var(--border-color);
    margin-top: 8px;
    padding-top: 12px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.order-sidebar .action-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ── Send to Production card ───────────────────────────────────────── */
/* Collapsed: just the primary button. Expanded: the toggle stays at
   the top, then a checklist sits below with the final Confirm button
   pinned at the bottom. */
.order-stp-card .order-stp-toggle {
    /* The collapsed-state primary action — same styling as the other
       block buttons in the sidebar. */
}
.order-stp-body {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}
.order-stp-intro {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 10px;
    line-height: 1.4;
}
.order-stp-checks {
    list-style: none;
    padding: 0;
    margin: 0 0 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.order-stp-check {
    padding: 8px 10px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
/* Status badge sits at the start of the row; its colour signals
   pass/fail without the rep having to read every label. */
.order-stp-check-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-primary);
}
.order-stp-status {
    width: 18px; height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    flex-shrink: 0;
}
.order-stp-status.pass    { background: #16a34a; color: #fff; }
.order-stp-status.fail    { background: #f59e0b; color: #fff; }
.order-stp-status.pending { background: var(--bg-secondary); color: var(--text-secondary); border: 1px solid var(--border-color); }

.order-stp-check-detail {
    font-size: 11px;
    color: var(--text-secondary);
    margin-left: 26px;     /* line up with the label, past the status icon */
    line-height: 1.35;
}
.order-stp-check-detail a {
    color: var(--accent);
    text-decoration: none;
}
.order-stp-check-detail a:hover { text-decoration: underline; }

/* The "I've verified this" checkbox sits below the auto status. We
   require the rep to actively tick each one before the Confirm button
   unlocks — pressing a button to ship goods to production is a
   commitment we want the rep to actually make, not just acknowledge. */
.order-stp-confirm-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    margin-left: 26px;
    cursor: pointer;
    color: var(--text-secondary);
}
.order-stp-confirm-row input[type="checkbox"] {
    cursor: pointer;
}
.order-stp-hint {
    font-size: 11px;
    color: var(--text-secondary);
    text-align: center;
    margin-top: 6px;
    min-height: 14px;
}

/* ── Shipping card ─────────────────────────────────────────────────── */
/* The default-address line: shown above the toggle so the rep always
   knows where the order will ship if they leave the toggle off. */
.order-ship-default {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 8px;
    line-height: 1.35;
}
.order-ship-default-label {
    color: var(--text-primary);
    margin-right: 4px;
}
.order-ship-default-text {
    word-break: break-word;
}
.order-ship-toggle-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    cursor: pointer;
    margin-bottom: 8px;
}
.order-ship-fields {
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px dashed var(--border-color);
}
.order-ship-hint {
    font-size: 11px;
    color: var(--text-secondary);
    font-style: italic;
    margin-top: 4px;
}

/* Autosave pill — replaces the old "Save Changes" button. Stays quiet when
   idle, warms to amber mid-save, greens after the write lands, reds on
   failure so the user can spot it without a modal interrupting flow. */
.order-autosave {
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 13px;
    text-align: center;
    color: var(--text-secondary);
    background: var(--surface-subtle, rgba(0,0,0,0.04));
    border: 1px solid var(--border-color, rgba(0,0,0,0.08));
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.order-autosave-pending,
.order-autosave-saving {
    color: #b45309;
    background: color-mix(in srgb, #f59e0b 12%, transparent);
    border-color: color-mix(in srgb, #f59e0b 40%, transparent);
}
.order-autosave-saved {
    color: #15803d;
    background: color-mix(in srgb, #22c55e 12%, transparent);
    border-color: color-mix(in srgb, #22c55e 40%, transparent);
}
.order-autosave-error {
    color: #b91c1c;
    background: color-mix(in srgb, #ef4444 12%, transparent);
    border-color: color-mix(in srgb, #ef4444 50%, transparent);
}

.no-items {
    color: var(--text-secondary);
    font-size: 13px;
    padding: 12px;
    text-align: center;
}

/* Design slot on order items - 2:1 ratio. Sized to fill the doubled row
   height (the row min-height is 80px; 60px is comfortably inside that
   while leaving breathing room around the input fields). */
.order-item-design-slot {
    flex-shrink: 0;
    width: 120px;
    height: 60px;
    margin-right: 12px;
}

.order-item-design-empty {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary, #f5f5f5);
    border: 2px dashed var(--border-color, #ddd);
    border-radius: 4px;
    color: var(--text-secondary);
    font-size: 14px;
    cursor: default;
    transition: border-color 0.2s, background 0.2s;
}

.order-item-design-attached {
    position: relative;
    width: 100%;
    height: 100%;
}

.order-item-design-attached img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary, #f5f5f5);
}

.design-detach-btn {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ef4444;
    color: white;
    border: none;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
}

.order-item-design-attached:hover .design-detach-btn {
    opacity: 1;
}

/* Drag-drop states */
.order-item-row.drag-over {
    background: color-mix(in srgb, var(--accent, #3b82f6) 10%, transparent);
    border-color: var(--accent, #3b82f6);
}

.order-item-row.drag-over .order-item-design-empty {
    border-color: var(--accent, #3b82f6);
    background: color-mix(in srgb, var(--accent, #3b82f6) 15%, transparent);
}

.design-card.dragging {
    opacity: 0.5;
    transform: scale(0.95);
}

.design-card[draggable] {
    cursor: grab;
}

.design-card[draggable]:active {
    cursor: grabbing;
}

/* Design card draggable state */
.design-version-thumb[draggable] {
    cursor: grab;
}

.design-version-thumb[draggable]:active {
    cursor: grabbing;
}

.design-version-thumb.dragging {
    opacity: 0.5;
    transform: scale(0.95);
}

/* Nickname input */
.order-item-nickname {
    flex: 1;
    padding: 5px 8px;
    font-size: 13px;
    font-weight: 500;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    color: var(--text-primary);
    transition: border-color 0.2s, background 0.2s;
}

.order-item-nickname:hover {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
}

.order-item-nickname:focus {
    outline: none;
    background: var(--bg-primary);
    border-color: var(--accent, #3b82f6);
}

/* "Open Roster" / "Open Bulk Order Sheet" links — pill chips matching
   the project/business pills in the design request modal. Previously
   declared as .btn .btn-secondary, but .btn-secondary doesn't exist
   in our CSS so the anchor inherited the browser default visited
   colour (dark blue on dark background, unreadable). */
.order-sheet-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    margin-top: 6px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 13px;
    text-decoration: none;
    transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.order-sheet-pill:visited,
.order-sheet-pill:active {
    color: var(--text-primary);
}
.order-sheet-pill:hover {
    background: var(--bg-secondary);
    border-color: var(--accent, #3b82f6);
    color: var(--accent, #3b82f6);
}

/* Multi-line shipping address block inside the production checklist
   detail row. Keeps the address legible by laying out each component
   on its own line rather than the previous one-line "Custom: 123,
   City Zip" smash. */
.order-stp-address {
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.4;
    padding: 6px 10px;
    background: var(--surface-2, rgba(255,255,255,0.04));
    border-radius: 4px;
    display: inline-block;
}
.order-stp-address strong {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    margin-bottom: 2px;
}

/* Inline "Send without payment received" override on the Finance
   check. Sits below the payment summary; ticking flips the check
   from fail → pass without flipping its "I've verified this" twin
   — those serve different purposes (the override is the rep
   declaring intent to ship anyway; the verify checkbox is the rep
   double-checking they read the row). */
.order-stp-finance-override {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-primary);
    cursor: pointer;
}
.order-stp-finance-override input {
    cursor: pointer;
}

/* ───────────────────────────────────────────────────────────────────────
   Bucket mode — same DOM as the order page, different chrome.
   The right sidebar is rendered conditionally by the template
   (so it's literally not in the DOM in bucket mode); these rules
   only fix the bits that need different visibility/layout.
─────────────────────────────────────────────────────────────────────── */

/* Single column when the right sidebar isn't there. */
.order-page.is-bucket-mode .order-body {
    grid-template-columns: 1fr;
}

/* Per-row cells: drop qty/price/total/duplicate; the JS keeps the same
   grid template but renders empty cells. Easier to keep the grid stable
   than to swap template-columns per row.
   Final shape: 120 thumb | 1fr name | 16 dot | (qty hidden) | (price hidden)
                | (total hidden) | 36 🎨 | 36 ✎ | 36 ☑
   The JS replaces the qty/price/total inputs with empty spans whose
   widths collapse to zero. */
.order-page.is-bucket-mode .order-items-header,
.order-page.is-bucket-mode .order-item-row {
    grid-template-columns: 120px 1fr 16px 36px 36px 36px;
}

/* The static title heading mirrors the order title's vertical rhythm
   without the input chrome. */
.order-title-static {
    margin: 0;
    font-size: 1.5em;
    font-weight: 600;
    color: var(--text-primary);
}

/* Hide elements only when the page is in bucket mode. Used to drop
   the Invoice option from the Generate Document modal — pricing
   inputs live on orders, not buckets, so the Invoice flow doesn't
   apply. */
.order-page.is-bucket-mode .bucket-hide {
    display: none !important;
}

/* "(optional)" hint next to labels — kept dim so the label reads as
   the primary signal. */
.muted {
    color: var(--text-secondary);
    font-weight: 400;
    font-size: 0.85em;
}
.bucket-co-summary {
    margin: 0 0 12px 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.45;
}

/* Bucket: Create Order action below the items card body. Always
   visible; disabled until the rep ticks at least one row. */
.bucket-create-order-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}
.bucket-create-order-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.bucket-select-header {
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}