/* Lifted from mocks/admin/sales/orders.html, unchanged.
   Components this page owns; the shared system is in admin.css. */
/* خاص بالصفحة دي بس — الباقي في assets/admin.css */
/* The mock writes this inline on the header's button: the size drops a step, the
   padding does not. btn-sm would have taken both, which is a smaller button than
   the mock draws. */
.ord-head-btn{font-size:12px}
/* The mock's page-size picker sits inside the pager, so it takes the pager's
   smaller padding rather than the filter row's. */
.ord-stats-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;padding:16px 20px;flex-shrink:0;}
.si-new{color:var(--warning)}
.si-confirmed{color:var(--primary)}
.si-prep{color:var(--orange)}
.si-transit{color:var(--accent-d)}
.si-done{color:var(--success)}
.ord-view-toggle{display:flex;background:var(--card);border:1px solid var(--border);border-radius:8px;overflow:hidden;margin-right:auto;}
.ord-view-btn{padding:6px 12px;border:none;background:none;cursor:pointer;font-size:16px;color:var(--muted);}
.ord-view-btn.active{background:var(--primary);color:#fff;}
/* The board has to have a bottom before a column can scroll inside it.
   .kanban-wrap asks for flex:1 and .kanban-board for height:100%, but .main-scroll
   is a plain block - so the flex was ignored, the 100% had nothing to resolve
   against, and the column just grew. Measured with 41 cards in one stage: the
   column ran to 9,268px and took the page with it, while overflow-y:auto sat there
   doing nothing. The mock has the same shape, and never had the cards to show it.

   :has() scopes this to the one page that holds a board - the shell is shared, and
   turning every screen into a flex column to fix this one would be a wide change
   for a narrow problem. */
.main-scroll:has(> .kanban-wrap){display:flex;flex-direction:column;padding-bottom:0;}
.main-scroll:has(> .kanban-wrap) > *{flex-shrink:0;}

.kanban-wrap{flex:1;min-height:0;overflow-x:auto;overflow-y:hidden;padding:0 20px 20px;}
.kanban-board{display:flex;gap:12px;height:100%;width:100%;}
.kanban-col{flex:1;min-width:225px;display:flex;flex-direction:column;min-height:0;}
.col-header{border-radius:var(--radius-lg) var(--radius-lg) 0 0;padding:10px 14px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
.col-header.new-col{background:#FEF3C7;}
.col-header.confirmed-col{background:var(--primary-l);}
.col-header.prep-col{background:var(--orange-l);}
.col-header.transit-col{background:var(--accent-l);}
.col-header.done-col{background:var(--success-l);}
.col-title{font-weight:700;font-size:13px;line-height:1.45;display:flex;align-items:center;gap:6px;}
.col-count{font-size:11px;font-weight:700;padding:2px 8px;border-radius:10px;background:rgba(0,0,0,.1);}
.col-body{flex:1;min-height:0;overflow-y:auto;background:rgba(0,0,0,.03);border-radius:0 0 var(--radius-lg) var(--radius-lg);padding:8px;display:flex;flex-direction:column;gap:8px;}
.col-body::-webkit-scrollbar{width:3px;}
.col-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:6px;}
.order-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:12px;cursor:pointer;transition:.15s;position:relative;}
.order-card:hover{border-color:var(--primary);box-shadow:var(--elev-2);transform:translateY(-1px);}
.order-card.urgent{border-right:3px solid var(--danger);}
.oc-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.oc-id{font-size:12px;font-weight:800;color:var(--primary);line-height:1.45;}
.oc-source{font-size:11px;line-height:1.45;padding:2px 7px;border-radius:6px;font-weight:600;}
.src-app{background:var(--slate-l);color:var(--slate);}
.src-web{background:var(--primary-l);color:var(--primary);}
.oc-customer{font-size:13px;font-weight:600;color:var(--text);line-height:1.45;margin-bottom:3px;}
.oc-phone{font-size:11px;color:var(--muted);line-height:1.45;margin-bottom:8px;}
.oc-items{font-size:11px;color:var(--muted);background:var(--bg);padding:5px 8px;border-radius:6px;margin-bottom:8px;line-height:1.5;}
.oc-more{color:var(--muted)}
/* The card's one quiet action: it opens paper in another tab, so it stays an icon in
   the corner rather than a second button competing with the stage button below. */
.oc-print{width:22px;height:22px;flex-shrink:0;margin-inline-start:6px;border:1px solid var(--border);border-radius:6px;background:var(--card);color:var(--muted);display:inline-flex;align-items:center;justify-content:center;transition:.1s;}
.oc-print i{font-size:12px;}
.oc-print:hover{border-color:var(--primary);background:var(--primary-ll);color:var(--primary);}

.oc-footer{display:flex;align-items:center;justify-content:space-between;}
.oc-amount{font-size:14px;font-weight:800;color:var(--text);line-height:1.45;}
.oc-time{font-size:11px;color:var(--muted);line-height:1.45;margin-inline-start:auto;}
/* A note pinned under the card's body. The mock used it for the assigned driver;
   driver assignment left the scope, and what needs saying there now is that the
   order's delivery zone is gone or stopped - so the class is named for the shape,
   and the warning carries its own colour rather than overriding it inline. */
.oc-note{font-size:11px;line-height:1.45;background:var(--primary-ll);color:var(--primary);padding:2px 7px;border-radius:6px;font-weight:600;margin-top:6px;display:inline-block;}
.oc-note.is-warn{background:var(--warning-l);color:var(--warning)}
.oc-action{width:100%;margin-top:8px;padding:6px;border-radius:8px;font-size:12px;font-weight:700;line-height:1.45;border:none;cursor:pointer;}
.btn-confirm{background:var(--primary-l);color:var(--primary);}
.btn-confirm:hover{background:var(--primary);color:#fff;}
.btn-prep{background:var(--orange-l);color:var(--orange);}
.btn-prep:hover{background:var(--orange);color:#fff;}
.btn-dispatch{background:var(--slate-l);color:var(--slate);}
.btn-dispatch:hover{background:var(--slate);color:#fff;}
.btn-delivered{background:var(--success-l);color:var(--success);}
.btn-delivered:hover{background:var(--success);color:#fff;}
.new-badge{position:absolute;top:-6px;right:10px;background:var(--danger);color:#fff;font-size:11px;font-weight:800;line-height:1.45;padding:1px 7px;border-radius:10px;}
.overlay.hidden{display:none;}
.section-title{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;margin-bottom:10px;}
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px;}
.info-item{background:var(--bg);border-radius:8px;padding:10px 12px;}
.info-label{font-size:11px;color:var(--muted);margin-bottom:3px;}
.info-val{font-size:13px;font-weight:600;}
.address-box{background:var(--bg);border-radius:8px;padding:10px 12px;margin-bottom:16px;font-size:13px;line-height:1.6;}
.item-name{font-weight:600;display:flex;align-items:center;gap:6px;}
/* The mock writes this divider as rgba(255,255,255,.1) - white on the light grey
   totals box, so the line meant to set the total apart from the rows above it never
   drew at all. Its own new-sale modal uses a dashed --border for the same job. */
.tot-row.final{border-top:1px dashed var(--border);padding-top:8px;margin-top:4px;font-weight:800;font-size:14px;}
.timeline{position:relative;padding-right:20px;}
.timeline::before{content:'';position:absolute;right:6px;top:0;bottom:0;width:2px;background:var(--border);}
.tl-item{position:relative;padding-bottom:18px;padding-right:24px;}
.tl-item:last-child{padding-bottom:0;}
.tl-dot{position:absolute;right:-8px;top:2px;width:14px;height:14px;border-radius:50%;border:2px solid var(--border);background:var(--card);}
.tl-dot.done{background:var(--success);border-color:var(--success);}
.tl-dot.active{background:var(--primary);border-color:var(--primary);box-shadow:var(--ring);}
.tl-dot.pending{background:var(--card);border-color:var(--border);}
.tl-title{font-size:13px;font-weight:700;color:var(--text);}
.tl-title.pending{color:var(--muted);}
.tl-time{font-size:11px;color:var(--muted);margin-top:1px;}
.tot-row-edit{align-items:center;padding:6px 0}
.edit-amount{display:inline-flex;align-items:center;gap:6px}
.mini-input{width:78px;padding:5px 8px;border:1px solid var(--border);border-radius:8px;font-size:12px;font-weight:700;text-align:center;font-family:inherit;background:var(--card)}
.mini-input:disabled{background:var(--bg);color:var(--muted)}
.mini-select{padding:5px 8px;border:1px solid var(--border);border-radius:8px;font-size:12px;font-weight:700;font-family:inherit;background:var(--card)}
.edit-amount .unit{font-size:11px;color:var(--muted);min-width:14px}
/* Replaces the save button: the row applies itself, so what it owes the operator is a
   word saying it did. */
.edit-state{font-size:11px;font-weight:700;color:var(--success);white-space:nowrap}
.edit-note{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--muted);margin-top:9px;padding-top:8px;border-top:1px dashed var(--border)}

/* ── فلاتر تشغيلية ── */
.ops-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:0 20px 12px;flex-shrink:0}
.ops-lbl{font-size:12px;font-weight:700;line-height:1.45;color:var(--muted);display:flex;align-items:center;gap:5px}
/* Label and links wrap together: on their own the label gets pushed to the far end
   of the row while the views it names drop to the next line. */
.ops-saved-group{margin-inline-start:auto;display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.ops-saved{font-size:12px;color:var(--muted)}
.ops-saved a{color:var(--primary);font-weight:700;cursor:pointer;text-decoration:underline}

/* ── شريط الاختيار الجماعي ── */
.bulk-bar.is-on{display:flex}

/* A panel of its own, on the same 20px axis as the table below it. The mock's bar runs
   edge to edge with a rule under it, which glues it to the table head - and what it is
   is not a header, it is a thing that appeared because you selected rows. So it gets
   the table's own radius and a gap under it, and arrives with a small movement rather
   than blinking into place.

   Carried on a modifier, not on .bulk-bar itself: every page sheet is linked on every
   screen, so .bulk-bar itself must keep working for any list that is not in a panel.
   The rule lives in _shared.css - the orders and invoices lists both wear it. */


/* The bar speaks in the accent it is tinted with, so it reads as one object rather
   than as ordinary text that happens to be on a blue strip. The count had no colour
   of its own at all - admin.css puts that on .bulk-info, and the markup here says
   .bulk-count - and "إلغاء التحديد" was #CBD5E1 on #EEF3FF, which is barely there. */
.bulk-count{
    display:flex;align-items:center;gap:7px;
    font-size:13px;font-weight:800;line-height:1.45;color:var(--primary);
}
.bulk-count i{font-size:15px}

/* How much of the selection the action can reach. Quieter than the count, because it
   is a qualification of it rather than a second fact. */
.bulk-hint{
    font-size:12px;font-weight:700;line-height:1.45;color:var(--primary);opacity:.7;
    padding-inline-start:10px;border-inline-start:1px solid var(--primary-l);
}

.bulk-actions{margin-inline-start:0;margin-inline-end:12px}

.bulk-clear{
    margin-inline-start:auto;background:none;border:0;
    color:var(--primary);opacity:.75;
    font-size:12px;font-weight:700;line-height:1.45;
    cursor:pointer;text-decoration:underline;font-family:inherit;
}
.bulk-clear:hover{opacity:1}

/* ── الجدول ── */
.table-wrap{flex:1;overflow:auto;margin:0 20px 20px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--card)}
.orders-table{width:100%;border-collapse:collapse;font-size:13px;min-width:900px}
.orders-table thead th{position:sticky;top:0;z-index:2;background:var(--bg);text-align:right;padding:11px 14px;font-size:12px;font-weight:700;color:var(--muted);border-bottom:1px solid var(--border);white-space:nowrap}
.orders-table td{padding:11px 14px;border-bottom:1px solid var(--border);vertical-align:middle;line-height:1.6}
.orders-table tbody tr:hover{background:var(--primary-ll,#F8FAFF)}
.orders-table tbody tr.is-late{box-shadow:inset 3px 0 0 var(--danger)}
.orders-table .sub{display:block;font-size:11px;color:var(--muted);font-weight:400}
.orders-table .ta-c{text-align:center}
.orders-table .ta-l{text-align:left}
.ord-id{color:var(--primary);font-weight:800;cursor:pointer;font-variant-numeric:tabular-nums}
.ord-id:hover{text-decoration:underline}
.col-check{width:34px;text-align:center}
.col-act{width:190px;white-space:nowrap;position:sticky;inset-inline-end:0;background:var(--card);box-shadow:-6px 0 8px -8px rgba(0,0,0,.18);z-index:1}
.orders-table tbody tr:has(.row-menu) .col-act{z-index:3}
.orders-table tbody tr:hover .col-act{background:var(--primary-ll,#F8FAFF)}
.kebab{border:1px solid var(--border);background:var(--card);border-radius:8px;width:28px;height:28px;cursor:pointer;color:var(--muted);vertical-align:middle;margin-inline-start:4px}
.kebab:hover{border-color:var(--primary);color:var(--primary)}
.row-flag{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:6px;font-size:11px;margin-inline-start:2px;vertical-align:middle}
.fl-late{background:#FEE2E2;color:#DC2626}.fl-short{background:#FEF3C7;color:#92400E}
.fl-credit{background:#FFEDD5;color:#C2410C}.fl-disc{background:var(--slate-l);color:var(--slate)}
.fl-ret{background:#E0F2FE;color:#0369A1}.fl-bonus{background:#DCFCE7;color:#16A34A}
/* Trimmed at ordering. Amber like the picking shortage it is a cousin of, but a
   shade apart so the two are not read as the same event. */
.fl-trim{background:var(--orange-l);color:var(--orange)}
.row-menu{position:fixed;z-index:1200;min-width:212px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--elev-3);padding:6px;animation:rmIn .12s ease}
@keyframes rmIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.rm-head{font-size:11px;font-weight:800;color:var(--muted);padding:5px 10px 7px;letter-spacing:.02em}
.rm-item{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;border:0;background:none;border-radius:8px;font-size:13px;font-weight:600;color:var(--text);cursor:pointer;font-family:inherit;text-align:start}
.rm-item i{font-size:14px;color:var(--muted);flex-shrink:0}
.rm-item:hover{background:var(--bg)}
.rm-item:hover i{color:var(--primary)}
.rm-danger{color:var(--danger)}
.rm-danger i{color:var(--danger)}
.rm-danger:hover{background:var(--danger-l,#FEE2E2)}
.rm-sep{height:1px;background:var(--border);margin:5px 6px}
.orders-table .sub.phone{direction:ltr;text-align:right;unicode-bidi:embed}
.sv-list{display:inline-flex;gap:6px;flex-wrap:wrap}
.sv{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border:1px dashed var(--border);border-radius:20px;font-size:12px;font-weight:700;line-height:1.45;color:var(--text2);cursor:pointer;background:var(--card)}
.sv b{background:var(--bg);border-radius:10px;padding:0 6px;font-size:11px;font-weight:800}
.sv:hover{border-color:var(--primary);color:var(--primary)}
.sv.is-on{background:var(--dark);border-style:solid;border-color:var(--dark);color:#fff}
.sv.is-on b{background:rgba(255,255,255,.22);color:#fff}
.st-tab.all-col{background:var(--bg)}
/* A draft is not a stage - nothing has been taken from stock and no clock is running -
   so the tab is drawn the way its board column is: dashed and unfilled, a tray sitting
   before the line rather than a step on it. */
.st-tab.draft-col{background:transparent;border:1px dashed var(--border);color:var(--muted)}
.st-tab.draft-col .st-n{background:var(--slate-l)}
.st-tab.draft-col.is-on{border-style:solid;border-color:currentColor}
.st-tab.new-col{background:#FEF3C7}
.st-tab.confirmed-col{background:var(--primary-l)}
.st-tab.prep-col{background:var(--orange-l)}
.st-tab.transit-col{background:var(--accent-l)}
.st-tab.done-col{background:var(--success-l)}
/* The mock's six tabs stopped at "delivered"; the stages became seven on 5 Sept
   when collection was split out as its own step. Graphite, because collection is
   the point the order stops being work in progress - the same neutral the manual
   discount flag and the app source badge already use for "settled, not active". */
.st-tab.collected-col{background:var(--slate-l)}
.orders-table .btn-ghost{border:1px solid var(--border);color:var(--text2);background:var(--card)}
.orders-table .btn-ghost:hover{border-color:var(--primary);color:var(--primary)}

/* ── The order modal ──────────────────────────────────────────────────
   There is no two-column rule here on purpose. The mock's markup labels its
   halves LEFT COLUMN and RIGHT COLUMN, and I once read the missing rule as the
   same kind of bug as the undefined .form-grid and wrote a 1.6fr/1fr grid for
   it. That was wrong: the mock *renders* stacked, full width, with the order's
   route at the bottom - and the rule is to port from the DOM that actually
   draws, not from what the markup's comments imply. The grid cost the modal
   40% of its width (sections 980 -> 591, the items table with it) and left a
   tall empty column beside the route. Stacked is the design. */
.ord-foot-btn{font-size:12px}
.foot-group{display:flex;gap:8px;align-items:center}
.info-grid-1{grid-template-columns:1fr}
.section-title.st-gap{margin-top:16px}
.items-table .ta-c{text-align:center}
.items-table .ta-l{text-align:left}
.items-table .num{font-weight:700}
/* The mock has this at 10px. It carries the unit label in Arabic next to the
   SKU, so it takes the 11px floor agreed for the rest of the screen. */
.item-sku{font-size:11px;color:var(--muted);line-height:1.45}
.addr-note{color:var(--muted);font-size:11px}
.addr-warn{color:var(--warning);font-size:11px;margin-top:6px}
.tot-pos{color:var(--success)}
.tot-neg{color:var(--danger)}
.val-paid{color:var(--success)}
.val-due{color:var(--muted)}
.tl-time.is-pending{color:var(--muted)}
.modal-status-badge{margin-top:4px}
/* The customer's own note, the mock's last section - it writes the box inline.
   Amber because it is an instruction to whoever is preparing the order, not a
   field to read past. */
.cust-note-sec{margin-top:14px}
.cust-note{background:var(--warning-ll);border:1px solid var(--warning-l);border-radius:var(--radius);padding:10px;font-size:13px;line-height:1.55;color:var(--text2)}
/* The same box in the mark's colour, so the note in the modal and the flag on the
   row are read as the one fact. */
.cust-note.is-trim{background:var(--orange-l);border-color:var(--orange);
                   display:flex;align-items:flex-start;gap:7px;margin-top:12px}
.cust-note.is-trim .ti{font-size:15px;flex-shrink:0;margin-top:1px}
.tl-note{font-size:11px;color:var(--text2);margin-top:3px;background:var(--bg);padding:4px 8px;border-radius:6px;}

/* The mockup positions the row menu with position:fixed and JavaScript rect maths.
   Here it hangs off the kebab instead, which needs no interop and cannot end up
   somewhere else when the table scrolls. The backdrop is what closes it.

   It needs a positioned box of its own: the cell is position:sticky, and a sticky
   table cell is not a reliable containing block for an absolute child - the menu
   came out against a far ancestor and rendered behind the rows. The wrapper also
   raises it above the sticky cells of the rows underneath. */
.kebab-wrap{position:relative;display:inline-block;vertical-align:middle}
.menu-backdrop{position:fixed;inset:0;z-index:1199}

/* Placed from the pointer, not from the cell.
   It used to be absolute inside .col-act, and that cell is sticky with a z-index of
   its own - so every row below opened a stacking context that painted over the menu,
   and .table-wrap's overflow cut off whatever hung past the last row. Fixed here
   escapes both, and clamp() keeps it on screen near the bottom without anyone having
   to measure the window. */
.row-menu{
    position:fixed;
    /* Physical properties on purpose: the pointer reports physical coordinates, and
       pairing clientX with a logical inset is what threw the menu off the left edge
       of the screen. In RTL the action column sits on the left, so the menu opens
       rightwards from the button - and clamp keeps it whole at either end, with no
       need to measure the window. */
    top:clamp(8px, var(--menu-y), calc(100vh - 300px));
    left:clamp(8px, calc(var(--menu-x) - 8px), calc(100vw - 228px));
}


/* ── The manual order ─────────────────────────────────────────────────
   Laid out like the new-sale modal in mocks/admin/sales/sales.html. The mock writes
   the whole thing in inline styles; these are those styles, named.

   Gone by earlier decisions: the invoice and due dates (an invoice comes from a sales
   order, and the due date follows the customer's terms), the payment method (cash on
   delivery), and the draft button (an order has no draft state). */
.nom-search{position:relative;margin-bottom:6px;margin-top:2px}
/* Room between the pair of dropdowns and the search that feeds the next thing. */
.form-grid-2+.nom-hint{margin-bottom:12px}
.nom-search .form-input{width:100%;padding-inline-start:32px}
.nom-search>i{position:absolute;inset-inline-start:10px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:14px;pointer-events:none}
.nom-hint{font-size:11px;color:var(--muted);line-height:1.55;margin-top:4px}
.nom-table-wrap{border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:12px}
.nom-table{width:100%;border-collapse:collapse}
.nom-table thead th{padding:8px 12px;background:var(--bg);font-size:11px;color:var(--muted);text-align:right;font-weight:700}
.nom-table td{padding:8px 12px;border-top:1px solid var(--border);vertical-align:middle}
.nom-table .ta-c{text-align:center}
.nom-table .ta-l{text-align:left}
.nom-w-qty{width:70px}.nom-w-price{width:90px}.nom-w-disc{width:70px}.nom-w-total{width:100px}.nom-w-del{width:34px}
.nom-line-select{width:100%;border:none;background:transparent;font-size:12px;outline:none;font-family:inherit;color:var(--text)}
.nom-line-total{font-weight:800;color:var(--primary)}
.nom-empty{padding:20px;text-align:center;color:var(--muted);font-size:12px;border-top:1px solid var(--border)}
.nom-add-row{padding:8px 12px;border-top:1px solid var(--border)}
.nom-add-btn{background:none;border:1.5px dashed var(--border);border-radius:var(--radius);padding:5px 14px;cursor:pointer;font-size:12px;color:var(--muted);font-family:inherit}
.nom-add-btn:hover:not(:disabled){border-color:var(--primary);color:var(--primary)}
/* Every product is already on a line, so there is nothing a new row could hold. */
.nom-add-btn:disabled{opacity:.45;cursor:not-allowed}
.nom-del{background:none;border:none;cursor:pointer;color:var(--danger);font-size:14px;padding:2px 4px;line-height:1}
.nom-coupon{display:flex;gap:6px;align-items:center}
.nom-coupon .mini-input{width:118px;text-transform:uppercase}
.nom-apply{background:var(--primary);color:#fff;border:none;border-radius:6px;padding:4px 12px;font-size:12px;cursor:pointer;font-family:inherit;font-weight:600}
.nom-apply:disabled{opacity:.45;cursor:not-allowed}
/* The coupon the API accepted, echoed back so the operator sees it took. */
.nom-coupon-on{display:flex;align-items:center;justify-content:space-between;background:var(--success-l);color:var(--success);border-radius:var(--radius);padding:6px 12px;font-size:12px;font-weight:700;margin-top:4px}
/* A gift line: the same table, but nothing on it is the operator's to change - it is
   what the offer did, shown so the warehouse figure is not a surprise. */
.nom-bonus-row{background:var(--success-l)}
.nom-bonus-row td{color:var(--success);font-weight:600}
.nom-bonus-tag{margin-inline-start:6px;padding:1px 7px;border-radius:20px;background:var(--card);color:var(--success);font-size:10px;font-weight:700}
.nom-note-sec{margin-top:14px}
/* The total is a quote from the API, not arithmetic done here - this says so. */
.nom-quote-note{font-size:11px;color:var(--muted);line-height:1.55;margin-top:8px;padding-top:8px;border-top:1px dashed var(--border);display:flex;align-items:flex-start;gap:6px}
/* is-bad / is-good moved to _shared.css: the offer form asks for them too. */

/* The draft count in the page subtitle. A draft has no stage tab and no board column,
   so this is the only handle on it; it reads as part of the sentence it sits in and
   only turns into something you can press on hover. */
.ord-draft-link{
    background:none;border:0;padding:0;font:inherit;color:var(--primary);
    cursor:pointer;text-decoration:underline;text-underline-offset:2px;
}
.ord-draft-link:hover{color:var(--primary-d);}
/* Sits at the free end of the modal foot, before the buttons, saying what the
   greyed-out save is still waiting for. */
.nom-blocked{
    display:flex;align-items:center;gap:6px;margin-inline-end:auto;
    font-size:12px;line-height:1.5;color:var(--muted);
}

/* The rest of a column that did not fit. It sits at the bottom of the stack, so it
   reads as the end of what is loaded rather than another card. */
.col-more{
    flex-shrink:0;
    display:flex;align-items:center;justify-content:center;gap:6px;
    padding:9px;border:1px dashed var(--border);border-radius:var(--radius);
    background:transparent;color:var(--text2);
    font-family:inherit;font-size:12px;font-weight:700;line-height:1.45;
    cursor:pointer;transition:.15s;
}
.col-more:hover:not(:disabled){background:var(--card);border-color:var(--primary);color:var(--primary);}

/* The result of pressing save, kept where the press was. In the flow it sat under
   the notes box at the end of a long form, so on anything but a short order you had
   to scroll back down to find out why the order was refused. */
.nom-result{
    position:sticky;bottom:0;z-index:1;
    background:var(--card);
    padding-block:10px 0;
    margin-inline:-20px;padding-inline:20px;   /* meets the body's own padding */
}
.nom-result .alert-banner{margin-bottom:0;box-shadow:var(--elev-2);}
/* Two of them can stand together - what the shelf trimmed, and how the press went. */
.nom-result .alert-banner + .alert-banner{margin-top:8px}
.nom-result .alert-banner{align-items:flex-start}

/* The draft column. Dashed rather than filled, because it is the tray before the
   line and not a stage on it: nothing here has taken stock or started a clock. */
.col-header.draft-col{background:var(--card);border:1px dashed var(--border);border-bottom:0;color:var(--muted);}
.kanban-col:has(> .draft-col) .col-body{border:1px dashed var(--border);border-top:0;background:transparent;}

/* ── Picking ──────────────────────────────────────────────────────────
   No mock to port: the sales-order screens were rolled back in August and never
   rebuilt, so this is the design system's own vocabulary. */
.pick-reason{min-width:170px}
.pick-full{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--success)}
.pick-note{display:flex;align-items:flex-start;gap:8px;margin-top:12px;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);font-size:12px;line-height:1.55;color:var(--muted)}
.pick-note i{color:var(--primary);flex-shrink:0;margin-top:2px}

/* ── What was billed, beside what was asked for ─────────────────────────────
   Only drawn when a short pick made the two differ. Quieter than the order's
   own figure, because the row is about the order; the invoice is the note. */
.orders-table .amt-billed{color:var(--warning);font-weight:700}
.oc-billed{display:block;font-size:11px;font-weight:700;color:var(--muted);line-height:1.45}

/* The card's marks sit on their own line under the item count: the identity row at the
   top is already three things, and a fourth broke the order number onto two lines when
   the print icon was tried there. */
.oc-flags{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px}