/* ══ FIELD ORDERS v7 (2026-11-14, PILOTED TO JUSTUS) — see js/field-orders-v7.js ══
   Ported from the mock's CSS (claude-admin mocks/purch-field-orders-fresh-v7/kit-add.css,
   v4 → v7 blocks), every rule SCOPED so nothing reaches another screen:
     body.fo7            — set by fo7Sync() only for the pilot with the switch on
     .fo7d               — display:contents wrapper only the v7 renderer writes into #detail
     #panel-orders / #recv-modal / #eo-bg — Field Orders' own panel and dialogs
   The mock restyled .print-btn, .add-item-btn, .tc-*, .tu-*, .ie-edit and dateTag
   globally; Inventory, the dashboard and the PO print button share them. Not here. */

.fo7d{display:contents}
body.fo7{--fo7h:32px}

/* ── left panel: picker, search, email button, chips, in that order (CSS order, no node moved) ── */
body.fo7 #panel-orders>.job-picker{order:1;border-bottom:0!important;padding:12px 12px 6px!important}
body.fo7 #panel-orders>.sidebar-search{order:2;padding:0 12px 10px!important;border-bottom:0!important}
body.fo7 #panel-orders>div:has(>button[onclick="eoOpen()"]){order:3;padding:0 12px 12px!important;border-bottom:1px solid #e3e1db}
body.fo7 #panel-orders>.filter-tabs{order:4}
body.fo7 #panel-orders>.fo7-swrow{order:5}
body.fo7 #panel-orders>#order-count{order:6;display:none!important}
body.fo7 #panel-orders>.order-list{order:7}
body.fo7 #panel-orders .job-picker-prompt{font:700 12px var(--sig-disp)!important;color:#171614!important;letter-spacing:0!important;margin-bottom:6px!important}
body.fo7 #panel-orders .jp-input,body.fo7 #panel-orders .search-inp{height:34px!important;box-sizing:border-box;border:1px solid #cfccc4!important;border-radius:6px!important;background:#fff!important;font-size:13px!important;font-weight:500!important}
body.fo7 #panel-orders button[onclick="eoOpen()"]{font-family:var(--sig-disp)!important;font-weight:700!important;font-size:13px!important;line-height:1!important;
  height:var(--fo7h)!important;padding:0 14px!important;border-radius:6px!important;background:#fff!important;color:#171614!important;border:1px solid #cfccc4!important;
  display:inline-flex!important;align-items:center;justify-content:center;width:100%;cursor:pointer}
body.fo7 #panel-orders button[onclick="eoOpen()"]:hover{border-color:#171614!important}

/* the pilot switch (Shop v5's .sv5-switch, css/shop-v5.css:101) */
.fo7-swrow{display:flex;justify-content:flex-end;padding:0 12px 10px}
#panel-orders>.fo7-swrow{order:5}

/* ── v7 ① chip bar, CORs v4 stage-chip family: white chips, label + bold count side by side,
      selected = blue edge + light blue fill; "22 missing" is a small labelled pill, no ✕ ── */
body.fo7 #panel-orders .filter-tabs{display:flex!important;flex-wrap:wrap;gap:5px!important;padding:10px 12px 12px!important;border-bottom:1px solid #e3e1db;grid-template-columns:none!important}
body.fo7 #panel-orders .filter-tabs .ftab{flex:1 1 auto!important;min-width:0!important;display:inline-flex!important;flex-direction:row!important;justify-content:center!important;align-items:center!important;gap:6px!important;
  height:28px!important;padding:0 9px!important;box-sizing:border-box;border:1px solid #cfccc4!important;border-radius:6px!important;background:#fff!important;
  box-shadow:none!important;color:#171614!important;font:600 12.5px var(--sig-disp)!important;letter-spacing:0!important;text-transform:none!important;line-height:1!important;white-space:nowrap}
