/* ====================================================================
   Work Orders — Phase 2 (Items + per-item proofs)
   Loaded globally; everything is scoped under the show page wrapper or
   the explicit modals below so it can't leak into other pages.
   ==================================================================== */

/* ── Tab nav: items count chip ───────────────────────────────────── */
.wo-tab-count {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 700;
  background: var(--bg);
  color: var(--muted);
  border: 1px solid var(--border);
  vertical-align: middle;
}
.wo-tab-count:empty { display: none; }
.wo-tab-btn.active .wo-tab-count {
  background: var(--accent-muted);
  color: var(--accent);
  border-color: var(--accent);
}

/* ── Items toolbar (search + chips + add button) ──────────────────── */
.wo-items-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  flex-shrink: 0;
}
.wo-items-search {
  width: 280px;
  max-width: 100%;
}
.wo-items-status-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.wo-items-chip {
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--muted);
  font-size: .76rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.wo-items-chip:hover { color: var(--text); border-color: var(--text-2, var(--muted)); }
/* Active state mirrors the count-badge pattern: muted bg + matching
   border + matching text. Each status chip lights up in its own colour. */
.wo-items-chip.active[data-status="ALL"] {
  background: var(--accent-muted); color: var(--accent); border-color: var(--accent);
}
.wo-items-chip.active[data-status="REVIEW"] {
  background: rgba(108,117,125,.14); color: #6c757d; border-color: #6c757d;
}
.wo-items-chip.active[data-status="COMMENTED"] {
  background: rgba(13,110,253,.14); color: #0d6efd; border-color: #0d6efd;
}
.wo-items-chip.active[data-status="UPDATED"] {
  background: rgba(255,123,0,.18); color: #d36000; border-color: #d36000;
}
.wo-items-chip.active[data-status="APPROVED"] {
  background: rgba(22,163,74,.16); color: #16a34a; border-color: #16a34a;
}
.wo-items-chip.active[data-status="CANCELED"] {
  background: rgba(220,38,38,.14); color: #dc2626; border-color: #dc2626;
}
/* ── Items table (Excel-style inline editing) ─────────────────────── */
#woItemsGrid {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: var(--bg);
}
.wo-items-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--muted);
}
.wo-items-empty i { font-size: 2rem; opacity: .5; }

.wo-items-table-wrap {
  overflow-x: auto;
  background: var(--surface);
}
.wo-items-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .86rem;
}
.wo-items-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface);
  color: var(--muted);
  font-size: .76rem;
  font-weight: 600;
  text-align: left;
  padding: 10px 10px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.wo-items-table .wo-th-actions { text-align: right; }
.wo-items-table tbody td {
  padding: 4px 6px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.wo-items-table tbody tr:hover > td { background: rgba(0,0,0,.02); }
[data-theme="dark"] .wo-items-table tbody tr:hover > td { background: rgba(255,255,255,.03); }

/* Column widths via colgroup hooks */
.wo-items-table .wo-col-check   { width: 36px; }
.wo-items-table .wo-th-check,
.wo-items-table .wo-td-check {
  text-align: center;
  padding: 0 6px;
}
.wo-items-table .wo-bulk-row,
.wo-items-table .wo-bulk-master {
  cursor: pointer;
  /* Native default size feels lighter and matches OS conventions —
     was forcing 16×16 which read large next to the small art-number
     and inputs of the row. */
  accent-color: var(--accent);
}
/* Dark mode: drop the orange accent — too saturated against the dark
   surface (and on macOS it can also leak the OS-level highlight color
   when no accent-color is set). Use a neutral gray. */
html[data-theme="dark"] .wo-items-table .wo-bulk-row,
html[data-theme="dark"] .wo-items-table .wo-bulk-master {
  accent-color: #6b7280;
}

/* Bulk-action toolbar — sits above the table, surfaces with the first
   selection. Outline action buttons (house style); destructive Delete
   uses the danger outline. */
.wo-bulk-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 12px;
  margin-bottom: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.wo-bulk-count-wrap {
  color: var(--muted);
  font-size: .85rem;
}
.wo-bulk-count-wrap .wo-bulk-count {
  color: var(--text);
  font-weight: 700;
}
.wo-bulk-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex-wrap: wrap;
}
.wo-bulk-clear-btn {
  color: var(--muted);
  text-decoration: none;
  font-size: .8rem;
}
.wo-bulk-clear-btn:hover { color: var(--text); }

/* ── Cross-tab change highlight ───────────────────────────────────
   When an item was changed in the OTHER tab, the row signals it via:
     • art_number text painted yellow (the visual cue)
     • a small dismiss dot at the end of the Name cell (click to mark
       just that item as reviewed)
   The dot used to live in the checkbox cell but it bumped the
   checkbox off-axis; the Name cell has horizontal slack instead.
*/
/* Unread-marker yellow — single source of truth. Same tone across:
   • bolita next to changed entities (item rows, comments, attachments,
     linked excel, WO name, etc.)
   • count badge inside the bell chip
   • "Mark as reviewed" button
   • bell icon + "Since your last review" header
   Light = darker amber so the contrast on white surface reads; dark
   keeps the lighter Tailwind amber-400 which already reads great on
   the dim panels. */
:root {
  --wo-unread-yellow: #d5ac0d;
  --wo-unread-yellow-soft: rgba(213, 172, 13, .25);
  --wo-unread-yellow-tint: rgba(213, 172, 13, .12);
}
html[data-theme="dark"] {
  --wo-unread-yellow: #fbbf24;
  --wo-unread-yellow-soft: rgba(251, 191, 36, .28);
  --wo-unread-yellow-tint: rgba(251, 191, 36, .14);
}

.wo-review-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--wo-unread-yellow);
  box-shadow: 0 0 0 2px var(--wo-unread-yellow-soft);
  flex: 0 0 auto;
  margin-left: .45em;   /* a character-wide gap from the text it trails */
  vertical-align: middle;
}

/* Title input wrapper — the bolita sits right after the last
   character of the WO name. We use `field-sizing: content` so the
   input shrinks to its text width; the dot is a normal inline
   sibling that flows naturally next to it. The wrapper still
   participates in the banner flex so the layout stays unchanged
   when there's no bolita. */
.wo-title-input-wrap {
  display: inline-flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}
.wo-title-input-wrap .wo-title-input {
  field-sizing: content;       /* shrink to content (Chrome 123+, FF 131+, Safari 17.4+) */
  flex: 0 1 auto;
  max-width: 520px;
  min-width: 60px;
}
.wo-title-input-wrap .wo-title-unread-dot {
  pointer-events: none;
  /* margin-left from the base .wo-review-dot already gives the
     character-wide gap between text and bolita. */
}
.wo-review-dot-row {
  cursor: default;
}

/* Yellow art-number cell text — the primary "this row changed" cue. */
.wo-items-table .wo-cell.wo-cell-unseen {
  color: var(--wo-unread-yellow);
  font-weight: 700;
}

/* Name cell wraps the input + dismiss dot so the dot floats at the
   right edge without breaking the input's full-width feel. */
.wo-name-cell-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}
.wo-name-cell-wrap .wo-cell {
  flex: 1 1 auto;
  min-width: 0;
}

/* Legacy per-tab "X items changed in the other tab" bar styles removed
   2026-05-10 — superseded by the WO-level review chip + per-entity
   bolitas driven from audit_log + last_reviewed_at. */

/* Bulk toolbar buttons — same dimensions as the rest of the toolbar
   (matches .btn-outline-info-soft / .btn-outline-accent: 4px 12px,
   .78rem font, weight 600). House style: outline + bold text, soft
   tinted hover. Default = neutral gray (Status / Material). */
.wo-bulk-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  font-size: .78rem;
  font-weight: 600;
  background: transparent;
  color: #6b7280;
  border: 1px solid #6b7280;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  transition: background .12s, color .12s, border-color .12s;
}
.wo-bulk-btn:hover,
.wo-bulk-btn:focus {
  background: rgba(107, 114, 128, .12);
  color: #6b7280;
  border-color: #6b7280;
}
html[data-theme="dark"] .wo-bulk-btn {
  color: #9ca3af;
  border-color: #9ca3af;
}
html[data-theme="dark"] .wo-bulk-btn:hover,
html[data-theme="dark"] .wo-bulk-btn:focus {
  background: rgba(156, 163, 175, .14);
  color: #9ca3af;
  border-color: #9ca3af;
}
/* PDF / Generate Files — yellow matching the modal icon + progress bar.
   Both rules carry the html[data-theme] selector when the dark variant
   is intended so dark-mode generic rules don't override them. */
:where(html, html[data-theme="light"]) .wo-bulk-btn-pdf,
html[data-theme="dark"] .wo-bulk-btn-pdf {
  color: var(--wo-unread-yellow);
  border-color: var(--wo-unread-yellow);
}
:where(html, html[data-theme="light"]) .wo-bulk-btn-pdf:hover,
:where(html, html[data-theme="light"]) .wo-bulk-btn-pdf:focus,
html[data-theme="dark"] .wo-bulk-btn-pdf:hover,
html[data-theme="dark"] .wo-bulk-btn-pdf:focus {
  background-color: var(--wo-unread-yellow-tint);
  color: var(--wo-unread-yellow);
  border-color: var(--wo-unread-yellow);
}
/* Accent — Moksha orange outline variant. Used by primary CTAs that
   live in modals (e.g. Save Changes in the profile modal). */
:where(html, html[data-theme="light"]) .wo-bulk-btn-accent,
html[data-theme="dark"] .wo-bulk-btn-accent {
  color: var(--accent);
  border-color: var(--accent);
}
:where(html, html[data-theme="light"]) .wo-bulk-btn-accent:hover,
:where(html, html[data-theme="light"]) .wo-bulk-btn-accent:focus,
html[data-theme="dark"] .wo-bulk-btn-accent:hover,
html[data-theme="dark"] .wo-bulk-btn-accent:focus {
  background: rgba(255, 123, 0, .12);
  color: var(--accent);
  border-color: var(--accent);
}

/* Material — teal outline variant, distinct from Status (gray). The
   dark-mode rules carry the same html[data-theme] prefix so the
   generic dark .wo-bulk-btn rule doesn't win on specificity. */
/* Material bulk — neutral. Was teal; switched 2026-05-17 because
   Material is a bulk attribute update, not a "pick from a library"
   action like Add-from-Catalog. Inherits the base .wo-bulk-btn
   neutral palette; this stub kept so the class name still resolves. */

/* Destructive — red outline variant. The dark-mode rules below need
   the same html[data-theme] prefix used by the generic .wo-bulk-btn
   dark override; otherwise the gray rule wins on specificity and the
   button reads gray in dark mode. */
.wo-bulk-btn-danger,
html[data-theme="dark"] .wo-bulk-btn-danger {
  color: #dc3545;
  border-color: #dc3545;
}
.wo-bulk-btn-danger:hover,
.wo-bulk-btn-danger:focus,
html[data-theme="dark"] .wo-bulk-btn-danger:hover,
html[data-theme="dark"] .wo-bulk-btn-danger:focus {
  background: rgba(220, 53, 69, .12);
  color: #dc3545;
  border-color: #dc3545;
}

/* Native form controls follow the page theme so the checkboxes go dark
   in dark mode (Chrome / Safari / Firefox all honor color-scheme). */
html[data-theme="dark"] {
  color-scheme: dark;
}
.wo-items-table .wo-col-art     { width: 104px; }

/* Row save flash — subtle green tint that fades out so an Excel-style
   save lands with a visual ack instead of a toast. ~700ms matches the
   FA per-cell .ea-cell-saved feel. */
@keyframes woRowSavedFlash {
  0%   { background-color: rgba(22, 163, 74, .18); }
  100% { background-color: transparent; }
}
.wo-row-saved-flash > td {
  animation: woRowSavedFlash .7s ease-out;
}
.wo-items-table .wo-col-name    { min-width: 180px; }
.wo-items-table .wo-col-unit    { width: 70px; }
.wo-items-table .wo-col-num     { width: 80px; }
.wo-items-table .wo-col-mat     { min-width: 140px; }
.wo-items-table .wo-col-comments { min-width: 240px; }
.wo-items-table .wo-col-status  { width: 130px; }
.wo-items-table .wo-col-actions { width: 1%; white-space: nowrap; }

/* Inline cell inputs — sober Excel-style. Mirrors .qb-cell: transparent
   until interaction, neutral var(--bg) tint on hover/focus, subtle gray
   border on focus only. No accent tint on .is-dirty — the Update button
   is the save cue. */
.wo-cell {
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  padding: 6px 8px;
  font-size: .86rem;
  color: var(--text);
  border-radius: 4px;
  font: inherit;
  transition: border-color .12s, background .12s;
}
.wo-cell:hover { background: var(--bg); }
.wo-cell:focus {
  outline: none;
  background: var(--bg);
  border-color: rgba(127, 127, 127, .55);
}
.wo-cell:disabled { color: var(--muted); cursor: not-allowed; }
.wo-cell-num { text-align: right; }
.wo-cell-art { font-weight: 700; color: var(--muted); letter-spacing: .04em; text-align: center; }
.wo-cell-select { padding-right: 22px; }

/* Workflow chip — pill-styled select on Display rows and Design (Artwork)
   rows. Background + text colour driven by [data-workflow="..."] so the
   user reads the mode at a glance. The chip is still a native <select>
   so the click pops the native picker; dirty + Update flow works
   unchanged.
   - `.wo-cell-workflow` is the Display chip (cascades to spawned child
     items on change — see the cascade handler in items.js).
   - `.wo-cell-art-workflow` is the Design chip on ARTWORK rows. Same
     visuals, no cascade — it's just a per-row field edit (ART_AND_PRINT
     vs ART_ONLY) that decides whether the item also appears in Printing. */
.wo-cell-workflow,
.wo-cell-art-workflow {
  -webkit-appearance: none;
  appearance: none;
  padding: 2px 22px 2px 10px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--bg);
  color: var(--muted);
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 11px) calc(50% - 2px),
    calc(100% - 7px)  calc(50% - 2px);
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}
/* "Complete" state — covers both the legacy FULL_PROOF enum value
   and the canonical ART_AND_PRINT (items.js normalizes the chip's
   data-workflow to ART_AND_PRINT post-catalog era, so without this
   double selector the chip rendered border-less + colour-less). */
