/* ══════════════════════════════════════════════════════════════════
   Workshop page — team-wide job planning (plan board / parts / my work)
   Class prefix: .wk-   Palette + label idiom match jobs.css.
   ══════════════════════════════════════════════════════════════════ */

#workshop.active {
  display: flex !important;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  /* Fill the main-content viewport so the page's own header stays put and the
     content below it scrolls internally (main-content is block, so flex:1 alone
     wouldn't bound us — the explicit height does). */
  height: 100%;
  overflow: hidden;
}
#wk-root {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.wk-loading, .wk-error, .wk-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #5a6678;
  padding: 40px 20px;
  text-align: center;
}
.wk-loading .material-symbols-outlined { font-size: 28px !important; animation: wk-spin 1.2s linear infinite; }
@keyframes wk-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .wk-loading .material-symbols-outlined { animation: none; }
}
.wk-empty .material-symbols-outlined { font-size: 34px !important; color: #2a3545; }
.wk-empty p { max-width: 42ch; font-size: 14px; }

/* ── Header ── */
.wk-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px 12px;
  border-bottom: 1px solid #1f2530;
  flex-shrink: 0;
  flex-wrap: wrap;
}
/* Matches the global .page h1 spec (base.css) so the topbar reads the same as
   Dashboard / Fleet / Calendar. */
.wk-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #dce3ed;
  display: flex;
  align-items: center;
  gap: 8px;
}
.wk-head-spacer { flex: 1; }

.wk-tabs { display: flex; gap: 4px; }
.wk-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #7a8a9b;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.wk-tab:hover { color: #c3d0dd; border-color: #2a3545; }
.wk-tab.active { background: var(--accent); border-color: var(--accent); color: #0a0c0f; }
.wk-tab .material-symbols-outlined { font-size: 15px !important; }
/* Phone-only tab chrome: the short label and the count badge. Both are in the
   DOM at every width so the strip never re-renders on resize — the ≤900px
   block below is what turns them on. */
.wk-tab-sm, .wk-tab-n { display: none; }

.wk-ev-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.08);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  color: var(--accent);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  white-space: nowrap;
}
.wk-ev-chip .material-symbols-outlined { font-size: 13px !important; }

/* ── Toolbar (plan view) ── */
.wk-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.wk-week-nav { display: flex; align-items: center; gap: 6px; }
.wk-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: #101318;
  border: 1px solid #1f2530;
  border-radius: 7px;
  color: #7a8a9b;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.wk-icon-btn:hover { border-color: #2a3545; color: #dce3ed; }
