/* work-order-view.grid.css -- v16 rail / labels / warranty switch; v17 drag reorder; v18 resize + header reorder; v19 bulk edit + Technician Notes

   Part 5 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. */

/* ============================================================
   v16 - DETAILS RAIL, LABELS, TOTALS PLACEMENT, WARRANTY TOGGLE
   These rules deliberately sit AFTER the right-rail and Totals blocks
   above, because two of them are overrides: the rail stops being the
   sticky element (its new wrapper is), and the Totals card stops being
   right-aligned with a max width (the column already sizes it).
   ============================================================ */
/* the right column: rail on top, Totals underneath, sticky as one piece */
.lv-side{display:flex;flex-direction:column;gap:16px;position:sticky;top:0;}
.lv-rail{position:static;}
.lv.rail-collapsed .lv-side{display:none;}
.lv-totals{max-width:none;margin:0;}
/* labels on the header line - removable chips plus the dashed add chip */
.lbl{display:inline-flex;align-items:center;gap:4px;background:var(--fill);color:var(--text);
    font-size:11px;font-weight:600;padding:2px 6px 2px 9px;border-radius:12px;white-space:nowrap;}
.lbl .x{font-size:13px;color:var(--text-secondary);cursor:pointer;border-radius:50%;}
.lbl .x:hover{background:var(--fill-strong);color:var(--text);}
.lv-id-sub .labels-chip:hover{border-color:var(--blue);color:var(--blue);}
/* a rail row is tighter than a form row, so the toggle shrinks to match */
.switch.sm{gap:6px;font-size:12px;}
.switch.sm .track{width:28px;height:16px;}
.switch.sm .thumb{width:12px;height:12px;}
.switch.sm.on .thumb{left:14px;}
/* Warranty is a BOOLEAN in the ERP, not a term - a switch in the cell, and
   flipping it on opens the modal for a reason + who is at fault. Green when
   on, because a warranty line is comped rather than sold. */
.wsw{display:inline-flex;align-items:center;gap:7px;cursor:pointer;}
.wsw .track{width:30px;height:17px;border-radius:17px;background:var(--track);position:relative;transition:.2s;flex-shrink:0;}
.wsw .thumb{position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;background:#fff;transition:.2s;}
.wsw.on .track{background:var(--green);} .wsw.on .thumb{left:15px;}
.wsw .wt{font-size:11px;color:var(--text-secondary);}
.wsw.on .wt{color:var(--green);font-weight:600;}
/* a comped warranty line still shows its quoted price, but its total is $0 */
.lg-table td.warr{color:var(--text-disabled);}
/* group header breakdown: only the types the group actually has */
.lg-bd{display:flex;align-items:center;gap:12px;margin-left:12px;}
.lg-bd .b{font-size:11.5px;color:var(--text-secondary);font-weight:600;white-space:nowrap;}
.lg-bd .b b{color:var(--text);font-weight:700;margin-left:4px;}
/* the warranty modal's selects need what .gm-field only gave inputs */
.gm-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;cursor:pointer;}
.gm-field select:focus{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue);}
.gm-field select option{background:var(--paper);color:var(--text);}

/* ============================================================
   v17 - DRAG REORDER + CROSS-GROUP DROP
   Two gestures, matching the ERP. Dragging a row by its handle reorders it
   inside its own table (MUI rowReordering); dragging it onto another group
   card moves it there (the Grouping module's useCrossGroupDrag).

   The handle CELL is always present; only its grip and the row's draggable
   flag come and go, because dropping the column would reflow the table.
   ============================================================ */
.lg-table th.rowdrag,.lg-table td.rowdrag{width:30px;padding-left:10px;padding-right:0;}
.rdrag{font-size:17px;color:var(--text-disabled);cursor:grab;border-radius:5px;padding:2px;}
.rdrag:hover{color:var(--text);background:var(--hover);}
.rdrag:active{cursor:grabbing;}
/* the row being dragged stays in place, dimmed, while its copy follows */
.lg-table tr.dragging td{opacity:.4;}
/* the card being dragged INTO. The source card never gets this - see the
   source-group short-circuit in work-order-view.js. */
.lg-group.dropok{border-color:var(--blue);box-shadow:0 0 0 2px var(--blue-24);}
.lg-group.dropok .lg-ghead{background:var(--blue-16);}
/* Ungrouped is a real drop target, not a no-op, so its banner highlights too */
.ug-banner.dropok{border-color:var(--blue);box-shadow:0 0 0 2px var(--blue-24);}
/* while a drag is live, cells must not offer their edit affordance */
body.row-dragging .lg-table td[data-edit]{cursor:default;}
body.row-dragging .lg-table td[data-edit]:hover{background:none;box-shadow:none;}