.wo-cell-workflow[data-workflow="FULL_PROOF"],
.wo-cell-workflow[data-workflow="ART_AND_PRINT"] {
  background-color: rgba(255,123,0,.12);
  color: #c2410c;
  border-color: rgba(255,123,0,.5);
}
.wo-cell-workflow[data-workflow="FILE_ONLY"] {
  background-color: rgba(13,110,253,.12);
  color: #0d6efd;
  border-color: rgba(13,110,253,.5);
}
.wo-cell-workflow[data-workflow="NONE"] {
  background-color: rgba(107,114,128,.14);
  color: #6b7280;
  border-color: rgba(107,114,128,.5);
}
html[data-theme="dark"] .wo-cell-workflow[data-workflow="FULL_PROOF"],
html[data-theme="dark"] .wo-cell-workflow[data-workflow="ART_AND_PRINT"] {
  background-color: rgba(255,123,0,.18);
  color: #fb923c;
  border-color: rgba(255,123,0,.55);
}
html[data-theme="dark"] .wo-cell-workflow[data-workflow="FILE_ONLY"] {
  background-color: rgba(59,130,246,.18);
  color: #60a5fa;
  border-color: rgba(59,130,246,.55);
}
html[data-theme="dark"] .wo-cell-workflow[data-workflow="NONE"] {
  background-color: rgba(156,163,175,.18);
  color: #9ca3af;
  border-color: rgba(156,163,175,.55);
}
/* Design chip states — ART_AND_PRINT is the "active" state (item also
   lives in Printing tab, paints in Moksha orange). ART_ONLY is the
   "design-only" state (no print work, neutral gray). */
.wo-cell-art-workflow[data-workflow="ART_AND_PRINT"] {
  background-color: rgba(255,123,0,.12);
  color: #c2410c;
  border-color: rgba(255,123,0,.5);
}
.wo-cell-art-workflow[data-workflow="ART_ONLY"] {
  background-color: rgba(107,114,128,.14);
  color: #6b7280;
  border-color: rgba(107,114,128,.5);
}
html[data-theme="dark"] .wo-cell-art-workflow[data-workflow="ART_AND_PRINT"] {
  background-color: rgba(255,123,0,.18);
  color: #fb923c;
  border-color: rgba(255,123,0,.55);
}
html[data-theme="dark"] .wo-cell-art-workflow[data-workflow="ART_ONLY"] {
  background-color: rgba(156,163,175,.18);
  color: #9ca3af;
  border-color: rgba(156,163,175,.55);
}
.wo-items-table .wo-col-workflow { width: 140px; }

/* Per-tab subtotal footer (Display / Prop / Misc). Right-aligned,
   tucked under the table-wrap. Live-updates as the user types qty /
   unit_price (see recomputeTabSubtotal in items.js). */
.wo-items-subtotal {
  padding: 10px 16px 18px;
  text-align: right;
  font-size: .86rem;
  color: var(--muted);
}
.wo-items-subtotal strong {
  color: var(--text);
  font-weight: 700;
  margin-left: 6px;
  font-size: .98rem;
}

/* ── Builder — unified sectioned overview ─────────────────────── */
.wo-builder-sections {
  padding: 14px 18px 24px;
}
/* Strip above .wo-builder-sections that hosts the routing pill and
   the bulk toolbar. Same horizontal padding as the sections below so
   the pill / toolbar align with the table cards. */
