/* ==========================================================================
   PRACO FULFILMENT (PF2) — the module's own sheet. Prefix .pf-*.
   STRUCTURE from the prototype (Desktop\Praco-Fulfilment-Prototype-v4.html):
   header → collapsible status strip → raised section tabs fused to ONE sheet →
   inside a tab: [banner] → four KPIs → one card (header with title, sub-line and
   a count pill or the section's action; the list inside). THE LOOK is the
   house's: the header is the .ec-* family (style.css), buttons are ui-kit.css,
   lines #dbe4ec, ink #0f172a, muted #6b7a89, the house teal #075985 (ui-kit --ui-teal).
   The lists inside the cards are drawn by tradeClients.js with its own injected
   styles (which carry their own .tc-hosted variants); nothing here touches .tc-*,
   and no rule here redefines one another sheet owns.
   The sidebar entry needs nothing here: it is built exactly like its neighbours
   (<img class="nav-ico" src="img/logos/praco-logo.png"> then the words), so
   polish.css's .nav-ico chip draws the PRACO wordmark as it draws Evri's mark.
   Mobile is ONE block at the house breakpoint, 1180px, at the very end.
   ========================================================================== */

/* The two values the purchase-order detail changes are custom properties, so
   the fit block below RE-VALUES them rather than overriding this rule — the
   same pattern as --ui-sky further down, and the reason there is no second
   .pf-page rule fighting this one.

   DEFECT 3(a) — EVERY SCREEN IN THIS MODULE USES THE WINDOW'S FULL WIDTH,
   with a 2,200px ceiling, the way Product Catalogue does. Two things here, and
   BOTH are needed:

     · THE CEILING IS 2,200px, not 1,360px. One ceiling, shared by the list and
       by the review page, because "the review page is narrower than the list"
       is exactly what happens when they have two.

     · width:min(...,100%) IS NOT THE SAME AS max-width HERE. On the review
       page .pf-page becomes a FLEX ITEM of .main (see the html.pf-fit block at
       the end of this file). A flex item's cross-axis size normally stretches
       to its container — but an `auto` margin on that axis, which is what the
       `margin:0 auto` centring every other page uses, CANCELS the stretch and
       leaves the item shrink-to-fit, i.e. as wide as its own contents happen
       to be. Measured before this line existed: at a 1,920px window the list
       drew 1,360px and the review page drew 1,602px — neither of them the
       width that was available. An explicit width is a definite size, so the
       auto margins have nothing left to decide and both pages fill the room.

     · box-sizing:border-box is stated here rather than relied on. style.css's
       `*{box-sizing:border-box}` already gives it, and this line changes
       nothing today — but with an explicit width AND 26px of horizontal
       padding, content-box would make the page overflow by exactly 52px, and a
       rule whose correctness depends on a reset three files away should say so
       out loud. */
.pf-page{box-sizing:border-box;width:min(var(--pf-page-max,2200px),100%);
  max-width:var(--pf-page-max,2200px);margin:0 auto;padding:6px 26px var(--pf-page-bottom,60px)}
.pf-head{flex-wrap:wrap}
.pf-head .ec-sub{max-width:76ch}
.pf-head-actions{display:flex;gap:9px;flex-wrap:wrap;align-items:center;flex:none;padding-top:6px}

/* ---- THE ACCENT ------------------------------------------------------------
   The prototype's primary button is FLAT HOUSE TEAL (#pf button.primary
   {background:var(--teal)}). ui-kit.css paints .ui-btn--primary as
   linear-gradient(135deg,var(--ui-sky),var(--ui-teal)) and --ui-sky is #0ea5e9,
   a bright sky blue — so every primary button in this module (Approve and send
   invoice, Turn into a purchase order, + Manual order, Save changes, Send to
   Praco …) read sky, not teal. The same variable is the .ui-btn focus ring.
   NOTHING HERE OVERRIDES A RULE. It re-values the custom property those rules
   already read, on this module's own surfaces only — the page, the hosted
   views, and the two things that are appended to <body> rather than to the
   page (the trade-client confirm dialogs and this module's overlays). Every
   other RMS module keeps ui-kit.css exactly as it is.
   ------------------------------------------------------------------------- */
