/* Avilo — Order desk (r32 M9, DESIGN-r32 §B.M9). The office PC: Windows 7, Chrome 109, a mouse, 1366 × 625.
   Chrome 109 floor: no CSS nesting, no color-mix (plain colours only), no text-wrap. Every class starts with .desk-
   The screen registers only at ≥ 1100 px (desk.js), so nothing here reaches a phone; the docking rules are inside a media query. */
body[data-view="desk"] main{max-width:none;padding-bottom:24px}
.desk{padding-top:4px}
.desk-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 10px}
.desk-top h1{font:800 24px/1.2 var(--font-head);margin:0 6px 0 0}
.desk-search{position:relative;flex:1 1 260px;max-width:460px}
.desk-search>.i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.desk-search input{padding-left:44px;padding-right:44px;border-radius:var(--r-pill);min-height:44px;font-size:15px}
.desk-qx{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:36px;height:36px;border:0;border-radius:50%;background:var(--surface-2);color:var(--ink-2);display:grid;place-items:center;cursor:pointer}
.desk-top .desk-new{margin-left:auto;min-height:44px}
.desk-top .desk-reload{min-height:44px}
.desk-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.desk-chips .chip{min-height:40px}
.desk-chips .chip.desk-late:not(.on){border-color:var(--danger);color:var(--danger)}
.desk-chips .chip .n{margin-left:2px}
.desk-note{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:13.5px;color:var(--muted)}
.desk-note .i{flex:none}