/* ============================================================
   v18 - COLUMN RESIZE + HEADER REORDER
   The ERP's CustomDataGrid lets you drag a column edge to resize and drag a
   header to reorder, persisting both per user. Both now work inline here.

   This is the change that makes the subgroup tables table-layout:FIXED.
   Auto-layout sizes columns from their content, so a width set on a header
   is only a suggestion and a resize would spring back. Fixed layout makes
   the header widths authoritative - which is also why every cell now clips
   with an ellipsis instead of stretching its column.

   The identity column deliberately carries no width so it absorbs the slack
   and the table always fills its container; drag its edge and it takes a
   fixed width like any other.
   ============================================================ */
.lg-table{table-layout:fixed;}
.lg-table th{position:relative;overflow:hidden;text-overflow:ellipsis;}
.lg-table td{overflow:hidden;text-overflow:ellipsis;}
.lg-table td.item{max-width:none;}
.lg-table th.rowx{width:34px;}
/* v28.1: the three utility cells carry CONTROLS, not values, so they must never
   render an ellipsis. v18 gave every td overflow:hidden + text-overflow:ellipsis
   and v22 skipped these same cells for hover-expand on exactly that reasoning -
   a clipped one showed a bare "..." with no tooltip, no hover-expand and no
   click, reading as a second icon beside the row kebab. Parts is the only table
   whose columns are tight enough to trigger it. */
.lg-table td.rowdrag,.lg-table td.rowcbx,.lg-table td.rowx,
.lg-table th.rowdrag,.lg-table th.rowcbx,.lg-table th.rowx{text-overflow:clip;}
/* a header you can pick up and move */
.lg-table th.movable{cursor:grab;}
.lg-table th.movable:hover{color:var(--text);}
.lg-table th.th-dragging{opacity:.5;background:var(--blue-16);}
/* the insertion point, drawn on the header the dragged one would land before */
.lg-table th.th-drop{box-shadow:inset 2px 0 0 var(--blue);}
/* the resize grabber: a hit area wider than the hairline it draws */
.rz{position:absolute;top:0;right:0;width:9px;height:100%;cursor:col-resize;z-index:2;}
.rz::after{content:"";position:absolute;top:24%;right:4px;width:1px;height:52%;background:var(--border-2);}
.rz:hover::after{background:var(--blue);width:2px;right:3px;}
/* during a resize the cursor must not flicker as it crosses cells, and no
   text may select under the drag */
body.col-resizing{cursor:col-resize;user-select:none;-webkit-user-select:none;}
body.col-resizing .rz::after{background:var(--blue);width:2px;right:3px;}

/* ============================================================
   v19 - GROUP BULK EDIT + TECHNICIAN NOTES
   The group pencil now opens every editable cell in that group at once, so
   a whole system can be priced in one pass. Rename moved to the group kebab
   to free the pencil.

   v18's fixed layout is what makes this cheap: an in-flow input cannot push
   its column any more, so bulk cells need none of v12's ghost-and-overlay
   machinery - they are plain inputs at width:100%.

   Fields auto-save as you leave them. An invalid value marks the cell and is
   NOT written, so the typed text stays on screen to be corrected - trapping
   the caret the way the single-cell editor does would be unbearable across a
   whole group.
   ============================================================ */