body.fo7 #panel-orders .filter-tabs .ftab:hover{border-color:#171614!important}
body.fo7 #panel-orders .filter-tabs .ftab.active{border-color:#1f5fbf!important;box-shadow:inset 4px 0 0 #1f5fbf!important;background:#eef4fc!important;color:#171614!important;font-weight:700!important}
body.fo7 #panel-orders .filter-tabs .ftab-n{font:800 12.5px var(--sig-disp)!important;color:#171614!important;opacity:1!important;margin:0!important;font-variant-numeric:tabular-nums}
body.fo7 #panel-orders .filter-tabs .ftab-n:empty::after{content:"0"}
body.fo7 #fulfilled-missing-badge{font:700 11px var(--sig-disp)!important;color:#8a1a12!important;background:#fde4e1!important;border-radius:4px!important;padding:3px 6px!important;white-space:nowrap;vertical-align:baseline!important}
body.fo7 #fulfilled-missing-badge::after{content:" missing"}

/* ── rail cards: separate tiles, 3 lines (+ PO line when there is one) ── */
body.fo7 #order-list{background:#f1efea}
body.fo7 #order-list .oi-group{margin-bottom:2px}
body.fo7 #order-list .order-item.fo7card{background:#fff;border:1px solid #e3e1db;border-radius:9px;margin:10px 12px;
  padding:13px 15px 14px;gap:5px;box-shadow:0 1px 0 rgba(0,0,0,.03)}
body.fo7 #order-list .order-item.fo7card+.order-item.fo7card{margin-top:0}
body.fo7 #order-list .order-item.fo7card:hover{background:#fcfbf9;border-color:#cfccc4}
body.fo7 #order-list .order-item.fo7card.selected{background:#fff;border-color:#c41018;box-shadow:inset 3px 0 0 #c41018;border-left:1px solid #c41018}
body.fo7 .fo7card .oi-top{gap:6px}
body.fo7 .fo7card .oi-top .oi-id{font-size:13px;margin-right:auto;white-space:nowrap}
body.fo7 .fo7card .oi-top .date-badge,body.fo7 .fo7card .oi-top .oi-badge{white-space:nowrap}
body.fo7 .fo7card .oi-job{font-size:15px;font-weight:600;line-height:1.3;margin-top:3px}
body.fo7 .fo7card .oi-l3{display:block;overflow:hidden;font-size:13px;line-height:1.35;color:var(--fg)}
body.fo7 .fo7card .fo7l3{display:flex;flex-wrap:wrap;margin-left:-16px}
body.fo7 .fo7card .fo7l3 b{font-weight:600}
body.fo7 .fo7card .fo7l3 span{font-weight:400}
body.fo7 .fo7card .fo7l3>*::before{content:"·";display:inline-block;width:16px;text-align:center;font-weight:700}
body.fo7 .fo7card .oi-l3 .q{font-size:12px}
body.fo7 .fo7card .oi-po{margin:3px 0 0}
body.fo7 .fo7card .oi-missing{margin-top:4px}

