/* ORDERS — NEW VIEW (Dispatch Classic | New, Ed-approved 2026-10-02; Phase 2 the same day: "too bland, columns need to be sortable, adjustable … finish the job"). Everything is scoped to `#panel-orders.ord-new`, so Classic is untouched. The run table, strip and chips come from work-run.css (shared with Billing / Masterboard New, one family: 12 px type, 30 px rows); this file adds the Orders hierarchy, semantic stage tones, sort / resize affordances, the selected / late states and the tools row. Skin B tokens only (no literals), square corners, gold only as a marker. Every ink here is one of skin-b's text inks (--ink-*, --text*), which skin-b already keeps ≥ 4.5:1 on its grounds in every theme. */ #panel-orders.ord-new .emr-orders-thead { display: none; } #panel-orders.ord-new .emr-orders-view-seg { margin-right: 10px; } #panel-orders.ord-new .ord-run { border: 1px solid var(--border); background: var(--bg); } /* no own sideways scroller (2026-10-04): an overflow box between the head and #orders-list-wrap (which scrolls both ways) would hold the sticky column header and let it scroll away with the rows */ #panel-orders.ord-new .ord-table-wrap { overflow: visible; } #panel-orders.ord-new .ord-run .run-table { width: 100%; font-variant-numeric: tabular-nums; } /* ── hierarchy: order id · lane · money legible at a glance ── */ #panel-orders.ord-new .ord-id { font-family: var(--emr-font-mono, var(--mono)); font-weight: 800; font-size: 12.5px; color: var(--text); } #panel-orders.ord-new .ord-unit { font-weight: 700; color: var(--text); margin-right: 4px; } #panel-orders.ord-new .ord-lane-o { font-weight: 700; color: var(--text); } #panel-orders.ord-new .ord-lane-arrow { color: var(--text3); margin: 0 5px; } #panel-orders.ord-new .ord-lane-d { color: var(--text2); } #panel-orders.ord-new .run-td-num { font-variant-numeric: tabular-nums; } #panel-orders.ord-new td[data-col="total"] { font-weight: 700; color: var(--text); } #panel-orders.ord-new .ord-dim { color: var(--text3); font-size: 11px; } #panel-orders.ord-new .run-row td { vertical-align: middle; } #panel-orders.ord-new .run-row td .run-sm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; } /* ── semantic stage tones (chip square + label ink; the strip's count takes the same ink) ── */ #panel-orders.ord-new .run-chip.tone-pending { color: var(--text2); } #panel-orders.ord-new .run-chip.tone-assigned { color: var(--ink-info); } #panel-orders.ord-new .run-chip.tone-assigned::before { border-color: var(--ink-info); } #panel-orders.ord-new .run-chip.tone-rolling { color: var(--ink-teal, var(--ink-info)); } #panel-orders.ord-new .run-chip.tone-rolling::before { background: var(--ink-teal, var(--ink-info)); border-color: var(--ink-teal, var(--ink-info)); } #panel-orders.ord-new .run-chip.tone-paperwork { color: var(--ink-gold); } #panel-orders.ord-new .run-chip.tone-paperwork::before { border-color: var(--ink-gold); } #panel-orders.ord-new .run-chip.tone-ready { color: var(--ink-violet, var(--ink-info)); } #panel-orders.ord-new .run-chip.tone-ready::before { background: var(--ink-violet, var(--ink-info)); border-color: var(--ink-violet, var(--ink-info)); } #panel-orders.ord-new .run-chip.tone-invoiced { color: var(--ink-ok); } #panel-orders.ord-new .run-chip.tone-invoiced::before { background: var(--ink-ok); border-color: var(--ink-ok); } #panel-orders.ord-new .run-chip.tone-closed { color: var(--text3); } #panel-orders.ord-new .ord-stage-btn { border: 0; background: none; padding: 2px 0; cursor: pointer; font: inherit; } #panel-orders.ord-new .ord-stage-btn:hover .run-chip { text-decoration: underline; } #panel-orders.ord-new .ord-stage-btn:focus-visible { outline: 2px solid var(--ink-info); outline-offset: 1px; } /* ── row states: hover comes from run-row; selected + late here ── */ #panel-orders.ord-new .run-row.is-selected td { background: var(--bg2); } #panel-orders.ord-new .run-row.is-selected td:first-child { box-shadow: inset 3px 0 0 var(--ink-gold); } #panel-orders.ord-new .run-row.is-late td:first-child { box-shadow: inset 3px 0 0 var(--ink-bad); } #panel-orders.ord-new .run-flag.is-bad { font-weight: 800; } #panel-orders.ord-new .ord-late { color: var(--ink-bad); font-weight: 700; } #panel-orders.ord-new td[data-col="next"] { white-space: nowrap; } #panel-orders.ord-new .ord-doc-add { margin-left: 6px; min-height: 24px; border: 1px solid var(--border2); background: var(--bg); color: var(--text2); font: inherit; font-size: 11px; padding: 0 6px; cursor: pointer; border-radius: 0; } #panel-orders.ord-new .ord-badges { display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: middle; } #panel-orders.ord-new .ord-flag-btn { min-height: 24px; border: 1px solid var(--border2); background: var(--bg); cursor: pointer; font: inherit; font-size: 10.5px; border-radius: 0; } #panel-orders.ord-new .ord-att { display: block; max-width: 320px; } /* ── pickup-date group rows (sort off = Classic's grouping) ── */ #panel-orders.ord-new .ord-group td { padding: 6px 8px 4px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text2); background: var(--bg2); border-bottom: 1px solid var(--border); } #panel-orders.ord-new .ord-group-n { margin-left: 6px; color: var(--text3); font-weight: 600; letter-spacing: 0; text-transform: none; } #panel-orders.ord-new .ord-inline-row > td { padding: 0; background: var(--bg); border-bottom: 2px solid var(--border2); } /* ── sortable headers ── */ #panel-orders.ord-new th.is-sortable { cursor: pointer; user-select: none; } #panel-orders.ord-new th.is-sortable:hover { color: var(--text); } #panel-orders.ord-new th[aria-sort="ascending"], #panel-orders.ord-new th[aria-sort="descending"] { color: var(--text); box-shadow: inset 0 -3px 0 var(--ink-gold); } #panel-orders.ord-new .ord-sort-ind { display: inline-block; min-width: 1em; margin-left: 4px; font-size: 9px; } #panel-orders.ord-new th[data-dragging] { opacity: .55; } /* ── tools row + column chooser (in place, never a modal) ── */ #panel-orders.ord-new .ord-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 5px 8px; } /* the sticky bar (Ed 2026-10-03): stage strip + Columns/Reset on one row; sticks to the top of the list's scroll area (#orders-list-wrap) above the rows; the tools sit right and wrap under the stages at phone width */ #panel-orders.ord-new .ord-bar { position: sticky; top: 0; z-index: 6; display: flex; flex-wrap: wrap; align-items: stretch; background: var(--bg); border-bottom: var(--rule-w, 2px) solid var(--rule, var(--text)); } #panel-orders.ord-new .ord-bar > .run-strip { flex: 1 1 auto; min-width: 0; border-bottom: 0; } #panel-orders.ord-new .ord-bar > .ord-tools { margin-left: auto; flex: 0 0 auto; } #panel-orders.ord-new .ord-col-chooser .ord-tool-hint { flex-basis: 100%; margin-left: 0; } #panel-orders.ord-new .ord-tool { min-height: 24px; border: 1px solid var(--border2); background: var(--bg); color: var(--text); font: inherit; font-size: 11px; font-weight: 700; padding: 0 10px; cursor: pointer; border-radius: 0; } #panel-orders.ord-new .ord-tool[aria-expanded="true"] { background: var(--text); color: var(--bg); border-color: var(--text); } #panel-orders.ord-new .ord-tool:disabled { color: var(--text3); cursor: default; } #panel-orders.ord-new .ord-tool:focus-visible { outline: 2px solid var(--ink-info); outline-offset: 1px; } #panel-orders.ord-new .ord-tool-hint { margin-left: auto; font-size: 10.5px; color: var(--text3); } #panel-orders.ord-new .ord-col-chooser { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 6px 10px; background: var(--bg2); border-bottom: 1px solid var(--border); } #panel-orders.ord-new .ord-col-opt { display: inline-flex; align-items: center; gap: 5px; min-height: 24px; font-size: 11.5px; color: var(--text); cursor: pointer; } /* ── colour-blind setting: the semantic inks also get a glyph (Masterboard New's pattern) ── */ html[data-cb="1"] #panel-orders.ord-new .run-flag.is-bad::before { content: "✕ "; } html[data-cb="1"] #panel-orders.ord-new .run-chip.tone-invoiced::after { content: " ✓"; } html[data-cb="1"] #panel-orders.ord-new .ord-late::before { content: "! "; } @media (max-width: 720px) { #panel-orders.ord-new .ord-tool-hint { display: none; } #panel-orders.ord-new td[data-col="next"] { white-space: normal; } } /* Est. net + Margin colours (Ed 2026-10-03) — Classic's bands (_ordersEstNetBand · _ordersMarginBand), painted with tokens that hold ≥ 4.5:1 on the row ground in both themes (Classic's raw amber/teal text fails on light). */ #panel-orders.ord-new { --ord-en-low: #b45309; --ord-en-great: #0f766e; } html:is([data-theme="dark"],[data-theme="dim"]) #panel-orders.ord-new { --ord-en-low: #fbbf24; --ord-en-great: #2dd4bf; } #panel-orders.ord-new .ord-estnet { font-weight: 700; } #panel-orders.ord-new .ord-estnet.is-neg { color: var(--fin-negative); } #panel-orders.ord-new .ord-estnet.is-low { color: var(--ord-en-low); } #panel-orders.ord-new .ord-estnet.is-good { color: var(--fin-positive); } #panel-orders.ord-new .ord-estnet.is-great { color: var(--ord-en-great); } #panel-orders.ord-new .ord-margin { font-weight: var(--weight-medium, 500); } #panel-orders.ord-new .ord-margin.is-good { color: var(--fin-positive); } #panel-orders.ord-new .ord-margin.is-ok { color: var(--fin-neutral); } #panel-orders.ord-new .ord-margin.is-bad { color: var(--fin-negative); }