.lg-group.bulk{border-color:var(--blue);box-shadow:0 0 0 2px var(--blue-24);}
.lg-group.bulk .lg-ghead{background:var(--blue-16);}
.lg-gtools iconify-icon.on,.lg-gtools iconify-icon.on:hover{background:var(--blue);color:#fff;}
.bulk-hint{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;margin-left:10px;
    background:var(--paper);border:1px solid var(--blue-24);border-radius:11px;padding:3px 10px;
    font-size:11px;font-weight:600;color:var(--blue);}
.bulk-hint iconify-icon{font-size:14px;}
.be{width:100%;min-width:0;margin:0;padding:6px 8px;border:1px solid var(--border-2);border-radius:6px;
    background:var(--bg);color:inherit;font-family:inherit;font-size:13px;text-align:inherit;outline:none;}
.be:focus{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue);}
.be.err{border-color:var(--red);box-shadow:0 0 0 1px var(--red);}
.be[type=number]::-webkit-outer-spin-button,.be[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.be[type=number]{-moz-appearance:textfield;}
select.be{cursor:pointer;appearance:none;-webkit-appearance:none;}
select.be option{background:var(--paper);color:var(--text);}
/* a cell bulk edit cannot open - computed, or a sourced part's cost - stays
   as text so the row still reads as a row */
.lg-table td.be-off{color:var(--text-disabled);}

/* Technician Notes: a collapsed link at the foot of the group, opening a
   panel with the customer-facing note and the internal one side by side.
   Net-new - the ERP has no per-group notes today, hence the nw-flag. */
.lg-notes{padding:0 14px 12px;background:var(--panel);}
.lg-notes-link{display:inline-flex;align-items:center;gap:7px;background:transparent;border:none;padding:2px 0;
    color:var(--blue);font-size:12px;font-weight:600;}
.lg-notes-link iconify-icon{font-size:16px;}
.lg-notes-link .dot{width:6px;height:6px;border-radius:50%;background:var(--amber);flex-shrink:0;}
.lg-notes-panel{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:9px;}
.nt{background:var(--paper);border:1px solid var(--border);border-radius:8px;padding:9px 12px 6px;}
/* the internal note is tinted so it can never be mistaken for the one the
   customer sees */
.nt.int{background:var(--amber-15);border-color:var(--amber-15);}
.nt-h{display:flex;align-items:center;gap:6px;margin-bottom:5px;
    font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text-secondary);}
.nt.int .nt-h{color:var(--amber);}
.nt-h iconify-icon{font-size:13px;}
.nt textarea{width:100%;min-height:62px;resize:vertical;background:transparent;border:none;outline:none;
    color:var(--text);font-family:inherit;font-size:12.5px;line-height:1.5;padding:0;}
.nt textarea::placeholder{color:var(--text-disabled);}
@media(max-width:900px){ .lg-notes-panel{grid-template-columns:1fr;} }

/* ============================================================
   v25 - GROUP NAME EDITING
   The title is editable by clicking it or by opening the group in bulk.
   v25 added both; the kebab that used to be the only route was removed in
   v28, once the title itself had become the obvious way in.
   ============================================================ */
/* the title reads as a click target, matching the line-item cells */
.lg-gtitle.editable{cursor:text;border-radius:4px;padding:1px 5px;margin:0 -5px;}
.lg-gtitle.editable:hover{background:var(--fill);}
/* in bulk the header input sits in a tight row, so it sizes to the header
   rather than taking the .be full-width treatment the cells use */
.lg-gtitle-input.bulk{min-width:0;width:220px;max-width:38%;padding:4px 8px;font-size:14px;}

/* ============================================================
   v28 - GROUP SAVE, GROUP DRAG, AND THE NOTES STRIP
   The pencil becomes a tick while a group is in bulk, a second Save sits at
   the foot of the card, and the group kebab is gone - the grip takes its
   slot. The bulk hint pill went with it: two save controls say what one
   sentence was saying.
   ============================================================ */
/* the pencil-turned-tick reads as the affirmative action it now is */
.lg-gtools iconify-icon.save{color:var(--green);}
.lg-gtools iconify-icon.save:hover{background:var(--green-15);}
/* the group grip. It took the kebab's slot in v28; v30.1 moved it to the FAR
   LEFT of the header, ahead of the select-all, so a card is grabbed in the same
   place and the same order as a row (grip, then checkbox) instead of the grip
   sitting among the card's action icons. It only shows on hover so a resting
   card is not covered in handles - the row grips do the same. The slot keeps
   its width whether or not the grip is in it, so opening a group in bulk does
   not shift the header sideways. Leaving .lg-gtools cost the icon that block's
   font-size and colour, which is why both are set here. */
.lg-ghead .lg-gdrag{width:18px;flex-shrink:0;display:flex;align-items:center;}
.lg-ghead .gdrag{font-size:18px;color:var(--text-secondary);cursor:grab;opacity:0;transition:opacity .12s ease;}
.lg-group:hover .lg-ghead .gdrag{opacity:.55;}
.lg-ghead .gdrag:hover{opacity:1;}
.lg-ghead .gdrag:active{cursor:grabbing;}
.lg-group.gdragging{opacity:.45;}
/* the second Save, at the foot of the card beside + Part / + Labor / + Sublet.
   A group in bulk can be taller than the viewport, so finishing should not
   mean scrolling back to the header. */
.lg-add .lg-save{margin-left:auto;border-style:solid;border-color:var(--green);
    color:var(--green);background:var(--green-15);}
.lg-add .lg-save:hover{filter:brightness(1.08);border-color:var(--green);color:var(--green);}
.lg-add .lg-save iconify-icon{font-size:16px;}