/* Job (order) screen, scoped to .jv. Shared controls (buttons, fields, pills, segmented control, calendar) live in app.css and workspace.css */

.jv button, .jv input, .jv select, .jv textarea { font: inherit; color: inherit; }
.jv button { cursor: pointer; }
.jv input::-webkit-outer-spin-button, .jv input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.jv input[type=number] { -moz-appearance: textfield; appearance: textfield; }

/* ---------- header ---------- */
.jv .jhead { background: var(--surface); border-bottom: 1px solid var(--line); padding: 14px 24px; display: flex; align-items: center; gap: 28px; }
.jv .title { min-width: 0; }
.jv .title h1 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -.01em; display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.jv .title h1 .no { color: var(--muted); font-weight: 500; }
.jv .title .sub { margin-top: 3px; color: var(--muted); display: flex; gap: 8px; align-items: center; white-space: nowrap; }
.jv .chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border: 1px solid var(--line); border-radius: 6px; color: var(--text-2); background: var(--surface); }
.jv .pill.num { min-width: 42px; justify-content: center; font-family: var(--mono); font-size: 11px; }
.jv .hstats { margin-left: auto; display: flex; align-items: center; gap: 24px; }
/* the order screen's header in two rows: title + Booking / Warehouse / Chat / Files / Access; totals + Save + the job's actions */
.jv .jhead.jhead2 { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 24px; position: relative; z-index: 5; }   /* above the columns, so the Print menu shows */
.jv .jhead2 .jrow { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; }
.jv .jhead2 .jrow > .title { flex: 1 1 auto; }
.jv .jhead2 .hstats { margin-left: 0; flex-wrap: wrap; gap: 8px 16px; }
.jv .jhead2 .jacts { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.jv .jhead2 .jacts .btn { white-space: nowrap; padding: 0 9px; }
.jv .stat small { display: block; color: var(--muted); font-size: 11px; margin-bottom: 1px; }
.jv .stat b { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.jv .stat input { width: 46px; border: 0; border-bottom: 1px dashed var(--line-strong); background: transparent; font-size: 15px; font-weight: 600; padding: 0; outline: none; }
.jv .stat input:focus { border-bottom-color: var(--accent); }

/* ---------- layout ---------- */
.jv .jmain { display: grid; grid-template-columns: 248px minmax(380px, 1fr) minmax(600px, 1.4fr); min-height: 0; }
.jv .col { min-height: 0; display: flex; flex-direction: column; border-right: 1px solid var(--line); }
.jv .col:last-child { border-right: 0; background: var(--surface); }
.jv .colhead { padding: 14px 16px 10px; display: flex; align-items: baseline; gap: 8px; }
.jv .colhead h2 { margin: 0; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.jv .colhead .meta { color: var(--muted); }
.jv .scroll { overflow: auto; flex: 1; min-height: 0; }

/* ---------- left: navigation ---------- */
.jv .nav { padding: 4px 8px 16px; }
.jv .tree-row { display: flex; align-items: center; gap: 2px; padding: 4px 6px 4px 0; border-radius: 6px; color: var(--text-2); cursor: pointer; }
.jv .tree-row:hover { background: var(--hover); color: var(--text); }
.jv .tree-row.on { background: var(--accent-bg); color: var(--accent); font-weight: 500; }
.jv .tree-row .tw { flex: none; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 4px; color: var(--muted); transition: transform .15s; }
.jv .tree-row .tw.open { transform: rotate(90deg); }
.jv .tree-row .tw:hover { background: var(--line); color: var(--text); }
.jv .tree-row .tl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jv .tree-row .cnt { flex: none; min-width: 26px; padding: 0 6px; border: 1px solid var(--line); border-radius: 999px; font-size: 11px; color: var(--muted); text-align: center; background: var(--surface); }
.jv .tree-row.on .cnt { border-color: transparent; color: var(--accent); background: var(--surface); }
.jv .tree-kids { margin-left: 12px; }
.jv .tree-sep { margin: 12px 8px 4px; font-size: 11px; color: var(--muted); font-weight: 500; }
.jv .nav .sec { margin: 14px 8px 4px; font-size: 11px; color: var(--muted); font-weight: 500; }
.jv .ni { display: flex; justify-content: space-between; align-items: center; padding: 5px 8px; border-radius: 6px; color: var(--text-2); cursor: pointer; }
.jv .ni:hover { background: var(--hover); color: var(--text); }
.jv .ni.on { background: var(--surface); color: var(--text); font-weight: 500; box-shadow: 0 0 0 1px var(--line); }
.jv .ni .c { color: var(--muted); font-size: 11.5px; }
.jv .ni.subitem { padding-left: 20px; font-size: 12.5px; }

/* ---------- middle: catalogue ---------- */
.jv .searchbox { padding: 12px 16px 8px; }
.jv .sb { display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 38px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface); }
.jv .sb:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.jv .sb svg { flex: none; color: var(--muted); }
.jv .sb input { flex: 1; border: 0; outline: none; background: transparent; font-size: 13.5px; }
.jv .sb kbd { font: 11px var(--font); color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; }
.jv .hint { color: var(--muted); font-size: 11.5px; padding: 6px 2px 0; }
.jv .cat { padding: 0 8px 16px; }
.jv .ci { display: grid; grid-template-columns: 1fr auto auto 26px; align-items: center; gap: 12px; padding: 7px 8px; border-radius: 6px; cursor: pointer; }
.jv .ci:hover, .jv .ci.hl { background: var(--hover); box-shadow: 0 0 0 1px var(--line); }   /* tinted, so it stands off the white panel */
.jv .ci .n { min-width: 0; }
.jv .ci .n div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jv .ci .n .g { color: var(--muted); font-size: 11.5px; }
.jv .ci .pr { color: var(--text-2); }
.jv .addbtn { width: 26px; height: 26px; border-radius: 6px; border: 1px solid transparent; background: transparent; color: var(--muted); display: grid; place-items: center; opacity: 0; }
.jv .ci:hover .addbtn, .jv .ci.hl .addbtn { opacity: 1; border-color: var(--line); background: var(--surface); color: var(--accent); }
.jv .addbtn:hover { background: var(--accent) !important; color: var(--on-accent) !important; border-color: var(--accent) !important; }
.jv .empty { padding: 40px 16px; text-align: center; color: var(--muted); }

/* ---------- right: order ---------- */
.jv .ohead { display: flex; align-items: center; gap: 10px; padding: 14px 20px 10px; }
.jv .ohead .meta { color: var(--muted); }
.jv .ohead .right { margin-left: auto; display: flex; gap: 8px; }
.jv .bulk { display: none; align-items: center; gap: 10px; margin: 0 20px 8px; padding: 6px 8px 6px 12px; border-radius: var(--r); background: var(--inv-bg); color: var(--inv-text); flex-wrap: wrap; }
.jv .bulk.on { display: flex; }
.jv .bulk b { font-weight: 500; margin-right: 2px; white-space: nowrap; }
.jv .bulk .btn { white-space: nowrap; padding: 0 8px; }
.jv .bulk { gap: 6px !important; }
.jv .bulk .btn, .jv .batch .btn { background: transparent; color: var(--inv-text); border-color: var(--inv-line); }
.jv .bulk .btn:hover, .jv .batch .btn:hover { border-color: var(--inv-muted); }
.jv .bulk input { width: 64px; height: 28px; border-radius: 6px; border: 1px solid var(--inv-line); background: transparent; color: var(--inv-text); padding: 0 8px; outline: none; font-family: var(--mono); font-size: 12px; }
.jv .bulk input:focus { border-color: var(--inv-text); }
.jv .bulk input::placeholder { color: var(--inv-muted); font-family: var(--font); }
.jv .bulk .x { margin-left: auto; }

.jv .grid { --cols: 26px minmax(200px, 1fr) 96px 52px 46px 56px 48px 74px 22px; }   /* tick, item, status, qty, days, price, disc, total, remove */
.jv .row, .jv .thead { display: grid; grid-template-columns: var(--cols); align-items: center; column-gap: 6px; padding: 0 16px 0 20px; }
.jv.noprice .grid { --cols: 26px minmax(200px, 1fr) 96px 52px 46px 22px; }
.jv.noprice .money { display: none !important; }
.jv .thead { position: sticky; top: 0; z-index: 3; height: 32px; background: var(--surface); border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11.5px; font-weight: 500; }
.jv .r { text-align: right; }
.jv .ghead { position: sticky; top: 32px; z-index: 2; display: flex; justify-content: space-between; align-items: center; padding: 4px 20px 4px 56px; min-height: 0; line-height: 1.3; background: var(--grp-bg);
  border-top: 1px solid var(--grp-line); border-bottom: 1px solid var(--grp-line); font-size: 11.5px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: .05em; }
.jv .ghead span:last-child { text-transform: none; letter-spacing: 0; font-weight: 500; }
.jv .ghead { padding-left: 20px !important; cursor: default; }
.jv .ghead .grip { left: 6px !important; }
.jv .gt { display: flex; align-items: center; gap: 6px; min-width: 0; }
.jv .gchev { width: 20px; height: 20px; border: 0; background: transparent; color: var(--muted); border-radius: 4px; display: grid; place-items: center; transition: transform .15s; padding: 0; }
.jv .gchev.open { transform: rotate(90deg); }
.jv .hitem { display: flex; align-items: center; gap: 8px; margin-left: -6px; }
.jv .gchev:hover { background: var(--line); color: var(--text); }
.jv .gname { cursor: text; padding: 2px 4px; border-radius: 4px; }
.jv .gname:hover { background: var(--hover); color: var(--text); }
.jv .gin { font: inherit; text-transform: uppercase; letter-spacing: .05em; color: var(--text); border: 1px solid var(--accent); border-radius: 4px; padding: 1px 4px; outline: none; background: var(--surface); width: 260px; }
.jv .gmeta { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--muted); }
.jv .gact { opacity: 0; border: 0; background: transparent; color: var(--muted); font: 500 11.5px var(--font); text-transform: none; letter-spacing: 0; padding: 2px 6px; border-radius: 4px; }
.jv .ghead:hover .gact { opacity: 1; }
.jv .gact:hover { background: var(--hover); color: var(--accent); }
.jv .gempty { padding: 10px 20px 12px 56px; color: var(--muted); font-size: 12px; border-bottom: 1px solid var(--line); }
.jv .row.text .t { display: none; }
.jv .textin { flex: 1; min-width: 0; border: 0; background: transparent; font: italic 13px var(--font); color: var(--text-2); padding: 3px 4px; border-radius: 4px; outline: none; }
.jv .textin:hover { box-shadow: inset 0 0 0 1px var(--line-strong); }
.jv .textin:focus { box-shadow: inset 0 0 0 1.5px var(--accent); background: var(--surface); font-style: normal; }
.jv .tag-text { flex: none; font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 0 5px; }
.jv .row { min-height: 30px; cursor: pointer; }   /* compact lines, no rules between them: the group bands and hover mark the rows */
.jv .row:hover { background: var(--hover); }
.jv .row.open { background: var(--sel); border-bottom-color: transparent; }
.jv .row.sel { background: var(--sel); }
.jv .row.short, .jv .row.short:hover { background: var(--red-bg); }
.jv .row.short .nm .t { color: var(--red); font-weight: 500; }
.jv .notes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 760px; }
.jv .notes label { display: block; font-size: 11.5px; color: var(--muted); margin-bottom: 4px; }
.jv .notes label b { color: var(--text-2); font-weight: 500; }
.jv .panel textarea.wnote:focus { border-color: var(--amber); }
.jv .row.part { min-height: 26px; color: var(--text-2); font-size: 12.5px; }
.jv .row.part .nm { padding-left: 22px; }
.jv .nm { min-width: 0; overflow: hidden; padding: 6px 0; }
.jv .nmline { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; }
/* the client note under a line: a tinted strip so it reads at a glance */
.jv .cnote { display: block; width: fit-content; max-width: calc(100% - 26px); box-sizing: border-box; margin: 3px 0 1px 26px; padding: 2px 9px 2px 8px;
  font-size: 12px; line-height: 1.45; color: var(--text); background: var(--accent-bg); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes flash { 0%, 30% { background: var(--accent-bg); box-shadow: inset 3px 0 0 var(--accent); } 100% { background: transparent; box-shadow: inset 3px 0 0 transparent; } }
.jv .row.flash { animation: flash 2.2s ease-out; }
.jv .ico { flex: 0 0 20px; width: 20px; height: 20px; min-height: 20px; max-height: 20px; align-self: center; box-sizing: border-box; padding: 0; line-height: 0; border-radius: 5px; display: grid; place-items: center; overflow: hidden; }
.jv .ico svg { display: block; width: 11px; height: 11px; flex: none; }
.jv .ico.client { background: var(--accent-bg); color: var(--accent); }
.jv .ico.wh { background: var(--amber-bg); color: var(--amber); }
.jv .nm .t { flex: 0 1 auto; min-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jv .nm .pill, .jv .nm .parts { flex: none; }
.jv .nm .parts { color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.jv .chev { flex: none; width: 18px; height: 18px; display: grid; place-items: center; border: 0; background: transparent; color: var(--muted); border-radius: 4px; transition: transform .15s; padding: 0; }
.jv .chev:hover { background: var(--line); color: var(--text); }
.jv .chev.open { transform: rotate(90deg); }
.jv .chev.spacer { visibility: hidden; }
.jv .cb { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; margin: 0; }
.jv .stepper { display: inline-flex; align-items: stretch; justify-self: end; border: 1px solid transparent; border-radius: 6px; height: 24px; width: 52px; }
.jv .row:hover .stepper, .jv .stepper:focus-within { border-color: var(--line-strong); background: var(--surface); }
.jv .stepper input { width: 36px; border: 0; background: transparent; text-align: right; font-weight: 500; outline: none; padding: 0 4px 0 0; }
/* numbers in the grid and the catalogue in the mono font, like the workspace tables (.num) */
.jv .cell, .jv .stepper input, .jv .tot, .jv .ci .pr, .jv .cq, .jv .ghead .gright .money { font-family: var(--mono); font-size: 12.5px; }
.jv .stepper .arrows { display: flex; flex-direction: column; width: 14px; opacity: 0; }
.jv .row:hover .stepper .arrows, .jv .stepper:focus-within .arrows { opacity: 1; }
.jv .stepper button { flex: 1; border: 0; background: transparent; color: var(--muted); display: grid; place-items: center; padding: 0; font-size: 8px; line-height: 1; }
.jv .stepper button:hover { color: var(--text); background: var(--hover); }
.jv .cell.inh { color: var(--muted); }
.jv .tot { text-align: right; font-weight: 500; }
.jv .free-note { font-size: 11px; }

/* row panel */
.jv .panel { padding: 4px 20px 14px 56px; background: var(--sel); border-bottom: 1px solid var(--line); cursor: default; }
.jv .pcard { display: grid; grid-template-columns: auto 1fr; gap: 14px 24px; align-items: start; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow); }
.jv .plabel { color: var(--muted); font-size: 12px; padding-top: 5px; }
.jv .supwrap { position: relative; max-width: 340px; }
.jv .supin, .jv .substin { width: 100%; }
.jv .suplist { position: absolute; z-index: 5; top: 36px; left: 0; right: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 4px; max-height: 220px; overflow: auto; }
.jv .suplist div { padding: 6px 8px; border-radius: 5px; cursor: pointer; display: flex; justify-content: space-between; }
.jv .suplist div:hover, .jv .suplist div.hl { background: var(--hover); }
.jv .suplist .new { color: var(--violet); }
.jv .subst-opt { display: grid !important; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; }
.jv .subst-opt small { color: var(--muted); }
.jv .subst-opt .was { color: var(--accent); font-size: 11px; }
.jv .keepprice { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; color: var(--muted); font-size: 12px; }
.jv .keepprice input { margin: 0; }
.jv .tlrow { grid-column: 1 / -1; }
.jv .tlhead { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.jv .tlhead b { font-weight: 600; }
.jv .tlhead .nav { margin-left: auto; display: flex; gap: 4px; }
.jv .tlhead .nav button { height: 24px; padding: 0 8px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: var(--text-2); font-size: 12px; }
.jv .tlhead .nav button:hover { border-color: var(--line-strong); color: var(--text); }
.jv .tl { display: grid; grid-template-columns: 132px repeat(var(--days), minmax(30px, 1fr)); row-gap: 3px; font-size: 11px; overflow: hidden; }
.jv .tl .lab { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 8px; align-self: center; }
.jv .tl .dh { text-align: center; color: var(--muted); line-height: 1.15; padding: 2px 0; border-radius: 4px; }
.jv .tl .dh b { display: block; color: var(--text-2); font-weight: 500; }
.jv .tl .dh.we { background: var(--hover); }
.jv .tl .dh.job { background: var(--accent-bg); color: var(--accent); }
.jv .tl .dh.job b { color: var(--accent); }
.jv .tl .fr { text-align: center; font-weight: 600; border-radius: 4px; padding: 3px 0; }
.jv .tl .fr.ok { color: var(--green); } .jv .tl .fr.low { color: var(--amber); background: var(--amber-bg); } .jv .tl .fr.out { color: var(--on-accent); background: var(--red); }
.jv .tl .bar { height: 20px; border-radius: 5px; padding: 0 6px; display: flex; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--hover); color: var(--text-2); border: 1px solid var(--line); }
.jv .tl .bar.quote { border-style: dashed; background: transparent; }
.jv .tl .bar.me { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 500; }
.jv .tl .bar.clipl { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.jv .tl .bar.clipr { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.jv .tl .more { grid-column: 2 / -1; color: var(--muted); }
.jv .tllegend { display: flex; gap: 14px; margin-top: 6px; color: var(--muted); font-size: 11px; }
.jv .tllegend i { display: inline-block; width: 18px; height: 9px; border-radius: 3px; margin-right: 5px; vertical-align: middle; border: 1px solid var(--line); background: var(--hover); }
.jv .tllegend i.q { border-style: dashed; background: transparent; } .jv .tllegend i.m { background: var(--accent); border-color: var(--accent); }
.jv .panel textarea { width: 100%; max-width: 520px; min-height: 52px; resize: vertical; }
.jv .pactions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.jv .seg button.sub.on { color: var(--violet); }
.jv .shortbox { display: flex; gap: 10px; align-items: center; color: var(--red); }
.jv .row { position: relative; }
.jv .grip { position: absolute; left: 4px; top: 50%; transform: translateY(-50%); width: 14px; height: 22px; display: grid; place-items: center;
  color: var(--muted); cursor: grab; opacity: 0; border-radius: 4px; }
.jv .grip:active { cursor: grabbing; }
.jv .row:hover > .grip, .jv .ghead:hover > .grip { opacity: .8; }
.jv .grip:hover { background: var(--line); opacity: 1 !important; }
.jv .ghead .grip { left: 32px; }
.jv .row.part > .grip { display: none; }
.jv .drop-before { box-shadow: inset 0 2px 0 var(--accent); }
.jv .drop-into { background: var(--accent-bg) !important; }
.jv .dragging { opacity: .4; }
.jv #tTotal { width: 104px; }
.jv .stat input.tot-in { font-size: 15px; }
.jv .ci { grid-template-columns: 1fr auto auto 46px 26px !important; }
.jv .cq { width: 46px; height: 26px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); text-align: center; outline: none; opacity: 0; font-weight: 500; }
.jv .ci:hover .cq, .jv .ci.hl .cq, .jv .cq:focus, .jv .cq.has { opacity: 1; }
.jv .cq:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.jv .cq.has { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }
.jv .batch { display: none; align-items: center; gap: 8px; margin: 0 12px 12px; padding: 8px 8px 8px 12px; border-radius: var(--r); background: var(--inv-bg); color: var(--inv-text); }
.jv .batch.on { display: flex; }
.jv .batch span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jv .batch .btn.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.jv input.cell.tot { font-weight: 500; color: var(--text); }
.jv .rmx { width: 24px; height: 24px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: 16px; line-height: 1; padding: 0; opacity: .35; }
.jv .row:hover .rmx { opacity: 1; }
.jv .rmx:hover { background: var(--red-bg); color: var(--red); }
.jv .rmx.armed { opacity: 1; background: var(--red); color: var(--on-accent); }
.jv .row.arming { box-shadow: inset 3px 0 0 var(--red); }
.jv .gpick { margin-right: 2px; }
.jv .ghead.picked { background: var(--accent-bg); }
.jv .target { display: none; margin: 0 16px 8px; padding: 8px 10px; border: 1px solid var(--accent); border-radius: var(--r); background: var(--accent-bg); color: var(--text-2); font-size: 12.5px; }
.jv .target.on { display: block; }
.jv .target b { color: var(--text); font-weight: 600; }
.jv .target .tclear { float: right; border: 0; background: transparent; color: var(--accent); font: 500 12px var(--font); padding: 0 2px; }
.jv .target .tclear:hover { text-decoration: underline; }
.jv .target .seg { margin-top: 6px; }
.jv .target .zp { display: flex; align-items: center; gap: 6px; margin-top: 8px; cursor: pointer; user-select: none; }
.jv .target .zp input { margin: 0; }
.jv button.pill { border: 0; font: 500 11.5px var(--font); cursor: pointer; }
.jv button.pill:hover { filter: brightness(.96); box-shadow: 0 0 0 1px currentColor; }
.jv button.pill.on { box-shadow: 0 0 0 1.5px currentColor; }
.jv .filterbar { display: flex; align-items: center; gap: 10px; margin: 0 20px 8px; padding: 6px 10px; border-radius: var(--r); background: var(--red-bg); color: var(--red); font-size: 12.5px; }
.jv .filterbar.sub { background: var(--violet-bg); color: var(--violet); }
.jv .filterbar .ofcopy { margin-left: auto !important; text-decoration: none !important; border: 1px solid currentColor !important; border-radius: 6px; padding: 2px 8px !important; }
.jv .filterbar .ofclear { margin-left: 8px !important; }
.jv .printwrap .addpop { min-width: 210px; right: 0; top: 34px; }
/* the job's Actions menu: print documents, then send / invoice / copy / access */
.jv .actpop { min-width: 230px; max-height: calc(100vh - 140px); overflow: auto; }
.jv .actpop .pmh { display: block; padding: 6px 10px 2px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.jv .actpop .pmsep { border: 0; border-top: 1px solid var(--line); margin: 4px 2px; }
.jv .discbtn:disabled { opacity: .45; }
.jv .filterbar button { margin-left: auto; border: 0; background: transparent; color: inherit; font: 500 12.5px var(--font); text-decoration: underline; padding: 0; }
.jv .ghead .gright { display: flex; align-items: center; gap: 6px; }
.jv .ghead .grmx { width: 26px; height: 26px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: 15px; line-height: 1; padding: 0; opacity: 0; }
.jv .ghead:hover .grmx { opacity: 1; }
.jv .ghead .grmx:hover { background: var(--red-bg); color: var(--red); }
.jv .ghead .grmx.armed { opacity: 1; background: var(--red); color: var(--on-accent); }
.jv .ghead.arming { box-shadow: inset 3px 0 0 var(--red); }
.jv .addwrap { position: relative; display: grid; place-items: center; }
.jv .addmenu { width: 22px; height: 22px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); color: var(--accent); font-size: 15px; line-height: 1; padding: 0; font-weight: 500; }
.jv .addmenu:hover, .jv .addmenu.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.jv .addpop { position: absolute; top: 28px; right: 0; z-index: 20; min-width: 150px; padding: 4px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow); }
.jv .addpop button { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 7px 10px; border-radius: 6px; color: var(--text); font: 500 12.5px var(--font); text-transform: none; letter-spacing: 0; }
.jv .addpop button:hover { background: var(--hover); }
.jv .subwarn { flex: none; display: grid; place-items: center; color: var(--violet); cursor: help; }
.jv .calc { position: fixed; z-index: 50; pointer-events: none; padding: 9px 12px; border-radius: 8px; background: var(--inv-bg); color: var(--inv-text);
  font-size: 12px; line-height: 1.5; box-shadow: var(--shadow); white-space: nowrap; opacity: 0; transition: opacity .12s; }
.jv .calc.on { opacity: 1; }
.jv .calc b { font-weight: 600; } .jv .calc .k { display: inline-block; padding: 0 6px; margin-right: 4px; border-radius: 4px; background: var(--inv-line); font-size: 11px; font-weight: 600; }
.jv .calc .m { opacity: .65; font-size: 11px; }
.jv .avail { font-size: 12.5px; color: var(--text-2); }
.jv .avail.ok { color: var(--green); } .jv .avail.bad { color: var(--red); } .jv .avail b { font-weight: 600; }
.jv .kitbox { margin: 0 0 8px; padding: 2px 8px 8px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 6px 6px; background: var(--sel); font-size: 12.5px; }
.jv .kitbox .kh { display: flex; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; margin: 8px 0 2px; padding-top: 8px; border-top: 1px solid var(--line); }
.jv .kitbox .kh + .ki { margin-top: 2px; }
.jv .kitbox .kh ~ .kh { border-top: 0; padding-top: 2px; }
.jv .kitbox .ki { display: grid; grid-template-columns: 26px 1fr auto auto; gap: 6px; align-items: center; padding: 3px 0; }
.jv .kitbox .ki .q { text-align: left; font-variant-numeric: tabular-nums; color: var(--text-2); font-weight: 500; }
.jv .kitbox .ki .md { font-size: 11px; color: var(--muted); }
.jv .kitbox .ki.opt { color: var(--text-2); }
.jv .kitbox .ki input { margin: 0; }
.jv .kitbox .none { color: var(--muted); padding: 4px 0; }
.jv .ci.open, .jv .ci.open:hover { background: var(--sel); box-shadow: none; border: 1px solid var(--line); border-bottom: 0; border-radius: 6px 6px 0 0; padding: 6px 7px 7px; }
.jv .ci.open + .kitbox { padding-left: 7px; padding-right: 7px; }
.jv .scroll::-webkit-scrollbar { width: 10px; } .jv .scroll::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 10px; border: 3px solid transparent; background-clip: content-box; }
.jv .jmain { transition: grid-template-columns .2s ease-out; }
.jv .jmain.navoff { grid-template-columns: 40px minmax(380px, 1fr) minmax(600px, 1.4fr); }
@media (max-width: 1200px) { .jv .jmain { grid-template-columns: 248px minmax(300px, 0.9fr) minmax(560px, 1.6fr); } .jv .jmain.navoff { grid-template-columns: 40px minmax(300px, 0.9fr) minmax(560px, 1.6fr); } }
@media (prefers-reduced-motion: reduce) { .jv .jmain { transition: none; } }
.jv .navtog { margin-left: auto; border: 0; background: transparent; color: var(--muted); width: 26px; height: 24px; border-radius: 6px; display: grid; place-items: center; align-self: center; }
.jv .navtog:hover { background: var(--hover); color: var(--text); }
.jv .navrail { display: none; }
.jv .jmain.navoff > .col:first-child { overflow: hidden; }
.jv .jmain.navoff > .col:first-child > :not(.navrail) { display: none; }
.jv .jmain.navoff .navrail { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; height: 100%; padding: 14px 0; border: 0;
  background: transparent; color: var(--muted); cursor: pointer; }
.jv .jmain.navoff .navrail:hover { background: var(--hover); color: var(--text); }
.jv .navrail span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }

/* ---------- type: Archivo, key figures in mono ---------- */
.jv .title h1 { font-size: 15.5px; font-weight: 650; letter-spacing: -.005em; }
.jv .title h1 .no { font-family: var(--mono); font-stretch: 100%; font-weight: 500; font-size: 13px; }
.jv .colhead h2, .jv .ghead { letter-spacing: .06em; font-weight: 600; }
.jv .stat small { text-transform: uppercase; letter-spacing: .07em; font-size: 11px; font-weight: 600; white-space: nowrap; font-stretch: 100%; }
.jv .stat b, .jv .stat input { font-family: var(--mono); font-stretch: 100%; font-weight: 500; letter-spacing: -.02em; }
.jv .money { font-feature-settings: "tnum" 1; }
/* one orchestrated entrance: the three columns rise in turn */
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.jv .jhead { animation: rise .25s cubic-bezier(.16, 1, .3, 1) both; }
.jv > :nth-child(2) > * { animation: rise .28s cubic-bezier(.16, 1, .3, 1) both; }
.jv > :nth-child(2) > :nth-child(1) { animation-delay: .04s; }
.jv > :nth-child(2) > :nth-child(2) { animation-delay: .08s; }
.jv > :nth-child(2) > :nth-child(3) { animation-delay: .24s; }
@media (prefers-reduced-motion: reduce) { .jv .jhead, .jv > :nth-child(2) > * { animation: none; } }