.pf-page,.tc-view,.tc-confirm,.pf-overlay{--ui-sky:#075985;--ui-btn-primary-shadow:none}
/* …and the GLOW. ui-kit.css hangs a 0 8px 18px rgba(7,89,133,.22) halo off every
   primary button. The prototype's buttons carry none at all (#pf button
   {box-shadow:none}), and the halo is what makes a full-width Approve button in
   the narrow Decision card read as a heavy navy slab rather than a flat teal
   one. Same pattern as the line above and for the same reason: ui-kit.css now
   reads that shadow from --ui-btn-primary-shadow WITH ITS OWN VALUE AS THE
   FALLBACK, so the five other modules render byte-for-byte as before, and this
   module — and only this module — turns it off. No rule is overridden. */

/* ---- status strip (collapsible, as the prototype's) ----------------------- */
.pf-status{background:#fff;border:1px solid #dbe4ec;border-radius:12px;margin:0 0 18px;overflow:hidden}
.pf-status.err{border-color:#fecaca;background:#fff5f5}
/* the prototype's .stop / .sdots / .sbody / .kvg / .comps */
.pf-status-line{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center;padding:11px 18px;cursor:pointer;user-select:none}
.pf-status-line > b{font-size:13.5px;color:#0f172a}
.pf-sdots{display:flex;gap:16px;flex-wrap:wrap;color:#6b7a89;font-size:12.5px}
.pf-sdots > span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.pf-sbody{border-top:1px solid #eaf0f5;padding:14px 18px;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.pf-kvg{display:grid;grid-template-columns:170px 1fr;gap:5px 12px;font-size:13px;color:#0f172a;align-content:start}
.pf-kvg .k{color:#6b7a89}
.pf-comps{grid-column:1/-1;display:flex;gap:10px;flex-wrap:wrap;align-items:center;border-top:1px dashed #dbe4ec;padding-top:12px}
.pf-comp{background:#f1f5f8;border-radius:8px;padding:6px 10px;font-size:12px;color:#33475b;text-decoration:none}
.pf-comp b{color:#0f172a}
a.pf-comp:hover{background:#e0f2fe}
.pf-dot{width:8px;height:8px;border-radius:50%;flex:none;background:#b9c6cf}
.pf-dot.ok{background:#16a34a}
.pf-dot.warn{background:#d97706}
.pf-dot.bad{background:#dc2626}
.pf-dot.grey{background:#b9c6cf}

/* ---- flat underline section tabs, fused to the sheet ---------------------- */
/* Was raised card-shaped tabs; changed to match the house underline-tab style
   (Vendor Listing Builder's .vlb-tab family). Tab row + panel read as ONE
   continuous card: .pf-stabs owns the card's top border/radius and the single
   hairline rule under the row; .pf-body owns the bottom and has no top border,
   so the two never draw two hairlines. Click handlers, permission gating,
   badge logic and counts are unchanged — only paint. */
.pf-stabs{display:flex;gap:22px;align-items:center;padding:0 18px;position:relative;z-index:1;background:#fff;border:1px solid #dbe4ec;border-bottom:1px solid #eaf0f5;border-radius:12px 12px 0 0}
.pf-stab{appearance:none;border:0;border-bottom:2.5px solid transparent;background:transparent;color:#6b7a89;font:inherit;font-size:13.5px;font-weight:700;padding:13px 0;cursor:pointer;display:inline-flex;align-items:center;gap:6px;margin:0;box-shadow:none;border-radius:0;transition:color .12s,border-color .12s}
.pf-stab:hover{background:transparent;color:#075985;transform:none}
.pf-stab.on{background:transparent;color:#075985;border-bottom-color:#075985}
.pf-stab:focus-visible{outline:2px solid #075985;outline-offset:2px}
.pf-badge{display:inline;background:none;border-radius:0;padding:0;min-width:0;height:auto;color:inherit;opacity:.7;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.pf-body{background:#fff;border:1px solid #dbe4ec;border-top:0;border-radius:0 0 12px 12px;padding:22px;position:relative}
/* The 520px floor is what stops a short list drawing a stub of a sheet. It is
   SCOPED to the state it is for rather than answered by a later rule: with a
   purchase order open the sheet's height is the screen's, and a floor taller
   than the screen is what would make the page scroll. */
html:not(.pf-fit) .pf-body{min-height:520px}

/* ---- inside a tab: KPIs, banners, the segmented switch --------------------- */
.pf-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-bottom:18px}
.pf-kpi{background:#fbfdfe;border:1px solid #dbe4ec;border-radius:9px;padding:15px 16px;min-width:0}
.pf-kpi .n{font-size:25px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums;color:#0f172a}
.pf-kpi .l{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#6b7a89;margin-top:7px}
.pf-kpi .x{font-size:12px;color:#6b7a89;margin-top:3px}
.pf-kpi.warn .n{color:#b45309}
.pf-kpi.bad .n{color:#b42318}
.pf-kpi.good .n{color:#047857}
.pf-loading{color:#b9c6cf}
.pf-banner{background:#fef6e7;border:1px solid #f6e0bb;border-left:4px solid #f0b357;border-radius:9px;padding:13px 16px;margin-bottom:18px;color:#7c4a12;line-height:1.55;display:flex;gap:14px;align-items:center;flex-wrap:wrap;font-size:13.5px}
.pf-banner b{color:#6b3f0d}
.pf-banner .grow{flex:1;min-width:240px}
.pf-banner.bad{background:#fdecea;border-color:#f4cfcb;border-left-color:#e0837a;color:#8f2d22}
.pf-banner.bad b{color:#7a2419}
.pf-banner.info{background:#e0f2fe;border-color:#bae6fd;border-left-color:#075985;color:#075985}
.pf-banner.info b{color:#064e6a}
.pf-seg{display:inline-flex;border:1px solid #dbe4ec;border-radius:999px;background:#f1f5f8;padding:4px;gap:4px;margin-bottom:18px}
.pf-seg-btn{appearance:none;border:0;border-radius:999px;background:transparent;color:#6b7a89;font:inherit;font-size:13px;font-weight:700;padding:8px 18px;cursor:pointer;margin:0;box-shadow:none;display:inline-flex;align-items:center}
.pf-seg-btn:hover{background:rgba(255,255,255,.7);color:#0f172a;transform:none}
.pf-seg-btn.on{background:#fff;color:#0f172a;box-shadow:0 1px 3px rgba(13,36,54,.12)}
.pf-seg-btn .n{margin-left:8px;font-size:11px;font-weight:700;color:#b42318;background:#fdecea;border-radius:999px;padding:1px 8px}
.pf-seg-btn:focus-visible{outline:2px solid #075985;outline-offset:1px}
.pf-ch .pf-seg{margin-bottom:0;padding:3px}
.pf-ch .pf-seg-btn{padding:6px 14px;font-size:12.5px}

/* ---- the card ------------------------------------------------------------- */
.pf-card{background:#fff;border:1px solid #dbe4ec;border-radius:12px;margin-bottom:18px;overflow:hidden}
.pf-ch{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:15px 18px;border-bottom:1px solid #eaf0f5;flex-wrap:wrap}
.pf-ch h3{margin:0;font-size:15px;font-weight:700;color:#0f172a}
.pf-ch .sub{font-size:12px;color:#6b7a89;font-weight:400;margin-left:8px}
.pf-ch-right{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.pf-count{display:inline-block;background:#e0f2fe;color:#075985;border-radius:999px;padding:5px 13px;font-size:12px;font-weight:700;white-space:nowrap}
.pf-gen{display:inline-flex;gap:8px;align-items:center}
.pf-gen input{min-width:0;width:190px;padding:7px 12px;border:1px solid #dbe4ec;border-radius:999px;font:inherit;font-size:12.5px;background:#fff}
.pf-ch-acts{display:inline-flex;gap:8px;align-items:center;flex-wrap:wrap}
.pf-ch-acts:empty{display:none}
.pf-ch-acts .tc-note{margin:0}
/* the hosted list sits DIRECTLY in the card: no inner padding, no inner card */
.pf-card > #pfSlot{padding:0}
/* A HOSTED SUB-VIEW HAS NO CARD AROUND IT. The purchase-order detail brings its
   own back link and its own header card; the module's card header is taken out
   of the DOM by pracoFulfilment.js (hostChrome) while it is up, and .pf-bare
   takes the frame off what is left, so the detail's own cards sit straight on
   the tab sheet as the prototype's poDetail does. A MODIFIER on this sheet's own
   class, not an override of another sheet's rule — the same shape as
   .pf-status.err and .pf-kpi.warn above. The inset rules below are QUALIFIED
   with it rather than answered by a later rule: with no card there is no card
   inset to keep, and the tab sheet's own 22px is the gutter. */
.pf-card.pf-bare{border:0;border-radius:0;overflow:visible;margin-bottom:0;background:transparent}
/* inside the card, a hosted list (.tc-list) runs edge to edge; anything else the
   hosted view draws (a filter bar, a notice, a sub-view's cards) keeps the card's
   18px sides. tradeClients.js sets no margin on these, so nothing is overridden. */
.pf-card:not(.pf-bare) > #pfSlot > .tc-view > :not(.tc-list){margin-left:18px;margin-right:18px}
.pf-card:not(.pf-bare) > #pfSlot > .tc-view > .tc-bar{margin-top:14px}
.pf-card:not(.pf-bare) > #pfSlot > .tc-view > .tc-list + .tc-card{margin-top:18px}
.pf-card:not(.pf-bare) > #pfSlot > .tc-view > .tc-card:last-child,.pf-card:not(.pf-bare) > #pfSlot > .tc-view > .tc-empty:last-child{margin-bottom:18px}
.pf-rows{padding:0 18px}
.pf-row{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:15px 0;border-bottom:1px solid #eaf0f5;font-size:13.5px;color:#0f172a}
.pf-row:last-child{border-bottom:0}
.pf-row b{display:block}
.pf-row p{margin:4px 0 0;color:#6b7a89;font-size:13px;max-width:62ch}
.pf-muted{font-size:12.5px;color:#6b7a89}
.pf-ok{border:1px solid #a9e3c8;background:#d9f5e8;color:#047857;border-radius:9px;padding:11px 14px;font-size:13px;margin:0 0 12px}
.tc-polink{color:#075985;font-weight:700;text-decoration:none}
.tc-polink:hover{text-decoration:underline}

/* ---- PF5 (TASKS 1 + 4): the "Needs a look" card, collapsible ---------------- */
/* The same paint as .pf-banner.info (this is still the pale-blue "something is
   waiting" note), given a card's head/body so it can collapse. NOTHING here
   redefines a .pf-banner rule: these are their own class names, and the banner
   family is untouched. The head is the whole click target, as .pf-status-line
   is; .pf-cand-x is a second way to the same state, never a second state. */
.pf-cand{background:#e0f2fe;border:1px solid #bae6fd;border-left:4px solid #075985;border-radius:9px;margin-bottom:18px;overflow:hidden;color:#075985}
.pf-cand-head{display:flex;align-items:center;gap:10px;padding:12px 16px;cursor:pointer;user-select:none;font-size:13.5px}
.pf-cand-head > b{color:#064e6a;font-size:13.5px}
.pf-cand-head:focus-visible{outline:2px solid #075985;outline-offset:-2px}
.pf-cand-n{background:#fff;border-radius:999px;padding:3px 11px;font-size:12px;font-weight:700;color:#075985;white-space:nowrap}
.pf-cand-x{appearance:none;border:0;background:transparent;color:#075985;font-size:19px;line-height:1;padding:2px 7px;margin:0;border-radius:7px;cursor:pointer;box-shadow:none}
.pf-cand-x:hover{background:#bae6fd;color:#064e6a;transform:none}
.pf-cand-x:focus-visible{outline:2px solid #075985;outline-offset:1px}
.pf-cand-body{border-top:1px solid #bae6fd;background:#eff8ff}
.pf-cand-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:12px 16px;border-top:1px solid #d6ecfb;font-size:13.5px;line-height:1.55}
.pf-cand-row:first-child{border-top:0}
.pf-cand-what{flex:1;min-width:240px}
.pf-cand-what b{color:#064e6a}
.pf-cand-row .pf-muted{color:#3c6f8c}
.pf-cand-acts{display:flex;gap:8px;flex-wrap:wrap;flex:none}

/* ---- overlays: the carrier question, the statement, the PDF ------------------ */
.pf-overlay{position:fixed;inset:0;background:rgba(18,28,44,.45);display:flex;align-items:flex-start;justify-content:center;z-index:1200;padding:40px 14px;overflow:auto}
.pf-dialog{background:#fff;border-radius:18px;padding:22px 24px;width:min(560px,100%);box-shadow:0 18px 50px rgba(10,25,50,.25)}
.pf-dialog h3{margin:0 0 8px;font-size:17px;font-weight:700;color:#0f172a}
.pf-dialog .pf-kpis{margin:12px 0 0}
.pf-kpis--3{grid-template-columns:repeat(3,1fr)}
.pf-dialog-btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.pf-viewer{background:#fff;border-radius:18px;width:min(960px,100%);height:min(88vh,1100px);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 18px 50px rgba(10,25,50,.25)}
.pf-viewer-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid #eaf0f5;font-size:13.5px;color:#0f172a}
.pf-viewer-frame{flex:1;border:0;width:100%;background:#f1f5f9}
.pf-viewer > .pf-muted{padding:20px}

/* ---- v5: A PURCHASE ORDER IS OPEN — THE PAGE STOPS SCROLLING ---------------
   html.pf-fit is put on by pracoFulfilment.js (poFocus) when TradeClients says
   a purchase-order detail is up, and taken off the moment it closes, the tab
   changes or the page is rebuilt.

   THIS IS ONLY THE HEIGHT CHAIN. Every element between <html> and the tab
   sheet has to say "you may be this tall" or the one that doesn't passes
   auto-height down and the page scrolls again — which is why each of these
   eight lines exists and why they are boring. The DETAIL's own end of the
   chain (.tc-fitview, .tc-pofit, the three columns) is in tradeClients.js's
   own sheet; nothing here touches a .tc-* rule.

   THE PAGE HEADER AND STATUS STRIP ARE NOT HIDDEN HERE. They are taken OUT of
   the DOM by poFocus, the same way the hosted card header already is — .ec-head
   is display:flex from style.css and a display:none of mine would only be
   winning an argument with it. The tabs stay.
   Desktop only: the mobile block below is where three columns become one, and
   a phone page scrolls like every other screen in this module.
   ------------------------------------------------------------------------- */
@media (min-width:1181px){
  html.pf-fit,html.pf-fit body{height:100%;overflow:hidden}
  html.pf-fit .layout{height:100vh;min-height:0}
  html.pf-fit .main{height:100vh;min-height:0;display:flex;flex-direction:column;overflow:hidden}
  html.pf-fit .main > #pracoFulfilment{flex:1;min-height:0;display:flex;flex-direction:column}
  html.pf-fit #pracoFulfilmentRoot{flex:1;min-height:0;display:flex;flex-direction:column}
  /* DEFECT 3(a). THE REVIEW PAGE NO LONGER SETS A CEILING OF ITS OWN. It used
     to say --pf-page-max:1640px here while the list kept 1,360px, which is the
     two-ceilings mistake the rule above describes — the two pages could not
     measure the same because they were never asked to. Both now use the one
     2,200px ceiling .pf-page states, and the explicit width up there is what
     makes this flex item actually take it. Only the bottom padding is still
     re-valued, because a page that does not scroll needs no room under it. */
  html.pf-fit .pf-page{--pf-page-bottom:0;flex:1;min-height:0;display:flex;flex-direction:column}
  html.pf-fit .pf-body{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;padding-bottom:14px}
  html.pf-fit .pf-body > .pf-card.pf-bare{flex:1;min-height:0;display:flex;flex-direction:column}
  html.pf-fit .pf-body > .pf-card.pf-bare > #pfSlot{flex:1;min-height:0;display:flex;flex-direction:column}
  html.pf-fit .pf-stabs{flex:none}
}

/* ---- mobile (the house breakpoint): ONE block, LAST -------------------------- */
@media (max-width:1180px){
  .pf-page{padding:4px 14px 40px}
  .pf-head-actions{width:100%;padding-top:0;margin-bottom:10px}
  .pf-head-actions .ui-btn{flex:1 1 auto}
  .pf-status-line{gap:10px;padding:10px 14px}
  .pf-status-line > span{white-space:normal}
  .pf-stabs{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;gap:16px;padding:0 14px}
  .pf-stab{padding:11px 0;font-size:12.5px;white-space:nowrap}
  .pf-body{padding:14px;min-height:0}
  .pf-kpis{grid-template-columns:1fr 1fr}
  .pf-ch{padding:13px 14px}
  .pf-row{display:block}
  .pf-row .ui-btn,.pf-row .pf-muted{display:inline-block;margin-top:10px}
  .pf-gen{width:100%}
  .pf-gen input{flex:1;width:auto}
  /* PF5 (TASK 4): the candidate card stacks; its actions go full width. */
  /* v5: the header is five things in a row — the title, the count, a spacer,
     "Re-check these" and the ×. On a 390px screen that row is 4px too wide and
     the card (overflow:hidden) cut the × off. It wraps here; the rule it is
     adding to is this sheet's own .pf-cand-head, and only at this width. */
  .pf-cand-head{padding:11px 14px;flex-wrap:wrap}
  .pf-cand-row{display:block;padding:12px 14px}
  .pf-cand-acts{margin-top:10px}
  .pf-cand-acts .ui-btn{flex:1 1 auto}
  .pf-viewer{height:92vh;border-radius:12px}
}