/* Products workspace (js/products.js): the order screen's layout (.jv: header, catalogue tree, list, right column), scoped to .pv.
   Photos sit on a light neutral tile in both themes: cut-outs and whole photos look alike, and black gear stays readable. */
.pv { --tile: #f3f3f1; --tile-line: rgba(0, 0, 0, .06); }
/* list first: groups | list, and the chosen product opens as a third column beside the list (no empty column when none is chosen) */
.view.job .jv.pv { grid-template-columns: minmax(0, 1fr); }   /* the page is never wider than the screen (a long tab row scrolls instead) */
.view.job .jv.pv .jmain { grid-template-columns: 264px minmax(0, 1fr); grid-row: 2; }   /* always the filling row, also when the title row above is empty (moved into the top bar) */
.view.job .jv.pv .jmain.navoff { grid-template-columns: 40px minmax(0, 1fr); }
/* the chosen product: a panel over the right side of the list, so the list never moves or reflows (its names stay in view) */
.pv .jmain { position: relative; transition: none; }
.pv:not(.pvsel) .jmain > .pvdetcol { display: none; }
.view.job .jv.pv .jmain > .pvdetcol { position: absolute; top: 0; right: 0; bottom: 0; width: min(700px, 60%); z-index: 6; background: var(--surface);
  border-left: 1px solid var(--line); box-shadow: -14px 0 32px rgba(15, 15, 20, .09); animation: pvin .16s ease-out; }
@media (prefers-reduced-motion: reduce) { .pv .pvdetcol { animation: none; } }
.pv .pvr:focus { outline: none; } .pv .pvr:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pv .pvclose { position: absolute; top: 12px; right: 14px; z-index: 4; }
.pv .jhead .sub a { color: var(--muted); text-decoration: none; } .pv .jhead .sub a:hover { color: var(--accent); }

/* photo tile (list, header, unit panel) */
.ptile { flex: none; width: 40px; height: 40px; border-radius: 8px; background: var(--tile, #f3f3f1); box-shadow: inset 0 0 0 1px var(--tile-line, rgba(0,0,0,.06));
  display: grid; place-items: center; overflow: hidden; color: #b4b4ae; }
.ptile img { width: 100%; height: 100%; object-fit: contain; }

/* middle: product rows with a thumbnail */
/* middle: filters, then the list as a compact table (columns drop out as the column narrows) */
.ptile.sm { width: 28px; height: 28px; border-radius: 6px; } .ptile.sm svg { width: 14px; height: 14px; }
.pv .pvlistcol { container: pvl / inline-size; display: flex; flex-direction: column; min-height: 0; }
.pv .pvfilters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 16px 6px; }
.pv .pvfilters .sb { flex: 1 1 240px; min-width: 200px; height: 34px; }
.pv .pvfilters .seg { flex: none; } .pv .pvfilters .pvnew { margin-left: auto; height: 34px; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; padding: 0 13px 0 11px; font-weight: 600; }   /* like the top bar's Job button */
.pv .pvfilters .pvnew svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; transition: transform .15s; }
.pv .pvfilters .pvnew:hover svg { transform: rotate(-6deg); }
@media (prefers-reduced-motion: reduce) { .pv .pvfilters .pvnew svg { transition: none; } } .pv .pvfilters .seg button { white-space: nowrap; }
.pv .pvlhead { display: flex; align-items: baseline; gap: 10px; padding: 10px 16px 6px; }
.pv .pvlhead h2 { margin: 0; font-size: 15px; font-weight: 600; } .pv .pvlhead span { font-size: 12.5px; }
.pv .pvlistcol > .scroll { flex: 1; min-height: 0; overflow: auto; padding: 0 8px 24px; }
.view.job .jv.pv .jmain > .col .scroll { max-height: none; }   /* the order screen caps its middle list on narrower screens; Products shows one column at a time there */
.pv .pvr { display: grid; grid-template-columns: minmax(0, 1fr) 64px 86px 78px 86px 84px; align-items: center; column-gap: 10px; padding: 4px 8px; min-height: 40px;
  border-radius: 7px; color: inherit; text-decoration: none; }
.pv .pvr:not(.pvth):hover { background: var(--hover); } .pv .pvr.on { background: var(--accent-bg); } .pv .pvr.on .pvn b { color: var(--accent); }
.pv .pvr.off .pvn b { color: var(--muted); }
.pv .pvr .c { min-width: 0; } .pv .pvr .c-o, .pv .pvr .c-f, .pv .pvr .c-w, .pv .pvr .c-p { text-align: right; } .pv .pvr .c-w { white-space: nowrap; }
.pv .pvr .c-n { display: flex; align-items: center; gap: 10px; } .pv .pvr .c-m { font-size: 12px; }
.pv .pvn { display: grid; min-width: 0; line-height: 1.3; } .pv .pvn b { font-weight: 500; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv .pvn small { color: var(--muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv .pvth { min-height: 30px; margin: 0 8px; padding: 0 8px; border-bottom: 1px solid var(--line); border-radius: 0; }
.pv .pvth button { all: unset; cursor: pointer; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.pv .pvth button:hover, .pv .pvth button.on { color: var(--text); } .pv .pvth button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.pv .pvth button i { font-style: normal; margin-left: 3px; } .pv .pvth .c-n { padding-left: 38px; }
.pv:not(:has(.pvth .c-p)) .pvr { grid-template-columns: minmax(0, 1fr) 64px 86px 78px 84px; }
@container pvl (max-width: 700px) { .pv .pvr .c-m { display: none; } .pv .pvr { grid-template-columns: minmax(0, 1fr) 56px 80px 72px 80px !important; } }
@container pvl (max-width: 600px) { .pv .pvr .c-w { display: none; } .pv .pvr { grid-template-columns: minmax(0, 1fr) 56px 80px 80px !important; } }
@container pvl (max-width: 700px) { .pv:not(:has(.pvth .c-p)) .pvr { grid-template-columns: minmax(0, 1fr) 56px 80px 72px !important; } }   /* roles without prices */
@container pvl (max-width: 600px) { .pv:not(:has(.pvth .c-p)) .pvr { grid-template-columns: minmax(0, 1fr) 56px 80px !important; } }
@container pvl (max-width: 520px) { .pv .pvr .c-p { display: none; } .pv .pvr { grid-template-columns: minmax(0, 1fr) 56px 80px !important; } }

/* left: folders and groups, plain counts, long names wrap */
.pv .pvtree .tree-row { align-items: flex-start; padding: 5px 6px 5px 0; }
.pv .pvtree .tree-row .tl { white-space: normal; line-height: 1.3; }
.pv .pvtree .tree-row .tw { margin-top: -1px; }
.pv .pvtree .tree-row .cnt { border: 0; background: none; padding: 0 4px; min-width: 0; font: 500 11.5px var(--mono); }
.pv .pvtree .tree-row.fold .tl { font-weight: 600; color: var(--text); } .pv .pvtree .tree-row.on .tl { color: var(--accent); }

/* right: the chosen product */
.pv .col:last-child > .scroll { padding: 0 0 32px; }
.pv .pvhead { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 20px; align-items: center; padding: 20px 24px 14px; }
.pv .pvphoto { width: 132px; height: 132px; border-radius: 14px; background: var(--tile); box-shadow: inset 0 0 0 1px var(--tile-line); display: grid; place-items: center; overflow: hidden; color: #a9a9a3; }
.pv .pvphoto img { width: 100%; height: 100%; object-fit: contain; }
.pv .pvphoto.none { display: flex; flex-direction: column; gap: 4px; justify-content: center; align-items: center; font-size: 11px; }
.pv .pvphoto.big { width: 100%; max-width: 280px; height: auto; aspect-ratio: 1; margin-bottom: 12px; }
.pv .pvtitle h1 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -.015em; line-height: 1.25; }
.pv .pvtitle .sub { margin-top: 4px; color: var(--muted); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pvstats { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 14px; }
.pvstats .stat small { display: block; color: var(--muted); font-size: 11px; margin-bottom: 1px; }
.pvstats .stat b { font-size: 16px; font-weight: 600; letter-spacing: -.01em; } .pvstats .stat b.bad { color: var(--red); }
.pv .pvtabs { padding: 0 20px; margin-bottom: 0; position: sticky; top: 0; background: var(--surface); z-index: 3; }
.pv .pvbody { padding: 16px 24px 0; }
.pv .pvcard { margin-bottom: 14px; }
.pv .pvcard h2 { font-size: 13px; }
.pv .pvbody .tbl { font-size: 13px; } .pv .tbl tr.off td { color: var(--muted); } .pv .tbl .neg { color: var(--red); }
.pv .pvdet { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); gap: 14px; align-items: start; }
.pv .pvdet > .pvcard:first-child { grid-row: span 2; }
.pv .pvdet .form { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.pv .danger-zone h2 { color: var(--red); }
@container (max-width: 1100px) { .pv .pvdet { grid-template-columns: minmax(0, 1fr); } .pv .pvdet > .pvcard:first-child { grid-row: auto; } }

/* stock (bulk) */
.pv .pvqty > b { font-size: 30px; font-weight: 600; letter-spacing: -.02em; display: block; margin-bottom: 10px; }
.pv .pvqrow { display: flex; gap: 8px; flex-wrap: wrap; } .pv .pvqrow #sqN { width: 110px; } .pv .pvqrow #sqWhy { flex: 1; min-width: 200px; }
.pv .input.sm { width: 80px; height: 28px; }

/* calendars: the order screen's timeline (.tl) over six weeks; units as clickable rows */
.pv .pvcalbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.pv .pvcalbar .nav { margin-left: auto; display: flex; gap: 4px; } .pv .pvcalbar .grow + .btn { margin-left: 0; }
.pv .pvcalbar .seg + .nav { margin-left: 8px; }
.pv .tl.pvcal { grid-template-columns: 128px repeat(var(--days), minmax(13px, 1fr)); row-gap: 3px; overflow-x: auto; }
.pv .tl.pvcal .dh { font-size: 11px; position: relative; } .pv .tl.pvcal .dh i { position: absolute; top: -13px; left: 0; font-style: normal; color: var(--text-2); font-weight: 600; white-space: nowrap; }
.pv .tl.pvcal { padding-top: 14px; }
.pv .tl.pvcal .fr { font-size: 11px; padding: 3px 0; }
.pv .tl.pvcal .lab a { color: var(--text-2); text-decoration: none; font-family: var(--mono); } .pv .tl.pvcal .lab a:hover { color: var(--accent); }
.pv .tl.pvcal .bar { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 40%, transparent); color: var(--text); font-size: 11px; height: 20px; }
.pv .tl.pvcal .bar.quote { background: var(--amber-bg); border: 1px dashed var(--amber); color: var(--text); }
.pv .tllegend i { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.pv .tllegend i.q { background: var(--amber-bg); border: 1px dashed var(--amber); }
.pv .tl.pvcal .bar.rep { background: var(--red-bg); color: var(--red); border-color: color-mix(in srgb, var(--red) 35%, transparent); }
.pv .tl.pvcal .bar.past { background: var(--hover); color: var(--muted); border: 1px solid var(--line); }
.pv .tl.units .urow { position: relative; z-index: 0; min-height: 26px; border: 1px solid transparent; border-radius: 6px; background: transparent; padding: 0; cursor: pointer; }
.pv .tl.units .urow:hover { background: var(--hover); border-color: var(--line); }
.pv .tl.units .urow:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pv .tl.units .ulab, .pv .tl.units .bar { position: relative; z-index: 1; pointer-events: none; align-self: center; }
.pv .tl.units .ulab { padding-left: 8px; color: var(--text); font-size: 12px; } .pv .tl.units .ulab b { font-weight: 500; }
.pv .tl.units .bar { height: 18px; font-size: 11px; }
.pv .vdot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--red); margin-left: 4px; }
.pv .tllegend i.r { background: var(--red-bg); border-color: color-mix(in srgb, var(--red) 35%, transparent); }
.pv .tllegend i.p { background: var(--hover); }

/* unit panel: slides in from the right over the page */
.layer.side { justify-items: end; }
.pvdrawer { width: min(620px, 100vw); height: 100%; overflow: auto; background: var(--surface); border-left: 1px solid var(--line); box-shadow: var(--shadow); padding: 18px 22px 28px;
  animation: pvin .18s ease-out; }
@keyframes pvin { from { transform: translateX(24px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pvdrawer { animation: none; } }
.pvdrawer .dhead { display: flex; align-items: flex-start; gap: 12px; justify-content: space-between; }
.pvdrawer .dhead h2 { margin: 0; font-size: 18px; font-weight: 600; }
.pvdrawer h3 { margin: 22px 0 8px; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.pvdrawer .tbl { font-size: 12.5px; } .pvdrawer .tbl td { padding: 7px 10px; }
.pvdrawer .row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; align-items: center; } .pvdrawer .grow { flex: 1; }
.pvdrawer .form { grid-template-columns: 1fr 1fr; }
.pvdrawer .utime { margin-top: 18px; }
.ustrip { position: relative; height: 26px; border-radius: 6px; background: var(--hover); overflow: hidden; margin-top: 14px; }
.ustrip i { position: absolute; top: 5px; bottom: 5px; border-radius: 2px; background: var(--accent); opacity: .75; min-width: 2px; }
.ustrip .ty { position: absolute; top: -1px; bottom: 0; border-left: 1px solid var(--line-strong); padding-left: 3px; font-size: 11px; color: var(--muted); }
.pvdlg { max-width: 520px; } .pvdlg .form { grid-template-columns: 1fr 1fr; margin: 10px 0 14px; }

/* narrow screens (phone, small tablet): one column at a time, the list or the chosen product */
.pv .pvback { display: none; }
@container (max-width: 900px) {
  .pv .jmain, .pv .jmain.navoff { grid-template-columns: minmax(0, 1fr) !important; }
  .view.job .jv.pv .jmain > .pvdetcol { position: static; width: auto; box-shadow: none; border-left: 0; animation: none; }
  .pv .jmain > .col:first-child { display: none; }
  .pv.pvsel .jmain > .col:nth-child(2), .pv:not(.pvsel) .jmain > .col:last-child { display: none; }
  .pv .pvback { display: inline-flex; margin: 12px 16px 0; } .pv .pvclose { display: none; }
  .pv .pvhead { grid-template-columns: 88px minmax(0, 1fr); gap: 14px; padding: 12px 16px; }
  .pv .pvphoto { width: 88px; height: 88px; }
  .pv .pvtitle h1 { font-size: 16px; } .pvstats { gap: 16px; }
  .pv .pvtabs { padding: 0 8px; overflow-x: auto; flex-wrap: nowrap; } .pv .pvtabs button { white-space: nowrap; }
  .pv .pvbody { padding: 12px 12px 0; }
  .pv .tl.pvcal { grid-template-columns: 92px repeat(var(--days), minmax(16px, 1fr)); }
  .pv .jhead { padding: 10px 16px; } .pv .pvtop { padding: 14px 16px 0; }
}
@container (max-width: 900px) { .pv.pvsel .jhead, .pv.pvsel .pvtop { display: none; } }

/* stock history: who made the change (js/products.js moveBy) */
.pv .pvbody .tbl td:has(> .mvby) { min-width: 150px; }
.mvby { white-space: nowrap; }
/* product page: out of service (each row opens its quarantine card) */
.pvq h2 { display: flex; align-items: center; gap: 8px; } .pvq h2 .grow { flex: 1; }
.pvqrow { all: unset; box-sizing: border-box; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; padding: 10px 6px; border-top: 1px solid var(--line); cursor: pointer; border-radius: 8px; }
.pvqrow:hover { background: var(--hover); } .pvqrow:focus-visible { outline: 2px solid var(--accent); }
.pvqph { position: relative; width: 52px; height: 52px; border-radius: 8px; overflow: hidden; background: var(--hover); border: 1px solid var(--line); }
.pvqph img { width: 100%; height: 100%; object-fit: cover; display: block; } .pvqph i { position: absolute; right: 2px; bottom: 2px; font: 600 11px var(--font); font-style: normal; background: var(--surface); border-radius: 4px; padding: 0 3px; }
.pvqmain { display: grid; gap: 3px; min-width: 0; } .pvqline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pvqnote { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pvqgo { color: var(--muted); font-size: 18px; }
.pvqpast { margin: 6px 0 0; }
.pvoosgo { all: unset; cursor: pointer; font: inherit; font-weight: 600; color: var(--red); text-decoration: underline; text-underline-offset: 3px; } .pvoosgo:focus-visible { outline: 2px solid var(--accent); }
.pvcal .bar.rep[data-q] { cursor: pointer; } .pvoos .pvq { margin-bottom: 14px; }
.pvq button.pvqrow { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; }

/* the product panel (about 700 px on wide screens): its sections laid out for that width */
.pvqrow.noph, .pvq button.pvqrow.noph { grid-template-columns: minmax(0, 1fr) auto; }
.pv .pvdetcol .pvdet { grid-template-columns: minmax(0, 1fr) 190px; gap: 12px; }
.pv .pvdetcol .pvdet .form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pv .pvdetcol .pvphoto.big { max-width: 100%; }
.pv .pvdetcol .rec { grid-template-columns: minmax(0, 1fr); }
.pv .pvdetcol .pvdet .btn { white-space: normal; height: auto; min-height: 32px; padding-top: 6px; padding-bottom: 6px; text-align: center; max-width: 100%; }   /* "Delete <long name>" wraps in the narrow column */
.pv .pvdetcol .tscroll { overflow-x: auto; }
.pv .pvdetcol .kited .sel { max-width: 128px; } .pv .pvdetcol .kited .qty { width: 58px; } .pv .pvdetcol .kited td, .pv .pvdetcol .kited th { padding-left: 6px; padding-right: 6px; }
@container (max-width: 640px) { .pv .pvdetcol .pvdet, .pv .pvdetcol .pvdet .form { grid-template-columns: minmax(0, 1fr); } .pv .pvdet > .pvcard:first-child { grid-row: auto; } }   /* phones: one column */

/* text sizes as on Products › Categories: 13 px names and figures, 12 px secondary lines */
.pv .pvtree .tree-row .tl { font-size: 13px; }
.pv .pvtree .tree-sep { font-size: 11.5px; }
.pv .pvr .c-o, .pv .pvr .c-f, .pv .pvr .c-w, .pv .pvr .c-p { font-size: 13px; } .pv .pvr .c-m { font-size: 12.5px; }
.pv .pvr .c-f .pill { font-size: 12px; }
.pv .pvn small { font-size: 12px; }
/* Type + Show: side by side on wide screens; on phones one Filter button opens them */
.pv .pvfbtn { display: none; } .pv .pvfpop { display: contents; } .pv .pvfpop > small { display: none; }
@media (max-width: 600px) {
  .pv .pvfilters { position: relative; }
  .pv .pvfbtn { display: inline-flex; order: 2; align-items: center; gap: 6px; height: 34px; padding: 0 12px; max-width: 100%; font-weight: 500; }
  .pv .pvfbtn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; flex: none; }
  .pv .pvfbtn b { font-weight: 500; color: var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pv .pvfbtn b:empty { display: none; }
  .pv .pvfbtn b::before { content: "· "; color: var(--muted); }
  .pv .pvfbtn.set { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
  .pv .pvfpop { display: none; position: absolute; z-index: 20; left: 12px; right: 12px; top: calc(100% + 2px); padding: 10px 12px 12px; background: var(--surface);
    border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
  .pv .pvfpop.open { display: grid; gap: 6px; }
  .pv .pvfpop > small { display: block; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; }
  .pv .pvfpop .seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; max-width: none; overflow: visible; } .pv .pvfpop .seg button { min-height: 36px; padding: 0 6px; }
}

/* a unit found by its number in the search: its product row shows the unit (click opens it) */
.pvunits { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.pvunit { border: 1px solid var(--line-strong); background: var(--surface); border-radius: 5px; padding: 0 6px; font: 500 11.5px var(--mono); color: var(--text-2); cursor: pointer; line-height: 18px; }
.pvunit:hover { border-color: var(--accent); color: var(--accent); } .pvunit.ex { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); } .pvunit.off { text-decoration: line-through; }
.pvdrawer .dact { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }

.pvew { display: block; margin-top: 2px; } .pvew .pvelse { font-size: 12px; }   /* Owned at the Working at warehouse: the others that have it */
/* Details tab: the order screen's grid .row (job.css .jv .row) is not for these button rows; fields in one row keep their inputs level when a
   label next to them wraps (the input is not stretched, labels sit on top of it) */
.pv .pvdet .row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0; margin-top: 6px; }
.pv .pvdet .form .field { align-content: end; }
.pv .pvdet .form .check { margin: 2px 0 8px; }
.pv .pvdet .pvcard > .row:last-child { margin-top: 10px; }
.pv .pvdet .mtrow .field { align-content: end; }
.pv .pvdet { grid-template-rows: auto 1fr; }   /* the side column stacks: Photo, then Delete right under it (the slack goes below) */
.pv .pvactive.off { border-color: var(--line-strong); background: var(--surface-2, var(--surface)); }
.pv .pvdet > .pvphotoed, .pv .pvdet > .pvactive, .pv .pvdet > .danger-zone { grid-column: -2; }   /* the side cards stay in the side column */
@container (max-width: 640px) { .pv .pvdetcol .pvdet > .pvphotoed, .pv .pvdetcol .pvdet > .pvactive, .pv .pvdetcol .pvdet > .danger-zone { grid-column: auto; } }
.pv .pvrate { min-height: 34px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }