/* ===== Pages after the Webpixels app screens (owner, 2026-10-14): Sales ("redesign the pages under Sales with the Webpixels app screens as
   inspiration") and Dispatch (same request, later the same day), in the same look as the Dashboard (css/dashboard.css):
   figure cards in two layers (grey frame + title, white inner card), white rounded panels with a light hairline, round avatars, clean
   tables with light grey headers and soft rounded tags, small white bordered buttons, labels in sentence case, Baloo Paaji 2.
   `.wp-page` is set on #content by app.js navigate() for the routes of the sections in WP_SECTIONS. Layouts and behaviour stay. ===== */
.content.wp-page {
  --wp-frame: #F4F4F5; --wp-line: #E4E4E7; --wp-line-2: #F1F1F3; --wp-ink: #18181B; --wp-text: #3F3F46; --wp-muted: #71717A; --wp-faint: #A1A1AA;
  --wp-font: 'Baloo Paaji 2', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: #FAFAFA; font-family: var(--wp-font); color: var(--wp-text);
}
.content.wp-page :is(.form-control, .form-select, .input-group-text, .btn, .badge, .small, small, .form-check-label, h1, h2, h3, h4, h5, h6, .h4, .h5, .h6) { font-family: var(--wp-font); }
.content.wp-page > p.text-secondary, .content.wp-page > .text-secondary { color: var(--wp-muted) !important; }

