/* work-order-view.ledger.css -- ledger shell: identity strip, tabs, Quick Schedule split-button + popover, add bar, group cards, table base, column picker, click-to-edit, stacked identity

   Part 3 of 6. The stylesheet reached 79KB in one file, and the push tooling
   takes whole-file content, so every rule change re-emitted the whole thing.
   Split on the section boundaries that were already there. Load order is the
   cascade -- it is fixed in work-order-view.html and must not be reordered.
   No rule changed in this split. */

/* ============================================================
   LEDGER-FIRST VIEW (v2/v3 — proposed)
   ============================================================ */
.lv-scroll{flex:1;min-height:0;overflow-y:auto;padding:16px 24px 24px;}
.lv-scroll::-webkit-scrollbar{width:9px;} .lv-scroll::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:5px;}
/* slim identity strip */
.lv-idbar{display:flex;align-items:center;gap:16px;background:var(--paper);border:1px solid var(--border);border-radius:8px;padding:12px 18px;margin-bottom:10px;}
/* v56: the icon sits at the TOP of the block rather than floating at its
   vertical middle (Tim). The header grew from one line to four (title,
   client/vehicle, labels, status), so a centred 38px tile landed beside the
   labels row and read as belonging to it. margin-top optically centres it on
   the title's cap height instead. */
.lv-id-left{display:flex;align-items:flex-start;gap:12px;min-width:0;}
.lv-id-icon{width:38px;height:38px;border-radius:8px;background:var(--blue-16);color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;margin-top:1px;}
.lv-id-title{font-size:16px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:8px;}
.lv-id-title .edit{font-size:15px;color:var(--text-secondary);cursor:pointer;}
/* v45: 12.5 -> 14px (Tim). The client and the vehicle are the two things
   read most often on this header and they were the smallest type on it. */
.lv-id-sub{font-size:14px;color:var(--text-secondary);margin-top:3px;display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
/* v45: the labels row. Its own line between the client / vehicle line and
   the status row - the band there was empty. margin-top 5 rather than the
   sub line's 3, so it reads as a separate row without costing a fourth. */
.lv-id-labels{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:5px;}
/* v56: the header carried four type sizes under the title (14 sub / 12 label
   chip / 11 removable label / 13 status label) and read as clutter (Tim).
   Everything below the title is now ONE size, levelled UP to the sub line's
   14px so the v45 decision - client and vehicle are the most-read things on
   this header - is not quietly reverted. Scoped to .lv-id-labels: .lbl and
   .labels-chip are shared with Classic and the grid, which are untouched.
   The status row is deliberately excluded (Tim: leave it as it is). */
.lv-id-labels .lbl{font-size:14px;padding:3px 8px 3px 12px;}
.lv-id-labels .labels-chip{font-size:14px;padding:3px 13px;}
.lv-id-labels .lbl .x,
.lv-id-labels .labels-chip iconify-icon{font-size:16px;}
.chip-status{display:inline-flex;align-items:center;gap:5px;background:var(--blue-16);color:var(--blue);font-size:11px;font-weight:700;padding:2px 9px;border-radius:12px;text-transform:uppercase;letter-spacing:.3px;}
.chip-status.sm{font-size:10px;padding:1px 7px;}
/* v34: the LARGE chip - the status dropdown moved onto its own second header
   row (WO #woRow2 / quote #qRow2) and grew into the header's unused margin.
   v35: SOLID and SQUARED, matching Classic's .status-btn (which replicates the
   ERP's contained status button). The tinted pill stays for .chip-status and
   .sm, which are badges, not buttons.
   v41: SIZED TO THE ERP EXACTLY, read out of the source rather than eyeballed.
   The real status control is a LoadingButton variant="contained" with no size
   prop (QuoteStatusButton.tsx) and Convert is a Button variant="contained",
   also unsized (QuoteDetailsEnhanced) - so they are the same size by
   construction, which is why one rule now sets both.
   Resolving what "default contained" means here:
   - theme spacing is 0.25rem x factor, so the core override's contained
     padding spacing(1.875,5.5) = 7.5px/22px...
   - ...but UserThemeOptions sets sizeMedium '8px 20px', and MUI's
     overridesResolver applies sizeMedium AFTER contained, so 8px/20px wins.
   - root: borderRadius 5, fontWeight 500, letterSpacing .3px, lineHeight 1.71
   - textTransform 'none' (UserThemeOptions) - THE ERP'S STATUS BUTTONS ARE
     NOT UPPERCASE; ours were, which is most of why they read wrong.
   - fontSize is MUI's button default, 0.875rem = 14px (no typography override)
   Height therefore computes to 8 + 8 + round(14 x 1.71) = 40px. */
.chip-status.lg{background:var(--blue);color:#fff;font-size:14px;font-weight:500;letter-spacing:.3px;line-height:1.71;text-transform:none;padding:8px 20px;gap:8px;border-radius:5px;}
.chip-status.lg:hover{filter:brightness(1.05);}
/* MUI endIcon: 1.375rem chevron (QuoteStatusButton), marginLeft 8 (the gap
   above) and marginRight -4 */
.chip-status.lg iconify-icon{font-size:22px;margin-right:-4px;}
/* v59: the status row LIVES IN THE ADD BAR now, not the header card (Tim), so
   it is no longer a stacked header line and does not carry .lv-id-sub. The
   old `.lv-id-row2{margin-top:3px}` was the gap under the labels row and is
   meaningless in a flex bar - it went with the move rather than being zeroed
   somewhere else, which would have left two rules arguing.
   flex-shrink:0 because .lv-search takes flex:1 beside it: without this the
   status would be the thing that gives way as the window narrows, and the
   chip would crush before the search box did.
   Shared with quote mode's injected #qRow2, which adds .q-row2 on top for the
   Convert button's spacing (quote.css). */
.lv-status-row{display:flex;align-items:center;gap:7px;flex-shrink:0;font-size:14px;color:var(--text-secondary);}
/* v40: the row-2 controls get a spoken label. The chip says WHAT the status is
   but not WHICH field it is - "Deposit Needed" on its own is a value with no
   name. Shared by both modes: static in #woRow2, injected into #qRow2.
   v41: sized to sit beside a sentence-case 14px button, and no longer
   uppercase itself - it read as shouting next to the ERP-spec control. */
.row2-lbl{font-size:13px;font-weight:500;color:var(--text-secondary);letter-spacing:.2px;margin-right:2px;}
.lv-id-right{margin-left:auto;display:flex;align-items:stretch;gap:12px;} /* v31: gap was 22px. v32: center -> stretch — Labor, Money and Quick Schedule all take the height of the tallest */
.lv-money{text-align:right;} .lv-money .k{display:block;font-size:11px;color:var(--text-secondary);white-space:nowrap;} .lv-money .v{font-size:16px;font-weight:700;color:var(--text);} .lv-money .v.red{color:var(--red);} /* v34: nowrap unstacks "Total Payment Owed" etc - every label is one line, so the three $ values sit level without any alignment tricks */
/* v31: Labor & Money are MATCHING action cards — bordered, hover-lift, whole
   block clickable. The cue line (Open Shop Timer / Take Payment) is now a
   full-width footer bar so the verbiage reads as the click target. Both cues
   share one rule so they can never drift apart again. */
.lv-labor{display:flex;flex-direction:column;gap:3px;align-items:flex-start;background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:7px 12px 0;cursor:pointer;transition:border-color .12s ease,box-shadow .12s ease,transform .12s ease;}
.lv-labor:hover{border-color:var(--blue);box-shadow:0 3px 10px rgba(0,0,0,.25);transform:translateY(-1px);}
.lv-labor .ll-title{display:flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.3px;}
.lv-labor .ll-title iconify-icon{font-size:14px;color:var(--blue);}
.lv-labor .ll-stats{display:flex;gap:12px;margin-bottom:6px;} /* v32: the 6px that lived on the cue's margin-top, moved here so the cue can bottom-pin */
.lv-labor .ll-stats span{display:flex;flex-direction:column;line-height:1.12;text-align:left;}
.lv-labor .ll-stats b{font-size:14px;font-weight:700;color:var(--text);}
.lv-labor .ll-stats i{font-size:9px;font-style:normal;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.2px;}
.ll-cue,.lv-pay-cue{display:flex;align-items:center;justify-content:center;gap:5px;align-self:stretch;margin:auto -12px 0;padding:7px 12px;border-top:1px solid var(--border);border-radius:0 0 8px 8px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--blue);transition:background .12s ease;} /* v32: margin-top 6px -> auto, so the cue sits on the card's bottom edge at any stretched height */
.ll-cue iconify-icon,.lv-pay-cue iconify-icon{font-size:14px;}
.lv-labor:hover .ll-cue,.lv-pay:hover .lv-pay-cue{background:var(--blue-16);}
/* v31: the five bare icons consolidated into a labeled Send button + kebab
   (lvMoreMenu). Styling matches the .lv-addbtns family.
   v32: the pair lives in the tabs row now (Quick Schedule's old slot), and it
   takes over the 12px margin the sched button used to carry. */
.lv-id-acts{display:flex;align-items:center;gap:6px;}
/* v50 put the rail toggle in this group so the KEBAB WOULD BE LAST (Tim) - it
   had been sitting in the middle because the toggle was a sibling AFTER the
   group rather than a member of it. v51 moved the toggle onto the rail's own
   edge, so the group is Send + kebab again and the kebab is last either way.
   Classic puts its Actions kebab last for the same reason. */
.lv-tabs .lv-id-acts{margin-right:12px;}
/* v58: SOLID BLUE (Tim), matching the bottom bar's Send. The BORDER STAYS,
   recoloured to --blue rather than removed: .lv-more-btn sits immediately
   beside this and carries a 1px border, so dropping it here would leave the
   pair 2px different in height for no visible reason. */
.lv-send-btn{display:flex;align-items:center;gap:6px;background:var(--blue);border:1px solid var(--blue);border-radius:7px;padding:6px 12px;color:#fff;font-size:12px;font-weight:600;white-space:nowrap;cursor:pointer;}
.lv-send-btn iconify-icon{font-size:17px;color:#fff;}
.lv-send-btn .chev{font-size:15px;color:#fff;margin-left:-2px;}
.lv-send-btn:hover{filter:brightness(1.06);}
.lv-more-btn{display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--border-2);border-radius:7px;padding:6px;color:var(--text-secondary);cursor:pointer;}
.lv-more-btn iconify-icon{font-size:19px;}
.lv-more-btn:hover{border-color:var(--blue);color:var(--text);}
/* slim tabs */
.lv-tabs{display:flex;align-items:center;gap:4px;margin-bottom:12px;border-bottom:1px solid var(--border);}
.lv-tab{padding:11px 16px;background:none;border:none;border-bottom:2px solid transparent;color:var(--text-secondary);font-size:13px;font-weight:600;}
.lv-tab.active{color:var(--blue);border-bottom-color:var(--blue);} .lv-tab:hover:not(.active){color:var(--text);}
/* Quick Schedule split-button. v32: moved from the tabs row into the idbar —
   it joins the card family (--panel surface, --border) and stretches to the
   Labor / Money cards' height; the tab-row margin-right went with the move. */
.lv-sched{display:flex;align-items:stretch;background:var(--panel);border:1px solid var(--border);border-radius:8px;overflow:hidden;}
.lv-sched-main{display:flex;align-items:center;gap:9px;padding:5px 13px;background:transparent;border:none;text-align:left;color:var(--text);}
.lv-sched-main:hover{background:var(--hover);}
.lv-sched .lvs-icon{width:30px;height:30px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0;background:var(--green-15);color:var(--green);}
.lv-sched .lvs-text{display:flex;flex-direction:column;line-height:1.15;}
.lv-sched .lvs-text .l1{font-size:13px;font-weight:700;color:var(--text);}
.lv-sched .lvs-text .l2{font-size:11px;color:var(--text-secondary);}
.lv-sched-cal{display:flex;align-items:center;justify-content:center;padding:0 9px;background:transparent;border:none;border-left:1px solid var(--border);color:var(--text-secondary);font-size:18px;}
.lv-sched-cal:hover{background:var(--hover);color:var(--text);}
.lv-sched.scheduled .lvs-icon{background:var(--green);color:#fff;}
.lv-sched.scheduled .lvs-text .l2{color:var(--green);}
/* Quick Schedule popover — mirrors the real ERP's anchored QuickSchedule form
   (MUI outlined fields: Date* / Start Time* / End Time* / Technician*). */
.qs-pop{display:none;position:fixed;width:400px;background:var(--paper);border:1px solid var(--border-2);border-radius:10px;padding:14px 16px 12px;z-index:180;box-shadow:0 14px 40px rgba(0,0,0,.5);}
.qs-pop.open{display:block;}
.qs-title{font-size:13px;font-weight:600;color:var(--text);margin-bottom:14px;}
.qs-row{display:flex;gap:12px;margin-bottom:16px;}
.qs-field{position:relative;flex:1;min-width:0;}
.qs-field label{position:absolute;top:-7px;left:9px;background:var(--paper);padding:0 4px;font-size:11px;color:var(--text-secondary);line-height:1;z-index:1;}
.qs-field input,.qs-field select{width:100%;background:transparent;border:1px solid var(--border-2);border-radius:6px;padding:12px 11px;font-size:13.5px;color:var(--text);font-family:inherit;outline:none;appearance:none;-webkit-appearance:none;}
.qs-field input:hover,.qs-field select:hover{border-color:var(--text-secondary);}
.qs-field input:focus,.qs-field select:focus{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue);}
.qs-field input:focus+label,.qs-field select:focus+label{color:var(--blue);}
.qs-field input::-webkit-calendar-picker-indicator{filter:invert(.6);cursor:pointer;}
html.light .qs-field input::-webkit-calendar-picker-indicator{filter:none;opacity:.55;}
.qs-field select{cursor:pointer;padding-right:32px;}
.qs-field .sel-chev{position:absolute;right:9px;top:50%;transform:translateY(-50%);font-size:18px;color:var(--text-secondary);pointer-events:none;}
.qs-field select option{background:var(--paper);color:var(--text);}
.qs-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:2px;}
.qs-btn{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;padding:8px 14px;border-radius:6px;border:1px solid var(--border-2);background:transparent;color:var(--text);}
.qs-btn:hover{border-color:var(--blue);}
.qs-btn.pri{background:var(--blue);border-color:var(--blue);color:#fff;}
.qs-btn.pri:hover{filter:brightness(1.05);}
/* Clickable money block -> payment modal (replaces old Payment chip).
   v31: card treatment matches .lv-labor exactly; the Take Payment cue is
   styled by the shared .ll-cue,.lv-pay-cue rule up in the idbar section. */
.lv-pay{display:flex;flex-direction:column;align-items:flex-end;gap:2px;background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:7px 12px 0;cursor:pointer;transition:border-color .12s ease,box-shadow .12s ease,transform .12s ease;}
.lv-pay:hover{border-color:var(--blue);box-shadow:0 3px 10px rgba(0,0,0,.25);transform:translateY(-1px);}
.lv-pay-figs{display:flex;gap:18px;align-items:flex-end;margin-bottom:6px;} /* v32: the cue's old margin-top, moved (see .ll-stats). v33.2: flex-end, not baseline -- baseline aligned the labels' FIRST line, so "Total" (one line) floated its $ above the two wrapped labels' $; bottom-aligning the boxes levels the dollar values. */
/* v52: ONE RIBBON, BOTH DIRECTIONS (Tim). v51 gave the rail two controls - a
   grip in the gutter that only collapsed, and a tab at the viewport edge that
   only expanded - and that split was never a design choice: a control inside
   .lv-side dies when .lv.rail-collapsed sets display:none on the column
   (grid.css). Pinning the ribbon to the VIEWPORT instead of the column removes
   the constraint, so one control does both and .rail-grip is gone.
   IT DOES NOT MOVE BETWEEN STATES, which is the point: right:0 either way. The
   rail's right edge sits about 33px in from the viewport - .lv-scroll's 24px
   padding plus the 9px scrollbar - and the ribbon is about 22px wide, so while
   the rail is open the ribbon lands OUTSIDE it with room to spare. The only
   thing under it is the ledger's scrollbar, which the v51 tab already covered
   while collapsed.
   THE ARROW IS THE ONLY THING THAT FLIPS, and it flips in CSS off the same
   .lv.rail-collapsed class everything else keys on - so no JS holds rail state,
   which is the one property of the v51 two-button split worth keeping. Open:
   points right (push it away). Collapsed: points left (bring it back).
   v51's .lv-side{position:relative} went with the grip. It was the grip's
   anchor, and it was dead anyway: ledger.css loads before grid.css, which sets
   position:sticky, and before modals.css's <=1180px block, which sets static -
   so it lost in both directions, including the narrow case its own comment
   claimed it was there to cover. */
.rail-handle{display:flex;position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:60;flex-direction:column;align-items:center;gap:6px;padding:14px 5px;background:var(--panel);border:1px solid var(--border);border-right:none;border-radius:8px 0 0 8px;color:var(--text-secondary);cursor:pointer;box-shadow:-3px 0 12px rgba(0,0,0,.25);}
.rail-handle iconify-icon{font-size:17px;transition:transform .15s ease;}
.lv.rail-collapsed .rail-handle iconify-icon{transform:rotate(180deg);}
.rail-handle span{writing-mode:vertical-rl;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;}
.rail-handle:hover{color:var(--blue);border-color:var(--blue);}
/* body split */
.lv-body{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start;}
.lv.rail-collapsed .lv-body{grid-template-columns:minmax(0,1fr);}
.lv.rail-collapsed .lv-rail{display:none;}
/* hero add bar */
.lv-addbar{display:flex;align-items:center;gap:12px;background:var(--paper);border:1px solid var(--border);border-radius:8px;padding:10px 12px;margin-bottom:14px;position:sticky;top:0;z-index:15;}
.lv-search{flex:1;display:flex;align-items:center;gap:8px;background:transparent;border:1px solid var(--border-2);border-radius:8px;height:42px;padding:0 12px;min-width:0;}
.lv-search iconify-icon{font-size:20px;color:var(--text-secondary);}
.lv-search input{flex:1;background:none;border:none;outline:none;color:var(--text);font-size:13.5px;font-family:inherit;min-width:0;}
.lv-search input::placeholder{color:var(--text-disabled);}
.lv-addbtns{display:flex;align-items:center;gap:6px;}
.lv-addbtns button{display:flex;align-items:center;gap:6px;background:transparent;border:1px solid var(--border-2);border-radius:7px;padding:8px 12px;color:var(--text);font-size:12px;font-weight:600;white-space:nowrap;}
.lv-addbtns button iconify-icon{font-size:17px;color:var(--blue);}
.lv-addbtns button:hover{border-color:var(--blue);}
.lv-addbtns button .chev{font-size:15px;color:var(--text-secondary);margin-left:-2px;}
/* ledger group */
.lg-group{background:var(--paper);border:1px solid var(--border);border-radius:8px;overflow:hidden;margin-bottom:14px;}
.lg-ghead{display:flex;align-items:center;gap:12px;padding:13px 16px;background:var(--panel);border-bottom:1px solid var(--border);}
.lg-ghead .chev{font-size:20px;color:var(--text-secondary);cursor:pointer;}
.lg-gtitle{font-size:15px;font-weight:700;color:var(--text);}
.lg-gp{display:flex;align-items:center;gap:14px;margin-left:8px;}
.lg-gp .gp{font-size:12px;color:var(--text-secondary);font-weight:600;display:flex;align-items:center;gap:4px;}
.lg-gp .gp b{color:var(--text-secondary);font-weight:700;}
.lg-gp .gp.red{color:var(--red);}
.lg-gp .gp.warn{background:var(--red-15);color:var(--red);padding:3px 9px;border-radius:11px;} .lg-gp .gp.warn iconify-icon{font-size:14px;}
.lg-gsubtotal{margin-left:auto;font-size:15px;font-weight:700;color:var(--text);}
.lg-gtools{display:flex;gap:4px;color:var(--text-secondary);} .lg-gtools iconify-icon{font-size:18px;padding:5px;border-radius:6px;cursor:pointer;} .lg-gtools iconify-icon:hover{background:var(--hover);color:var(--text);}
.lg-table{width:100%;border-collapse:collapse;}
.lg-table th{text-align:left;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--text-secondary);padding:9px 14px;border-bottom:1px solid var(--border);}
.lg-table th.num,.lg-table td.num{text-align:right;}
.lg-table td{padding:12px 14px;font-size:13.5px;color:var(--text);border-bottom:1px solid var(--border);}
.lg-table tr:last-child td{border-bottom:none;}
.lg-table .item{font-weight:500;}
.lg-table .rowx{width:34px;text-align:right;color:var(--text-secondary);cursor:pointer;}
/* v11 - per-subgroup column picker + horizontal scroll on subgroup tables */
.lg-tscroll{overflow-x:auto;}
.lg-tscroll::-webkit-scrollbar{height:7px;} .lg-tscroll::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:4px;}
.lg-table th,.lg-table td{white-space:nowrap;}
.lg-table td.item{max-width:300px;overflow:hidden;text-overflow:ellipsis;}
.lg-sub-head .colbtn{font-size:17px;color:var(--text-secondary);padding:4px;border-radius:6px;cursor:pointer;margin-left:10px;flex-shrink:0;}
.lg-sub-head .colbtn:hover,.lg-sub-head .colbtn.on{background:var(--hover);color:var(--blue);}
.cp{display:none;position:fixed;width:330px;background:var(--paper);border:1px solid var(--border-2);border-radius:10px;z-index:180;box-shadow:0 14px 40px rgba(0,0,0,.5);overflow:hidden;}
.cp.open{display:block;} .cp.wide{width:460px;}
.cp-head{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--border);}
.cp-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-secondary);}
.cp-variant{margin-left:auto;display:inline-flex;align-items:center;gap:4px;border:1px dashed var(--border-2);border-radius:7px;padding:2px 2px 2px 7px;}
.cp-variant iconify-icon{font-size:13px;color:var(--amber);}
.cp-variant button{background:transparent;border:none;color:var(--text-secondary);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;padding:3px 7px;border-radius:5px;}
.cp-variant button.active{background:var(--blue);color:#fff;}
.cp-search{display:flex;align-items:center;gap:7px;padding:8px 12px;border-bottom:1px solid var(--border);}
.cp-search iconify-icon{font-size:16px;color:var(--text-disabled);}
.cp-search input{flex:1;min-width:0;background:transparent;border:none;outline:none;color:var(--text);font-size:13px;font-family:inherit;}
.cp-body{max-height:310px;overflow-y:auto;padding:6px;}
.cp-body::-webkit-scrollbar{width:5px;} .cp-body::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:3px;}
.cp-row{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:7px;font-size:13px;color:var(--text);cursor:pointer;}
.cp-row:hover{background:var(--hover);}
.cp-row.off{color:var(--text-disabled);}
.cp-row.locked{cursor:default;opacity:.75;}
.cp-row.cp-dragging{opacity:.45;background:var(--blue-16);}
.cp-grip{font-size:15px;color:var(--text-disabled);cursor:grab;flex-shrink:0;}
.cp-row.locked .cp-grip{visibility:hidden;}
.cp-lbl{flex:1;overflow:hidden;text-overflow:ellipsis;}
.cp-row .cbx{flex-shrink:0;}
.cp-panes{display:flex;gap:8px;}
.cp-pane{flex:1;min-width:0;border:1px solid var(--border);border-radius:8px;overflow:hidden;}
.cp-pane-h{display:flex;justify-content:space-between;gap:6px;padding:6px 9px;background:var(--panel);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text-disabled);border-bottom:1px solid var(--border);}
.cp-plist{min-height:130px;max-height:250px;overflow-y:auto;padding:4px;}
.cp-plist::-webkit-scrollbar{width:5px;} .cp-plist::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:3px;}
.cp-plist .cp-row{font-size:12.5px;padding:6px 7px;gap:6px;}
.cp-foot{display:flex;align-items:center;gap:6px;padding:8px 12px;border-top:1px solid var(--border);flex-wrap:wrap;}
.cp-foot button{background:transparent;border:1px solid var(--border-2);border-radius:6px;color:var(--text-secondary);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;padding:5px 9px;}
.cp-foot button:hover{border-color:var(--blue);color:var(--blue);}
.cp-note{flex-basis:100%;font-size:11px;color:var(--text-disabled);font-style:italic;}
/* v12 - cell click-to-edit.
   The editor is ABSOLUTELY POSITIONED over the cell so it contributes nothing
   to column sizing. An in-flow input carries an intrinsic width of ~20 chars
   and a select carries the width of its longest option - that is what made
   columns jump on click, and width:100% does not suppress it in an auto-layout
   table. A hidden ghost holds the original rendered content so the column keeps
   the width it already had, and widens only when typing outruns it.
   Padding here must stay in step with .lg-table td.
   v18 note: the subgroup tables are table-layout:fixed now, so column widths
   come from the header and the ghost is belt-and-braces rather than the only
   thing holding a column still. It stays because the identity cell's per-line
   editors still size themselves from it. */
.lg-table td{height:45px;vertical-align:middle;}
.lg-table td[data-edit]{cursor:text;}
.lg-table td[data-edit]:hover{background:var(--hover);box-shadow:inset 0 0 0 1px var(--border-2);}
.lg-table td.ce-locked{cursor:not-allowed;color:var(--text-secondary);}
.lg-table td.ce-locked:hover{background:var(--red-15);}
.ce-lock{font-size:13px;color:var(--text-disabled);margin-left:5px;vertical-align:middle;}
/* tr in the selector so an edited cell out-specifies .lg-table tr.sel td */
.lg-table tr td.editing{position:relative;background:var(--bg);box-shadow:inset 0 0 0 2px var(--blue);}
.lg-table tr td.ce-err{box-shadow:inset 0 0 0 2px var(--red);}
.ce-ghost{visibility:hidden;white-space:pre;pointer-events:none;}
.ce{position:absolute;inset:0;width:100%;min-width:0;margin:0;padding:12px 14px;border:0;outline:none;
    background:transparent;border-radius:0;overflow:hidden;
    font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit;
    color:inherit;text-align:inherit;}
/* v29: the editor OUTGROWS ITS COLUMN when what you type does not fit, and only
   then. Same idea as v22's hover-expand, which reveals a truncated value on
   hover - this is that behaviour carried into edit mode, so a name you cannot
   read is a name you can now read while correcting it.
   The measurement is the ghost, which already mirrors the typed text: it is what
   held the column still before v18 made the tables fixed-layout, and it grows on
   every keystroke. Sizing from it is why this needs no new measuring.
   The editing cell drops its own clipping while wide, and the ring moves onto the
   input, because a box-shadow inset on the td would still be drawn at column width.
   CLAMPED to the right edge of .lg-tscroll: that container clips its children, so
   growing past it would put the text somewhere you cannot see. */
/* v29.1: escaping the cell depends on .ce-wide ALONE. The first version asked
   for .editing too, and the identity path deliberately never sets it - v13.1
   puts the ring on the LINE, not the cell (see render: (on&&!ident)). So the
   part name, the one case this was built for, grew and was then clipped back
   to the column edge by the cell's own overflow:hidden.
   position:relative + z-index so the grown box paints over the NEXT cell
   rather than under its background: the identity path leaves the td unpositioned. */
.lg-table tr td.ce-wide{position:relative;overflow:visible;z-index:6;}
/* the ring only moves when the cell is the thing wearing it */
.lg-table tr td.editing.ce-wide{box-shadow:none;background:transparent;}
.ce.wide{right:auto;overflow:visible;background:var(--bg);border-radius:3px;
    box-shadow:0 0 0 2px var(--blue);}
/* the identity cell's per-line editors size from their own ghost, so they only
   need the 100% ceiling lifted to grow the same way */
.lg-table td.item .idn.ed.wide,.lg-table td.item .idtok.ed.wide{max-width:none;}
.ce[type=number]::-webkit-outer-spin-button,.ce[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.ce[type=number]{-moz-appearance:textfield;}
select.ce{cursor:pointer;appearance:none;-webkit-appearance:none;}
select.ce option{background:var(--paper);color:var(--text);font-weight:400;}
/* v13 - stacked part identity (the Tekmetric pattern).
   Part # and Brand ride UNDER the part name, which gives the parts grid back
   two columns of width. Neither field is deleted from the column model: turn
   either one back on in the column picker and it becomes its own column again
   and drops out of the stack, so nothing is ever printed twice. See
   identStack() in work-order-view.js. */
.lg-table td.item .idn,.lg-table td.item .idsub{display:block;overflow:hidden;text-overflow:ellipsis;}
.lg-table td.item .idsub{margin-top:3px;font-size:11.5px;font-weight:400;color:var(--text-secondary);}
.idtok{cursor:text;border-radius:3px;padding:0 2px;margin:0 -2px;}
.idtok:hover{background:var(--fill);color:var(--text);}
.idtok.add{font-style:italic;color:var(--text-disabled);}
.idsep{opacity:.5;}
/* v13.1 - per-line editing. Each line of the identity cell is its own click
   target and opens the ORDINARY overlay editor scoped to that line: a hidden
   ghost holds that line's text so the box is exactly its width, and the input
   is absolutely positioned over it. The row never changes height, and the blue
   ring hugs the line being edited rather than the whole cell - which is why
   the td does not take .editing on this path. The line that holds the open
   editor turns off its own overflow clipping so the ring isn't cut off. */
.lg-table td.item .idn.ed,.lg-table td.item .idsub.subed{overflow:visible;}
.lg-table td.item .idn.ed,.lg-table td.item .idtok.ed{position:relative;display:inline-block;max-width:100%;
    padding:0 3px;margin:0 -3px;border-radius:3px;background:var(--bg);box-shadow:0 0 0 2px var(--blue);}
.lg-table td.item .idn.ed .ce,.lg-table td.item .idtok.ed .ce{padding:0 3px;}
.lg-table td.item .idtok.ed{font-style:normal;color:var(--text);}
/* column picker: Brand / Part # are stacked, not missing - say so */
.cp-stk{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--text-disabled);border:1px solid var(--border);border-radius:9px;padding:1px 6px;flex-shrink:0;white-space:nowrap;}