/* ---------- The table: the wrapper scrolls, the page never does; the header stays put ---------- */
.desk-wrap{overflow:auto;max-height:calc(100dvh - 196px);min-height:220px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow-1)}
.desk-table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px;min-width:1040px;table-layout:auto}
.desk-table th{position:sticky;top:0;z-index:2;background:var(--surface-2);text-align:left;font:700 12px/1.3 var(--font);color:var(--ink-2);padding:9px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.desk-table td{padding:5px 10px;border-bottom:1px solid var(--line-2);vertical-align:middle;max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.3}
.desk-table tr.desk-row{cursor:pointer}
.desk-table tr.desk-row:hover td{background:var(--surface-2)}
.desk-table tr.desk-row:last-child td{border-bottom:0}
.desk-table td b{font-weight:600}
.desk-table td small{display:block;color:var(--muted);font-size:11.5px;overflow:hidden;text-overflow:ellipsis}
.desk-table td.late{color:var(--danger);font-weight:700}
.desk-table td.soon{color:#92400E;font-weight:600}
:root[data-theme="dark"] .desk-table td.soon{color:#FCD34D}
.desk-table tr.old td,.desk-table tr.old td small{color:var(--muted)}
.desk-table tr.old td b{color:var(--ink-2)}
.desk-table td.desk-no{color:var(--muted);font-variant-numeric:tabular-nums}
.desk-table td.desk-client,.desk-table td.desk-item{max-width:200px}
.desk-table td.desk-stage{overflow:visible;position:relative;white-space:nowrap;min-width:190px}
.desk-table th.desk-th-stage{min-width:190px}

/* The stage cell: a button that reads the current step; the menu opens inside the cell */
.desk-cell{display:inline-flex;align-items:center;gap:6px;min-height:36px;max-width:100%;padding:4px 10px 4px 12px;border:1.5px solid var(--line);border-radius:var(--r-pill);background:var(--surface);font:600 13px/1.2 var(--font);color:var(--ink);text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
button.desk-cell:hover{border-color:var(--muted);background:var(--surface-2)}
button.desk-cell:focus-visible{outline:3px solid var(--muted);outline-offset:2px}
span.desk-cell{cursor:default}
.desk-cell .n{font-weight:500;color:var(--muted)}
.desk-cell .i{flex:none;width:16px;height:16px;color:var(--muted)}
.desk-cell.ready{background:var(--ok-soft);border-color:transparent;color:var(--ok)}
.desk-cell.ready .n{color:var(--ok)}
.desk-cell.amber{background:#FEF3C7;border-color:transparent;color:#92400E}
.desk-cell.amber .n{color:#92400E}
:root[data-theme="dark"] .desk-cell.amber{background:#3A2C10;color:#FCD34D}
:root[data-theme="dark"] .desk-cell.amber .n{color:#FCD34D}
.desk-cell.red{background:var(--danger-soft);border-color:transparent;color:var(--danger)}
.desk-cell.red .n{color:var(--danger)}
.desk-cell.problem{background:var(--danger-soft);border-color:var(--danger);color:var(--danger)}
.desk-cell.sent{background:var(--surface-2);border-color:transparent;color:var(--muted)}
.desk-cell.gray{color:var(--muted);border-style:dashed}
.desk-cell.on{border-color:var(--ink)}

/* The one-click menu */
.desk-menu{position:absolute;left:10px;top:calc(100% - 6px);z-index:30;min-width:260px;max-width:340px;padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--shadow-2);white-space:normal;text-align:left;font:400 14px/1.4 var(--font);color:var(--ink);cursor:default}
.desk-menu .desk-mi{display:flex;align-items:center;gap:8px;width:100%;min-height:40px;padding:6px 10px;border:0;border-radius:var(--r-xs);background:none;text-align:left;font:600 14px/1.3 var(--font);color:var(--ink);cursor:pointer}
.desk-menu .desk-mi:hover,.desk-menu .desk-mi:focus-visible{background:var(--surface-2);outline:none}
.desk-menu .desk-mi.on{background:var(--accent-soft)}
.desk-menu .desk-mi.done{color:var(--muted);font-weight:500;cursor:default}
.desk-menu .desk-mi.done:hover{background:none}
.desk-menu .desk-mi .i{flex:none;width:18px;height:18px}
.desk-menu .desk-mi .n{font-weight:500;color:var(--muted);margin-left:auto}
.desk-mh{font:600 12px/1.3 var(--font);color:var(--muted);padding:8px 10px 2px}
.desk-mh .n{font-weight:600;color:var(--ok)}
.desk-mf{display:flex;flex-direction:column;gap:6px;padding:4px 10px 6px}
.desk-mf .field{margin:0}
.desk-mf .field>span:first-child{margin-bottom:3px;font-size:12px}
.desk-mf input{min-height:36px;padding:6px 10px;font-size:14px}
.desk-mf .btn{min-height:40px;align-self:flex-start}
.desk-menu .chips{gap:6px;padding:4px 10px 6px}
.desk-menu .chip{min-height:36px;padding:5px 12px;font-size:13.5px}
.desk-menu .chip.desk-pick{position:relative;gap:6px}
.desk-menu .chip.desk-pick input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
.desk-merr{color:var(--danger);font-size:12.5px;padding:2px 10px 6px}

/* Ask the vendor (WhatsApp / Call) */
.desk-wa{display:inline-grid;place-items:center;width:28px;height:28px;margin-left:4px;border:0;border-radius:50%;background:none;color:#128C4A;vertical-align:middle;cursor:pointer}
:root[data-theme="dark"] .desk-wa{color:#6CD496}
.desk-wa:hover{background:var(--surface-3)}
.desk-wa .i{width:18px;height:18px}
.desk-vtext{font-size:14px}

.desk-more{margin-top:12px}
.desk-empty{padding:40px 16px;text-align:center;color:var(--muted)}
.desk-empty .big{font:700 18px var(--font-head);color:var(--ink);margin:10px 0 4px}
.desk-narrow .i.lg{width:40px;height:40px;color:var(--muted)}
.desk-skel{min-height:200px;background:linear-gradient(90deg,var(--surface-2),var(--surface-3),var(--surface-2));background-size:200% 100%;animation:desk-sh 1.2s linear infinite;border-radius:var(--r)}
@keyframes desk-sh{to{background-position:-200% 0}}

/* "+ New order" (and any full sheet) docks to the right while the desk shows, so the table stays visible (B.M9).
   The ONLY dock rules — orders.css's body.desk-on twin was dead (nothing sets that class) and is gone (fixer). */
@media (min-width:1100px){
  body[data-view="desk"] .scrim{justify-content:flex-end;align-items:stretch;background:rgba(15,15,16,.14)}
  body[data-view="desk"] .scrim .sheet.full{width:540px;max-width:540px;height:100dvh;max-height:100dvh;border-radius:0;animation:none;box-shadow:-12px 0 40px -18px rgba(15,15,16,.45)}
  body[data-view="desk"] .scrim .sheet.full.wide{width:720px;max-width:720px}
}