/* ── header: two lines, facts only, no labels except "Needed" ── */
.fo7d .detail-header{padding:14px 24px 12px!important}
.fo7d .fo7h1{display:flex;align-items:center;gap:12px;min-height:var(--fo7h)}
.fo7d .fo7for{font:800 19px var(--sig-disp);letter-spacing:.01em;white-space:nowrap}
.fo7d .fo7job{font:600 16px var(--sig-disp);color:#171614;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.fo7d .fo7area{font-weight:500;margin-left:2px}
.fo7d .fo7dot{font-style:normal;font-weight:700;margin:0 8px}
.fo7d .fo7fill{flex:1}
.fo7d .fo7h1 .dh-actions{flex:none;display:flex;align-items:center;gap:8px!important}
.fo7d .dh-actions .status-pill{margin-right:6px}
.fo7d .dh-actions .fo7del{background:none!important;border:0!important;color:#8a1a12!important;font:700 13px var(--sig-disp)!important;padding:0 8px!important;height:var(--fo7h);margin-left:4px;cursor:pointer}
.fo7d .dh-actions .fo7del:hover{text-decoration:underline}
.fo7d .dh-actions .fo7sep{width:1px;height:20px;background:#e3e1db;margin:0 2px}
.fo7d .fo7h2{display:flex;align-items:center;flex-wrap:wrap;gap:0;margin-top:6px;font-size:14px;color:#171614;line-height:24px}
.fo7d .fo7h2>*+*::before{content:"·";margin:0 10px;font-weight:700}
.fo7d .fo7h2 b{font-weight:700}
.fo7d .fo7need{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.fo7d .fo7need .oib-date-inp{width:122px!important;border:1px solid transparent!important;background:none!important;font:700 14px -apple-system,system-ui,sans-serif!important;padding:1px 4px!important;margin-left:-2px;border-radius:6px!important;color:#171614!important}
.fo7d .fo7need .oib-date-inp:hover{border-color:#cfccc4!important}
.fo7d .fo7need .date-badge{font-size:9.5px!important;padding:.15em .45em!important;margin-left:2px}
.fo7d .fo7h2 .oi-po{margin:0!important;display:inline-flex;vertical-align:middle}
.fo7d .fo7notes{margin-top:4px;font-size:13px;color:#171614;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;cursor:pointer}
.fo7d .fo7notes.open{white-space:normal;overflow:visible}

/* ── buttons: purchasing's outlined button (.print-btn, purchasing.html:2970-2997) ── */
.fo7d .tu-btn,.fo7d .tc-move,.fo7d .tu-bulk-btn,.fo7d .detail-header .add-item-btn,.fo7d .detail-header .print-btn{
  font-family:var(--sig-disp)!important;font-weight:700!important;font-size:13px!important;line-height:1!important;
  height:var(--fo7h)!important;padding:0 14px!important;border-radius:6px!important;background:#fff!important;
  color:#171614!important;border:1px solid #cfccc4!important;display:inline-flex!important;align-items:center;gap:7px;
  white-space:nowrap;cursor:pointer;box-shadow:none!important;opacity:1!important}
.fo7d .tu-btn:hover,.fo7d .tc-move:hover,.fo7d .tu-bulk-btn:hover,.fo7d .detail-header .add-item-btn:hover,.fo7d .detail-header .print-btn:hover{border-color:#171614!important;background:#fff!important}
/* colour key on the verb = the state it sends the line to (teal = inventory, amber = to order) */
.fo7d .tu-btn-inv::before,.fo7d .tu-bulk-btn[onclick*="'inv'"]::before,.fo7d .tc-move[onclick^="moveToInv"]::before{content:"";width:8px;height:8px;border-radius:2px;background:#46b3a6;flex:none}
.fo7d .tu-btn-ord::before,.fo7d .tu-bulk-btn[onclick*="'order'"]::before,.fo7d .tc-move[onclick^="moveToOrder"]::before{content:"";width:8px;height:8px;border-radius:2px;background:#df9700;flex:none}
.fo7d .ie-edit,.fo7d .ie-lock{font-family:var(--sig-disp)!important;font-size:13px!important;font-weight:700!important;background:none!important;border:0!important;
  color:#171614!important;padding:0 6px!important;height:var(--fo7h);display:inline-flex!important;align-items:center;text-transform:none!important;letter-spacing:0!important;border-radius:6px!important}
.fo7d .ie-edit:hover{text-decoration:underline}
.fo7d .ie-lock{color:#5f5c56!important;font-weight:600!important}
.fo7d .tu-qty,.fo7d .tc-qty{background:none!important;color:#171614!important;font:700 13px var(--sig-disp)!important;padding:0 4px!important;border-radius:0!important;min-width:44px;text-align:right}

/* ── to-sort block ── */
.fo7d .detail-body{padding:22px 26px!important}
.fo7d .triage-unrev{margin-bottom:22px!important;padding-bottom:2px}
.fo7d .fo7tuhd{display:flex;align-items:center;justify-content:space-between}
.fo7d .fo7bulk{display:flex;gap:6px}
.fo7d .tu-btns{display:flex!important;align-items:center;gap:0!important}
.fo7d .tu-item .tu-btns+.tu-btns{margin-left:8px}
/* ⑧ one box: [ 40 ] of 40 */
.fo7d .fo7q .tu-sg-inp{height:var(--fo7h)!important;box-sizing:border-box;width:72px!important;border:1px solid #cfccc4!important;border-radius:6px!important;
  background:#fff!important;font:600 13px var(--sig-disp)!important;text-align:right!important;padding:0 8px!important;color:#171614!important}
.fo7d .fo7q span{font-size:13px;font-weight:600;margin:0 10px 0 6px;white-space:nowrap}

/* ── ONE card for every state: same tile, number, tag slot, one row of controls. State = 6px
      left edge + 2px rule under it + the tag. ── */
.fo7d .tu-item,.fo7d .tc-item{background:#fff!important;border:1px solid #e3e1db!important;border-left:6px solid #b9b5ac!important;border-bottom:2px solid #dcd9d2!important;
  border-radius:9px!important;display:flex!important;align-items:center!important;
  padding:8px 14px 8px 12px!important;gap:12px!important;margin:0 0 6px!important;cursor:pointer}
.fo7d .triage-unrev .tu-item{margin:0 10px 6px!important}
.fo7d .triage-unrev .tu-hd+.tu-item{margin-top:10px!important}
.fo7d .triage-cols{gap:22px!important}
.fo7d .triage-col .tc-items{padding:10px}
.fo7d .tc-item:last-child{margin-bottom:0!important}
.fo7d .tc-item:has(.fo7tag-inv){border-left-color:#a1e4d6!important;border-bottom-color:#d3f0ea!important}
.fo7d .tc-item:has(.tc-tag-pulled){border-left-color:#46b3a6!important;border-bottom-color:#a1e4d6!important}
.fo7d .tc-item:has(.tc-tag-delivery),.fo7d .tc-item:has(.tc-tag-ordered){border-left-color:#2472c2!important;border-bottom-color:#b7d4f0!important}
.fo7d .tc-item:has(.tc-tag-draft){border-left-color:#df9700!important;border-bottom-color:#f9bf6b!important}
.fo7d .tc-item-right{display:flex!important;flex-direction:row!important;align-items:center!important;gap:8px!important;flex-shrink:0}
.fo7d .fo7invq{display:flex;align-items:center;gap:6px}
.fo7d .fo7cap{font:600 13px var(--sig-disp)!important;color:var(--fg);letter-spacing:0!important}
.fo7d .tc-qty-inp{height:var(--fo7h)!important;box-sizing:border-box;width:52px!important;border:1px solid #cfccc4!important;border-radius:6px!important;background:#fff!important;font:600 13px var(--sig-disp)!important}
.fo7d .tc-empty{padding:28px 14px!important;font-size:13px!important}
.fo7d .fo7num{font-size:12px;font-weight:700;color:var(--fg);width:20px;height:20px;border-radius:50%;border:1.5px solid #cfccc4;
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;align-self:center}
.fo7d .fo7row .tu-body,.fo7d .fo7row .tc-item-body{align-self:center!important;min-width:0;flex:1 1 auto!important;width:auto!important;max-width:none!important}
.fo7d .fo7line{display:flex;align-items:center;gap:3px 10px;min-height:var(--fo7h);flex-wrap:wrap;min-width:0}
.fo7d .fo7nm{display:flex;align-items:flex-start;gap:10px;flex:0 1 auto;min-width:0;max-width:100%}
.fo7d .fo7chev{width:0;height:0;flex:none;border-left:6px solid #171614;border-top:4.5px solid transparent;border-bottom:4.5px solid transparent;transition:transform .12s;margin-top:6px}
.fo7d .fo7open .fo7chev{transform:rotate(90deg)}
/* v7 ②: full names, wrap onto as many lines as they need, never "…" */
.fo7d .fo7line .tu-name,.fo7d .fo7line .tc-item-name{font-size:14.5px!important;font-weight:600!important;line-height:1.3!important;min-width:0;
  display:block!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;word-break:normal!important}
.fo7d .fo7line .fo7tag,.fo7d .fo7line .tc-item-tag{margin:0!important;flex:none;align-self:center}
.fo7d .fo7tag{display:inline-block;font-family:var(--sig-disp);font-weight:800;font-size:10px;letter-spacing:.07em;text-transform:uppercase;border-radius:4px;padding:.2em .5em;line-height:1.5}
.fo7d .fo7tag-sort{background:#e9e8e4;color:#171614}
.fo7d .fo7tag-inv{background:#d3f0ea;color:#0e3b34}
.fo7d .fo7keys{display:inline-flex;gap:4px;flex:none;align-self:center}
.fo7d .fo7key{font:800 9.5px var(--sig-disp);letter-spacing:.06em;text-transform:uppercase;background:#173b34;color:#fff;border-radius:3px;padding:.15em .45em;line-height:1.5}
.fo7d .fo7key-f{background:#e9e8e4;color:#171614}
.fo7d .fo7open .fo7keys{display:none}
.fo7d .fo7more{display:none;padding:4px 0 4px 20px}
.fo7d .fo7open .fo7more{display:block}
.fo7d .fo7more>.tu-meta,.fo7d .fo7more>.tc-item-meta{margin-top:2px!important;font-size:13px!important;font-weight:400;color:var(--fg)!important}
.fo7d .fo7more .note-row{margin-top:8px;font-size:13px}
.fo7d .fo7more .note-row+.note-row{margin-top:5px}

/* ── Confirm Receival (dialog only, the write is today's): helper sentence cut; rows as tiles ── */
body.fo7 #recv-modal [style*="line-height:1.5"]{display:none!important}
body.fo7 #recv-modal>div{width:620px!important;padding:24px 26px!important}
body.fo7 #recv-items{gap:8px}
body.fo7 #recv-items .recv-row{background:#fff;border:1px solid #e3e1db!important;border-radius:9px;padding:12px 14px!important;gap:14px!important}
body.fo7 #recv-items .recv-row:has(.recv-recv.on){border-left:6px solid #207f40!important;border-bottom:2px solid #b4dfc0!important}
body.fo7 #recv-items .recv-row:has(.recv-miss.on){border-left:6px solid #b91c1c!important;border-bottom:2px solid #efb7b1!important}
body.fo7 #recv-items .recv-name{font-size:15px!important;font-weight:600}
body.fo7 #recv-items .recv-spec{font-size:13px!important;margin-top:3px!important;line-height:1.35;color:var(--fg)!important}
body.fo7 #recv-items .recv-qty{font-size:14px!important;font-weight:700;color:var(--fg)!important}
body.fo7 #recv-sub{font-size:13px!important;margin-bottom:16px!important}

/* ── New order from an email: header sub-line and paste lead cut (NOT "Nothing was read…",
      eo:302); facts two to a row; each line one roomy row ── */
body.fo7 #eo-bg .eo-hd small,body.fo7 #eo-bg .eo-lead:has(+ #eo-text){display:none!important}
body.fo7 #eo-bg .eo-body{padding:20px 22px!important}
body.fo7 #eo-bg .eo-grid{grid-template-columns:90px 1fr 90px 1fr!important;gap:12px 14px!important}
body.fo7 #eo-bg .eo-grid label{font-size:13px!important;color:var(--fg)!important}
body.fo7 #eo-bg #eo-notes{grid-column:2/-1}
body.fo7 #eo-bg .eo-inp{padding:9px 11px!important;font-size:14px!important}
body.fo7 #eo-bg .eo-row{padding:12px 0!important}
body.fo7 #eo-bg .eo-rowmain{display:flex!important;flex-wrap:wrap;gap:8px;align-items:center}
body.fo7 #eo-bg .eo-line1{flex:none}
body.fo7 #eo-bg .eo-line2{flex:1;min-width:280px;margin:0!important}
body.fo7 #eo-bg .eo-src,body.fo7 #eo-bg .eo-prob,body.fo7 #eo-bg .eo-unsure{flex-basis:100%}
body.fo7 #eo-bg .eo-s,body.fo7 #eo-bg .eo-qty,body.fo7 #eo-bg .eo-free{padding:7px 9px!important;font-size:14px!important}
body.fo7 #eo-bg .eo-text{font-size:14px!important;padding:14px!important}