/* ===== 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.mx-st-lancer { 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; }