/* ---------- figure cards (same two layers as the Dashboard) ---------- */
.content.wp-page .cf-summary { gap: 1.1rem; margin-bottom: 1.25rem; }
.content.wp-page .cf-summary .cf-sum-card { padding: .3rem; gap: 0; background: var(--wp-frame); border: 1px solid var(--wp-line); border-radius: 14px; box-shadow: none; }
.content.wp-page .cf-sum-head { padding: .5rem .8rem .55rem; gap: .5rem; }
.content.wp-page .cf-sum-ico { width: auto; height: auto; background: none !important; color: var(--wp-muted) !important; font-size: .95rem; border-radius: 0; }
.content.wp-page .cf-sum-caption { margin-left: 0; order: 0; font-size: 1.02rem; font-weight: 600; color: var(--wp-ink); text-transform: none; letter-spacing: 0; }
.content.wp-page .cf-sum-figs { gap: 2.25rem; padding: .8rem 1rem .85rem; background: #fff; border: 1px solid var(--wp-line); border-radius: 10px; box-shadow: 0 1px 2px rgba(24, 24, 27, .05); }
.content.wp-page .cf-sum-label { color: var(--wp-muted); font-size: .92rem; }
.content.wp-page .cf-sum-n { font-family: var(--wp-font); font-size: 2rem; font-weight: 600; line-height: 1.05; color: var(--wp-ink); }
.content.wp-page .cf-sum-warn { color: #DC2626 !important; }
.content.wp-page .cf-sum-fig:has(.cf-sum-warn) .cf-sum-n { color: #DC2626; }

/* ---------- toolbar ---------- */
.content.wp-page #cf-count { color: var(--wp-muted); font-weight: 500; }
.content.wp-page :is(.form-control, .form-select) { border-color: var(--wp-line); border-radius: 8px; color: var(--wp-ink); background-color: #fff; }
.content.wp-page .input-group-text { border-color: var(--wp-line); background: #fff; color: var(--wp-muted); border-radius: 8px; }
.content.wp-page .input-group > :not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.content.wp-page .input-group > :not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.content.wp-page .input-group > .input-group-text + .form-control { border-left: 0; padding-left: .2rem; }
.content.wp-page .input-group > .input-group-text:has(+ .form-control) { border-right: 0; }
.content.wp-page :is(.form-control, .form-select):focus { border-color: color-mix(in srgb, var(--brand) 55%, white); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent); }
.content.wp-page .form-control::placeholder { color: var(--wp-faint); }
.content.wp-page .btn { border-radius: 8px; font-weight: 500; }
.content.wp-page .btn-sm { --bs-btn-padding-y: .15rem; --bs-btn-padding-x: .6rem; }
.content.wp-page :is(.btn-outline-secondary, .btn-light, .btn-outline-primary, .btn-outline-info, .btn-outline-dark) {
  --bs-btn-color: var(--wp-text); --bs-btn-border-color: var(--wp-line); --bs-btn-bg: #fff; --bs-btn-hover-bg: var(--wp-frame); --bs-btn-hover-color: var(--wp-ink); --bs-btn-hover-border-color: #D4D4D8;
  --bs-btn-active-bg: var(--wp-frame); --bs-btn-active-color: var(--wp-ink); --bs-btn-active-border-color: #D4D4D8; box-shadow: 0 1px 1px rgba(24, 24, 27, .04); }
.content.wp-page .btn-outline-primary > .bi, .content.wp-page .btn-outline-info > .bi { color: var(--brand); }
.content.wp-page .btn-outline-danger { --bs-btn-bg: #fff; --bs-btn-border-color: #FECACA; box-shadow: 0 1px 1px rgba(24, 24, 27, .04); }
.content.wp-page .btn-primary { box-shadow: 0 1px 2px color-mix(in srgb, var(--brand) 35%, transparent); }

/* ---------- panels ---------- */
.content.wp-page .card, .content.wp-page.cf-metrix .card { background: #fff; border: 1px solid var(--wp-line); border-radius: 14px; box-shadow: 0 1px 2px rgba(24, 24, 27, .04); }
.content.wp-page .card-header, .content.wp-page.cf-metrix .ep-tree .card-header { background: #fff !important; border-bottom: 1px solid var(--wp-line-2); padding: .9rem 1.1rem !important; }
.content.wp-page .card-header strong, .content.wp-page.cf-metrix .ep-tree .card-header strong { font-size: 1.15rem !important; font-weight: 600 !important; color: var(--wp-ink) !important; }
.content.wp-page .alert { border-radius: 10px; }
.content.wp-page .alert-light, .content.wp-page .alert-light.border { background: #fff !important; border: 1px solid var(--wp-line) !important; color: var(--wp-text); }

/* ---------- the list on the left: round avatars, the open one on a soft grey ---------- */
.content.wp-page .ep-tree .ep-person, .content.wp-page.cf-metrix .cf-list .ep-person { padding: .65rem 1.1rem; gap: .8rem; border-bottom: 1px solid var(--wp-line-2); border-left: 0; box-shadow: none; }
.content.wp-page .ep-tree .ep-person:hover, .content.wp-page.cf-metrix .cf-list .ep-person:hover { background: #FAFAFA; }
.content.wp-page .ep-tree .ep-person.active, .content.wp-page.cf-metrix .cf-list .ep-person.active { background: var(--wp-frame) !important; box-shadow: none !important; }
.content.wp-page .ep-avatar, .content.wp-page.cf-metrix .ep-avatar { width: 2.4rem; height: 2.4rem; border-radius: 50%; background: #fff; border: 1px solid var(--wp-line); color: var(--wp-text); font-weight: 600; font-size: .85rem; box-shadow: 0 1px 2px rgba(24, 24, 27, .06); }
.content.wp-page .ep-person.active .ep-avatar, .content.wp-page.cf-metrix .ep-person.active .ep-avatar { background: var(--brand); border-color: var(--brand); color: #fff; }
.content.wp-page .ep-person-name > span, .content.wp-page.cf-metrix .ep-person-name > span { font-size: 1rem; font-weight: 600; color: var(--wp-ink) !important; }
.content.wp-page .ep-person.active .ep-person-name > span, .content.wp-page.cf-metrix .ep-person.active .ep-person-name > span { color: var(--wp-ink) !important; font-weight: 700; }
.content.wp-page .ep-person-name > small, .content.wp-page.cf-metrix .ep-person-name > small { color: var(--wp-muted) !important; font-size: .85rem; }
.content.wp-page .ep-person-name > span:has(.ep-title2) { font-weight: 700; }
.content.wp-page .ep-title2 { font-weight: 500; color: var(--wp-text); }

/* ---------- the file on the right ---------- */
.content.wp-page #cf-side .ep-avatar.lg { width: 3.6rem; height: 3.6rem; border-radius: 50%; background: var(--brand) !important; border: 0; color: #fff !important; font-size: 1.3rem; }
.content.wp-page #cf-side :is(.h4, .h3, h1) { font-family: var(--wp-font); font-size: 1.75rem !important; font-weight: 600 !important; color: var(--wp-ink); letter-spacing: -.01em; line-height: 1.15; }
.content.wp-page #cf-side :is(.h5, .h6, h2) { font-family: var(--wp-font); color: var(--wp-ink); font-weight: 600 !important; }
.content.wp-page #cf-side .text-secondary { color: var(--wp-muted) !important; }
.content.wp-page #cf-form h2.h6, .content.wp-page #cf-form .card-body > h2 { font-size: 1.15rem !important; margin-bottom: .9rem !important; }
.content.wp-page #cf-form .form-label, .content.wp-page.cf-metrix #cf-form .form-label { font-size: .92rem; font-weight: 500; color: var(--wp-muted); text-transform: none; letter-spacing: 0; margin-bottom: .3rem; }
.content.wp-page #cf-form :is(.form-control, .form-select), .content.wp-page.cf-metrix #cf-form :is(.form-control, .form-select) { background-color: #fff; border: 1px solid var(--wp-line); border-radius: 8px; color: var(--wp-ink); }
.content.wp-page #cf-form :is(.form-control, .form-select):disabled, .content.wp-page.cf-metrix #cf-form :is(.form-control, .form-select):disabled { background-color: #FAFAFA; border-color: var(--wp-line-2); color: var(--wp-ink); opacity: 1; }
.content.wp-page #cf-form.ep-view [class^="col"]:hover :is(.form-control, .form-select):disabled { border-color: #D4D4D8; background-color: #fff; }
.content.wp-page #cf-emps .badge, .content.wp-page.cf-metrix #cf-emps .badge { border-radius: 999px; background: var(--wp-frame) !important; border: 1px solid var(--wp-line) !important; color: var(--wp-ink) !important; font-weight: 500; }

/* ---------- tables (prices, price lists, work orders) ---------- */
.content.wp-page .table { --bs-table-color: var(--wp-text); --bs-table-border-color: var(--wp-line-2); color: var(--wp-text); }
.content.wp-page .table > thead > tr > th, .content.wp-page.mx-page .table > thead > tr > th, .content.wp-page .table > thead.table-light th {
  background: #FAFAFA !important; color: var(--wp-muted) !important; font-weight: 500 !important; font-size: .95rem; text-transform: none !important; letter-spacing: 0 !important; border-bottom: 1px solid var(--wp-line) !important; padding-top: .6rem; padding-bottom: .6rem; }
.content.wp-page .table > thead > tr > th .small, .content.wp-page .table > thead > tr > th small { color: var(--wp-faint) !important; text-transform: none; letter-spacing: 0; }
.content.wp-page .table > tbody > tr > td { border-color: var(--wp-line-2); }
.content.wp-page .table strong, .content.wp-page .table .fw-semibold { color: var(--wp-ink); }
.content.wp-page .wo-table a.font-monospace, .content.wp-page .font-monospace { font-family: var(--wp-font) !important; font-weight: 700; letter-spacing: .01em; }
.content.wp-page .table-responsive, .content.wp-page .cp-wrap { border-radius: 10px; }
/* soft rounded tags */
.content.wp-page .badge, .content.wp-page.mx-page .badge, .content.wp-page .mx-pill, .content.wp-page .pr-slots { border-radius: 999px !important; font-weight: 600 !important; padding: .2em .65em; border: 1px solid transparent; }
.content.wp-page .badge.text-bg-success, .content.wp-page .pr-slots.full { background: #DCFCE7 !important; border-color: #BBF7D0 !important; color: #15803D !important; }
.content.wp-page .badge.text-bg-warning, .content.wp-page .pr-slots.part { background: #FFEDD5 !important; border-color: #FED7AA !important; color: #C2410C !important; }
.content.wp-page .badge.text-bg-danger, .content.wp-page .pr-slots.none { background: #FEE2E2 !important; border-color: #FECACA !important; color: #B91C1C !important; }
.content.wp-page .badge:is(.text-bg-light, .text-bg-secondary) { background: var(--wp-frame) !important; border-color: var(--wp-line) !important; color: var(--wp-text) !important; }
.content.wp-page .badge:is(.text-bg-primary, .text-bg-info), .content.wp-page .mx-pill:is(.mx-st-lancer, .mx-st-ready, .mx-st-in_progress) { background: color-mix(in srgb, var(--brand) 10%, white) !important; border-color: color-mix(in srgb, var(--brand) 22%, white) !important; color: color-mix(in srgb, var(--brand) 80%, black) !important; }
.content.wp-page .mx-pill.mx-st-fini { background: #DCFCE7; border-color: #BBF7D0; color: #15803D; }
.content.wp-page .mx-pill.mx-st-annule { background: #FEE2E2; border-color: #FECACA; color: #B91C1C; }

/* ---------- the work order calendar (Project files, Work orders) ---------- */
.content.wp-page .linear-calendar { border: 1px solid var(--wp-line); border-radius: 14px; background: #fff; }
.content.wp-page .lc-cell { background: #fff; border: 1px solid var(--wp-line-2); border-radius: 8px; }
.content.wp-page .lc-cell.weekend { background: #FAFAFA; }
.content.wp-page .lc-cell:hover { background: var(--wp-frame); border-color: var(--wp-line); }
.content.wp-page .lc-cell.today { border-color: var(--brand); }
.content.wp-page .lc-cell.selected { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 1px 3px color-mix(in srgb, var(--brand) 40%, transparent); }
.content.wp-page .lc-sub { color: var(--wp-muted); font-weight: 500; }
.content.wp-page .lc-main { font-weight: 600; }
.content.wp-page .lc-head .btn-group .btn { box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .content.wp-page * { transition: none !important; } }
/* review: table heads stay on one line in the narrower file panels; <code> (page intros) in the palette */
.content.wp-page .table > thead > tr > th, .content.wp-page.mx-page .table > thead > tr > th { font-size: .86rem; white-space: nowrap; }
.content.wp-page .table > thead > tr > th .small, .content.wp-page .table > thead > tr > th small { display: block; font-size: .78rem; }
.content.wp-page code { font-family: var(--wp-font); font-weight: 700; color: var(--wp-ink); background: var(--wp-frame); border: 1px solid var(--wp-line); border-radius: 6px; padding: 0 .35em; font-size: .92em; }
.content.wp-page .lc-cell.selected .lc-sub, .content.wp-page .lc-cell.selected .lc-main { color: #fff; }

/* ---------- segmented controls (Webpixels "General | Profile | Team" tab group): filter button groups, Year / Month / Day ---------- */
.content.wp-page .btn-group:not(.dropdown):not(:has(.dropdown-toggle-split)) { background: var(--wp-frame); border: 1px solid var(--wp-line); border-radius: 10px; padding: 3px; gap: 2px; box-shadow: none; }
.content.wp-page .btn-group:not(.dropdown):not(:has(.dropdown-toggle-split)) > .btn { border: 0 !important; border-radius: 7px !important; margin: 0 !important; background: transparent; color: var(--wp-text); box-shadow: none; --bs-btn-hover-bg: rgba(255, 255, 255, .7); }
.content.wp-page .btn-group:not(.dropdown):not(:has(.dropdown-toggle-split)) > :is(.btn-primary, .btn.active, .btn-check:checked + .btn) { background: #fff !important; color: var(--wp-ink) !important; box-shadow: 0 1px 2px rgba(24, 24, 27, .12) !important; font-weight: 600; }
.content.wp-page .lc-head [data-mode].active { background: #fff; color: var(--wp-ink); border-color: transparent; }

/* ---------- New Work Orders ---------- */
.content.wp-page .wo-table .form-check-input { width: 1.25rem; height: 1.25rem; border-radius: 6px; border-color: #D4D4D8; }
.content.wp-page .wo-table tbody.wo-group:hover > tr > td { background-color: #FAFAFA; }
.content.wp-page .wo-table > tbody.wo-group + tbody.wo-group > tr.wo-main > td { border-top: 1px solid var(--wp-line); }

/* ---------- Affectations: the day's tiles as the Dashboard's two-layer cards ---------- */
.content.wp-page .woa-stat { background: #fff; border: 1px solid var(--wp-line); border-radius: 14px; box-shadow: 0 0 0 4px var(--wp-frame), 0 0 0 5px var(--wp-line); margin: 5px; padding: .85rem 1rem; }
.content.wp-page .woa-stat-num { font-family: var(--wp-font); font-weight: 600; color: var(--wp-ink); }
.content.wp-page .woa-stat .progress, .content.wp-page .woa-stat [class*="bar"] { border-radius: 999px; }
.content.wp-page .woa-stat.active, .content.wp-page .woa-stat.on { border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 12%, var(--wp-frame)), 0 0 0 5px var(--brand); }
.content.wp-page .woa-staff-chip, .content.wp-page .woa-chip { border-radius: 999px; }

/* ---------- Todo Calendar ---------- */
.content.wp-page .todo-cal { border: 1px solid var(--wp-line); border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(24, 24, 27, .04); }
.content.wp-page .todo-day { border-color: var(--wp-line-2); }
.content.wp-page .todo-item { border-radius: 8px; }
.content.wp-page #todo-month { font-family: var(--wp-font); font-weight: 600; color: var(--wp-ink); }
.content.wp-page .todo-overdue, .content.wp-page .alert-danger { border: 1px solid #FECACA; border-radius: 14px; background: #FEF2F2; }

/* ---------- SMS Messages: round avatars, soft grey open thread, rounded bubbles ---------- */
.content.wp-page .smsm, .content.wp-page.smsm-metrix .smsm { border: 1px solid var(--wp-line); border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(24, 24, 27, .04); }
.content.wp-page .smsm-avatar, .content.wp-page.smsm-metrix .smsm-avatar { border-radius: 50%; background: #fff; border: 1px solid var(--wp-line); color: var(--wp-text); font-weight: 600; box-shadow: 0 1px 2px rgba(24, 24, 27, .06); }
.content.wp-page .smsm-item { border-bottom: 1px solid var(--wp-line-2); }
.content.wp-page .smsm-item:hover { background: #FAFAFA; }
.content.wp-page .smsm-item.active, .content.wp-page.smsm-metrix .smsm-item.active { background: var(--wp-frame) !important; box-shadow: none !important; }
.content.wp-page .smsm-item.active .smsm-avatar { background: var(--brand); border-color: var(--brand); color: #fff; }
.content.wp-page .smsm-bubble { border-radius: 14px; }
.content.wp-page .smsm-msg.in .smsm-bubble, .content.wp-page.smsm-metrix .smsm-msg.in .smsm-bubble { background: #fff; border: 1px solid var(--wp-line); color: var(--wp-ink); border-bottom-left-radius: 4px; }
.content.wp-page .smsm-msg.out .smsm-bubble { border-bottom-right-radius: 4px; }
.content.wp-page .smsm-msg.system .smsm-bubble, .content.wp-page.smsm-metrix .smsm-msg.system .smsm-bubble { background: var(--wp-frame); border: 1px dashed #D4D4D8; color: var(--wp-text); }
.content.wp-page .smsm-compose textarea, .content.wp-page.smsm-metrix .smsm-compose textarea { background: #fff; border: 1px solid var(--wp-line); border-radius: 10px; }
.content.wp-page .smsm-chip { border-radius: 999px; }

/* ---------- Operations board (owner, 2026-10-14: "redesign the pages under Operations with the Webpixels app screens as inspiration") ---------- */
.content.wp-page.ops-metrix .ops-summary .cf-sum-figs { gap: 1.75rem; }
.content.wp-page .ops-stat-of { color: var(--wp-faint); }
.content.wp-page .ops-live, .content.wp-page.ops-metrix .ops-live { border: 1px solid var(--wp-line); border-radius: 999px; background: #fff; color: var(--wp-muted); }
.content.wp-page #ops-when .h5, .content.wp-page.ops-metrix #ops-when .h5 { font-family: var(--wp-font); font-weight: 600; color: var(--wp-ink); font-size: 1.45rem; }
/* "To call now": a soft red frame holding white person cards */
.content.wp-page .ops-call { background: #FEF2F2; border: 1px solid #FECACA !important; border-radius: 14px; }
.content.wp-page .ops-call > .card-header, .content.wp-page .ops-call .card-header { background: transparent !important; border-bottom: 0; color: #B91C1C; }
.content.wp-page .ops-call-card, .content.wp-page.ops-metrix .ops-call-card { background: #fff; border: 1px solid #FECACA; border-radius: 10px; box-shadow: 0 1px 2px rgba(24, 24, 27, .05); }
/* work order cards */
.content.wp-page .ops-wo-alert, .content.wp-page.ops-metrix .ops-wo-alert { background: #FFF7ED; color: #9A3412; border: 1px solid #FED7AA; border-radius: 8px; }
.content.wp-page .ops-step, .content.wp-page.ops-metrix .ops-step { border-radius: 999px; border: 1px solid var(--wp-line); background: #fff; color: var(--wp-muted); font-weight: 500; }
.content.wp-page .ops-step.done, .content.wp-page.ops-metrix .ops-step.done { background: var(--brand); border-color: var(--brand); color: #fff; }
.content.wp-page .ops-step.now, .content.wp-page.ops-metrix .ops-step.now { background: color-mix(in srgb, var(--brand) 10%, white); border-color: color-mix(in srgb, var(--brand) 45%, white); color: var(--brand); }
.content.wp-page.ops-metrix .ops-table tr.ops-row-alert td { background: #FEF2F2; }
.content.wp-page.ops-metrix .ops-table tr.ops-row-empty td { background: #FFF7ED; }
.content.wp-page .ops-step.warn, .content.wp-page.ops-metrix .ops-step.warn { background: #FFEDD5; border-color: #FED7AA; color: #C2410C; }
/* the SMS window, as SMS Messages */
.content.wp-page .ops-chat, .content.wp-page.ops-metrix .ops-chat { border: 1px solid var(--wp-line); border-radius: 14px; overflow: hidden; }
.content.wp-page .ops-chat-item, .content.wp-page.ops-metrix .ops-chat-item { border-bottom-color: var(--wp-line-2); }
.content.wp-page .ops-chat-item:hover { background: #FAFAFA; }
.content.wp-page .ops-chat-item.active, .content.wp-page.ops-metrix .ops-chat-item.active { background: var(--wp-frame) !important; box-shadow: none !important; }
.content.wp-page .ops-thread, .content.wp-page.ops-metrix .ops-thread { background: #FAFAFA; }
.content.wp-page .ops-bubble { border-radius: 14px; border-color: var(--wp-line); }
.content.wp-page .ops-msg.out .ops-bubble { border-bottom-right-radius: 4px; }
.content.wp-page .ops-msg.in .ops-bubble { border-bottom-left-radius: 4px; background: #fff; }

/* ---------- Store → Orders (owner, 2026-10-14: "redesign the pages under Store with the Webpixels app screens as inspiration") ----------
   trucks and items as Webpixels file tiles: white rounded cards, the icon in a small framed square, the state told by the tile's tint */
.content.wp-page .wh-table > thead > tr > th, .content.wp-page.wh-metrix .wh-table > thead > tr > th { background: #FAFAFA !important; color: var(--wp-muted) !important; font-weight: 500 !important; }
.content.wp-page .wh-veh-cell, .content.wp-page.wh-metrix .wh-veh-cell { background: #FAFAFA; border-right-color: var(--wp-line-2); }
.content.wp-page .wh-veh, .content.wp-page.wh-metrix .wh-veh { position: relative; border: 1px solid var(--wp-line) !important; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(24, 24, 27, .05); }
.content.wp-page .wh-veh > .bi-truck, .content.wp-page.wh-metrix .wh-veh > .bi-truck { display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem; border: 1px solid var(--wp-line); border-radius: 8px; background: #fff; color: var(--brand); font-size: 1.05rem; box-shadow: 0 1px 2px rgba(24, 24, 27, .06); }
.content.wp-page.wh-metrix .wh-veh.rented > .bi-truck { color: #2563EB; }
.content.wp-page .wh-veh.todo, .content.wp-page.wh-metrix .wh-veh.todo { border: 1px dashed #FDBA74 !important; background: #FFF7ED; box-shadow: none; }
.content.wp-page.wh-metrix .wh-veh.todo > .bi-truck { color: #C2410C; border-color: #FED7AA; }
.content.wp-page.wh-metrix .wh-veh.none > .bi-truck { color: var(--wp-faint); }
.content.wp-page .wh-veh.loaded, .content.wp-page.wh-metrix .wh-veh.loaded { background: #F0FDF4; border-color: #BBF7D0 !important; }
.content.wp-page.wh-metrix .wh-veh.loaded > .bi-truck { color: #15803D; border-color: #BBF7D0; }
.content.wp-page .wh-veh-name, .content.wp-page.wh-metrix .wh-veh-name { font-family: var(--wp-font); font-weight: 600; color: var(--wp-ink); }
.content.wp-page .wh-veh-sub, .content.wp-page.wh-metrix .wh-veh-sub { color: var(--wp-muted); }
.content.wp-page .wh-veh-load, .content.wp-page.wh-metrix .wh-veh-load { border-radius: 999px; border-color: var(--wp-line); background: #fff; }
.content.wp-page .wh-veh-load.done, .content.wp-page.wh-metrix .wh-veh-load.done { background: #DCFCE7; border-color: #BBF7D0; color: #15803D; }
.content.wp-page .wh-item-check, .content.wp-page.wh-metrix .wh-item-check { border: 1px solid var(--wp-line) !important; border-radius: 10px; background: #fff; box-shadow: 0 1px 1px rgba(24, 24, 27, .04); }
.content.wp-page .wh-item-check.done, .content.wp-page.wh-metrix .wh-item-check.done { background: #F0FDF4; border-color: #BBF7D0 !important; }
.content.wp-page .wh-item-check.done span, .content.wp-page.wh-metrix .wh-item-check.done span { color: #15803D; }
.content.wp-page .wh-item-fam, .content.wp-page.wh-metrix .wh-item-fam { color: var(--wp-faint); }
.content.wp-page .wh-item, .content.wp-page.wh-metrix .wh-item { border-radius: 999px; border-color: var(--wp-line); background: #fff; }
.content.wp-page .wh-progress, .content.wp-page.wh-metrix .wh-progress { border-radius: 999px; font-weight: 600; border: 1px solid var(--wp-line); background: #fff; }
.content.wp-page .wh-progress.all, .content.wp-page.wh-metrix .wh-progress.all { background: #DCFCE7; border-color: #BBF7D0; color: #15803D; }
.content.wp-page .wh-progress.some, .content.wp-page.wh-metrix .wh-progress.some { background: #FFEDD5; border-color: #FED7AA; color: #C2410C; }
.content.wp-page.wh-metrix .wh-table .wh-check.done { background: #F0FDF4; }
.content.wp-page .wh-person, .content.wp-page.wh-metrix .wh-person { border-radius: 999px; border: 1px solid var(--wp-line); background: #fff; color: var(--wp-ink); box-shadow: 0 1px 1px rgba(24, 24, 27, .04); }
.content.wp-page .wh-person.lead, .content.wp-page.wh-metrix .wh-person.lead { border-color: #FDE68A; background: #FFFBEB; }
.content.wp-page .wh-person.wh-unassigned, .content.wp-page.wh-metrix .wh-person.wh-unassigned { border: 1px dashed #FDBA74; color: #C2410C; background: transparent; box-shadow: none; }
.content.wp-page .wh-place, .content.wp-page.wh-metrix .wh-place { border-radius: 8px; border-color: var(--wp-line); }
.content.wp-page.wh-metrix .cf-sum-of { color: var(--wp-faint); }

/* ---------- Warehouse → Orders / Space management (owner, 2026-10-14: "redesign the pages under Warehouse with the Webpixels app screens") ---------- */
.content.wp-page .sto-card, .content.wp-page.sto-metrix .sto-card { border: 1px solid var(--wp-line) !important; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(24, 24, 27, .04); }
.content.wp-page .sto-card.applied { opacity: 1; background: #FAFAFA; }
.content.wp-page.sto-metrix .sto-card .font-monospace.fw-semibold { color: var(--brand); }
.content.wp-page .sto-line, .content.wp-page.sto-metrix .sto-line { border-top: 1px solid var(--wp-line-2); }
/* the warehouse's figures as two-layer tiles: grey frame, white figure */
.content.wp-page .spc-kpi, .content.wp-page.spc-metrix .spc-kpi { background: #fff; border: 1px solid var(--wp-line); border-radius: 10px; box-shadow: 0 0 0 4px var(--wp-frame), 0 0 0 5px var(--wp-line); margin: 5px; padding: .75rem .9rem; }
.content.wp-page .spc-kpi.alloc, .content.wp-page.spc-metrix .spc-kpi.alloc { box-shadow: 0 0 0 4px #FFF7ED, 0 0 0 5px #FED7AA; }
.content.wp-page .spc-kpi.free, .content.wp-page.spc-metrix .spc-kpi.free { box-shadow: 0 0 0 4px #F0FDF4, 0 0 0 5px #BBF7D0; }
.content.wp-page .spc-num, .content.wp-page.spc-metrix .spc-num { font-family: var(--wp-font); font-weight: 600; color: var(--wp-ink); }
.content.wp-page .spc-bar, .content.wp-page.spc-metrix .spc-bar { border-radius: 999px; background: var(--wp-frame); }
.content.wp-page .spc-list-bar, .content.wp-page.spc-metrix .spc-list-bar { border-radius: 999px; background: var(--wp-frame); }
.content.wp-page.spc-metrix .progress-bar.bg-success { background-color: #16A34A !important; }
.content.wp-page.spc-metrix .progress-bar.bg-warning { background-color: #EA580C !important; }
.content.wp-page.spc-metrix .progress-bar.bg-danger { background-color: #DC2626 !important; }
.content.wp-page.spc-metrix #cf-side h2.h6, .content.wp-page.spc-metrix #cf-side .card-body > .d-flex > strong { font-family: var(--wp-font); font-size: 1.15rem; font-weight: 600; color: var(--wp-ink); }
.content.wp-page.spc-metrix .space-chart .line { stroke-width: 2; }

/* ---------- Field → Timesheets / Expenses (owner, 2026-10-14: "redesign the pages under Field with the Webpixels app screens") ---------- */
.content.wp-page .sv-job, .content.wp-page.sv-metrix .sv-job { border: 1px solid var(--wp-line) !important; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(24, 24, 27, .04); overflow: hidden; }
.content.wp-page .sv-job-head, .content.wp-page.sv-metrix .sv-job-head { background: #fff; border-bottom-color: var(--wp-line-2); color: var(--wp-text); }
.content.wp-page.sv-metrix .sv-job-head :is(.fw-semibold, strong, .font-monospace) { color: var(--wp-ink); }
.content.wp-page.sv-metrix .sv-job-head .font-monospace.fw-semibold { color: var(--brand); }
.content.wp-page .sv-table th, .content.wp-page.sv-metrix .sv-table th { background: #FAFAFA !important; color: var(--wp-muted) !important; font-weight: 500 !important; font-size: .86rem; text-transform: none; letter-spacing: 0; border-bottom: 1px solid var(--wp-line) !important; }
.content.wp-page .sv-table td, .content.wp-page.sv-metrix .sv-table td { border-color: var(--wp-line-2); }
.content.wp-page .sv-table :is(.form-control-sm, .form-select-sm), .content.wp-page.sv-metrix .sv-table :is(.form-control-sm, .form-select-sm) { background-color: #fff; border: 1px solid var(--wp-line); border-radius: 8px; color: var(--wp-ink); }
.content.wp-page.sv-metrix .sv-table :is(.form-control-sm, .form-select-sm):focus { border-color: color-mix(in srgb, var(--brand) 55%, white); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent); }
.content.wp-page.sv-metrix .sv-table tr.locked td { background: #FAFAFA; color: var(--wp-muted); }
.content.wp-page.sv-metrix .sv-table tr.locked :is(.form-control, .form-select) { background: var(--wp-frame); border-color: var(--wp-line-2); }
.content.wp-page.sv-metrix .sv-table tr.row-add td { background: color-mix(in srgb, var(--brand) 4%, white); }
.content.wp-page.sv-metrix .sv-table td.total { color: var(--wp-ink); font-weight: 600; }
.content.wp-page.sv-metrix .btn-group > .btn-outline-secondary { margin-right: 0; }
.content.wp-page.sv-metrix .cf-sum-of { color: var(--wp-faint); }
/* receipts (Expenses): framed thumbnails, round status tags */
.content.wp-page .sv-table img, .content.wp-page [class*="receipt"] img { border-radius: 8px; border: 1px solid var(--wp-line); }
.content.wp-page [class*="rc-st"], .content.wp-page [class*="receipt-status"] { border-radius: 999px; }
.content.wp-page.sv-metrix .sv-table .form-select-sm { min-width: 7.5rem; padding-right: 1.8rem; background-position: right .45rem center; }

/* ---------- PEVL: Logbook Reviews, Vehicle Files, Drivers Files, Truck Logbook (owner, 2026-10-14: "redesign the pages under PEVL with the
   Webpixels app screens") ---------- */
.content.wp-page.pevl-metrix .cf-sum-of { color: var(--wp-faint); }
/* tabs (Truck Logbook: Daily logs / Trucks) as the Webpixels underlined tabs */
.content.wp-page .nav-pills, .content.wp-page.pevl-metrix .nav-pills { gap: .25rem; border-bottom: 1px solid var(--wp-line); }
.content.wp-page .nav-pills .nav-link, .content.wp-page.pevl-metrix .nav-pills .nav-link { border-radius: 0; background: none; color: var(--wp-muted); font-weight: 500; padding: .55rem .8rem; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.content.wp-page .nav-pills .nav-link:hover { color: var(--wp-ink); }
.content.wp-page .nav-pills .nav-link.active, .content.wp-page.pevl-metrix .nav-pills .nav-link.active { background: none; color: var(--wp-ink); border-bottom-color: var(--wp-ink); }
.content.wp-page.pevl-metrix :is(.table-danger > td, tr.table-danger td) { --bs-table-bg: #FEF2F2; --bs-table-color: var(--wp-ink); }
.content.wp-page.pevl-metrix .lr-table tr.lr-done td { color: var(--wp-faint); }
/* the vehicle / driver file: photo and avatar in framed rounded squares, KPI and totals as two-layer tiles */
.content.wp-page .tf-photo, .content.wp-page.pevl-metrix .tf-photo { border: 1px solid var(--wp-line); border-radius: 14px; background: var(--wp-frame); box-shadow: 0 1px 2px rgba(24, 24, 27, .06); }
.content.wp-page .df-avatar, .content.wp-page.pevl-metrix .df-avatar { border-radius: 50%; background: var(--brand); color: #fff; }
.content.wp-page .tf-kpi, .content.wp-page.pevl-metrix .tf-kpi { background: #fff; border: 1px solid var(--wp-line); border-radius: 10px; box-shadow: 0 0 0 4px var(--wp-frame), 0 0 0 5px var(--wp-line); margin: 5px; padding: .6rem .85rem; }
.content.wp-page.pevl-metrix .tf-kpi-label { font-size: .88rem; color: var(--wp-muted); text-transform: none; letter-spacing: 0; }
.content.wp-page .tf-kpi-value, .content.wp-page.pevl-metrix .tf-kpi-value { font-family: var(--wp-font); font-weight: 600; color: var(--wp-ink); }
.content.wp-page .tf-total, .content.wp-page.pevl-metrix .tf-total { background: #fff; border: 1px solid var(--wp-line); border-radius: 10px; }
.content.wp-page.pevl-metrix .tf-total .fw-semibold { font-family: var(--wp-font); font-weight: 600 !important; color: var(--wp-ink); }
.content.wp-page.pevl-metrix #cf-side :is(h2.h6, .card-body > .d-flex > strong, .card-header) { font-family: var(--wp-font); font-size: 1.15rem; font-weight: 600; color: var(--wp-ink); background: #fff; }
.content.wp-page.pevl-metrix #cf-side :is(.h4, .h5) { font-family: var(--wp-font); font-weight: 600; color: var(--wp-ink); }
.content.wp-page.pevl-metrix .df-trips tr.df-warn > td { background: #FEF2F2; }
.content.wp-page.pevl-metrix .df-trips tr.df-warn > td:first-child { box-shadow: none; }
/* the daily-log grid (pevlGraph) sits in a rounded white frame */
.content.wp-page .pevl-graph, .content.wp-page svg.pevl-grid { border-radius: 10px; }

/* ---------- Accounting reports, Files (Employee Files, Own Equipment) and Suppliers (owner, 2026-10-14: "redesign the pages under Accounting,
   Files and Suppliers with the Webpixels app screens") ---------- */
/* report frame, totals as two-layer tiles (the key total framed in the business colour) */
.content.wp-page :is(.sal-filters, .salrep), .content.wp-page.acc-metrix :is(.sal-filters, .salrep) { background: #fff; border: 1px solid var(--wp-line) !important; border-radius: 14px; box-shadow: 0 1px 2px rgba(24, 24, 27, .04); }
.content.wp-page.acc-metrix .salrep-head h2 { font-family: var(--wp-font); font-weight: 600; color: var(--wp-ink); }
.content.wp-page.acc-metrix .salrep-sum { gap: 1rem; }
.content.wp-page.acc-metrix .salrep-sum > div { background: #fff; border: 1px solid var(--wp-line); border-radius: 10px; box-shadow: 0 0 0 4px var(--wp-frame), 0 0 0 5px var(--wp-line); margin: 5px; }
.content.wp-page.acc-metrix .salrep-sum > div.salrep-key { box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 10%, white), 0 0 0 5px color-mix(in srgb, var(--brand) 45%, white); }
.content.wp-page.acc-metrix .salrep-sum .small { color: var(--wp-muted) !important; font-size: .88rem; }
.content.wp-page.acc-metrix .salrep-sum strong { font-family: var(--wp-font); font-weight: 600; font-size: 1.5rem; color: var(--wp-ink); }
.content.wp-page.acc-metrix .salrep-sum strong.text-danger { color: #DC2626 !important; }
.content.wp-page.acc-metrix .salrep-sum strong.text-success { color: #16A34A !important; }
.content.wp-page.acc-metrix .salrep-emp-head { background: var(--wp-frame); border: 1px solid var(--wp-line); border-radius: 10px; color: var(--wp-ink); }
.content.wp-page.acc-metrix :is(.salrep-table, .suprep-table) thead th { background: #FAFAFA !important; color: var(--wp-muted) !important; font-weight: 500 !important; border-bottom: 1px solid var(--wp-line) !important; }
.content.wp-page.acc-metrix :is(.salrep-table, .suprep-table) td { border-color: var(--wp-line-2); }
.content.wp-page.acc-metrix :is(.salrep-table, .suprep-table) tr.salrep-proj td { background: #FAFAFA; color: var(--wp-text); }
.content.wp-page.acc-metrix :is(.salrep-table, .suprep-table) tr.salrep-total td { border-top: 1px solid var(--wp-line); color: var(--wp-ink); font-weight: 600; }
.content.wp-page.acc-metrix .alert-light.border { background: var(--wp-frame) !important; border: 1px solid var(--wp-line) !important; }
@media print { .content.wp-page.acc-metrix .salrep-sum > div { box-shadow: none !important; border: 1px solid #ccc; margin: 0; } .content.wp-page :is(.salrep, .sal-filters) { border: 0 !important; box-shadow: none; } }
/* Employee Files / Supplier Employees: round avatars, the open person on soft grey, skills as round tags */
.content.wp-page.emp-metrix .ep-person.active { background: var(--wp-frame) !important; box-shadow: none !important; }
.content.wp-page.emp-metrix .ep-person:hover { background: #FAFAFA; }
.content.wp-page.emp-metrix .ep-skill, .content.wp-page .ep-skill { border-radius: 999px; border: 1px solid color-mix(in srgb, var(--brand) 22%, white); background: color-mix(in srgb, var(--brand) 8%, white); font-weight: 500; }
.content.wp-page.emp-metrix #ep-detail :is(.h4, h1, .h5) { font-family: var(--wp-font); font-weight: 600; color: var(--wp-ink); }
.content.wp-page.emp-metrix #ep-detail .ep-avatar.lg { width: 3.6rem; height: 3.6rem; border-radius: 50%; background: var(--brand); border: 0; color: #fff; }
.content.wp-page.emp-metrix #ep-detail h2.h6 { font-family: var(--wp-font); font-size: 1.15rem; font-weight: 600; color: var(--wp-ink); }
.content.wp-page.emp-metrix #ep-detail .form-label { font-weight: 500; color: var(--wp-muted); text-transform: none; letter-spacing: 0; }
.content.wp-page.emp-metrix #ep-detail :is(.form-control, .form-select, .input-group-text) { background-color: #fff; border: 1px solid var(--wp-line); border-radius: 8px; color: var(--wp-ink); }
.content.wp-page.emp-metrix #ep-detail :is(.form-control, .form-select):disabled { background-color: #FAFAFA; border-color: var(--wp-line-2); opacity: 1; }
.content.wp-page.emp-metrix #ep-detail .ep-skills thead th { background: #FAFAFA !important; color: var(--wp-muted); font-weight: 500; border-bottom: 1px solid var(--wp-line); }
.content.wp-page.emp-metrix .ep-tree .alert-light.border { background: var(--wp-frame) !important; border: 1px solid var(--wp-line) !important; }
.content.wp-page .ep-company, .content.wp-page .ep-company-head { border-radius: 10px; }
/* Own Equipment / Inventory / Equipment / Rental space tables, Supplier Files / Rates: the shared panels, tags and tables above apply */
.content.wp-page :is(.oe-metrix, .ro-metrix) .card { overflow: hidden; }
.content.wp-page.oe-metrix .table > tbody > tr:hover > td { background: #FAFAFA; }
.content.wp-page .sf-spent, .content.wp-page:is(.sup-metrix, .srt-metrix) .sf-spent { border-radius: 999px; background: var(--wp-frame); border: 1px solid var(--wp-line); color: var(--wp-ink); font-weight: 600; padding: 0 .5rem; }

/* ---------- Virtual Director, Settings, Administration (owner, 2026-10-14: "redesign the pages under Virtual Director, Settings and
   Administration with the Webpixels app screens") ---------- */
/* the filled grey inputs of those pages become white bordered fields, as everywhere else */
.content.wp-page:is(.dr-metrix, .smss-metrix, .set-metrix, .ps-metrix, .adm-metrix) :is(.form-control, .form-select, .input-group-text),
.content.wp-page.dr-metrix #cf-side :is(.form-control, .form-select), .content.wp-page.smss-metrix #smss-body .form-control, .content.wp-page.set-metrix .table :is(.form-control, .form-select) {
  background-color: #fff; border: 1px solid var(--wp-line); border-radius: 8px; color: var(--wp-ink); }
.content.wp-page:is(.dr-metrix, .smss-metrix, .set-metrix, .ps-metrix, .adm-metrix) .input-group-text { color: var(--wp-muted); }
.content.wp-page:is(.dr-metrix, .smss-metrix, .set-metrix, .ps-metrix, .adm-metrix) :is(.form-control, .form-select):focus { border-color: color-mix(in srgb, var(--brand) 55%, white); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent); }
.content.wp-page:is(.dr-metrix, .smss-metrix, .adm-metrix) .form-label { font-weight: 500; color: var(--wp-muted); text-transform: none; letter-spacing: 0; }
.content.wp-page:is(.dr-metrix, .ps-metrix, .adm-metrix) .card-header, .content.wp-page.dr-metrix #cf-side .card-header { background: #fff !important; border-bottom: 1px solid var(--wp-line-2); }
.content.wp-page:is(.dr-metrix, .ps-metrix, .adm-metrix) :is(.card-header strong, .card-title, h2.h5, h2.h6, h5) { font-family: var(--wp-font); font-weight: 600; color: var(--wp-ink); }
.content.wp-page:is(.set-metrix, .adm-metrix) .card .table > thead > tr > th { background: #FAFAFA !important; color: var(--wp-muted) !important; font-weight: 500 !important; }
.content.wp-page:is(.set-metrix, .adm-metrix) .card .table > tbody > tr > td { border-color: var(--wp-line-2); }
.content.wp-page.set-metrix .card .table > thead > tr > th.sorted, .content.wp-page.set-metrix .card .table > thead > tr > th.sorted i { color: var(--wp-ink); }
.content.wp-page.set-metrix tr.row-add td { background: color-mix(in srgb, var(--brand) 4%, white); }
.content.wp-page:is(.dr-metrix, .adm-metrix) .alert-light.border, .content.wp-page.dr-metrix #cf-side .alert-light.border { background: var(--wp-frame) !important; border: 1px solid var(--wp-line) !important; border-radius: 10px; }
/* Director Rules: the 1 · 2 · 3 numbers as round badges, SMS previews as white bubbles, the block editors framed */
.content.wp-page.dr-metrix .dr-num { border-radius: 50% !important; font-family: var(--wp-font) !important; font-weight: 600 !important; }
.content.wp-page.dr-metrix .dr-sms { background: #fff; border: 1px solid var(--wp-line); border-radius: 14px; border-bottom-left-radius: 4px; color: var(--wp-ink); }
.content.wp-page:is(.dr-metrix, .ps-metrix) :is(.dr-blockly, .ps-blockly) { border: 1px solid var(--wp-line); border-radius: 14px; overflow: hidden; }
.content.wp-page.dr-metrix #cf-side .btn-group > .btn-outline-secondary.active, .content.wp-page.dr-metrix #cf-side .btn-check:checked + .btn-outline-secondary { background: #fff !important; color: var(--wp-ink) !important; }
/* Project Steps */
.content.wp-page.ps-metrix .ps-step-head { background: #fff; }
.content.wp-page.ps-metrix .ps-step { border-radius: 14px; border: 1px solid var(--wp-line); overflow: hidden; }
/* Administration: lists with the open item on soft grey, underlined tabs */
.content.wp-page.adm-metrix .list-group { border-radius: 14px; }
.content.wp-page.adm-metrix .list-group-item { border-color: var(--wp-line-2); color: var(--wp-ink); }
.content.wp-page.adm-metrix .list-group-item.active { background: var(--wp-frame) !important; color: var(--wp-ink); border-color: var(--wp-line-2); box-shadow: none !important; font-weight: 600; }
.content.wp-page.adm-metrix .list-group-item.active .badge { background: var(--brand) !important; color: #fff !important; }
.content.wp-page .nav-tabs, .content.wp-page.adm-metrix .nav-tabs { border-bottom: 1px solid var(--wp-line); gap: .25rem; }
.content.wp-page .nav-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--wp-muted); font-weight: 500; margin-bottom: -1px; background: none; }
.content.wp-page .nav-tabs .nav-link:hover { color: var(--wp-ink); }
.content.wp-page .nav-tabs .nav-link.active { color: var(--wp-ink); border-bottom-color: var(--wp-ink); background: none; }
.content.wp-page.adm-metrix .form-control-color { padding: .2rem; }
.content.wp-page .logs-scroll { border-radius: 14px; }

/* ===== New project dialog in the Webpixels look of the pages (owner, 2026-10-14: "the New Project dialog needs to follow the design style of
   all the other pages"): header with an icon tile + the code to come, the fields in two-layer sections (grey frame + title, white inner card),
   white bordered inputs with the brand focus ring, labels in sentence case, a soft footer; Baloo Paaji 2. `.wp-dialog` on .modal-dialog. ===== */
.modal-dialog.wp-dialog {
  --wp-frame: #F4F4F5; --wp-line: #E4E4E7; --wp-line-2: #F1F1F3; --wp-ink: #18181B; --wp-text: #3F3F46; --wp-muted: #71717A; --wp-faint: #A1A1AA;
  --wp-font: 'Baloo Paaji 2', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-family: var(--wp-font); color: var(--wp-text);
}
.wp-dialog :is(.form-control, .form-select, .input-group-text, .btn, .form-check-label, .form-text, .list-group-item) { font-family: var(--wp-font); }
.wp-dialog .modal-content { border: 1px solid var(--wp-line); border-radius: 16px; box-shadow: 0 24px 48px -12px rgba(24, 24, 27, .22); overflow: visible; }
.wp-dialog .modal-header { border-bottom: 0; padding: 1.25rem 1.5rem .5rem; align-items: center; }
.wp-dialog .modal-title { display: flex; align-items: center; gap: .85rem; min-width: 0; }
.wp-dialog .wpd-ico { flex: none; width: 2.6rem; height: 2.6rem; display: grid; place-items: center; background: #fff; border: 1px solid var(--wp-line); border-radius: 10px;
  box-shadow: 0 1px 2px rgba(24, 24, 27, .06); color: var(--brand); font-size: 1.2rem; }
.wp-dialog .wpd-titles { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.wp-dialog .wpd-title { font-size: 1.3rem; font-weight: 600; color: var(--wp-ink); }
.wp-dialog .wpd-sub { font-size: .92rem; font-weight: 400; color: var(--wp-muted); margin-top: .1rem; }
.wp-dialog .wpd-code { display: inline-block; padding: 0 .5rem; border-radius: 999px; background: color-mix(in srgb, var(--brand) 10%, white); border: 1px solid color-mix(in srgb, var(--brand) 22%, white);
  color: color-mix(in srgb, var(--brand) 85%, black); font-weight: 600; font-variant-numeric: tabular-nums; }
.wp-dialog .modal-body { padding: .75rem 1.5rem 1.25rem; }
.wp-dialog .wpd-sec { padding: .3rem; background: var(--wp-frame); border: 1px solid var(--wp-line); border-radius: 14px; }
.wp-dialog .wpd-sec + .wpd-sec { margin-top: .9rem; }
.wp-dialog .wpd-sec-head { display: flex; align-items: center; gap: .5rem; padding: .4rem .7rem .5rem; font-size: 1.02rem; font-weight: 600; color: var(--wp-ink); }
.wp-dialog .wpd-sec-head i { color: var(--wp-muted); font-size: .95rem; }
.wp-dialog .wpd-sec-body { margin: 0; padding: .35rem 1rem 1rem; --bs-gutter-x: 1rem; background: #fff; border: 1px solid var(--wp-line); border-radius: 10px; box-shadow: 0 1px 2px rgba(24, 24, 27, .05); }
.wp-dialog .wpd-sec-body > [class*="col"] { padding-left: calc(var(--bs-gutter-x) * .5); padding-right: calc(var(--bs-gutter-x) * .5); }
.wp-dialog .form-label { font-size: .92rem; font-weight: 500; color: var(--wp-muted); text-transform: none; letter-spacing: 0; margin-bottom: .3rem; }
.wp-dialog :is(.form-control, .form-select) { background-color: #fff; border: 1px solid var(--wp-line); border-radius: 8px; color: var(--wp-ink); }
.wp-dialog :is(.form-control, .form-select):focus { border-color: color-mix(in srgb, var(--brand) 55%, white); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent); }
.wp-dialog .form-control::placeholder { color: var(--wp-faint); }
.wp-dialog .input-group-text { border-color: var(--wp-line); background: var(--wp-frame); color: var(--wp-muted); border-radius: 8px; }
.wp-dialog .input-group > :not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.wp-dialog .input-group > :not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.wp-dialog .form-text { color: var(--wp-muted); font-size: .85rem; }
.wp-dialog .form-text a { color: var(--brand); }
.wp-dialog .form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.wp-dialog .form-check-input:focus { border-color: color-mix(in srgb, var(--brand) 55%, white); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent); }
.wp-dialog .form-check-label { color: var(--wp-text); }
.wp-dialog .cb-list { border-radius: 10px; border: 1px solid var(--wp-line); overflow: hidden; z-index: 5; }
.wp-dialog .cb-list .list-group-item { border-color: var(--wp-line-2); }
.wp-dialog .cb-list .list-group-item.active { background: color-mix(in srgb, var(--brand) 10%, white); color: var(--wp-ink); border-color: var(--wp-line-2); }
.wp-dialog .modal-error { border-radius: 10px; }
.wp-dialog .modal-footer { background: #FAFAFA; border-top: 1px solid var(--wp-line); border-radius: 0 0 16px 16px; padding: .85rem 1.5rem; gap: .5rem; }
.wp-dialog .modal-footer > * { margin: 0; }
.wp-dialog .btn { border-radius: 8px; font-weight: 500; }
.wp-dialog .btn-outline-secondary { --bs-btn-color: var(--wp-text); --bs-btn-border-color: var(--wp-line); --bs-btn-bg: #fff; --bs-btn-hover-bg: var(--wp-frame); --bs-btn-hover-color: var(--wp-ink);
  --bs-btn-hover-border-color: #D4D4D8; --bs-btn-active-bg: var(--wp-frame); --bs-btn-active-color: var(--wp-ink); box-shadow: 0 1px 1px rgba(24, 24, 27, .04); }
@media (max-width: 575.98px) { .wp-dialog .modal-header, .wp-dialog .modal-body, .wp-dialog .modal-footer { padding-left: 1rem; padding-right: 1rem; } }

/* ----- shared by the Webpixels dialogs (.wp-dialog): hint line, soft tag, "not saved" pill ----- */
.wp-dialog .wpd-hint { font-size: .88rem; color: var(--wp-muted); margin-top: .5rem; }
.wp-dialog .wpd-tag { display: inline-block; padding: 0 .55rem; border-radius: 999px; background: #fff; border: 1px solid var(--wp-line); color: var(--wp-muted); font-size: .8rem; font-weight: 500; }
.wp-dialog .wpd-sub { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .35rem; }
.wp-dialog .wpd-warn { display: inline-flex; align-items: center; gap: .35rem; margin-left: .4rem; padding: 0 .55rem; border-radius: 999px; background: #FFEDD5; border: 1px solid #FED7AA; color: #C2410C; font-size: .8rem; font-weight: 500; }
.wp-dialog .wpd-warn i { font-size: .45rem; }
.wp-dialog .modal-dialog-scrollable .modal-content, .wp-dialog.modal-dialog-scrollable .modal-content { overflow: hidden; }

/* ===== Work order dialog in the Webpixels look (owner, 2026-10-14: "the redesign needs to happen in the Work Orders on the dialog when we
   click on Add new work order"): `.wo-dialog.wp-dialog` — the same sections as the New project dialog, the estimate as two-layer cards,
   family chips, a rounded items list, the Milk route table and tasks with white bordered fields. ===== */
.wo-dialog.wp-dialog .modal-body { background: #fff; }
.wo-dialog.wp-dialog .wpd-sec + .wpd-sec { margin-top: 0; }
.wo-dialog.wp-dialog .form-label.small { font-size: .88rem !important; }
.wo-dialog.wp-dialog .wo-dispatch-input { background-color: #FFFBEB !important; border-color: #FDE68A !important; }
.wo-dialog.wp-dialog .wo-dispatch-input::placeholder { color: #B45309; opacity: .55; }
/* estimate (right column) */
.wo-dialog.wp-dialog .woe-sec .woe-card { padding: .85rem 1rem; background: #fff; border: 1px solid var(--wp-line); border-radius: 10px; box-shadow: 0 1px 2px rgba(24, 24, 27, .05); }
.wo-dialog.wp-dialog > .modal-content .wod-estimate > .woe-card { background: #fff; border: 1px solid var(--wp-line); border-radius: 14px; }
.wo-dialog.wp-dialog .woe-cost-sep { border-top-color: var(--wp-line-2); }
.wo-dialog.wp-dialog .woe-cost-row { color: var(--wp-text); }
.wo-dialog.wp-dialog .woe-total { font-size: 1.4rem; font-weight: 600; color: var(--wp-ink); }
.wo-dialog.wp-dialog .woe-check { color: var(--wp-text); }
.wo-dialog.wp-dialog .woe-card .badge.text-bg-warning { background: #FFEDD5 !important; color: #C2410C !important; border: 1px solid #FED7AA; border-radius: 999px; font-weight: 500; }
/* family chips + filter + items list */
.wo-dialog.wp-dialog .wo-fams { gap: .4rem !important; }
.wo-dialog.wp-dialog .wo-fams .btn { border-radius: 999px; padding: .15rem .75rem; font-weight: 500; }
.wo-dialog.wp-dialog .wo-fams .btn-outline-secondary, .wo-dialog.wp-dialog .wo-fams .btn-outline-success { --bs-btn-color: var(--wp-text); --bs-btn-border-color: var(--wp-line); --bs-btn-bg: #fff; --bs-btn-hover-bg: var(--wp-frame); --bs-btn-hover-color: var(--wp-ink); --bs-btn-hover-border-color: #D4D4D8; border-style: dashed; }
.wo-dialog.wp-dialog .wo-fams .btn-primary { background: color-mix(in srgb, var(--brand) 10%, white); border-color: color-mix(in srgb, var(--brand) 35%, white); color: color-mix(in srgb, var(--brand) 85%, black); box-shadow: none; }
.wo-dialog.wp-dialog .wo-fams .badge { background: #fff !important; border: 1px solid var(--wp-line); color: var(--wp-text) !important; border-radius: 999px; font-weight: 600; }
.wo-dialog.wp-dialog .wo-list { border: 1px solid var(--wp-line); border-radius: 10px; }
.wo-dialog.wp-dialog .wo-item { border-color: var(--wp-line-2); color: var(--wp-ink); }
.wo-dialog.wp-dialog .wo-item.on { background: color-mix(in srgb, var(--brand) 7%, white); }
.wo-dialog.wp-dialog .wo-item .wo-item-ctl .btn { border-radius: 8px; }
.wo-dialog.wp-dialog .wo-item .wo-item-ctl .btn-outline-secondary { --bs-btn-color: var(--wp-text); --bs-btn-border-color: var(--wp-line); --bs-btn-bg: #fff; --bs-btn-hover-bg: var(--wp-frame); --bs-btn-hover-color: var(--wp-ink); --bs-btn-disabled-border-color: var(--wp-line-2); --bs-btn-disabled-color: var(--wp-faint); }
.wo-dialog.wp-dialog .wo-item .wo-item-qty { border-radius: 8px; }
/* Milk route table, tasks, add buttons */
.wo-dialog.wp-dialog .wo-stops-table { --bs-table-bg: #fff; border-color: var(--wp-line-2); }
.wo-dialog.wp-dialog .wo-stops-table thead th { background: #FAFAFA; color: var(--wp-muted); font-weight: 500; font-size: .85rem; border-bottom: 1px solid var(--wp-line); }
.wo-dialog.wp-dialog .wo-stops .table-responsive { border: 1px solid var(--wp-line); border-radius: 10px; }
.wo-dialog.wp-dialog .wo-stops .table-responsive .table { margin-bottom: 0 !important; }
.wo-dialog.wp-dialog .wo-tasks .input-group-text { min-width: 2.2rem; justify-content: center; }
.wo-dialog.wp-dialog .btn-outline-primary { --bs-btn-color: var(--wp-text); --bs-btn-border-color: var(--wp-line); --bs-btn-bg: #fff; --bs-btn-hover-bg: var(--wp-frame); --bs-btn-hover-color: var(--wp-ink); --bs-btn-hover-border-color: #D4D4D8; box-shadow: 0 1px 1px rgba(24, 24, 27, .04); }
.wo-dialog.wp-dialog .btn-outline-primary i { color: var(--brand); }
.wo-dialog.wp-dialog .btn-outline-danger { --bs-btn-color: #B91C1C; --bs-btn-border-color: var(--wp-line); --bs-btn-bg: #fff; --bs-btn-hover-bg: #FEE2E2; --bs-btn-hover-color: #B91C1C; --bs-btn-hover-border-color: #FECACA; }
/* the work order form is long: tighter sections than the New project dialog */
.wo-dialog.wp-dialog form.wo-fields { --bs-gutter-y: .7rem; }
.wo-dialog.wp-dialog .wpd-sec-head { padding: .3rem .7rem .4rem; font-size: .98rem; }
.wo-dialog.wp-dialog .wpd-sec-body { padding: .15rem .85rem .75rem; --bs-gutter-y: .45rem; }
.wo-dialog.wp-dialog .wpd-hint { margin-top: .4rem; }
.wo-dialog.wp-dialog .woe-sec .woe-card { padding: .7rem .9rem; }

/* "More below" arrow of a scrollable dialog (owner, 2026-10-14; scrollHint() in views.js): a zero-height sticky strip at the end of the body,
   so the round button sits at the bottom of the visible area over a soft white fade; hidden (and not clickable) once at the end */
.wpd-more { position: sticky; bottom: 0; height: 0; z-index: 6; pointer-events: none; }
.wpd-more::before { content: ''; position: absolute; left: -1.5rem; right: -1.5rem; bottom: -.75rem; height: 3.5rem; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 85%); opacity: 0; transition: opacity .2s; }
.wpd-more-btn { position: absolute; left: 50%; bottom: .1rem; transform: translate(-50%, .4rem); width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: 50%;
  background: #fff; border: 1px solid #E4E4E7; color: var(--brand); font-size: 1.15rem; box-shadow: 0 6px 16px -4px rgba(24, 24, 27, .25); opacity: 0; transition: opacity .2s, transform .2s; cursor: pointer; }
.wpd-more-btn:hover { background: color-mix(in srgb, var(--brand) 8%, white); }
.wpd-more-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 35%, transparent); outline-offset: 2px; }
.wpd-more.on::before { opacity: 1; }
.wpd-more.on .wpd-more-btn { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; animation: wpd-bob 1.6s ease-in-out 2; }
@keyframes wpd-bob { 50% { transform: translate(-50%, .3rem); } }
@media (prefers-reduced-motion: reduce) { .wpd-more-btn { transition: none; } .wpd-more.on .wpd-more-btn { animation: none; } }

/* ----- more shared bits of the Webpixels dialogs: white inner card of a section (non-grid content), soft pills, empty text, plain table ----- */
.wp-dialog .wpd-sec-inner { padding: .75rem .9rem; background: #fff; border: 1px solid var(--wp-line); border-radius: 10px; box-shadow: 0 1px 2px rgba(24, 24, 27, .05); }
.wp-dialog .wpd-sec-inner:has(> .table-responsive) { padding: 0; overflow: hidden; }
.wp-dialog .wpd-empty { color: var(--wp-faint); font-size: .92rem; }
.wp-dialog .wpd-pill { display: inline-flex; align-items: center; gap: .3rem; padding: 0 .55rem; border-radius: 999px; border: 1px solid transparent; font-size: .8rem; font-weight: 500; line-height: 1.6; white-space: nowrap; }
.wp-dialog .wpd-pill.ok { background: #DCFCE7; border-color: #BBF7D0; color: #15803D; }
.wp-dialog .wpd-pill.warn { background: #FFEDD5; border-color: #FED7AA; color: #C2410C; }
.wp-dialog .wpd-pill.bad { background: #FEE2E2; border-color: #FECACA; color: #B91C1C; }
.wp-dialog .wpd-pill.muted { background: #fff; border-color: var(--wp-line); color: var(--wp-muted); }
.wp-dialog .wpd-sub .wpd-pill { margin-left: .4rem; }
.wp-dialog .wpd-table { --bs-table-bg: #fff; margin: 0; }
.wp-dialog .wpd-table thead th { background: #FAFAFA; color: var(--wp-muted); font-weight: 500; font-size: .85rem; border-bottom: 1px solid var(--wp-line); padding: .5rem .75rem; }
.wp-dialog .wpd-table tbody td { padding: .55rem .75rem; border-color: var(--wp-line-2); color: var(--wp-text); }
.wp-dialog .wpd-table tbody tr:last-child td { border-bottom: 0; }
.wp-dialog .modal-body .wpd-sec + .wpd-sec, .wp-dialog .modal-body > .wpd-sec { margin-bottom: 0; }
.wp-dialog .btn-outline-success { --bs-btn-color: #15803D; --bs-btn-border-color: #BBF7D0; --bs-btn-bg: #fff; --bs-btn-hover-bg: #DCFCE7; --bs-btn-hover-color: #15803D; --bs-btn-hover-border-color: #86EFAC; --bs-btn-disabled-color: #86EFAC; --bs-btn-disabled-border-color: #DCFCE7; }
.wp-dialog .btn-outline-danger { --bs-btn-color: #B91C1C; --bs-btn-border-color: #FECACA; --bs-btn-bg: #fff; --bs-btn-hover-bg: #FEE2E2; --bs-btn-hover-color: #B91C1C; --bs-btn-hover-border-color: #FCA5A5; --bs-btn-disabled-color: #FCA5A5; --bs-btn-disabled-border-color: #FEE2E2; }

/* ===== Team lead report (owner, 2026-10-14: "the Team lead report and SMS log dialogs also need a redesign"): `.wor-dialog` ===== */
.wor-dialog .modal-body { display: flex; flex-direction: column; gap: .9rem; }
.wor-dialog .wor-top { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .75rem; }
.wor-dialog .wor-cards { flex: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .75rem; }
.wor-dialog .wor-card { padding: .3rem; background: var(--wp-frame); border: 1px solid var(--wp-line); border-radius: 14px; }
.wor-dialog .wor-card-head { display: flex; align-items: center; gap: .45rem; padding: .3rem .6rem .4rem; font-weight: 600; color: var(--wp-ink); }
.wor-dialog .wor-card-head i { color: var(--wp-muted); font-size: .9rem; }
.wor-dialog .wor-card-figs { display: flex; gap: 1.25rem; padding: .55rem .8rem .6rem; background: #fff; border: 1px solid var(--wp-line); border-radius: 10px; box-shadow: 0 1px 2px rgba(24, 24, 27, .05); }
.wor-dialog .wor-fig { display: flex; flex-direction: column; min-width: 0; }
.wor-dialog .wor-fig-l { font-size: .82rem; color: var(--wp-muted); white-space: nowrap; }
.wor-dialog .wor-fig-n { font-size: 1.35rem; font-weight: 600; line-height: 1.15; color: var(--wp-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.wor-dialog .wor-fig-n.warn { color: #DC2626; }
.wor-dialog .wor-fig-n .bi-check-lg { color: #15803D; }
.wor-dialog .wor-open { white-space: nowrap; }
.wor-dialog .wor-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; align-items: start; }
@media (max-width: 991.98px) { .wor-dialog .wor-grid { grid-template-columns: 1fr; } }
.wor-dialog .wor-person { display: inline-flex; align-items: center; gap: .6rem; }
.wor-dialog .wor-person > span:last-child { display: flex; flex-direction: column; line-height: 1.25; }
.wor-dialog .wor-av { flex: none; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--brand) 12%, white); color: color-mix(in srgb, var(--brand) 85%, black); font-size: .78rem; font-weight: 600; }
.wor-dialog .wor-name { font-weight: 500; color: var(--wp-ink); }
.wor-dialog .wor-role, .wor-dialog .wor-muted, .wor-dialog .wor-times { color: var(--wp-muted); font-size: .85rem; }
.wor-dialog .wor-h { font-weight: 600; color: var(--wp-ink); }
.wor-dialog .wor-star { color: #F59E0B; }
.wor-dialog tr.wor-absent .wor-av { background: var(--wp-frame); color: var(--wp-faint); }
.wor-dialog tr.wor-absent .wor-name { color: var(--wp-muted); }
.wor-dialog .wor-receipts { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: .6rem; }
.wor-dialog .wor-receipt { padding: .6rem .7rem; border: 1px solid var(--wp-line); border-radius: 10px; background: #fff; }
.wor-dialog .wor-kind { font-size: .82rem; color: var(--wp-muted); }
.wor-dialog .wor-amount { color: var(--wp-ink); font-variant-numeric: tabular-nums; }
.wor-dialog .wor-receipt-img { width: 100%; height: 6.5rem; object-fit: cover; border-radius: 8px; cursor: zoom-in; }
.wor-dialog .wor-thumb { width: 4.5rem; height: 4.5rem; object-fit: cover; border-radius: 8px; border: 1px solid var(--wp-line); cursor: zoom-in; }
.wor-dialog .wor-sign { height: 4.5rem; padding: .25rem; border: 1px solid var(--wp-line); border-radius: 8px; background: #fff; cursor: zoom-in; }
.wor-dialog .wor-link { color: var(--brand); }
.wor-dialog .wor-tasks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.wor-dialog .wor-tasks li { display: flex; gap: .55rem; align-items: baseline; color: var(--wp-text); }
.wor-dialog .wor-tasks li i { color: var(--wp-faint); }
.wor-dialog .wor-tasks li.done i { color: #16A34A; }
.wor-dialog .wor-item + .wor-item { margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--wp-line-2); }
.wor-dialog .wor-journal { max-height: 12rem; overflow: auto; display: flex; flex-direction: column; gap: .3rem; font-size: .88rem; }
.wor-dialog .wor-j { display: grid; grid-template-columns: auto 1fr; gap: .6rem; }
.wor-dialog .wor-j-at { color: var(--wp-faint); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ===== SMS log of a work order: `.wsl-dialog` — bubbles as on SMS Messages ===== */
.wsl-dialog .modal-body { background: #FAFAFA; }
.wsl-dialog .wsl { display: flex; flex-direction: column; gap: .7rem; }
.wsl-dialog .wsl-day { display: flex; align-items: center; gap: .75rem; color: var(--wp-muted); font-size: .82rem; margin: .35rem 0 .1rem; }
.wsl-dialog .wsl-day::before, .wsl-dialog .wsl-day::after { content: ''; flex: 1; border-top: 1px solid var(--wp-line); }
.wsl-dialog .wsl-day span { padding: 0 .65rem; border: 1px solid var(--wp-line); border-radius: 999px; background: #fff; text-transform: capitalize; }
.wsl-dialog .wsl-msg { display: flex; flex-direction: column; max-width: 82%; gap: .2rem; }
.wsl-dialog .wsl-msg.in { align-self: flex-start; align-items: flex-start; }
.wsl-dialog .wsl-msg:is(.out, .sys) { align-self: flex-end; align-items: flex-end; }
.wsl-dialog .wsl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-size: .82rem; color: var(--wp-muted); padding: 0 .3rem; }
.wsl-dialog .wsl-meta b { color: var(--wp-ink); font-weight: 600; }
.wsl-dialog .wsl-meta .bi-arrow-right { font-size: .75rem; }
.wsl-dialog .wsl-time { color: var(--wp-faint); }
.wsl-dialog .wsl-bubble { white-space: pre-wrap; overflow-wrap: anywhere; padding: .6rem .85rem; border-radius: 14px; font-size: .95rem; line-height: 1.4; }
.wsl-dialog .wsl-msg.in .wsl-bubble { background: #fff; border: 1px solid var(--wp-line); border-bottom-left-radius: 4px; color: var(--wp-ink); }
.wsl-dialog .wsl-msg.out .wsl-bubble { background: color-mix(in srgb, var(--brand) 12%, white); border: 1px solid color-mix(in srgb, var(--brand) 22%, white); border-bottom-right-radius: 4px; color: var(--wp-ink); }
.wsl-dialog .wsl-msg.sys .wsl-bubble { background: #FFF4EA; border: 1px solid #FDE2CC; border-bottom-right-radius: 4px; color: var(--wp-ink); }
.wsl-dialog .wsl-media { margin-top: .3rem; font-size: .85rem; color: var(--wp-muted); font-style: italic; }
.wsl-dialog .wsl-open { font-size: .8rem; color: var(--wp-muted); text-decoration: none; padding: 0 .3rem; }
.wsl-dialog .wsl-open:hover { color: var(--brand); text-decoration: underline; }
.wsl-dialog .wpd-more::before { background: linear-gradient(to bottom, rgba(250, 250, 250, 0), #FAFAFA 85%); }

/* ===== Price list / rate list dialog (owner, 2026-10-14: "the dialog when creating or editing a price list needs a redesign"):
   `.rld-dialog` (rateListsPanel, Client Price List and Supplier Rates) — the list type as selectable tiles ===== */
.rld-dialog form.row { --bs-gutter-y: .9rem; }
.rld-dialog .rld-kinds { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .6rem; }
.rld-dialog .rld-kind { display: flex; align-items: flex-start; gap: .65rem; text-align: left; padding: .7rem .8rem; background: #fff; border: 1px solid var(--wp-line); border-radius: 10px; color: var(--wp-text); font-family: var(--wp-font); transition: border-color .15s, box-shadow .15s, background .15s; }
.rld-dialog .rld-kind > i { flex: none; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 8px; background: var(--wp-frame); color: var(--wp-muted); font-size: 1rem; }
.rld-dialog .rld-kind > span { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.rld-dialog .rld-kind b { font-weight: 600; color: var(--wp-ink); }
.rld-dialog .rld-kind small { color: var(--wp-muted); font-size: .82rem; margin-top: .1rem; }
.rld-dialog .rld-kind:not(:disabled):hover { border-color: #D4D4D8; background: #FAFAFA; }
.rld-dialog .rld-kind:focus-visible { outline: none; border-color: color-mix(in srgb, var(--brand) 55%, white); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent); }
.rld-dialog .rld-kind.on { border-color: color-mix(in srgb, var(--brand) 55%, white); background: color-mix(in srgb, var(--brand) 6%, white); box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 55%, white); }
.rld-dialog .rld-kind.on > i { background: var(--brand); color: #fff; }
.rld-dialog .rld-kind:disabled { cursor: default; opacity: 1; }
.rld-dialog .rld-kind:disabled:not(.on) { display: none; } /* editing: only the list's own type */
.rld-dialog .wpd-sub .wpd-pill i { font-size: .75rem; }
/* error banner and the supplier rates grid inside the Webpixels dialogs */
.wp-dialog .modal-error.alert-danger { background: #FEF2F2; border: 1px solid #FECACA; color: #B91C1C; border-radius: 10px; padding: .55rem .85rem; font-size: .92rem; }
.rld-dialog .wpd-sec-body > .col-12 > .sup-section:first-child { display: none; } /* the section title already says it */
.rld-dialog .wpd-sec-body .table-responsive { border: 1px solid var(--wp-line); border-radius: 10px; }
.rld-dialog .wpd-sec-body .table { --bs-table-bg: #fff; margin-bottom: 0; }
.rld-dialog .wpd-sec-body .table thead th { background: #FAFAFA; color: var(--wp-muted); font-weight: 500; font-size: .85rem; border-bottom: 1px solid var(--wp-line); }
.rld-dialog .wpd-sec-body .table tbody td { border-color: var(--wp-line-2); }
.rld-dialog .wpd-sec-body .input-group-text { background: var(--wp-frame); }

/* ===== Todo dialog (owner, 2026-10-14: "Add a todo in Dispatch / New Work Orders needs a redesign"; also the Todo Calendar's): `.tdd-dialog` ===== */
.tdd-dialog .modal-body form.row { --bs-gutter-y: .8rem; }
.tdd-dialog .tdd-muted { color: var(--wp-muted); font-size: .88rem; }
.tdd-dialog .tdd-wo-line { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem; }
.tdd-dialog .tdd-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .6rem; }
.tdd-dialog .tdd-chip { padding: .1rem .7rem; border-radius: 999px; border: 1px dashed var(--wp-line); background: #fff; color: var(--wp-text); font-family: var(--wp-font); font-size: .85rem; font-weight: 500; }
.tdd-dialog .tdd-chip:hover { border-color: #D4D4D8; background: var(--wp-frame); }
.tdd-dialog .tdd-chip.on { border-style: solid; border-color: color-mix(in srgb, var(--brand) 40%, white); background: color-mix(in srgb, var(--brand) 10%, white); color: color-mix(in srgb, var(--brand) 85%, black); }
.tdd-dialog .tdd-chip:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent); }
.tdd-dialog .tdd-count { text-align: right; font-size: .78rem; color: var(--wp-faint); margin-top: .25rem; font-variant-numeric: tabular-nums; }
.tdd-dialog .tdd-actions { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--wp-line-2); }
.tdd-dialog .tdd-cancel-box { padding: .65rem .75rem; border: 1px solid #FECACA; border-radius: 10px; background: #FEF2F2; }
.tdd-dialog .tdd-cancel-box .form-label { color: #B91C1C; }
.tdd-dialog .tdd-cancelled { display: flex; gap: .5rem; align-items: baseline; padding: .55rem .8rem; border-radius: 10px; background: var(--wp-frame); border: 1px solid var(--wp-line); color: var(--wp-text); font-size: .9rem; }
.tdd-dialog .btn-danger { background: #DC2626; border-color: #DC2626; border-radius: 8px; }

/* ===== Todo Calendar, livelier (owner, 2026-10-14: "the calendar looks dull" — picked a livelier grid + the agenda panel) ===== */
.content.wp-page .todo-layout { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: 1rem; align-items: start; }
@media (max-width: 1199.98px) { .content.wp-page .todo-layout { grid-template-columns: 1fr; } }
/* grid */
.content.wp-page .todo-cal { overflow: hidden; }
.content.wp-page .todo-cal-head > div { background: #FAFAFA; color: var(--wp-muted); font-weight: 500; font-size: .85rem; padding: .5rem .6rem; border-bottom: 1px solid var(--wp-line); }
.content.wp-page .todo-day { position: relative; min-height: 7.5rem; padding: .35rem .4rem; border-color: var(--wp-line-2); background: #fff; transition: background .12s; }
.content.wp-page .todo-day.wknd { background: #FCFCFD; }
.content.wp-page .todo-day.past:not(.today) .todo-day-num { color: var(--wp-faint); }
.content.wp-page .todo-day.other { background: #FAFAFA; opacity: 1; }
.content.wp-page .todo-day.other .todo-day-num { color: #D4D4D8; }
.content.wp-page .todo-day:hover { background: color-mix(in srgb, var(--brand) 3%, white); }
.content.wp-page .todo-day.today { background: color-mix(in srgb, var(--brand) 5%, white); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--brand) 45%, white); }
.content.wp-page .todo-day-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .3rem; }
.content.wp-page .todo-day-num { font-family: var(--wp-font); font-size: 1.05rem; font-weight: 600; color: var(--wp-ink); line-height: 1; margin: 0; padding: .15rem .1rem; }
.content.wp-page .todo-day.today .todo-day-num { display: inline-grid; place-items: center; min-width: 1.7rem; height: 1.7rem; padding: 0 .35rem; border-radius: 999px; background: var(--brand); color: #fff; }
.content.wp-page .todo-day-add { width: 1.5rem; height: 1.5rem; display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--wp-line); background: #fff; color: var(--brand); font-size: .8rem; opacity: 0; transition: opacity .12s; }
.content.wp-page .todo-day:hover .todo-day-add { opacity: 1; }
@media (hover: none) { .content.wp-page .todo-day-add { display: none; } }
/* todo cards (grid and agenda) */
.content.wp-page .todo-item, .content.wp-page.todo-metrix .todo-item { align-items: center; gap: .35rem; padding: .25rem .4rem; margin-bottom: .25rem; border: 1px solid var(--wp-line); border-left: 1px solid var(--wp-line); border-radius: 8px; background: #fff; color: var(--wp-ink); font-size: .82rem; box-shadow: 0 1px 1px rgba(24, 24, 27, .04); cursor: pointer; }
.content.wp-page .todo-item:hover { border-color: #D4D4D8; box-shadow: 0 2px 6px -2px rgba(24, 24, 27, .12); }
.content.wp-page .todo-dot { flex: none; width: .45rem; height: .45rem; border-radius: 50%; background: var(--brand); }
.content.wp-page .todo-item.overdue, .content.wp-page.todo-metrix .todo-item.overdue { background: #FEF2F2; border-color: #FECACA; }
.content.wp-page .todo-item.overdue .todo-dot { background: #DC2626; }
.content.wp-page .todo-item.done, .content.wp-page.todo-metrix .todo-item.done { background: #fff; border-color: var(--wp-line-2); box-shadow: none; }
.content.wp-page .todo-item.done .todo-dot { background: #16A34A; }
.content.wp-page .todo-item.cancelled, .content.wp-page.todo-metrix .todo-item.cancelled { background: #FAFAFA; border-color: var(--wp-line-2); box-shadow: none; opacity: .75; }
.content.wp-page .todo-item.cancelled .todo-dot { background: var(--wp-faint); }
.content.wp-page .todo-item .form-check-input { margin: 0; width: .95rem; height: .95rem; }
.content.wp-page .todo-item .form-check-input:checked { background-color: #16A34A; border-color: #16A34A; }
.content.wp-page .todo-item .todo-wo { padding: 0 .4rem; border-radius: 999px; background: color-mix(in srgb, var(--brand) 9%, white); color: color-mix(in srgb, var(--brand) 85%, black) !important; font-family: var(--wp-font) !important; font-size: .72rem; font-weight: 600; white-space: nowrap; }
/* agenda */
.content.wp-page .todo-agenda { position: sticky; top: .75rem; padding: .3rem; background: var(--wp-frame); border: 1px solid var(--wp-line); border-radius: 14px; max-height: calc(100vh - 7rem); overflow: auto; }
.content.wp-page .todo-ag-head { display: flex; align-items: center; gap: .45rem; padding: .4rem .6rem .5rem; font-weight: 600; color: var(--wp-ink); font-size: 1.02rem; }
.content.wp-page .todo-ag-head i { color: var(--wp-muted); }
.content.wp-page .todo-ag-n { margin-left: auto; padding: 0 .5rem; border-radius: 999px; background: #fff; border: 1px solid var(--wp-line); font-size: .8rem; color: var(--wp-muted); }
.content.wp-page .todo-ag-group { padding: .55rem .6rem .45rem; background: #fff; border: 1px solid var(--wp-line); border-radius: 10px; }
.content.wp-page .todo-ag-group + .todo-ag-group { margin-top: .45rem; }
.content.wp-page .todo-ag-title { display: flex; align-items: center; gap: .4rem; margin-bottom: .4rem; font-size: .85rem; font-weight: 600; color: var(--wp-text); }
.content.wp-page .todo-ag-title span { margin-left: auto; color: var(--wp-faint); font-weight: 500; }
.content.wp-page .todo-ag-group.overdue .todo-ag-title { color: #B91C1C; }
.content.wp-page .todo-ag-group.today .todo-ag-title { color: color-mix(in srgb, var(--brand) 85%, black); }
.content.wp-page .todo-ag-date { display: block; font-size: .75rem; color: var(--wp-muted); margin: .1rem 0 .1rem .1rem; text-transform: capitalize; }
.content.wp-page .todo-ag-group.overdue .todo-ag-date { color: #DC2626; }
.content.wp-page .todo-ag-row .todo-item { font-size: .85rem; }
.content.wp-page .todo-ag-row .todo-text { -webkit-line-clamp: 2; }
.content.wp-page .todo-ag-empty { display: flex; align-items: center; gap: .5rem; padding: .9rem .75rem; background: #fff; border: 1px solid var(--wp-line); border-radius: 10px; color: var(--wp-muted); font-size: .9rem; }
.content.wp-page .todo-ag-empty i { color: #16A34A; font-size: 1.1rem; }
@media (max-width: 1199.98px) { .content.wp-page .todo-agenda { position: static; max-height: none; } }
/* in a day cell the work order tag drops under the text when the cell is narrow, instead of squeezing it */
.content.wp-page .todo-day .todo-item { flex-wrap: wrap; row-gap: .15rem; }
.content.wp-page .todo-item .todo-text { min-width: 4rem; }
.content.wp-page .todo-day .todo-item .todo-wo { margin-left: auto; }

/* ===== Release the space (owner, 2026-10-14): `.rel-dialog` — the order, then the warehouse before → after ===== */
.rel-dialog .rel-ico { color: #DC2626; }
.rel-dialog .rel-qty { padding: 0 .55rem; border-radius: 999px; background: #FEF2F2; border: 1px solid #FECACA; color: #B91C1C; font-size: .85rem; font-weight: 600; }
.rel-dialog .rel-line { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem; margin-bottom: .55rem; }
.rel-dialog .rel-muted { color: var(--wp-muted); font-size: .88rem; }
.rel-dialog .rel-dl { display: grid; grid-template-columns: auto 1fr; gap: .25rem .9rem; margin: 0; font-size: .92rem; }
.rel-dialog .rel-dl dt { font-weight: 500; color: var(--wp-muted); }
.rel-dialog .rel-dl dd { margin: 0; color: var(--wp-ink); min-width: 0; overflow-wrap: anywhere; }
.rel-dialog .rel-cols { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .75rem; }
.rel-dialog .rel-col { padding: .6rem .75rem; border: 1px solid var(--wp-line); border-radius: 10px; background: #FAFAFA; }
.rel-dialog .rel-col.after { background: #fff; border-color: color-mix(in srgb, var(--brand) 35%, white); box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 18%, transparent); }
.rel-dialog .rel-col-t { font-size: .82rem; font-weight: 600; color: var(--wp-muted); margin-bottom: .3rem; }
.rel-dialog .rel-fig { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; font-size: .88rem; color: var(--wp-muted); }
.rel-dialog .rel-fig b { font-size: 1.15rem; font-weight: 600; color: var(--wp-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rel-dialog .rel-fig b small { font-size: .75rem; font-weight: 500; color: var(--wp-muted); }
.rel-dialog .rel-fig b.up { color: #15803D; }
.rel-dialog .rel-pct { display: inline-block; margin-top: .35rem; padding: 0 .5rem; border-radius: 999px; font-size: .78rem; font-weight: 600; }
.rel-dialog .rel-pct.ok { background: #DCFCE7; color: #15803D; } .rel-dialog .rel-pct.warn { background: #FFEDD5; color: #C2410C; } .rel-dialog .rel-pct.bad { background: #FEE2E2; color: #B91C1C; }
.rel-dialog .rel-arrow { color: var(--wp-faint); font-size: 1.2rem; }
.rel-dialog .rel-bar { display: flex; height: .7rem; margin-top: .9rem; border-radius: 999px; background: var(--wp-frame); overflow: hidden; }
.rel-dialog .rel-bar .keep, .rel-dialog .rel-legend i.keep { background: #22C55E; }
.rel-dialog .rel-bar .keep.warn, .rel-dialog .rel-legend i.keep.warn { background: #F97316; }
.rel-dialog .rel-bar .keep.bad, .rel-dialog .rel-legend i.keep.bad { background: #EF4444; }
.rel-dialog .rel-bar .gone, .rel-dialog .rel-legend i.gone { background: repeating-linear-gradient(135deg, #FCA5A5 0 4px, #FEE2E2 4px 8px); }
.rel-dialog .rel-legend { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin-top: .45rem; font-size: .8rem; color: var(--wp-muted); }
.rel-dialog .rel-legend i { display: inline-block; width: .7rem; height: .7rem; border-radius: 3px; margin-right: .35rem; vertical-align: -1px; }
.rel-dialog .rel-note { display: flex; gap: .5rem; align-items: baseline; padding: .55rem .8rem; border-radius: 10px; background: var(--wp-frame); border: 1px solid var(--wp-line); color: var(--wp-text); font-size: .88rem; }
.rel-dialog .rel-note i { color: var(--wp-muted); }
.rel-dialog .modal-footer .btn-danger { background: #DC2626; border-color: #DC2626; }
@media (max-width: 575.98px) { .rel-dialog .rel-cols { grid-template-columns: 1fr; } .rel-dialog .rel-arrow { transform: rotate(90deg); justify-self: center; } }
.rel-dialog .rel-count { text-align: right; font-size: .78rem; color: var(--wp-faint); margin-top: .25rem; font-variant-numeric: tabular-nums; }
/* Space management history: the release note under who released (2026-10-14) */
.spc-rel-note { max-width: 16rem; margin-top: .15rem; white-space: normal; color: var(--wp-text, #3F3F46); font-size: .82rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.spc-rel-note i { color: var(--wp-muted, #71717A); }

/* ===== Receipt dialog (owner, 2026-10-14; Field → Expenses "+ Receipt" and the pencil): `.exd-dialog` ===== */
.exd-dialog .exd-stack { display: flex; flex-direction: column; gap: .8rem; }
.exd-dialog .exd-kinds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.exd-dialog .exd-kind { display: flex; flex-direction: column; align-items: center; gap: .3rem; margin: 0; padding: .6rem .3rem .5rem; border: 1px solid var(--wp-line); border-radius: 10px; background: #fff; color: var(--wp-text); font-weight: 500; font-size: .88rem; cursor: pointer; text-align: center; transition: border-color .15s, background .15s; }
.exd-dialog .exd-kind i { width: 2.1rem; height: 2.1rem; display: grid; place-items: center; border-radius: 8px; background: var(--wp-frame); color: var(--wp-muted); font-size: 1.1rem; }
.exd-dialog .exd-kind:hover { border-color: #D4D4D8; background: #FAFAFA; }
.exd-dialog .btn-check:checked + .exd-kind { border-color: color-mix(in srgb, var(--brand) 55%, white); background: color-mix(in srgb, var(--brand) 6%, white); box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 55%, white); color: var(--wp-ink); }
.exd-dialog .btn-check:checked + .exd-kind i { background: var(--brand); color: #fff; }
.exd-dialog .btn-check:focus-visible + .exd-kind { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent); }
@media (max-width: 420px) { .exd-dialog .exd-kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.exd-dialog .exd-amount { max-width: 14rem; }
.exd-dialog .exd-amount .form-control { font-size: 1.35rem; font-weight: 600; text-align: right; color: var(--wp-ink); font-variant-numeric: tabular-nums; }
.exd-dialog .exd-amount .input-group-text { font-size: 1.1rem; font-weight: 600; }
.exd-dialog .exd-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .25rem; padding: .25rem; border-radius: 10px; background: var(--wp-frame); border: 1px solid var(--wp-line); }
.exd-dialog .exd-seg-btn { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; padding: .35rem .4rem; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--wp-muted); font-family: var(--wp-font); font-weight: 500; font-size: .88rem; }
.exd-dialog .exd-seg-btn:hover { color: var(--wp-ink); }
.exd-dialog .exd-seg-btn.on { background: #fff; box-shadow: 0 1px 2px rgba(24, 24, 27, .08); }
.exd-dialog .exd-seg-btn.on.warn { color: #C2410C; border-color: #FED7AA; } .exd-dialog .exd-seg-btn.on.ok { color: #15803D; border-color: #BBF7D0; } .exd-dialog .exd-seg-btn.on.bad { color: #B91C1C; border-color: #FECACA; }
.exd-dialog .exd-drop { display: flex; align-items: center; gap: .85rem; margin: 0; padding: .8rem .9rem; border: 1.5px dashed #D4D4D8; border-radius: 10px; background: #FAFAFA; cursor: pointer; transition: border-color .15s, background .15s; }
.exd-dialog .exd-drop:hover, .exd-dialog .exd-drop.over { border-color: color-mix(in srgb, var(--brand) 55%, white); background: color-mix(in srgb, var(--brand) 5%, white); }
.exd-dialog .exd-drop.has { border-style: solid; background: #fff; }
.exd-dialog .exd-drop.big { border-color: #FCA5A5; background: #FEF2F2; }
.exd-dialog .exd-prev { flex: none; width: 3.6rem; height: 3.6rem; display: grid; place-items: center; overflow: hidden; border-radius: 8px; background: #fff; border: 1px solid var(--wp-line); color: var(--brand); font-size: 1.5rem; }
.exd-dialog .exd-prev img { width: 100%; height: 100%; object-fit: cover; }
.exd-dialog .exd-drop-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.exd-dialog .exd-drop-t b { font-weight: 600; color: var(--wp-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exd-dialog .exd-drop-t small { color: var(--wp-muted); font-size: .82rem; }
.exd-dialog .exd-drop.big .exd-drop-t small { color: #B91C1C; }
.exd-dialog .exd-danger { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .55rem .8rem; border: 1px solid #FECACA; border-radius: 10px; background: #FEF2F2; color: #B91C1C; font-size: .86rem; }
/* receipt dialog: upload with cell phone (2026-10-14) */
.exd-dialog .exd-phone-row { display: flex; align-items: center; gap: .6rem; margin-top: .6rem; color: var(--wp-muted); font-size: .85rem; }
.exd-dialog .exd-qr { display: flex; gap: .9rem; align-items: center; margin-top: .6rem; padding: .7rem; border: 1px solid var(--wp-line); border-radius: 10px; background: #fff; }
.exd-dialog .exd-qr.done { border-color: #BBF7D0; background: #F0FDF4; }
.exd-dialog .exd-qr-img { flex: none; width: 8.5rem; height: 8.5rem; padding: .3rem; border: 1px solid var(--wp-line); border-radius: 8px; background: #fff; }
.exd-dialog .exd-qr-img svg { width: 100%; height: 100%; display: block; }
.exd-dialog .exd-qr.done .exd-qr-img { opacity: .35; }
.exd-dialog .exd-qr-t { display: flex; flex-direction: column; gap: .3rem; min-width: 0; line-height: 1.3; }
.exd-dialog .exd-qr-t b { color: var(--wp-ink); font-weight: 600; }
.exd-dialog .exd-qr-t small { color: var(--wp-muted); font-size: .82rem; }
.exd-dialog .exd-qr-st { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; font-weight: 500; color: var(--brand); }
.exd-dialog .exd-qr.done .exd-qr-st { color: #15803D; }
.exd-dialog .exd-qr-t a { color: var(--wp-muted); }

/* ===== Upload with cell phone — Project Files (owner, 2026-10-14): `.pdp-dialog` ===== */
.pdp-dialog .pdp-grid { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 1.25rem; align-items: start; }
@media (max-width: 767.98px) { .pdp-dialog .pdp-grid { grid-template-columns: 1fr; } .pdp-dialog .pdp-qrcard { max-width: 16rem; margin: 0 auto; } }
.pdp-dialog .pdp-qrcard { padding: .3rem; background: var(--wp-frame); border: 1px solid var(--wp-line); border-radius: 14px; }
.pdp-dialog .pdp-qrcard .pd-qr { width: auto; max-width: none; padding: .7rem; background: #fff; border: 1px solid var(--wp-line); border-radius: 10px; box-shadow: 0 1px 2px rgba(24, 24, 27, .05); }
.pdp-dialog .pdp-qrcard .pd-qr svg { width: 100%; height: auto; display: block; }
.pdp-dialog .pd-qr.pd-qr-off { opacity: .25; filter: grayscale(1); }
.pdp-dialog .pdp-left { display: flex; align-items: center; justify-content: center; gap: .4rem; padding: .45rem .5rem .3rem; color: var(--wp-muted); font-size: .85rem; font-variant-numeric: tabular-nums; }
.pdp-dialog .pdp-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.pdp-dialog .pdp-steps li { display: flex; gap: .7rem; align-items: flex-start; }
.pdp-dialog .pdp-steps li > span { flex: none; width: 1.7rem; height: 1.7rem; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--brand) 12%, white); color: color-mix(in srgb, var(--brand) 85%, black); font-weight: 600; font-size: .85rem; }
.pdp-dialog .pdp-steps li > div { display: flex; flex-direction: column; line-height: 1.3; }
.pdp-dialog .pdp-steps b { color: var(--wp-ink); font-weight: 600; }
.pdp-dialog .pdp-steps small { color: var(--wp-muted); font-size: .84rem; }
.pdp-dialog .pdp-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
.pdp-dialog .pdp-tag { display: inline-flex; align-items: center; gap: .35rem; padding: .1rem .6rem; border-radius: 999px; background: #fff; border: 1px solid var(--wp-line); color: var(--wp-text); font-size: .82rem; }
.pdp-dialog .pdp-tag i { color: var(--wp-muted); }
.pdp-dialog .form-label { font-size: .85rem; color: var(--wp-muted); font-weight: 500; }
.pdp-dialog .pdp-status { display: flex; align-items: center; gap: .75rem; margin-top: 1.1rem; padding: .75rem .9rem; border-radius: 10px; border: 1px solid var(--wp-line); background: #FAFAFA; }
.pdp-dialog .pdp-status > div { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.pdp-dialog .pdp-status b { color: var(--wp-ink); font-weight: 600; overflow-wrap: anywhere; }
.pdp-dialog .pdp-status small { color: var(--wp-muted); font-size: .84rem; }
.pdp-dialog .pdp-status.wait { border-color: color-mix(in srgb, var(--brand) 30%, white); background: color-mix(in srgb, var(--brand) 4%, white); }
.pdp-dialog .pdp-status.got { border-color: #BBF7D0; background: #F0FDF4; }
.pdp-dialog .pdp-status.off > i { color: var(--wp-muted); font-size: 1.2rem; }
.pdp-dialog .pdp-ok { color: #16A34A; font-size: 1.25rem; }
.pdp-dialog .pdp-pulse { flex: none; width: .75rem; height: .75rem; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 45%, transparent); animation: pdp-pulse 1.6s infinite; }
@keyframes pdp-pulse { 70% { box-shadow: 0 0 0 .55rem transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .pdp-dialog .pdp-pulse { animation: none; } }

/* ===== User menu at the top right (owner, 2026-10-14: "it needs a redesign"): `.user-menu.um` ===== */
.user-menu.um { --wp-frame: #F4F4F5; --wp-line: #E4E4E7; --wp-line-2: #F1F1F3; --wp-ink: #18181B; --wp-text: #3F3F46; --wp-muted: #71717A; --wp-faint: #A1A1AA;
  width: 21rem; min-width: 0; padding: .35rem; border: 1px solid var(--wp-line); border-radius: 14px; background: var(--wp-frame); box-shadow: 0 18px 40px -12px rgba(24, 24, 27, .25);
  font-family: 'Baloo Paaji 2', 'Inter', system-ui, sans-serif; color: var(--wp-text); }
.user-menu.um .um-head { display: flex; gap: .8rem; align-items: center; padding: .85rem .9rem; background: #fff; border: 1px solid var(--wp-line); border-radius: 10px; box-shadow: 0 1px 2px rgba(24, 24, 27, .05); }
.user-menu.um .um-av { flex: none; width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 600; font-size: 1.15rem; letter-spacing: .02em; }
.user-menu.um .um-id { min-width: 0; line-height: 1.25; }
.user-menu.um .um-name { font-weight: 600; font-size: 1.08rem; color: var(--wp-ink); }
.user-menu.um .um-email { font-size: .85rem; color: var(--wp-muted); }
.user-menu.um .um-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .4rem; }
.user-menu.um .um-tag { display: inline-flex; align-items: center; gap: .3rem; max-width: 100%; padding: 0 .55rem; border-radius: 999px; font-size: .78rem; font-weight: 500; line-height: 1.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-menu.um .um-tag.role { background: color-mix(in srgb, var(--brand) 10%, white); border: 1px solid color-mix(in srgb, var(--brand) 22%, white); color: color-mix(in srgb, var(--brand) 85%, black); }
.user-menu.um .um-tag.biz { background: #fff; border: 1px solid var(--wp-line); color: var(--wp-text); }
.user-menu.um .um-body { margin-top: .35rem; padding: .3rem; background: #fff; border: 1px solid var(--wp-line); border-radius: 10px; }
.user-menu.um .um-item { display: flex; align-items: center; gap: .7rem; padding: .5rem .55rem; border-radius: 8px; color: var(--wp-ink); white-space: normal; }
.user-menu.um .um-item:hover, .user-menu.um .um-item:focus { background: var(--wp-frame); color: var(--wp-ink); }
.user-menu.um .um-ico { flex: none; width: 2.1rem; height: 2.1rem; display: grid; place-items: center; border-radius: 8px; background: var(--wp-frame); color: var(--wp-muted); font-size: 1rem; }
.user-menu.um .um-item:hover .um-ico { background: #fff; color: var(--brand); }
.user-menu.um .um-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.user-menu.um .um-txt b { font-weight: 600; color: var(--wp-ink); }
.user-menu.um .um-txt small { display: flex; align-items: center; gap: .3rem; color: var(--wp-muted); font-size: .8rem; }
.user-menu.um .um-txt small.on { color: #15803D; }
.user-menu.um .um-go { margin-left: auto; color: var(--wp-faint); font-size: .8rem; }
.user-menu.um .um-viewas { margin-top: .3rem; padding: .55rem; border-top: 1px solid var(--wp-line-2); }
.user-menu.um .um-viewas.on { margin: .3rem -.05rem 0; border: 1px solid #FDE68A; border-radius: 8px; background: #FFFBEB; }
.user-menu.um .um-viewas.on .um-ico { background: #FEF3C7; color: #B45309; }
.user-menu.um .um-viewas.on .um-txt small { color: #B45309; }
.user-menu.um .um-va-label { display: flex; align-items: center; gap: .7rem; margin-bottom: .45rem; cursor: pointer; }
.user-menu.um .um-viewas .form-select { min-width: 0; border-color: var(--wp-line); border-radius: 8px; color: var(--wp-ink); font-family: inherit; }
.user-menu.um .um-viewas .form-select:focus { border-color: color-mix(in srgb, var(--brand) 55%, white); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent); }
.user-menu.um .um-foot { margin-top: .35rem; }
.user-menu.um .um-out { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .5rem; border: 1px solid #FECACA; border-radius: 10px; background: #fff; color: #B91C1C; font-weight: 500; }
.user-menu.um .um-out:hover, .user-menu.um .um-out:focus { background: #FEF2F2; color: #B91C1C; }
@media (max-width: 420px) { .user-menu.um { width: calc(100vw - 2rem); } }

/* ===== Language menu at the top right (owner, 2026-10-14: "also needs a redesign"), same look as the user menu: `.lang-menu.lm` ===== */
.lang-menu.lm { --wp-frame: #F4F4F5; --wp-line: #E4E4E7; --wp-ink: #18181B; --wp-text: #3F3F46; --wp-muted: #71717A;
  width: 13.5rem; min-width: 0; padding: .35rem; border: 1px solid var(--wp-line); border-radius: 14px; background: var(--wp-frame); box-shadow: 0 18px 40px -12px rgba(24, 24, 27, .25);
  font-family: 'Baloo Paaji 2', 'Inter', system-ui, sans-serif; color: var(--wp-text); }
.lang-menu.lm .lm-head { display: flex; align-items: center; gap: .45rem; padding: .3rem .55rem .45rem; font-weight: 600; color: var(--wp-ink); }
.lang-menu.lm .lm-head i { color: var(--wp-muted); }
.lang-menu.lm .lm-body { padding: .3rem; background: #fff; border: 1px solid var(--wp-line); border-radius: 10px; box-shadow: 0 1px 2px rgba(24, 24, 27, .05); }
.lang-menu.lm .lm-item { display: flex; align-items: center; gap: .65rem; padding: .45rem .5rem; border-radius: 8px; color: var(--wp-ink); font-weight: 500; }
.lang-menu.lm .lm-item + .lm-item { margin-top: .15rem; }
.lang-menu.lm .lm-item:hover, .lang-menu.lm .lm-item:focus { background: var(--wp-frame); color: var(--wp-ink); }
.lang-menu.lm .lm-code { flex: none; width: 2rem; height: 1.6rem; display: grid; place-items: center; border-radius: 6px; background: var(--wp-frame); color: var(--wp-muted); font-size: .75rem; font-weight: 700; letter-spacing: .04em; }
.lang-menu.lm .lm-check { margin-left: auto; color: var(--brand); visibility: hidden; }
.lang-menu.lm .lm-item.active { background: color-mix(in srgb, var(--brand) 8%, white); color: var(--wp-ink); }
.lang-menu.lm .lm-item.active .lm-code { background: var(--brand); color: #fff; }
.lang-menu.lm .lm-item.active .lm-check { visibility: visible; }
.lang-menu.lm .lm-foot { display: flex; align-items: center; gap: .35rem; padding: .45rem .55rem .2rem; font-size: .78rem; color: var(--wp-muted); }

/* ===== Affectations resource picker (owner, 2026-10-14: "when we click to assign a resource, the dialog needs a redesign"): `.woa-dropdown.wpk` ===== */
.woa-dropdown.wpk { --wp-frame: #F4F4F5; --wp-line: #E4E4E7; --wp-line-2: #F1F1F3; --wp-ink: #18181B; --wp-text: #3F3F46; --wp-muted: #71717A; --wp-faint: #A1A1AA;
  padding: .35rem; gap: .35rem; background: var(--wp-frame); border: 1px solid var(--wp-line); border-radius: 14px; box-shadow: 0 24px 48px -12px rgba(24, 24, 27, .28);
  font-family: 'Baloo Paaji 2', 'Inter', system-ui, sans-serif; color: var(--wp-text); }
.woa-dropdown.wpk :is(.form-control, .form-select, .btn, .form-check-label) { font-family: inherit; }
.woa-dropdown.wpk .wpk-head { display: flex; align-items: center; gap: .7rem; padding: .45rem .55rem .35rem; }
.woa-dropdown.wpk .wpk-ico { flex: none; width: 2.3rem; height: 2.3rem; display: grid; place-items: center; border-radius: 10px; background: #fff; border: 1px solid var(--wp-line); color: var(--brand); font-size: 1.1rem; box-shadow: 0 1px 2px rgba(24, 24, 27, .06); }
.woa-dropdown.wpk .wpk-titles { min-width: 0; }
.woa-dropdown.wpk .wpk-title { font-weight: 600; font-size: 1.05rem; color: var(--wp-ink); line-height: 1.25; }
.woa-dropdown.wpk .wpk-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .2rem; }
.woa-dropdown.wpk .wpk-chips:empty { display: none; }
.woa-dropdown.wpk .wpk-chip { display: inline-flex; align-items: center; gap: .3rem; padding: 0 .55rem; border-radius: 999px; background: #fff; border: 1px solid var(--wp-line); color: var(--wp-text); font-size: .8rem; line-height: 1.6; }
.woa-dropdown.wpk .wpk-chip.skill { background: #F0FDF4; border-color: #BBF7D0; color: #15803D; font-weight: 500; }
.woa-dropdown.wpk .wpk-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .55rem .6rem; background: #fff; border: 1px solid var(--wp-line); border-radius: 10px; }
.woa-dropdown.wpk .wpk-search { position: relative; flex: 0 1 17rem; }
.woa-dropdown.wpk .wpk-search i { position: absolute; left: .6rem; top: 50%; transform: translateY(-50%); color: var(--wp-faint); font-size: .85rem; }
.woa-dropdown.wpk .wpk-search .form-control { padding-left: 1.85rem; }
.woa-dropdown.wpk :is(.form-control, .form-select) { border-color: var(--wp-line); border-radius: 8px; color: var(--wp-ink); }
.woa-dropdown.wpk :is(.form-control, .form-select):focus { border-color: color-mix(in srgb, var(--brand) 55%, white); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent); }
.woa-dropdown.wpk .wpk-free { display: flex; align-items: center; gap: .45rem; padding-left: 0; font-size: .88rem; }
.woa-dropdown.wpk .wpk-free .form-check-input { margin: 0; float: none; }
.woa-dropdown.wpk .wpk-free .form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.woa-dropdown.wpk .wpk-count { color: var(--wp-muted); font-size: .82rem; }
.woa-dropdown.wpk .btn-outline-danger { --bs-btn-color: #B91C1C; --bs-btn-border-color: #FECACA; --bs-btn-bg: #fff; --bs-btn-hover-bg: #FEF2F2; --bs-btn-hover-color: #B91C1C; --bs-btn-hover-border-color: #FCA5A5; border-radius: 8px; }
.woa-dropdown.wpk .woa-pick-table { border: 1px solid var(--wp-line); border-radius: 10px; background: #fff; }
.woa-dropdown.wpk .woa-pick-table .table { --bs-table-bg: #fff; --bs-table-hover-bg: #FAFAFA; }
.woa-dropdown.wpk .woa-pick-table thead th { background: #FAFAFA; color: var(--wp-muted); font-weight: 500; font-size: .82rem; border-bottom: 1px solid var(--wp-line); padding: .45rem .6rem; }
.woa-dropdown.wpk .woa-pick-table tbody td { padding: .45rem .6rem; border-color: var(--wp-line-2); color: var(--wp-text); font-size: .88rem; }
.woa-dropdown.wpk .wpk-who { display: inline-flex; align-items: center; gap: .55rem; }
.woa-dropdown.wpk .wpk-av { flex: none; width: 1.9rem; height: 1.9rem; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--brand) 12%, white); color: color-mix(in srgb, var(--brand) 85%, black); font-size: .72rem; font-weight: 600; }
.woa-dropdown.wpk .wpk-av.sup { background: #FFF4EA; color: #C2410C; }
.woa-dropdown.wpk .wpk-name { font-weight: 600; color: var(--wp-ink); }
.woa-dropdown.wpk .wpk-cur { color: var(--brand); }
.woa-dropdown.wpk .wpk-tag { display: inline-flex; align-items: center; gap: .25rem; padding: 0 .5rem; border-radius: 999px; background: var(--wp-frame); border: 1px solid var(--wp-line); color: var(--wp-text); font-size: .76rem; font-weight: 500; line-height: 1.6; }
.woa-dropdown.wpk .wpk-tag.on { background: color-mix(in srgb, var(--brand) 9%, white); border-color: color-mix(in srgb, var(--brand) 22%, white); color: color-mix(in srgb, var(--brand) 85%, black); }
.woa-dropdown.wpk .wpk-av-pill { display: inline-flex; align-items: center; gap: .3rem; max-width: 15rem; padding: 0 .55rem; border-radius: 999px; font-size: .78rem; font-weight: 500; line-height: 1.7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.woa-dropdown.wpk .wpk-av-pill.ok { background: #F0FDF4; border: 1px solid #BBF7D0; color: #15803D; }
.woa-dropdown.wpk .wpk-av-pill.busy { background: #FFF7ED; border: 1px solid #FED7AA; color: #C2410C; }
/* required skill: softer green / red, with an edge marker; the current resource framed in the business colour */
.woa-dropdown.wpk tr.woa-qual-ok > td { background-color: #F7FDF9; }
.woa-dropdown.wpk tr.woa-qual-no > td { background-color: #FEF6F6; }
.woa-dropdown.wpk tr.woa-qual-ok > td:first-child { box-shadow: inset 3px 0 0 #22C55E; }
.woa-dropdown.wpk tr.woa-qual-no > td:first-child { box-shadow: inset 3px 0 0 #F87171; }
.woa-dropdown.wpk tr.woa-qual-ok:hover > td { background-color: #ECFDF3; } .woa-dropdown.wpk tr.woa-qual-no:hover > td { background-color: #FDECEC; }
.woa-dropdown.wpk tr.table-primary > td { --bs-table-bg: color-mix(in srgb, var(--brand) 7%, white); background-color: color-mix(in srgb, var(--brand) 7%, white); }
.woa-dropdown.wpk tr.table-primary > td:first-child, .woa-dropdown.wpk tr.woa-current > td:first-child { box-shadow: inset 3px 0 0 var(--brand); }
.woa-dropdown.wpk tr.woa-pick-split td { background: #FAFAFA; color: var(--wp-muted); font-size: .78rem; font-weight: 600; text-transform: none; letter-spacing: 0; border-top: 1px solid var(--wp-line); padding: .45rem .6rem; }

/* ===== Own Equipment add / edit dialog (owner, 2026-10-14): `.oed-dialog` ===== */
.oed-dialog form.row { --bs-gutter-y: .85rem; }
.oed-dialog .oed-type { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .4rem; }
.oed-dialog .oed-type:empty { display: none; }
.oed-dialog .oed-tag { display: inline-flex; align-items: center; gap: .3rem; padding: 0 .55rem; border-radius: 999px; background: var(--wp-frame); border: 1px solid var(--wp-line); color: var(--wp-text); font-size: .78rem; line-height: 1.7; }
.oed-dialog .oed-tag i { color: var(--wp-muted); }
.oed-dialog .oed-active { padding: .6rem .75rem; border: 1px solid var(--wp-line); border-radius: 10px; background: #FAFAFA; }
.oed-dialog .oed-active .form-check { display: flex; align-items: center; gap: .65rem; padding-left: 0; }
.oed-dialog .oed-active .form-check-input { float: none; margin: 0; width: 2.4em; height: 1.3em; flex: none; }
.oed-dialog .oed-active .form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.oed-dialog .oed-active .form-check-label { display: flex; flex-direction: column; line-height: 1.25; }
.oed-dialog .oed-active .form-check-label b { color: var(--wp-ink); font-weight: 600; }
.oed-dialog .oed-active .form-check-label small { color: var(--wp-muted); font-size: .82rem; }
.oed-dialog .form-label { font-size: .9rem; font-weight: 500; color: var(--wp-muted); }
/* the Webpixels dialogs: after a refused Save only the fields to fix are marked (no green checks on every valid field) */
.wp-dialog .was-validated :is(.form-control, .form-select):valid { border-color: var(--wp-line); background-image: none; padding-right: .75rem; }
.wp-dialog .was-validated .form-select:valid { background-image: var(--bs-form-select-bg-img); padding-right: 2.25rem; }
.wp-dialog .was-validated :is(.form-control, .form-select):valid:focus { border-color: color-mix(in srgb, var(--brand) 55%, white); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent); }
.wp-dialog .was-validated .form-check-input:valid ~ .form-check-label { color: inherit; }
.wp-dialog .was-validated .form-check-input:valid:checked { background-color: var(--brand); border-color: var(--brand); }

/* ===== New / edit user dialog (owner, 2026-10-14; Administration → Users): `.usd-dialog` ===== */
.usd-dialog .usd-stack { display: flex; flex-direction: column; gap: .85rem; }
.usd-dialog .usd-av { flex: none; width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 600; font-size: 1rem; }
.usd-dialog .usd-av.empty { background: #fff; border: 1px solid var(--wp-line); color: var(--brand); font-size: 1.1rem; }
.usd-dialog .form-label { font-size: .9rem; font-weight: 500; color: var(--wp-muted); }
.usd-dialog .usd-icon-in { position: relative; }
.usd-dialog .usd-icon-in i { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--wp-faint); }
.usd-dialog .usd-icon-in .form-control { padding-left: 2.2rem; }
.usd-dialog #uf-pass { letter-spacing: .04em; }
.usd-dialog .input-group .btn-outline-secondary { --bs-btn-color: var(--wp-text); --bs-btn-border-color: var(--wp-line); --bs-btn-bg: #fff; --bs-btn-hover-bg: var(--wp-frame); --bs-btn-hover-color: var(--wp-ink); --bs-btn-hover-border-color: #D4D4D8; }
.usd-dialog .input-group .btn-outline-secondary .bi-magic { color: var(--brand); }
.usd-dialog .usd-strength { min-height: 1.2rem; margin-top: .3rem; font-size: .82rem; }
.usd-dialog .usd-strength span { display: inline-flex; align-items: center; gap: .3rem; }
.usd-dialog .usd-strength .ok { color: #15803D; } .usd-dialog .usd-strength .no { color: #C2410C; }
.usd-dialog .usd-sw { padding: .6rem .75rem; border: 1px solid var(--wp-line); border-radius: 10px; background: #FAFAFA; }
.usd-dialog .usd-sw + .usd-sw { margin-top: .5rem; }
.usd-dialog .usd-sw.d-none + .usd-sw { margin-top: 0; }
.usd-dialog .usd-sw .form-check { display: flex; align-items: center; gap: .65rem; padding-left: 0; }
.usd-dialog .usd-sw .form-check-input { float: none; margin: 0; width: 2.4em; height: 1.3em; flex: none; }
.usd-dialog .usd-sw .form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.usd-dialog .usd-sw .form-check-label { display: flex; flex-direction: column; line-height: 1.25; }
.usd-dialog .usd-sw .form-check-label b { color: var(--wp-ink); font-weight: 600; }
.usd-dialog .usd-sw .form-check-label small { color: var(--wp-muted); font-size: .82rem; }

/* ===== Affectations — work order cards (owner, 2026-10-14, after his mockup "Work order card — redesign"): `.woc-*` ===== */
.woc-toolbar, .woc-list { --wp-frame: #F4F4F5; --wp-line: #E4E4E7; --wp-line-2: #F1F1F3; --wp-ink: #18181B; --wp-text: #3F3F46; --wp-muted: #71717A; --wp-faint: #A1A1AA; }
.woc-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: .9rem; }
.woc-search { position: relative; flex: 0 1 26rem; min-width: 14rem; }
.woc-search i { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: var(--wp-faint); }
.woc-search .form-control { padding-left: 2.3rem; border-radius: 10px; border-color: var(--wp-line); background: #fff; }
.woc-filters { display: flex; gap: .4rem; flex-wrap: wrap; }
.woc-fchip { padding: .25rem .8rem; border-radius: 999px; border: 1px solid var(--wp-line); background: #fff; color: var(--wp-text); font-weight: 500; font-size: .9rem; }
.woc-fchip:hover { background: var(--wp-frame); }
.woc-fchip.on { background: var(--wp-frame); border-color: #D4D4D8; color: var(--wp-ink); font-weight: 600; }
.woc-fchip.attention.on { background: #FEF3C7; border-color: #FCD34D; color: #92400E; }
.woc-fchip.sms.on { background: color-mix(in srgb, var(--brand) 10%, white); border-color: color-mix(in srgb, var(--brand) 35%, white); color: color-mix(in srgb, var(--brand) 85%, black); }
.woc-toolbar #woa-sms-day { border-radius: 10px; font-weight: 600; }
.woc-list { display: flex; flex-direction: column; gap: .8rem; }
.woc-empty { padding: 2rem; text-align: center; color: var(--wp-muted); background: #fff; border: 1px solid var(--wp-line); border-radius: 14px; }
.woc { background: #fff; border: 1px solid var(--wp-line); border-radius: 14px; box-shadow: 0 1px 2px rgba(24, 24, 27, .05); color: var(--wp-text); }
/* closed: one line */
.woc.closed:hover { border-color: #D4D4D8; box-shadow: 0 2px 8px -3px rgba(24, 24, 27, .12); }
.woc-line { display: flex; align-items: center; gap: 1.1rem; padding: .85rem 1.1rem; cursor: pointer; min-width: 0; }
.woc-chev { color: var(--wp-muted); }
.woc-id { display: flex; flex-direction: column; line-height: 1.25; min-width: 9rem; }
.woc-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; font-size: 1.05rem; color: var(--wp-ink); letter-spacing: .01em; }
.woc-id small { color: var(--wp-muted); font-size: .82rem; }
.woc-time { font-weight: 600; color: var(--wp-ink); white-space: nowrap; }
.woc-addr1 { color: var(--wp-text); min-width: 0; flex: 1 1 auto; }
.woc-right { display: flex; align-items: center; gap: .45rem; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.woc-faces { display: inline-flex; }
.woc-faces .woc-av + .woc-av { margin-left: -.35rem; }
/* open: header */
.woc-head { display: grid; grid-template-columns: auto minmax(12rem, 1.3fr) auto minmax(12rem, 1.6fr) auto; gap: .5rem 1.4rem; align-items: start; padding: 1rem 1.1rem .4rem; cursor: pointer; }
@media (max-width: 1199.98px) { .woc-head { grid-template-columns: auto 1fr auto; } .woc-where, .woc-actions { grid-column: 2 / -1; } }
.woc-chev-btn { border: 0; background: none; color: var(--wp-muted); padding: .15rem .2rem; border-radius: 6px; }
.woc-chev-btn:hover { background: var(--wp-frame); }
.woc-title-1 { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.woc-title-1 .woc-code { font-size: 1.25rem; }
.woc-sub { color: var(--wp-muted); font-size: .88rem; margin-top: .15rem; }
.woc-onsite { color: var(--wp-muted); font-size: .82rem; }
.woc-when { display: flex; flex-direction: column; line-height: 1.25; white-space: nowrap; }
.woc-when b { font-size: 1.1rem; color: var(--wp-ink); }
.woc-when small { color: var(--wp-muted); }
.woc-where { display: grid; gap: .1rem; font-size: .95rem; color: var(--wp-ink); }
.woc-where span { display: inline-block; width: 2.6rem; color: var(--wp-muted); font-size: .85rem; }
.woc-actions { display: flex; gap: .4rem; align-items: center; justify-content: flex-end; }
.woc-actions .btn { border-radius: 8px; --bs-btn-bg: #fff; --bs-btn-border-color: var(--wp-line); --bs-btn-color: var(--wp-text); --bs-btn-hover-bg: var(--wp-frame); --bs-btn-hover-border-color: #D4D4D8; --bs-btn-hover-color: var(--wp-ink); }
.woc-menu { border-radius: 10px; border-color: var(--wp-line); padding: .3rem; box-shadow: 0 12px 28px -10px rgba(24, 24, 27, .22); }
.woc-menu .dropdown-item { display: flex; align-items: center; gap: .55rem; border-radius: 7px; padding: .45rem .6rem; font-size: .92rem; }
.woc-menu .dropdown-item i { color: var(--wp-muted); }
.woc-n { margin-left: auto; padding: 0 .45rem; border-radius: 999px; background: var(--brand); color: #fff; font-size: .75rem; font-weight: 600; }
.woc-tag { display: inline-flex; align-items: center; gap: .25rem; padding: 0 .5rem; border-radius: 6px; background: var(--wp-frame); border: 1px solid var(--wp-line); color: var(--wp-text); font-size: .78rem; font-weight: 500; line-height: 1.7; white-space: nowrap; }
.woc-tag.brand { background: color-mix(in srgb, var(--brand) 9%, white); border-color: color-mix(in srgb, var(--brand) 22%, white); color: color-mix(in srgb, var(--brand) 85%, black); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.woc-tag:is(.st-ready, .st-in_progress) { background: #DCFCE7; border-color: #BBF7D0; color: #15803D; }
.woc-tag.st-on_hold { background: #FEF3C7; border-color: #FDE68A; color: #92400E; }
/* chips */
.woc-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; padding: .35rem 1.1rem .8rem 3.3rem; }
.woc-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .7rem; border-radius: 999px; border: 1px solid var(--wp-line); background: var(--wp-frame); color: var(--wp-text); font-size: .86rem; font-weight: 500; white-space: nowrap; }
.woc-chip.ok { background: #F0FDF4; border-color: #BBF7D0; color: #15803D; }
.woc-chip.warn { background: #FFFBEB; border-color: #FCD34D; color: #92400E; }
.woc-chip.bad { background: #FEF2F2; border-color: #FECACA; color: #B91C1C; }
.woc-sep { width: 1px; height: 1.3rem; background: var(--wp-line); margin: 0 .2rem; }
.woc-dnote { display: flex; gap: .7rem; margin: 0 1.1rem .8rem 3.3rem; padding: .7rem .9rem; border: 1px solid #FCD34D; border-radius: 10px; background: #FFFBEB; color: var(--wp-ink); }
.woc-dnote > i { color: #B45309; margin-top: .1rem; }
.woc-dnote b { display: block; color: #92400E; font-size: .88rem; }
.woc-details { width: calc(100% - 4.4rem); margin: 0 1.1rem .7rem 3.3rem; }
.woc-details td { padding: 0; border: 0; }
.woc-mats { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 1.1rem .8rem 3.3rem; }
/* the slots */
.woc-slots { border-top: 1px solid var(--wp-line); }
.woc-table { --bs-table-bg: transparent; margin: 0; }
.woc-table thead th { background: #FAFAFA; color: var(--wp-muted); font-weight: 500; font-size: .85rem; padding: .55rem .9rem; border-bottom: 1px solid var(--wp-line); white-space: nowrap; }
.woc-table tbody td { padding: .55rem .9rem; vertical-align: middle; border-color: var(--wp-line-2); }
.woc-table tr.woc-sec td { background: #fff; padding: .7rem .9rem .45rem; font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--wp-muted); border-bottom: 1px solid var(--wp-line-2); }
.woc-table tr.woc-sec i { margin-right: .5rem; }
.woc-sec-n { margin-left: .5rem; text-transform: none; letter-spacing: 0; color: #15803D; font-weight: 600; }
.woc-sec-n.warn { color: #B45309; margin-left: .35rem; }
.woc-slot b { color: var(--wp-ink); font-weight: 600; }
.woc-muted { color: var(--wp-muted); font-size: .86rem; }
.woc-req { display: inline-flex; align-items: center; gap: .25rem; margin-top: .15rem; font-size: .76rem; color: #15803D; }
.woc-unassigned { color: #B45309; font-size: .82rem; font-weight: 500; }
.woc-table tr.woc-row.empty:has(td .woc-pick.empty[data-pick="equipment"]) td { background: #FFFBEB; }
.woc-table tr.woc-row.empty:has(td .woc-pick.empty[data-pick="equipment"]) td:first-child { box-shadow: inset 3px 0 0 #F59E0B; }
/* the "Assigned to" box */
.woc-pick { display: flex; align-items: center; gap: .6rem; width: 100%; min-height: 2.75rem; padding: .3rem .65rem; text-align: left; background: #fff; border: 1px solid var(--wp-line); border-radius: 10px; color: var(--wp-ink); font-family: inherit; }
.woc-pick:not(.static):not(:disabled):hover { border-color: #D4D4D8; box-shadow: 0 1px 3px rgba(24, 24, 27, .08); }
.woc-pick.open { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent); }
.woc-pick.empty { border-style: dashed; border-color: #FBBF24; background: #FFFDF5; color: #B45309; font-weight: 500; }
.woc-pick.empty[data-pick="person"] { border-color: #D4D4D8; background: #FAFAFA; color: var(--wp-muted); }
.woc-pick-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; flex: 1; }
.woc-pick-t b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.woc-pick-t small { color: var(--wp-muted); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.woc-pick-t small.busy { color: #C2410C; }
.woc-caret { color: var(--wp-faint); font-size: .8rem; }
.woc-pick.static { cursor: default; }
.woc-av { flex: none; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--brand) 12%, white); color: color-mix(in srgb, var(--brand) 85%, black); font-size: .74rem; font-weight: 600; }
.woc-av.sup { border-radius: 8px; background: #FFF4EA; color: #C2410C; }
.woc-av.veh { border-radius: 8px; background: var(--wp-frame); color: var(--wp-text); }
.woc-av.sm { width: 1.6rem; height: 1.6rem; font-size: .66rem; }
.woc-av.xs { width: 1.7rem; height: 1.7rem; font-size: .64rem; border: 2px solid #fff; }
.woc-av.xs.conf-confirmed { background: #DCFCE7; color: #15803D; } .woc-av.xs.conf-rejected { background: #FEE2E2; color: #B91C1C; } .woc-av.xs.conf-pending { background: #FEF3C7; color: #92400E; }
.woc-av.more { background: var(--wp-frame); color: var(--wp-muted); }
/* lead star, vehicle chip, icons, note */
.woc-star { cursor: pointer; color: #D4D4D8; font-size: 1.1rem; margin: 0; }
.woc-star:hover { color: #FBBF24; } .woc-star.on { color: #F59E0B; } .woc-star.off { cursor: default; color: var(--wp-line); }
.woc-crew { display: inline-flex; align-items: center; gap: .4rem; max-width: 100%; padding: .3rem .6rem; border-radius: 8px; border: 1px dashed #D4D4D8; color: var(--wp-muted); font-size: .86rem; cursor: pointer; margin: 0; white-space: nowrap; }
.woc-crew.on { border-style: solid; border-color: var(--wp-line); background: var(--wp-frame); color: var(--wp-ink); font-weight: 500; }
.woc-crew span { overflow: hidden; text-overflow: ellipsis; }
.woc-crew-sel { border-radius: 8px; border-color: var(--wp-line); }
.woc-op { display: flex; align-items: center; gap: .3rem; margin-top: .2rem; font-size: .78rem; color: var(--wp-muted); }
.woc-ico { border: 0; background: none; color: var(--wp-muted); padding: .25rem .35rem; border-radius: 6px; line-height: 1; }
.woc-ico:hover { background: var(--wp-frame); color: var(--wp-ink); }
.woc-ico.on { color: var(--brand); }
.woc-ico.danger { color: #DC2626; } .woc-ico.danger:hover { background: #FEF2F2; }
.woc-note { display: flex; align-items: center; gap: .5rem; margin-top: .35rem; }
.woc-note span { flex: none; font-size: .8rem; color: var(--wp-muted); }
.woc-note .form-control { border-radius: 8px; border-color: var(--wp-line); }
.woc-ext { display: inline-flex; align-items: center; gap: .3rem; margin: .3rem 0 0; font-size: .8rem; color: #B45309; }
.woc-ext.ok { color: #15803D; }
.woc-ext .form-check-input { margin: 0; }
/* supplier blocks with named workers */
.woc-table tr.woc-block > td { vertical-align: top; }
.woc-qty { display: flex; align-items: center; gap: .5rem; margin-top: .55rem; font-size: .86rem; color: var(--wp-muted); }
.woc-qty .form-control { width: 4.5rem; border-radius: 8px; border-color: var(--wp-line); }
.woc-named { margin-top: .6rem; padding: .55rem .7rem; border: 1px solid var(--wp-line); border-radius: 10px; background: #FAFAFA; max-width: 28rem; }
.woc-named-t { font-size: .82rem; color: var(--wp-muted); margin-bottom: .3rem; }
.woc-named-row { display: flex; align-items: center; gap: .5rem; min-height: 1.9rem; }
.woc-named-n { width: 1rem; color: var(--wp-muted); font-size: .82rem; text-align: right; }
.woc-named-name { font-weight: 500; color: var(--wp-ink); }
.woc-named-row .woc-crew { padding: .1rem .45rem; font-size: .76rem; }
.woc-named-row .woc-ico { margin-left: auto; }
.woc-name-btn { border: 0; background: none; padding: 0; color: var(--brand); font-weight: 500; font-size: .9rem; display: inline-flex; align-items: center; gap: .25rem; }
.woc-name-btn:hover { text-decoration: underline; }
/* add an extra person */
.woc-table tr.woc-add td { background: #FCFCFD; border-bottom: 0; }
.woc-table tr.woc-add .woc-pick.empty { border-color: #D4D4D8; }
.woc-table tr.woc-add .woc-note { margin-top: 0; }
.woc-table tr.flash > td { animation: woc-flash 1.6s ease-out 1; }
@keyframes woc-flash { from { background: color-mix(in srgb, var(--brand) 18%, white); } }
.woa-lite .woc-actions [data-wo-report], .woa-lite .woc-ext { display: none !important; }
.woc-table tr.woc-block .woc-pick.static { max-width: 28rem; }