/* The office order list: readable facts, explicit actions and no sideways
   search on the waiting board. Scoped away from forms and the job panel. */
/* A green rail meant "no warning", even while an order waited for board.
   The written stage, status and warning text now carry that information.
   Keep the empty cells for the existing column selectors, but remove them
   from both table and card layouts. This must outrank every breakpoint. */
.obtable th.rail,.obtable td.rail{display:none!important}
.obtable th.ob-anchor,.obtable td.ob-anchor{left:0}

.ob-search{margin-top:18px;max-width:820px;display:grid;gap:7px;color:#263829}
.ob-search label{font-size:15px;font-weight:600}
.ob-search-input{display:flex;gap:10px}
.ob-search input{width:100%;min-width:0;min-height:48px;font:inherit;padding:10px 14px;
  color:#263829;background:#faf6ea;border:1px solid #a8b99e;border-radius:8px}
.ob-search button{flex-shrink:0;min-height:44px;font:inherit;padding:8px 12px;
  color:#263829;background:#faf6ea;border:1px solid #a8b99e;border-radius:8px}
.ob-search button[hidden]{display:none}
.ob-search :focus-visible{outline:3px solid #0e7d94;outline-offset:2px}
#ob-search-result{font-size:14px;color:#465448}
@media(max-width:500px){.ob-search-input{flex-wrap:wrap}}

.ob-view-tools{max-width:1480px;width:100%;margin:0 auto;padding:18px 22px 14px;
  display:flex;align-items:center;justify-content:space-between;gap:16px}
.ob-view-tools[hidden]{display:none}
.ob-view-tools p{margin:0;max-width:650px;font-size:14px;line-height:1.5;color:#465448}
.ob-sort-tools{display:flex;align-items:center;gap:8px;flex-shrink:0;font-size:14px;color:#263829}
.ob-sort-tools select,.ob-sort-tools button{font:inherit;min-height:44px;padding:8px 12px;
  color:#263829;background:#faf6ea;border:1px solid #a8b99e;border-radius:8px}
.ob-sort-tools button:disabled{opacity:.5;cursor:default}
.ob-sort-tools :focus-visible,.ob-open-order:focus-visible{outline:3px solid #0e7d94;outline-offset:3px}

.obtable[data-view="new_orders"] tbody td{font-size:15px;line-height:1.5}
.obtable[data-view="new_orders"] .order-actions button,
.obtable[data-view="new_orders"] .order-actions a{font:500 14px/1.35 'Inter',sans-serif;min-height:44px}
.obtable[data-view="new_orders"] .ob-ai-suggestion,
.obtable[data-view="new_orders"] .ob-row-assignee,
.obtable[data-view="new_orders"] .received-time{font-size:12px;line-height:1.4}
.obtable[data-view="new_orders"] .st-chip,
.obtable[data-view="new_orders"] .ai-draft-chip{font-size:12px;line-height:1.4}

.obtable[data-readable]:not([data-readable=""]){overflow:visible;padding:0 22px 20px}
.obtable[data-readable]:not([data-readable=""]) table{table-layout:fixed}
.obtable[data-readable]:not([data-readable=""]) th,.obtable[data-readable]:not([data-readable=""]) td{
  min-width:0;width:auto;white-space:normal;overflow-wrap:anywhere}
.obtable[data-readable="waiting"] th:nth-child(1){width:6px}
.obtable[data-readable="waiting"] th:nth-child(2){width:9.79%}
.obtable[data-readable="waiting"] th:nth-child(3){width:19.58%}
.obtable[data-readable="waiting"] th:nth-child(5){width:6.23%}
.obtable[data-readable="waiting"] th:nth-child(6){width:14.24%}
.obtable[data-readable="waiting"] th:nth-child(7){width:14.24%}
.obtable[data-readable="waiting"] th:nth-child(8){width:13.35%}
.obtable[data-readable="waiting"] th:nth-child(9){width:11.57%}
.obtable[data-readable="intake"] th:nth-child(2){width:11.57%}
.obtable[data-readable="intake"] th:nth-child(3){width:24.92%}
.obtable[data-readable="intake"] th:nth-child(5){width:7.12%}
.obtable[data-readable="intake"] th:nth-child(6){width:9.79%}
.obtable[data-readable="intake"] th:nth-child(7){width:15.13%}
.obtable[data-readable="intake"] th:nth-child(8){width:20.47%}
.obtable[data-readable="production"] th:nth-child(2){width:9.79%}
.obtable[data-readable="production"] th:nth-child(3){width:19.58%}
.obtable[data-readable="production"] th:nth-child(5){width:8.01%}
.obtable[data-readable="production"] th:nth-child(6){width:10.68%}
.obtable[data-readable="production"] th:nth-child(7){width:15.13%}
.obtable[data-readable="production"] th:nth-child(8){width:13.35%}
.obtable[data-readable="production"] th:nth-child(9){width:12.46%}
.obtable[data-readable="despatch"] th:nth-child(2){width:11.57%}
.obtable[data-readable="despatch"] th:nth-child(3){width:21.36%}
.obtable[data-readable="despatch"] th:nth-child(5){width:9.79%}
.obtable[data-readable="despatch"] th:nth-child(6){width:9.79%}
.obtable[data-readable="despatch"] th:nth-child(7){width:10.68%}
.obtable[data-readable="despatch"] th:nth-child(8){width:13.35%}
.obtable[data-readable="despatch"] th:nth-child(9){width:12.46%}
.obtable[data-readable="purchase"] th:nth-child(2){width:15%}
.obtable[data-readable="purchase"] th:nth-child(3){width:22%}
.obtable[data-readable="purchase"] th:nth-child(4){width:10%}
.obtable[data-readable="purchase"] th:nth-child(5){width:16%}
.obtable[data-readable="purchase"] th:nth-child(6){width:12%}
.obtable[data-readable="purchase"] th:nth-child(7){width:13%}
.obtable[data-readable="purchase"] th:nth-child(8){width:12%}
.obtable[data-readable="removed"] th:nth-child(2){width:12.46%}
.obtable[data-readable="removed"] th:nth-child(3){width:21.36%}
.obtable[data-readable="removed"] th:nth-child(5){width:8.9%}
.obtable[data-readable="removed"] th:nth-child(6){width:11.57%}
.obtable[data-readable="removed"] th:nth-child(7){width:13.35%}
.obtable[data-readable="removed"] th:nth-child(8){width:9.79%}
.obtable[data-readable="removed"] th:nth-child(9){width:11.57%}
.obtable[data-readable="cancelled"] th:nth-child(2){width:10.68%}
.obtable[data-readable="cancelled"] th:nth-child(3){width:16.02%}
.obtable[data-readable="cancelled"] th:nth-child(5){width:7.12%}
.obtable[data-readable="cancelled"] th:nth-child(6){width:12.46%}
.obtable[data-readable="cancelled"] th:nth-child(7){width:9.79%}
.obtable[data-readable="cancelled"] th:nth-child(8){width:12.46%}
.obtable[data-readable="cancelled"] th:nth-child(9){width:8.9%}
.obtable[data-readable="cancelled"] th:nth-child(10){width:11.57%}
.obtable[data-readable]:not([data-readable=""]) thead th{font:600 14px/1.4 'Inter',sans-serif;
  text-transform:none;letter-spacing:0;color:#364533}
.obtable[data-readable]:not([data-readable=""]) .ob-sort-open{padding:14px 16px 14px 12px;min-height:48px}
.obtable[data-readable]:not([data-readable=""]) tbody td{font-size:16px;line-height:1.5;padding:18px 12px;
  vertical-align:top;border-bottom:1px solid #cbd5c1}
.obtable[data-readable]:not([data-readable=""]) td.rail{width:6px;padding:0}
.obtable[data-readable]:not([data-readable=""]) .ob-anchor{position:static;min-width:0;box-shadow:none}
.obtable[data-readable]:not([data-readable=""]) .ob-cell-value{min-width:0}
.ob-main-ref{font:600 17px/1.4 'JetBrains Mono',monospace;color:#203323}
.obtable[data-readable]:not([data-readable=""]) .wo-ref{font:600 18px/1.4 'JetBrains Mono',monospace;
  color:#203323;white-space:nowrap}
.obtable[data-readable]:not([data-readable=""]) .wo-wg-ref{font-size:13px;color:#465448;white-space:normal}
.ob-customer,.ob-product,.ob-progress,.ob-date{display:block}
.ob-customer{font-weight:600;font-size:17px;color:#203323;margin-bottom:5px}
.ob-product{font-size:16px;color:#263829}
.ob-secondary{display:block;font:400 13px/1.5 'Inter',sans-serif;color:#465448;margin-top:6px}
.ob-secondary b{font-weight:600}
.ob-field-label{margin-top:0;margin-bottom:4px}
.obtable[data-readable="intake"] .ob-customer-po{font-size:15px}
.obtable[data-readable="intake"] .ob-product .desc{font-size:16px;font-weight:400}
.obtable[data-readable="intake"] .ob-source-subject{max-width:100%;white-space:normal;
  overflow-wrap:anywhere;font-size:12px;line-height:1.4;margin-top:8px}
.obtable[data-readable="intake"] .ob-order-details .st-chips{display:flex;flex-direction:column;
  align-items:flex-start;gap:6px}
.obtable[data-readable="intake"] .order-actions{display:flex;flex-wrap:wrap;gap:8px}
.obtable[data-readable="intake"] .wo-link{min-height:36px;white-space:normal}
.ob-quantity{font:500 17px/1.4 'JetBrains Mono',monospace}
.ob-date{font-weight:600;white-space:normal}
.ob-date-needed{display:block;font-size:14px;color:#815600}
.ob-received-age{margin-top:12px}
.ob-progress{display:inline-block;font-size:15px;font-weight:600;color:#263829;
  background:#faf6ea;border:1px solid #a8b99e;border-radius:6px;padding:6px 9px}
.ob-open-order{display:inline-flex;justify-content:center;align-items:center;min-height:44px;
  max-width:100%;padding:9px 14px;border:1px solid #0e7d94;border-radius:8px;
  background:#0e7d94;color:#fff;font:600 15px/1.35 'Inter',sans-serif;text-align:center}
.ob-open-order:hover{background:#096579}
.obtable[data-readable]:not([data-readable=""]) .order-actions{margin-top:10px;gap:8px;
  flex-wrap:wrap;max-width:100%;min-width:0}
.obtable[data-readable]:not([data-readable=""]) .order-actions button,
.obtable[data-readable]:not([data-readable=""]) .order-actions a{font:500 14px/1.35 'Inter',sans-serif;
  min-height:44px;max-width:100%;padding:8px 10px;white-space:normal;
  border-radius:8px;border:1px solid #a1b297;background:#faf6ea;color:#31442f}
.obtable[data-readable]:not([data-readable=""]) .order-actions .q-stop{color:#814b3d;border-color:#bb9b8e}
.obtable[data-readable="intake"] .order-actions button.q-process,
.obtable[data-readable="intake"] .order-actions button.ai-draft-open{color:#fff;background:#0e7d94;border-color:#0e7d94}
.obtable[data-readable="intake"] .order-actions button.q-remove{color:#814b3d}
.obtable[data-readable]:not([data-readable=""]) .st-chips{margin-top:8px}
.obtable[data-readable]:not([data-readable=""]) .st-chip,
.obtable[data-readable]:not([data-readable=""]) .ai-draft-chip,
.obtable[data-readable]:not([data-readable=""]) .q-chip{font:500 13px/1.4 'Inter',sans-serif;
  text-transform:none;letter-spacing:0;white-space:normal;max-width:100%}

@media(max-width:1240px){
  .ob-view-tools{align-items:flex-start;flex-wrap:wrap;padding:16px 14px 12px}
  /* Sort controls are visible above the cards. Hidden headers must not leave
     invisible controls in the keyboard's tab order. */
  .obtable[data-view="new_orders"] thead{display:none}
  .obtable[data-view="new_orders"] tbody td::before{font:600 13px/1.5 'Inter',sans-serif;
    color:#465448;letter-spacing:0;text-transform:none}
  .obtable[data-readable]:not([data-readable=""]){padding:0 12px 20px}
  .obtable[data-readable]:not([data-readable=""]) table,.obtable[data-readable]:not([data-readable=""]) tbody{display:block;width:auto}
  .obtable[data-readable]:not([data-readable=""]) thead{display:none}
  .obtable[data-readable]:not([data-readable=""]) tbody tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px 24px;padding:20px 22px;margin:0 0 16px;position:relative;
    border:1px solid #bfceb2;border-radius:12px;overflow:hidden}
  .obtable[data-readable]:not([data-readable=""]) tbody td{display:block;position:static;padding:0;border:0;
    width:auto;min-width:0;max-width:none;text-align:left;white-space:normal}
  .obtable[data-readable]:not([data-readable=""]) tbody td::before{display:block;content:attr(data-label);
    font:600 13px/1.5 'Inter',sans-serif;text-transform:none;letter-spacing:0;color:#465448;margin-bottom:4px}
  .obtable[data-readable]:not([data-readable=""]) tbody td.rail{position:absolute;inset:0 auto 0 0;width:5px;display:block}
  .obtable[data-readable]:not([data-readable=""]) tbody td.rail::before,
  .obtable[data-readable]:not([data-readable=""]) tbody td.ob-order-id::before,
  .obtable[data-readable]:not([data-readable=""]) tbody td.ob-customer-product::before,
  .obtable[data-readable]:not([data-readable=""]) tbody td.ob-actions::before{content:none}
  .obtable[data-readable]:not([data-readable=""]) tbody td.ob-order-id{grid-column:1 / -1;grid-row:1}
  .obtable[data-readable]:not([data-readable=""]) .ob-order-id .ob-cell-value{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 18px}
  .obtable[data-readable]:not([data-readable=""]) .ob-order-id .ob-secondary{margin:0}
  .obtable[data-readable]:not([data-readable=""]) tbody td.ob-customer-product{grid-column:1 / -1;grid-row:2;
    padding-bottom:14px;border-bottom:1px solid #cbd5c1}
  .obtable[data-readable]:not([data-readable=""]) tbody td.ob-actions{grid-column:1 / -1;
    padding-top:14px;border-top:1px solid #cbd5c1}
  .obtable[data-readable]:not([data-readable=""]) .ob-actions .ob-cell-value{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
  .obtable[data-readable]:not([data-readable=""]) .order-actions{margin:0}
}
@media(max-width:760px){
  .obtable thead{display:none}
  .ob-sort-tools{flex-wrap:wrap;flex-shrink:1;width:100%}
  .ob-sort-tools select{min-width:0;max-width:100%;flex:1}
}
@media(max-width:600px){
  .obtable[data-readable]:not([data-readable=""]) tbody tr{grid-template-columns:minmax(0,1fr);padding:18px;gap:16px}
  .obtable[data-readable]:not([data-readable=""]) .ob-order-id .ob-cell-value{gap:6px 14px}
  .ob-sort-tools label{width:100%}
}

/* A fact nobody has recorded says so in words (the readable-screens spec).
   It is never a bare dash, and never a zero: 0 counted and "not counted"
   are different answers, so obQty prints 0 as 0 and routes only a genuinely
   absent value through here. Amber plus the word, so it still reads in
   greyscale. */
.ob-missing{color:#815600;font-weight:600}
.ob-thing{display:block;font-size:16px;font-weight:600;color:#203323}
.ob-qty-second{margin-top:10px}
.obtable[data-readable="purchase"] .ob-customer,
.obtable[data-readable="despatch"] .ob-quantity,
.obtable[data-readable="cancelled"] .ob-quantity{display:block}
.ob-progress-stop{color:#814b3d;border-color:#bb9b8e}
/* A stopped job has no Restore. The gap where every other list has a button
   is filled with the reason in words, not left silent. */
.ob-no-action{display:inline-block;font:600 15px/1.35 'Inter',sans-serif;color:#5c5346;
  background:#f2eede;border:1px dashed #a8b99e;border-radius:8px;padding:9px 14px;
  min-height:44px;box-sizing:border-box}

.obtable[data-readable="waiting"] th.ob-job-detail{width:11%}

.obtable[data-readable="intake"] th.ob-job-detail{width:11%}

.obtable[data-readable="production"] th.ob-job-detail{width:11%}

.obtable[data-readable="despatch"] th.ob-job-detail{width:11%}

.obtable[data-readable="removed"] th.ob-job-detail{width:11%}

.obtable[data-readable="cancelled"] th.ob-job-detail{width:11%}

.obtable .ob-job-detail .ob-open-order{background:#faf6ea;color:#0e7d94;font-weight:500}
.obtable .ob-job-detail .ob-open-order:hover{background:#e7eddf}
@media(max-width:1240px){.obtable td.ob-job-detail::before{content:none!important}}