.wk-icon-btn .material-symbols-outlined { font-size: 17px !important; }
/* Delete is a danger icon button — neutral at rest, red on hover. */
.wk-wo-del:hover { border-color: #7f1d1d; color: #f87171; background: rgba(127, 29, 29, 0.15); }
.wk-week-today {
  padding: 4px 11px;
  background: #101318;
  border: 1px solid #1f2530;
  border-radius: 7px;
  color: #7a8a9b;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.wk-week-today:hover { border-color: #2a3545; color: #dce3ed; }
.wk-week-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #8a9aab;
  font-variant-numeric: tabular-nums;
}
.wk-readonly-hint {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  color: #5a6678;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.wk-readonly-hint .material-symbols-outlined { font-size: 14px !important; }

/* ── Plan board grid ── */
.wk-board {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 0 14px 20px;
}
.wk-grid {
  display: grid;
  grid-template-columns: 158px repeat(7, minmax(126px, 1fr));
  min-width: 1050px;
  background: #0c1016;
  border: 1px solid #1a2330;
  border-radius: 10px;
  overflow: hidden;
}
.wk-gh {
  padding: 8px 10px;
  border-bottom: 1px solid #1f2530;
  border-left: 1px solid #1a2330;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #5a6678;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.wk-gh-first { border-left: none; text-align: left; }
/* One-column slide when the board window moves through time (week nav buttons
   or drag-holding a chip at a horizontal edge). */
.wk-grid.wk-slide-fwd  { animation: wk-slide-fwd 180ms ease-out; }
.wk-grid.wk-slide-back { animation: wk-slide-back 180ms ease-out; }
@keyframes wk-slide-fwd  { from { transform: translateX(26px);  opacity: 0.55; } to { transform: none; opacity: 1; } }
@keyframes wk-slide-back { from { transform: translateX(-26px); opacity: 0.55; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .wk-grid.wk-slide-fwd, .wk-grid.wk-slide-back { animation: none; }
}
.wk-gh.wk-today { color: var(--accent); }
.wk-gh-d { display: block; font-size: 15px; font-weight: 700; color: #8a9aab; }
.wk-gh.wk-today .wk-gh-d { color: var(--accent); }

.wk-lane-label {
  padding: 9px 11px;
  border-top: 1px solid #1a2330;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.wk-av {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
}
.wk-av-photo { background-size: cover; background-position: center; }
.wk-lane-txt { min-width: 0; display: flex; flex-direction: column; }
.wk-lane-name {
  font-size: 13px;
  font-weight: 600;
  color: #dce3ed;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wk-lane-role {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #5a6678;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wk-tray-name { color: #7a8a9b; }

.wk-cell {
  border-top: 1px solid #1a2330;
  border-left: 1px solid #1a2330;
  padding: 5px 5px 16px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: 54px;
  position: relative;
}
.wk-cell.wk-today { background: #0e131b; }
.wk-cell.wk-away {
  background: repeating-linear-gradient(135deg,
    rgba(var(--accent-rgb), 0.03) 0 7px, rgba(var(--accent-rgb), 0.07) 7px 14px);
}
.wk-away-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: rgba(var(--accent-rgb), 0.7);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.wk-away-label .material-symbols-outlined { font-size: 12px !important; }
.wk-load {
  position: absolute;
  right: 5px;
  bottom: 3px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #4a5a6b;
  font-variant-numeric: tabular-nums;
}
.wk-load.wk-over { color: #f87171; }

/* ── Day-part slot zones inside a cell (Any time / Morning / Afternoon / Evening) ── */
.wk-slot {
  display: flex;
  flex-direction: column;
  gap: 5px;
  border-radius: 6px;
}
.wk-slot-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: #4a5a6b;
  line-height: 1;
}
.wk-slot-tag .material-symbols-outlined { font-size: 11px !important; }
/* Unslotted jobs are just "in the cell" — the zone only names itself mid-drag. */
.wk-slot-any > .wk-slot-tag { display: none; }
/* Empty zones cost no space until a chip is being dragged… */
.wk-slot-empty { display: none; }
/* …then all four unfold as labeled drop strips. */
body.wk-drag-live .wk-slot {
  display: flex;
  min-height: 25px;
  border: 1px dashed #232e3d;
  padding: 3px 4px;
}
body.wk-drag-live .wk-slot-any > .wk-slot-tag { display: inline-flex; }
body.wk-drag-live .wk-slot.wk-drop-hover {
  border-style: solid;
  border-color: rgba(var(--accent-rgb), 0.5);
}

.wk-tray-label { background: #0a0d12; }
.wk-tray {
  grid-column: 2 / -1;
  border-top: 1px solid #1a2330;
  border-left: 1px solid #1a2330;
  padding: 6px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: flex-start;
  background: repeating-linear-gradient(135deg, #0a0d12 0 7px, #0c1016 7px 14px);
}
.wk-tray .wk-chip { width: 196px; }
.wk-tray-empty {
  color: #4a5a6b;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 6px 8px;
}

/* ── Job chip (board card, .jl-tlc anatomy shrunk) ── */
.wk-chip {
  position: relative;
  background: #101318;
  border: 1px solid #1f2530;
  border-radius: 8px;
  padding: 6px 8px 6px 11px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: grab;
  transition: border-color 0.15s, background 0.15s;
  min-width: 0;
}
.wk-chip::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 8px 0 0 8px;
  background: var(--u, #64748b);
}
.wk-chip:hover { border-color: #2a3545; }
.wk-chip[draggable="false"], .wk-chip:not([draggable]) { cursor: default; }
.wk-chip.wk-dragging { opacity: 0.45; }
.wk-chip-title {
  font-size: 12.5px;
  font-weight: 700;
  color: #dce3ed;
  line-height: 1.25;
  display: flex;
  align-items: center;
  gap: 4px;
  word-break: break-word;
}
.wk-chip-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-height: 12px;
}
.wk-crit { display: inline-flex; color: #f87171; }
.wk-crit .material-symbols-outlined { font-size: 13px !important; }

.wk-car-tag {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #8a9aab;
  background: #141820;
  border: 1px solid #2a3545;
  border-radius: 4px;
  padding: 0 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 110px;
}
.wk-t-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #6a7a8b;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.wk-t-chip .material-symbols-outlined { font-size: 12px !important; }
.wk-t-wait { color: #fbbf24; }
.wk-t-block { color: #f87171; }
.wk-t-issue { color: #f59e0b; }
.wk-t-due { color: #8a9aab; }
.wk-t-live { color: var(--accent); }
.wk-t-done { color: #22c55e; }

/* Unique job id reference (#12) — shown on chips, the work order and search */
.wk-job-id {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #6a7a8b;
  background: #171b22;
  border: 1px solid #262d38;
  border-radius: 4px;
  padding: 0 5px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Completed jobs stay on the board, dimmed and green rather than removed */
.wk-chip-done { opacity: 0.62; background: rgba(34, 197, 94, 0.05); }
.wk-chip-done:hover { opacity: 0.85; border-color: rgba(34, 197, 94, 0.4); }
.wk-chip-done .wk-chip-title { color: #8aa596; }
.wk-live {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--accent);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}
.wk-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: wk-pulse 1.6s infinite;
}
@keyframes wk-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .wk-live-dot { animation: none; } }

/* Drop feedback */
.wk-drop-hover { background: rgba(var(--accent-rgb), 0.06) !important; }
.wk-cell.wk-drop-hover, .wk-tray.wk-drop-hover { box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.4); }

/* ── Parts queue — work-order cards ── */
.wk-pq { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* toolbar: pipeline as filter chips + view/group toggles + search */
.wk-pq-bar {
  flex-shrink: 0;
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  padding: 14px 20px; border-bottom: 1px solid #1a2029;
}
.wk-pq-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.wk-pq-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: #101318; border: 1px solid #232a35; border-radius: 999px;
  padding: 6px 12px; font-size: 12px; color: #8a9aab; cursor: pointer;
  font-family: inherit; transition: color .14s, border-color .14s, background .14s;
}
.wk-pq-chip:hover { border-color: #33404f; color: #dce3ed; }
.wk-pq-dot { width: 8px; height: 8px; border-radius: 50%; }
.wk-pq-n {
  font-weight: 700; font-variant-numeric: tabular-nums; font-size: 11px;
  min-width: 14px; text-align: center; padding: 0 5px; border-radius: 999px;
  background: #0a0d11; color: #b6c2d0;
}
.wk-pq-chip.on { color: #0b0d10; font-weight: 600; border-color: transparent; }
.wk-pq-chip.on .wk-pq-n { background: rgba(0, 0, 0, 0.18); color: inherit; }
.wk-pq-chip.on.attn  { background: #dce3ed; }
.wk-pq-chip.on.red   { background: #ef4444; color: #fff; }
.wk-pq-chip.on.amber { background: #f59e0b; color: #241a00; }
.wk-pq-chip.on.green { background: #22c55e; color: #06210f; }
.wk-pq-chip.on.all   { background: #33404f; color: #fff; }
.wk-pq-bar-spacer { flex: 1; }
.wk-pq-seg { display: inline-flex; background: #101318; border: 1px solid #232a35; border-radius: 8px; overflow: hidden; }
.wk-pq-seg button {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  background: none; border: none; color: #8a9aab; font-family: inherit;
  font-size: 11.5px; padding: 6px 11px; cursor: pointer;
}
.wk-pq-seg button + button { border-left: 1px solid #232a35; }
.wk-pq-seg button.on { background: #212a36; color: #dce3ed; }
.wk-pq-seg button .material-symbols-outlined { font-size: 15px !important; }
.wk-pq-searchbox {
  display: inline-flex; align-items: center; gap: 7px;
  background: #101318; border: 1px solid #232a35; border-radius: 8px; padding: 6px 11px; color: #5a6678;
}
.wk-pq-searchbox .material-symbols-outlined { font-size: 15px !important; }
.wk-pq-searchbox input { background: none; border: none; outline: none; color: #dce3ed; font-family: inherit; font-size: 12px; width: 120px; }
/* Phone-only toolbar chrome. The sheet wrapper is `display: contents` here, so
   on desktop its two segs sit inline in the bar exactly as they always have —
   below 900px the same wrapper becomes the bottom sheet. */
.wk-pq-sheet { display: contents; }
.wk-pq-iconbtn,
.wk-pq-sheet-bd,
.wk-pq-sheet-grab,
.wk-pq-sheet-h,
.wk-pq-sheet-l,
.wk-pq-sheet-done { display: none; }
@keyframes wkSheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .wk-pq-sheet.open { animation: none; } }

.wk-pq-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 20px 28px; max-width: 1060px; }
.wk-pq-grp {
  display: flex; align-items: center; gap: 8px;
  font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 800;
  letter-spacing: 1px; text-transform: uppercase; color: #6a7889;
  margin: 22px 2px 10px;
}
.wk-pq-grp:first-child { margin-top: 2px; }
.wk-pq-grp .material-symbols-outlined { font-size: 15px !important; }
.wk-pq-grp::after { content: ""; flex: 1; height: 1px; background: #1c232d; }
.wk-pq-cnt {
  background: #141820; border: 1px solid #2a3545; border-radius: 999px;
  padding: 0 7px; font-size: 10px; color: #8a9aab; font-variant-numeric: tabular-nums;
}
.wk-pq-cards { display: flex; flex-direction: column; gap: 9px; }

/* the card */
.wk-pqc {
  position: relative; background: #101318; border: 1px solid #1f2530;
  border-radius: 11px; overflow: hidden; transition: border-color .14s;
}
.wk-pqc:hover { border-color: #2a3545; }
.wk-pqc-ready { opacity: 0.6; }
.wk-pqc-ready:hover { opacity: 1; }
.wk-pqc-spine { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c, #3b82f6); }
.wk-pqc-head {
  display: grid; grid-template-columns: 20px auto minmax(0, 1fr) auto;
  align-items: center; gap: 14px; padding: 12px 16px 12px 18px; cursor: pointer;
}
.wk-pqc-exp { color: #5a6678; font-size: 20px !important; transition: transform .15s; }
.wk-pqc.open .wk-pqc-exp { transform: rotate(90deg); }
.wk-pqc-num { cursor: pointer; }
.wk-pqc-num:hover .wk-job-id { border-color: var(--accent); color: var(--accent); }
.wk-pqc-id { min-width: 0; }
.wk-pqc-title {
  display: block; font-size: 13.5px; font-weight: 600; color: #dce3ed;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wk-pqc-sub { display: flex; align-items: center; gap: 8px; margin-top: 3px; flex-wrap: wrap; }
.wk-pqc-who { display: inline-flex; align-items: center; gap: 6px; color: #8a9aab; font-size: 12px; white-space: nowrap; }
.wk-pqc-unassigned { color: #5a6678; }
.wk-av-none { background: #1a2029; color: #5a6678; }
.wk-pqc-right { display: flex; align-items: center; gap: 16px; }
.wk-pqc-when {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: 'Barlow Condensed', sans-serif; font-size: 11.5px; font-weight: 700;
  color: #8a9aab; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.wk-pqc-when .material-symbols-outlined { font-size: 14px !important; }
.wk-pqc-when-none { color: #4a5a6b; }
.wk-pqc-late { color: #fbbf24; }
.wk-pqc-prog { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.wk-pqc-track { display: flex; gap: 2px; width: 120px; height: 6px; border-radius: 3px; overflow: hidden; background: #0a0d11; }
.wk-pqc-track i { display: block; height: 100%; }
.wk-pqc-cnt-txt { font-size: 10.5px; color: #8a9aab; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wk-pqc-c-r { color: #f87171; font-weight: 700; }
.wk-pqc-c-a { color: #fbbf24; font-weight: 700; }
.wk-pqc-c-g { color: #4ade80; font-weight: 700; }
.wk-pqc-c-n { color: #6a7889; font-weight: 700; }
.wk-pqc-open {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font-family: 'Barlow Condensed', sans-serif; font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.5px; text-transform: uppercase; cursor: pointer;
  color: var(--accent); background: rgba(var(--accent-rgb), 0.05);
  border: 1px solid rgba(var(--accent-rgb), 0.28); border-radius: 7px; padding: 6px 10px;
  transition: background .14s, border-color .14s;
}
.wk-pqc-open:hover { background: rgba(var(--accent-rgb), 0.14); border-color: rgba(var(--accent-rgb), 0.5); }
.wk-pqc-open .material-symbols-outlined { font-size: 14px !important; }

/* parts nested in a card */
.wk-pqc-parts { display: none; border-top: 1px solid #1c232d; background: #0c0f13; padding: 4px 16px 10px 42px; }
.wk-pqc.open .wk-pqc-parts { display: block; }
.wk-pqc-prow {
  display: grid; grid-template-columns: 128px minmax(0, 1fr) auto;
  align-items: center; gap: 14px; padding: 9px 2px;
  border-bottom: 1px solid rgba(28, 35, 45, 0.6);
}
.wk-pqc-prow:last-of-type { border-bottom: none; }
.wk-pqc-pname { font-size: 13px; color: #dce3ed; display: flex; align-items: center; gap: 9px; min-width: 0; }
.wk-pqc-pact-lbl { font-size: 11px; color: #5a6678; text-transform: uppercase; letter-spacing: .4px; }
.wk-pqc-flag {
  font-family: 'Barlow Condensed', sans-serif; font-size: 9.5px; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase; color: #f87171;
  background: rgba(239, 68, 68, 0.12); border: 1px solid rgba(239, 68, 68, 0.3); border-radius: 4px; padding: 1px 6px;
}
.wk-pqc-pbtn { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.wk-pqc-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 8px 2px 3px; }
.wk-pqc-note { font-size: 10.5px; color: #4a5a6b; }

/* ETA — expected-arrival chip on on-order parts (native date picker overlaid) */
.wk-pqc-eta {
  position: relative; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; white-space: nowrap;
  font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  color: #8a9aab; background: #141820; border: 1px solid #2a3545; border-radius: 7px; padding: 4px 9px;
  transition: color .14s, border-color .14s;
}
.wk-pqc-eta:hover { color: #dce3ed; border-color: #3a4756; }
.wk-pqc-eta.unset { color: #6a7889; border-style: dashed; }
.wk-pqc-eta.late { color: #fbbf24; border-color: rgba(251, 191, 36, 0.4); }
.wk-pqc-eta.readonly { cursor: default; }
.wk-pqc-eta .material-symbols-outlined { font-size: 13px !important; }
.wk-pqc-eta input[type="date"] { position: absolute; inset: 0; opacity: 0; margin: 0; border: 0; padding: 0; cursor: pointer; }
.wk-pqc-eta-hint { color: #8a9aab; font-weight: 400; }

/* batch procurement buttons */
.wk-pqc-batch { display: flex; gap: 8px; }
.wk-pqc-batch-btn {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer; white-space: nowrap;
  font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: #b6c2d0; background: #161d27; border: 1px solid #2a3545; border-radius: 7px; padding: 5px 11px;
  transition: color .14s, border-color .14s, background .14s;
}
.wk-pqc-batch-btn:hover { color: #dce3ed; border-color: #3a4756; background: #1c2530; }
.wk-pqc-batch-btn .material-symbols-outlined { font-size: 14px !important; }

/* status pill (shared by cards + list) */
.wk-pill {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-family: 'Barlow Condensed', sans-serif; font-size: 10.5px; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase; padding: 3px 9px; border-radius: 999px;
}
.wk-pill .material-symbols-outlined { font-size: 13px !important; }
.wk-pill-needed   { color: #f87171; background: rgba(239, 68, 68, 0.12); border: 1px solid rgba(239, 68, 68, 0.3); }
.wk-pill-ordered  { color: #fbbf24; background: rgba(245, 158, 11, 0.12); border: 1px solid rgba(245, 158, 11, 0.3); }
.wk-pill-received { color: #4ade80; background: rgba(34, 197, 94, 0.12); border: 1px solid rgba(34, 197, 94, 0.3); }
.wk-pill-none     { color: #6a7889; background: rgba(106, 120, 137, 0.1); border: 1px solid #2a3545; }

/* per-part action button (shared by cards + list) */
.wk-pqc-abtn {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; cursor: pointer;
  font-family: 'Barlow Condensed', sans-serif; font-size: 11.5px; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase;
  background: #141820; border: 1px solid #2a3545; color: #8a9aab; border-radius: 7px; padding: 5px 11px;
  transition: color .14s, border-color .14s, background .14s;
}
.wk-pqc-abtn:hover { color: #dce3ed; border-color: #3a4756; }
.wk-pqc-abtn.primary { background: rgba(var(--accent-rgb), 0.1); border-color: rgba(var(--accent-rgb), 0.35); color: var(--accent); }
.wk-pqc-abtn.primary:hover { background: rgba(var(--accent-rgb), 0.18); }
.wk-pqc-abtn.ghost { background: none; }
.wk-pqc-abtn .material-symbols-outlined { font-size: 14px !important; }

.wk-pq-empty { color: #4a5a6b; font-size: 12.5px; padding: 20px 4px; }

/* list (buyer) view */
.wk-pq-list { border: 1px solid #1f2530; border-radius: 11px; overflow-x: auto; }
.wk-pq-list table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.wk-pq-list thead th {
  text-align: left; font-family: 'Barlow Condensed', sans-serif; font-size: 10px;
  text-transform: uppercase; letter-spacing: 1px; color: #5a6678; font-weight: 800;
  padding: 9px 14px; background: #101318; border-bottom: 1px solid #1f2530; white-space: nowrap;
}
.wk-pq-list tbody td { padding: 10px 14px; border-bottom: 1px solid rgba(28, 35, 45, 0.6); vertical-align: middle; }
.wk-pq-list tbody tr:last-child td { border-bottom: none; }
.wk-pq-list tbody tr:hover { background: rgba(255, 255, 255, 0.02); }
.wk-pq-lp { font-weight: 600; color: #dce3ed; }
.wk-pq-lsub { color: #5a6678; font-size: 11.5px; }
.wk-pq-r { text-align: right; }

/* ── My Work ── */
.wk-mw {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 720px;
}
.wk-mw-sec-h {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #5a6678;
  margin: 10px 0 2px;
}
.wk-mw-card {
  position: relative;
  background: #101318;
  border: 1px solid #1f2530;
  border-radius: 12px;
  padding: 11px 13px 11px 16px;
  display: flex;
  align-items: center;
  gap: 13px;
  transition: border-color 0.15s;
}
.wk-mw-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 12px 0 0 12px;
  background: var(--u, #64748b);
}
.wk-mw-card.wk-mw-active {
  border-color: rgba(var(--accent-rgb), 0.45);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.15);
}
.wk-mw-card.wk-mw-waiting { opacity: 0.75; }
.wk-mw-card.wk-mw-done { opacity: 0.65; padding: 8px 13px 8px 16px; }
.wk-mw-check { color: #22c55e; font-size: 18px !important; }
.wk-mw-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.wk-mw-title {
  font-size: 14px;
  font-weight: 700;
  color: #dce3ed;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.wk-mw-meta { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.wk-prog { display: flex; align-items: center; gap: 6px; }
.wk-prog-bar {
  width: 64px;
  height: 4px;
  border-radius: 2px;
  background: #1a2030;
  overflow: hidden;
}
.wk-prog-bar i { display: block; height: 100%; background: var(--u, #64748b); }
.wk-prog b {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #7a8a9b;
  font-variant-numeric: tabular-nums;
}
.wk-mw-lock {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 7px;
  font-size: 12px;
  background: rgba(245, 158, 11, 0.07);
  border: 1px solid rgba(245, 158, 11, 0.25);
  color: #fbbf24;
  margin-top: 2px;
}
.wk-mw-lock .material-symbols-outlined { font-size: 14px !important; flex-shrink: 0; }
/* Non-blocking per-step issue rollup — amber, distinct from the red block lock */
.wk-mw-issues {
  padding: 6px 10px 7px;
  border-radius: 7px;
  background: rgba(245, 158, 11, 0.07);
  border: 1px solid rgba(245, 158, 11, 0.25);
  margin-top: 2px;
}
.wk-mw-issues-h {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #f59e0b;
}
.wk-mw-issues-h .material-symbols-outlined { font-size: 14px !important; }
.wk-mw-issue-row {
  font-size: 12px;
  color: #b5a06a;
  margin-top: 3px;
  padding-left: 20px;
}
.wk-mw-issue-row b { color: #d9c48a; font-weight: 700; }
.wk-play {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0e1520;
  border: 1px solid #24303f;
  border-radius: 9px;
  color: #6a7a8b;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.wk-play:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); }
.wk-play.active { background: var(--accent); border-color: var(--accent); color: #0c1016; }
.wk-play:disabled { opacity: 0.4; cursor: not-allowed; }
.wk-play .material-symbols-outlined { font-size: 18px !important; }

/* Card actions: play + delete sit together on the right of a job card. */
.wk-mw-acts { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.wk-mw-del {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #5a6675;
  cursor: pointer;
  opacity: 0;   /* revealed on card hover so it doesn't invite a mis-click */
  transition: opacity 0.15s, background 0.15s, color 0.15s, border-color 0.15s;
}
.wk-mw-card:hover .wk-mw-del { opacity: 1; }
.wk-mw-del:hover { background: rgba(127, 29, 29, 0.15); border-color: #7f1d1d; color: #f87171; }
.wk-mw-del .material-symbols-outlined { font-size: 18px !important; }
/* Touch devices have no hover to reveal it — keep it faintly present. */
@media (hover: none) { .wk-mw-del { opacity: 0.5; } }

/* ── Header add button ── */
.wk-add-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: var(--accent);
  color: #0a0c0f;
  border: none;
  border-radius: 8px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s;
}
.wk-add-btn:hover { background: #c8e838; }
.wk-add-btn .material-symbols-outlined { font-size: 16px !important; }

/* ── Crew picker popover ── */
.wk-crew-wrap { position: relative; }
.wk-crew-on { color: var(--accent) !important; border-color: var(--accent) !important; }
.wk-crew-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  min-width: 260px;
  background: #101318;
  border: 1px solid #2a3545;
  border-radius: 10px;
  padding: 8px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wk-crew-search {
  width: 100%;
  padding: 6px 10px;
  background: #0c1016;
  border: 1px solid #1f2530;
  border-radius: 7px;
  color: #dce3ed;
  font-family: 'Barlow', sans-serif;
  font-size: 13px;
}
.wk-crew-search:focus { outline: none; border-color: var(--accent); }
.wk-crew-search::placeholder { color: #4a5a6b; }
.wk-crew-selonly {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 2px;
  cursor: pointer;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #7a8a9b;
}
.wk-crew-selonly input { accent-color: var(--accent); cursor: pointer; }
.wk-crew-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 0 1px 2px;
}
.wk-crew-chip {
  padding: 3px 9px;
  background: #0c1016;
  border: 1px solid #232c38;
  border-radius: 999px;
  color: #8a9aab;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.wk-crew-chip:hover { color: #dce3ed; border-color: #33414f; }
.wk-crew-chip.on {
  background: rgba(212, 245, 66, 0.14);
  border-color: var(--accent);
  color: var(--accent);
}
.wk-crew-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.wk-crew-bulk { display: flex; gap: 4px; }
.wk-crew-bulk button {
  background: none;
  border: none;
  padding: 2px 4px;
  color: #6a7a8b;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.15s;
}
.wk-crew-bulk button:hover { color: var(--accent); }
.wk-crew-list {
  max-height: 280px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wk-crew-none {
  padding: 10px 8px;
  color: #4a5a6b;
  font-size: 12.5px;
}
.wk-crew-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 8px;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.15s;
}
.wk-crew-item:hover { background: #141820; }
.wk-crew-item input { accent-color: var(--accent); cursor: pointer; }
.wk-crew-item .wk-av { width: 22px; height: 22px; font-size: 9px; }
.wk-crew-name { flex: 1; font-size: 13px; font-weight: 600; color: #dce3ed; white-space: nowrap; }
.wk-crew-role {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #5a6678;
}

/* ── Job search (toolbar) ── */
.wk-search-wrap { position: relative; display: flex; align-items: center; }
.wk-search-ic {
  position: absolute;
  left: 8px;
  font-size: 16px !important;
  color: #5a6678;
  pointer-events: none;
}
.wk-search-input {
  width: 190px;
  padding: 5px 26px 5px 28px;
  background: #101318;
  border: 1px solid #1f2530;
  border-radius: 7px;
  color: #dce3ed;
  font-family: 'Barlow', sans-serif;
  font-size: 12.5px;
  transition: border-color 0.15s, width 0.15s;
}
.wk-search-input:focus { outline: none; border-color: var(--accent); width: 230px; }
.wk-search-input::placeholder { color: #4a5a6b; }

/* ── Crew lane quick-filter (toolbar) — narrows which lanes show, session-only ── */
.wk-lane-search-wrap { position: relative; display: flex; align-items: center; }
.wk-lane-search-ic {
  position: absolute;
  left: 7px;
  font-size: 15px !important;
  color: #5a6678;
  pointer-events: none;
}
.wk-lane-search-input {
  width: 128px;
  padding: 5px 24px 5px 26px;
  background: #101318;
  border: 1px solid #1f2530;
  border-radius: 7px;
  color: #dce3ed;
  font-family: 'Barlow', sans-serif;
  font-size: 12.5px;
  transition: border-color 0.15s, width 0.15s;
}
.wk-lane-search-input:focus { outline: none; border-color: var(--accent); width: 168px; }
.wk-lane-search-input::placeholder { color: #4a5a6b; }
.wk-lane-search-x {
  position: absolute;
  right: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  padding: 0;
  border: none;
  background: none;
  color: #5a6678;
  cursor: pointer;
}
.wk-lane-search-x .material-symbols-outlined { font-size: 15px !important; }
.wk-lane-search-x:hover { color: #dce3ed; }
/* Empty state when the filter matches no lanes (spans the whole grid). */
.wk-lane-none {
  grid-column: 1 / -1;
  padding: 22px 16px;
  text-align: center;
  color: #6a7889;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
  border-top: 1px solid #1a2330;
}
.wk-lane-none-clr {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent);
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
}
.wk-search-x {
  position: absolute;
  right: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: none;
  border: none;
  color: #5a6678;
  cursor: pointer;
}
.wk-search-x:hover { color: #dce3ed; }
.wk-search-x .material-symbols-outlined { font-size: 15px !important; }
.wk-search-results {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  width: 320px;
  max-height: 320px;
  overflow-y: auto;
  background: #101318;
  border: 1px solid #2a3545;
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
}
.wk-search-results.open { display: block; }
.wk-search-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 8px;
  background: none;
  border: none;
  border-radius: 7px;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}
.wk-search-item:hover { background: #141820; }
.wk-search-item.done { opacity: 0.7; }
.wk-search-title {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: #dce3ed;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wk-search-done { font-size: 15px !important; color: #22c55e; }
.wk-search-none {
  padding: 10px 8px;
  color: #4a5a6b;
  font-size: 12.5px;
}

/* ── Work-order page (full-page job detail) ── */
.wk-chip.wk-chip-sel { border-color: var(--accent); }
.wk-mw-card { cursor: pointer; }
.wk-mw-card:hover { border-color: #2a3545; }
.wk-wo {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.wk-wo-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-bottom: 1px solid #1f2530;
  flex-shrink: 0;
  position: relative;
  flex-wrap: wrap;
}
.wk-wo-head::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--u, #64748b);
}
.wk-wo-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #dce3ed;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wk-wo-status {
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid #2a3545;
  color: #8a9aab;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  white-space: nowrap;
}
.wk-wo-status-in_progress { color: #3b82f6; border-color: rgba(59, 130, 246, 0.4); background: rgba(59, 130, 246, 0.08); }
.wk-wo-status-blocked { color: #ef4444; border-color: rgba(239, 68, 68, 0.4); background: rgba(239, 68, 68, 0.08); }
.wk-wo-status-completed { color: #22c55e; border-color: rgba(34, 197, 94, 0.4); background: rgba(34, 197, 94, 0.08); }
.wk-wo-play, .wk-wo-done-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid #2a3545;
  background: #141820;
  color: #c3d0dd;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.wk-wo-play .material-symbols-outlined,
.wk-wo-done-btn .material-symbols-outlined { font-size: 16px !important; }
.wk-wo-play:hover { border-color: var(--accent); color: var(--accent); }
.wk-wo-play.active { background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.5); color: #ef4444; }
.wk-wo-play:disabled { opacity: 0.45; cursor: not-allowed; }
.wk-wo-done-btn { background: var(--accent); border-color: var(--accent); color: #0a0c0f; }
.wk-wo-done-btn:hover { filter: brightness(1.1); }
/* Phone-only work-order chrome. `display: contents` keeps the action buttons
   flex children of the header on desktop — the wrapper only becomes a bar
   below 900px, where it pins to the thumb zone. */
.wk-wo-acts { display: contents; }
.wk-wo-segs, .wk-wo-menu, .wk-wo-mprog { display: none; }
.wk-wo-cols {
  /* Fill the space under the fixed work-order header; each column scrolls on its
     own so the header never leaves the top. minmax(0,1fr) bounds the row height
     so the columns' overflow can engage instead of stretching the grid. */
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr) minmax(250px, 330px);
  grid-template-rows: minmax(0, 1fr);
}
.wk-wo-side {
  border-right: 1px solid #1f2530;
  background: #0a0d12;
  overflow-y: auto;
  min-height: 0;
  padding: 14px 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wk-wo-main {
  overflow-y: auto;
  min-height: 0;
  padding: 14px 20px 30px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Left column: car card + facts */
.wk-wo-car {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: #101318;
  border: 1px solid #1f2530;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.wk-wo-car:hover { border-color: #2a3545; }
.wk-wo-car:hover .wk-wo-car-open { color: var(--accent); }
.wk-wo-car-photo {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  border: 1px solid #2a3545;
  flex-shrink: 0;
}
.wk-wo-car-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.wk-wo-car-body .wk-car-tag { align-self: flex-start; }
.wk-wo-car-model { font-size: 12.5px; color: #dce3ed; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-wo-car-owner { font-size: 11.5px; color: #6a7a8b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-wo-car-odo { display: flex; align-items: center; gap: 4px; font-size: 11px; color: #8a9aab; font-variant-numeric: tabular-nums; }
.wk-wo-car-odo .material-symbols-outlined { font-size: 12px !important; color: #5a6678; }
.wk-wo-car-open { font-size: 15px !important; color: #2a3545; flex-shrink: 0; }
.wk-wo-rows { display: flex; flex-direction: column; }
.wk-wo-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 2px;
  font-size: 12.5px;
  color: #8a9aab;
  border-bottom: 1px solid #141a24;
  font-variant-numeric: tabular-nums;
}
.wk-wo-row:last-child { border-bottom: none; }
.wk-wo-row .material-symbols-outlined { font-size: 14px !important; color: #4a5a6b; }
.wk-wo-row-l { color: #5a6678; }
.wk-wo-row-v { margin-left: auto; color: #dce3ed; font-weight: 600; text-align: right; }

/* Middle column: numbered, clickable work-order lines */
.wk-wo-line {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  background: #101318;
  border: 1px solid #1a2330;
  border-radius: 9px;
  font-size: 13.5px;
  color: #dce3ed;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.wk-wo-line:hover { border-color: #2a3545; background: #12161d; }
.wk-wo-line.open {
  border-color: var(--accent);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.wk-wo-line.done .wk-wo-line-txt { color: #6a7a8b; text-decoration: line-through; }
.wk-wo-num {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  font-weight: 800;
  color: #4a5a6b;
  min-width: 18px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.wk-wo-line-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-wo-line-meta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.wk-wo-mchip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: #7a8a9b;
  font-variant-numeric: tabular-nums;
}
.wk-wo-mchip .material-symbols-outlined { font-size: 13px !important; color: #5a6678; }
.wk-wo-chev { font-size: 17px !important; color: #4a5a6b; flex-shrink: 0; }
.wk-wo-line.open .wk-wo-chev { color: var(--accent); }
.wk-wo-check { display: flex; cursor: pointer; }
.wk-wo-check.ro { cursor: default; }
.wk-wo-check .material-symbols-outlined { font-size: 17px !important; color: #4a5a6b; transition: color 0.15s; }
.wk-wo-check:not(.ro):hover .material-symbols-outlined { color: var(--accent); }
.wk-wo-line.done .wk-wo-check .material-symbols-outlined,
.wk-wo-sub.done .wk-wo-check .material-symbols-outlined { color: #22c55e; }
.wk-wo-line-del {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: none;
  border: none;
  border-radius: 6px;
  color: #5a6678;
  cursor: pointer;
  opacity: 0;
  flex-shrink: 0;
  transition: opacity 0.15s, color 0.15s, background 0.15s;
}
.wk-wo-line:hover .wk-wo-line-del,
.wk-wo-line.open .wk-wo-line-del { opacity: 1; }
.wk-wo-line-del:hover { color: #ef4444; background: rgba(239, 68, 68, 0.1); }
.wk-wo-line-del .material-symbols-outlined { font-size: 16px !important; }
.wk-wo-title-edit {
  width: 100%;
  padding: 7px 10px;
  background: #0c1016;
  border: 1px solid #1f2530;
  border-radius: 7px;
  color: #dce3ed;
  font-family: 'Barlow', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: 6px;
}
.wk-wo-title-edit:focus { outline: none; border-color: var(--accent); }

/* Expanded line detail: sub-steps, photos & files, notes */
.wk-wo-detail {
  margin-top: -9px;
  padding: 12px 14px 14px 38px;
  background: #0d1117;
  border: 1px solid var(--accent);
  border-top: 1px dashed #2a3545;
  border-radius: 0 0 9px 9px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  cursor: default;
}
.wk-wo-d-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #5a6678;
  margin-top: 5px;
}
.wk-wo-d-label .material-symbols-outlined { font-size: 12px !important; }
.wk-wo-info {
  display: flex;
  gap: 7px;
  font-size: 12.5px;
  color: #8a9aab;
  padding: 7px 10px;
  background: rgba(59, 130, 246, 0.06);
  border: 1px solid rgba(59, 130, 246, 0.18);
  border-radius: 8px;
}
.wk-wo-info .material-symbols-outlined { font-size: 14px !important; color: #3b82f6; margin-top: 1px; }
.wk-wo-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 2px;
  font-size: 13px;
  color: #c3d0dd;
}
.wk-wo-sub.done .wk-wo-sub-txt { color: #6a7a8b; text-decoration: line-through; }
.wk-wo-sub-txt { flex: 1; min-width: 0; }
.wk-wo-sub-x {
  display: flex;
  background: none;
  border: none;
  color: #4a5a6b;
  cursor: pointer;
  padding: 2px;
  opacity: 0;
  transition: color 0.15s;
}
.wk-wo-sub:hover .wk-wo-sub-x { opacity: 1; }
.wk-wo-sub-x:hover { color: #ef4444; }
.wk-wo-sub-x .material-symbols-outlined { font-size: 14px !important; }
.wk-wo-sub-add {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #4a5a6b;
}
.wk-wo-sub-add .material-symbols-outlined { font-size: 15px !important; }
.wk-wo-sub-add input {
  flex: 1;
  background: transparent;
  border: none;
  border-bottom: 1px dashed #2a3545;
  padding: 4px 0;
  font-size: 13px;
  color: #dce3ed;
  outline: none;
}
.wk-wo-sub-add input:focus { border-bottom-color: var(--accent); }
.wk-wo-sub-add input::placeholder { color: #4a5a6b; }
.wk-wo-note {
  width: 100%;
  min-height: 54px;
  resize: vertical;
  background: #101318;
  border: 1px solid #1f2530;
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  font-size: 12.5px;
  color: #dce3ed;
  outline: none;
}
.wk-wo-note:focus { border-color: var(--accent); }
.wk-wo-note::placeholder { color: #4a5a6b; }
.wk-wo-note-ro { font-size: 12.5px; color: #8a9aab; white-space: pre-wrap; }
.wk-wo-none { font-size: 12.5px; color: #4a5a6b; }

/* ── Per-step issue (non-blocking) ──────────────────────────────────────────── */
.wk-wo-mchip-issue { color: #f59e0b; }
.wk-wo-mchip-issue .material-symbols-outlined { color: #f59e0b !important; }
.wk-wo-line.issue { border-color: rgba(245, 158, 11, 0.4); }
.wk-wo-line.issue:hover { border-color: rgba(245, 158, 11, 0.6); }
/* "Flag an issue" button inside an expanded task line */
.wk-wo-flag {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  padding: 5px 11px;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 7px;
  color: #f59e0b;
  font-family: 'Barlow', sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.wk-wo-flag:hover { background: rgba(245, 158, 11, 0.15); border-color: rgba(245, 158, 11, 0.5); }
.wk-wo-flag .material-symbols-outlined { font-size: 15px !important; }
/* The flagged-issue chip shown when a task already has one */
.wk-wo-issue-tag {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 7px;
  font-size: 12.5px;
  color: #d9c48a;
}
.wk-wo-issue-tag > .material-symbols-outlined { font-size: 15px !important; color: #f59e0b; flex-shrink: 0; }
.wk-wo-issue-tag-txt { flex: 1; min-width: 0; }
.wk-wo-issue-tag-txt b { color: #f59e0b; font-weight: 700; }
.wk-wo-issue-edit, .wk-wo-issue-x {
  display: flex;
  background: none;
  border: none;
  color: #7a8a9b;
  cursor: pointer;
  padding: 2px;
  transition: color 0.15s;
}
.wk-wo-issue-edit:hover { color: #f59e0b; }
.wk-wo-issue-x:hover { color: #ef4444; }
.wk-wo-issue-edit .material-symbols-outlined,
.wk-wo-issue-x .material-symbols-outlined { font-size: 15px !important; }

/* Logbook link (part / task → wear-tracker SI row) — blue, to read apart from
   the amber issue flag */
.wk-wo-link-btn { color: #60a5fa; background: rgba(59, 130, 246, 0.08); border-color: rgba(59, 130, 246, 0.3); }
.wk-wo-link-btn:hover { background: rgba(59, 130, 246, 0.15); border-color: rgba(59, 130, 246, 0.5); }
.wk-wo-link-tag {
  display: flex; align-items: center; gap: 7px; padding: 6px 10px;
  background: rgba(59, 130, 246, 0.08); border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 7px; font-size: 12.5px; color: #9db8e0;
}
.wk-wo-link-tag > .material-symbols-outlined { font-size: 15px !important; color: #60a5fa; flex-shrink: 0; }
.wk-wo-link-txt { flex: 1; min-width: 0; }
.wk-wo-link-txt b { color: #93c5fd; font-weight: 700; }
.wk-wo-link-tag .wk-wo-issue-edit:hover { color: #60a5fa; }
.wk-wo-link-hint { margin-top: 4px; font-size: 11px; color: #6a7a8b; }
.wk-wo-link-cat { color: #7a8a9b; font-size: 11px; font-weight: 600; }

/* ── Logbook picker (.wk-lbp) — "Add from logbook" ─────────────────────────────
   A scrollable, searchable list of the car's wear-tracker rows grouped like the
   logbook, with multi-select and a Service/Replace choice per row. Sits over the
   work order (its backdrop is absolute within .wk-wo). */
.wk-lbp-bd {
  position: absolute; inset: 0; z-index: 31;
  background: rgba(5, 7, 10, 0.6); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.wk-lbp {
  width: min(560px, calc(100% - 24px)); max-height: min(78vh, 640px);
  display: flex; flex-direction: column;
  background: #101318; border: 1px solid #2a3140; border-radius: 14px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45); overflow: hidden;
}
.wk-lbp-head {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  padding: 14px 16px 10px; border-bottom: 1px solid #222836;
}
.wk-lbp-title {
  flex: 1; display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700; color: #e6edf6;
}
.wk-lbp-title .material-symbols-outlined { font-size: 18px !important; color: #60a5fa; }
.wk-lbp-x { display: flex; padding: 4px; border: 0; background: none; cursor: pointer; color: #6a7a8b; border-radius: 6px; }
.wk-lbp-x:hover { color: #cbd5e1; background: rgba(255, 255, 255, 0.05); }
.wk-lbp-x .material-symbols-outlined { font-size: 18px !important; }
.wk-lbp-search {
  margin: 10px 14px 2px; padding: 8px 11px; flex-shrink: 0;
  background: #0b0e13; border: 1px solid #2a3140; border-radius: 8px;
  color: #e6edf6; font-size: 13px; font-family: inherit;
}
.wk-lbp-search:focus { outline: none; border-color: #3b82f6; }
.wk-lbp-search::placeholder { color: #5a6675; }
.wk-lbp-body { flex: 1; overflow-y: auto; padding: 4px 8px 10px; }
.wk-lbp-grp { margin-top: 6px; }
.wk-lbp-grp-h {
  padding: 6px 8px 4px; font-size: 10.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.06em; color: #6a7a8b;
}
.wk-lbp-row {
  display: flex; align-items: center; gap: 9px;
  padding: 8px; border-radius: 8px; cursor: pointer; user-select: none;
}
.wk-lbp-row:hover { background: rgba(255, 255, 255, 0.04); }
.wk-lbp-row.selected { background: rgba(59, 130, 246, 0.1); }
.wk-lbp-check { font-size: 20px !important; color: #5a6675; flex-shrink: 0; }
.wk-lbp-row.selected .wk-lbp-check { color: #60a5fa; }
.wk-lbp-name { flex: 1; min-width: 0; font-size: 13px; color: #dfe7f0; }
.wk-lbp-actions { display: flex; gap: 6px; flex-shrink: 0; }
.wk-lbp-act {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 999px; cursor: pointer;
  border: 1px solid #313a49; background: transparent;
  font-size: 11.5px; font-weight: 600; color: #8a97a7; font-family: inherit;
}
.wk-lbp-act .material-symbols-outlined { font-size: 14px !important; }
.wk-lbp-act:hover { border-color: #414b5a; color: #cbd5e1; }
.wk-lbp-act.svc.on { color: #22c55e; border-color: rgba(34, 197, 94, 0.5); background: rgba(34, 197, 94, 0.12); }
.wk-lbp-act.rep.on { color: #f59e0b; border-color: rgba(245, 158, 11, 0.5); background: rgba(245, 158, 11, 0.12); }
.wk-lbp-row.is-added { cursor: default; opacity: 0.6; }
.wk-lbp-row.is-added:hover { background: none; }
.wk-lbp-row.is-added .wk-lbp-check { color: #22c55e; }
.wk-lbp-added { flex-shrink: 0; font-size: 11px; font-weight: 600; color: #6a7a8b; }
.wk-lbp-empty { padding: 24px 16px; text-align: center; color: #6a7a8b; font-size: 13px; }
.wk-lbp-foot {
  display: flex; justify-content: flex-end; gap: 10px; flex-shrink: 0;
  padding: 10px 14px; border-top: 1px solid #222836;
}
.wk-lbp-cancel {
  padding: 7px 14px; border-radius: 8px; cursor: pointer;
  background: none; border: 1px solid #2a3140; color: #9aa7b6;
  font-size: 12.5px; font-weight: 600; font-family: inherit;
}
.wk-lbp-cancel:hover { border-color: #3a4150; color: #cbd5e1; }
.wk-lbp-done {
  padding: 7px 16px; border-radius: 8px; cursor: pointer; border: 0;
  background: #3b82f6; color: #fff; font-size: 12.5px; font-weight: 700; font-family: inherit;
}
.wk-lbp-done:hover { background: #2f74e6; }
.wk-lbp-done:disabled { background: #24314a; color: #5a6675; cursor: default; }

body.light-mode .wk-lbp { background: #fff; border-color: #dde2ec; box-shadow: 0 18px 44px rgba(26, 32, 48, 0.18); }
body.light-mode .wk-lbp-bd { background: rgba(26, 32, 48, 0.3); }
body.light-mode .wk-lbp-head { border-bottom-color: #eef1f6; }
body.light-mode .wk-lbp-title { color: #1e2733; }
body.light-mode .wk-lbp-title .material-symbols-outlined { color: #2563eb; }
body.light-mode .wk-lbp-x:hover { color: #1e2733; background: rgba(0, 0, 0, 0.05); }
body.light-mode .wk-lbp-search { background: #f5f7fa; border-color: #dde2ec; color: #1e2733; }
body.light-mode .wk-lbp-search:focus { border-color: #2563eb; }
body.light-mode .wk-lbp-search::placeholder { color: #9aa5b3; }
body.light-mode .wk-lbp-grp-h { color: #8a95a3; }
body.light-mode .wk-lbp-row:hover { background: rgba(37, 99, 235, 0.05); }
body.light-mode .wk-lbp-row.selected { background: rgba(37, 99, 235, 0.09); }
body.light-mode .wk-lbp-check { color: #b7c0cc; }
body.light-mode .wk-lbp-row.selected .wk-lbp-check { color: #2563eb; }
body.light-mode .wk-lbp-name { color: #2a3441; }
body.light-mode .wk-lbp-act { border-color: #dde2ec; color: #6a7683; }
body.light-mode .wk-lbp-act:hover { border-color: #c3ccd8; color: #1e2733; }
body.light-mode .wk-lbp-act.svc.on { color: #15803d; border-color: rgba(34, 197, 94, 0.55); background: rgba(34, 197, 94, 0.12); }
body.light-mode .wk-lbp-act.rep.on { color: #b45309; border-color: rgba(245, 158, 11, 0.55); background: rgba(245, 158, 11, 0.14); }
body.light-mode .wk-lbp-added,
body.light-mode .wk-lbp-empty { color: #8a95a3; }
body.light-mode .wk-lbp-foot { border-top-color: #eef1f6; }
body.light-mode .wk-lbp-cancel { border-color: #dde2ec; color: #55606d; }
body.light-mode .wk-lbp-cancel:hover { border-color: #c3ccd8; color: #1e2733; }
body.light-mode .wk-lbp-done:disabled { background: #e4e8ef; color: #a7b0bd; }

/* ── Line transfer: select mode + destination picker (.wk-tx-*) ──
   Select mode swaps each line's round tick for a checkbox in the SAME slot,
   so a line never carries two lookalike controls at once. Done-state keeps
   the strike-through it already had; the green tick colour steps aside
   because in a square it reads as "selected". */
.wk-wo-line-pick { cursor: pointer; }
.wk-wo-line-pick:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.wk-wo-line-pick.done .wk-wo-check .material-symbols-outlined { color: #4a5a6b; }
.wk-wo-line-pick:hover .wk-wo-check .material-symbols-outlined { color: var(--accent); }
.wk-wo-line-pick.sel {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.09);
}
.wk-wo-line-pick.sel .wk-wo-check .material-symbols-outlined { color: var(--accent); }
.wk-week-today.wk-tx-on { border-color: var(--accent); color: var(--accent); background: rgba(var(--accent-rgb), 0.1); }

.wk-tx-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 12px; border-radius: 9px;
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid rgba(var(--accent-rgb), 0.4);
}
.wk-tx-bar.idle { background: #101318; border: 1px dashed #2a3545; }
.wk-tx-cnt {
  font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 800;
  letter-spacing: 0.8px; text-transform: uppercase; color: #dce3ed;
}
.wk-tx-bar.idle .wk-tx-cnt { color: #5a6678; }
.wk-tx-cnt b { color: var(--accent); }
.wk-tx-sp { flex: 1; }
.wk-tx-clear, .wk-tx-cancel {
  padding: 5px 12px; background: none; border: 1px solid #2a3545; border-radius: 7px;
  color: #8a9aab; font-family: 'Barlow Condensed', sans-serif; font-size: 12px;
  font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; cursor: pointer;
}
.wk-tx-clear:hover, .wk-tx-cancel:hover { border-color: #3a4655; color: #dce3ed; }
.wk-tx-go {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 7px;
  background: var(--accent); border: 1px solid var(--accent); color: #0a0c0f;
  font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: 0.6px; text-transform: uppercase; cursor: pointer;
}
.wk-tx-go:hover:not(:disabled) { filter: brightness(1.1); }
.wk-tx-go:disabled { opacity: 0.4; cursor: not-allowed; }
.wk-tx-go .material-symbols-outlined { font-size: 15px !important; }

.wk-tx-note {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 12px; border-radius: 9px; font-size: 12.5px;
  background: #101318; border: 1px dashed #2a3545; color: #8a9aab;
}
.wk-tx-note b { color: #dce3ed; }
.wk-tx-note > .material-symbols-outlined { font-size: 15px !important; color: var(--accent); }
.wk-tx-link {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 2px 4px;
  color: var(--accent); font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
}
.wk-tx-link:hover { text-decoration: underline; }
.wk-tx-link .material-symbols-outlined { font-size: 14px !important; }

/* The picker reuses the logbook picker's shell (.wk-lbp / .wk-lbp-bd / -head /
   -body / -grp-h / -none), so only the parts that differ are defined here. */
.wk-tx { width: min(620px, calc(100% - 24px)); }
.wk-tx-carry {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex-shrink: 0;
  padding: 10px 14px; border-bottom: 1px solid #222836; background: #0b0e13;
}
.wk-tx-carry-l {
  width: 100%; font-family: 'Barlow Condensed', sans-serif; font-size: 10px;
  font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #5a6678;
}
.wk-tx-tok {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  padding: 3px 6px 3px 9px; border-radius: 999px;
  background: #141820; border: 1px solid #2a3545; font-size: 12px; color: #dce3ed;
}
.wk-tx-tok.si { border-color: rgba(var(--accent-rgb), 0.35); }
.wk-tx-tok > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-tx-tok em {
  flex-shrink: 0; font-style: normal; font-family: 'Barlow Condensed', sans-serif;
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; color: #5a6678;
}
.wk-tx-tok button { display: flex; padding: 2px; border: 0; background: none; color: #5a6678; cursor: pointer; border-radius: 50%; }
.wk-tx-tok button:hover { color: #ef4444; }
.wk-tx-tok button .material-symbols-outlined { font-size: 12px !important; }

.wk-tx-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 14px 2px; flex-shrink: 0; }
.wk-tx-search {
  flex: 1 1 180px; min-width: 0; display: flex; align-items: center; gap: 8px;
  padding: 8px 11px; background: #0b0e13; border: 1px solid #2a3140; border-radius: 8px;
}
.wk-tx-search:focus-within { border-color: #3b82f6; }
.wk-tx-search .material-symbols-outlined { font-size: 16px !important; color: #5a6675; }
.wk-tx-search input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: #e6edf6; font-size: 13px; font-family: inherit; }
.wk-tx-search input::placeholder { color: #5a6675; }
.wk-tx-tog {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; cursor: pointer;
  padding: 7px 11px; border-radius: 8px; border: 1px solid #2a3140; background: #0b0e13;
  font-size: 12.5px; color: #8a97a7;
}
.wk-tx-tog .material-symbols-outlined { font-size: 16px !important; color: #5a6675; }
.wk-tx-tog.on { border-color: rgba(var(--accent-rgb), 0.5); background: rgba(var(--accent-rgb), 0.1); color: #dce3ed; }
.wk-tx-tog.on .material-symbols-outlined { color: var(--accent); }

.wk-tx-row { width: 100%; text-align: left; border: 1px solid transparent; background: none; color: inherit; font-family: inherit; }
.wk-tx-row.on { background: rgba(var(--accent-rgb), 0.1); border-color: rgba(var(--accent-rgb), 0.45); }
.wk-tx-row.off { opacity: 0.45; cursor: not-allowed; }
.wk-tx-radio { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #5a6675; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.wk-tx-row.on .wk-tx-radio { border-color: var(--accent); }
.wk-tx-row.on .wk-tx-radio::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.wk-tx-main { flex: 1; min-width: 0; }
.wk-tx-t { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 13px; font-weight: 600; color: #dfe7f0; }
.wk-tx-m { display: flex; gap: 11px; flex-wrap: wrap; font-size: 11.5px; color: #6a7a8b; margin-top: 3px; }
.wk-tx-m i { font-style: normal; display: inline-flex; align-items: center; gap: 4px; }
.wk-tx-m .material-symbols-outlined { font-size: 13px !important; color: #5a6678; }

.wk-tx-hint {
  display: flex; align-items: center; gap: 7px; width: 100%; margin-top: 6px; cursor: pointer;
  padding: 8px 10px; background: none; border: 1px dashed #2a3545; border-radius: 8px;
  color: #6a7a8b; font-size: 12.5px; text-align: left; font-family: inherit;
}
.wk-tx-hint:hover { color: #dce3ed; border-color: #3a4655; }
.wk-tx-hint .material-symbols-outlined { font-size: 15px !important; }
.wk-tx-new { border-style: dashed; border-color: #2a3545; }
.wk-tx-newtitle { padding: 6px 8px 2px; }
.wk-tx-newtitle input {
  width: 100%; padding: 8px 11px; background: #0b0e13; border: 1px solid #2a3140;
  border-radius: 8px; color: #e6edf6; font-family: inherit; font-size: 13px;
}
.wk-tx-newtitle input:focus { outline: none; border-color: var(--accent); }
.wk-tx-newtitle input::placeholder { color: #5a6675; }

.wk-tx-foot {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex-shrink: 0;
  padding: 11px 14px; border-top: 1px solid #222836; background: #0b0e13;
}
.wk-tx-keep { display: flex; align-items: center; gap: 7px; cursor: pointer; font-size: 12.5px; color: #8a97a7; }
.wk-tx-keep.on { color: #dce3ed; }
.wk-tx-keep .material-symbols-outlined { font-size: 17px !important; color: #5a6675; }
.wk-tx-keep.on .material-symbols-outlined { color: var(--accent); }

body.light-mode .wk-tx-bar.idle,
body.light-mode .wk-tx-note { background: #fff; border-color: #dde2ec; color: #6a7683; }
body.light-mode .wk-tx-bar.idle .wk-tx-cnt { color: #8a95a3; }
body.light-mode .wk-tx-cnt, body.light-mode .wk-tx-note b { color: #1e2733; }
body.light-mode .wk-tx-go { color: #fff; }
body.light-mode .wk-tx-clear, body.light-mode .wk-tx-cancel { border-color: #dde2ec; color: #55606d; }
body.light-mode .wk-tx-carry, body.light-mode .wk-tx-foot { background: #f5f7fa; border-color: #eef1f6; }
body.light-mode .wk-tx-carry-l { color: #8a95a3; }
body.light-mode .wk-tx-tok { background: #fff; border-color: #dde2ec; color: #2a3441; }
body.light-mode .wk-tx-search, body.light-mode .wk-tx-tog { background: #fff; border-color: #dde2ec; }
body.light-mode .wk-tx-search input { color: #1e2733; }
body.light-mode .wk-tx-tog, body.light-mode .wk-tx-keep { color: #6a7683; }
body.light-mode .wk-tx-tog.on, body.light-mode .wk-tx-keep.on { color: #1e2733; }
body.light-mode .wk-tx-t { color: #1e2733; }
body.light-mode .wk-tx-m, body.light-mode .wk-tx-hint { color: #8a95a3; }
body.light-mode .wk-tx-hint, body.light-mode .wk-tx-note,
body.light-mode .wk-tx-new { border-color: #dde2ec; }
body.light-mode .wk-tx-newtitle input { background: #fff; border-color: #dde2ec; color: #1e2733; }
body.light-mode .wk-wo-line-pick.done .wk-wo-check .material-symbols-outlined { color: #b7c0cc; }

/* Attachment tiles (photos & files) */
.wk-wo-att-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.wk-wo-att { position: relative; width: 74px; }
.wk-wo-att-media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 74px;
  height: 74px;
  border-radius: 8px;
  border: 1px solid #1f2530;
  background: #101318;
  overflow: hidden;
}
.wk-wo-att-media img { width: 100%; height: 100%; object-fit: cover; }
.wk-wo-att-media.doc .material-symbols-outlined { font-size: 26px !important; color: #5a6678; }
.wk-wo-att-media:hover { border-color: var(--accent); }
.wk-wo-att-name {
  display: block;
  font-size: 9.5px;
  color: #6a7a8b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 3px;
}
.wk-wo-att-x {
  position: absolute;
  top: -6px;
  right: -6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #1a2330;
  border: 1px solid #2a3545;
  color: #8a9aab;
  cursor: pointer;
  padding: 0;
}
.wk-wo-att-x:hover { color: #ef4444; border-color: #ef4444; }
.wk-wo-att-x .material-symbols-outlined { font-size: 11px !important; }
.wk-wo-att-add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 74px;
  height: 74px;
  border-radius: 8px;
  border: 1px dashed #2a3545;
  color: #5a6678;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.wk-wo-att-add:hover { border-color: var(--accent); color: var(--accent); }
.wk-wo-att-add.busy { cursor: progress; opacity: 0.6; }
.wk-wo-att-add.busy .material-symbols-outlined { animation: wk-spin 1.2s linear infinite; }
.wk-wo-att-add .material-symbols-outlined { font-size: 18px !important; }

/* Add-line */
.wk-wo-addline {
  display: flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 7px 12px;
  background: transparent;
  border: 1px dashed #2a3545;
  border-radius: 9px;
  color: #5a6678;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.wk-wo-addline:hover { border-color: var(--accent); color: var(--accent); }
.wk-wo-addline .material-symbols-outlined { font-size: 15px !important; }
/* Add-part-from-catalog: an accent-tinted, solid-border variant of add-line */
.wk-wo-addpart { border-style: solid; border-color: rgba(212, 245, 66, 0.35); color: var(--accent); }
.wk-wo-addpart:hover { background: rgba(212, 245, 66, 0.08); }
/* Row holding the two add-part affordances (catalog + free text) side by side */
.wk-wo-addpart-row { display: flex; flex-wrap: wrap; gap: 8px; }
.wk-wo-addline-row { cursor: default; }
.wk-wo-addline-row input {
  flex: 1;
  background: transparent;
  border: none;
  font-size: 13.5px;
  color: #dce3ed;
  outline: none;
}
.wk-wo-addline-row input::placeholder { color: #4a5a6b; }

/* Activity pane (right column) — placeholder until job comments ship */
.wk-wo-act {
  border-left: 1px solid #1f2530;
  background: #0a0d12;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
}
.wk-dw-act-h { padding: 14px 16px 0; margin-top: 0; }
.wk-soon {
  margin-left: auto;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  color: var(--accent);
  font-size: 9.5px;
  letter-spacing: 0.7px;
}
.wk-dw-act-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  text-align: center;
  color: #5a6678;
}
.wk-dw-act-empty .material-symbols-outlined { font-size: 30px !important; color: #2a3545; }
.wk-dw-act-empty p { font-size: 12.5px; max-width: 30ch; line-height: 1.5; }
.wk-dw-composer {
  margin: 0 14px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  background: #101318;
  border: 1px solid #1f2530;
  border-radius: 10px;
  color: #4a5a6b;
  font-size: 13px;
  cursor: not-allowed;
}
.wk-dw-composer .material-symbols-outlined { margin-left: auto; font-size: 15px !important; color: #2a3545; }
.wk-pipe { display: flex; align-items: center; margin: 2px 0 4px; }
/* In the work order's narrow left rail the 4-step pipe wraps instead of clipping. */
.wk-wo-side .wk-pipe { flex-wrap: wrap; row-gap: 8px; }
.wk-pipe-step { display: flex; align-items: center; gap: 6px; }
.wk-pipe-line { flex: 1; height: 1px; background: #2a3545; margin: 0 7px; min-width: 10px; }
.wk-pipe-dot {
  width: 21px;
  height: 21px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #141820;
  border: 1px solid #2a3545;
  color: #5a6678;
  flex-shrink: 0;
}
.wk-pipe-dot .material-symbols-outlined { font-size: 12px !important; }
.wk-pipe-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #5a6678;
  white-space: nowrap;
}
.wk-pipe-step.done .wk-pipe-dot {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.45);
  color: #22c55e;
}
.wk-pipe-step.done .wk-pipe-name { color: #4ade80; }
.wk-pipe-step.now .wk-pipe-dot {
  background: rgba(var(--accent-rgb), 0.14);
  border-color: var(--accent);
  color: var(--accent);
}
.wk-pipe-step.now .wk-pipe-name { color: var(--accent); }

.wk-dw-desc { font-size: 13px; color: #8a9aab; }
.wk-dw-sec {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #5a6678;
  margin-top: 8px;
}
.wk-dw-sec .material-symbols-outlined { font-size: 13px !important; }
.wk-dw-sec-total {
  margin-left: auto;
  color: #8a9aab;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
}
.wk-dw-tlog {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: #8a9aab;
  padding: 3px 2px;
  font-variant-numeric: tabular-nums;
}
.wk-dw-tlog .wk-av { width: 22px; height: 22px; font-size: 9px; }
.wk-dw-tlog-n { color: #c3d0dd; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-dw-tlog-live { flex-shrink: 0; }
.wk-dw-tlog-t { margin-left: auto; color: #6a7a8b; flex-shrink: 0; }
.wk-dw-tlog.active .wk-dw-tlog-t { color: #c3d0dd; }
.wk-dw-loading { font-size: 12px; color: #4a5a6b; }

/* ── Light mode ── */
body.light-mode #wk-root { background: transparent; }
body.light-mode .wk-head,
body.light-mode .wk-wo-head { border-color: #dde2ec; }
body.light-mode .wk-title { color: #1a2030; }
body.light-mode .wk-tab { color: #8a9aab; }
body.light-mode .wk-tab:hover { color: #1a2030; border-color: #ccd2e0; }
body.light-mode .wk-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }
body.light-mode .wk-icon-btn,
body.light-mode .wk-week-today { background: #fff; border-color: #dde2ec; color: #6a7a8b; }
body.light-mode .wk-icon-btn:hover,
body.light-mode .wk-week-today:hover { border-color: #c5ccd8; color: #1a2030; }
body.light-mode .wk-week-label { color: #5a6a7b; }
body.light-mode .wk-add-btn { color: #fff; }
body.light-mode .wk-add-btn:hover { background: #4a6600; }
body.light-mode .wk-grid { background: #fff; border-color: #dde2ec; }
body.light-mode .wk-gh { color: #8a9aab; border-color: #e4e8f0; }
body.light-mode .wk-gh-d { color: #4a5a6b; }
body.light-mode .wk-lane-label,
body.light-mode .wk-cell { border-color: #e4e8f0; }
body.light-mode .wk-cell.wk-today { background: #f4f7e8; }
body.light-mode .wk-lane-name { color: #1a2030; }
body.light-mode .wk-lane-role,
body.light-mode .wk-load { color: #a0b0c0; }
body.light-mode .wk-tray-label { background: #f0f3f8; }
body.light-mode .wk-tray {
  background: repeating-linear-gradient(135deg, #eef1f6 0 7px, #f5f7fa 7px 14px);
  border-color: #e4e8f0;
}
body.light-mode .wk-tray-empty { color: #a0b0c0; }
body.light-mode .wk-chip { background: #fff; border-color: #dde2ec; }
body.light-mode .wk-chip:hover { border-color: #c5ccd8; }
body.light-mode .wk-chip-title { color: #1a2030; }
body.light-mode .wk-car-tag { background: #eef1f8; border-color: #ccd2e0; color: #5a6a7b; }
body.light-mode .wk-job-id { background: #eef1f8; border-color: #ccd2e0; color: #5a6a7b; }
body.light-mode .wk-chip-done { background: rgba(34, 197, 94, 0.07); }
body.light-mode .wk-chip-done .wk-chip-title { color: #4a7a5a; }
body.light-mode .wk-t-chip { color: #8a9aab; }
body.light-mode .wk-t-wait { color: #b45309; }
body.light-mode .wk-t-block { color: #dc2626; }
body.light-mode .wk-t-issue { color: #b45309; }
body.light-mode .wk-t-done { color: #16a34a; }
body.light-mode .wk-search-input { background: #f0f3f8; border-color: #dde2ec; color: #1a2030; }
body.light-mode .wk-search-input::placeholder { color: #a0b0c0; }
body.light-mode .wk-lane-search-input { background: #f0f3f8; border-color: #dde2ec; color: #1a2030; }
body.light-mode .wk-lane-search-input::placeholder { color: #a0b0c0; }
body.light-mode .wk-lane-none { color: #8a9aab; border-color: #e4e8f0; }
body.light-mode .wk-search-results { background: #fff; border-color: #dde2ec; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14); }
body.light-mode .wk-search-item:hover { background: #f0f3f8; }
body.light-mode .wk-search-title { color: #1a2030; }
body.light-mode .wk-search-none { color: #a0b0c0; }
body.light-mode .wk-wo-title-edit { background: #f0f3f8; border-color: #dde2ec; color: #1a2030; }
body.light-mode .wk-loading,
body.light-mode .wk-error,
body.light-mode .wk-empty { color: #8a9aab; }
body.light-mode .wk-empty .material-symbols-outlined { color: #ccd2e0; }
body.light-mode .wk-readonly-hint { color: #a0b0c0; }
body.light-mode .wk-crew-pop { background: #fff; border-color: #dde2ec; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14); }
body.light-mode .wk-crew-item:hover { background: #f0f3f8; }
body.light-mode .wk-crew-name { color: #1a2030; }
body.light-mode .wk-crew-search { background: #f0f3f8; border-color: #dde2ec; color: #1a2030; }
body.light-mode .wk-crew-search::placeholder { color: #a0b0c0; }
body.light-mode .wk-crew-selonly { color: #6a7a8b; }
body.light-mode .wk-crew-none { color: #a0b0c0; }
body.light-mode .wk-crew-chip { background: #f0f3f8; border-color: #dde2ec; color: #6a7a8b; }
body.light-mode .wk-crew-chip:hover { color: #1a2030; border-color: #ccd2e0; }
body.light-mode .wk-crew-chip.on { background: rgba(212, 245, 66, 0.22); border-color: var(--accent); color: #5a6a10; }
body.light-mode .wk-crew-bulk button { color: #8a9aab; }
body.light-mode .wk-pq-bar { border-color: #e4e8f0; }
body.light-mode .wk-pq-chip { background: #fff; border-color: #dde2ec; color: #6a7a8b; }
body.light-mode .wk-pq-chip:hover { color: #1a2030; border-color: #c5ccd8; }
body.light-mode .wk-pq-n { background: #eef1f8; color: #4a5566; }
body.light-mode .wk-pq-chip.on { color: #fff; }
body.light-mode .wk-pq-chip.on.attn { background: #33404f; color: #fff; }
body.light-mode .wk-pq-chip.on .wk-pq-n { background: rgba(255, 255, 255, 0.22); }
body.light-mode .wk-pq-seg { background: #fff; border-color: #dde2ec; }
body.light-mode .wk-pq-seg button { color: #6a7a8b; }
body.light-mode .wk-pq-seg button + button { border-color: #dde2ec; }
body.light-mode .wk-pq-seg button.on { background: #eef1f8; color: #1a2030; }
body.light-mode .wk-pq-searchbox { background: #fff; border-color: #dde2ec; }
body.light-mode .wk-pq-searchbox input { color: #1a2030; }
body.light-mode .wk-pq-cnt { background: #eef1f8; border-color: #ccd2e0; color: #6a7a8b; }
body.light-mode .wk-pqc { background: #fff; border-color: #dde2ec; }
body.light-mode .wk-pqc:hover { border-color: #c5ccd8; }
body.light-mode .wk-pqc-title { color: #1a2030; }
body.light-mode .wk-pqc-track { background: #e4e8f0; }
body.light-mode .wk-pqc-parts { background: #f7f9fc; border-color: #e4e8f0; }
body.light-mode .wk-pqc-pname { color: #1a2030; }
body.light-mode .wk-pqc-prow { border-color: #eef1f6; }
body.light-mode .wk-pqc-late { color: #b45309; }
body.light-mode .wk-pqc-abtn { background: #eef1f8; border-color: #ccd2e0; color: #5a6a7b; }
body.light-mode .wk-pqc-abtn:hover { color: #1a2030; border-color: #b3bccb; }
body.light-mode .wk-pqc-eta { background: #eef1f8; border-color: #ccd2e0; color: #5a6a7b; }
body.light-mode .wk-pqc-eta:hover { color: #1a2030; border-color: #b3bccb; }
body.light-mode .wk-pqc-eta.unset { color: #8899aa; }
body.light-mode .wk-pqc-eta.late { color: #b45309; border-color: rgba(180, 83, 9, 0.35); }
body.light-mode .wk-pqc-batch-btn { background: #eef1f8; border-color: #ccd2e0; color: #4a5566; }
body.light-mode .wk-pqc-batch-btn:hover { color: #1a2030; border-color: #b3bccb; }
body.light-mode .wk-av-none { background: #e4e8f0; color: #8899aa; }
body.light-mode .wk-pq-list { border-color: #dde2ec; }
body.light-mode .wk-pq-list thead th { background: #f0f3f8; color: #6a7a8b; border-color: #dde2ec; }
body.light-mode .wk-pq-list tbody td { border-color: #eef1f6; }
body.light-mode .wk-pq-list tbody tr:hover { background: #f7f9fc; }
body.light-mode .wk-pq-lp { color: #1a2030; }
body.light-mode .wk-mw-card { background: #fff; border-color: #dde2ec; }
body.light-mode .wk-mw-title { color: #1a2030; }
body.light-mode .wk-prog-bar { background: #e4e8f0; }
body.light-mode .wk-mw-lock { background: rgba(180, 83, 9, 0.07); border-color: rgba(180, 83, 9, 0.25); color: #b45309; }
body.light-mode .wk-mw-issues { background: rgba(180, 83, 9, 0.06); border-color: rgba(180, 83, 9, 0.22); }
body.light-mode .wk-mw-issues-h { color: #b45309; }
body.light-mode .wk-mw-issue-row { color: #8a6d3b; }
body.light-mode .wk-mw-issue-row b { color: #6b5220; }
body.light-mode .wk-wo-mchip-issue,
body.light-mode .wk-wo-mchip-issue .material-symbols-outlined { color: #b45309 !important; }
body.light-mode .wk-wo-flag,
body.light-mode .wk-wo-issue-tag { background: rgba(180, 83, 9, 0.07); border-color: rgba(180, 83, 9, 0.28); }
body.light-mode .wk-wo-flag { color: #b45309; }
body.light-mode .wk-wo-flag .material-symbols-outlined,
body.light-mode .wk-wo-issue-tag > .material-symbols-outlined,
body.light-mode .wk-wo-issue-tag-txt b { color: #b45309; }
body.light-mode .wk-wo-issue-tag,
body.light-mode .wk-wo-issue-tag-txt { color: #6b5220; }
body.light-mode .wk-wo-link-btn { color: #2563eb; background: rgba(37, 99, 235, 0.07); border-color: rgba(37, 99, 235, 0.28); }
body.light-mode .wk-wo-link-tag { background: rgba(37, 99, 235, 0.07); border-color: rgba(37, 99, 235, 0.28); color: #3a5580; }
body.light-mode .wk-wo-link-tag > .material-symbols-outlined,
body.light-mode .wk-wo-link-txt b { color: #2563eb; }
body.light-mode .wk-play { background: #eef1f8; border-color: #ccd2e0; color: #6a7a8b; }
body.light-mode .wk-play.active { background: var(--accent); border-color: var(--accent); color: #fff; }
body.light-mode .wk-mw-del { color: #97a1ad; }
body.light-mode .wk-mw-del:hover,
body.light-mode .wk-wo-del:hover { background: #fdeaea; border-color: #e5b3b3; color: #c0392b; }
body.light-mode .wk-wo-act,
body.light-mode .wk-wo-side { background: #f0f3f8; border-color: #dde2ec; }
body.light-mode .wk-dw-act-empty { color: #8a9aab; }
body.light-mode .wk-dw-act-empty .material-symbols-outlined { color: #ccd2e0; }
body.light-mode .wk-dw-composer { background: #fff; border-color: #dde2ec; color: #a0b0c0; }
body.light-mode .wk-dw-composer .material-symbols-outlined { color: #ccd2e0; }
body.light-mode .wk-mw-card:hover { border-color: #c5ccd8; }
body.light-mode .wk-wo-title { color: #1a2030; }
body.light-mode .wk-wo-car,
body.light-mode .wk-wo-line { background: #fff; border-color: #e4e8f0; color: #2a3545; }
body.light-mode .wk-wo-line:hover { border-color: #c5ccd8; background: #f7f9fc; }
body.light-mode .wk-wo-line.open { border-color: var(--accent); }
body.light-mode .wk-wo-car-model,
body.light-mode .wk-wo-row-v { color: #1a2030; }
body.light-mode .wk-wo-row { border-color: #e4e8f0; }
body.light-mode .wk-wo-detail { background: #f7f9fc; border-top-color: #dde2ec; }
body.light-mode .wk-wo-note,
body.light-mode .wk-wo-att-media { background: #fff; border-color: #dde2ec; }
body.light-mode .wk-wo-note { color: #1a2030; }
body.light-mode .wk-wo-sub { color: #2a3545; }
body.light-mode .wk-wo-sub-add input { border-bottom-color: #ccd2e0; color: #1a2030; }
body.light-mode .wk-wo-addline-row input { color: #1a2030; }
body.light-mode .wk-wo-att-x { background: #fff; border-color: #ccd2e0; }
body.light-mode .wk-wo-att-add,
body.light-mode .wk-wo-addline { border-color: #ccd2e0; }
body.light-mode .wk-wo-play { background: #fff; border-color: #dde2ec; color: #5a6a7b; }
body.light-mode .wk-wo-done-btn { color: #fff; }
body.light-mode .wk-wo-status { border-color: #ccd2e0; }
body.light-mode .wk-dw-tlog-n { color: #2a3545; }
body.light-mode .wk-dw-sec-total { color: #5a6678; }
body.light-mode .wk-pipe-line { background: #dde2ec; }
body.light-mode .wk-pipe-dot { background: #eef1f8; border-color: #ccd2e0; color: #8a9aab; }
body.light-mode .wk-pipe-step.done .wk-pipe-name { color: #15803d; }
body.light-mode .wk-pipe-step.done .wk-pipe-dot { color: #15803d; }

/* ── Mobile (≤900px, app breakpoint) ── */
@media (max-width: 900px) {
  /* Header: one 48px row (title · team · add), then the tab strip full-bleed
     underneath it. */
  .wk-head { padding: 8px 12px 0; gap: 8px; row-gap: 8px; }
  .wk-ev-chip { display: none; }
  .wk-title { font-size: 19px; }
  .wk-add-btn { padding: 9px; }
  .wk-add-lbl { display: none; }         /* icon-only — the title says where you are */

  /* THE fix: a grid, not a flex row. Four tabs each keep an icon + a label
     wider than a quarter of a 390px screen, so `flex: 1` overflowed a
     container that doesn't scroll and put My Work off the right edge.
     grid-auto-columns: 1fr divides whatever width there is, and min-width: 0
     lets the labels ellipsis instead of forcing the track wider. The
     overflow-x is a safety net for a fifth view, not the mechanism. */
  .wk-tabs {
    order: 3;
    width: calc(100% + 24px);
    margin: 0 -12px;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .wk-tabs::-webkit-scrollbar { height: 0; }
  .wk-tab {
    position: relative;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    height: 54px;
    padding: 0 4px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    font-size: 11px;
    letter-spacing: 0.4px;
    scroll-snap-align: start;
  }
  .wk-tab .material-symbols-outlined { font-size: 20px !important; }
  .wk-tab-lg { display: none; }
  .wk-tab-sm { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Accent tint + underline rather than the desktop's solid pill: four filled
     lime blocks side by side is all shout and no hierarchy. */
  .wk-tab.active {
    background: rgba(var(--accent-rgb), 0.1);
    border-color: transparent;
    border-bottom-color: var(--accent);
    color: var(--accent);
  }
  body.light-mode .wk-tab.active {
    background: rgba(var(--accent-rgb), 0.22);
    border-bottom-color: var(--accent);
    color: #4a6600;
  }
  /* Count badge — Parts turns red when something still has to be ordered. */
  .wk-tab-n {
    display: grid;
    place-items: center;
    position: absolute;
    top: 5px;
    left: calc(50% + 5px);
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 9px;
    background: #2a3340;
    color: #c3d0dd;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0;
  }
  .wk-tab.active .wk-tab-n { background: #0a0c0f; color: var(--accent); }
  .wk-tab .wk-tab-n-hot,
  .wk-tab.active .wk-tab-n-hot { background: #ef4444; color: #fff; }
  body.light-mode .wk-tab-n { background: #e4e8f0; color: #4a5a6b; }

  .wk-toolbar { padding: 8px 14px; }
  .wk-board { padding: 0 10px 16px; }
  /* Board stays a horizontal scroller on mobile; chips get a bit narrower. */
  .wk-grid { grid-template-columns: 120px repeat(7, minmax(112px, 1fr)); min-width: 920px; }
  .wk-tray .wk-chip { width: 160px; }
  .wk-mw { padding: 12px 14px 20px; }

  /* ── Parts toolbar: one row instead of four ──────────────────────────────
     Nine chips and two segs wrapped into 132px of chrome before any content.
     The status chips are the filter you touch constantly, so they stay — as a
     snap scroller. Group + layout are set once and left alone, so they move
     into a sheet. Search collapses to an icon and takes the bar when opened. */
  .wk-pq-bar { padding: 8px 12px; gap: 8px; flex-wrap: nowrap; }
  .wk-pq-chips {
    flex: 1;
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .wk-pq-chips::-webkit-scrollbar { height: 0; }
  .wk-pq-chip { flex: none; scroll-snap-align: start; padding: 8px 13px; }
  .wk-pq-bar-spacer { display: none; }
  .wk-pq-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 38px;
    height: 38px;
    padding: 0;
    background: #101318;
    border: 1px solid #232a35;
    border-radius: 9px;
    color: #8a9aab;
    cursor: pointer;
  }
  .wk-pq-iconbtn .material-symbols-outlined { font-size: 19px !important; }
  .wk-pq-iconbtn.on { border-color: var(--accent); color: var(--accent); }
  .wk-pq-searchbox, .wk-pq-searchx { display: none; }
  .wk-pq-bar.searching .wk-pq-chips,
  .wk-pq-bar.searching .wk-pq-searchbtn,
  .wk-pq-bar.searching .wk-pq-sheetbtn { display: none; }
  .wk-pq-bar.searching .wk-pq-searchbox { display: inline-flex; flex: 1; min-width: 0; padding: 9px 12px; }
  .wk-pq-bar.searching .wk-pq-searchbox input { width: 100%; font-size: 15px; }
  .wk-pq-bar.searching .wk-pq-searchx { display: inline-flex; }

  /* The sheet sits above the app's own bottom nav (z-index 100). */
  .wk-pq-sheet-bd.open { display: block; position: fixed; inset: 0; z-index: 120; background: rgba(5, 7, 10, 0.6); }
  .wk-pq-sheet { display: none; }
  .wk-pq-sheet.open {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 121;
    padding: 10px 16px calc(18px + 60px + env(safe-area-inset-bottom, 0px));
    background: #101318;
    border-top: 1px solid #2a3340;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -18px 44px rgba(0, 0, 0, 0.45);
    animation: wkSheetUp 0.16s ease;
  }
  .wk-pq-sheet-grab { display: block; width: 38px; height: 4px; border-radius: 3px; background: #2a3340; align-self: center; }
  .wk-pq-sheet-h {
    display: block;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 15px; font-weight: 800; letter-spacing: 0.8px;
    text-transform: uppercase; color: #dce3ed;
  }
  .wk-pq-sheet-l {
    display: block; margin-top: 4px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px; font-weight: 800; letter-spacing: 1px;
    text-transform: uppercase; color: #6a7889;
  }
  .wk-pq-sheet .wk-pq-seg { display: grid; grid-template-columns: 1fr 1fr; }
  .wk-pq-sheet .wk-pq-seg button { justify-content: center; padding: 13px 8px; font-size: 13.5px; }
  .wk-pq-sheet-done {
    display: block; margin-top: 8px; padding: 14px;
    border: 0; border-radius: 10px;
    background: var(--accent); color: #0a0c0f;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 15px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase;
    cursor: pointer;
  }
  body.light-mode .wk-pq-sheet.open { background: #fff; border-color: #dde2ec; }
  body.light-mode .wk-pq-sheet-h { color: #1a2030; }
  body.light-mode .wk-pq-iconbtn { background: #fff; border-color: #dde2ec; color: #6a7a8b; }
  body.light-mode .wk-pq-sheet-done { color: #fff; }

  .wk-pq-body { padding: 12px 14px 22px; }
  .wk-pqc-head { grid-template-columns: 20px auto minmax(0, 1fr); }
  .wk-pqc-right { grid-column: 1 / -1; justify-content: space-between; margin-top: 4px; flex-wrap: wrap; gap: 10px; }
  .wk-pqc-prog { align-items: flex-start; }
  .wk-pqc-parts { padding-left: 16px; }
  .wk-pqc-prow { grid-template-columns: 1fr auto; }
  .wk-pqc-prow .wk-pill { grid-column: 1 / -1; justify-self: start; }
  /* ── Work order: a doing screen, not a reading screen ────────────────────
     The three columns can't sit side by side, and stacking them buried the
     checklist under a screenful of metadata (and dropped the discussion
     entirely). They become one tabbed panel instead: Work opens first,
     Details holds the car card / pipeline / dates / time log, Chat brings the
     thread back. Same DOM as desktop — only which column shows changes. */
  /* The header is `position: relative` so its ::before can draw the category
     stripe — which would also make it the containing block for the action bar
     below, hanging the bar off the HEADER instead of the page. The stripe
     becomes a border here so the header can go static and `.wk-wo` takes over:
     its box already ends above the app's bottom nav, at every mobile width. */
  .wk-wo-head { position: static; padding: 8px 10px; gap: 8px; row-gap: 6px; border-left: 3px solid var(--u, #64748b); }
  .wk-wo-head::before { display: none; }
  .wk-wo-head .wk-wo-title { order: 5; flex: 1 0 100%; white-space: normal; font-size: 18px; line-height: 1.2; }
  .wk-icon-btn { width: 34px; height: 34px; }
  .wk-wo-discuss, .wk-wo-del { display: none; }   /* both live in the ⋮ menu */
  .wk-wo-menu { display: flex; }

  .wk-wo-segs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    flex-shrink: 0;
    background: #0a0d12;
    border-bottom: 1px solid #1f2530;
  }
  .wk-wo-segs button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 13px 4px;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    color: #7a8a9b;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    cursor: pointer;
  }
  .wk-wo-segs button.on {
    color: var(--accent);
    background: rgba(var(--accent-rgb), 0.1);
    border-bottom-color: var(--accent);
  }
  .wk-wo-segn {
    background: #212a36; color: #c3d0dd;
    border-radius: 9px; padding: 1px 6px;
    font-size: 10.5px; letter-spacing: 0;
    font-variant-numeric: tabular-nums;
  }
  .wk-wo-segs button.on .wk-wo-segn { background: #0a0c0f; color: var(--accent); }
  body.light-mode .wk-wo-segs { background: #f8f9fc; border-color: #dde2ec; }
  body.light-mode .wk-wo-segs button.on { color: #4a6600; }

  .wk-wo-cols {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    min-height: 0;
    /* Clears the action bar: 44px buttons + 9px above + 9px below + its 1px
       border, plus the home-indicator inset the bar adds to its own padding.
       Derived, not guessed — a flat 64px left the last row under the bar on
       any device with a safe-area inset. */
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }
  .wk-wo-side, .wk-wo-main, .wk-wo-act { display: none; overflow-y: visible; }
  /* The two content columns must size to their CONTENT. As flex items of a
     column container they default to flex-shrink: 1, so they were squashed to
     the panel's height — scrollHeight equalled clientHeight, the panel had no
     scroll range at all, and the last rows (Job attachments) simply sat under
     the action bar with no way to reach them. Chat is deliberately excluded:
     it is its own scroller (comms.css pins the composer and scrolls the
     thread), so it has to stay exactly panel-height. */
  .wk-wo-cols[data-mo="work"]    .wk-wo-main,
  .wk-wo-cols[data-mo="details"] .wk-wo-side { flex: 1 0 auto; }
  .wk-wo-cols[data-mo="work"]    .wk-wo-main { display: flex; }
  .wk-wo-cols[data-mo="details"] .wk-wo-side { display: flex; }
  .wk-wo-cols[data-mo="chat"]    .wk-wo-act  { display: flex; }
  .wk-wo-side { border-right: none; padding: 12px 12px 20px; }
  .wk-wo-main { padding: 12px 12px 20px; }
  .wk-wo-act  { border-left: none; }

  /* Chat is a SCREEN, not a panel in a scrolling page. The column scroller has
     to stop scrolling (`.cm-msgs` is the scroller here — nesting one inside
     another means the wrong surface catches the drag) and the pane has to grow,
     or it sizes to its content and leaves half the screen dead. The status bar
     goes with it: Start / Issue / Complete act on the WORK you're reading, and
     a bar pinned under a composer is just the keyboard's landing zone. They're
     one tap away on the Work tab. */
  .wk-wo-cols[data-mo="chat"] { overflow: hidden; padding-bottom: 0; }
  .wk-wo-cols[data-mo="chat"] .wk-wo-act { flex: 1 1 auto; min-height: 0; overflow: hidden; }
  .wk-wo-cols[data-mo="chat"] .wk-dw-act-h { display: none; }   /* the tab already says Chat */
  .wk-wo-cols[data-mo="chat"] .cm-composer { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  /* The bar lives in the header, which PRECEDES the columns — so the tab is
     stamped on `.wk-wo` too rather than reaching backwards with :has(). */
  .wk-wo[data-mo="chat"] .wk-wo-acts { display: none; }

  /* Progress readout at the head of the work panel. */
  .wk-wo-mprog { display: flex; flex-direction: column; gap: 6px; margin-bottom: 2px; }
  .wk-wo-mprog-bar { height: 6px; border-radius: 4px; background: #1a2029; overflow: hidden; }
  .wk-wo-mprog-bar i { display: block; height: 100%; background: var(--accent); }
  .wk-wo-mprog span { font-size: 11.5px; color: #8a9aab; font-variant-numeric: tabular-nums; }

  /* Lines: 52px and tappable end to end. Names wrap rather than ellipsis —
     "Replace: Rear lower wishbone" is unreadable truncated to one line. */
  .wk-wo-line { padding: 12px; gap: 10px; font-size: 14px; min-height: 52px; }
  .wk-wo-line-txt { white-space: normal; }
  .wk-wo-check .material-symbols-outlined { font-size: 21px !important; }

  /* Primary actions in the thumb zone. `.wk-wo` is position: relative and its
     box already ends above the app's bottom nav (main-content's bottom
     padding), so bottom: 0 lands clear of it at every mobile width. */
  .wk-wo-acts {
    display: flex;
    align-items: center;
    gap: 8px;
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 12;
    padding: 9px 12px calc(9px + env(safe-area-inset-bottom, 0px));
    background: #0d1116;
    border-top: 1px solid #1f2530;
  }
  .wk-wo-acts:empty { display: none; }
  .wk-wo-acts > * { flex: 1 1 auto; height: 44px; justify-content: center; font-size: 14px; }
  .wk-wo-acts .wk-week-today { padding: 4px 10px; font-size: 14px; }
  /* Line transfer is a rare, fiddly flow — it's offered in the ⋮ menu instead
     of spending a quarter of the bar. Once you're IN select mode the exit has
     to be the bar, or there's no way out on a phone. */
  .wk-wo-acts .wk-wo-selbtn { display: none; }
  .wk-wo-acts-sel .wk-wo-selbtn { display: inline-flex; }
  body.light-mode .wk-wo-acts { background: #fff; border-color: #dde2ec; }
}

/* ── Report-issue wizard (shared work order) ─────────────────────────────────
 * Reuses the .jl-issue-* flow styles from jobs.css, floated over the work
 * order. Opened from the "Issue" header button; blocks the job with a reason. */
.wk-wo { position: relative; }
.wk-wo-issue-bd {
  position: absolute;
  inset: 0;
  z-index: 30;
  background: rgba(5, 7, 10, 0.55);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
}
.wk-wo-issue-flow {
  width: min(440px, calc(100% - 40px));
  background: #101318;
  border: 1px solid #2a3140;
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
}
body.light-mode .wk-wo-issue-flow {
  background: #fff;
  border-color: #dde2ec;
  box-shadow: 0 18px 44px rgba(26, 32, 48, 0.18);
}
body.light-mode .wk-wo-issue-bd { background: rgba(26, 32, 48, 0.28); }

/* ── Overview dashboard (.wk-ov-) ──────────────────────────────────────────── */
.wk-ov { padding: 4px 20px 40px; overflow-y: auto; }

/* KPI strip */
.wk-ov-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 16px; }
.wk-ov-kpi {
  position: relative; overflow: hidden; background: #101318; border: 1px solid #1f2530;
  border-radius: 10px; padding: 13px 14px;
}
.wk-ov-kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--s, #2a3545); }
.wk-ov-kpi-top { display: flex; align-items: center; justify-content: space-between; }
.wk-ov-kpi-l { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: #7a8a9b; }
.wk-ov-kpi-ic { color: var(--s, #7a8a9b); font-size: 17px !important; opacity: 0.9; }
.wk-ov-kpi-v { font-family: 'Barlow Condensed', sans-serif; font-size: 30px; font-weight: 800; line-height: 1; margin: 8px 0 4px; letter-spacing: -0.5px; color: #dce3ed; font-variant-numeric: tabular-nums; }
.wk-ov-kpi-sub { font-size: 11.5px; color: #8a9aab; display: flex; align-items: center; gap: 6px; min-height: 16px; }
.wk-ov-kpi-btn { cursor: pointer; transition: border-color .12s, background .12s, transform .06s; }
.wk-ov-kpi-btn:hover { border-color: #33404f; background: #12161d; }
.wk-ov-kpi-btn:active { transform: translateY(1px); }
.wk-ov-kpi-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* KPI drill-down overlay — lists the jobs / parts behind a KPI */
.wk-ov-drill-bd {
  position: fixed; inset: 0; z-index: 60; background: rgba(6, 9, 13, 0.62);
  display: flex; align-items: flex-start; justify-content: center; padding: 8vh 16px 16px;
  backdrop-filter: blur(2px); animation: wkOvDrillIn .12s ease;
}
.wk-ov-drill {
  width: 100%; max-width: 560px; max-height: 78vh; display: flex; flex-direction: column;
  background: #101318; border: 1px solid #1f2530; border-radius: 12px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.wk-ov-drill-h {
  display: flex; align-items: center; gap: 8px; padding: 13px 14px; border-bottom: 1px solid #1f2530;
  font-family: 'Barlow Condensed', sans-serif; font-size: 14px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: #dce3ed;
}
.wk-ov-drill-x { margin-left: auto; border: 0; background: transparent; color: #8a9aab; cursor: pointer; display: inline-flex; padding: 2px; border-radius: 6px; }
.wk-ov-drill-x:hover { background: #1a1f28; color: #dce3ed; }
.wk-ov-drill-x .material-symbols-outlined { font-size: 20px !important; }
.wk-ov-drill-body { overflow-y: auto; }
.wk-ov-drill-body .wk-ov-attn { border-top: 1px solid #171b22; }
.wk-ov-drill-body .wk-ov-attn:first-child { border-top: 0; }
@keyframes wkOvDrillIn { from { opacity: 0; } to { opacity: 1; } }

.wk-ov-chip-ok { color: #4ade80; background: rgba(34, 197, 94, 0.14); }

/* two-column grid */
.wk-ov-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 16px; align-items: start; }
.wk-ov-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* panels */
.wk-ov-panel { background: #101318; border: 1px solid #1f2530; border-radius: 10px; overflow: hidden; }
.wk-ov-p-head {
  display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid #1f2530;
  font-family: 'Barlow Condensed', sans-serif; font-size: 12.5px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; color: #dce3ed;
}
.wk-ov-p-head > .material-symbols-outlined { font-size: 17px !important; color: #8a9aab; }
.wk-ov-cnt { font-size: 11px; font-weight: 800; color: #7a8a9b; background: #141820; border: 1px solid #1f2530; border-radius: 999px; padding: 1px 8px; }
.wk-ov-p-sub { font-size: 11px; font-weight: 600; color: #7a8a9b; letter-spacing: 0.3px; text-transform: none; }
.wk-ov-more {
  margin-left: auto; display: inline-flex; align-items: center; gap: 2px; border: 0; background: transparent;
  color: #8a9aab; font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; cursor: pointer;
}
.wk-ov-more:hover { color: var(--accent); }
.wk-ov-more .material-symbols-outlined { font-size: 15px !important; }

.wk-ov-empty { display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; padding: 26px 16px; color: #7a8a9b; font-size: 12.5px; }
.wk-ov-empty .material-symbols-outlined { font-size: 24px !important; color: #4a5a6b; }
.wk-ov-empty-sm { padding: 16px; font-size: 12px; }

/* live now */
.wk-ov-live { display: flex; align-items: center; gap: 11px; padding: 10px 12px; cursor: pointer; border-top: 1px solid #1f2530; }
.wk-ov-live:first-of-type { border-top: 0; }
.wk-ov-live:hover { background: #141820; }
.wk-ov-live > .wk-av { width: 28px; height: 28px; font-size: 11px; flex: none; }
.wk-ov-live-main { flex: 1; min-width: 0; }
.wk-ov-live-t { font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-ov-live-meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 11px; color: #8a9aab; }
.wk-ov-live-meta b { color: #8a9aab; font-weight: 700; }
.wk-ov-prog { width: 60px; height: 5px; border-radius: 3px; background: #171b22; overflow: hidden; }
.wk-ov-prog > i { display: block; height: 100%; background: var(--accent); }
.wk-ov-timer { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; font-weight: 800; font-size: 12.5px; color: #4ade80; white-space: nowrap; }

/* needs attention */
.wk-ov-attn-sec { display: flex; align-items: center; gap: 7px; padding: 9px 12px 3px; font-family: 'Barlow Condensed', sans-serif; font-size: 10.5px; font-weight: 800; letter-spacing: 0.9px; text-transform: uppercase; color: var(--s, #7a8a9b); }
.wk-ov-attn-pip { width: 8px; height: 8px; border-radius: 2px; background: var(--s, #7a8a9b); }
.wk-ov-attn-sec .wk-ov-cnt { margin-left: 2px; }
.wk-ov-attn { position: relative; display: flex; align-items: center; gap: 11px; padding: 9px 12px 9px 15px; cursor: pointer; }
.wk-ov-attn:hover { background: #141820; }
.wk-ov-attn-stripe { position: absolute; left: 8px; top: 9px; bottom: 9px; width: 3px; border-radius: 3px; background: var(--s, #2a3545); }
.wk-ov-attn-main { flex: 1; min-width: 0; }
.wk-ov-attn-t { font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-ov-attn-sub { display: flex; align-items: center; gap: 7px; margin-top: 3px; font-size: 11.5px; color: #8a9aab; flex-wrap: wrap; }
.wk-ov-attn-note { color: #7a8a9b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-ov-attn-go { color: #4a5a6b; font-size: 18px !important; flex: none; }

.wk-ov-chip { font-size: 10px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.wk-ov-chip-danger { color: #f87171; background: rgba(239, 68, 68, 0.14); }
.wk-ov-chip-warn { color: #fbbf24; background: rgba(245, 158, 11, 0.14); }
.wk-ov-chip-mut { color: #8a9aab; background: #141820; border: 1px solid #1f2530; }

/* today agenda */
.wk-ov-ag { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-top: 1px solid #1f2530; }
.wk-ov-ag:first-of-type { border-top: 0; }
.wk-ov-ag > .wk-av { width: 28px; height: 28px; font-size: 11px; flex: none; }
.wk-ov-ag-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.wk-ov-ag-name { font-weight: 700; font-size: 12.5px; }
.wk-ov-ag-role { font-family: 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: #7a8a9b; }
.wk-ov-ag-job { display: flex; align-items: center; gap: 8px; background: #141820; border: 1px solid #1f2530; border-left: 3px solid var(--u, #3b82f6); border-radius: 6px; padding: 6px 9px; font-size: 12px; cursor: pointer; }
.wk-ov-ag-job:hover { border-color: #2a3545; border-left-color: var(--u, #3b82f6); }
.wk-ov-ag-slot { font-size: 14px !important; color: #7a8a9b; }

/* parts pipeline */
.wk-ov-pipe-cells { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 10px; }
.wk-ov-pipe-cell { background: #141820; border: 1px solid #1f2530; border-radius: 8px; padding: 9px 6px; text-align: center; }
.wk-ov-pipe-v { display: block; font-family: 'Barlow Condensed', sans-serif; font-size: 22px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.wk-ov-pipe-l { display: block; font-size: 9.5px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; margin-top: 4px; color: #7a8a9b; }
.wk-ov-pipe-row { display: flex; align-items: center; gap: 9px; padding: 8px 12px; border-top: 1px solid #1f2530; font-size: 12.5px; cursor: pointer; }
.wk-ov-pipe-row:hover { background: #141820; }
.wk-ov-pipe-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* crew load */
.wk-ov-load-row { display: grid; grid-template-columns: 24px 1fr 52px; gap: 10px; align-items: center; padding: 8px 12px; }
.wk-ov-load-row > .wk-av { width: 24px; height: 24px; font-size: 10px; flex: none; }
.wk-ov-load-bar { height: 9px; border-radius: 5px; background: #171b22; overflow: hidden; }
.wk-ov-load-bar > i { display: block; height: 100%; border-radius: 5px; background: #3b82f6; }
.wk-ov-load-bar > i.wk-ov-load-hot { background: #f59e0b; }
.wk-ov-load-bar > i.wk-ov-load-max { background: #ef4444; }
.wk-ov-load-v { font-size: 11.5px; font-weight: 700; color: #8a9aab; text-align: right; font-variant-numeric: tabular-nums; }

/* next event */
.wk-ov-next { display: flex; align-items: center; gap: 15px; padding: 15px; background:
  radial-gradient(120% 140% at 100% 0, rgba(var(--accent-rgb), 0.1), transparent 60%), #101318; }
.wk-ov-next-cd { font-family: 'Barlow Condensed', sans-serif; line-height: 0.85; color: var(--accent); text-align: center; }
.wk-ov-next-cd b { font-size: 38px; font-weight: 800; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.wk-ov-next-cd small { display: block; font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #7a8a9b; margin-top: 4px; }
.wk-ov-next-name { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 15px; letter-spacing: 0.4px; text-transform: uppercase; }
.wk-ov-next-meta { font-size: 11.5px; color: #8a9aab; margin-top: 3px; }

@media (max-width: 1080px) { .wk-ov-kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 980px)  { .wk-ov-grid { grid-template-columns: 1fr; } }
@media (max-width: 900px)  { .wk-ov { padding: 4px 14px 24px; } .wk-ov-kpis { grid-template-columns: repeat(2, 1fr); } }

/* ── Overview — light mode ── */
body.light-mode .wk-ov-kpi,
body.light-mode .wk-ov-panel { background: #fff; border-color: #e4e8f0; }
body.light-mode .wk-ov-kpi-v { color: #1a2030; }
body.light-mode .wk-ov-kpi-l,
body.light-mode .wk-ov-pipe-l,
body.light-mode .wk-ov-ag-role,
body.light-mode .wk-ov-next-cd small { color: #6a7a8b; }
body.light-mode .wk-ov-kpi-sub,
body.light-mode .wk-ov-live-meta,
body.light-mode .wk-ov-live-meta b,
body.light-mode .wk-ov-attn-sub,
body.light-mode .wk-ov-attn-note,
body.light-mode .wk-ov-next-meta,
body.light-mode .wk-ov-load-v { color: #5a6a7b; }
body.light-mode .wk-ov-p-head { color: #1a2030; border-bottom-color: #e4e8f0; }
body.light-mode .wk-ov-p-head > .material-symbols-outlined { color: #6a7a8b; }
body.light-mode .wk-ov-cnt { background: #f0f3f8; border-color: #dde2ec; color: #5a6a7b; }
body.light-mode .wk-ov-live:hover,
body.light-mode .wk-ov-attn:hover,
body.light-mode .wk-ov-pipe-row:hover { background: #f5f7fa; }
body.light-mode .wk-ov-live { border-top-color: #e4e8f0; }
body.light-mode .wk-ov-timer { color: #16a34a; }
body.light-mode .wk-ov-prog,
body.light-mode .wk-ov-load-bar { background: #e4e8f0; }
body.light-mode .wk-ov-ag,
body.light-mode .wk-ov-pipe-row { border-top-color: #e4e8f0; }
body.light-mode .wk-ov-ag-job,
body.light-mode .wk-ov-pipe-cell { background: #f0f3f8; border-color: #dde2ec; }
body.light-mode .wk-ov-chip-danger { color: #dc2626; background: rgba(220, 38, 38, 0.1); }
body.light-mode .wk-ov-chip-warn { color: #b45309; background: rgba(180, 83, 9, 0.1); }
body.light-mode .wk-ov-chip-mut { color: #5a6a7b; background: #f0f3f8; border-color: #dde2ec; }
body.light-mode .wk-ov-chip-ok { color: #16a34a; background: rgba(22, 163, 74, 0.1); }
body.light-mode .wk-ov-kpi-btn:hover { border-color: #cfd6e2; background: #f7f9fc; }
body.light-mode .wk-ov-drill { background: #fff; border-color: #dde2ec; }
body.light-mode .wk-ov-drill-h { color: #1a2030; border-color: #eef1f6; }
body.light-mode .wk-ov-drill-x:hover { background: #f0f3f8; color: #1a2030; }
body.light-mode .wk-ov-drill-body .wk-ov-attn { border-color: #eef1f6; }
body.light-mode .wk-ov-next { background:
  radial-gradient(120% 140% at 100% 0, rgba(90, 122, 0, 0.08), transparent 60%), #fff; }
body.light-mode .wk-ov-next-cd,
body.light-mode .wk-ov-more:hover { color: #4a6600; }
body.light-mode .wk-ov-next-name { color: #1a2030; }