/* ---------- job details drawer ---------- */
.jv .hlink { border: 0; background: transparent; padding: 0; color: inherit; font: inherit; text-align: left; border-radius: 4px; }
.jv .hlink:hover { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.jv .chip.hlink { padding: 2px 8px; } .jv .chip.hlink:hover { border-color: var(--line-strong); text-decoration: none; }
.jv button.pill { cursor: pointer; }
.jv .jx { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 360px; }
.jv .scrim { position: fixed; inset: 0; background: rgba(15,15,20,.16); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 40; }
.jv .scrim.on { opacity: 1; pointer-events: auto; }
.jv .drawer { position: fixed; top: 0; right: 0; bottom: 0; padding-top: env(safe-area-inset-top); width: 440px; max-width: 100vw; background: var(--surface); border-left: 1px solid var(--line);
  box-shadow: var(--shadow); transform: translateX(100%); transition: transform .22s ease-out; z-index: 41; display: flex; flex-direction: column; }
.jv .drawer.on { transform: none; }
@media (prefers-reduced-motion: reduce) { .jv .drawer, .jv .scrim { transition: none; } }
.jv .drawer .dh { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.jv .drawer .dh h2 { margin: 0; font-size: 15px; font-weight: 600; flex: 1; }
.jv .drawer .dh .no { color: var(--muted); font-family: var(--mono); font-size: 12.5px; }
.jv .drawer .dx { border: 0; background: transparent; width: 30px; height: 30px; border-radius: 6px; color: var(--muted); font-size: 18px; }
.jv .drawer .dx:hover { background: var(--hover); color: var(--text); }
.jv .drawer .db { overflow: auto; padding: 4px 20px 24px; }
.jv .drawer h3 { margin: 18px 0 8px; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.jv .fg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.jv .fd { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .jv .fd.w { grid-column: 1 / -1; }
.jv .fd > span { font-size: 12px; color: var(--text-2); font-weight: 500; }
.jv .fd input, .jv .fd select, .jv .fd textarea { width: 100%; min-width: 0; }
.jv .fd textarea { resize: vertical; min-height: 58px; line-height: 1.4; }
.jv .fd .ro { min-height: 34px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.jv .fd small { color: var(--muted); font-size: 11.5px; }
.jv .fd .seg { align-self: flex-start; }
.jv .dnote { margin-top: 8px; padding: 8px 10px; border-radius: 6px; background: var(--amber-bg); color: var(--amber); font-size: 12px; }
.jv .dnote.info { background: var(--hover); color: var(--text-2); }
.jv .dnote button { border: 0; background: transparent; color: inherit; font: inherit; font-weight: 600; text-decoration: underline; padding: 0; margin-left: 4px; }

/* ---------- drawer actions ---------- */
.jv .uactions { display: flex; gap: 8px; margin-top: 12px; }
.jv .uhint { display: block; margin-top: 8px; color: var(--muted); font-size: 11.5px; }

/* ---------- send for approval ---------- */
.jv .docpick { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.jv .docpick label { display: flex; gap: 8px; align-items: center; padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: 6px; cursor: pointer; font-weight: 500; }
.jv .docpick label.on { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); }
.jv .docpick input { margin: 0; }
.jv .apcard { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; }
.jv .apcard.approved { border-color: color-mix(in srgb, var(--green) 40%, var(--line)); }
.jv .apcard.changes { border-color: color-mix(in srgb, var(--red) 40%, var(--line)); }
.jv .apcard.cancelled { opacity: .6; }
.jv .aphead { display: flex; align-items: center; gap: 8px; } .jv .aphead small { margin-left: auto; color: var(--muted); }
.jv .aptl { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 3px; font-size: 12px; color: var(--muted); }
.jv .aptl li { padding-left: 16px; position: relative; } .jv .aptl li::before { content: ""; position: absolute; left: 3px; top: 5px; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--line-strong); }
.jv .aptl li.done { color: var(--text-2); } .jv .aptl li.done::before { background: var(--accent); border-color: var(--accent); }
.jv .aptl li span { font-weight: 600; } .jv .aptl small { color: var(--muted); }
.jv .apsig { display: block; max-width: 220px; max-height: 70px; margin: 8px 0 0; border-bottom: 1px solid var(--line-strong); }
.jv .apthread { margin-top: 10px; display: grid; gap: 6px; }
.jv .apc { padding: 7px 9px; border-radius: 8px; background: var(--hover); font-size: 12.5px; } .jv .apc small { color: var(--muted); }
.jv .apc.client { background: var(--amber-bg); } .jv .apc div { margin-top: 2px; }
.jv .apreply { display: flex; gap: 6px; margin-top: 8px; align-items: flex-end; }
.jv .apreply textarea { flex: 1; resize: vertical; }
.jv .apfoot { display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap; } .jv .apfoot .lnk { padding: 0; font-size: 12.5px; }
.jv .apcard > .btn { margin-top: 8px; }
.jv #apprChip[hidden] { display: none; }
/* keyboard focus always visible (checklist: visible focus, 4.5:1 contrast) */
.jv button:focus-visible, .jv a:focus-visible, .jv [tabindex]:focus-visible, .jv input[type=checkbox]:focus-visible, .jv select:focus-visible, .jv .ci:focus-visible {
  outline: 2px solid var(--accent) !important; outline-offset: 2px; }
.jv input:not([type=checkbox]):focus-visible, .jv textarea:focus-visible { box-shadow: 0 0 0 2px var(--accent-bg), 0 0 0 3px var(--accent) !important; }

/* client / contact picker: suggestions under the field, same look as the catalogue rows */
.jv .fd.pick { position: relative; }
.jv .sugg { position: absolute; z-index: 30; top: calc(100% - 2px); left: 0; right: 0; background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .12); padding: 4px; max-height: 300px; overflow: auto; }
.jv .fd.pick > small { margin-top: 2px; }
.jv .sugg .si { display: flex; flex-direction: column; gap: 1px; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.jv .sugg .si b { font-weight: 500; font-size: 13px; }
.jv .sugg .si small { color: var(--muted); font-size: 11.5px; }
.jv .sugg .si.hl, .jv .sugg .si:hover { background: var(--accent-bg); }

.jv .seg.wrap { flex-wrap: wrap; }
.jv #dReason input { margin-top: 6px; }
.jv .subcostrow { display: flex; align-items: center; gap: 10px; }
.jv .subcostrow input { width: 220px; font-family: var(--mono); text-align: right; }

/* vehicles: Van / Truck rental lines get a fleet vehicle */
.jv .pill.p-veh { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 11px; }
.jv .pill.p-veh::before { display: none; } .jv .pill.p-veh:not(.p-low):not(.p-na):not(.p-out) { background: var(--accent-bg); color: var(--accent); }
.jv .pill.p-veh.p-low, .jv .pill.p-veh.p-na { font-family: var(--font); }
.jv .vehpick { display: grid; gap: 6px; }
.jv .vehlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
.jv .vehopt { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n p" "m m" "s s"; gap: 1px 8px; text-align: left; padding: 7px 10px; min-height: 44px;
  border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; cursor: pointer; transition: border-color .15s, background-color .15s; }
.jv .vehopt:hover { border-color: var(--accent); }
.jv .vehopt .vn { grid-area: n; font-weight: 500; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jv .vehopt .vm { grid-area: m; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jv .vehopt .vp { grid-area: p; font-size: 11.5px; color: var(--text-2); }
.jv .vehopt .vs { grid-area: s; font-size: 11.5px; color: var(--green); }
.jv .vehcal .insptick { position: relative; justify-self: end; align-self: stretch; width: 2px; background: var(--red); margin: 3px 0; z-index: 2; pointer-events: auto; }
.jv .vehopt .vi { grid-column: 1 / -1; font-size: 11px; color: var(--red); }
.jv .vehopt.soft .vs { color: var(--amber); } .jv .vehopt.busy .vs { color: var(--red); } .jv .vehopt.busy:not(.on) { background: var(--hover); }
.jv .vehopt.on { border-color: var(--accent); background: var(--accent-bg); box-shadow: inset 0 0 0 1px var(--accent); } .jv .vehopt.on .vs { color: var(--accent); font-weight: 500; }
.jv .vehopt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.jv .vehfoot { font-size: 12px; } .jv .vehfoot .linkbtn { border: 0; background: none; padding: 0; color: var(--accent); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

/* vehicle picker: Calendar | List; the calendar reuses the availability timeline (.tl) with one clickable row per vehicle */
.jv .vehbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.jv .vehbar .nav { margin-left: auto; display: flex; gap: 4px; }
.jv .vehbar .nav button { height: 24px; padding: 0 8px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: var(--text-2); font-size: 12px; }
.jv .vehbar .nav button:hover { border-color: var(--line-strong); color: var(--text); }
.jv .tl.vehcal { grid-template-columns: 150px repeat(var(--days), minmax(28px, 1fr)); row-gap: 2px; overflow-x: auto; }
.jv .vehcal .vrow { position: relative; z-index: 0; min-height: 30px; border: 1px solid transparent; border-radius: 6px; background: transparent; padding: 0; cursor: pointer; }
.jv .vehcal .vrow:hover { background: var(--hover); border-color: var(--line); }
.jv .vehcal .vrow.on { background: var(--accent-bg); border-color: var(--accent); }
.jv .vehcal .vrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.jv .vehcal .vlab, .jv .vehcal .bar { position: relative; z-index: 1; pointer-events: none; align-self: center; }
.jv .vehcal .vlab { display: flex; align-items: center; gap: 6px; padding-left: 8px; color: var(--text-2); font-size: 12px; }
.jv .vehcal .vlab b { color: var(--text); font-weight: 600; } .jv .vehcal .vlab .num { font-size: 11px; color: var(--muted); }
.jv .vehcal .vdot { width: 7px; height: 7px; border-radius: 50%; margin-left: auto; margin-right: 6px; background: var(--muted); flex: none; }
.jv .vehcal .vdot.ok { background: var(--green); } .jv .vehcal .vdot.q { background: var(--amber); } .jv .vehcal .vdot.bad { background: var(--red); } .jv .vehcal .vdot.on { background: var(--accent); }
.jv .vehcal .bar { height: 20px; margin: 0 1px; }
.jv .vehcal .bar.firm { background: var(--red-bg); color: var(--red); border-color: color-mix(in srgb, var(--red) 35%, transparent); }
.jv .vehcal .bar.quote { color: var(--amber); border-color: var(--amber); }
.jv .tllegend i.f { background: var(--red-bg); border-color: color-mix(in srgb, var(--red) 35%, transparent); }
.jv .tllegend i.hl { background: var(--accent-bg); border-color: transparent; }
.jv .vehcal .dh { position: sticky; top: 0; }
.jv .vehcal .jobcol { background: color-mix(in srgb, var(--accent-bg) 55%, transparent); pointer-events: none; }
.jv .vehpick .tllegend i.q { border-color: var(--amber); }

/* each item's warehouse stage (js/job.js stageOf), in its own column before Qty; where the order list is narrow only its coloured dot */
.jv #orderScroll { container: jvorder / inline-size; }
.jv .stg { min-width: 0; display: flex; } .jv .stg .pill { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.jv .thead .stg { font: inherit; }
@container jvorder (max-width: 720px) { .jv .grid { --cols: 26px minmax(200px, 1fr) 22px 52px 46px 56px 48px 74px 22px; } .jv.noprice .grid { --cols: 26px minmax(200px, 1fr) 22px 52px 46px 22px; }
  .jv .stg .pill { font-size: 0; gap: 0; padding: 3px; } .jv .thead .stg { visibility: hidden; } }

/* ---------- invoice (js/invoices.js): the order screen's header and grid; lines left, details right ---------- */
.jv.iv .ivmain { display: grid; grid-template-columns: minmax(0, 1fr) 340px; min-height: 0; }
.jv.iv .grid { --cols: minmax(220px, 1fr) 52px 52px 76px 52px 84px 26px; }   /* item, qty, days, price, disc, total, remove */
.jv.iv.vatcol .grid { --cols: minmax(220px, 1fr) 52px 52px 76px 52px 48px 84px 26px; }
.jv.iv .row { cursor: default; }
.jv.iv .row.part .nm { padding-left: 22px; }
.jv.iv .ivname { width: 100%; border: 0; border-radius: 5px; background: transparent; padding: 4px; outline: none; font: inherit; color: inherit; }
.jv.iv .ivname:hover { box-shadow: inset 0 0 0 1px var(--line-strong); background: var(--surface); } .jv.iv .ivname:focus { box-shadow: inset 0 0 0 1.5px var(--accent); background: var(--surface); }
.jv.iv .row.text .ivname { font-style: italic; color: var(--text-2); }
.jv.iv .cell.ro { display: block; padding: 4px; } .jv.iv .cell.ro.inh { color: var(--muted); }
.jv.iv .cell.pc::after { content: '%'; } .jv.iv input.cell.pc { padding-right: 4px; }
.jv.iv .ghead .gt { flex: 1; min-width: 0; } .jv.iv .ghead .gname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jv.iv .ghead .gin.ivg { width: min(460px, 100%); border-color: transparent; background: transparent; }
.jv.iv .ghead .gin.ivg:hover { border-color: var(--line-strong); } .jv.iv .ghead .gin.ivg:focus { border-color: var(--accent); background: var(--surface); }
.jv.iv .ivsum { display: grid; grid-template-columns: 1fr auto; gap: 6px 24px; justify-items: end; padding: 16px 46px 6px 20px; font-size: 13px; color: var(--text-2); }
.jv.iv .ivsum span { justify-self: end; } .jv.iv .ivsum b { font: 500 13px var(--mono); color: var(--text); min-width: 90px; text-align: right; }
.jv.iv .ivsum .t { padding-top: 8px; border-top: 1px solid var(--line); font-size: 14px; font-weight: 600; color: var(--text); } .jv.iv .ivsum b.t { font-size: 15px; font-weight: 600; }
.jv.iv .ivnote { margin: 4px 46px 20px 20px; text-align: right; color: var(--muted); font-size: 12px; }
.jv.iv .hstats .stat b.num { font-family: var(--mono); font-weight: 500; } .jv.iv .ivtot { color: var(--accent); }
.jv.iv .ivact { display: flex; gap: 8px; align-items: center; }
.jv.iv .title .sub .hlink { color: var(--text-2); text-decoration: none; } .jv.iv .title .sub .hlink:hover { color: var(--accent); }
.jv.iv .title .sub > span:not(:first-child)::before, .jv.iv .title .sub > a + span::before { content: '·'; margin-right: 8px; color: var(--line-strong); }
.jv.iv .ivside { background: var(--bg); border-left: 1px solid var(--line); }
.jv.iv .ivcard { margin: 14px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.jv.iv .ivcard h3 { margin: 0 0 10px; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.jv.iv .ivcard .form { grid-template-columns: 1fr 1fr; gap: 0 12px; } .jv.iv .ivcard p { margin: 0 0 10px; }
@container (max-width: 980px) { .jv.iv .ivmain { grid-template-columns: minmax(0, 1fr); overflow: auto; } .jv.iv .ivside { border-left: 0; border-top: 1px solid var(--line); } .jv.iv .col .scroll { overflow: visible; } }
/* the order screen header: the job's invoices beside its status */
.jv .invchips { display: inline-flex; gap: 4px; flex-wrap: wrap; } .jv .invchips:empty { display: none; }
.jv.iv .ghead .gname, .jv.iv .ghead .gin.ivg { text-transform: uppercase; letter-spacing: .05em; }   /* group bands like the order screen's */

/* the order's warehouse progress beside "Order" (js/job.js drawProgress, the Jobs list's whProg); damaged / lost tags link to Check in */
.jv .ordprog { width: 180px; min-width: 0; margin-left: 8px; color: inherit; text-decoration: none; border-radius: 6px; padding: 2px 4px; }
.jv .ordprog:hover { background: var(--hover); } .jv .ordprog:empty { display: none; }
.jv a.wdl { text-decoration: none; } .jv a.wdl:hover { text-decoration: underline; }

/* internal notes above the order (js/job.js renderHeader): staff only, never printed; three lines, all on "Show all" */
.jv .innotes { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 2px 12px; margin: 0 20px 8px; padding: 5px 12px; border-radius: 8px;
  background: color-mix(in srgb, var(--amber-bg) 50%, var(--surface)); box-shadow: inset 2px 0 0 color-mix(in srgb, var(--amber) 40%, var(--surface)); font-size: 12.5px; line-height: 1.5; cursor: pointer; }
.jv .innotes[hidden] { display: none; }
.jv .innotes .lbl { padding-top: 1px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: color-mix(in srgb, var(--amber) 70%, var(--surface)); }
.jv .innotes .nt { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }   /* one line until opened */
.jv .innotes.open .nt { display: block; }
.jv .innotes .more { grid-column: 3; justify-self: end; white-space: nowrap; border: 0; background: none; padding: 0; color: var(--amber); font: 500 12px var(--font); cursor: pointer; }
.jv .innotes:hover { box-shadow: inset 2px 0 0 color-mix(in srgb, var(--amber) 40%, var(--surface)), 0 0 0 1px color-mix(in srgb, var(--amber) 20%, transparent); }

/* the vehicles on a service line with their own dates (js/job.js vehDates): out / back, the line's by default */
.jv .vdates { display: grid; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.jv .vdrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 12.5px; }
.jv .vdrow .vdn { min-width: 130px; } .jv .vdrow .vdn b { font-weight: 600; } .jv .vdrow .vdn .num { color: var(--muted); font-size: 11.5px; }
.jv .vdrow label { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11.5px; }
.jv .vdrow input { height: 28px; padding: 0 6px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); font: 12.5px var(--mono); color: var(--text-2); }
.jv .vdrow:not(.vown) input { color: var(--muted); } .jv .vdrow.vown input { color: var(--text); border-color: color-mix(in srgb, var(--accent) 45%, var(--line-strong)); }
.jv .vdrow input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.jv .vdnote { padding: 6px 10px; border-radius: 6px; background: color-mix(in srgb, var(--amber-bg) 60%, var(--surface)); font-size: 12px; color: var(--text-2); }
/* Print menu: documents per pickup (a job going out in parts) */
.jv .pmpick { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; min-width: 300px; } .jv .pmpick small { display: block; padding: 4px 10px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.jv .pmp { padding: 2px 4px 4px; } .jv .pmp span { display: block; padding: 4px 6px 2px; font-size: 12.5px; font-weight: 600; } .jv .pmp span i { font-style: normal; font-weight: 400; color: var(--muted); }
.jv .pmp button { display: inline-block; width: auto; padding: 4px 8px; color: var(--accent); }

/* the order screen's totals: plain labels (no small capitals), figures a size up, % beside the discount, Save / Discard as small tick / ✕ */
.jv .jhead2 .hstats { gap: 10px 26px; align-items: flex-end; }
.jv .jhead2 .stat small { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 500; color: var(--muted); margin-bottom: 2px; }
.jv .jhead2 .stat small .dbasis { font-weight: 400; }
.jv .jhead2 .stat b, .jv .jhead2 .stat input { font-size: 17px; }
.jv .jhead2 .pcin { display: inline-flex; align-items: baseline; gap: 3px; } .jv .jhead2 .pcin i { font-style: normal; color: var(--muted); font-size: 14px; }
.jv .jhead2 .savegrp { display: inline-flex; gap: 6px; align-self: center; }
.jv .jhead2 .savegrp .btn { width: 32px; min-height: 32px; padding: 0; }
.jv .jhead2 .savegrp .discbtn:not(:disabled):hover { color: var(--red); border-color: var(--red); background: var(--red-bg); }
.jv .jhead2 #jobDisc { width: 58px; text-align: right; } .jv .jhead2 #jobDays { width: 40px; } .jv .jhead2 #tTotal { width: 118px; }

/* Actions = the first button of the job's switch (Chat, Files, Booking, Warehouse) */
.jv .viewsw > .actwrap { display: inline-flex; padding: 0; height: auto; }
.jv .viewsw > .actwrap > .btn { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 7px; font-size: 13px; font-weight: 500; color: var(--text-2); cursor: pointer; white-space: nowrap; }
.jv .viewsw > .actwrap > .btn:hover, .jv .viewsw > .actwrap > .btn[aria-expanded="true"] { color: var(--text); background: color-mix(in srgb, var(--surface) 60%, transparent); }
.jv .viewsw > .actwrap > .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.jv .viewsw > .actwrap > .btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.jv .viewsw > .actwrap > .btn svg.chev { width: 13px; height: 13px; margin-left: -2px; stroke-width: 2.2; transition: transform .15s; } .jv .viewsw > .actwrap > .btn[aria-expanded="true"] svg.chev { transform: rotate(180deg); }
@media (max-width: 520px) { .jv .viewsw > .actwrap > .btn svg.chev { display: none; } }
.jv .viewsw > .actwrap .actpop { left: 0; right: auto; top: 38px; }
@media (pointer: coarse) { .jv .viewsw > .actwrap > .btn { height: 40px; } }
/* phones: the switch fits the width, the items other than the open page show their icon (and count) only */
@media (max-width: 520px) { .jv .viewsw { max-width: 100%; } .jv .viewsw > :not(.on):not(.actwrap), .jv .viewsw > .actwrap > .btn { font-size: 0; gap: 4px; padding: 0 11px; } }
/* the switch (Actions · Chat · Files · Booking · Warehouse) always sits at the right */
.jv .jhead .viewsw { margin-left: auto; }

/* Actions menu (2026-11-06): soft card, sections, an icon per item */
.jv .addpop.actpop { min-width: 248px; padding: 6px; border-radius: 12px; border-color: var(--line); box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 12px 32px -6px rgba(0,0,0,.16); animation: actIn .12s ease-out; transform-origin: top left; }
@keyframes actIn { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .jv .addpop.actpop { animation: none; } }
.jv .actpop .pmh { padding: 8px 10px 4px; font-size: 11.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }
.jv .actpop .pmsep { margin: 6px 4px; }
.jv .actpop > button { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 0 10px; border-radius: 8px; font: 500 13px var(--font); color: var(--text); }
.jv .actpop > button svg { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: stroke .12s; }
.jv .actpop > button:hover, .jv .actpop > button:focus-visible { background: var(--hover); outline: none; }
.jv .actpop > button:hover svg, .jv .actpop > button:focus-visible svg { stroke: var(--accent); }
.jv .actpop .pmpick { border-top: 1px solid var(--line); margin: 6px 0 0; padding-top: 2px; min-width: 0; }
.jv .actpop .pmpick small.pmh { font-size: 11.5px; text-transform: none; letter-spacing: 0; }
.jv .actpop .pmp { padding: 2px 4px 6px; } .jv .actpop .pmp span { padding: 4px 6px 4px; font-size: 12.5px; }
.jv .actpop .pmp button { display: inline-flex; width: auto; min-height: 28px; padding: 0 9px; margin-right: 4px; border: 1px solid var(--line); border-radius: 7px; color: var(--text); font-size: 12px; }
.jv .actpop .pmp button:hover { border-color: var(--accent); color: var(--accent); background: transparent; }

/* catalogue: a small link to the product's page after its category line, shown on hover (no change in row height) */
.jv .ci .cilink { display: none; align-items: center; gap: 3px; width: max-content; margin-left: 6px; vertical-align: 1px; line-height: 15px; padding: 0 6px 0 7px; border-radius: 999px; font-size: 11px; font-weight: 500;
  color: var(--accent); background: var(--accent-bg); text-decoration: none; }
.jv .ci .cilink svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.jv .ci:hover .cilink, .jv .ci.hl .cilink:focus-visible { display: inline-flex; }
.jv .ci .cilink:hover { background: color-mix(in srgb, var(--accent) 16%, var(--accent-bg)); }
@media (pointer: coarse) { .jv .ci.open .cilink { display: inline-flex; } }

/* job status in Job details: the track, what moves it next, the next step a person takes */
.jv .sttrack { list-style: none; margin: 4px 0 0; padding: 0; display: flex; align-items: flex-start; }
.jv .sttrack li { flex: 1; min-width: 0; display: grid; justify-items: center; gap: 5px; position: relative; text-align: center; }
.jv .sttrack li::before { content: ''; position: absolute; top: 9px; left: -50%; right: 50%; height: 2px; background: var(--line-strong); }
.jv .sttrack li:first-child::before { display: none; }
.jv .sttrack li.done::before, .jv .sttrack li.now::before { background: var(--accent); }
.jv .sttrack .dot { position: relative; z-index: 1; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 2px solid var(--line-strong); }
.jv .sttrack .dot svg { width: 12px; height: 12px; fill: none; stroke: var(--on-accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.jv .sttrack li.done .dot { background: var(--accent); border-color: var(--accent); }
.jv .sttrack li.now .dot { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-bg); } .jv .sttrack li.now .dot::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.jv .sttrack b { font-size: 11.5px; font-weight: 500; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.jv .sttrack li.done b { color: var(--text-2); } .jv .sttrack li.now b { color: var(--accent); font-weight: 600; }
.jv .sthint { margin: 4px 0 0; font-size: 12px; color: var(--muted); }
.jv .sthand { display: flex; gap: 9px; align-items: flex-start; margin: 10px 0 2px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--hover); cursor: pointer; }
.jv .sthand input { margin: 2px 0 0; width: 16px; height: 16px; accent-color: var(--accent); flex: none; }
.jv .sthand span { display: grid; gap: 2px; font-size: 13px; }
.jv .sthand small { font-size: 12px; color: var(--muted); }
.jv .stacts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 2px; }
.jv .stmore { position: relative; } .jv .stmore > .btn { width: 30px; padding: 0; justify-content: center; }
.jv .stmenu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; display: grid; min-width: 200px; padding: 5px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow); }
.jv .stmenu button { all: unset; box-sizing: border-box; padding: 7px 10px; border-radius: 7px; font-size: 13px; cursor: pointer; } .jv .stmenu button:hover, .jv .stmenu button:focus-visible { background: var(--hover); }
.jv .stmenu button.danger { color: var(--red); margin-top: 4px; position: relative; } .jv .stmenu button.danger:not(:first-child)::before { content: ''; position: absolute; left: 6px; right: 6px; top: -3px; border-top: 1px solid var(--line); } .jv .stmenu button.danger:hover, .jv .stmenu button.danger:focus-visible { background: var(--red-bg); }
.jv .stend { padding: 9px 12px; border-radius: 9px; background: var(--red-bg); color: var(--red); font-size: 13px; } .jv .stend b { font-weight: 600; }
.jv .stchg { font-style: normal; font-weight: 500; color: var(--amber); margin-left: 6px; }
/* crew lines (routes/crew.js): the kind of day and its days; cost and margin under the name */
.jv .pill.p-crew { background: var(--accent-bg); color: var(--accent); } .jv .pill.p-crew::before { display: none; }
.jv .cnote.crewsub { background: none; border-left-color: var(--line-strong); color: var(--muted); }
.jv .crewbox { display: grid; gap: 8px; }
.jv .crewadd { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .jv .crewadd .muted { font-size: 12.5px; margin-right: 2px; }
.jv .crewadd .btn.sm { min-height: 26px; padding: 0 9px; font-size: 12.5px; }
.jv .crewdays { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.jv .crewdays button[data-cd] { min-width: 58px; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--text-2); font-size: 12px; cursor: pointer; }
.jv .crewdays button[data-cd].shoot { border-color: var(--line-strong); font-weight: 600; }
.jv .crewdays button[data-cd].on { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }
.jv .crewdays .lnk, .jv .crewbox .lnk { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; font-size: 12.5px; text-decoration: none; }
.jv .crewcard { font-size: 12px; line-height: 1.5; } .jv .crewcard b { color: var(--text-2); font-weight: 600; margin-right: 4px; }
.jv .crewfree .ok { color: var(--green); } .jv .crewfree .bad { color: var(--red); } .jv .crewfree b { font-weight: 600; }
@media (pointer: coarse) { .jv .crewdays button[data-cd] { min-height: 40px; } }
.jv .datebtn.empty { padding: 6px 10px; text-align: left; }   /* not the empty-list padding above */

/* fixed price (deal price): a small lock beside "Total excl. VAT"; on = the total stays put when lines change */
.jv .dealbtn { display: inline-flex; align-items: center; gap: 3px; margin-left: 4px; padding: 1px 6px; border: 1px solid var(--line); border-radius: 999px; background: transparent;
  color: var(--muted); font: inherit; font-size: 11px; cursor: pointer; vertical-align: 1px; }
.jv .dealbtn span { display: none; }
.jv .dealbtn:hover { border-color: var(--line-strong); color: var(--text); }
.jv .dealbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.jv .dealbtn.on { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }
.jv .dealbtn.on span { display: inline; }
.jv .stat.deal .tot-in { box-shadow: inset 0 0 0 1.5px var(--accent); }
.jv .title .sub .invchips { flex-wrap: nowrap; } .jv .jhead2 .savegrp #saveState { align-self: center; font-size: 12px; }

/* Smart booking: "Usually added with these" above the order lines */
.smsg { margin: 0 0 8px; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--accent-bg) 55%, var(--surface)); }
.smsg[hidden] { display: none; }
.sgh { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 12px; cursor: pointer; font-size: 13px; }
.sgh:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 10px; } .sgh .grow { flex: 1; }
.sgi { color: var(--accent); } .sgn { background: var(--accent); color: var(--on-accent); border-radius: 999px; font-size: 11.5px; font-weight: 600; padding: 0 7px; } .sgch { color: var(--accent); font-weight: 500; }
.sgl { border-top: 1px solid var(--line); }
.sgr { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 8px 12px; border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); } .sgr:first-child { border-top: 0; }
.sgm { display: grid; grid-template-columns: minmax(0, 1fr) 70px; gap: 2px 10px; align-items: center; min-width: 0; }
.sgm b { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sgm .small { grid-column: 1 / -1; }
.sgbar { height: 6px; border-radius: 3px; background: var(--surface); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); } .sgbar i { display: block; height: 100%; background: var(--accent-fill); }
.sga { display: flex; gap: 6px; flex: none; } .sgno { position: relative; }
.sgmenu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 40; display: grid; min-width: 220px; padding: 4px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px; box-shadow: var(--shadow); }
.sgmenu button { border: 0; background: none; text-align: left; padding: 7px 10px; border-radius: 6px; color: var(--text); font-size: 13px; } .sgmenu button:hover { background: var(--hover); }
.sgmore { display: block; margin: 2px 12px 8px; font-size: 12.5px; }
.smsg.bad { border-color: color-mix(in srgb, var(--red) 40%, var(--line)); }
.sgn.bad { background: var(--red); color: #fff; } .sgn.amb { background: var(--amber-bg); color: var(--amber); }
.sgck { border-top: 1px solid var(--line); } .sgr.miss { background: color-mix(in srgb, var(--red-bg) 70%, var(--surface)); } .sgr.miss b { white-space: normal; color: var(--red); }
.sgr.chk { background: color-mix(in srgb, var(--amber-bg) 60%, var(--surface)); font-size: 12.5px; color: var(--text); }
.sgr.miss .sgm, .sgr.chk .sgm { grid-template-columns: 1fr; }
.sgsub { padding: 8px 12px 0; font-size: 12.5px; font-weight: 600; border-top: 1px solid var(--line); }
/* a line's own pickup / return (job.js linesDates) */
.jv .ldates { all: unset; display: inline-block; margin-top: 2px; font-size: 11.5px; color: var(--violet, var(--accent)); cursor: pointer; border-radius: 4px; padding: 0 3px; margin-left: -3px; }
.jv .ldates::before { content: '⇄ '; } .jv .ldates:hover { background: var(--hover); text-decoration: underline; } .jv .ldates:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.jv .gdat { color: var(--violet, var(--accent)); font-size: 11.5px; }
.ldlg { width: min(520px, calc(100vw - 32px)); } .ldlg p { margin: 4px 0 12px; }
.ldrow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 6px; } .ldrow label { display: grid; gap: 4px; font-size: 12px; font-weight: 500; color: var(--text-2); }
@media (max-width: 520px) { .ldrow { grid-template-columns: 1fr; } }
/* lines with their own days after the job's days changed (job.js daysNote) */
.jv .daysnote { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; padding: 8px 12px; border-radius: 8px; font-size: 12.5px;
  background: var(--amber-bg); color: var(--text); border: 1px solid color-mix(in srgb, var(--amber) 35%, transparent); }
.jv .daysnote b { color: var(--amber); } .jv .daysnote .grow { flex: 1; }
.jv .dodd { all: unset; display: inline-block; margin-top: 2px; font-size: 11.5px; color: var(--amber); cursor: pointer; border-radius: 4px; padding: 0 3px; margin-left: -3px; }
.jv .dodd::before { content: '↺ '; } .jv .dodd:hover { background: var(--hover); text-decoration: underline; } .jv .dodd:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* a transfer on the order screen (job.js transfer mode): no prices, no client documents */
.jv.transfer #printMenu [data-doc="quote"], .jv.transfer #printMenu [data-doc="confirmation"], .jv.transfer #printMenu [data-doc="agreement"], .jv.transfer #printMenu [data-doc="subhire"],
.jv.transfer #printMenu [data-doc="damage"], .jv.transfer #sendBtn, .jv.transfer #invBtn, .jv.transfer #copyBtn, .jv.transfer #accBtn, .jv.transfer #sugg, .jv.transfer .hstats .stat:first-child { display: none !important; }
.jv .colhead .kitchk { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); cursor: pointer; white-space: nowrap; }

/* Touch screens: the small order-line controls (add, quantity up / down, remove) keep their size but take a finger: an unseen
   area around each one answers the tap (chaos test 2026-11-13: 14 x 11 px steppers at 320 px). */
@media (pointer: coarse) {
  .jv .addbtn, .jv .rmx, .jv .grmx, .jv .inc, .jv .dec { position: relative; }
  .jv .addbtn::after, .jv .rmx::after, .jv .grmx::after { content: ''; position: absolute; inset: -9px; }
  .jv .inc::after { content: ''; position: absolute; inset: -12px -14px 0 -8px; }
  .jv .dec::after { content: ''; position: absolute; inset: 0 -14px -12px -8px; }
}