/* Avilo Furniture — Dispatch module (2026-10-08). Phone first (375px); every class starts with .dsp- */
.dsp-search{margin:0 0 12px}
.dsp-search input{border-radius:var(--r-pill)}
.dsp-loading{padding:24px 4px}

/* ---- List of dispatch cards ---- */
.dsp-list{display:grid;grid-template-columns:1fr;gap:12px;align-items:start}
@media (min-width:760px){.dsp-list{grid-template-columns:1fr 1fr}}
@media (min-width:1200px){.dsp-list{grid-template-columns:1fr 1fr 1fr}}
.dsp-card{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);box-shadow:var(--shadow-1);padding:14px 14px 12px;
  display:flex;flex-direction:column;gap:7px;cursor:pointer;min-width:0;transition:box-shadow .15s,border-color .15s}
@media (hover:hover){.dsp-card:hover{box-shadow:var(--shadow-2)}}
.dsp-card.late{border-color:var(--danger);border-color:color-mix(in srgb,var(--danger) 45%,var(--line));box-shadow:inset 4px 0 0 var(--danger),var(--shadow-1)}
.dsp-card.dsp-flash{animation:dsp-flash 2.2s var(--ease)}
@keyframes dsp-flash{0%,30%{box-shadow:0 0 0 3px var(--ok),var(--shadow-2)}100%{box-shadow:var(--shadow-1)}}
.dsp-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dsp-no{font:800 17px/1.2 var(--font-head);letter-spacing:-.01em}
.dsp-when{margin-left:auto;font-size:13px;font-weight:600;color:var(--ink-2);white-space:normal;min-width:0;overflow-wrap:anywhere} /* r30 audit: no sideways scroll at 360 px */
.dsp-when.late{color:var(--danger)}
.dsp-client,.dsp-cname{font-size:16px;font-weight:700;min-width:0;overflow-wrap:anywhere}
.dsp-client small,.dsp-cname small{display:block;font-size:13px;font-weight:500;color:var(--muted)}
.dsp-row{display:flex;gap:8px;align-items:flex-start;font-size:14px;line-height:1.4;color:var(--ink-2);min-width:0}
.dsp-row .i{margin-top:1px;color:var(--muted)}
.dsp-row span{min-width:0;overflow-wrap:anywhere}
.dsp-missing,.dsp-missing .i{color:var(--brand)}
.dsp-items{display:flex;gap:6px;flex-wrap:wrap}
.dsp-items .badge{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dsp-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.dsp-acts .btn{flex:1 1 auto;min-height:46px;text-decoration:none;padding:10px 14px}
.dsp-acts .dsp-main{flex-basis:100%}
.dsp-moreb{grid-column:1/-1;justify-self:center;margin-top:6px}
.dsp-empty .i.lg{width:40px;height:40px;color:var(--muted);margin:0 auto}
.dsp-empty p{margin:0 0 16px}

/* ---- Detail sheet ---- */
.dsp-steps{display:flex;list-style:none;margin:0 0 16px;padding:0;gap:6px}
.dsp-steps li{flex:1;min-width:0;text-align:center;font-size:13px;font-weight:600;color:var(--muted);padding-top:13px;position:relative}
.dsp-steps li::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;border-radius:3px;background:var(--surface-3)}
.dsp-steps li.done{color:var(--ink)}
.dsp-steps li.done::before{background:var(--ok)}
.dsp-steps li.now{font-weight:800}
.dsp-steps li small{display:block;font-weight:500;color:var(--muted);font-size:12px;min-height:1.4em}
.dsp-sec{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.box .dsp-row{margin-top:6px}
.dsp-lines{display:flex;flex-direction:column;gap:8px}
.dsp-line{display:flex;align-items:center;gap:12px;min-width:0}
.dsp-line .grow,.dsp-pick .grow{flex:1;min-width:0}
.dsp-line b,.dsp-pick b{display:block;font-weight:600;overflow-wrap:anywhere}
.dsp-line small,.dsp-pick small{display:block;color:var(--muted);font-size:13px}
.dsp-thumb{width:56px;height:44px;border-radius:8px;background:var(--surface-2);overflow:hidden;flex:none;display:grid;place-items:center;color:var(--muted)}
.dsp-thumb img{width:100%;height:100%;object-fit:cover}
.dsp-note{margin:10px 0 0}
.dsp-hist{margin:4px 0 0;border:1px solid var(--line);border-radius:var(--r);padding:0 16px;background:var(--surface)}
.dsp-hist summary{min-height:48px;display:flex;align-items:center;font-weight:600;cursor:pointer}
.dsp-hist ul{list-style:none;margin:0;padding:0 0 12px;display:flex;flex-direction:column;gap:10px}
.dsp-hist li{font-size:14px;line-height:1.4}
.dsp-hist li small{display:block;color:var(--muted);font-size:12.5px}
.sheet .ft .dsp-f1{flex:1 1 100%}
.sheet .ft .danger-text{color:var(--danger)}
.dsp-nw{white-space:nowrap}
.sheet .ft .dsp-f2{flex:1 1 40%}
@media (min-width:760px){.sheet .ft .dsp-f1{flex:1 1 auto}.sheet .ft .dsp-f2{flex:0 1 auto}}

/* ---- New / edit form ---- */
.dsp-oitem{border:1px solid var(--line-2)!important;margin:0 0 8px;background:var(--surface)!important;min-height:64px}
.dsp-oitem small+small{margin-top:1px}
.dsp-ono{flex:none;min-width:58px;padding:8px 10px;border-radius:var(--r-sm);background:var(--surface-2);font:800 16px/1.2 var(--font-head);text-align:center}
.dsp-omini{align-items:center}
.dsp-omini .grow{flex:1;min-width:0}
.dsp-picks{display:flex;flex-direction:column;gap:8px}
.dsp-pick{display:flex;align-items:center;gap:12px;min-height:64px;padding:10px 12px;border:1.5px solid var(--line);border-radius:var(--r-sm);background:var(--surface);cursor:pointer}
.dsp-pick.on{border-color:var(--ink);background:var(--surface-2)}
.dsp-pick input{appearance:none;-webkit-appearance:none;width:28px;height:28px;border-radius:8px;border:2px solid var(--muted);flex:none;display:grid;place-items:center;margin:0;background:var(--surface);cursor:pointer}
.dsp-pick input:checked{background:var(--ink);border-color:var(--ink)}
.dsp-pick input:checked::after{content:"";width:7px;height:13px;border:solid var(--bg);border-width:0 3px 3px 0;transform:translateY(-2px) rotate(45deg)}
.dsp-days{align-items:center}
.dsp-days .dsp-date{width:auto;flex:1 1 170px;min-width:150px;min-height:52px}
.dsp-grid{display:grid;grid-template-columns:1fr;gap:0 12px}
@media (min-width:520px){.dsp-grid{grid-template-columns:1fr 1fr}}
.dsp-staffb{width:100%;margin:-4px 0 16px}
.sheet .ft .dsp-save{flex:1}

/* ---- Deliver together (BRIEF-v2 §1.11): ticks locked, "Waiting for the custom items" ---- */
.dsp-wait{display:inline-flex;align-items:center;gap:4px;margin-top:4px;max-width:100%;white-space:normal;text-align:left}
.dsp-tnote{margin:0 0 12px}
.dsp-pick.dsp-blocked{opacity:.8;cursor:not-allowed;background:var(--surface-2);border-style:dashed}
.dsp-pick.dsp-locked{cursor:default}
.dsp-pick input:disabled{cursor:not-allowed;opacity:.65}
.dsp-pick.dsp-locked input:checked{opacity:1;background:var(--ink-2);border-color:var(--ink-2)}
/* D8: the exact fabric / colour on dispatch cards and the slip */
.dsp-vchip{margin:2px 0}
.dsp-items .dsp-vchip{max-width:100%}
.dsp-line .grow .dsp-vchip{display:flex;width:fit-content;margin-top:4px}
/* C17 (BRIEF-v3 D5): "Franchise: <name>" on a franchise order's card, slip and in the order picker */
.dsp-fr{background:var(--surface-2);color:var(--ink-2);margin-top:4px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.dsp-client .dsp-fr,.dsp-cname .dsp-fr,.dsp-oitem .dsp-fr{display:flex;width:fit-content}

/* ---- R15-1 #14: "Ready — plan a delivery" on top of the Delivery page ---- */
.dsp-ready{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);box-shadow:var(--shadow-1);padding:12px 14px;margin:0 0 14px}
.dsp-readyh{display:flex;align-items:center;gap:8px;margin:0 0 6px;font:700 15px/1.3 var(--font-head)}
.dsp-readyh .n{font-weight:600;color:var(--muted)}
.dsp-ready.empty-ready p{margin:0}
.dsp-rlist{display:flex;flex-direction:column}
.dsp-rrow{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--line-2)}
.dsp-rrow:first-child{border-top:0}
.dsp-rrow .grow{flex:1;min-width:0}
.dsp-rrow b{display:block;overflow-wrap:anywhere}
.dsp-rrow small{display:block;color:var(--muted);font-size:13px}
.dsp-rrow .dsp-wait{margin-top:4px}
.dsp-plan{flex:none;min-height:44px}

/* ---- r32 M13 (DESIGN-r32 B.M13): "Sent on ▾" on a Ready row, the Sent on sheet, Collected from client only when due ---- */
.dsp-racts{display:flex;gap:6px;flex:none;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.dsp-sent{flex:none;min-height:48px;white-space:nowrap}
@media (max-width:420px){.dsp-rrow{flex-wrap:wrap}.dsp-racts{flex:1 1 100%;justify-content:stretch}.dsp-racts .btn{flex:1 1 0}}
.dsp-readyage{margin-top:4px;display:inline-flex;max-width:100%;white-space:normal;text-align:left}
.dsp-sentdays .chip{min-height:52px}
.dsp-senterr{display:block;margin-top:6px;font-weight:600}
.dsp-collect-f{margin-top:4px;padding:12px;border:1.5px solid var(--line);border-left:4px solid var(--brand);border-radius:var(--r);background:var(--surface-2)}
.dsp-collect-f .chips .chip{min-height:48px;flex:1 1 0;justify-content:center}
.dsp-collect-f>.field{margin-top:10px}
.sheet .ft .dsp-sentgo{flex:1}