.wo-builder-top {
  padding: 14px 18px 0;
}
.wo-builder-top .wo-bulk-toolbar { margin-bottom: 12px; }
.wo-builder-section {
  margin-bottom: 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.wo-builder-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.wo-builder-section-label {
  /* Title Case — keep the natural casing from the JS labels. */
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--accent);
}
.wo-builder-section-count {
  font-size: .72rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.wo-builder-table {
  /* Fixed layout makes every section's columns respect the declared
     widths exactly so the # / Ship / Name columns line up vertically
     across Design / Printing / Displays / Props / Misc tables (each
     section has its own table with a different column count, so auto
     layout drifts the leading columns a few pixels apart). */
  table-layout: fixed;
}
.wo-builder-table th,
.wo-builder-table td {
  padding: 6px 10px !important;
  font-size: .86rem;
  vertical-align: middle;
}
/* Long-text columns need overflow handling under table-layout: fixed
   so a beefy Material / Comments / Notes value doesn't push the cell
   past its declared width. Ellipsis preserves the spec-card density. */
.wo-builder-table .wo-builder-material,
.wo-builder-table .wo-builder-notes {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wo-builder-table .wo-builder-art {
  /* Lock the width on both bounds so every Builder section's # column
     sits at the exact same X offset — without this, the auto-layout
     redistributes width per-table (each section has a different column
     count, so the # cell drifts a few pixels between Printing /
     Displays / Props / Misc). */
  width: 78px;
  min-width: 78px;
  max-width: 78px;
  text-align: center;
  color: var(--muted);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* Force-center the `#` header — without this the cell-level rule above
   loses to Bootstrap's `th { text-align: inherit }` because the inherit
   chain resolves to left in the table. Matches the per-column thead
   pattern used below for .wo-builder-name / .wo-builder-material. */
.wo-show-page .wo-builder-table thead th.wo-builder-art { text-align: center; }
/* Bulk-select column inside the Overview/Builder table. Same role as
   .wo-th-check / .wo-td-check in renderTable views — admin-only,
   feeds the bulk shipment modal. */
.wo-builder-table .wo-builder-check {
  width: 32px;
  min-width: 32px;
  max-width: 32px;
  text-align: center;
  padding: 0 6px;
}

/* Ship column — compact destination badge per item (orange truck for
   SHIPPING, teal pin for DELIVERY). Bulk-routed from the Overview
   toolbar; em dash means unrouted. */
.wo-builder-table .wo-builder-ship {
  width: 80px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.wo-builder-ship-empty {
  color: var(--muted);
  opacity: .55;
}
.wo-builder-ship-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.2;
  border: 1px solid transparent;
}
.wo-builder-ship-badge i { font-size: .78rem; }
.wo-builder-ship-shipping {
  color: #b45309;
  background: rgba(245, 158, 11, .12);
  border-color: rgba(245, 158, 11, .35);
}
.wo-builder-ship-delivery {
  color: #0f766e;
  background: rgba(13, 148, 136, .12);
  border-color: rgba(13, 148, 136, .35);
}
[data-theme="dark"] .wo-builder-ship-shipping {
  color: #fbbf24;
  background: rgba(245, 158, 11, .18);
  border-color: rgba(245, 158, 11, .45);
}
[data-theme="dark"] .wo-builder-ship-delivery {
  color: #5eead4;
  background: rgba(13, 148, 136, .18);
  border-color: rgba(13, 148, 136, .45);
}

/* Routing summary pill — top of the Overview grid. Three flavors:
   empty (no items routed), partial (some routed), full (all routed).
   Click jumps to the Shipping & Invoicing tab. */
/* Slot inside the Overview toolbar that hosts the routing pill.
   Margin-left adds breathing room from the Quote dropdown so the
   toolbar reads as: actions … <gap> … pill. */
.wo-routing-pill-slot {
  display: inline-flex;
  align-items: center;
  margin-left: 16px;
}
.wo-routing-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background-color: var(--surface);
  color: var(--text);
  font-size: .82rem;
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease;
}
.wo-routing-pill:hover { background-color: var(--bg); }
.wo-routing-pill i { font-size: .9rem; }
.wo-routing-pill-sep { color: var(--muted); }
.wo-routing-pill-empty {
  color: var(--muted);
  border-color: var(--border);
}
.wo-routing-pill-partial {
  color: #b45309;
  border-color: rgba(245, 158, 11, .45);
  background-color: rgba(245, 158, 11, .08);
}
.wo-routing-pill-partial:hover { background-color: rgba(245, 158, 11, .14); }
.wo-routing-pill-full {
  color: #0f766e;
  border-color: rgba(13, 148, 136, .45);
  background-color: rgba(13, 148, 136, .08);
}
.wo-routing-pill-full:hover { background-color: rgba(13, 148, 136, .14); }
[data-theme="dark"] .wo-routing-pill-partial {
  color: #fbbf24;
  background-color: rgba(245, 158, 11, .14);
}
[data-theme="dark"] .wo-routing-pill-full {
  color: #5eead4;
  background-color: rgba(13, 148, 136, .14);
}

/* Bulk shipment modal — radio-style picker list. Slightly wider than
   Bootstrap's modal-sm so destination labels don't truncate. */
.wo-shipment-modal-dialog { max-width: 440px; }
.wo-shipment-pick-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 280px;
  overflow-y: auto;
  padding: 2px;
}
.wo-shipment-pick {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  background-color: var(--surface);
  transition: background-color .12s ease, border-color .12s ease;
}
.wo-shipment-pick:hover {
  background-color: var(--bg);
  border-color: var(--border);
}
.wo-shipment-pick input[type="radio"] {
  margin-top: 3px;
  accent-color: #6b7280;
}
.wo-shipment-pick-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.wo-shipment-pick-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .85rem;
}
.wo-shipment-pick-head strong { font-weight: 700; }
.wo-shipment-pick-kind {
  color: var(--muted);
  font-size: .78rem;
}
.wo-shipment-pick-label {
  color: var(--muted);
  font-size: .76rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wo-shipment-pick-unassign { border-style: dashed; }
.wo-shipment-pick-empty { padding: 14px 6px; }
.wo-shipment-pick-go-tab {
  color: var(--muted);
  text-decoration: none;
}
.wo-shipment-pick-go-tab:hover { color: var(--text); text-decoration: underline; }
/* Name is the dominant column — left-aligned per Pachu's request
   so the eye scans straight down the list of item names. The td
   text-align: center default on .wo-items-table tbody td would
   otherwise win on specificity. */
.wo-show-page .wo-builder-table tbody td.wo-builder-name,
.wo-show-page .wo-builder-table thead th.wo-builder-name { text-align: left; }
.wo-builder-table .wo-builder-name {
  width: 240px;
  max-width: 280px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wo-show-page .wo-builder-table tbody td.wo-builder-material,
.wo-show-page .wo-builder-table thead th.wo-builder-material { text-align: center; }
.wo-show-page .wo-builder-table tbody td.wo-builder-notes,
.wo-show-page .wo-builder-table thead th.wo-builder-notes { text-align: left; }
.wo-builder-table .wo-builder-unit {
  width: 50px;
  text-align: center;
  color: var(--muted);
}
.wo-builder-table .wo-builder-dim {
  width: 72px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.wo-builder-table .wo-builder-material {
  width: 200px;
  text-align: center;
  color: var(--muted);
}
.wo-builder-table .wo-builder-qty {
  width: 60px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.wo-builder-table .wo-builder-money {
  width: 90px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.wo-builder-table .wo-builder-total {
  font-weight: 600;
  color: var(--text);
}
.wo-builder-table .wo-builder-notes {
  /* No explicit width — under table-layout: fixed this is the column
     that absorbs the table's remaining slack (the others have fixed
     widths). Without an unsized column, fixed-layout redistributes
     surplus space proportionally across every sized column and the #
     column drifts wider in sections that have fewer columns total.
     Min-width keeps it readable even when slack is small. */
  min-width: 200px;
  text-align: left;
  color: var(--muted);
  font-size: .82rem;
}
.wo-builder-section-subtotal {
  padding: 10px 14px;
  text-align: right;
  border-top: 1px dashed var(--border);
  color: var(--muted);
  font-size: .88rem;
}
.wo-builder-section-subtotal strong {
  color: var(--text);
  font-weight: 700;
  margin-left: 6px;
  font-size: 1rem;
}
/* ── Overview bottom block: Extras (left) + Totals (right) ──
   Two cards floating side-by-side with the same surface + rounded
   border treatment as the per-type sections above. Same horizontal
   padding wrapper as .wo-builder-sections so left edges line up. */
.wo-overview-bottom {
  display: flex;
  gap: 18px;
  padding: 0 18px 24px;
}
.wo-overview-card {
  flex: 1 1 50%;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.wo-overview-card-body {
  padding: 14px 18px;
}
@media (max-width: 900px) {
  .wo-overview-bottom { flex-direction: column; }
}

/* Quick-add chips above the Extras table — pre-populate kind + label. */
.wo-overview-quickadd {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.wo-quickadd-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: .72rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.wo-quickadd-btn:hover {
  background: var(--bg);
  color: var(--text);
  border-color: var(--text);
}
.wo-quickadd-btn-custom { border-style: dashed; }

/* Extras table — same compact treatment as items, no row striping. */
.wo-extras-table {
  border-collapse: collapse;
}
.wo-extras-table th {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
}
.wo-extras-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.wo-extras-table tr:last-child td { border-bottom: 0; }
.wo-extras-table .wo-cell {
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text);
  padding: 4px 6px;
  font-size: .82rem;
  border-radius: 4px;
  transition: background .12s, border-color .12s;
}
.wo-extras-table .wo-cell:hover { background: var(--bg); }
.wo-extras-table .wo-cell:focus {
  outline: none;
  border-color: rgba(127, 127, 127, .55);
  background: var(--bg);
}
.wo-extras-mode-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.wo-extras-mode-toggle button {
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 600;
  padding: 3px 8px;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.wo-extras-mode-toggle button.is-active {
  background: var(--accent);
  color: #fff;
}
.wo-extras-resolved {
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.wo-extras-resolved.is-discount { color: #dc3545; }
.wo-extras-empty {
  padding: 14px;
  text-align: center;
  color: var(--muted);
  font-size: .82rem;
}

/* Totals rows — sit directly inside .wo-overview-card-body. The Total
   row reads in Moksha orange so it pops the way the old Order Total
   banner did. */
.wo-totals-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  color: var(--muted);
  font-size: .9rem;
  font-variant-numeric: tabular-nums;
}
.wo-totals-row.wo-totals-final {
  border-top: 1px solid var(--border);
  margin-top: 8px;
  padding-top: 10px;
  font-weight: 800;
  color: var(--text);
  font-size: 1.15rem;
}
.wo-totals-row.wo-totals-final span:last-child { color: var(--accent); }

/* Per-section breakdown — sits above the Subtotal row in the Summary
   card. Three columns: section name (Moksha orange), counts (muted),
   amount (right-aligned numeric). Hidden when there are zero items. */
.wo-summary-sections {
  display: flex;
  flex-direction: column;
  padding-bottom: 6px;
  margin-bottom: 6px;
  border-bottom: 1px dashed var(--border);
}
.wo-summary-sections:empty {
  padding: 0;
  margin: 0;
  border: 0;
}
.wo-summary-section-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: baseline;
  padding: 4px 0;
  font-variant-numeric: tabular-nums;
}
.wo-summary-section-label {
  font-size: .9rem;
  font-weight: 700;
  color: var(--text);
}
.wo-summary-section-counts { white-space: nowrap; }
.wo-summary-section-amount {
  font-size: .9rem;
  color: var(--text);
  text-align: right;
  min-width: 90px;
}

/* QuickBooks context block — sits at the bottom of the Summary card,
   below the Total. Shows what will sync (next invoice # placeholder
   + last sync timestamp) and the canonical Sync button — same
   handler as the Invoice dropdown's Sync entry. */
/* QuickBooks status bar — single-line strip that sits just under the
   S&I toolbar (above the items breakdown). Was a card-bottom block
   until 2026-05-22 when Pachu moved it up to live near the Quote /
   Invoice actions. Inline layout: header · next# · last sync ·
   [Sync button pushed right]. */
.wo-qb-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  margin-bottom: 10px;
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
}
.wo-qb-strip-header {
  font-weight: 700;
  color: #a0509f;        /* QB magenta — matches the Invoice dropdown */
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .76rem;
}
.wo-qb-strip-sep {
  color: var(--muted);
  opacity: .55;
}
.wo-qb-strip-value {
  color: var(--text);
}

/* Actions cell: keeps icon buttons + Update/Delete on one line */
.wo-td-actions {
  text-align: right;
  white-space: nowrap;
}
.wo-td-actions > * + * { margin-left: 4px; }
.wo-item-row-icon {
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  width: 28px;
  height: 28px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color .12s, background .12s, border-color .12s;
}
.wo-item-row-icon:hover {
  color: var(--accent);
  background: var(--accent-muted);
  border-color: var(--accent);
}
.wo-item-row-icon.muted { opacity: .55; }
.wo-item-row-update { padding: 3px 12px; font-size: .76rem; font-weight: 600; }
.wo-item-row-delete { padding: 3px 8px; }

/* Status pill rendered as a clickable button to open the detail modal */
.wo-td-status { white-space: nowrap; }
.wo-item-row-status {
  border: none;
  cursor: pointer;
}
.wo-item-row-status:hover { filter: brightness(.95); }

/* Add (empty) row at the bottom */
.wo-item-new-row > td {
  background: var(--bg);
  border-top: 2px solid var(--border);
}
.wo-item-new-row .wo-cell {
  border-color: var(--border);
  background: var(--surface);
}
.wo-item-new-row .wo-cell::placeholder { color: var(--muted); opacity: .65; }
.wo-items-add-btn {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  font-weight: 600;
  white-space: nowrap;
  padding: 4px 14px;
  font-size: .78rem;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.wo-items-add-btn:hover,
.wo-items-add-btn:focus {
  background: var(--accent-muted);
  color: var(--accent);
  border-color: var(--accent);
}

/* Phase 3.A — admin import menu in the items toolbar
   Outline + hover-fill (same family as Linked Excel). The view toggle
   above already pushes itself right, so the import dropdown just sits
   next to it. */
.wo-items-import-wrap { /* no margin-left:auto anymore — toggle owns it */ }

/* Step-2 narrow dialog — 30% slimmer than modal-lg so the
   configure form (workflow + qty) doesn't read empty. */
.wo-pick-display-dialog-narrow.modal-dialog {
  max-width: 560px;
}

/* Display picker rows — clickable card-style list. */
.wo-pick-display-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .12s;
}
.wo-pick-display-row:last-child { border-bottom: 0; }
.wo-pick-display-row:hover { background: var(--bg); }
.wo-pick-display-row .pick-name { font-weight: 600; color: var(--text); }
.wo-pick-display-row .pick-meta { color: var(--muted); font-size: .76rem; }
.wo-pick-display-row .pick-price {
  color: var(--accent);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Picker thumbnail — fixed 48px square. Empty state shows a bi-image
   placeholder so rows without a reference photo still align. */
.wo-pick-thumb {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  flex-shrink: 0;
}
.wo-pick-thumb-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 1.1rem;
}
/* Clickable variant of the picker thumb — same affordance as the
   catalog list. Opens the lightbox without firing the row pick. */
.wo-pick-thumb-clickable {
  cursor: zoom-in;
  transition: transform .12s, box-shadow .12s;
}
.wo-pick-thumb-clickable:hover {
  transform: scale(1.04);
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

.wo-existing-import-row:hover { background: var(--surface-2, rgba(120,120,120,.08)); }
html[data-theme="dark"] .wo-existing-import-row:hover { background: rgba(255,255,255,.06); }

/* Send-by-Mail modal — recipient lists cap at ~4 rows then scroll,
   so a customer with a long roster doesn't push the form off-screen.
   Each .wo-quote-mail-row is the two-line "name + email" entry. */
.wo-quote-mail-scroll {
  max-height: 180px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
}
.wo-quote-mail-row {
  padding: 4px 0;
}
.wo-quote-mail-row + .wo-quote-mail-row {
  border-top: 1px solid var(--border);
}
/* Override Bootstrap's .form-check-input positioning — its default
   `float: left; margin-left: -1.5em` pushes the checkbox outside the
   scroll container's visible area. Inside a flex row we want the
   checkbox to sit flush at the start instead. */
.wo-quote-mail-row .form-check-input {
  float: none;
  margin-left: 0;
  flex: 0 0 auto;
  margin-top: 2px;
}

/* Trailing actions row — lives below the items table. Each tab
   drops its "+ Add" button(s) here so the create-new affordance
   sits near where the new row will land, not up at the top
   toolbar (no scrolling needed on long lists). */
.wo-items-trailing-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  background: var(--bg);
}

/* Builder Export Excel — yellow-green (lime-500), same treatment Quote
   Builder uses for its Export Excel. Pachu's convention: spreadsheet
   exports share this lime family across the app. */
.wo-export-excel-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  font-size: .78rem;
  font-weight: 600;
  background: transparent;
  color: #65a30d;
  border: 1px solid #84cc16;
  border-radius: 6px;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.wo-export-excel-btn:hover:not([disabled]),
.wo-export-excel-btn:focus:not([disabled]) {
  background: rgba(132, 204, 22, .14);
  color: #4d7c0f;
}
.wo-export-excel-btn[disabled] { opacity: .5; cursor: not-allowed; }
html[data-theme="dark"] .wo-export-excel-btn {
  color: #a3e635;
  border-color: #84cc16;
}
html[data-theme="dark"] .wo-export-excel-btn:hover:not([disabled]) {
  background: rgba(132, 204, 22, .18);
  color: #bef264;
}

/* Filter-empty (search/chip yields nothing) */
.wo-items-filter-empty td { padding: 14px; }

/* Mobile: horizontal scroll on the table wrap */
@media (max-width: 900px) {
  .wo-items-table { min-width: 900px; }
}

/* ── Status pills ─────────────────────────────────────────────────── */
.wo-item-pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.wo-item-pill-review            { background: rgba(108,117,125,.14); color: #6c757d; }
.wo-item-pill-commented-client  { background: rgba(13,110,253,.14);  color: #0d6efd; }
.wo-item-pill-commented-admin   { background: rgba(255,123,0,.18);   color: #d36000; }
.wo-item-pill-updated           { background: rgba(255,123,0,.18);   color: #d36000; }
.wo-item-pill-approved          { background: rgba(40,167,69,.16);   color: #1f8c3a; }
.wo-item-pill-canceled          { background: rgba(220,38,38,.14);   color: #dc2626; }

.wo-item-version-chip {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--muted);
  border: 1px solid var(--border);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
}

/* ── Item modal ──────────────────────────────────────────────────── */
.wo-item-modal-content { max-height: 92vh; }
.wo-item-modal-header {
  align-items: center;
  gap: 14px;
}
.wo-item-modal-identity {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.wo-item-art-input {
  width: 80px;
  background: transparent;
  border: 1px solid transparent;
  font-weight: 700;
  font-size: 1rem;
  color: var(--muted);
  padding: 4px 6px;
  border-radius: 6px;
}
.wo-item-art-input:focus {
  border-color: rgba(127, 127, 127, .55);
  outline: none;
  background: var(--surface);
}
.wo-item-name-input {
  flex: 1;
  background: transparent;
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--text);
  padding: 4px 8px;
  border-radius: 6px;
  min-width: 0;
}
.wo-item-name-input:focus {
  border-color: rgba(127, 127, 127, .55);
  outline: none;
  background: var(--surface);
}
.wo-item-modal-status {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.wo-item-modal-body { padding: 18px 20px; }

.wo-item-section + .wo-item-section { margin-top: 18px; }
.wo-item-section-title {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

.wo-item-specs-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.wo-item-spec-cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wo-item-spec-cell-wide { grid-column: 1 / -1; }
.wo-item-spec-label {
  font-size: .70rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
}

/* ── Proof preview / actions ─────────────────────────────────────── */
.wo-item-proof-preview {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 10px;
}
.wo-item-proof-img {
  max-width: 100%;
  max-height: 320px;
  object-fit: contain;
}
.wo-item-proof-iframe {
  width: 100%;
  height: 320px;
  border: 0;
}
.wo-item-proof-empty { padding: 30px 12px; }

.wo-item-proof-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.wo-item-proof-progress { margin-top: 10px; }

/* ── Action buttons row ──────────────────────────────────────────── */
.wo-item-actions { border-top: 1px dashed var(--border); padding-top: 14px; }

/* ── Per-item comments thread ────────────────────────────────────── */
.wo-item-comments-panel {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  height: 100%;
  min-height: 280px;
}
.wo-item-comments-header {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--surface);
}
.wo-item-comments-input {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.wo-item-comments-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px 14px;
  min-height: 0;
}
.wo-item-comment-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 8px;
}
.wo-item-comment-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.wo-item-comment-body { line-height: 1.4; }

/* ====================================================================
   Phase 4 — Unified surfaces (banner + 50/50 body + compact comments)
   The page lives on --bg (canvas). The banner is the ONLY elevated
   surface (--surface). Cards inside the body — file rows, Linked Excel
   items — also use --surface. Comments are flat on the canvas; visual
   separation is handled with borders + dividers + typography.
   ==================================================================== */

/* Neutralize the legacy modal-era backgrounds that app.css introduces. */
.wo-show-page .wo-modal-body,
.wo-show-page .wo-view-panel { background: var(--bg) !important; }

/* ── Banner ──────────────────────────────────────────────────── */
.wo-banner {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 18px 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}

.wo-banner-id {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.wo-banner-id .wo-order-number-input {
  width: 120px;
  min-width: 120px;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent);
  background: transparent;
  /* Always-on orange border so the input reads as an editable identity
     field even at rest (and visually anchors to the order # color). */
  border: 1px solid var(--accent);
  padding: 4px 10px;
  border-radius: 6px;
  letter-spacing: -0.01em;
  text-align: center;
}
.wo-banner-id .wo-order-number-input::placeholder { color: var(--muted); opacity: 0.6; }
.wo-banner-id .wo-order-number-input:hover:not(:disabled):not(.wo-readonly) {
  background: var(--accent-muted);
}
.wo-banner-id .wo-order-number-input:focus {
  background: var(--bg);
  outline: none;
  box-shadow: 0 0 0 .15rem rgba(127, 127, 127, .18);
}
/* Read-only (non-admin) — keep the orange border but a touch softer so
   it reads as informational rather than editable. */
/* Chrome / Safari force a yellow-ish "autofill" background on text
   inputs which renders pure white over our dark surface. The
   inset box-shadow trick paints over it with our own bg, and
   text-fill-color preserves the orange digits. */
.wo-banner-id .wo-order-number-input:-webkit-autofill,
.wo-banner-id .wo-order-number-input:-webkit-autofill:hover,
.wo-banner-id .wo-order-number-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--accent) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--bg) inset !important;
  caret-color: var(--accent);
  transition: background-color 9999s ease-in-out 0s;
}
.wo-banner .wo-title-input:-webkit-autofill,
.wo-banner .wo-title-input:-webkit-autofill:hover,
.wo-banner .wo-title-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--surface) inset !important;
  caret-color: var(--text);
  transition: background-color 9999s ease-in-out 0s;
}

.wo-banner-id .wo-order-number-input.wo-readonly {
  pointer-events: none;
  background: transparent;
  border-color: var(--accent);
  opacity: .85;
}
.wo-banner-id .wo-title-input {
  flex: 1 1 auto;
  min-width: 200px;
  max-width: 520px;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text);
  background: transparent;
  border: 1px solid transparent;
  padding: 4px 10px;
  border-radius: 6px;
  letter-spacing: -0.01em;
}
.wo-banner-id .wo-title-input::placeholder { color: var(--muted); opacity: 0.6; }
.wo-banner-id .wo-title-input:hover, .wo-banner-id .wo-title-input:focus {
  border-color: var(--border);
  background: var(--bg);
  outline: none;
}

.wo-banner-actions {
  display: flex; align-items: center; gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}

/* ── Banner: description ─────────────────────────────────────── */
.wo-banner-desc {
  color: var(--text-2, var(--muted));
  font-size: .92rem;
  line-height: 1.5;
}
/* Block container so the text wraps naturally; pencil follows the text
   inline (single-line: right after the text, multi-line: at the end of
   the last line) — never orphaned at the far right. */
.wo-desc-view {
  display: block;
  min-height: 1.4em;
}
.wo-desc-text {
  display: inline;
  white-space: pre-wrap;
}
.wo-desc-text:empty::before {
  content: 'No description';
  color: var(--muted);
  opacity: 0.7;
}
.wo-desc-edit-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 4px;
  cursor: pointer;
  font-size: .78rem;
  vertical-align: -4px;
  margin-left: 6px;
  transition: color .12s, background .12s, border-color .12s;
}
.wo-desc-edit-btn:hover { color: var(--accent); background: var(--accent-muted); border-color: var(--accent); }

/* Description edit textarea — same treatment as the comments composer:
   surface bg, text-color text, accent border on focus, in both modes. */
.wo-show-page .wo-desc-edit textarea {
  background: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  padding: 9px 12px;
  font-size: .9rem;
  resize: vertical;
}
.wo-show-page .wo-desc-edit textarea:focus {
  border-color: rgba(127, 127, 127, .55) !important;
  box-shadow: 0 0 0 .12rem rgba(127, 127, 127, .18);
  outline: none;
}
.wo-show-page .wo-desc-edit textarea::placeholder {
  color: var(--muted);
  opacity: .7;
}

/* ── Banner: meta strip ──────────────────────────────────────── */
.wo-banner-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 28px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.wo-meta-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.wo-meta-label {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
}
.wo-meta-value {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .86rem;
  font-weight: 500;
  color: var(--text);
}
/* Due Date date text — orange so the deadline jumps out in the meta strip. */
#woDueDateDisplay { color: var(--accent); font-weight: 600; }
.wo-meta-edit-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 4px;
  cursor: pointer;
  font-size: .72rem;
  opacity: 1; /* Always visible, like the description pencil. */
  transition: color .12s, background .12s, border-color .12s;
}
.wo-meta-edit-btn:hover { color: var(--accent); background: var(--accent-muted); border-color: var(--accent); }

.wo-due-date-inline { width: auto; max-width: 160px; }

.wo-banner-folder {
  color: var(--muted);
  text-decoration: none;
  font-size: 1.15rem;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  align-self: flex-end;
  transition: color .12s, background .12s, border-color .12s;
}
.wo-banner-folder:hover {
  color: var(--accent);
  background: var(--accent-muted);
  border-color: var(--accent);
}

/* ── Tab nav (sits on canvas now, not on surface) ─────────────── */
.wo-show-page .wo-tab-nav {
  background: var(--bg) !important;
  border-bottom: 1px solid var(--border);
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Per-user pending-review chip — pushed to the right edge of the tab nav.
   Icon + count are Moksha orange (the actionable "you have updates" cue).
   The expanded banner stays neutral so it reads like a generic info
   surface, not another orange element competing with the chip. */
.wo-review-chip-wrap {
  margin-left: auto;
  padding-right: 4px;
  display: flex;
  align-items: center;
}
/* Outline yellow pill (border + yellow bell) with a solid yellow
   count badge that carries the white number. Same in light and dark
   (the yellow itself shifts via --wo-unread-yellow). */
.wo-review-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--wo-unread-yellow);
  background: transparent;
  color: var(--wo-unread-yellow);
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.wo-review-chip:hover { background: var(--wo-unread-yellow-tint); }
.wo-review-chip[aria-expanded="true"] { background: var(--wo-unread-yellow-soft); }
.wo-review-chip i { font-size: .85rem; color: var(--wo-unread-yellow); }
.wo-review-chip-count {
  background: var(--wo-unread-yellow);
  color: #fff;
  border-radius: 999px;
  padding: 0 6px;
  min-width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1;
}
/* Dark mode — number reads as the canvas color so the digit looks
   "cut out" of the yellow circle. */
html[data-theme="dark"] .wo-review-chip-count {
  color: var(--bg);
}

/* Expanded banner — neutral surface that sits below the tab nav.
   Title icon + label use the unified unread-yellow so the whole
   review UI shares a visual language. */
.wo-review-banner {
  --review-accent: var(--wo-unread-yellow);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 24px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.wo-review-banner-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wo-review-banner-title {
  font-weight: 600;
  font-size: .82rem;
  color: var(--review-accent);
  display: flex;
  align-items: center;
  gap: 6px;
}
.wo-review-banner-title i { font-size: .9rem; }
.wo-review-banner-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: .82rem;
  color: var(--text);
}
.wo-review-banner-list li::before {
  content: "•";
  margin-right: 6px;
  color: var(--muted);
}
.wo-review-banner-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Close arrow — borderless, blends with the banner background. */
.wo-review-banner-close {
  background: transparent;
  border: 0;
  color: var(--muted);
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: .9rem;
  transition: color .12s, background .12s;
}
.wo-review-banner-close:hover {
  color: var(--text);
  background: var(--surface);
}
/* Mark as reviewed — outline + bold text, light tinted hover.
   Same yellow tone as the chip + bolitas so the whole "unread" UI
   shares a visual language. */
.wo-review-mark-btn {
  border: 1px solid var(--wo-unread-yellow);
  background: transparent;
  color: var(--wo-unread-yellow);
  font-weight: 600;
  transition: background .12s, border-color .12s;
}
.wo-review-mark-btn:hover,
.wo-review-mark-btn:focus {
  background: var(--wo-unread-yellow-tint);
  color: var(--wo-unread-yellow);
  border-color: var(--wo-unread-yellow);
}

/* ── Files & Comments grid ──────────────────────────────────── */
.wo-fc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  flex: 1;
  background: var(--bg);
}
@media (max-width: 991px) {
  .wo-fc-grid { grid-template-columns: 1fr; }
}

/* Both columns flow naturally with the document — no per-column
   scrollbars. The browser handles scroll when the page grows past
   the viewport. */
.wo-fc-left {
  display: flex; flex-direction: column;
  border-right: 1px solid var(--border);
  background: var(--bg);
}
.wo-fc-left-scroll {
  flex: 1;
  padding: 18px 22px;
  background: var(--bg);
}

.wo-fc-block { background: transparent !important; }
.wo-fc-block-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.wo-fc-block-head h3 {
  font-size: .80rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
}
.wo-fc-block-head h3 i { color: var(--muted); font-size: .96rem; }
.wo-fc-block-head > :last-child { margin-left: auto; }
.wo-fc-block-empty { padding: 4px 0 8px; }

.wo-fc-divider {
  border: 0;
  height: 1px;
  background: var(--border);
  margin: 22px 0;
  opacity: 0.6;
}

/* shared count pill (Linked Excel + Comments + tabs) — matches the
   Items tab badge: 1px border in the pill's own colour. */
.wo-count-pill {
  display: inline-flex;
  align-items: center;
  font-size: .68rem;
  font-weight: 700;
  background: var(--accent-muted);
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 1px 7px;
  border-radius: 10px;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
}

/* Soft accent buttons (Linked Excel + Add files) */
/* ── File rows (Linked Excel + Attachments share styling) ────── */
.wo-fc-file-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wo-fc-file-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  transition: background .15s ease, border-color .15s ease;
}
/* Hover: soft neutral background overlay only (no accent border). */
.wo-fc-file-row:hover {
  background: rgba(120,120,120,.10);
}
.wo-fc-file-icon {
  width: 32px; height: 32px;
  flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 5px;
  font-size: .92rem;
  overflow: hidden;
}
/* Image thumbnails inside the icon chip — clamp to the chip and crop
   with object-fit so portrait thumbnails don't overflow vertically. */
.wo-fc-file-icon img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  display: block;
  border-radius: 5px;
}
.wo-fc-file-icon-xls { background: rgba(34,197,94,.15); color: #16a34a; }
.wo-fc-file-icon-pdf { background: rgba(220,53,69,.12); color: #dc3545; }
.wo-fc-file-icon-img { background: rgba(13,110,253,.12); color: #0d6efd; }
.wo-fc-file-icon-zip { background: rgba(245,158,11,.16); color: #b45309; }
.wo-fc-file-icon-doc { background: rgba(59,130,246,.14); color: #2563eb; }
.wo-fc-file-icon-other { background: var(--bg); color: var(--muted); }
.wo-fc-file-meta { flex: 1; min-width: 0; }
.wo-fc-file-name {
  font-size: .80rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wo-fc-file-sub {
  font-size: .70rem;
  color: var(--muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wo-fc-file-actions {
  display: inline-flex;
  gap: 2px;
  opacity: 0;
  transition: opacity .12s;
}
.wo-fc-file-row:hover .wo-fc-file-actions { opacity: 1; }
.wo-fc-icon-btn {
  width: 28px; height: 28px;
  display: inline-grid; place-items: center;
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  border-radius: 4px;
  cursor: pointer;
  font-size: .82rem;
  transition: color .12s, background .12s, border-color .12s;
}
.wo-fc-icon-btn:hover { color: var(--text); background: var(--bg); }
.wo-fc-icon-btn.danger:hover { color: #dc3545; }

.wo-fc-dropzone {
  padding: 14px;
  border: 1px dashed var(--border);
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: border-color .12s, color .12s;
}
.wo-fc-dropzone:hover { border-color: var(--accent); color: var(--accent); }

/* ── Right column: comments ─────────────────────────────────── */
.wo-fc-right {
  display: flex; flex-direction: column;
  background: var(--bg);
}

.wo-comments-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px 10px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--bg);
}
.wo-comments-head h3 {
  font-size: .80rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
}
.wo-comments-filter {
  margin-left: auto;
  display: inline-flex;
  gap: 2px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 2px;
}
.wo-comments-filter .seg-btn {
  padding: 3px 10px;
  font-size: .72rem;
  font-weight: 600;
  background: transparent;
  border: none;
  color: var(--muted);
  border-radius: 3px;
  cursor: pointer;
  font-family: inherit;
}
.wo-comments-filter .seg-btn.active { background: var(--bg); color: var(--text); }

/* Composer at the TOP of the right column. */
.wo-comment-composer {
  padding: 12px 22px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  flex-shrink: 0;
}
.wo-comment-composer textarea {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px;
  color: var(--text) !important;
  padding: 9px 12px;
  font-size: .86rem;
  resize: none;
  min-height: 48px;
  width: 100%;
}
.wo-comment-composer textarea:focus { border-color: rgba(127, 127, 127, .55) !important; outline: none; }
.wo-composer-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}

/* Comments list — newest first, compact. Flows with the page so the
   browser scroll handles overflow instead of a per-column scrollbar. */
.wo-show-page .wo-comments-scroll {
  flex: 1 1 auto !important;
  padding: 14px 22px !important;
  background: var(--bg) !important;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* WO comments — WhatsApp-style. Tight, no card frame, conversational.
   Mirror the look of the item modal's comment thread (.wo-item-comment-*)
   but keep the local class names so private styling + attachments
   slot in alongside. */
.wo-show-page .wo-comments-scroll .wo-comment-card {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

/* Deep-link flash — applied briefly by deeplink.js when arriving via
   the global search or a notification link with ?comment=N. Pulses an
   accent outline so the target comment / row is easy to find. Two
   pulses across ~5s so it lingers long enough to spot in a long list. */
.wo-deeplink-flash {
  animation: wo-deeplink-flash-kf 4.8s ease-out 1;
  border-radius: 6px;
}
@keyframes wo-deeplink-flash-kf {
  0%   { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.65); background-color: rgba(245, 158, 11, 0.22); }
  25%  { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0);  background-color: rgba(245, 158, 11, 0.10); }
  50%  { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.55); background-color: rgba(245, 158, 11, 0.20); }
  75%  { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0);  background-color: rgba(245, 158, 11, 0.08); }
  100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);    background-color: transparent; }
}
.wo-show-page .wo-comments-scroll {
  gap: 10px !important;
}

/* ── Linked Excel rows: borderless icons + smaller text ─────── */
.linked-excel-item-card,
.linked-excel-item {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  padding: 10px 12px !important;
}
.linked-excel-item-name,
.linked-excel-item .file-name,
.linked-excel-item-card .filename {
  font-size: .80rem !important;
  font-weight: 600 !important;
}
.linked-excel-item-meta,
.linked-excel-item .file-sub,
.linked-excel-item-card .file-sub {
  font-size: .70rem !important;
  color: var(--muted) !important;
}
.linked-excel-edit-btn,
.linked-excel-delete-btn {
  background: transparent !important;
  border: none !important;
  color: var(--muted) !important;
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: 4px !important;
  padding: 0 !important;
  font-size: .82rem !important;
  cursor: pointer;
  transition: color .12s, background .12s;
}
.linked-excel-edit-btn:hover { color: var(--text) !important; background: var(--bg) !important; }
.linked-excel-delete-btn:hover { color: #dc3545 !important; background: var(--bg) !important; }
.linked-excel-edit-btn i,
.linked-excel-delete-btn i { color: inherit !important; }

/* ── Override legacy backgrounds in app.css ─────────────────── */
.wo-show-page .wo-comments-panel {
  background: transparent !important;
  height: auto !important;
}
.wo-show-page .wo-comment-input-area {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
.wo-show-page .wo-left-column,
.wo-show-page .wo-right-column { background: transparent !important; }

/* Dark-mode flat surface — kill the rgba(0,0,0,.2) overrides. */
html[data-theme="dark"] .wo-show-page .wo-comments-panel,
html[data-theme="dark"] .wo-show-page .wo-comments-scroll,
html[data-theme="dark"] .wo-show-page .wo-comment-input-area,
html[data-theme="dark"] .wo-show-page .wo-left-column,
html[data-theme="dark"] .wo-show-page .wo-info-strip {
  background: var(--bg) !important;
}

/* ── WhatsApp-style comment row (Phase 5.6) ─────────────────
   Mirrors .wo-item-comment-* in the item modal: author + time on
   one line, message stacked tight beneath, no card chrome. */
.wo-show-page .wo-comment-card .wo-comment-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 1px;
}
.wo-comment-author {
  font-size: .80rem;
  font-weight: 700;
}
/* Author colours match the item-modal convention (admin = orange accent,
   user = blue, dimmed in dark). The legacy .comment-author-* classes
   are kept as no-ops in case any older markup still uses them. */
.wo-show-page .wo-comment-card .wo-comment-author.author-admin { color: var(--accent); }
.wo-show-page .wo-comment-card .wo-comment-author.author-user  { color: #0d6efd; }
html[data-theme="dark"] .wo-show-page .wo-comment-card .wo-comment-author.author-user { color: #60a5fa; }

.wo-comment-tag-private {
  background: rgba(245,158,11,.18);
  color: #b45309;
  font-size: .58rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  letter-spacing: .06em;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
}
[data-theme="dark"] .wo-comment-tag-private { color: #f5b659; }
/* The right side of the comment head — cluster + time + (optional menu)
   wrapped in a 3-column grid so widths are deterministic across
   browsers. Firefox was ignoring `width` / `min-width` on flex-child
   spans; CSS grid with explicit column tracks pins the smiley and the
   timestamp into stable columns regardless of content. */
.wo-comment-head-right {
  display: grid;
  /* minmax(0, X) prevents intrinsic content sizes from growing the
     tracks. The 3-dots menu (column 3) is conditional — only the
     comment author / admins see it. Reserving 24px regardless keeps
     the right edge consistent so the smiley column doesn't shift
     when the menu is absent. */
  grid-template-columns: minmax(0, 72px) minmax(0, 78px) 24px;
  align-items: center;
  column-gap: 8px;
  margin-left: auto;
}
.wo-comment-time {
  color: var(--muted);
  font-size: .68rem;
  font-weight: 500;
  white-space: nowrap;
  text-align: right;
  min-width: 0;
}
.wo-show-page .wo-comment-card .wo-comment-body {
  font-size: .82rem;
  line-height: 1.35;
  color: var(--text);
  white-space: pre-wrap;
  padding-left: 0;
}
/* Privates keep the orange edge marker — no avatar to indent past now,
   so the marker hugs the start of the body. */
.wo-show-page .wo-comment-card.is-private .wo-comment-body {
  border-left: 2px solid rgba(245,158,11,.45);
  padding-left: 10px;
  margin-left: 0;
}

/* Attachments below the body get a small top gap so they don't kiss
   the message text. Spec'd here so both the comment thread and any
   future re-render stay consistent. */
.wo-show-page .wo-comment-card .comment-attachments-list {
  margin-top: 6px;
  border-top: 0;
  padding-top: 0;
}

/* Edit-in-place textarea — no padding-left now that there's no avatar. */
.wo-show-page .wo-comment-card .comment-body-edit { padding-left: 0; }

/* @mentions — chip in the rendered body + autocomplete popover. */
.wo-mention-chip {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 10px;
  background: rgba(255,123,0,.12);
  color: var(--accent);
  font-weight: 600;
  font-size: .78rem;
  line-height: 1.25;
}
html[data-theme="dark"] .wo-mention-chip {
  background: rgba(255,123,0,.18);
}

.wo-mention-picker {
  z-index: 9999;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,.10);
  max-height: 240px;
  overflow-y: auto;
  font-size: .82rem;
}
.wo-mention-picker .mention-row {
  display: flex;
  flex-direction: column;
  padding: 7px 10px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.wo-mention-picker .mention-row:last-child { border-bottom: 0; }
.wo-mention-picker .mention-row.is-selected,
.wo-mention-picker .mention-row:hover {
  background: rgba(255,123,0,.08);
}
.wo-mention-picker .mention-name { color: var(--text); font-weight: 600; }
.wo-mention-picker .mention-meta { color: var(--muted); font-size: .72rem; }

/* ====================================================================
   Phase 4 — Dark-mode QA & legacy app.css overrides
   Legacy app.css rules still target a few class names that survived
   into the new HTML (.wo-comment-card, .wo-comments-scroll, .wo-title-input,
   .wo-order-number-input). Specificity-equal rules in app.css load
   earlier, so we override here with a slightly higher specificity or
   !important where needed.
   ==================================================================== */

/* Kill the legacy height/overflow clamps on .wo-comments-scroll —
   app.css has multiple rules with !important that force per-column
   scroll. The show page now flows naturally with the document, so
   override every one of them here. */
.wo-show-page .wo-comments-scroll {
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  padding-right: 22px !important;
}

/* Comment-card hover: legacy app.css puts a rounded background on hover
   that fights our flat-with-border-bottom design. Force flat. */
.wo-show-page .wo-comments-scroll .wo-comment-card:hover {
  background: transparent !important;
  border-radius: 0 !important;
}

/* Dropzone for attachments — replicate dragover feedback under the new
   .wo-fc-dropzone class. */
.wo-fc-dropzone.is-dragover {
  border-color: var(--accent) !important;
  background: var(--accent-muted);
  color: var(--accent);
}

/* Folder link in the banner-meta uses ms-auto for right alignment but
   still needs to vertically center against the cells. */
.wo-banner-meta .wo-banner-folder { align-self: center; }

/* The banner-meta on small / wrapped layouts: when it wraps, give a
   little extra space so labels and values stay readable. */
@media (max-width: 768px) {
  .wo-banner-meta { gap: 12px 18px; }
  .wo-banner-id .wo-title-input { font-size: 1.10rem; }
  .wo-banner-id .wo-order-number-input { font-size: 1.30rem; width: 78px; }
}

/* Dark-mode unification: many of the legacy "dark" rules in app.css
   tinted .wo-comments-scroll / .wo-comment-input-area / .wo-left-column
   with rgba(0,0,0,…) overlays. Those classes are gone from the new HTML
   except for .wo-comments-scroll, which we already pin to var(--bg).
   Belt-and-suspenders: also pin the new container surfaces. */
html[data-theme="dark"] .wo-show-page .wo-fc-left,
html[data-theme="dark"] .wo-show-page .wo-fc-left-scroll,
html[data-theme="dark"] .wo-show-page .wo-fc-right,
html[data-theme="dark"] .wo-show-page .wo-comments-head,
html[data-theme="dark"] .wo-show-page .wo-comment-composer,
html[data-theme="dark"] .wo-show-page .wo-comments-scroll,
html[data-theme="dark"] .wo-show-page .wo-modal-body,
html[data-theme="dark"] .wo-show-page .wo-view-panel {
  background: var(--bg) !important;
}
html[data-theme="dark"] .wo-banner { background: var(--surface); }

/* Banner inputs: in dark mode the focus background should pop a little
   above the banner surface — use --bg (canvas) which is darker, giving
   a clean "you're editing" affordance. */
html[data-theme="dark"] .wo-banner-id .wo-order-number-input:hover:not(:disabled):not(.wo-readonly),
html[data-theme="dark"] .wo-banner-id .wo-order-number-input:focus,
html[data-theme="dark"] .wo-banner-id .wo-title-input:hover,
html[data-theme="dark"] .wo-banner-id .wo-title-input:focus {
  background: var(--bg) !important;
}

/* Custom scrollbars: in dark mode, the legacy app.css scrollbar uses
   rgba(0,0,0,…) which becomes invisible. Force the new tokens. */
html[data-theme="dark"] .wo-show-page .wo-comments-scroll::-webkit-scrollbar-thumb,
html[data-theme="dark"] .wo-show-page .wo-fc-left-scroll::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.12) !important;
}
html[data-theme="dark"] .wo-show-page .wo-comments-scroll::-webkit-scrollbar-thumb:hover,
html[data-theme="dark"] .wo-show-page .wo-fc-left-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,.22) !important;
}

/* Composer textarea in dark mode pulls its border from var(--border)
   (already correct) but the placeholder needs to remain readable. */
html[data-theme="dark"] .wo-comment-composer textarea::placeholder {
  color: var(--muted);
  opacity: .7;
}

/* Dark mode: brighter white tint to read against the dark surface. */
html[data-theme="dark"] .wo-fc-file-row:hover {
  background: rgba(255,255,255,.08);
}

/* ====================================================================
   Phase 4.1 — Visual iteration
   - WO List + WO Show share an orange-tinted page header band.
   - Drop JetBrains Mono + uppercase from headings, badges, order #
     and meta labels (use the same Inter Tight as the tabs / body).
   - Outline-style buttons that fill on hover for Linked Excel (green),
     Add files / New Order (orange), and Send (blue).
   - Borderless Delete with red hover only.
   - Plain `+` icons (no circle).
   ==================================================================== */

/* ── WO Show page header band ───────────────────────────────── */
.wo-page-header {
  /* Same composite as the active sidebar link: orange overlay layered on
     the sidebar substrate. Token `--sidebar-link-active-bg` already
     carries the right alpha (8% light / 12% dark). */
  background:
    linear-gradient(var(--sidebar-link-active-bg), var(--sidebar-link-active-bg)),
    var(--sidebar-bg);
  padding: 18px 24px 14px;
  /* Pin the band height so the header keeps its shape whether or not it
     has the Discard-draft button visible — matches the WO List / HUB
     sidebar header heights. */
  min-height: 62px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.wo-page-header-back {
  color: var(--sidebar-link-active);
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .92rem;
}
.wo-page-header-back:hover {
  color: var(--sidebar-link-active);
  filter: brightness(0.85);
}
.wo-page-header-sep { color: var(--sidebar-link-active); opacity: .45; }
.wo-page-header-current {
  color: var(--sidebar-link-active);
  font-weight: 700;
  font-size: 1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.wo-page-header-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Borderless delete that only colors on hover (light red bg + dark red icon). */
.wo-page-header-delete-btn {
  background: transparent !important;
  border: 1px solid transparent !important;
  color: #b91c1c !important;
  padding: 4px 8px !important;
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  border-radius: 6px;
  transition: background .12s, color .12s, border-color .12s;
}
.wo-page-header-delete-btn:hover {
  background: rgba(220,38,38,.12) !important;
  color: #991b1b !important;
}

/* Discard-draft uses the same borderless treatment in the page-header tint. */
.wo-discard-draft-btn {
  background: transparent !important;
  border: 1px solid transparent !important;
  color: var(--sidebar-link-active) !important;
  padding: 4px 10px !important;
  font-weight: 600;
  font-size: .82rem;
}
.wo-discard-draft-btn:hover {
  background: var(--sidebar-link-active-bg) !important;
  color: var(--sidebar-link-active) !important;
  filter: brightness(0.92);
}

/* The status select inside the orange header should keep white surface. */
.wo-page-header .form-select {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}

/* Hide the breadcrumb-only legacy band (replaced by .wo-page-header). */
.wo-show-page .wo-breadcrumb { display: none; }

/* ── Banner: simplify (actions now live in the page header) ──── */
.wo-banner-id .wo-order-number-input {
  font-family: var(--font-sans, 'Inter Tight', sans-serif) !important;
  letter-spacing: -0.01em;
}
.wo-banner-id .wo-title-input {
  font-family: var(--font-sans, 'Inter Tight', sans-serif) !important;
}

/* ── Drop JetBrains Mono + uppercase from block headings ─────── */
.wo-show-page .wo-fc-block-head h3,
.wo-show-page .wo-comments-head h3 {
  font-family: var(--font-sans, 'Inter Tight', sans-serif);
  font-size: .95rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.005em;
  color: var(--text);
}
.wo-show-page .wo-fc-block-head h3 i { color: var(--muted); font-size: 1rem; }

/* Linked Excel head is green (icon + label + count pill). */
.wo-show-page .wo-fc-block-head .wo-fc-head-success { color: #16a34a; }
.wo-show-page .wo-fc-block-head .wo-fc-head-success i { color: #16a34a; }
.wo-count-pill-success {
  background: rgba(22,163,74,.14) !important;
  color: #16a34a !important;
  border-color: #16a34a !important;
}

/* Count pill — Inter Tight, no mono. */
.wo-count-pill {
  font-family: var(--font-sans, 'Inter Tight', sans-serif);
  font-size: .72rem;
  font-weight: 700;
}

/* Tab counter — same default font. */
.wo-tab-count {
  font-family: var(--font-sans, 'Inter Tight', sans-serif);
}

/* Meta strip labels — keep uppercase but ditch the mono. */
.wo-meta-label {
  font-family: var(--font-sans, 'Inter Tight', sans-serif);
}

/* ── Outline buttons that fill on hover ─────────────────────── */
/* GREEN — Linked Excel */
.btn-outline-success-soft {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  font-size: .78rem;
  font-weight: 600;
  background: transparent;
  color: #16a34a;
  border: 1px solid #16a34a;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  transition: background .12s, color .12s, border-color .12s;
}
.btn-outline-success-soft:hover,
.btn-outline-success-soft:focus {
  background: rgba(22,163,74,.12);
  color: #15803d;
  border-color: #16a34a;
}

/* ORANGE (accent) — Add files / + New Order */
.btn-outline-accent {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  font-size: .78rem;
  font-weight: 600;
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  transition: background .12s, color .12s, border-color .12s;
}
.btn-outline-accent:hover,
.btn-outline-accent:focus {
  background: var(--accent-muted);
  color: var(--accent);
  border-color: var(--accent);
}

/* Green-themed Import modals — header tinted, divider lines green so
   the modal reads as "Excel Analyzer territory" at a glance. The
   EXCEL_BACKUP code tag inside the body matches. */
.wo-import-modal-green .modal-header {
  background: rgba(22, 163, 74, .10);
  border-bottom: 2px solid #16a34a;
}
.wo-import-modal-green .modal-header .modal-title {
  color: #16a34a;
  font-weight: 700;
}
.wo-import-modal-green .modal-header .modal-title i { color: #16a34a; }
.wo-import-modal-green .modal-footer {
  border-top: 2px solid #16a34a;
}
html[data-theme="dark"] .wo-import-modal-green .modal-header {
  background: rgba(22, 163, 74, .14);
}
/* Title + divider in dark mode pinned to the same #16a34a the buttons
   use, so they read as one green family. */
html[data-theme="dark"] .wo-import-modal-green .modal-header .modal-title,
html[data-theme="dark"] .wo-import-modal-green .modal-header .modal-title i {
  color: #16a34a;
}
html[data-theme="dark"] .wo-import-modal-green .modal-header,
html[data-theme="dark"] .wo-import-modal-green .modal-footer {
  border-color: #16a34a;
}
.wo-import-backup-tag {
  color: #16a34a;
  font-weight: 600;
}
html[data-theme="dark"] .wo-import-backup-tag { color: #16a34a; }

/* ── Comment reactions ────────────────────────────────────── */
/* Cluster chips + picker on the right of the comment head, just left
   of the timestamp. margin-left:auto pushes the whole group right and
   the time still sits last (its own auto-margin is now redundant —
   safe to keep, the cluster wins). */
.wo-reaction-cluster {
  /* Lives in the first column of .wo-comment-head-right (56px wide).
     Right-align contents so the smiley anchors at the column's right
     edge while reaction chips stack inward to its left. */
  display: flex;
  align-items: center;
  gap: 3px;
  justify-content: flex-end;
  min-width: 0;  /* lets the grid track govern sizing */
}
.wo-reaction-bar {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 3px;
  align-items: center;
}
/* Chip size tuned to sit on the same baseline as .wo-comment-time
   (.68rem) and .wo-comment-author (.80rem). Stays readable but
   doesn't dominate the header. */
.wo-reaction-chip {
  background: rgba(0, 0, 0, .03);
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 10px;
  padding: 0 5px;
  font-size: .72rem;
  line-height: 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  transition: background .12s, border-color .12s;
}
.wo-reaction-chip:hover { background: rgba(0, 0, 0, .06); border-color: rgba(0, 0, 0, .25); }
.wo-reaction-chip.is-mine { background: rgba(0, 0, 0, .03); border-color: rgba(0, 0, 0, .15); }
.wo-reaction-count { font-size: .65rem; color: var(--muted); font-weight: 600; }
.wo-reaction-chip.is-mine .wo-reaction-count { color: var(--muted); }
/* Dark-mode: keep the contrast — the lighter-tone scheme above doesn't
   read well on dark surfaces. */
html[data-theme="dark"] .wo-reaction-chip {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .15);
}
html[data-theme="dark"] .wo-reaction-chip:hover {
  background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .25);
}
html[data-theme="dark"] .wo-reaction-chip.is-mine {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .20);
}
.wo-reaction-add {
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: 10px;
  width: 20px; height: 18px;
  font-size: .68rem;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.wo-reaction-add:hover { border-color: var(--accent); color: var(--accent); }
.wo-reaction-picker {
  display: inline-flex;
  gap: 2px;
  padding: 4px 6px;
  margin-left: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
  z-index: 50;
}
.wo-reaction-pick {
  background: transparent;
  border: 0;
  font-size: 1.05rem;
  padding: 2px 4px;
  cursor: pointer;
  border-radius: 4px;
}
.wo-reaction-pick:hover { background: var(--accent-muted); }

/* ── Orange-themed modals — Assign Users + New User ──
   Same shape as wo-import-modal-green but using the Moksha accent so
   the user can tell at a glance which family the modal belongs to. */
.wo-modal-orange .modal-header {
  background: rgba(255, 123, 0, .10);
  border-bottom: 2px solid var(--accent);
}
.wo-modal-orange .modal-header .modal-title { color: var(--accent); font-weight: 700; }
.wo-modal-orange .modal-header .modal-title i { color: var(--accent); }
.wo-modal-orange .modal-footer { border-top: 2px solid var(--accent); }
html[data-theme="dark"] .wo-modal-orange .modal-header { background: rgba(255, 123, 0, .14); }
html[data-theme="dark"] .wo-modal-orange .modal-header .modal-title,
html[data-theme="dark"] .wo-modal-orange .modal-header .modal-title i { color: var(--accent); }
html[data-theme="dark"] .wo-modal-orange .modal-header,
html[data-theme="dark"] .wo-modal-orange .modal-footer { border-color: var(--accent); }

/* ── Blue-themed modal — Followers ──
   Light: same #0d6efd as the .btn-outline-info-soft (Download All).
   Dark: same #60a5fa as the dark-mode Download All variant. */
.wo-modal-blue .modal-header {
  background: rgba(13, 110, 253, .10);
  border-bottom: 2px solid #0d6efd;
}
.wo-modal-blue .modal-header .modal-title { color: #0d6efd; font-weight: 700; }
.wo-modal-blue .modal-header .modal-title i { color: #0d6efd; }
.wo-modal-blue .modal-footer { border-top: 2px solid #0d6efd; }
html[data-theme="dark"] .wo-modal-blue .modal-header { background: rgba(96, 165, 250, .14); }
html[data-theme="dark"] .wo-modal-blue .modal-header .modal-title,
html[data-theme="dark"] .wo-modal-blue .modal-header .modal-title i { color: #60a5fa; }
html[data-theme="dark"] .wo-modal-blue .modal-header,
html[data-theme="dark"] .wo-modal-blue .modal-footer { border-color: #60a5fa; }

/* Download All dropdown icons — teal #0d9488 to match the
   .btn-canon-fetch trigger. Old .wo-dl-blue-icon /
   .wo-dl-slate-icon aliases kept as shims in case any legacy
   markup still references them. */
.wo-dl-slate-icon,
.wo-dl-blue-icon { color: #0d9488; }
html[data-theme="dark"] .wo-dl-slate-icon,
html[data-theme="dark"] .wo-dl-blue-icon { color: #14b8a6; }

/* Bootstrap's .list-group-item ships white-on-white. Inside our import
   modals (Add Excel, Pick Existing Import, etc.) honour the theme. */
.wo-import-modal-green .list-group-item {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
.wo-import-modal-green .list-group-item:hover,
.wo-import-modal-green .list-group-item-action:hover,
.wo-import-modal-green .list-group-item-action:focus {
  background: rgba(22, 163, 74, .08) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] .wo-import-modal-green .list-group-item:hover,
html[data-theme="dark"] .wo-import-modal-green .list-group-item-action:hover,
html[data-theme="dark"] .wo-import-modal-green .list-group-item-action:focus {
  background: rgba(22, 163, 74, .14) !important;
}

/* Tag next to filename in "Pick an existing import" — needs to read
   in both themes, the Bootstrap bg-secondary was nearly invisible in
   dark mode. */
.wo-existing-import-linked-tag {
  display: inline-block;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 2px 7px;
  border-radius: 10px;
  background: rgba(22, 163, 74, .14);
  color: #15803d;
  border: 1px solid rgba(22, 163, 74, .35);
  vertical-align: middle;
}
html[data-theme="dark"] .wo-existing-import-linked-tag {
  background: rgba(34, 197, 94, .18);
  color: #4ade80;
  border-color: rgba(74, 222, 128, .45);
}

/* BLUE — Send (same shape as Add files) */
.btn-outline-info-soft {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  font-size: .78rem;
  font-weight: 600;
  background: transparent;
  color: #0d6efd;
  border: 1px solid #0d6efd;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  transition: background .12s, color .12s, border-color .12s;
}
.btn-outline-info-soft:hover,
.btn-outline-info-soft:focus {
  background: rgba(13,110,253,.12);
  color: #0d6efd;
  border-color: #0d6efd;
}

/* The legacy filled .btn-soft-accent stays defined for non-WO pages
   that still use it; on the WO show page we replaced its callers with
   the outline variants. */

/* ── Dark-mode adjustments ──────────────────────────────────── */
/* Page-header dark-mode tones come automatically from the
   --sidebar-link-active / --sidebar-link-active-bg tokens. */
html[data-theme="dark"] .wo-page-header-delete-btn { color: #f87171 !important; }
html[data-theme="dark"] .wo-page-header-delete-btn:hover {
  background: rgba(248, 113, 113, .14) !important;
  color: #fca5a5 !important;
}
/* Phase 4.1 dark-mode greens removed — Phase 4.2 below pins them to
   #16a34a (matches the Excel-Analyzer sidebar green) so the WO module
   reads as a single green family in both themes. */
html[data-theme="dark"] .btn-outline-info-soft { color: #60a5fa; border-color: #3b82f6; }
html[data-theme="dark"] .btn-outline-info-soft:hover { background: rgba(59,130,246,.18); color: #93c5fd; }

/* RED — Delete actions across the admin lists. Same outline-soft
   shape as Send / Apply Import / Run Analyzer, just in red. */
.btn-outline-danger-soft {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  font-size: .78rem;
  font-weight: 600;
  background: transparent;
  color: #dc3545;
  border: 1px solid #dc3545;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  transition: background .12s, color .12s, border-color .12s;
}
.btn-outline-danger-soft:hover,
.btn-outline-danger-soft:focus {
  background: rgba(220, 53, 69, .12);
  color: #b02a37;
  border-color: #dc3545;
}
html[data-theme="dark"] .btn-outline-danger-soft { color: #f87171; border-color: #ef4444; }
html[data-theme="dark"] .btn-outline-danger-soft:hover {
  background: rgba(239, 68, 68, .18);
  color: #fca5a5;
  border-color: #ef4444;
}

/* PRIVATE tag inside compact comment cards — drop the mono too. */
.wo-show-page .wo-comment-tag-private {
  font-family: var(--font-sans, 'Inter Tight', sans-serif) !important;
  letter-spacing: .04em;
}

/* ====================================================================
   Phase 4.2 — visual tweaks (typographic +, darker green, blue-only,
   tighter avatar styling for Assigned to / Followers).
   ==================================================================== */

/* Typographic "+" glyph used inside outline buttons. The glyph borrows
   the button's text color, sits a hair larger than the label, and has
   a small right margin to mimic the icon spacing. */
.btn-plus-glyph {
  display: inline-block;
  font-weight: 700;
  font-size: 1.05em;
  line-height: 1;
  margin-right: 4px;
  vertical-align: -1px;
}

/* Linked Excel green — matches the Excel-Analyzer sidebar accent (#16a34a). */
.btn-outline-success-soft {
  color: #16a34a;
  border-color: #16a34a;
}
.btn-outline-success-soft:hover,
.btn-outline-success-soft:focus {
  background: rgba(22, 163, 74, .12);
  color: #15803d;
  border-color: #16a34a;
}
.wo-show-page .wo-fc-block-head .wo-fc-head-success { color: #16a34a; }
.wo-show-page .wo-fc-block-head .wo-fc-head-success i { color: #16a34a; }
.wo-count-pill-success {
  color: #16a34a !important;
  background: rgba(22, 163, 74, .14) !important;
  border-color: #16a34a !important;
}
.wo-fc-file-icon-xls { background: rgba(22, 163, 74, .15); color: #16a34a; }

/* Dark mode keeps the same base green (#16a34a) so it stays consistent
   with light mode. Hover bumps a notch brighter for feedback. */
html[data-theme="dark"] .btn-outline-success-soft {
  color: #16a34a;
  border-color: #16a34a;
}
html[data-theme="dark"] .btn-outline-success-soft:hover {
  background: rgba(22, 163, 74, .18);
  color: #16a34a;
}
html[data-theme="dark"] .wo-show-page .wo-fc-block-head .wo-fc-head-success,
html[data-theme="dark"] .wo-show-page .wo-fc-block-head .wo-fc-head-success i {
  color: #16a34a;
}
html[data-theme="dark"] .wo-count-pill-success {
  color: #16a34a !important;
  background: rgba(22, 163, 74, .14) !important;
  border-color: #16a34a !important;
}

/* My Orders toggle on the WO list reuses .btn-outline-info-soft now;
   when toggled, .is-active fills the button with the same blue. */
#woMyOrdersBtn.is-active {
  background: #0d6efd;
  color: #fff;
  border-color: #0d6efd;
}
#woMyOrdersBtn.is-active:hover {
  background: #0b5ed7;
  color: #fff;
}
html[data-theme="dark"] #woMyOrdersBtn.is-active {
  background: #3b82f6;
  border-color: #3b82f6;
  color: #fff;
}

/* Assigned to / Followers — match the comments avatar look (compact,
   accent-muted bg, accent text). The container is `.wo-pill-row`
   (Bootstrap-class-free) so we control its flex gap without fighting
   .gap-1's specificity. */
.wo-pill-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.wo-banner-meta #woAssignedListHeader,
.wo-banner-meta #woFollowersListHeader {
  gap: 10px !important;
}
.wo-banner-meta .wo-user-avatar {
  width: 22px !important;
  height: 22px !important;
  background: var(--accent-muted) !important;
  color: var(--accent) !important;
  font-size: .68rem !important;
  font-weight: 700 !important;
  border: 0 !important;
}
.wo-banner-meta .wo-user-name {
  font-size: .86rem;
  font-weight: 500;
  color: var(--text);
}
.wo-banner-meta .wo-user-more {
  font-size: .70rem;
  background: var(--bg);
  color: var(--muted);
}

/* Inline Due Date input — same surface/text/border tokens as the comments
   composer; tell the browser to render the calendar picker in dark colours
   when the page is dark, and explicitly invert the calendar indicator so
   the small icon doesn't disappear against a dark surface. */
.wo-show-page input[type="date"].wo-due-date-inline,
.wo-show-page .wo-banner-meta input[type="date"] {
  background: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  color-scheme: light;
}
.wo-show-page input[type="date"].wo-due-date-inline:focus,
.wo-show-page .wo-banner-meta input[type="date"]:focus {
  border-color: var(--accent) !important;
  outline: none;
  box-shadow: 0 0 0 .12rem var(--accent-muted);
}
html[data-theme="dark"] .wo-show-page input[type="date"].wo-due-date-inline,
html[data-theme="dark"] .wo-show-page .wo-banner-meta input[type="date"] {
  color-scheme: dark;
}
/* The native indicator is a black-grayscale image. invert(1) ⇒ pure
   white (too bright on dark surface), so we partial-invert to land on
   roughly --muted (~#9ca3af). The legacy global rule in app.css uses
   filter: invert(1); we override it here with higher specificity. */
html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] .wo-show-page input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.62) sepia(0) saturate(0) brightness(1.05);
  opacity: 1;
  cursor: pointer;
}

/* ====================================================================
   Phase 5 — Items tab polish
   ==================================================================== */

/* Scroll fix — the items panel needs to be a flex column so the toolbar
   sticks at the top and the grid (#woItemsGrid) scrolls inside. */
.wo-show-page #woItemsPanel.wo-view-panel {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
.wo-show-page #woItemsPanel.wo-view-panel[style*="display: none"],
.wo-show-page #woItemsPanel.wo-view-panel[style*="display:none"] { display: none !important; }

/* Table-wrap stays on surface (gives the grid a card-on-canvas feel
   against the toolbar/page that sit on var(--bg)). */
.wo-show-page .wo-items-table-wrap {
  background: var(--surface);
  flex: 1;
  min-height: 0;
}

/* ====================================================================
   Phase 5.1 — Items table polish
   ==================================================================== */

/* Center every cell except Name. Apply on both <th> and the inputs/
   text inside <td>. Name (data-field=name) keeps default left align. */
.wo-show-page .wo-items-table thead th { text-align: center; }
.wo-show-page .wo-items-table thead th:nth-child(2),
.wo-show-page .wo-items-table thead th.wo-th-comments { text-align: left; }
.wo-show-page .wo-items-table tbody td { text-align: center; }
.wo-show-page .wo-items-table .wo-cell { text-align: center; }
.wo-show-page .wo-items-table .wo-cell[data-field="name"] { text-align: left; }
.wo-show-page .wo-items-table .wo-cell[data-field="comments"] { text-align: left; }

/* Drop the right-align that wo-cell-num used to set. */
.wo-show-page .wo-items-table .wo-cell-num { text-align: center; }

/* Qty column — show ~4 digits visible. */
.wo-items-table .wo-col-qty { width: 70px; }

/* Status pill — uniform width sized to fit "Commented" (longest label). */
.wo-show-page .wo-item-pill {
  display: inline-block;
  min-width: 100px;
  text-align: center;
  padding: 3px 12px;
  font-size: .68rem;
}

/* Inline icon-only Update button (blue, matches the Send button family). */
.wo-show-page .wo-item-row-update {
  background: transparent;
  border: 1px solid transparent;
  color: #2563eb;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1rem;
  padding: 0;
  transition: color .12s, background .12s, border-color .12s;
}
.wo-show-page .wo-item-row-update:hover:not(:disabled),
.wo-show-page .wo-item-row-update:focus:not(:disabled) {
  background: rgba(37, 99, 235, .14);
  color: #1d4ed8;
  border-color: #2563eb;
}
.wo-show-page .wo-item-row-update:disabled {
  opacity: .55;
  cursor: not-allowed;
}

/* Per-item Create File icon — amber to match the toolbar "Create Files"
   button so the relationship between the global and the per-item action
   is obvious at a glance. */
/* Unified unread-yellow family — Create Files modal icon, progress
   bar, per-item create-file action button, Update All toolbar
   button, and Update All modal. Single source of truth: the same
   --wo-unread-yellow used by the chip + bolitas. */
.wo-create-files-modal-icon { color: var(--wo-unread-yellow); }
/* Color only — use background-color, NOT the shorthand, so Bootstrap's
   .progress-bar-striped linear-gradient stays intact. (See memory:
   feedback_progress_bars_striped — all progress bars use the striped
   + animated pattern.) */
.create-files-progress-bar { background-color: var(--wo-unread-yellow); }
/* Update All (PROOFS scan) — Moksha orange. background-color only so
   Bootstrap's striped+animated gradient survives. */
.update-all-progress-bar { background-color: var(--accent); }
/* Download All (Individual files) — info blue, matching the dropdown
   trigger's family (.btn-outline-info-soft / .wo-dl-blue-icon). */
/* Teal — matches .btn-canon-fetch (Download All + Bulk Pick),
   shared with Add-from-Catalog. background-color (not shorthand)
   so the striped overlay keeps animating. */
.download-all-progress-bar { background-color: #0d9488; }
html[data-theme="dark"] .download-all-progress-bar { background-color: #14b8a6; }

.wo-show-page .wo-item-row-create-file {
  background: transparent;
  border: 1px solid transparent;
  color: var(--wo-unread-yellow);
  width: 28px;
  height: 28px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1rem;
  padding: 0;
  transition: color .12s, background .12s, border-color .12s;
}
.wo-show-page .wo-item-row-create-file:hover:not(:disabled),
.wo-show-page .wo-item-row-create-file:focus:not(:disabled) {
  background: var(--wo-unread-yellow-tint);
  color: var(--wo-unread-yellow);
  border-color: var(--wo-unread-yellow);
}

/* Bulk Pick modal checkboxes — custom-drawn so the frame + fill
   sit in dark teal (#134e4a, teal-900) while the V-check glyph
   floats on top in a light teal (#5eead4, teal-300). Native
   accent-color can't split those two layers, so we override the
   appearance and paint the parts manually. */
.wo-bulkpick-check {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border: 2px solid #134e4a;
  background: transparent;
  border-radius: 3px;
  position: relative;
  cursor: pointer;
  margin: 0;
  flex-shrink: 0;
}
.wo-bulkpick-check:checked { background: #134e4a; }
.wo-bulkpick-check:checked::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 0;
  width: 5px;
  height: 9px;
  border: solid #5eead4;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.wo-bulkpick-check:focus-visible {
  outline: 2px solid #14b8a6;
  outline-offset: 1px;
}
html[data-theme="dark"] .wo-bulkpick-check {
  border-color: #14b8a6;
}
html[data-theme="dark"] .wo-bulkpick-check:checked {
  background: #0d9488;
}

/* Ready-file row actions (Pick + Download) — borderless icon
   buttons in teal, matching .btn-canon-fetch (the toolbar's
   Bulk Pick + Download All). One palette for the whole
   "pick/fetch from filesystem" family. */
.wo-show-page .wo-item-ready-file-pick,
.wo-show-page .wo-item-ready-file-download {
  background: transparent;
  border: 1px solid transparent;
  color: #0d9488;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1rem;
  padding: 0;
  transition: color .12s, background .12s, border-color .12s;
}
.wo-show-page .wo-item-ready-file-pick:hover,
.wo-show-page .wo-item-ready-file-pick:focus,
.wo-show-page .wo-item-ready-file-download:hover,
.wo-show-page .wo-item-ready-file-download:focus {
  background: rgba(13, 148, 136, .12);
  color: #0d9488;
  border-color: #0d9488;
}
html[data-theme="dark"] .wo-show-page .wo-item-ready-file-pick,
html[data-theme="dark"] .wo-show-page .wo-item-ready-file-download {
  color: #14b8a6;
}
html[data-theme="dark"] .wo-show-page .wo-item-ready-file-pick:hover,
html[data-theme="dark"] .wo-show-page .wo-item-ready-file-pick:focus,
html[data-theme="dark"] .wo-show-page .wo-item-ready-file-download:hover,
html[data-theme="dark"] .wo-show-page .wo-item-ready-file-download:focus {
  background: rgba(20, 184, 166, .14);
  color: #14b8a6;
  border-color: #14b8a6;
}

/* Add Inline toolbar button — outline purple, same metrics as the
   other toolbar buttons. Used to insert "X.1, X.2…" rows next to an
   existing item (the modal also uses the same purple as accent). */
:where(html, html[data-theme="light"]) .wo-add-inline-btn,
html[data-theme="dark"] .wo-add-inline-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  font-size: .78rem;
  font-weight: 600;
  background: transparent;
  color: #9333ea;          /* purple-600 — readable on light card */
  border: 1px solid #9333ea;
  border-radius: 6px;
  white-space: nowrap;
  transition: background .12s, color .12s, border-color .12s;
}
:where(html, html[data-theme="light"]) .wo-add-inline-btn:hover,
:where(html, html[data-theme="light"]) .wo-add-inline-btn:focus {
  background: rgba(147, 51, 234, .12);
  color: #7e22ce;
  border-color: #9333ea;
}
html[data-theme="dark"] .wo-add-inline-btn {
  color: #c084fc;          /* purple-400 — readable on dark card */
  border-color: #a855f7;
}
html[data-theme="dark"] .wo-add-inline-btn:hover,
html[data-theme="dark"] .wo-add-inline-btn:focus {
  background: rgba(168, 85, 247, .18);
  color: #d8b4fe;
  border-color: #c084fc;
}

/* Update All toolbar button — outline Moksha orange, hover tint.
   Matches the exact metrics of .btn-outline-info-soft so all toolbar
   buttons (Download All / Import / Update All) line up at the same
   height. Without these overrides Bootstrap's .btn-sm defaults
   (0.875rem font + bigger padding) make it visibly taller. */
.wo-update-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  font-size: .78rem;
  font-weight: 600;
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 6px;
  white-space: nowrap;
  transition: background .12s, color .12s, border-color .12s;
}
.wo-update-all-btn:hover,
.wo-update-all-btn:focus {
  background-color: var(--accent-muted);
  color: var(--accent);
  border-color: var(--accent);
}

/* Delete icon — borderless, strong-red glyph in both light and dark
   so the destructive intent reads instantly. Matches the banner
   delete button family. */
.wo-show-page .wo-item-row-delete {
  background: transparent;
  border: 1px solid transparent;
  color: #dc2626;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: .82rem;
  padding: 0;
  transition: color .12s, background .12s, border-color .12s;
}
.wo-show-page .wo-item-row-delete:hover {
  background: rgba(220, 38, 38, .12);
  color: #b91c1c;
  border-color: #dc2626;
}

/* Action cell now centers its buttons (Phase 5.1 alignment). */
.wo-show-page .wo-td-actions { text-align: center; }
.wo-show-page .wo-td-actions > * + * { margin-left: 4px; }

/* Dark mode: bump the blue + red so they read on a dark surface. */
html[data-theme="dark"] .wo-show-page .wo-item-row-update { color: #93c5fd; }
html[data-theme="dark"] .wo-show-page .wo-item-row-update:hover:not(:disabled) {
  background: rgba(96, 165, 250, .22);
  color: #bfdbfe;
  border-color: #60a5fa;
}
html[data-theme="dark"] .wo-show-page .wo-item-row-delete { color: #ef4444; }
html[data-theme="dark"] .wo-show-page .wo-item-row-delete:hover {
  background: rgba(239, 68, 68, .18);
  color: #f87171;
  border-color: #ef4444;
}

/* ====================================================================
   Phase 5.2 — Items toolbar redo + Thumbnails view + bulk ops
   ==================================================================== */

/* Status pills: REVIEW = pink, UPDATED = purple (match the legacy
   pre-modal-refactor proofs design). */
.wo-item-pill-review  { background: rgba(219, 39, 119, .12); color: #db2777; }
.wo-item-pill-updated { background: rgba(124, 58, 237, .14); color: #7c3aed; }
/* Status filter chip in active state — same status colours. */
.wo-items-chip.active[data-status="REVIEW"]  {
  background: rgba(219,39,119,.12); color: #db2777; border-color: #db2777;
}
.wo-items-chip.active[data-status="UPDATED"] {
  background: rgba(124,58,237,.14); color: #7c3aed; border-color: #7c3aed;
}

/* Last row in the items table (the empty Add row) — no bottom border. */
.wo-show-page .wo-items-table tbody tr:last-child > td { border-bottom: 0; }

/* Toolbar selects + view toggle */
.wo-items-select {
  width: auto;
  min-width: 130px;
  font-size: .82rem;
}
/* Segmented toggle (List ↔ Thumbnails). Each button carries its own
   border so the inactive side reads as muted and the active/hover side
   pops in accent. The buttons overlap their seam (margin-left: -1px)
   so the active border can override the muted one without doubling. */
.wo-items-view-toggle {
  display: inline-flex;
  background: transparent;
  margin-left: auto; /* push to the right, separated from Update All */
}
.wo-items-view-btn {
  background: transparent;
  border: 1px solid var(--border);
  padding: 4px 10px;
  color: var(--muted);
  cursor: pointer;
  font-size: .92rem;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  position: relative;
  z-index: 1;
  transition: background .12s, color .12s, border-color .12s;
}
.wo-items-view-btn:first-child { border-radius: 6px 0 0 6px; }
.wo-items-view-btn:last-child  { border-radius: 0 6px 6px 0; }
.wo-items-view-btn + .wo-items-view-btn { margin-left: -1px; }
.wo-items-view-btn:hover,
.wo-items-view-btn.active {
  background: rgba(120, 120, 120, .12);
  color: var(--text);
  border-color: rgba(120, 120, 120, .55);
  z-index: 2;
}
html[data-theme="dark"] .wo-items-view-btn:hover,
html[data-theme="dark"] .wo-items-view-btn.active {
  background: rgba(255, 255, 255, .08);
  color: var(--text);
  border-color: rgba(255, 255, 255, .35);
}

/* ── Thumbnail grid ─────────────────────────────────────────── */
.wo-items-thumbs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
  padding: 18px;
  align-content: start;
}
.wo-item-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: border-color .12s, transform .12s, box-shadow .12s;
}
.wo-item-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
}
.wo-item-card-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--bg);
  display: grid;
  place-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.wo-item-card-img {
  width: 100%;
  height: 100%;
  /* `contain` shows the full artwork (letterboxed if the thumbnail
     aspect ratio differs) so wide/tall designs aren't cropped. Was
     `cover` which cropped to fill — looked good but hid edge content. */
  object-fit: contain;
  display: block;
}
.wo-item-card-placeholder {
  font-size: 2.4rem;
  color: var(--muted);
  opacity: .5;
}
.wo-item-card-body {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.wo-item-card-art {
  display: none; /* Combined into name line below ("01 Pachu" style). */
}
.wo-item-card-name {
  font-size: .88rem;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.wo-item-card-size {
  font-size: .72rem;
  color: var(--muted);
  margin-top: 2px;
}
.wo-item-card-size-label {
  font-weight: 700;
  letter-spacing: .04em;
  margin-right: 2px;
}
.wo-item-card-status {
  margin-top: 6px;
}

/* Hide the toolbar status chips block (replaced by the select), in case
   any old DOM is still present somewhere. */
.wo-items-status-chips { display: none !important; }

/* Dark-mode adjustments */
/* Toggle inherits dark-mode tones automatically from --accent /
   --accent-muted (no extra overrides needed). */

/* ── Sort by: label + select pair ──────────────────────────── */
.wo-items-sort-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.wo-items-sort-label {
  color: var(--muted);
  font-size: .76rem;
  font-weight: 600;
  white-space: nowrap;
}
.wo-items-sort-wrap .wo-items-select {
  min-width: 110px;
}

/* Thumbnail card — inline art# in muted, name in text colour. */
.wo-item-card-art-inline {
  color: var(--muted);
  font-weight: 700;
  margin-right: 2px;
}

/* ── Status select + Delete moved into the banner row ───────────── */
.wo-banner-status-select {
  width: auto;
  min-width: 130px;
}
/* WO banner delete — sits in the header (outside any table), so it
   carries a solid red border at rest, matching .qb-delete-quote-btn.
   The borderless variant is reserved for trashes INSIDE table rows
   (.row-action-trash / .wo-item-row-delete / .mat-trash-btn). */
.wo-banner-delete-btn {
  background: transparent !important;
  border: 1px solid #dc2626 !important;
  color: #dc2626 !important;
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  border-radius: 6px;
  padding: 0 !important;
  transition: background .12s, color .12s, border-color .12s;
}
.wo-banner-delete-btn:hover {
  background: rgba(220,38,38,.12) !important;
  color: #b91c1c !important;
  border-color: #dc2626 !important;
}
html[data-theme="dark"] .wo-banner-delete-btn {
  color: #ef4444 !important;
  border-color: #ef4444 !important;
}
html[data-theme="dark"] .wo-banner-delete-btn:hover {
  background: rgba(239, 68, 68, .18) !important;
  color: #f87171 !important;
  border-color: #ef4444 !important;
}

/* The page-header-actions cluster shrinks to just Discard-draft. When
   no draft, it can be empty; keep the right side reserved. */
.wo-page-header-actions { margin-left: auto; }

/* ====================================================================
   Phase 5.3 — NEW item status + Item modal redesign
   ==================================================================== */

/* Status pill: NEW = gray/muted (no proof yet, lifecycle hasn't started). */
.wo-item-pill-new {
  background: rgba(108,117,125,.12);
  color: #6c757d;
}
.wo-items-chip.active[data-status="NEW"] {
  background: rgba(108,117,125,.14); color: #6c757d; border-color: #6c757d;
}
html[data-theme="dark"] .wo-item-pill-new { color: #9ca3af; background: rgba(156,163,175,.16); }

/* Update REVIEW/UPDATED pills to use the colours we set in Phase 5.2
   (they were already declared but make sure overrides win). */

/* ── Item modal redesign ────────────────────────────────────── */
.wo-item-modal-content {
  border: 1px solid var(--border);
  background: var(--surface);
  max-height: 92vh;
}

/* Header — plain surface; the category cue is the 3px orange accent
   bar at the top of .modal-content (set via inline --modal-accent
   in the view). */
.wo-item-modal-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--border);
}
.wo-item-modal-id {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.wo-item-modal-art {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--muted);
  flex-shrink: 0;
}
.wo-item-modal-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.wo-item-modal-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.wo-item-modal-status .btn-close { margin-left: 4px; }

/* Body — 2-column grid (proof+actions left, comments right). */
.wo-item-modal-body {
  padding: 0;
  background: var(--bg);
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.wo-item-modal-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  height: 100%;
  min-height: 360px;
}
@media (max-width: 991px) {
  .wo-item-modal-grid { grid-template-columns: 1fr; }
}

.wo-item-modal-col-left {
  padding: 18px 22px;
  border-right: 1px solid var(--border);
  background: var(--bg);
  overflow-y: auto;
}
.wo-item-modal-col-right {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  min-height: 0;
  overflow: hidden;
}

.wo-item-modal-actions-head { margin-top: 18px; }
.wo-item-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.wo-item-modal-actions > .ms-auto { margin-left: auto; }

/* Cancel item — soft red outline + hover-fill. */
.wo-btn-outline-danger-soft {
  background: transparent;
  color: #b91c1c;
  border: 1px solid #b91c1c;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  font-size: .78rem;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.wo-btn-outline-danger-soft:hover,
.wo-btn-outline-danger-soft:focus {
  background: rgba(220,38,38,.12);
  color: #991b1b;
  border-color: #b91c1c;
}
html[data-theme="dark"] .wo-btn-outline-danger-soft {
  color: #f87171; border-color: #f87171;
}
html[data-theme="dark"] .wo-btn-outline-danger-soft:hover {
  background: rgba(248,113,113,.18); color: #fca5a5;
}

/* Delete inside the modal — borderless icon, red on hover. */
.wo-item-modal-delete-btn {
  background: transparent !important;
  border: 1px solid transparent !important;
  color: #b91c1c !important;
  margin-left: auto;
  width: 32px;
  height: 32px;
  padding: 0 !important;
  display: inline-grid;
  place-items: center;
  border-radius: 6px;
  transition: background .12s, color .12s, border-color .12s;
}
.wo-item-modal-delete-btn:hover {
  background: rgba(220,38,38,.12) !important;
  color: #991b1b !important;
  border-color: #dc2626 !important;
}
html[data-theme="dark"] .wo-item-modal-delete-btn { color: #f87171 !important; }
html[data-theme="dark"] .wo-item-modal-delete-btn:hover {
  background: rgba(248,113,113,.14) !important;
  color: #fca5a5 !important;
  border-color: #f87171 !important;
}

/* Comments column inside the modal */
.wo-item-comments-head-compact {
  padding: 14px 22px 10px;
}
.wo-item-comment-composer {
  padding: 12px 22px 14px;
}
.wo-item-comments-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 14px 22px !important;
  background: var(--bg) !important;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0 !important;
}

/* Compact comment cards inside the item modal — match the WO-level
   thread style (border-bottom between items, no boxed cards). */
.wo-item-comments-scroll .wo-item-comment-card {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 0 0 12px !important;
  margin: 0 !important;
  border-radius: 0 !important;
}
.wo-item-comments-scroll .wo-item-comment-card:last-child {
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* ====================================================================
   Phase 5.4 — Item modal full redesign (matches the legacy proof modal)
   ==================================================================== */

/* Override Phase 5.3 modal-header — use orange tint + bigger label,
   close button visible in dark mode. */
.wo-item-modal-content {
  border: 1px solid var(--border);
  background: var(--surface);
  max-height: 92vh;
  overflow: hidden;
}
.wo-item-modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.wo-item-modal-id {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.wo-item-modal-icon {
  color: var(--accent);
  font-size: 1.1rem;
}
.wo-item-modal-label {
  color: var(--accent);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .04em;
}
.wo-item-modal-sep {
  color: var(--muted);
  opacity: .5;
}
.wo-item-modal-name {
  color: var(--text);
  font-weight: 500;
  font-size: 1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}
.wo-item-modal-art-secondary {
  color: var(--muted);
  font-size: .82rem;
  font-weight: 600;
  flex-shrink: 0;
}
.wo-item-modal-close {
  background: transparent;
  border: 0;
  color: var(--muted);
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1.1rem;
  transition: color .12s, background .12s;
}
.wo-item-modal-close:hover {
  color: var(--text);
  background: rgba(0,0,0,.06);
}
html[data-theme="dark"] .wo-item-modal-close { color: var(--muted); }
html[data-theme="dark"] .wo-item-modal-close:hover {
  color: var(--text);
  background: rgba(255,255,255,.08);
}

/* Body uses canvas; cards inside are surface. */
.wo-item-modal-body {
  background: var(--bg);
  padding: 16px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.wo-item-modal-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
@media (max-width: 991px) {
  .wo-item-modal-grid { grid-template-columns: 1fr; }
}
.wo-item-modal-col-left,
.wo-item-modal-col-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* Card primitive */
.wo-item-modal-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
}
.wo-item-modal-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.wo-item-modal-card h3,
.wo-item-modal-card-title {
  font-size: .95rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  letter-spacing: -0.005em;
}
.wo-item-modal-card-head h3 { margin: 0; }

/* Proof preview area — visual chrome only.
   Sizing/layout rules live near the bottom of this file (search for
   "Proof preview — final/canonical fit-to-container"). */
.wo-item-modal-card .wo-item-proof-preview {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 12px;
}
.wo-item-modal-card .wo-item-proof-empty {
  padding: 80px 12px;
}

/* Proof actions row */
.wo-item-proof-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.wo-modal-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  font-size: .78rem;
  font-weight: 600;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.wo-modal-btn-ghost:hover:not(:disabled),
.wo-modal-btn-ghost:focus:not(:disabled) {
  background: var(--bg);
  border-color: var(--text-2, var(--muted));
}
.wo-modal-btn-ghost:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.wo-modal-btn-orange {
  /* Outline orange — matches the canonical .btn-canon-wo pattern.
     Same shape as .wo-modal-btn-ghost (the Enlarge / Download
     buttons next to it in the proof modal) but tinted with the
     WO accent so the primary action still reads brand-identified. */
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 14px;
  font-size: .78rem;
  font-weight: 600;
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 6px;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.wo-modal-btn-orange:hover:not(:disabled),
.wo-modal-btn-orange:focus:not(:disabled) {
  background: var(--accent-muted);
  color: var(--accent);
}

/* Status card */
.wo-item-status-card .wo-item-pill {
  /* show in card head */
}
.wo-item-approve-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 0;
  cursor: pointer;
}
.wo-item-approve-row input { cursor: pointer; }
.wo-item-approve-row input:disabled { cursor: not-allowed; opacity: .55; }
.wo-item-approve-label {
  font-size: .92rem;
  font-weight: 600;
  color: var(--text);
}
.wo-item-approve-hint {
  font-size: .78rem;
  margin: 6px 0 12px;
  display: flex;
  align-items: flex-start;
  gap: 4px;
  line-height: 1.4;
}
.wo-item-status-actions { margin-top: 12px; }

/* History list */
.wo-item-history {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: .82rem;
  color: var(--text-2, var(--text));
  /* Cap at ~8 rows; older entries scroll into view inside the card.
     scrollbar-gutter keeps the reserved-space stable so the layout
     doesn't shift when there are few entries. */
  max-height: 240px;
  overflow-y: auto;
  padding-right: 8px;
  scrollbar-gutter: stable;
}
.wo-item-history li {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.wo-item-history li::before {
  content: "•";
  color: var(--muted);
  flex-shrink: 0;
}
.wo-item-history .wo-history-empty {
  color: var(--muted);
  font-style: italic;
}
.wo-item-history strong {
  font-weight: 600;
  color: var(--text);
}

/* Comments card — smaller fonts, no Private toggle, send btn top-right */
.wo-item-comments-card .wo-item-comment-textarea {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  font-size: .86rem;
  resize: vertical;
  min-height: 70px;
}
.wo-item-comments-card .wo-item-comment-textarea:focus {
  border-color: rgba(127, 127, 127, .55) !important;
  box-shadow: 0 0 0 .12rem rgba(127, 127, 127, .18);
  outline: none;
}
.wo-item-comments-list {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 320px;
  overflow-y: auto;
  padding-right: 4px;
}
.wo-item-comment-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: .80rem;
}
.wo-item-comment-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: .76rem;
}
.wo-item-comment-author {
  font-weight: 600;
}
.wo-item-comment-author.author-admin { color: var(--accent); }
.wo-item-comment-author.author-user  { color: #0d6efd; }
.wo-item-comment-time {
  color: var(--muted);
  font-size: .70rem;
}
.wo-item-comment-body {
  color: var(--text-2, var(--text));
  line-height: 1.4;
  white-space: pre-wrap;
}

/* History list scrollbar (subtle so it doesn't compete with the card) */
.wo-item-history::-webkit-scrollbar { width: 6px; }
.wo-item-history::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.wo-item-history::-webkit-scrollbar-thumb:hover { background: var(--muted); }
.wo-item-comments-list::-webkit-scrollbar { width: 6px; }
.wo-item-comments-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* ── Item modal: quick info strip (Size + Material) ──────────── */
.wo-item-modal-meta {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 10px 22px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.wo-item-modal-meta-cell {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.wo-item-modal-meta-label {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
}
.wo-item-modal-meta-value {
  font-size: .86rem;
  font-weight: 500;
  color: var(--text);
}

/* ====================================================================
   Phase 5.5 — modal polish (compact comments, header meta, image fit)
   ==================================================================== */

/* Move Size + Material into the header (right of the title, before X). */
.wo-item-modal-header { gap: 14px; }
.wo-item-modal-header-meta {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  flex-shrink: 0;
}
.wo-item-modal-header-meta .wo-item-modal-meta-cell {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.wo-item-modal-header-meta .wo-item-modal-meta-label {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
}
.wo-item-modal-header-meta .wo-item-modal-meta-value {
  font-size: .82rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.1;
}

/* Hide the legacy below-header strip (now empty / no longer in HTML). */
.wo-item-modal > .wo-item-modal-meta { display: none; }

@media (max-width: 768px) {
  .wo-item-modal-header { flex-wrap: wrap; }
  .wo-item-modal-header-meta { gap: 14px; width: 100%; padding-top: 6px; border-top: 1px dashed var(--border); }
}

/* (Proof preview sizing rules moved to the canonical block near the
   bottom of this file — search for "Proof preview — final/canonical".) */

/* ── History — separate the title from the list ──────────────── */
.wo-item-modal-card .wo-item-modal-card-title {
  margin-bottom: 12px;
}
.wo-item-history { margin-top: 4px; }

/* ── Comments — WhatsApp-style: no border, tight, conversational. */
.wo-item-comments-card .wo-item-comments-list {
  margin-top: 16px;
  gap: 10px;
}
.wo-item-comments-card .wo-item-comment-card {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
.wo-item-comment-head {
  align-items: baseline;
  gap: 6px;
  margin-bottom: 1px;
}
.wo-item-comment-author {
  font-size: .80rem;
  font-weight: 700;
}
.wo-item-comment-time {
  font-size: .68rem;
  color: var(--muted);
  font-weight: 500;
}
.wo-item-comment-body {
  font-size: .82rem;
  color: var(--text);
  line-height: 1.35;
  white-space: pre-wrap;
}

/* ── Item modal art # — sits between PROOF · and the name ───── */
.wo-item-modal-id .wo-item-modal-art {
  color: var(--muted);
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .03em;
}
.wo-item-modal-id .wo-item-modal-art:empty { display: none; }

/* ── Proof preview — final/canonical fit-to-container rules ──
   Earlier in this file there are several layers that try to size the
   preview area; they conflict and (depending on browser) leave tall
   images cropped. These rules supersede everything above for the
   modal's proof card.

   Image: scale down to fit, never crop. We deliberately use
   max-width/max-height with width/height auto instead of
   width:100%; height:100%; object-fit:contain — that combination was
   producing crop-style behaviour on tall proofs in some Chromium
   builds. This pattern is the canonical "letterbox an image inside
   a fixed box" idiom and never crops.
   PDF: iframe fills the container; the URL hash carries view=Fit so
   the native PDF viewer scales the page to fit both axes.  */
.wo-item-modal-card .wo-item-proof-preview {
  display: flex !important;
  align-items: center;
  justify-content: center;
  height: 380px !important;
  min-height: unset !important;
  max-height: unset !important;
  padding: 8px;
  overflow: hidden;
}
.wo-item-modal-card .wo-item-proof-img {
  display: block;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain;
}
.wo-item-modal-card .wo-item-proof-iframe {
  width: 100% !important;
  height: 100% !important;
  border: 0;
}

/* Make sure the user-comment author colour wins (Phase 5.4 added the
   author-admin / author-user classes, Phase 5.5 sometimes loses to
   stricter selectors, force them here). */
.wo-item-comments-card .wo-item-comment-author.author-admin { color: var(--accent); }
.wo-item-comments-card .wo-item-comment-author.author-user  { color: #0d6efd; }
html[data-theme="dark"] .wo-item-comments-card .wo-item-comment-author.author-user { color: #60a5fa; }

/* CANCELED in dark mode — slightly lighter red so it pops on canvas. */
html[data-theme="dark"] .wo-item-pill-canceled {
  background: rgba(248,113,113,.16);
  color: #f87171;
}
html[data-theme="dark"] .wo-items-chip.active[data-status="CANCELED"] {
  background: rgba(248,113,113,.16);
  color: #f87171;
  border-color: #f87171;
}

/* ──────────────────────────────────────────────────────────────────
   Shipping & Invoicing tab (Phase 2, 2026-05-18)
   ────────────────────────────────────────────────────────────────── */
/* Legacy .wo-shipping-header — kept in case anything else references
   it; the actual toolbar now uses the canonical .wo-items-toolbar
   so Shipping & Invoicing reads the same as Misc/Displays/etc. */
.wo-shipping-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.wo-shipping-legal-name {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Label was cut off because it inherited muted-small styling and
   the toolbar squeezed the select tight. Give the label a fixed
   readable size + bump the select min-width so multi-word legal
   names (e.g. "Dufry St. Marteen") show in full. */
.wo-shipping-legal-label {
  font-size: .82rem;
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: .01em;
}
.wo-shipping-legal-select {
  min-width: 260px;
  max-width: 360px;
}

/* Two-column grid that wraps to single-col on narrow screens. The
   minmax(360px, 1fr) lets each card breathe; gap is the visual gutter
   between columns. Pachu 2026-05-18 redesign: cards used to be 1-col
   full-width with lots of whitespace. */
#woShipmentsList {
  padding: 14px 18px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 10px;
}
.wo-shipments-empty {
  font-size: .9rem;
  grid-column: 1 / -1;
}
/* Default destination hint inside the empty state — surfaces the
   client legal-name's default address so the admin knows what the
   Quote PDF / Invoice will use when no explicit shipment exists. */
.wo-shipments-default-hint {
  display: inline-block;
  padding: 8px 14px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: var(--surface);
  max-width: 520px;
}
.wo-shipments-default-hint strong { color: var(--text); }

.wo-shipment-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
}
/* Top of card: type pill + kind pill, alone on this line. */
.wo-shipment-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
/* Body row: content on the left grows; side rail (item-count +
   action icons) stacks on the right so the icons stay close to the
   card content instead of flying to the far edge. */
.wo-shipment-body {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.wo-shipment-body-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wo-shipment-body-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}
.wo-shipment-type-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.wo-shipment-type-shipping {
  background: rgba(255,123,0,.14);
  color: var(--accent);
}
.wo-shipment-type-delivery {
  background: rgba(13,148,136,.14);
  color: #0d9488;
}
.wo-shipment-kind-pill {
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 8px;
}
.wo-shipment-title {
  font-weight: 600;
  color: var(--text);
  font-size: .95rem;
  line-height: 1.25;
}
.wo-shipment-subline { margin: 0; }
/* Inline carrier/tracking strip — only renders when there's data
   (no labels, no "—" placeholders). */
.wo-shipment-meta-inline { margin-top: 2px; }
.wo-shipment-meta-inline strong {
  color: var(--text);
  font-weight: 700;
}
/* Notes line — own row below meta. */
.wo-shipment-notes { margin-top: 6px; }
.wo-shipment-item-count {
  font-size: .78rem;
  font-weight: 600;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 9px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  line-height: 1;
}
/* Button variant of the count chip — clickable, opens the items
   panel below the card. Keeps a button shape but masquerades as
   the static pill. */
button.wo-shipment-toggle {
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
button.wo-shipment-toggle:hover {
  background: var(--bg);
  color: var(--text);
  border-color: var(--text);
}
/* Tiny "expand" glyph next to the item count on the chip — signals
   the chip is clickable. The actual items list opens in a modal
   (see openItemsModal). */
.wo-shipment-expand-glyph {
  font-size: .62rem;
  opacity: .55;
}
.wo-shipment-items-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .82rem;
}
.wo-shipment-items-table thead th {
  text-align: center;
  font-weight: 600;
  font-size: .72rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
}
.wo-shipment-items-table tbody td {
  text-align: center;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.wo-shipment-items-table tbody tr:last-child td { border-bottom: none; }
.wo-shipment-items-table tbody tr:hover td { background: var(--bg); }
.wo-shipment-items-table .wo-shipment-items-num {
  width: 64px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #b45309;
}
.wo-shipment-items-table .wo-shipment-items-name {
  text-align: left;
  font-weight: 500;
}
.wo-shipment-items-table .wo-shipment-items-dim {
  width: 130px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.wo-shipment-items-table .wo-shipment-items-qty {
  width: 60px;
  font-variant-numeric: tabular-nums;
}
.wo-shipment-items-table .wo-shipment-items-mat {
  width: 140px;
  color: var(--muted);
}
.wo-shipment-actions {
  display: flex;
  gap: 4px;
}
.wo-shipment-edit,
.wo-shipment-delete,
.wo-shipment-excel,
.wo-shipment-ps {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--muted);
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.wo-shipment-edit:hover {
  background: rgba(127,127,127,.12);
  color: var(--text);
  border-color: var(--text);
}
.wo-shipment-excel:hover { color: #16a34a; border-color: #16a34a; }
.wo-shipment-ps:hover   { color: #dc2626; border-color: #dc2626; }
.wo-shipment-delete:hover {
  background: rgba(220,38,38,.10);
  color: #dc2626;
  border-color: #dc2626;
}
.wo-shipment-edit[disabled],
.wo-shipment-excel[disabled],
.wo-shipment-ps[disabled],
.wo-shipment-delete[disabled] { opacity: .5; pointer-events: none; }
.wo-shipment-track-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.wo-shipment-track-link:hover { text-decoration: underline; }

/* Modal grid — two-column when there's space, one when narrow. */
.wo-shipment-modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.wo-shipment-modal-grid .full { grid-column: 1 / -1; }
.wo-shipment-modal-subgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.wo-shipment-modal-subgrid .full { grid-column: 1 / -1; }