:root {
  --brand: #0d6efd;
  --sidebar-width: 19.5rem; /* 312px at 100%, 250px with the 80% base below (×1.25, owner 2026-10-09) */
  --sidebar-bg: #0F172A;
}

/* Bootstrap primary follows the white-label brand color */
.btn-primary { --bs-btn-disabled-bg: var(--brand); --bs-btn-disabled-border-color: var(--brand); --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-hover-bg: color-mix(in srgb, var(--brand) 85%, black); --bs-btn-hover-border-color: color-mix(in srgb, var(--brand) 85%, black); --bs-btn-active-bg: color-mix(in srgb, var(--brand) 80%, black); }
.btn-outline-primary { --bs-btn-color: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-hover-bg: var(--brand); --bs-btn-hover-border-color: var(--brand); }
.text-brand { color: var(--brand) !important; }
.bg-brand { background-color: var(--brand) !important; }

/* Overall size: 80% of the browser default (owner, 2026-09-25) so more columns fit. Bootstrap sizes text, padding and controls in rem,
   so everything scales together. Only the dashboard (index.html) loads this file: the SMS pages (confirm, time) keep their phone size. */
html { font-size: 80%; }
body { background: #f5f6f8; }

/* Login */
.login-wrapper { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.login-card { width: 100%; max-width: 400px; border: 0; }

.brand-mark {
  width: 44px; height: 44px; border-radius: 10px; flex: 0 0 44px;
  background: var(--brand); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 1.4rem; overflow: hidden;
}
.brand-mark img { width: 100%; height: 100%; object-fit: contain; padding: 4px; background: #fff; border-radius: 10px; }
.login-logo { width: 240px; max-width: 80%; height: auto; }
.brand-platform { display: block; flex: 1 1 auto; width: 100%; line-height: 0; }
.brand-platform img { width: 100%; height: auto; display: block; border-radius: .5rem; }

/* Shell */
.app-shell { display: flex; min-height: 100vh; }
.sidebar {
  width: var(--sidebar-width); flex: 0 0 var(--sidebar-width);
  background: var(--sidebar-bg); color: #fff;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.sidebar-brand { display: flex; align-items: center; gap: .75rem; padding: .9rem 1rem; border-bottom: 1px solid rgba(255,255,255,.1); min-height: 76px; }
.sidebar-brand .brand-text { min-width: 0; }
.sidebar-brand .app-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-nav { padding: .75rem .75rem; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; flex-wrap: nowrap; scrollbar-width: thin; }
.sidebar-nav .nav-link span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-nav .nav-link { color: rgba(255,255,255,.75); border-radius: .5rem; padding: .6rem .85rem; display: flex; align-items: center; gap: .65rem; }
.sidebar-nav .nav-link:hover { color: #fff; background: rgba(255,255,255,.06); }
.sidebar-nav .nav-link.active { color: #fff; background: var(--brand); }
.sidebar-nav .nav-section { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.4); padding: .9rem .85rem .3rem; }
.sidebar-nav .nav-subsection { font-size: .65rem; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.35); padding: .55rem .85rem .15rem 1.6rem; }
.sidebar-nav .nav-group-toggle { display: flex; align-items: center; justify-content: space-between; cursor: pointer; user-select: none; border-radius: .4rem; }
.sidebar-nav .nav-group-toggle:hover { color: rgba(255,255,255,.7); background: rgba(255,255,255,.04); }
.sidebar-nav .nav-group-toggle .bi { transition: transform .15s ease; font-size: .65rem; }
.sidebar-nav .nav-group-toggle.collapsed .bi { transform: rotate(-90deg); }
.sidebar-nav .nav-sub-item .nav-link { padding-left: 1.6rem; }
/* child item (route `parent`): indented under its parent with a small tree mark, e.g. Supplier rates under Suppliers */
.sidebar-nav .nav-child-item .nav-link { padding-left: 2.2rem; position: relative; font-size: .9em; }
.sidebar-nav .nav-child-item .nav-link::before { content: ''; position: absolute; left: 1.2rem; top: 0; height: 55%; width: .55rem; border-left: 1px solid rgba(255,255,255,.3); border-bottom: 1px solid rgba(255,255,255,.3); border-bottom-left-radius: .25rem; }
.sidebar-nav .nav-sub-item.nav-child-item .nav-link { padding-left: 2.8rem; }
.sidebar-nav .nav-sub-item.nav-child-item .nav-link::before { left: 1.8rem; }
.sidebar-nav .nav-section-toggle { display: flex; align-items: center; justify-content: space-between; cursor: pointer; user-select: none; border-radius: .4rem; }
.sidebar-nav .nav-section-toggle:hover { color: rgba(255,255,255,.75); background: rgba(255,255,255,.04); }
.sidebar-nav .nav-section-toggle .bi { transition: transform .15s ease; font-size: .75rem; }
.sidebar-nav .nav-section-toggle.collapsed .bi { transform: rotate(-90deg); }
.sidebar-footer { padding: 1rem 1.25rem; border-top: 1px solid rgba(255,255,255,.1); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { min-height: 60px; flex-wrap: nowrap; }
.topbar .navbar-brand { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar .ms-auto { flex: 0 0 auto; }
.content { flex: 1; }

/* Mobile sidebar */
@media (max-width: 991.98px) {
  .sidebar { position: fixed; left: 0; top: 0; z-index: 1040; transform: translateX(-100%); transition: transform .2s ease; }
  .sidebar.show { transform: translateX(0); box-shadow: 0 0 0 100vmax rgba(0,0,0,.4); }
}

/* Inline-editable tables */
.table-inline td { padding: .35rem .5rem; }
.table-inline .form-control-sm { min-width: 7rem; }
.table-inline th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.table-inline th.sortable:hover { background: rgba(0,0,0,.04); }
.table-inline th.sortable .bi { font-size: .75rem; opacity: .5; }
.table-inline th.sortable.sorted .bi { opacity: 1; color: var(--brand); }
.table-inline tr.row-add { background: color-mix(in srgb, var(--brand) 6%, white); }
.table-inline tr.row-editing td { background: #fff8e1; }
.table-inline th.row-toggle, .table-inline td.row-toggle { width: 2rem; padding-right: 0; }
.table-inline.table-wide th { white-space: nowrap; }
.sup-section { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: #6c757d; border-bottom: 1px solid #e5e7eb; padding-bottom: .2rem; }
.sup-inactive td, .row-inactive td { opacity: .55; } .sup-inactive td.actions, .row-inactive td.actions { opacity: 1; } /* deactivated supplier / client (kept, not offered anywhere) */
.sup-form .form-label { color: #495057; }
.table-inline.table-wide .form-control-sm { min-width: 6.5rem; }
.table-inline tr.row-open td { border-bottom-color: transparent; }
.table-inline tr.row-detail td { background: #f8f9fa; padding: .75rem 1rem 1rem 2.5rem; }
.table-inline tr.row-add-detail td { background: color-mix(in srgb, var(--brand) 6%, white); }
.cp-wrap { max-height: 24rem; overflow-y: auto; background: #fff; border: 1px solid #e5e7eb; border-radius: .5rem; }
.cp-table thead th { position: sticky; top: 0; background: #f1f3f5; z-index: 1; }
.cp-table tr.priced td:first-child { border-left: 3px solid #198754; }
.cp-table tr.saving td { opacity: .6; }
.cp-table .cp-price input { max-width: 7.5rem; }
.skill-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .4rem .9rem; }
.skill-item { display: flex; align-items: flex-start; gap: .6rem; padding: .55rem .7rem; min-height: 3.6rem; border: 1px solid #e5e7eb; border-radius: .5rem; background: #fff; cursor: pointer; margin: 0; }
.skill-item .form-check-input { margin-top: .15rem; flex: 0 0 auto; }
.skill-item .skill-body { flex: 1; display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.skill-item.on { border-color: #198754; background: #eaf6ee; }            /* selected: green */
.skill-item.on.expired { border-color: #dc3545; background: #fdecee; }   /* expired: red */
.skill-item.on.soon { border-color: #fd7e14; background: #fff3e6; }      /* expiring within a month: orange */
.skill-item .form-control.is-warning { border-color: #fd7e14; }
.skill-item .skill-name { line-height: 1.2; font-weight: 500; }
.skill-item .skill-exp { display: flex; align-items: center; gap: .45rem; flex-wrap: nowrap; }
.skill-item .skill-exp > .small { white-space: nowrap; }
.skill-item .skill-exp input { width: 8.6rem; flex: 0 0 auto; padding: .15rem .35rem; font-size: .8rem; }
.skill-item .skill-exp .badge { white-space: nowrap; }
.table-inline td.actions { white-space: nowrap; text-align: right; width: 1%; }

.stat-card .stat-value { font-size: 1.8rem; font-weight: 600; }
.table > :not(caption) > * > * { vertical-align: middle; }
.color-dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); vertical-align: -2px; }

/* Assignment sub-rows under each job (Assignations page) */
tr.asg-subrow > td { background: #f8f9fb; padding: .5rem .75rem 1rem 2.5rem; border-top: 0; }
.asg-table { background: #fff; border: 1px solid var(--bs-border-color); border-radius: .5rem; overflow: hidden; }
.asg-table table { margin: 0; }
.asg-table thead th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: #6c757d; background: #f1f3f5; }
.asg-table td { padding: .3rem .5rem; vertical-align: middle; }
.asg-table .form-select-sm, .asg-table .form-control-sm { min-width: 7rem; }
.asg-table tr.row-add td { background: color-mix(in srgb, var(--brand) 6%, white); }
.asg-table tr.row-editing td { background: #fff8e1; }
.asg-table tr.row-slot-head td, .asg-table tr.row-extra-head td { background: #f5f6f8; }
.asg-table tr.row-extra-head td { border-top: 2px solid #dee2e6; }
.asg-table tr.row-slot-empty td:first-child { border-left: 3px dashed #adb5bd; }
.asg-table tr.row-slot-empty.saving td { opacity: .6; }
.asg-table tr.row-eq-head td { background: #f5f6f8; border-top: 2px solid #dee2e6; }
.asg-table tr.row-eq td { background: #fafbfc; }
.asg-table tr.row-eq-empty td:first-child { border-left: 3px dashed #adb5bd; }
.asg-table tr.row-eq.saving td { opacity: .6; }
.asg-table td.actions { white-space: nowrap; text-align: right; width: 1%; }
.asg-toggle .bi { transition: transform .15s ease; }
.asg-toggle.collapsed .bi { transform: rotate(-90deg); }
.asg-table option.busy { color: #a86b00; }

/* SMS templates */
.st-tabs { flex-wrap: wrap; }
.st-tabs .nav-link { color: #495057; }
.st-tabs .nav-link.active { font-weight: 600; }
.st-dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--brand); vertical-align: middle; margin-left: .25rem; }
.st-card { margin-bottom: 0; }
.st-card { border: 1px solid var(--bs-border-color); border-radius: .6rem; background: #fff; margin-bottom: 1rem; }
.st-head { padding: .75rem 1rem; border-bottom: 1px solid var(--bs-border-color); }
.st-body { padding: 1rem; }
.st-vars .badge { cursor: pointer; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 500; background: #eef3ff; color: #1d3f8a; border: 1px solid #b6c8f5; }
.st-vars .badge:hover { background: #dbe6ff; }
textarea.form-control.st-textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .95rem; line-height: 1.5; min-height: 260px; resize: vertical; }
.st-preview { background: #f1f3f5; border-radius: .5rem; padding: .6rem .8rem; font-size: .85rem; white-space: pre-wrap; min-height: 2.5rem; }
.st-preview .bubble { background: #d1e7dd; border-radius: 1rem 1rem 1rem .25rem; padding: .5rem .75rem; display: inline-block; max-width: 100%; }

/* Supervision roster */
.sv-job { border: 1px solid var(--bs-border-color); border-radius: .6rem; background: #fff; margin-bottom: 1rem; }
.sv-job-head { padding: .75rem 1rem; border-bottom: 1px solid var(--bs-border-color); display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: center; cursor: pointer; user-select: none; }
.sv-job.collapsed .sv-job-head { border-bottom: 0; }
.sv-job .sv-chevron { transition: transform .15s ease; }
.sv-job.collapsed .sv-chevron { transform: rotate(-90deg); }
@media (max-width: 767.98px) { .sv-job-head { gap: .25rem .75rem; padding: .6rem .75rem; } .sv-table { font-size: .8rem; } }
.sv-table { font-size: .85rem; }
.cb-wrap { position: relative; }
.wo-project-row { cursor: pointer; }
.wo-panel td { background: #f8f9fa; padding: .75rem 1rem 1rem 1rem; }
.wo-table { background: #fff; }
.wo-list { max-height: 15rem; overflow-y: auto; background: #fff; }
.wo-item { display: flex; align-items: center; gap: .75rem; padding: .3rem .75rem; }
.wo-item.on { background: #eaf6ee; }
.wo-item .wo-item-name { flex: 1; min-width: 0; }
.wo-item .wo-item-ctl { display: inline-flex; align-items: center; gap: .25rem; }
.wo-item .wo-item-qty { width: 4.2rem; text-align: center; padding: .15rem .3rem; }
.wo-item .wo-item-ctl .btn { padding: .1rem .45rem; line-height: 1.2; }
.cb-wrap .cb-list { position: absolute; left: 0; right: 0; top: 100%; z-index: 1090; max-height: 14rem; overflow-y: auto; background: #fff; }
.sv-suggest { position: fixed; z-index: 1080; min-width: 22rem; max-width: 95vw; max-height: 16rem; overflow-y: auto; font-size: .85rem; }
.sv-suggest-item { display: grid; grid-template-columns: 7.5rem minmax(6rem, 1fr) auto; gap: .6rem; align-items: center; white-space: nowrap; }
.sv-suggest-item .sv-sg-phone { font-variant-numeric: tabular-nums; color: #6c757d; }
.sv-suggest-item .sv-sg-company { color: #6c757d; overflow: hidden; text-overflow: ellipsis; }
.sv-suggest-item.active, .sv-suggest-item:hover { background: color-mix(in srgb, var(--brand) 12%, white); color: inherit; }
.rv-star { color: #f5b301; }
.rv-stars.small .rv-star { font-size: .8rem; }
.rv-pick .rv-star { cursor: pointer; font-size: 1rem; padding: 0 1px; }
.rv-pick .rv-star.bi-star { color: #c9ccd1; }
.rv-pick .rv-star:hover { transform: scale(1.15); }
.rv-clear { color: #adb5bd; cursor: pointer; }
.rv-comment-input { min-width: 12rem; }
.rv-comment { white-space: pre-wrap; }
.sv-table th { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: #6c757d; background: #f1f3f5; white-space: nowrap; }
.sv-table td { padding: .25rem .35rem; vertical-align: middle; }
.sv-table .form-control-sm, .sv-table .form-select-sm { min-width: 5.2rem; font-size: .8rem; padding: .2rem .35rem; }
.sv-table input[type=time].form-control-sm { min-width: 6.4rem; }
.sv-table input.money { width: 5.5rem; text-align: right; }
.sv-table input.mins { width: 4.5rem; text-align: right; }
.sv-table .input-group { flex-wrap: nowrap; min-width: 7rem; }
.sv-table .input-group .input-group-text { padding: .2rem .4rem; font-size: .75rem; }
.sv-table tr.locked td { background: #f8f9fa; color: #6c757d; }
.sv-table tr.locked .form-control, .sv-table tr.locked .form-select { background: #eef0f2; }
.sv-table tr.row-add td { background: color-mix(in srgb, var(--brand) 6%, white); }
.sv-table td.total { font-weight: 600; text-align: right; white-space: nowrap; }
.sv-table tr.saving td { opacity: .7; }
.sv-known { color: #198754; font-size: .75rem; }

/* Row highlight after navigating from the logs */
tr.flash > td { animation: asg-flash 2.2s ease-out; }
.entity-link { text-decoration: none; }
.entity-link:hover { text-decoration: underline; }

/* Audit logs */
.log-row { cursor: pointer; }
.log-row.open td { border-bottom: 0; }
.log-details td { background: #f8f9fb; padding: .5rem 1rem 1rem 2.5rem; }
.log-json { background: #0F172A; color: #e2e8f0; border-radius: .4rem; padding: .6rem .8rem; font-size: .75rem; max-height: 320px; overflow: auto; margin: 0; white-space: pre; }
.log-json .k { color: #93c5fd; } .log-json .s { color: #fcd34d; } .log-json .n { color: #86efac; } .log-json .b { color: #f9a8d4; } .log-json .z { color: #94a3b8; }
.log-action { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .75rem; }
.log-action.create { background: #d1e7dd; color: #0f5132; } .log-action.update { background: #cfe2ff; color: #084298; } .log-action.delete { background: #f8d7da; color: #842029; }
.log-action.auth { background: #e2e3e5; color: #41464b; } .log-action.other { background: #fff3cd; color: #664d03; }
.log-row.flash td { animation: asg-flash 1.6s ease-out; }

/* Live update flash */
@keyframes asg-flash { 0% { box-shadow: inset 0 0 0 999px rgba(13,110,253,.18); } 100% { box-shadow: none; } }
.asg-table tr.flash td { animation: asg-flash 1.6s ease-out; }
.live-dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: #adb5bd; margin-right: .3rem; }
.live-dot.on { background: #198754; box-shadow: 0 0 0 3px rgba(25,135,84,.2); }

/* Confirmation colours on assignment lines */
.asg-table tr.conf-confirmed td { background: #e6f4ea; }
.asg-table tr.conf-rejected td { background: #fbe9e9; }
.asg-table tr.conf-pending td { background: #fff8e1; }
.asg-badges .badge.conf-confirmed { background: #d1e7dd; border-color: #a3cfbb; color: #0f5132; }
.asg-badges .badge.conf-rejected { background: #f8d7da; border-color: #f1aeb5; color: #842029; text-decoration: line-through; }
.asg-badges .badge.conf-pending { background: #fff3cd; border-color: #ffe69c; color: #664d03; }
.conf-dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; margin-right: .3rem; vertical-align: 1px; }
.conf-dot.confirmed { background: #198754; } .conf-dot.rejected { background: #dc3545; } .conf-dot.pending { background: #ffc107; } .conf-dot.none { background: #ced4da; }

/* Assignment badges + progress */
.asg-badges .badge { background: #f1f3f5; color: #212529; border: 1px solid #dee2e6; font-weight: 500; }
.asg-progress { font-size: .75rem; font-weight: 600; }
.asg-progress.complete { color: #198754; } .asg-progress.partial { color: #a86b00; } .asg-progress.empty { color: #6c757d; }
.asg-group { border: 1px solid var(--bs-border-color); border-radius: .5rem; padding: .75rem; }
.asg-group + .asg-group { margin-top: .75rem; }
.asg-group .form-select option.busy { color: #a86b00; }

/* Requirement badges in the jobs list */
.req-badges { display: flex; flex-wrap: wrap; gap: .25rem; max-width: 260px; }
.req-badges .badge { font-weight: 500; background: color-mix(in srgb, var(--brand) 12%, white); color: #212529; border: 1px solid color-mix(in srgb, var(--brand) 35%, white); }
.req-badges .badge .qty { font-weight: 700; color: var(--brand); }
.req-badges.equip .badge { background: #eef3ff; border-color: #b6c8f5; } .req-badges.equip .badge .qty { color: #3457b2; }
.req-badges.mat .badge { background: #fff6e5; border-color: #f5d49a; } .req-badges.mat .badge .qty { color: #a86b00; }

/* Job days table */
.job-days td { padding: .25rem .35rem; vertical-align: middle; }
.job-days input[type=time] { min-width: 7rem; }
.job-days input[type=date] { min-width: 10rem; }

/* Job days table */
.job-days td { padding: .25rem .35rem; vertical-align: middle; }
.job-days input[type=time] { min-width: 7rem; }
.job-days input[type=date] { min-width: 10rem; }

/* Job items: three side-by-side quantity tables */
.job-items-table { max-height: 300px; overflow-y: auto; border: 1px solid var(--bs-border-color); border-radius: .375rem; }
.job-items-table table { margin-bottom: 0; }
.job-items-table thead th { position: sticky; top: 0; background: var(--bs-tertiary-bg, #f8f9fa); z-index: 1; }
.job-items-table td { padding: .25rem .5rem; }
.job-items-table .qty { width: 5.5rem; text-align: right; }
.job-items-table tr.has-qty td { background: color-mix(in srgb, var(--brand) 10%, white); font-weight: 500; }
.job-items-table tr.missing td { color: #b02a37; font-style: italic; }

/* Linear calendar */
.linear-calendar { background: #fff; border: 1px solid var(--bs-border-color); border-radius: .5rem; padding: .75rem; }
.lc-head { display: flex; align-items: center; gap: .25rem; margin-bottom: .6rem; flex-wrap: wrap; }
.lc-strip { display: flex; gap: .25rem; overflow-x: auto; padding-bottom: .25rem; scroll-behavior: smooth; scrollbar-width: thin; }
.lc-cell { flex: 0 0 auto; width: 3.1rem; border: 1px solid transparent; border-radius: .5rem; background: #f5f6f8; padding: .35rem .2rem; display: flex; flex-direction: column; align-items: center; line-height: 1.15; color: inherit; }
.lc-cell-wide { width: 5rem; }
.lc-cell:hover { background: #e9ecef; }
.lc-cell.weekend { background: #eef0f3; color: #6c757d; }
.lc-cell.today { border-color: var(--brand); }
.lc-cell.selected { background: var(--brand); color: #fff; }
.lc-cell.selected .lc-sub, .lc-cell.selected .lc-count { color: rgba(255,255,255,.85); }
.lc-sub { font-size: .65rem; text-transform: uppercase; color: #6c757d; }
.lc-main { font-size: 1.05rem; font-weight: 600; }
.lc-count { font-size: .65rem; min-width: 1.2rem; text-align: center; border-radius: 1rem; background: rgba(0,0,0,.08); color: #495057; margin-top: .15rem; padding: 0 .3rem; }
.lc-cell.selected .lc-count { background: rgba(255,255,255,.25); }
.lc-cell .invisible { visibility: hidden; }
.lc-head [data-mode].active { background: var(--brand); border-color: var(--brand); color: #fff; }

/* Project documents (Projects → Documents): drop zone, upload queue, icon grid */
.pd-drop { max-width: 46rem; /* ≈ 590 px at the 80 % size: buttons stay close on wide screens (owner, 2026-09-26) */ display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 1rem 1.25rem; border: 2px dashed #adb5bd; border-radius: .6rem; background: #fff; transition: background .15s ease, border-color .15s ease; }
.pd-drop.over { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, white); }
.pd-drop-icon { font-size: 2rem; color: var(--brand); line-height: 1; }
.pd-drop-text { flex: 1 1 calc(100% - 4rem); } /* icon + text on the first row, the selects side by side below */
.pd-drop-type { flex: 1 1 12rem; } /* the two selects share the row under the text */
.pd-q { display: flex; align-items: center; gap: .75rem; padding: .45rem .75rem; }
.pd-q-main { flex: 1 1 12rem; min-width: 0; }
.pd-q-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.pd-q-type { flex: 0 0 13rem; width: 13rem; }
.pd-q-bar { flex: 0 0 9rem; height: .4rem; }
.pd-q-status { flex: 0 0 8rem; min-width: 0; }
.pd-q.error .pd-q-status { flex-basis: 14rem; }
@media (max-width: 767.98px) { .pd-q { flex-wrap: wrap; } .pd-q-type, .pd-q-bar { flex: 1 1 45%; } }
.pd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .75rem; }
.pd-empty { grid-column: 1 / -1; padding: 1.5rem; text-align: center; background: #fff; border: 1px solid #e5e7eb; border-radius: .5rem; }
.pd-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .75rem .6rem .6rem; background: #fff; border: 1px solid #e5e7eb; border-radius: .6rem; cursor: pointer; text-align: center; min-width: 0; }
.pd-tile:hover, .pd-tile:focus-visible { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 15%, transparent); outline: none; }
.pd-thumb { width: 100%; height: 5.5rem; display: flex; align-items: center; justify-content: center; border-radius: .4rem; background: #f8f9fa; overflow: hidden; }
.pd-thumb .bi { font-size: 3rem; line-height: 1; }
.pd-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pd-name { width: 100%; font-size: .85rem; font-weight: 500; line-height: 1.25; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pd-type .badge { font-weight: 500; max-width: 100%; white-space: normal; }
.pd-meta { font-size: .72rem; color: #6c757d; }
.pd-actions { position: absolute; top: .35rem; right: .35rem; display: flex; gap: .15rem; opacity: 0; transition: opacity .12s ease; }
.pd-tile:hover .pd-actions, .pd-tile:focus-within .pd-actions { opacity: 1; }
.pd-actions .btn { padding: .1rem .35rem; line-height: 1.2; box-shadow: 0 1px 2px rgba(0,0,0,.15); }
@media (hover: none) { .pd-actions { opacity: 1; } }
.pd-type { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem; }
.pd-vis { font-weight: 500; }
/* In-app document preview */
.pd-pv-title { min-width: 0; flex: 1 1 auto; }
.pd-pv-body { height: 80vh; background: #1f2937; display: flex; }
@media (max-width: 991.98px) { #pd-preview .modal-content { display: flex; flex-direction: column; } #pd-preview .pd-pv-body { height: auto; flex: 1 1 auto; } }
.pd-pv-frame { flex: 1; width: 100%; height: 100%; border: 0; background: #fff; }
.pd-pv-img { flex: 1; display: flex; align-items: center; justify-content: center; padding: 1rem; overflow: auto; }
.pd-pv-img img { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 2px 12px rgba(0,0,0,.4); background: #fff; }
.pd-pv-text { flex: 1; margin: 0; padding: 1rem 1.25rem; background: #fff; overflow: auto; white-space: pre-wrap; font-size: .9rem; }
.pd-pv-loading { flex: 1; display: flex; align-items: center; justify-content: center; }
/* third level in the sidebar (Projects → Bons de travail → Affectation) */
.sidebar-nav .nav-grandchild-item .nav-link { padding-left: 3rem; }
.sidebar-nav .nav-grandchild-item .nav-link::before { left: 2rem; }
.req-badges.mat.d-inline-flex { max-width: none; }
/* Work order Affectation: resource picker */
.woa-pick { overflow: hidden; }
.woa-pick-table { max-height: 60vh; overflow: auto; border: 1px solid var(--bs-border-color); border-radius: .5rem; }
.woa-pick-table thead th { position: sticky; top: 0; z-index: 1; }
.woa-pick-table tbody tr { cursor: pointer; }
/* the picker as a dropdown panel anchored to the slot button */
.woa-dropdown { position: fixed; z-index: 1085; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--bs-border-color); border-radius: .6rem; box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.18); padding: .75rem; }
.woa-dropdown .woa-pick-table { max-height: none; flex: 1 1 auto; min-height: 0; }
.woa-pick.open { border-color: var(--brand); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--brand) 20%, transparent); }
.woa-pick-table th.sortable { cursor: pointer; user-select: none; }
.woa-pick-table th.sortable:hover { background: rgba(0,0,0,.04); }
.woa-pick-table th.sortable .bi { font-size: .75rem; opacity: .5; }
.woa-pick-table th.sortable.sorted .bi { opacity: 1; color: var(--brand); }
.woa-pick-table tr.woa-pick-split td { background: #f1f3f5; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #495057; cursor: default; border-top: 2px solid #dee2e6; }

/* Offer families: icon picker (dropdown grid) */
.fam-icon-menu { width: 19rem; }
.fam-icon-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: .25rem; max-height: 14rem; overflow-y: auto; }
.fam-icon-opt { padding: .25rem 0; font-size: 1.15rem; line-height: 1; }
.fam-icon-opt.active { background: var(--bs-primary); color: #fff; border-color: var(--bs-primary); }

/* Affectation picker: slot with a required skill — skilled people on green, the others on red (owner, 2026-09-26) */
.woa-dropdown tr.woa-qual-ok > td { background-color: var(--bs-success-bg-subtle); }
.woa-dropdown tr.woa-qual-no > td { background-color: var(--bs-danger-bg-subtle); }
.woa-dropdown tr.woa-qual-ok:hover > td { background-color: color-mix(in srgb, var(--bs-success-bg-subtle) 80%, var(--bs-success) 20%); }
.woa-dropdown tr.woa-qual-no:hover > td { background-color: color-mix(in srgb, var(--bs-danger-bg-subtle) 80%, var(--bs-danger) 20%); }
.woa-dropdown tr.woa-current > td:first-child { box-shadow: inset 3px 0 0 var(--bs-primary); }
.woa-req-skill { color: var(--bs-success-text-emphasis); background: var(--bs-success-bg-subtle); border: 1px solid var(--bs-success-border-subtle); border-radius: .25rem; padding: 0 .4rem; }

/* Documents: upload with a cell phone (QR code dialog) */
.pd-qr { width: 15rem; max-width: 100%; background: #fff; padding: .5rem; border-radius: .5rem; border: 1px solid var(--bs-border-color); }
.pd-qr svg { display: block; width: 100%; height: auto; }
.pd-qr-off { opacity: .15; }

/* Daily Operations → SMS Messages: conversation list (left) + thread (right) (2026-09-28) */
.smsm { display: grid; grid-template-columns: minmax(16rem, 22rem) 1fr; height: calc(100vh - 13rem); min-height: 28rem; overflow: hidden; }
.smsm-side { border-right: 1px solid var(--bs-border-color); display: flex; flex-direction: column; min-height: 0; }
.smsm-side-head { display: flex; gap: .5rem; padding: .75rem; border-bottom: 1px solid var(--bs-border-color); }
.smsm-list { overflow-y: auto; flex: 1; }
.smsm-item { display: flex; gap: .6rem; width: 100%; text-align: left; padding: .6rem .75rem; border: 0; border-bottom: 1px solid var(--bs-border-color-translucent); background: none; align-items: flex-start; }
.smsm-item:hover { background: var(--bs-tertiary-bg); }
.smsm-item.active { background: color-mix(in srgb, var(--brand) 12%, transparent); }
.smsm-item.unread .smsm-name, .smsm-item.unread .smsm-preview { font-weight: 600; color: var(--bs-body-color); }
.smsm-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.smsm-item-top, .smsm-item-bottom { display: flex; align-items: center; gap: .4rem; justify-content: space-between; }
.smsm-name { font-weight: 500; }
.smsm-time, .smsm-phone { font-size: .8em; color: var(--bs-secondary-color); white-space: nowrap; }
.smsm-preview { font-size: .9em; color: var(--bs-secondary-color); }
.smsm-avatar { flex: 0 0 2.4rem; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--brand); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: .9rem; }
.smsm-avatar.unknown { background: var(--bs-secondary-bg); color: var(--bs-secondary-color); }
.smsm-avatar.sm { flex-basis: 1.9rem; width: 1.9rem; height: 1.9rem; font-size: .75rem; }
.smsm-thread { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.smsm-head { display: flex; gap: .75rem; align-items: center; padding: .75rem 1rem; border-bottom: 1px solid var(--bs-border-color); }
.smsm-wos { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; padding: .5rem 1rem; border-bottom: 1px solid var(--bs-border-color); background: var(--bs-tertiary-bg); }
.smsm-msgs { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .15rem; background: var(--bs-body-bg); }
.smsm-day { text-align: center; margin: .75rem 0 .5rem; font-size: .8em; color: var(--bs-secondary-color); }
.smsm-day span { background: var(--bs-tertiary-bg); padding: .15rem .6rem; border-radius: 1rem; text-transform: capitalize; }
.smsm-msg { display: flex; flex-direction: column; max-width: 75%; margin-bottom: .5rem; }
.smsm-msg.in { align-self: flex-start; }
.smsm-msg.out { align-self: flex-end; align-items: flex-end; }
.smsm-msg.system { align-self: flex-end; align-items: flex-end; }
.smsm-bubble { padding: .5rem .75rem; border-radius: 1rem; white-space: pre-wrap; word-break: break-word; }
.smsm-msg.in .smsm-bubble { background: var(--bs-secondary-bg); border-bottom-left-radius: .25rem; }
.smsm-msg.out .smsm-bubble { background: var(--brand); color: #fff; border-bottom-right-radius: .25rem; }
.smsm-msg.system .smsm-bubble { background: var(--bs-tertiary-bg); border: 1px dashed var(--bs-border-color); color: var(--bs-secondary-color); border-bottom-right-radius: .25rem; font-size: .92em; }
.smsm-meta { font-size: .75em; color: var(--bs-secondary-color); margin-top: .15rem; padding: 0 .35rem; }
.smsm-err { font-size: .75em; color: var(--bs-danger); max-width: 100%; }
.smsm-compose { display: flex; gap: .5rem; padding: .75rem; border-top: 1px solid var(--bs-border-color); align-items: flex-start; }
.smsm-compose textarea { resize: vertical; min-height: 2.6rem; max-height: 12rem; }
.smsm-placeholder { margin: auto; text-align: center; }
.smsm-placeholder i { font-size: 3rem; opacity: .4; }
.smsm-people { max-height: 22rem; overflow-y: auto; }
.nav-count { font-size: .7rem; }
/* the counter pill never shrinks nor gets the label's ellipsis (owner, 2026-10-08: "2…" instead of the number); the label gives way */
.sidebar-nav .nav-link span.nav-count { flex: 0 0 auto; overflow: visible; text-overflow: clip; min-width: 1.4em; text-align: center; }
.sidebar-nav .nav-link span:not(.nav-count) { min-width: 0; }
@media (max-width: 767.98px) { .smsm { grid-template-columns: 1fr; height: auto; } .smsm-side { border-right: 0; border-bottom: 1px solid var(--bs-border-color); max-height: 16rem; } .smsm-thread { min-height: 26rem; } .smsm-msg { max-width: 90%; } }

/* SMS notifications: bell at the top right, notice toast (2026-09-28) */
.notif-count { font-size: .65rem; }
.notif-menu { width: 22rem; max-width: calc(100vw - 2rem); }
.notif-head { padding: .6rem 1rem; font-weight: 600; border-bottom: 1px solid var(--bs-border-color); }
.notif-item { white-space: normal; border-bottom: 1px solid var(--bs-border-color-translucent); padding: .55rem 1rem; display: flex; flex-direction: column; gap: .1rem; }
.notif-foot { text-align: center; padding: .55rem 1rem; color: var(--brand); }
.notif-toast { width: 22rem; max-width: calc(100vw - 2rem); }
.notif-toast .toast-body { cursor: pointer; }
.smsm-msg.smsm-new .smsm-bubble { animation: smsm-flash 1.6s ease-out; }
@keyframes smsm-flash { from { box-shadow: 0 0 0 .35rem color-mix(in srgb, var(--brand) 35%, transparent); } to { box-shadow: 0 0 0 0 transparent; } }
/* SMS Messages: MMS attachments (2026-09-28) */
.smsm-media { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .25rem; }
.smsm-media:last-child { margin-bottom: 0; }
.smsm-img-btn { border: 0; padding: 0; background: none; border-radius: .6rem; overflow: hidden; line-height: 0; }
.smsm-img { max-width: 16rem; max-height: 16rem; min-width: 4rem; min-height: 4rem; object-fit: cover; border-radius: .6rem; background: rgba(0,0,0,.06); display: block; }
.smsm-media-ph, .smsm-media-err { font-size: .85em; font-style: italic; opacity: .85; margin-bottom: .25rem; }
.smsm-full { max-width: 100%; max-height: 75vh; border-radius: .5rem; }
/* SMS Messages: images to send (MMS) */
.smsm-attach { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .6rem .75rem 0; border-top: 1px solid var(--bs-border-color); }
.smsm-attach + .smsm-compose { border-top: 0; }
.smsm-chip { position: relative; width: 4.2rem; height: 4.2rem; border-radius: .5rem; overflow: hidden; background: var(--bs-secondary-bg); display: flex; align-items: center; justify-content: center; border: 1px solid var(--bs-border-color); }
.smsm-chip img { width: 100%; height: 100%; object-fit: cover; }
.smsm-chip.error { border-color: var(--bs-danger); }
.smsm-chip-state { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.6); }
.smsm-chip-x { position: absolute; top: .15rem; right: .15rem; border: 0; border-radius: 50%; width: 1.3rem; height: 1.3rem; line-height: 1; padding: 0; background: rgba(0,0,0,.6); color: #fff; }
.smsm-thread.smsm-drop { outline: 2px dashed var(--brand); outline-offset: -6px; }
/* Work order Milk route (2026-09-28) */
.wo-stops-table th { font-size: .8em; font-weight: 600; color: var(--bs-secondary-color); }
.wo-stop-n { width: 2rem; color: var(--brand); }
.wo-route-sum { font-size: .9em; color: var(--brand); white-space: nowrap; }
.wo-route-view { background: var(--bs-tertiary-bg); border-radius: .4rem; padding: .5rem .75rem; font-size: .9em; }
.wo-route-view ol { padding-left: 1.2rem; }
.wo-stops-table [data-sf=kind] { min-width: 8.5rem; }
.wo-stops-table [data-sf=time] { min-width: 6.5rem; }
.wo-stops-table [data-sf=address] { min-width: 14rem; }
/* Affectation: day stats tiles (2026-09-28) */
.woa-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .75rem; }
.woa-stat { text-align: left; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: .6rem; padding: .7rem .85rem; display: flex; flex-direction: column; gap: .3rem; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.woa-stat:hover { border-color: var(--brand); }
.woa-stat.active { border-color: var(--brand); box-shadow: 0 0 0 .15rem color-mix(in srgb, var(--brand) 25%, transparent); }
.woa-stat-title { font-size: .8em; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--bs-secondary-color); }
.woa-stat-main { display: flex; align-items: baseline; gap: .15rem; }
.woa-stat-num { font-size: 1.6rem; font-weight: 700; line-height: 1; }
.woa-stat-bar { height: .4rem; }
.woa-stat-sub { display: flex; justify-content: space-between; gap: .5rem; font-size: .85em; }
.woa-stat-foot { font-size: .8em; color: var(--bs-secondary-color); }
/* Affectation: day Milk routes (2026-09-28) */
.woa-routes-list { display: grid; gap: .6rem; }
.woa-route { border-left: 4px solid var(--bs-info); }
.woa-route-wos li { display: flex; align-items: center; gap: .45rem; padding: .2rem 0; border-bottom: 1px dashed var(--bs-border-color-translucent); min-width: 0; }
.woa-route-n { flex: 0 0 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--bs-info); color: #fff; font-size: .75rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.woa-crew { background: var(--bs-secondary-bg); color: var(--bs-body-color); font-weight: 500; display: inline-flex; align-items: center; }
.woa-crew.driver { background: var(--bs-info-bg-subtle); color: var(--bs-info-text-emphasis); }
.woa-crew-btn { line-height: 1; color: inherit; }
.font-sans { font-family: var(--bs-body-font-family); }
.woa-crew.lead { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); }
.woa-route-time { width: 6.2rem; flex: 0 0 6.2rem; padding: .1rem .35rem; }
.woa-route-time-ro { width: 3.2rem; }
.woa-crew-table td, .woa-crew-table th { padding: .2rem .3rem; }
.woa-crew-table th { font-size: .8em; font-weight: 600; color: var(--bs-secondary-color); white-space: nowrap; }
.woa-crew-equip li { padding: .15rem .3rem; }
.woa-crew-table tr.crew-lead td { background: var(--bs-warning-bg-subtle); }
.woa-crew-table tr.crew-driver td { background: var(--bs-info-bg-subtle); }
.woa-crew-table select { min-width: 8rem; }
/* Milk route: work order picker (green = available, red = on another route) */
.woa-legend { display: inline-block; width: .8rem; height: .8rem; border-radius: .2rem; vertical-align: -.1rem; margin-right: .25rem; }
.woa-legend.ok { background: var(--bs-success-bg-subtle); border: 1px solid var(--bs-success-border-subtle); }
.woa-legend.no { background: var(--bs-danger-bg-subtle); border: 1px solid var(--bs-danger-border-subtle); }
/* SMS Messages: work order tags (2026-09-29) */
.smsm-tag { border: 0; background: var(--bs-info-bg-subtle); color: var(--bs-info-text-emphasis); border-radius: .6rem; padding: 0 .4rem; font-size: 1em; line-height: 1.4; }
.smsm-tag.none { background: none; color: var(--bs-secondary-color); opacity: .5; }
.smsm-msg:hover .smsm-tag.none { opacity: 1; }
.smsm-filter { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; padding: .4rem 1rem; border-bottom: 1px solid var(--bs-border-color); }
.smsm-compose-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.smsm-tag-select { max-width: 30rem; }
.smsm-wo-match { font-size: .75em; color: var(--bs-info-text-emphasis); }
.smslog { display: flex; flex-direction: column; gap: .5rem; max-height: 65vh; overflow-y: auto; }
.smslog-row { border-left: 3px solid var(--bs-secondary-bg); padding: .35rem .6rem; background: var(--bs-tertiary-bg); border-radius: 0 .4rem .4rem 0; }
.smslog-row.in { border-left-color: var(--bs-secondary); }
.smslog-row.out { border-left-color: var(--brand); }
.smslog-meta { display: flex; gap: .5rem; align-items: baseline; font-size: .85em; }
.smslog-body { white-space: pre-wrap; }
/* Dossier Projets: staffing column (2026-09-29) */
.pr-slots { font-weight: 600; font-variant-numeric: tabular-nums; padding: .05rem .45rem; border-radius: .35rem; }
.pr-slots.full { color: var(--bs-success-text-emphasis); background: var(--bs-success-bg-subtle); }
.pr-slots.part { color: var(--bs-warning-text-emphasis); background: var(--bs-warning-bg-subtle); }
.pr-slots.none { color: var(--bs-danger-text-emphasis); background: var(--bs-danger-bg-subtle); }

/* Reports → Employee Salary (2026-09-29) */
.salrep { background: #fff; border: 1px solid var(--bs-border-color); border-radius: .5rem; padding: 1.25rem; }
.salrep-head { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.salrep-sum { display: flex; flex-wrap: wrap; gap: .5rem 2rem; padding: .75rem 0; border-top: 1px solid var(--bs-border-color); border-bottom: 1px solid var(--bs-border-color); margin-bottom: 1rem; }
.salrep-sum > div { display: flex; flex-direction: column; }
.salrep-sum strong { font-size: 1.25rem; }
.salrep-emp { margin-bottom: 1.5rem; break-inside: avoid-page; }
.salrep-emp-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .4rem .5rem; background: #f1f3f5; border-radius: .35rem .35rem 0 0; }
.salrep-table td, .salrep-table th { padding: .3rem .5rem; }
.salrep-table thead th { font-size: .78rem; color: #6c757d; font-weight: 600; white-space: nowrap; }
.salrep-table tr.salrep-proj td { background: #f8f9fa; font-size: .9em; }
.salrep-table tr.salrep-total td { font-weight: 700; border-top: 2px solid #adb5bd; }
@media print {
  body * { visibility: hidden; }
  .salrep, .salrep * { visibility: visible; }
  .salrep { position: absolute; left: 0; top: 0; width: 100%; border: 0; padding: 0; }
  .salrep .badge { border: 1px solid #999; color: #000 !important; background: none !important; }
}
/* same columns in every employee table */
.salrep-table { table-layout: fixed; width: 100%; min-width: 760px; }
.salrep-table th:nth-child(1) { width: 11%; } .salrep-table th:nth-child(2) { width: 13%; } .salrep-table th:nth-child(3) { width: 18%; }
.salrep-table th:nth-child(4) { width: 12%; } .salrep-table th:nth-child(5) { width: 7%; } .salrep-table th:nth-child(6) { width: 8%; }
.salrep-table th:nth-child(7) { width: 7%; } .salrep-table th:nth-child(8) { width: 10%; } .salrep-table th:nth-child(9) { width: 14%; }
.salrep-table td { overflow: hidden; text-overflow: ellipsis; }
.salrep-table tr.salrep-proj td:first-child { white-space: nowrap; }

/* Supplier Salary (2026-09-29): same frame as the salary report (.salrep), its own columns */
.suprep-table { table-layout: fixed; width: 100%; min-width: 760px; }
.suprep-table td, .suprep-table th { padding: .3rem .5rem; }
.suprep-table thead th { font-size: .78rem; color: #6c757d; font-weight: 600; white-space: nowrap; }
.suprep-table th:nth-child(1) { width: 20%; } .suprep-table th:nth-child(2) { width: 18%; } .suprep-table th:nth-child(3) { width: 12%; }
.suprep-table th:nth-child(4) { width: 9%; } .suprep-table th:nth-child(5) { width: 10%; } .suprep-table th:nth-child(6) { width: 19%; } .suprep-table th:nth-child(7) { width: 12%; }
.suprep-table tr.salrep-proj td { background: #f8f9fa; font-size: .9em; }
.suprep-table tr.salrep-total td { font-weight: 700; border-top: 2px solid #adb5bd; }
.suprep-table td { overflow: hidden; text-overflow: ellipsis; }

/* Pre-Invoice (2026-09-29): same frame as the other reports (.salrep) */
.pinv-table { table-layout: fixed; width: 100%; min-width: 600px; }
.pinv-table td, .pinv-table th { padding: .3rem .5rem; }
.pinv-table thead th { font-size: .78rem; color: #6c757d; font-weight: 600; white-space: nowrap; }
.pinv-table th:nth-child(1) { width: 52%; } .pinv-table th:nth-child(2) { width: 16%; } .pinv-table th:nth-child(3) { width: 16%; } .pinv-table th:nth-child(4) { width: 16%; }
.pinv-table tr.salrep-total td { font-weight: 700; border-top: 2px solid #adb5bd; }
.pinv-hours summary { cursor: pointer; color: #6c757d; }
.pinv-hours table { margin-top: .35rem; }
.pinv-totals { width: 100%; max-width: 24rem; margin-top: 1rem; }
.pinv-totals > div { display: flex; justify-content: space-between; gap: 1rem; padding: .2rem 0; }
.pinv-totals .pinv-grand { border-top: 2px solid #212529; margin-top: .25rem; padding-top: .4rem; font-weight: 700; font-size: 1.1rem; }
@media print { .pinv-hours { display: block; } .pinv-hours > summary { list-style: none; } }

/* Employees page (owner's mockup, 2026-09-29): company tree + person panel, in the app's current look */
.ep-layout { display: grid; grid-template-columns: minmax(20rem, 2fr) 3fr; gap: 1rem; align-items: start; }
@media (max-width: 991.98px) { .ep-layout { grid-template-columns: 1fr; } }
.ep-tree .card-header { border-bottom: 1px solid var(--bs-border-color); }
.ep-company { border-bottom: 1px solid var(--bs-border-color); }
.ep-company.inactive .ep-company-row strong { color: #6c757d; }
.ep-company-row { display: flex; align-items: center; gap: .5rem; padding: .6rem 1rem; }
.ep-company-row:hover { background: #f8f9fa; }
.ep-company-row .bi-chevron-right, .ep-company-row .bi-chevron-down { color: #6c757d; font-size: .8rem; }
.ep-edit-company { opacity: 0; }
.ep-company-row:hover .ep-edit-company, .ep-edit-company:focus { opacity: 1; }
.ep-people { padding-bottom: .35rem; }
.ep-people.ep-flat .ep-person { padding-left: 1rem; border-bottom: 1px solid var(--bs-border-color-translucent); } /* Employee Files: plain list (2026-10-05) */
.ep-person { display: flex; align-items: center; gap: .6rem; padding: .4rem 1rem .4rem 2rem; border-left: 3px solid transparent; }
.ep-person:hover { background: #f8f9fa; }
.ep-person.active { background: color-mix(in srgb, var(--brand) 8%, white); border-left-color: var(--brand); }
.ep-person.active .ep-person-name > span { color: var(--brand); font-weight: 600; }
.ep-person.inactive { opacity: .6; }
.ep-person-name { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.ep-person-name > span, .ep-person-name > small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ep-title2 { font-weight: 400; } /* e.g. the project name next to its code (2026-10-08) */
.ep-title2::before { content: '· '; color: var(--bs-secondary-color); }
.ep-person-skills { margin-left: auto; display: flex; gap: .25rem; flex-shrink: 0; max-width: 50%; overflow: hidden; }
.ep-avatar { flex-shrink: 0; width: 2.1rem; height: 2.1rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 600; background: #e9ecef; color: #495057; }
.ep-avatar.out { background: #fff; border: 1px dashed #adb5bd; }
.ep-person.active .ep-avatar { background: var(--brand); color: #fff; border-color: var(--brand); }
.ep-avatar.lg { width: 3.5rem; height: 3.5rem; font-size: 1.15rem; background: var(--brand); color: #fff; }
.ep-avatar.lg.out { background: #fff; color: var(--brand); border: 2px dashed var(--brand); }
.ep-kind { font-weight: 500; }
.ep-kind-internal { background: color-mix(in srgb, var(--brand) 12%, white); color: var(--brand); }
.ep-kind-sub { background: #e9ecef; color: #495057; }
.ep-kind-sup { background: #fff; color: #495057; border: 1px solid var(--bs-border-color); }
.ep-kind-none { background: #fff3cd; color: #997404; }
.ep-skill { background: #fff; color: var(--brand); border: 1px solid color-mix(in srgb, var(--brand) 35%, white); font-weight: 500; max-width: 9rem; overflow: hidden; text-overflow: ellipsis; }
.ep-phone-state { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); pointer-events: none; }
.ep-skills td { vertical-align: middle; }
#ep-form .form-control:disabled, #ep-form .form-select:disabled { background-color: #f8f9fa; }
#ep-form.ep-view .form-control:disabled, #ep-form.ep-view .form-select:disabled { pointer-events: none; } /* the click reaches the field's column → edit mode */
#ep-form.ep-view [class^="col"] { cursor: text; }
/* Client Files / Client price list (2026-10-04): same layout as Employee Files, a flat list of clients on the left */
/* Work orders table (2026-10-04): the items on a 2nd line of each work order; the two lines hover / separate together */
.wo-table tr.wo-main td { border-bottom-width: 0; }
.wo-table td.wo-addr { min-width: 14rem; width: 40%; }
.wo-addr-line { display: flex; gap: .4rem; align-items: baseline; } /* origin / destination, one line each (2026-10-06) */
.wo-addr-tag { flex: 0 0 2.6rem; font-size: .7rem; font-weight: 600; text-transform: uppercase; color: var(--bs-secondary-color); }
.wo-table tbody.wo-cancelled tr.wo-main td, .wo-table tbody.wo-cancelled tr.wo-items-row td { opacity: .55; } /* cancelled work order (kept) */
.wo-table tr.wo-items-row td { padding-top: 0; padding-bottom: .25rem; border-bottom-width: 0; }
/* tasks / notes / Milk route under a work order (2026-10-08) */
tr.wo-details-row td { padding-top: .1rem; padding-bottom: .4rem; border-bottom-width: 0; }
.wo-table tbody.wo-cancelled tr.wo-details-row td { opacity: .55; }
.wo-details { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: .875rem; }
.wo-detail { flex: 1 1 14rem; min-width: 12rem; max-width: 32rem; }
.wo-detail-title { font-size: .8rem; color: var(--bs-secondary-color); margin-bottom: .15rem; }
.wo-detail-list { margin: 0; padding-left: 0; list-style: none; }
.wo-detail-route { padding-left: 1.2rem; list-style: decimal; }
.wo-detail-list li { margin-bottom: .1rem; }
.wo-detail-list li.done { color: var(--bs-secondary-color); text-decoration: line-through; }
.wo-detail-notes { white-space: pre-wrap; }
.wo-dispatch-note { background: var(--bs-warning-bg-subtle); border-left: 3px solid var(--bs-warning); border-radius: .25rem; padding: .25rem .5rem; } /* note for dispatch (2026-10-08) */
.wo-dispatch-input { background: var(--bs-warning-bg-subtle); }
.wo-table tr.wo-actions-row td { padding-top: .1rem; padding-bottom: .6rem; } /* 3rd line: the buttons with their text */
.wo-table tbody.wo-group:hover > tr > td { background-color: var(--bs-table-hover-bg); }
/* Project Files / Work orders (2026-10-04): the work order calendar stays pinned at the bottom of the window while the page scrolls */
.page-fill { display: flex; flex-direction: column; }
.page-fill > .wo-cal-sticky { margin-top: auto !important; }
.wo-cal-sticky { position: sticky; bottom: 0; z-index: 20; box-shadow: 0 -.4rem 1rem rgba(0, 0, 0, .08); }
.wo-cal-sticky > .card-body { padding-top: .6rem; padding-bottom: .6rem; }
.woa-route-cancelled { opacity: .7; border-style: dashed; } /* cancelled day Milk route (kept) */
.prf-contract { color: var(--brand); font-weight: 600; } /* Project Files list: the project's Contract / Tender # */
.sf-spent { font-size: .78rem; font-weight: 600; white-space: nowrap; } /* spent since Jan 1 on the supplier lines */
.cf-list { max-height: calc(100vh - 13rem); overflow-y: auto; }
.cf-list .ep-person { padding-left: 1rem; border-bottom: 1px solid var(--bs-border-color-translucent); }
#cf-form.ep-view .form-control:disabled { pointer-events: none; }
#cf-form.ep-view [class^="col"] { cursor: text; }
/* Employee Salary with pay (2026-09-29): one more column (Amount) */
.salrep-table.with-pay th:nth-child(1) { width: 10%; } .salrep-table.with-pay th:nth-child(2) { width: 12%; } .salrep-table.with-pay th:nth-child(3) { width: 16%; }
.salrep-table.with-pay th:nth-child(4) { width: 11%; } .salrep-table.with-pay th:nth-child(5) { width: 6%; } .salrep-table.with-pay th:nth-child(6) { width: 7%; }
.salrep-table.with-pay th:nth-child(7) { width: 10%; } .salrep-table.with-pay th:nth-child(8) { width: 6%; } .salrep-table.with-pay th:nth-child(9) { width: 9%; } .salrep-table.with-pay th:nth-child(10) { width: 13%; }
.salrep-table tr.salrep-pay td { font-weight: 700; background: color-mix(in srgb, var(--brand) 6%, white); }

/* Work order dialog: form + live estimate (owner, 2026-09-29) */
.modal-dialog.wo-dialog { max-width: min(1400px, 96vw); }
.wod-estimate { position: sticky; top: 0; }
.wod-form .wo-list { max-height: 18rem; }
.woe-card { border: 1px solid var(--bs-border-color); border-radius: .6rem; padding: 1rem 1.1rem; background: #f8f9fa; }
.woe-cost-row { display: flex; justify-content: space-between; gap: .75rem; padding: .2rem 0; }
.woe-cost-row > span:last-child { font-variant-numeric: tabular-nums; }
.woe-cost-sep { border-top: 1px solid var(--bs-border-color); margin: .6rem 0; }
.woe-total { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; font-size: 1.2rem; margin-top: .25rem; }
.woe-check { display: flex; gap: .5rem; align-items: baseline; padding: .15rem 0; }

/* Affectation list: Staff — assigned (2026-10-01): one line per role, a chip per slot (person or "to fill") */
.woa-staff { display: flex; flex-direction: column; gap: .2rem; margin-top: .15rem; }
.woa-role { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }
.woa-role-name { font-size: .8rem; font-weight: 600; white-space: nowrap; min-width: 6.5rem; }
.woa-role-slots { display: flex; flex-wrap: wrap; gap: .2rem; }
.woa-staff .badge.woa-to-fill { background: #fff; color: #a86b00; border: 1px dashed #e0b252; font-weight: 500; }
/* Affectation panel: equipment without operator and materials, only listed at the bottom (2026-10-01) */
.asg-table tr.row-listed td { background: #f8f9fa; }

/* "View as" (2026-10-01): role switch at the top of the sidebar (business admins) and the banner while previewing */
.viewas-banner { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .25rem; padding: .45rem 1rem; background: #fff3cd; color: #664d03; border-bottom: 1px solid #ffe69c; font-size: .9rem; }


/* Daily Operations → Operations board (2026-10-01) */
.ops-live { font-size: .8rem; color: var(--bs-secondary-color); border: 1px solid var(--bs-border-color); border-radius: 1rem; padding: .15rem .6rem; white-space: nowrap; }
.ops-live .bi { font-size: .55rem; vertical-align: .15em; }
.ops-live.on { color: var(--bs-success-text-emphasis); background: var(--bs-success-bg-subtle); border-color: var(--bs-success-border-subtle); }
.ops-stats { gap: 0; }
.ops-stat { padding: .25rem 1rem; border-right: 1px solid var(--bs-border-color); min-width: 6.5rem; }
.ops-stat:last-child { border-right: 0; }
.ops-stat-n { font-size: 1.6rem; font-weight: 600; line-height: 1.2; }
.ops-stat-of { font-size: 1rem; color: var(--bs-secondary-color); font-weight: 400; }
.ops-stat-l { font-size: .8rem; color: var(--bs-secondary-color); }
.ops-stat.bad .ops-stat-n, .ops-stat.bad .ops-stat-l { color: var(--bs-danger-text-emphasis); }
.ops-stat.warn .ops-stat-n { color: var(--bs-warning-text-emphasis); }
.ops-stat.ok .ops-stat-n { color: var(--bs-success-text-emphasis); }
.ops-call { border-color: var(--bs-danger-border-subtle); }
.ops-call > .card-header { background: var(--bs-danger-bg-subtle); color: var(--bs-danger-text-emphasis); }
.ops-call.calm { border-color: var(--bs-border-color); }
.ops-call.calm > .card-header { background: var(--bs-tertiary-bg); color: inherit; }
.ops-call-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: .5rem; }
.ops-call-card { border: 1px solid var(--bs-border-color); border-radius: .5rem; padding: .5rem .6rem; background: var(--bs-body-bg); }
.ops-wo > .card-header { background: var(--bs-body-bg); }
.ops-wo.is-done { border-color: var(--bs-success-border-subtle); }
.ops-wo-alert { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); padding: .4rem .75rem; border-bottom: 1px solid var(--bs-border-color); }
.ops-table th { font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; color: var(--bs-secondary-color); font-weight: 600; white-space: nowrap; }
.ops-table td { white-space: nowrap; }
.ops-table tr.ops-row-alert td { background: var(--bs-danger-bg-subtle); }
.ops-table tr.ops-row-empty td { background: var(--bs-warning-bg-subtle); }
.ops-table tr.flash td { animation: ops-flash 2.5s ease-out; }
@keyframes ops-flash { 0% { background: var(--bs-info-bg-subtle); } 100% { background: transparent; } }
.ops-steps { display: inline-flex; align-items: center; gap: .15rem; }
.ops-step { font-size: .75rem; padding: .15rem .55rem; border-radius: 1rem; border: 1px solid var(--bs-border-color); color: var(--bs-secondary-color); white-space: nowrap; }
.ops-step.done { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }
.ops-step.now { border-color: var(--bs-primary); color: var(--bs-primary); font-weight: 600; background: var(--bs-primary-bg-subtle); }
.ops-step.warn { border-color: var(--bs-warning-border-subtle); background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); }
.ops-steps-sm .ops-step { font-size: .65rem; padding: 0 .35rem; }
.ops-dot { font-size: .5rem; vertical-align: .2em; }
.ops-chat { position: sticky; top: 4.5rem; max-height: calc(100vh - 5.5rem); display: flex; flex-direction: column; overflow: hidden; }
.ops-chat-list { overflow-y: auto; flex: 1 1 auto; }
.ops-chat-item { display: block; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--bs-border-color); background: transparent; padding: .5rem .75rem; color: inherit; }
.ops-chat-item:hover { background: var(--bs-tertiary-bg); }
.ops-chat-item.unread { background: var(--bs-primary-bg-subtle); }
.ops-thread { overflow-y: auto; flex: 1 1 auto; padding: .75rem; background: var(--bs-tertiary-bg); min-height: 12rem; }
.ops-msg { display: flex; flex-direction: column; margin-bottom: .6rem; }
.ops-msg.out { align-items: flex-end; }
.ops-msg.sys { align-items: center; }
.ops-bubble { max-width: 85%; padding: .45rem .7rem; border-radius: .8rem; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); white-space: pre-wrap; word-break: break-word; }
.ops-msg.out .ops-bubble { background: var(--bs-primary); color: #fff; border-color: var(--bs-primary); }
.ops-msg.sys .ops-bubble { background: transparent; border-style: dashed; font-size: .8rem; color: var(--bs-secondary-color); max-width: 95%; }
.ops-msg-meta { font-size: .7rem; color: var(--bs-secondary-color); margin-top: .1rem; }
.ops-rp-list { max-height: 22rem; overflow-y: auto; }
.ops-no-time .ops-t { display: none; } /* no Timesheets access (sellers) */
.ops-rp-list thead th { background: var(--bs-body-bg); font-size: .75rem; }
@media (max-width: 1199.98px) { .ops-chat { position: static; max-height: 36rem; } }

/* Administration → Application Roles (2026-10-02) */
.ar-grid tr.ar-section th { background: var(--bs-tertiary-bg); font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--bs-secondary-color); }
.ar-grid td:not(:first-child), .ar-grid th:not(:first-child) { width: 8.5rem; }

/* Build number under Sign out (2026-10-02) */
.app-version { margin-top: 0; text-align: center; font-size: .72rem; color: rgba(255, 255, 255, .45); letter-spacing: .02em; }
.app-version-name { font-weight: 600; color: rgba(255, 255, 255, .65); }

/* User menu at the top right (2026-10-02): name + role pill on the button; profile, View as, Sign out inside */
.user-menu-btn .user-menu-name { max-width: 12rem; }
.user-menu { min-width: 16rem; }
.user-menu-viewas .form-select { min-width: 13rem; }

/* Login page of a client (hostname, 2026-10-02): their logo, or the app icon, at a modest size */
.login-logo.is-icon { width: auto; height: 4rem; }
.login-logo.is-client { width: auto; max-width: 70%; max-height: 5rem; }

/* Linear calendar with day details (Project files, 2026-10-02): people, vehicles, slots-filled bar */
.lc-detailed .lc-cell { width: 4.4rem; }
.lc-detailed .lc-cell-wide { width: 5.6rem; }
.lc-details { display: flex; flex-direction: column; align-items: stretch; width: 100%; margin-top: .2rem; gap: .05rem; padding: 0 .2rem; }
.lc-d { font-size: .62rem; color: #495057; display: flex; align-items: center; justify-content: center; gap: .2rem; line-height: 1.15; }
.lc-cell.selected .lc-d { color: rgba(255,255,255,.9); }
.lc-bar { display: block; height: .3rem; border-radius: 1rem; background: rgba(0,0,0,.1); overflow: hidden; margin-top: .15rem; }
.lc-cell.selected .lc-bar { background: rgba(255,255,255,.3); }
.lc-bar > span { display: block; height: 100%; border-radius: 1rem; }
.lc-bar > .full { background: var(--bs-success); } .lc-bar > .part { background: var(--bs-warning); } .lc-bar > .none { background: var(--bs-danger); width: 100% !important; opacity: .55; }
.lc-cell.selected .lc-bar > span { background: #fff; opacity: 1; }
.lc-detailed .lc-details .lc-bar { margin: .1rem 0 .15rem; }
.lc-d b { font-weight: 700; }
.lc-d.short b { color: var(--bs-danger-text-emphasis); }
.lc-cell.selected .lc-d.short b { color: #fff; text-decoration: underline; }
/* Affectation: work orders laid out like the Work orders page (2026-10-06) */
.woa-table tbody.wo-group:hover > tr.asg-subrow > td { background-color: #f8f9fb; }
.woa-table tbody.wo-group.row-open > tr:not(.asg-subrow) > td { background-color: var(--bs-table-active-bg); }
.woa-table tbody.wo-group + tbody.wo-group > tr.wo-main > td { border-top: 1px solid var(--bs-border-color); }
.woa-table tr.wo-items-row .req-badges { display: inline-flex; max-width: none; flex-wrap: wrap; gap: .25rem; margin-right: .5rem; vertical-align: middle; }
/* Affectation: staff on its own line (2026-10-06) — label, fill count, then the roles side by side */
.woa-staff-line { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: .75rem; row-gap: .25rem; }
.woa-staff-row .woa-staff { flex-direction: row; flex-wrap: wrap; column-gap: 1.25rem; margin-top: 0; }
.woa-table tr.woa-staff-row td { padding-top: .1rem; }
/* Dashboard: projects with their completion steps on a second line (2026-10-06) */
.dash-table tr.dash-steps-row td { padding-top: 0; padding-bottom: .5rem; }
#dash-table > tbody.wo-group:nth-of-type(even) > tr > td { --bs-table-bg-type: rgba(13, 110, 253, .07); } /* every 2nd project a bit darker, to tell projects apart (owner, 2026-10-09) */
.dash-steps { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.dash-step { display: inline-block; min-width: 5.5rem; padding: .25rem .6rem; border-radius: .35rem; font-size: .75rem; font-weight: 600; text-align: center;
  color: var(--step-fg); background: var(--step-bg); border: 1px solid var(--step-bd); }
/* step states (owner, 2026-10-06): green completed, yellow ongoing, red needs input now, blue undefined, gray not started */
.dash-step.st-done { --step-fg: #0f5132; --step-bg: #d1e7dd; --step-bd: #75b798; }
.dash-step.st-ongoing { --step-fg: #664d03; --step-bg: #fff3cd; --step-bd: #ffcd39; }
.dash-step.st-input { --step-fg: #842029; --step-bg: #f8d7da; --step-bd: #ea868f; }
.dash-step.st-undefined { --step-fg: #084298; --step-bg: #cfe2ff; --step-bd: #6ea8fe; }
.dash-step.st-todo { --step-fg: #6c757d; --step-bg: #f1f3f5; --step-bd: #ced4da; }
.dash-step.dash-legend { min-width: 0; font-weight: 500; }
/* Project steps admin (2026-10-06) */
.ps-help > summary { cursor: pointer; list-style: none; }
.ps-help code.ps-insert { cursor: pointer; } .ps-help code.ps-insert:hover { text-decoration: underline; }
.ps-step-head { background: var(--bs-body-bg); }
.ps-step .dash-step { min-width: 2.2rem; }
.ps-dot { display: inline-block; width: .65rem; height: .65rem; border-radius: 50%; background: var(--step-bg); border: 1px solid var(--step-bd); vertical-align: middle; }
.ps-dot.st-done { --step-bg: #d1e7dd; --step-bd: #198754; } .ps-dot.st-input { --step-bg: #f8d7da; --step-bd: #dc3545; } .ps-dot.st-ongoing { --step-bg: #fff3cd; --step-bd: #e0a800; }
.dash-table tr.dash-steps-row .dash-step { min-width: 2.2rem; padding: .2rem .45rem; } /* up to ~21 steps on one line */
.ps-blockly { height: 42rem; border: 1px solid var(--bs-border-color); border-radius: .375rem; overflow: hidden; background: #fff; } /* block editor (2026-10-06) */
.ps-tabs .nav-link { font-size: .85rem; }
/* Mini step tiles under each project of the Project Files / Work orders lists (2026-10-06): ~5 px squares, Dashboard colours */
.ep-foot { display: block; margin-top: .2rem; }
.mini-steps { display: flex; flex-wrap: wrap; gap: 2px; }
.mini-step { display: inline-block; width: .4rem; height: .4rem; border-radius: 1px; background: #ced4da; }
.mini-step.st-done { background: #198754; } .mini-step.st-input { background: #dc3545; } .mini-step.st-ongoing { background: #ffc107; } .mini-step.st-todo { background: #ced4da; }
/* Step groups (2026-10-06): consecutive tiles of a group framed together; group chips */
.step-group { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 1px 2px; border: 1px solid #adb5bd; border-radius: .3rem; }
/* Dashboard step groups (owner, 2026-10-06): the name centred over a line as wide as the group's tiles, the tiles below; tiles outside a
   group line up at the bottom. The name never widens the group (width 0 + min-width 100% → ellipsis). */
.dash-steps { align-items: flex-end; }
.dash-steps .step-group.labelled { display: inline-flex; flex-direction: column; flex-wrap: nowrap; gap: .2rem; padding: 0; border: 0; background: none; }
.step-group-name { width: 0; min-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center;
  font-size: .7rem; font-weight: 400; color: #6c757d; line-height: 1.2; padding-bottom: .1rem; border-bottom: 1px solid #adb5bd; } /* gray, not bold (owner, 2026-10-06) */
.step-group-tiles { display: inline-flex; gap: .3rem; }
.psg-chip { background: #ede7f6; color: #4a2c8a; border: 1px solid #c9b8ec; }
/* empty step group on the Dashboard (2026-10-06): as wide as its name, a dashed box under it */
.dash-steps .step-group.labelled.empty .step-group-name { width: auto; min-width: 2.2rem; padding: 0 .25rem .1rem; }
.dash-steps .step-group.labelled.empty .step-group-tiles { display: flex; }
.dash-table tr.dash-steps-row .dash-step.step-empty { flex: 1; color: #adb5bd; background: transparent; border: 1px dashed #ced4da; }
/* Dashboard live update (2026-10-06): a tile whose state changed pulses */
@keyframes step-flash { 0% { transform: scale(1.35); box-shadow: 0 0 0 3px rgba(13,110,253,.45); } 100% { transform: scale(1); box-shadow: none; } }
.dash-step.flash { animation: step-flash 1.6s ease-out; }
/* Dashboard steps as connected arrows (owner, 2026-10-07: "| step > step > step |"): each tile is a chevron that fits into the next,
   the first starts flat and the last ends flat; colours a shade stronger since the chevrons have no border. */
#dash-table .dash-steps-row .dash-step:not(.step-empty) {
  --notch: .45rem; border: 0; border-radius: 0; margin-right: calc(-1 * var(--notch) + 2px); padding: .22rem calc(.45rem + var(--notch)) .22rem calc(.35rem + var(--notch));
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% 50%, calc(100% - var(--notch)) 100%, 0 100%, var(--notch) 50%);
}
#dash-table .dash-steps-row .dash-step.chev-first { clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% 50%, calc(100% - var(--notch)) 100%, 0 100%); padding-left: .5rem; border-radius: .3rem 0 0 .3rem; }
#dash-table .dash-steps-row .dash-step.chev-last { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, var(--notch) 50%); padding-right: .5rem; margin-right: 0; border-radius: 0 .3rem .3rem 0; }
#dash-table .dash-steps-row .dash-step.chev-first.chev-last { clip-path: none; border-radius: .3rem; }
#dash-table .dash-steps-row .dash-step.st-done { background: #a3cfbb; }
#dash-table .dash-steps-row .dash-step.st-input { background: #f1aeb5; }
#dash-table .dash-steps-row .dash-step.st-ongoing { background: #ffe69c; }
#dash-table .dash-steps-row .dash-step.st-todo { background: #dee2e6; color: #495057; }
#dash-table .dash-steps-row .dash-steps, #dash-table .dash-steps-row .step-group-tiles { gap: 0; } /* the chevrons fit into one another */
#dash-table .dash-steps-row .dash-steps > .step-group { margin-right: .35rem; }
#dash-table .dash-steps-row .dash-steps > .small { margin-right: .5rem !important; }
/* Sidebar search (2026-10-08) */
.sidebar-search { position: relative; margin: .6rem .75rem 0; }
.sidebar-search > i { position: absolute; left: .6rem; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,.45); font-size: .85rem; pointer-events: none; }
.sidebar-search input { width: 100%; padding: .35rem 1.8rem .35rem 1.8rem; border-radius: .4rem; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.07); color: #fff; font-size: .85rem; outline: none; }
.sidebar-search input::placeholder { color: rgba(255,255,255,.45); }
.sidebar-search input:focus { border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.12); }
.sidebar-search input::-webkit-search-cancel-button { filter: invert(1); opacity: .6; }
.sidebar-search kbd { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); font-size: .7rem; padding: 0 .3rem; background: rgba(255,255,255,.12); color: rgba(255,255,255,.6); border-radius: .2rem; }
.sidebar-search input:focus ~ kbd, .sidebar-search input:not(:placeholder-shown) ~ kbd { display: none; }
.sidebar-nav.searching .nav-section-toggle i.bi-chevron-down, .sidebar-nav.searching .nav-group-toggle i.bi-chevron-down { visibility: hidden; }
.sidebar-nav li.nav-search-hit > .nav-link { outline: 1px solid rgba(255,255,255,.45); outline-offset: -1px; }
/* Long tables (lists, Inventory / Equipment, Own Equipment — owner, 2026-10-08: "the header disappears when scrolling"): the table scrolls in
   its own box as tall as the window, and its header (titles + the add / filter line) stays visible at the top. */
.table-sticky-head { max-height: calc(100vh - 9rem); overflow: auto; }
.table-sticky-head > table > thead { position: sticky; top: 0; z-index: 3; }
.table-sticky-head.logs-scroll { max-height: calc(100vh - 15rem); min-height: 18rem; } /* Logs (2026-10-08): the filters above stay on screen */
.table-sticky-head > table > thead > tr > * { background-color: var(--bs-tertiary-bg, #f8f9fa); }
.table-sticky-head > table > thead > tr:last-child > * { box-shadow: inset 0 -1px 0 var(--bs-border-color); }
/* Client Files, Client Price List, Supplier Files, Supplier Rates, Supplier Employees (owner, 2026-10-08): a narrower list on the left,
   more room for the file on the right */
.ep-layout.ep-narrow { grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr); }
@media (max-width: 991.98px) { .ep-layout.ep-narrow { grid-template-columns: 1fr; } }
/* Supplier Employees (owner, 2026-10-08): a bit wider than the other narrow lists, so company / people lines stay on one line */
.ep-layout.ep-narrow.ep-mid { grid-template-columns: minmax(20rem, 32rem) minmax(0, 1fr); }
@media (max-width: 991.98px) { .ep-layout.ep-narrow.ep-mid { grid-template-columns: 1fr; } }

/* Daily Operations → New Work Orders (2026-10-08) */
.nwo-table tbody.nwo-done tr.wo-main td { background: var(--bs-success-bg-subtle); }
.nwo-check { width: 1.4rem; height: 1.4rem; cursor: pointer; }

/* Daily Operations → Todo Calendar (2026-10-08) */
.todo-cal { border: 1px solid var(--bs-border-color); border-radius: .5rem; overflow: hidden; background: var(--bs-body-bg); }
.todo-cal-head, .todo-cal-body { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.todo-cal-head > div { padding: .35rem .5rem; font-size: .8rem; font-weight: 600; color: var(--bs-secondary-color); text-transform: capitalize; background: var(--bs-tertiary-bg); border-bottom: 1px solid var(--bs-border-color); }
.todo-day { min-height: 7.5rem; padding: .3rem .35rem; border-right: 1px solid var(--bs-border-color); border-bottom: 1px solid var(--bs-border-color); cursor: pointer; min-width: 0; }
.todo-day:nth-child(7n) { border-right: 0; }
.todo-day:hover { background: var(--bs-tertiary-bg); }
.todo-day.other { background: var(--bs-secondary-bg); opacity: .7; }
.todo-day.today .todo-day-num { background: var(--brand); color: #fff; border-radius: 1rem; padding: 0 .45rem; display: inline-block; }
.todo-day-num { font-size: .8rem; font-weight: 600; margin-bottom: .2rem; }
.todo-item { display: flex; align-items: flex-start; gap: .3rem; font-size: .8rem; line-height: 1.25; padding: .15rem .3rem; margin-bottom: .2rem; border-radius: .25rem; background: var(--bs-primary-bg-subtle); border-left: 3px solid var(--bs-primary); cursor: pointer; min-width: 0; }
.todo-item .form-check-input { margin-top: .1rem; flex: 0 0 auto; }
.todo-item .todo-text { flex: 1 1 auto; min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-break: break-word; }
.todo-item .todo-wo { flex: 0 0 auto; font-size: .7rem; text-decoration: none; }
.todo-item.done { background: var(--bs-success-bg-subtle); border-left-color: var(--bs-success); }
.todo-item.done .todo-text { text-decoration: line-through; color: var(--bs-secondary-color); }
.todo-item.cancelled { background: var(--bs-secondary-bg); border-left-color: var(--bs-secondary); opacity: .7; }
.todo-item.cancelled .todo-text { text-decoration: line-through; color: var(--bs-secondary-color); }
.todo-item .todo-x { flex: 0 0 auto; font-size: .8rem; }
.todo-item.overdue { background: var(--bs-danger-bg-subtle); border-left-color: var(--bs-danger); }
.todo-overdue-list .todo-item { font-size: .875rem; }
@media (max-width: 767.98px) { .todo-day { min-height: 4.5rem; } .todo-item .todo-text { -webkit-line-clamp: 2; } }

/* QuickBooks-style sidebar (owner, 2026-10-09): an icon rail of the sections + the open section's items (the main menu was removed 2026-10-10) */
.sidebar-nav .sb-list { flex-wrap: nowrap; }
.sidebar-nav.sb-split-mode { padding: 0; overflow: hidden; display: flex; }
.sb-split { position: relative; display: flex; flex: 1 1 auto; min-height: 0; width: 100%; padding-left: 3.25rem; } /* room for the rail, which floats */
/* The rail expands on hover / keyboard focus (owner, 2026-10-10: "hard to move from one section to the other, we only see the icon"):
   it floats over the items and slides out to show the section names; a short delay so a pointer passing by does not open it. */
.sb-rail { position: absolute; left: 0; top: 0; bottom: 0; z-index: 5; width: 3.25rem; list-style: none; margin: 0; padding: .6rem .425rem; background: #0c1221;
  display: flex; flex-direction: column; align-items: stretch; gap: .2rem; overflow-y: auto; overflow-x: hidden; scrollbar-width: none;
  transition: width .16s ease-out, box-shadow .16s ease-out; }
.sb-rail:not(.sb-rail-rest):hover, .sb-rail:not(.sb-rail-rest):focus-within { width: 12.5rem; box-shadow: 6px 0 18px rgba(0, 0, 0, .4); transition-delay: .12s; } /* .sb-rail-rest = just clicked: stays folded until the pointer leaves it (owner, 2026-10-10). Just the names: the open section's items stay visible beside it (owner, 2026-10-10) */
.sb-panel { transition: opacity .16s ease-out; }
.sb-split:has(.sb-rail:not(.sb-rail-rest):hover) .sb-panel, .sb-split:has(.sb-rail:not(.sb-rail-rest):focus-within) .sb-panel { opacity: .35; transition-delay: .12s; } /* the items behind dim: still in this section */
.sb-rail-label { font-size: .9rem; white-space: nowrap; opacity: 0; transition: opacity .12s ease-out; }
.sb-rail:not(.sb-rail-rest):hover .sb-rail-label, .sb-rail:not(.sb-rail-rest):focus-within .sb-rail-label { opacity: 1; transition-delay: .18s; }
@media (prefers-reduced-motion: reduce) { .sb-rail, .sb-rail-label { transition: none !important; } }
.sb-rail-btn { position: relative; display: flex; align-items: center; gap: .75rem; width: 100%; height: 2.4rem; padding-left: .6rem; border-radius: .5rem; color: rgba(255,255,255,.6); font-size: 1.1rem; text-decoration: none; overflow: hidden; }
.sb-rail-btn > .bi { flex: 0 0 1.2rem; text-align: center; }
.sb-rail-btn:hover { color: #fff; background: rgba(255,255,255,.08); }
.sb-rail-btn.active { color: #fff; background: rgba(255,255,255,.12); }
.sb-rail-btn.active::before { content: ''; position: absolute; left: -.425rem; top: .4rem; bottom: .4rem; width: 3px; border-radius: 2px; background: var(--brand); }
.sb-rail-count { position: absolute; top: .05rem; right: 0; transition: top .16s, right .16s; min-width: 1.1rem; height: 1.1rem; padding: 0 .25rem; border-radius: 1rem; background: var(--bs-danger); color: #fff; font-size: .6rem; font-weight: 600; line-height: 1.1rem; text-align: center; }
.sb-rail:not(.sb-rail-rest):hover .sb-rail-count, .sb-rail:not(.sb-rail-rest):focus-within .sb-rail-count { top: .65rem; right: .5rem; } /* expanded: the counter sits at the end of the line */
.sb-panel { flex: 1 1 auto; min-width: 0; overflow-y: auto; overflow-x: hidden; padding: 0 .5rem .75rem; scrollbar-width: thin; }
.sb-panel-title { color: #fff; font-weight: 600; padding: .85rem .6rem .5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-panel .nav-link { padding: .5rem .6rem; gap: .55rem; }
.sb-panel .nav-subsection { padding: .75rem .6rem .2rem; }
.sb-panel .nav-sub-item .nav-link { padding-left: .6rem; }
.sb-panel .nav-child-item .nav-link { padding-left: 1.7rem; }
.sb-panel .nav-child-item .nav-link::before { left: .95rem; }
.sb-panel .nav-link span:not(.nav-count) { white-space: normal; overflow-wrap: anywhere; line-height: 1.25; } /* long names wrap instead of being cut in the narrower panel */
/* opening a section (owner, 2026-10-09: "a quick animation"): the items slide in from the right. Only when the open section changes,
   not on every page change. */
@keyframes sb-from-right { from { transform: translateX(1.2rem); opacity: 0; } to { transform: none; opacity: 1; } }
.sidebar-nav.sb-anim-switch .sb-panel { animation: sb-from-right .2s ease-out both; }
@media (prefers-reduced-motion: reduce) { .sidebar-nav[class*="sb-anim-"] * { animation: none !important; } }
/* Magasin → Orders (2026-10-09) */
.wh-table .wh-check.done { background: #eaf6ee; }
.wh-table tbody.wh-done .wo-main td:not(.wh-check) { color: var(--bs-secondary-color); }
.wh-table tbody.wh-none { opacity: .6; }
.wh-table tbody.wh-focus { outline: 2px solid var(--brand); outline-offset: -2px; }
.wh-items { display: flex; flex-wrap: wrap; gap: .3rem; }
.wh-item { border: 1px solid var(--bs-border-color); border-radius: .4rem; padding: .1rem .45rem; background: var(--bs-body-bg); font-size: .875rem; }
.wh-item.equipment { border-left: 3px solid #0d6efd; }
.wh-item.material { border-left: 3px solid #fd7e14; }
.wh-crew { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; margin-top: .45rem; }
.wh-crew-col { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; min-width: 0; }
.wh-crew-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--bs-secondary-color); margin-right: .15rem; }
.wh-person { border: 1px solid var(--bs-border-color); border-radius: 1rem; padding: .05rem .55rem; font-size: .85rem; background: var(--bs-tertiary-bg); }
.wh-person.lead { border-color: #ffc107; }
.wh-person.wh-unassigned { border-style: dashed; background: transparent; color: var(--bs-warning-text-emphasis); }
/* Field → PEVL (2026-10-09) */
.pv-items { display: grid; grid-template-columns: 1fr; gap: .25rem; max-height: 26rem; overflow-y: auto; padding-right: .25rem; }
.pv-item { display: grid; grid-template-columns: minmax(9rem, 1.2fr) 9.5rem 1.4fr; gap: .4rem; align-items: center; }
.pv-item-name { font-size: .875rem; }
.pv-table td { vertical-align: top; }
/* Files → Truck Files (2026-10-09) */
.tf-photo { width: 11rem; height: 8rem; border-radius: .6rem; background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.tf-photo > .bi { font-size: 3rem; color: var(--bs-secondary-color); }
.tf-photo img { width: 100%; height: 100%; object-fit: cover; }
.tf-ids { display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.tf-kpis { display: flex; flex-wrap: wrap; gap: .75rem; }
.tf-kpi { border: 1px solid var(--bs-border-color); border-radius: .5rem; padding: .45rem .75rem; min-width: 11rem; }
.tf-kpi-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--bs-secondary-color); }
.tf-kpi-value { font-size: 1.15rem; font-weight: 600; }
.tf-totals { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .5rem; }
.tf-total { background: var(--bs-tertiary-bg); border-radius: .4rem; padding: .4rem .6rem; }
@media print { .tf-file .card { break-inside: avoid; } .tf-file .tf-photo { width: 8rem; height: 6rem; } }
.pd-tile .pd-link { font-size: .72rem; color: var(--bs-primary-text-emphasis); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: .1rem; }
/* Truck Logbook: the standard daily log grid (2026-10-09) */
.pg-grid-box { overflow-x: auto; }
.pevl-grid { width: 100%; min-width: 34rem; height: auto; display: block; }
.pg-rows { display: flex; flex-direction: column; gap: .3rem; margin-top: .5rem; }
.pg-row { display: grid; grid-template-columns: 6.5rem minmax(9rem, 1fr) minmax(8rem, 1fr) auto; gap: .35rem; align-items: center; }
.pg-hint { font-size: .8rem; color: var(--bs-secondary-color); }
.pg-add { align-self: flex-start; }
.lr-table tr.lr-done td { color: var(--bs-secondary-color); }
.lr-table td { vertical-align: top; }

/* Files → Drivers Files (2026-10-10): initials avatar, the day on a 24-hour grid, days over the limits */
.df-avatar { width: 4.5rem; height: 4.5rem; border-radius: 50%; background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; font-weight: 600; flex-shrink: 0; }
.df-bar { display: block; width: 100%; height: .85rem; }
.df-trips tr.df-warn > td:first-child { box-shadow: inset 3px 0 0 var(--bs-danger); }
@media print { .df-trips { font-size: .8rem; } .df-bar { height: .7rem; } }

/* Field → Expenses (2026-10-10): receipts listed in the worker's row */
.ex-table td { vertical-align: top; }
.ex-table tr.locked { background: var(--bs-success-bg-subtle); }
.ex-receipts { display: flex; flex-direction: column; gap: .4rem; }
.ex-receipt { display: flex; gap: .6rem; align-items: flex-start; border: 1px solid var(--bs-border-color); border-radius: .5rem; padding: .35rem .5rem; background: var(--bs-body-bg); }
.ex-thumb { width: 3.2rem; height: 3.2rem; border-radius: .4rem; background: var(--bs-tertiary-bg); border: 0; padding: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: var(--bs-secondary-color); flex-shrink: 0; }
.ex-thumb img { width: 100%; height: 100%; object-fit: cover; }
button.ex-thumb { cursor: zoom-in; }

/* Dashboard attention strip (owner, 2026-10-10): one compact line of toggles that filter the projects; colours match the step tiles / staffing badges */
.dash-att { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.dash-att-item { --att-fg: var(--bs-body-color); --att-bg: var(--bs-body-bg); --att-bd: var(--bs-border-color); display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .4rem .3rem .65rem;
  border: 1px solid var(--att-bd); border-radius: .5rem; background: var(--att-bg); color: var(--att-fg); font-size: .875rem; line-height: 1.2; transition: background-color .12s ease-out, border-color .12s ease-out, box-shadow .12s ease-out; }
.dash-att-item .bi { color: var(--att-icon, var(--att-fg)); }
.dash-att-n { min-width: 1.6rem; padding: .05rem .4rem; border-radius: .35rem; background: var(--att-n-bg, var(--bs-tertiary-bg)); font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; }
.dash-att-item.att-input { --att-icon: #b02a37; --att-n-bg: #f8d7da; }
.dash-att-item.att-soon { --att-icon: var(--bs-primary); --att-n-bg: var(--bs-primary-bg-subtle); }
.dash-att-item.att-slots { --att-icon: #997404; --att-n-bg: #fff3cd; }
.dash-att-item.att-quote { --att-icon: var(--bs-secondary-color); }
.dash-att-item:hover:not(:disabled) { border-color: var(--att-icon, var(--bs-secondary-color)); box-shadow: 0 1px 3px rgba(15, 23, 42, .08); }
.dash-att-item:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 2px; }
.dash-att-item.on { --att-bd: var(--att-icon, var(--bs-secondary-color)); --att-bg: var(--att-n-bg, var(--bs-tertiary-bg)); box-shadow: inset 0 0 0 1px var(--att-bd); font-weight: 600; }
.dash-att-item.on .dash-att-n { background: var(--bs-body-bg); }
.dash-att-item.zero { opacity: .55; }
.dash-att-item.zero .dash-att-n { background: transparent; font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .dash-att-item { transition: none; } }

/* Dashboard: a project (its two lines) highlights as one and opens on click (owner, 2026-10-10); the hover goes through
   --bs-table-bg-state so it also shows on the light-blue every-second project */
#dash-table > tbody.dash-project { cursor: pointer; }
#dash-table > tbody.dash-project:hover > tr > td { --bs-table-bg-state: rgba(13, 110, 253, .11); }
#dash-table > tbody.dash-project:hover .font-monospace { text-decoration: underline; text-underline-offset: 2px; }

/* Virtual Director → Director Rules (2026-10-11) */
.dr-num { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--bs-primary); color: #fff; font-size: .8rem; font-weight: 600; margin-right: .5rem; }
.dr-name { max-width: 28rem; }
.dr-blockly { height: 24rem; border: 1px solid var(--bs-border-color); border-radius: .375rem; overflow: hidden; background: #fff; }
.dr-vars { max-height: 16rem; overflow: auto; }
.dr-vars code[role=button]:hover { text-decoration: underline; }
.dr-sms { white-space: pre-wrap; background: var(--bs-light); border-radius: .375rem; padding: .25rem .5rem; margin-top: .125rem; color: var(--bs-body-color); }

/* Supplier rate list dialog: offers grid (2026-10-11) */
.srg-table .srg-cell { min-width: 6.5rem; }
.srg-table .srg-main { min-width: 7.5rem; }
.srg-table .input-group input { max-width: 7rem; }

/* Warehouse Orders (2026-10-11): the vehicles = the first column, big cards (in which truck to load what) */
.wh-veh-cell { min-width: 21rem; vertical-align: top !important; padding: .6rem .5rem !important; border-right: 1px solid #e5e7eb; background: #fafbfc; }
.wh-veh { display: flex; gap: .6rem; align-items: flex-start; padding: .5rem .6rem; margin-bottom: .4rem; border: 1px solid #d0d7de; border-left: 4px solid #198754; border-radius: .5rem; background: #fff; }
.wh-veh > .bi-truck { font-size: 1.6rem; line-height: 1; color: #198754; }
.wh-veh.rented { border-left-color: #0d6efd; } .wh-veh.rented > .bi-truck { color: #0d6efd; }
.wh-veh.todo { border-style: dashed; border-left: 4px dashed #fd7e14; background: #fff8f1; } .wh-veh.todo > .bi-truck { color: #fd7e14; }
.wh-veh.none { border-left-color: #adb5bd; color: #6c757d; } .wh-veh.none > .bi-truck { color: #adb5bd; }
.wh-veh-name { font-weight: 700; font-size: 1.1rem; line-height: 1.2; }
.wh-veh-sub { font-size: .85rem; color: #495057; }

/* Warehouse Orders (2026-10-11): one Prepared checkbox per item, top to bottom in 3 to 5 columns */
.wh-items-cols { column-count: 3; column-gap: 1.25rem; margin-bottom: .4rem; }
@media (min-width: 1500px) { .wh-items-cols { column-count: 4; } }
@media (min-width: 1900px) { .wh-items-cols { column-count: 5; } }
@media (max-width: 900px) { .wh-items-cols { column-count: 2; } }
.wh-item-check { display: flex; gap: .45rem; align-items: flex-start; break-inside: avoid; padding: .3rem .45rem; margin-bottom: .3rem; border: 1px solid #e5e7eb; border-left: 3px solid #fd7e14; border-radius: .4rem; background: #fff; cursor: pointer; line-height: 1.25; }
.wh-item-check.equipment { border-left-color: #0d6efd; }
.wh-item-check .form-check-input { margin-top: .15rem; flex: none; }
.wh-item-check.done { background: #e9f7ef; border-color: #b7e1c6; border-left-color: #198754; }
.wh-item-check.done span { color: #146c43; }
.wh-item-fam { display: block; font-size: .78rem; color: #6c757d; }
.wh-progress { font-weight: 700; font-size: 1.05rem; padding: .1rem .5rem; border-radius: 1rem; }
.wh-progress.all { background: #d1e7dd; color: #0f5132; } .wh-progress.some { background: #fff3cd; color: #664d03; } .wh-progress.none { background: #f1f3f5; color: #6c757d; }

/* Warehouse Orders (2026-10-11): Prepared / Loaded span the work order's first two lines, aligned at the top */
.wh-table td.wh-check { vertical-align: top !important; padding-top: .6rem; }

/* Warehouse Orders (2026-10-11, layout A): the crew at the right of the address and the items, one chip per line */
.wh-crew-cell { vertical-align: top !important; padding-top: .6rem !important; width: 1%; }
.wh-crew-cell .wh-person { white-space: nowrap; }

/* Store → Orders (2026-10-11): Loaded per truck, on its card */
.wh-veh-load { display: inline-flex; align-items: center; margin-top: .35rem; padding: .15rem .5rem; border: 1px solid #ced4da; border-radius: 1rem; font-size: .85rem; font-weight: 600; cursor: pointer; background: #fff; }
.wh-veh-load.done { background: #d1e7dd; border-color: #a3cfbb; color: #0f5132; }
.wh-veh.loaded { background: #f3fbf6; }
.wh-progress { white-space: nowrap; }
.wh-crew-cell > span { white-space: nowrap; }

/* Store → Orders (2026-10-11): which item goes in which truck */
.wh-place { margin-top: .3rem; max-width: 100%; font-size: .8rem; padding-top: .1rem; padding-bottom: .1rem; }
.wh-place.unplaced { border-color: #fd7e14; background-color: #fff8f1; }
.wh-veh-items { margin-top: .3rem; padding-top: .3rem; border-top: 1px dashed #ced4da; font-size: .85rem; line-height: 1.3; }

/* Warehouse (Entrepôt) → Orders / Space management (2026-10-11) */
.sto-card.applied { opacity: .85; }
.sto-line { padding: .5rem 0; border-top: 1px dashed #dee2e6; }
.spc-kpi { border: 1px solid #e5e7eb; border-radius: .5rem; padding: .5rem; background: #fafbfc; }
.spc-kpi.alloc { border-color: #ffe69c; background: #fffbea; } .spc-kpi.free { border-color: #a3cfbb; background: #f1faf5; }
.spc-num { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.spc-bar { height: 1.4rem; font-weight: 600; }
.space-chart { width: 100%; height: auto; font-size: 13px; } /* drawing units: ≈ 9–10 px on screen (2026-10-12: text and lines were too big) */
.space-chart .grid { stroke: #e9ecef; stroke-width: 1; vector-effect: non-scaling-stroke; } .space-chart text { fill: #6c757d; }
.space-chart .area { fill: rgba(13, 110, 253, .15); } .space-chart .line { fill: none; stroke: #0d6efd; stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.space-chart .cap { stroke: #dc3545; stroke-width: 1; stroke-dasharray: 5 3; vector-effect: non-scaling-stroke; } .space-chart .cap-t { fill: #dc3545; font-weight: 600; }

/* Accounting → Rental space report (2026-10-11): orders with a month lacking a price */
.rsr-table tr.rsr-unpriced > td { background: var(--bs-warning-bg-subtle); }

/* recordBrowser line option `bar`: a full-width strip at the bottom of the list line (Space management, 2026-10-11) */
.ep-person.has-bar { flex-wrap: wrap; row-gap: .3rem; }
.ep-bar { flex-basis: 100%; }
.spc-list-bar { display: flex; height: .4rem; }

/* Business settings: the uploaded logo (2026-10-12) */
.br-logo-drop { transition: border-color .15s; }
.br-logo-box { width: 4.5rem; height: 4.5rem; flex: none; display: flex; align-items: center; justify-content: center; border-radius: .5rem; background: #f5f6f8; overflow: hidden; text-align: center; }
.br-logo-box img { width: 100%; height: 100%; object-fit: contain; background: #fff; }

/* Lite edition (2026-10-12): Affectations without Milk routes, suppliers nor team lead report (the confirmation SMS stay: owner, same day) */
.woa-lite #woa-routes, .woa-lite [data-sms-sup], .woa-lite [data-wo-report], .woa-lite .woa-ext { display: none !important; }

/* ===== Dashboard — Metrix SaaS Dashboard UI Kit look (owner, 2026-10-12; reference: docs/design/metrix — tokens.json, README.md, screen renders).
   Scoped to the Dashboard (.dash-metrix, set by dashboardProjects). Kit greys, cards, pills, Inter / Poppins; every accent comes from the
   business colour (--brand) instead of the kit's #5570F1, so the white-label colour stays. Project rows keep their height (owner: long list). ===== */
.dash-metrix {
  --mx-stroke: #F1F3F9; --mx-grey: #E1E2E9; --mx-ink: #45464E; --mx-ink-90: #2C2D33; --mx-text: #6E7079; --mx-muted: #8B8D97; --mx-faint: #A6A8B1; --mx-line: #CFD3D4;
  --mx-green: #519C66; --mx-red: #CC5F5F; --mx-peach: #FFCC91; --mx-primary: var(--brand, #5570F1);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: var(--mx-ink);
}
/* cards: white, 12px radius, no border, no shadow */
.dash-metrix .card { border: 0; border-radius: 12px; box-shadow: none; overflow: hidden; }
.dash-metrix .card-footer { border-top: 1px solid var(--mx-stroke); }
.dash-metrix .alert-light { border: 0 !important; border-radius: 12px; background: #fff; color: var(--mx-muted); }
/* the attention strip as the kit's summary cards: tinted icon tile, label over a Poppins number; the chosen one is the solid "highlight" card */
.dash-metrix .dash-att { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; }
.dash-metrix .dash-att-item { --att-icon: var(--mx-muted); gap: .9rem; padding: .85rem 1rem; background: #fff; border: 0; border-radius: 12px; box-shadow: none; color: var(--mx-ink); text-align: left; font-weight: 400; }
.dash-metrix .dash-att-item.att-input { --att-icon: var(--mx-red); }
.dash-metrix .dash-att-item.att-soon { --att-icon: var(--mx-primary); }
.dash-metrix .dash-att-item.att-slots { --att-icon: #B7791F; }
.dash-metrix .dash-att-item.att-quote { --att-icon: var(--mx-muted); }
.dash-metrix .dash-att-ico { flex: none; width: 2.6rem; height: 2.6rem; border-radius: 8px; display: grid; place-items: center; font-size: 1.15rem; color: var(--att-icon); background: color-mix(in srgb, var(--att-icon) 13%, white); }
.dash-metrix .dash-att-item.att-slots .dash-att-ico { background: rgba(255, 204, 145, .28); }
.dash-metrix .dash-att-ico .bi { color: inherit; }
.dash-metrix .dash-att-body { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.dash-metrix .dash-att-label { color: var(--mx-muted); font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-metrix .dash-att-n { min-width: 0; padding: 0; background: none; border-radius: 0; font-family: 'Poppins', 'Inter', system-ui, sans-serif; font-weight: 500; font-size: 1.45rem; line-height: 1.1; color: var(--mx-ink); }
.dash-metrix .dash-att-item:hover:not(:disabled) { box-shadow: 0 0 0 1px var(--mx-grey); border-color: transparent; }
.dash-metrix .dash-att-item.on { background: var(--mx-primary); box-shadow: none; }
.dash-metrix .dash-att-item.on .dash-att-ico { background: rgba(255, 255, 255, .18); color: #fff; }
.dash-metrix .dash-att-item.on .dash-att-label, .dash-metrix .dash-att-item.on .dash-att-n { color: #fff; }
.dash-metrix .dash-att-item.on .dash-att-n { background: none; }
.dash-metrix .dash-att-item.zero { opacity: 1; }
.dash-metrix .dash-att-item.zero .dash-att-n, .dash-metrix .dash-att-item.zero .dash-att-label { color: var(--mx-faint); font-weight: 500; }
.dash-metrix .dash-att-item.zero .dash-att-ico { filter: grayscale(1); opacity: .6; }
/* filters: the kit's light-bordered controls */
.dash-metrix .form-control, .dash-metrix .form-select, .dash-metrix .input-group-text { border-color: var(--mx-line); }
.dash-metrix .input-group-text { background: #fff; color: var(--mx-faint); }
.dash-metrix .form-control::placeholder { color: var(--mx-faint); }
/* the table: white header, kit greys, rows in #6E7079 */
.dash-metrix #dash-table { --bs-table-color: var(--mx-text); --bs-table-hover-color: var(--mx-text); color: var(--mx-text); }
.dash-metrix #dash-table > thead > tr > th { background: #fff; color: var(--mx-ink-90); font-weight: 500; border-bottom: 1px solid var(--mx-grey); padding-top: .85rem; padding-bottom: .85rem; white-space: nowrap; }
.dash-metrix #dash-table > tbody > tr > td { border-color: var(--mx-stroke); }
.dash-metrix #dash-table > tbody + tbody > tr.wo-main > td { border-top: 1px solid var(--mx-grey); }
.dash-metrix #dash-table > tbody.wo-group:nth-of-type(even) > tr > td { --bs-table-bg-type: color-mix(in srgb, var(--mx-primary) 5%, white); } /* the alternate project shading (owner, 2026-10-09) in the business colour */
.dash-metrix #dash-table > tbody.dash-project:hover > tr > td { --bs-table-bg-state: color-mix(in srgb, var(--mx-primary) 9%, white); }
.dash-metrix #dash-table a.font-monospace { color: var(--mx-primary); }
.dash-metrix #dash-table .fw-semibold { color: var(--mx-ink); font-weight: 600 !important; }
.dash-metrix #dash-table .text-secondary { color: var(--mx-faint) !important; }
.dash-metrix #dash-table a.badge.text-bg-light { background: rgba(94, 99, 102, .08) !important; border: 0 !important; color: var(--mx-muted) !important; border-radius: 8px; font-weight: 500; padding: .3em .7em; }
.dash-metrix #dash-table .pr-slots { border: 0; border-radius: 8px; font-weight: 500; padding: .2em .65em; }
.dash-metrix #dash-table .pr-slots.full { background: rgba(50, 147, 111, .16); color: var(--mx-green); }
.dash-metrix #dash-table .pr-slots.part { background: #FFF2E2; color: #8A5A12; }
.dash-metrix #dash-table .pr-slots.none { background: rgba(245, 126, 119, .16); color: var(--mx-red); }
.dash-metrix #dash-table .btn-sm { border-radius: 8px; font-size: .78rem; }
.dash-metrix #dash-table .btn-outline-secondary { --bs-btn-color: var(--mx-text); --bs-btn-border-color: var(--mx-line); --bs-btn-hover-bg: #F4F5FA; --bs-btn-hover-color: var(--mx-ink); --bs-btn-hover-border-color: var(--mx-line); }
/* status pills (kit: 8px radius, 16% tint) */
.mx-pill { display: inline-block; padding: .18rem .6rem; border-radius: 8px; font-size: .75rem; font-weight: 500; line-height: 1.25; vertical-align: .08em; white-space: nowrap; background: rgba(94, 99, 102, .1); color: #6E7079; }
.mx-pill.mx-st-lancer { background: color-mix(in srgb, var(--brand, #5570F1) 16%, white); color: color-mix(in srgb, var(--brand, #5570F1) 85%, black); }
.mx-pill.mx-st-fini { background: rgba(50, 147, 111, .16); color: #519C66; }
.mx-pill.mx-st-annule { background: rgba(245, 126, 119, .16); color: #CC5F5F; }
.mx-pill.mx-st-stand_by, .mx-pill.mx-st-reporte, .mx-pill.mx-st-non_fini, .mx-pill.mx-st-non_faite { background: #FFF2E2; color: #1C1D22; }
.mx-pill.mx-quote { background: rgba(50, 147, 111, .12); color: #519C66; }
/* step colours in the kit's palette (same meaning: green done, peach ongoing, red needs input, grey not started) */
.dash-metrix .dash-step.st-done { --step-fg: #2F6B42; --step-bg: rgba(50, 147, 111, .16); --step-bd: transparent; }
.dash-metrix .dash-step.st-ongoing { --step-fg: #7A4E0E; --step-bg: #FFF2E2; --step-bd: transparent; }
.dash-metrix .dash-step.st-input { --step-fg: #A33F3F; --step-bg: rgba(245, 126, 119, .18); --step-bd: transparent; }
.dash-metrix .dash-step.st-todo { --step-fg: #6E7079; --step-bg: #F1F3F9; --step-bd: transparent; }
.dash-metrix #dash-table .dash-steps-row .dash-step.st-done { background: #B9D8C2; color: #24543A; }
.dash-metrix #dash-table .dash-steps-row .dash-step.st-input { background: #F2B8B4; color: #7E2E2E; }
.dash-metrix #dash-table .dash-steps-row .dash-step.st-ongoing { background: #FFDDB3; color: #6B4510; }
.dash-metrix #dash-table .dash-steps-row .dash-step.st-todo { background: #E1E2E9; color: #53545C; }
.dash-metrix .dash-att-body { align-items: flex-start; }
.dash-metrix .dash-att-n { text-align: left; }
.dash-metrix a:not(.btn):not(.badge) { color: var(--mx-primary); }

/* ===== Sidebar — Metrix UI Kit look on the dark background (owner, 2026-10-12: kit sidebar from docs/design/metrix; 2026-10-13: "I like the
   way the sidebar is but I'd prefer it with a dark background like it was before"). Kept from the kit: Inter, Poppins for the business name
   and section title, solid rounded (12px) active item and open-section rail tile in the business colour (--brand), red counters (#CC5F5F, owner 2026-10-13; the kit's are peach),
   rounded search field. Background back to the dark slate (--sidebar-bg #0F172A, rail #0c1221). Overrides the older rules above. ===== */
.sidebar { color: rgba(255, 255, 255, .78); font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
.sidebar-brand { border-bottom: 1px solid rgba(255, 255, 255, .08); }
.sidebar-brand .app-name { color: #fff; font-family: 'Poppins', 'Inter', system-ui, sans-serif; font-weight: 600 !important; }
#brand-sub { color: rgba(255, 255, 255, .55); }
.brand-platform img { border-radius: 0; }
.sidebar-search > i { color: rgba(255, 255, 255, .45); }
.sidebar-search input { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); color: #fff; border-radius: 8px; }
.sidebar-search input::placeholder { color: rgba(255, 255, 255, .45); }
.sidebar-search input:focus { background: rgba(255, 255, 255, .1); border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 30%, transparent); outline: 0; }
.sidebar-search kbd { background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .6); border: 1px solid rgba(255, 255, 255, .12); }
.sidebar-nav .nav-link { color: rgba(255, 255, 255, .78); border-radius: 12px; }
.sidebar-nav .nav-link:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.sidebar-nav .nav-link.active { color: #fff; background: var(--brand); }
.sidebar-nav .nav-link.active:hover { color: #fff; background: color-mix(in srgb, var(--brand) 90%, black); }
.sidebar-nav .nav-section, .sidebar-nav .nav-subsection { color: rgba(255, 255, 255, .42); }
.sidebar-nav .nav-group-toggle:hover, .sidebar-nav .nav-section-toggle:hover { color: rgba(255, 255, 255, .8); background: rgba(255, 255, 255, .05); }
.sidebar-nav .nav-child-item .nav-link::before { border-color: rgba(255, 255, 255, .25); }
.sidebar-nav .nav-link.active::before { border-color: rgba(255, 255, 255, .6); }
.sidebar-nav li.nav-search-hit > .nav-link { outline: 1px solid var(--brand); }
.sidebar-nav .nav-count.badge { background: #CC5F5F !important; color: #fff !important; font-weight: 500; } /* red counters (owner, 2026-10-13: instead of the kit's peach) */
.sidebar-nav .nav-link.active .nav-count.badge { background: #fff !important; color: #CC5F5F !important; }
/* the rail of sections = the kit's collapsed menu */
.sb-rail { background: #0c1221; border-right: 1px solid rgba(255, 255, 255, .05); }
.sb-rail:not(.sb-rail-rest):hover, .sb-rail:not(.sb-rail-rest):focus-within { box-shadow: 6px 0 18px rgba(0, 0, 0, .4); }
.sb-rail-btn { color: rgba(255, 255, 255, .65); border-radius: 12px; }
.sb-rail-btn:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.sb-rail-btn.active { color: #fff; background: var(--brand); }
.sb-rail-btn.active::before { display: none; }
.sb-rail-count { background: #CC5F5F; color: #fff; font-weight: 600; }
.sb-rail-btn.active .sb-rail-count { box-shadow: 0 0 0 2px #0c1221; }
.sb-panel-title { color: #fff; font-family: 'Poppins', 'Inter', system-ui, sans-serif; font-weight: 500; }
.sidebar-footer { border-top: 1px solid rgba(255, 255, 255, .08); }
.app-version { color: rgba(255, 255, 255, .45); }
.app-version-name { color: rgba(255, 255, 255, .65); }
/* Dashboard UX from the kit (owner, 2026-10-12): toolbar inside the projects card, sortable headers, a second figure on the summary cards */
.dash-metrix .dash-toolbar { padding: .9rem 1rem .6rem; }
.dash-metrix .dash-card-title { font-size: 1.15rem; font-weight: 500; color: var(--mx-ink); white-space: nowrap; }
.dash-metrix .dash-card-count { margin-left: .25rem; padding: .1rem .5rem; border-radius: 8px; background: rgba(94, 99, 102, .08); color: var(--mx-muted); font-size: .8rem; font-weight: 500; vertical-align: .15em; }
.dash-metrix .dash-search { width: 23rem; max-width: 100%; }
.dash-metrix .dash-legend-line { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; padding: 0 1rem .7rem; }
.dash-metrix #dash-table > thead > tr > th.dash-sortable { cursor: pointer; user-select: none; }
.dash-metrix #dash-table > thead > tr > th.dash-sortable:hover { color: var(--mx-primary); }
.dash-metrix #dash-table > thead > tr > th.dash-sortable:focus-visible { outline: 2px solid var(--mx-primary); outline-offset: -2px; }
.dash-metrix .dash-sort-ico { margin-left: .35rem; font-size: .8em; color: var(--mx-line); }
.dash-metrix th.dash-sortable:hover .dash-sort-ico { color: var(--mx-faint); }
.dash-metrix th.dash-sortable.sorted { color: var(--mx-primary); }
.dash-metrix th.dash-sortable.sorted .dash-sort-ico { color: var(--mx-primary); }
.dash-metrix .dash-att-vals { display: flex; align-items: baseline; gap: .55rem; min-width: 0; }
.dash-metrix .dash-att-x { font-size: .78rem; color: var(--mx-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-metrix .dash-att-item.att-input .dash-att-x { color: var(--mx-red); }
.dash-metrix .dash-att-item.on .dash-att-x { color: rgba(255, 255, 255, .85); }
/* Top bar — Metrix UI Kit look (owner, 2026-10-12): white, Poppins title, the business in a peach chip, borderless bell / language, the user's initials in a rounded tile */
.topbar { background: #fff !important; border-bottom: 1px solid #F1F3F9 !important; font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
.topbar #page-title { font-family: 'Poppins', 'Inter', system-ui, sans-serif; font-weight: 500; color: #45464E; font-size: 1.45rem !important; }
.topbar-biz { display: inline-flex; align-items: center; gap: .5rem; max-width: 16rem; padding: .35rem .8rem; border-radius: 8px; background: #FEF5EA; color: #1C1D22; font-size: .9rem; white-space: nowrap; }
.topbar-biz.d-none { display: none !important; }
.topbar-biz > span { overflow: hidden; text-overflow: ellipsis; }
.topbar-biz .bi { color: #B7791F; }
.topbar .btn-outline-secondary { --bs-btn-color: #53545C; --bs-btn-border-color: transparent; --bs-btn-hover-bg: #F4F5FA; --bs-btn-hover-color: #1C1D22; --bs-btn-hover-border-color: transparent; --bs-btn-active-bg: #F4F5FA; --bs-btn-active-color: #1C1D22; --bs-btn-active-border-color: transparent; border-radius: 8px; }
.topbar #notif-btn { color: var(--brand); font-size: 1.05rem; }
.topbar #notif-count { background: #CC5F5F !important; }
.topbar-avatar { display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 8px; background: color-mix(in srgb, var(--brand) 14%, white); color: color-mix(in srgb, var(--brand) 80%, black); font-size: .8rem; font-weight: 600; letter-spacing: .02em; }
.topbar .user-menu-btn { padding: .2rem .5rem .2rem .25rem; color: #1C1D22; }

/* ===== Client Files — Metrix UI Kit look (owner, 2026-10-12; docs/design/metrix, "Customers" screen). Scoped to the page (.cf-metrix, set by
   the clients view); the list-left / file-right layout of 2026-10-04 stays. Accents in the business colour (--brand). ===== */
.cf-metrix { --mx-stroke: #F1F3F9; --mx-grey: #E1E2E9; --mx-ink: #45464E; --mx-text: #6E7079; --mx-muted: #8B8D97; --mx-faint: #A6A8B1; --mx-line: #CFD3D4;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: var(--mx-ink); }
.cf-metrix .card { border: 0; border-radius: 12px; box-shadow: none; }
.cf-metrix .btn { border-radius: 10px; }
.cf-metrix .btn-outline-secondary { --bs-btn-color: var(--mx-text); --bs-btn-border-color: var(--mx-line); --bs-btn-hover-bg: #F4F5FA; --bs-btn-hover-color: var(--mx-ink); --bs-btn-hover-border-color: var(--mx-line); }
.cf-metrix .form-control, .cf-metrix .form-select, .cf-metrix .input-group-text { border-color: var(--mx-line); }
.cf-metrix .input-group-text { background: #fff; color: var(--mx-faint); }
.cf-metrix #cf-count { color: var(--mx-muted); font-weight: 500; }
/* summary cards (kit "Dashboard Summary Card": icon tile, then label over a Poppins number) */
.cf-metrix .cf-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.cf-metrix .cf-sum-card { background: #fff; border-radius: 12px; padding: .9rem 1.1rem 1rem; display: flex; flex-direction: column; gap: .85rem; }
.cf-metrix .cf-sum-head { display: flex; align-items: center; gap: .75rem; }
.cf-metrix .cf-sum-ico { width: 2.6rem; height: 2.6rem; border-radius: 8px; display: grid; place-items: center; font-size: 1.15rem; }
.cf-metrix .cf-ico-blue { color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, white); }
.cf-metrix .cf-ico-peach { color: #B7791F; background: rgba(255, 204, 145, .28); }
.cf-metrix .cf-sum-caption { margin-left: auto; color: #BEC0CA; font-size: .8rem; }
.cf-metrix .cf-sum-figs { display: flex; gap: 2rem; flex-wrap: wrap; }
.cf-metrix .cf-sum-fig { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.cf-metrix .cf-sum-label { color: var(--mx-muted); font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 14rem; }
.cf-metrix .cf-sum-n { font-family: 'Poppins', 'Inter', system-ui, sans-serif; font-weight: 500; font-size: 1.45rem; line-height: 1.1; color: var(--mx-ink); }
/* the list of clients: kit list rows (rounded square avatar, separators, the chosen one tinted) */
.cf-metrix .ep-tree .card-header { background: #fff !important; border-bottom: 1px solid var(--mx-stroke); padding: .9rem 1rem; }
.cf-metrix .ep-tree .card-header strong { font-weight: 500; font-size: 1.1rem; color: var(--mx-ink); }
.cf-metrix .cf-list .ep-person { padding: .7rem 1rem; border-bottom: 1px solid var(--mx-stroke); border-left: 0; gap: .8rem; }
.cf-metrix .cf-list .ep-person:hover { background: #F8F9FC; }
.cf-metrix .cf-list .ep-person.active { background: color-mix(in srgb, var(--brand) 9%, white); box-shadow: inset 3px 0 0 var(--brand); }
.cf-metrix .ep-avatar { border-radius: 8px; background: color-mix(in srgb, var(--brand) 12%, white); color: color-mix(in srgb, var(--brand) 85%, black); }
.cf-metrix .ep-person.active .ep-avatar { background: var(--brand); color: #fff; }
.cf-metrix .ep-person-name > span { color: var(--mx-ink); font-size: .95rem; }
.cf-metrix .ep-person-name > small { color: var(--mx-faint) !important; font-size: .8rem; }
.cf-metrix .ep-person.active .ep-person-name > span { font-weight: 500; }
/* the client file */
.cf-metrix #cf-side .ep-avatar.lg { border-radius: 12px; background: var(--brand); color: #fff; }
.cf-metrix #cf-side .h4 { font-family: 'Poppins', 'Inter', system-ui, sans-serif; font-weight: 500; color: var(--mx-ink); font-size: 1.45rem; }
.cf-metrix #cf-side .text-secondary { color: var(--mx-muted) !important; }
.cf-metrix #cf-form h2.h6 { font-size: 1.05rem; font-weight: 500; color: var(--mx-ink); }
.cf-metrix #cf-form .form-label { color: var(--mx-muted); font-size: .88rem; margin-bottom: .3rem; }
.cf-metrix #cf-form .form-control, .cf-metrix #cf-form .form-select { background-color: #F4F5FA; border-color: transparent; border-radius: 8px; color: #1C1D22; }
.cf-metrix #cf-form .form-control:focus, .cf-metrix #cf-form .form-select:focus { background-color: #fff; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 15%, transparent); }
.cf-metrix #cf-form .form-control:disabled, .cf-metrix #cf-form .form-select:disabled { background-color: #F4F5FA; opacity: 1; color: #1C1D22; }
.cf-metrix #cf-emps .badge { background: color-mix(in srgb, var(--brand) 10%, white) !important; border: 0 !important; border-radius: 8px; color: color-mix(in srgb, var(--brand) 80%, black); font-weight: 500; padding: .4em .7em; }
.cf-metrix .form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
/* Project Files — Metrix (owner, 2026-10-13): the Client Files block above applies (.cf-metrix); a few project specifics */
.pf-metrix .cf-sum-label.cf-sum-warn { color: #CC5F5F; }
.pf-metrix #cf-side .h4.font-monospace { color: var(--brand); font-size: 1.35rem; }
.pf-metrix #cf-side .h6 { font-family: 'Poppins', 'Inter', system-ui, sans-serif; font-weight: 500; font-size: 1.1rem; color: var(--mx-ink); }
.pf-metrix #cf-side .card-body > div > .small.text-secondary { font-size: .85rem; }
.pf-metrix #cf-side .h5 { font-family: 'Poppins', 'Inter', system-ui, sans-serif; font-weight: 500; font-size: 1.35rem; color: var(--mx-ink); }
.pf-metrix #cf-side .pr-slots, .pf-metrix .ep-tree .pr-slots { border-radius: 8px; font-weight: 500; padding: .15em .6em; }
.pf-metrix #cf-side .pr-slots.full { background: rgba(50, 147, 111, .16); color: #519C66; }
.pf-metrix #cf-side .pr-slots.part { background: #FFF2E2; color: #8A5A12; }
.pf-metrix #cf-side .pr-slots.none { background: rgba(245, 126, 119, .16); color: #CC5F5F; }
.pf-metrix #cf-side h2.h6 { font-family: inherit; font-size: 1.05rem; }
.pf-metrix .ep-tree .badge.ep-skill { background: rgba(94, 99, 102, .08); color: var(--mx-muted); border: 0; border-radius: 8px; font-weight: 500; }
.cf-metrix .wo-cal-sticky { box-shadow: 0 -.5rem 1.25rem rgba(28, 29, 34, .08); } /* the calendar stays at the bottom over the scrolling file: keep its shadow */
/* Own Equipment — Metrix (owner, 2026-10-13; the kit's "Inventory" screen): Client Files kit styles (.cf-metrix: summary cards, inputs,
   buttons) + the table card: title + toolbar inside, white header, kit greys */
.oe-metrix .oe-toolbar { padding: .9rem 1rem .75rem; }
.oe-metrix .oe-title { font-size: 1.15rem; font-weight: 500; color: var(--mx-ink); white-space: nowrap; }
.oe-metrix .cf-sum-label.cf-sum-warn { color: #CC5F5F; }
.oe-metrix .form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.oe-metrix .card .table { --bs-table-color: var(--mx-text); color: var(--mx-text); }
.oe-metrix .card .table > thead > tr > th { background: #fff; color: #2C2D33; font-weight: 500; border-top: 1px solid var(--mx-grey); border-bottom: 1px solid var(--mx-grey); padding-top: .8rem; padding-bottom: .8rem; white-space: nowrap; }
.oe-metrix .card .table > thead > tr > th.sortable { cursor: pointer; }
.oe-metrix .card .table > thead > tr > th.sortable i { color: var(--mx-line); }
.oe-metrix .card .table > thead > tr > th.sorted, .oe-metrix .card .table > thead > tr > th.sorted i { color: var(--brand); }
.oe-metrix .card .table > tbody > tr > td { border-color: var(--mx-stroke); }
.oe-metrix .card .table > tbody strong { color: var(--mx-ink); font-weight: 600; }
.oe-metrix .card .table a.fw-semibold { color: var(--brand); }
.oe-metrix .card .table .btn-sm { border-radius: 8px; }
.oe-metrix .card .table > tbody > tr > td { white-space: nowrap; padding-top: .7rem; padding-bottom: .7rem; } /* one line per row, as the kit (the table scrolls sideways) */
.oe-metrix [data-add-offer] { color: var(--brand) !important; font-weight: 500; }
/* Client Price List — Metrix (owner, 2026-10-13): Client Files kit styles (.cf-metrix) + the price list and price tables (CSS only: the
   panels are shared with Supplier Rates, which keeps its look) — white headers, kit greys, Bootstrap badges shown as kit pills */
.cpr-metrix .cpl-table, .cpr-metrix .cp-table { --bs-table-color: var(--mx-text); color: var(--mx-text); }
.cpr-metrix .cpl-table > thead > tr > th, .cpr-metrix .cp-table > thead > tr > th { background: #fff; color: #2C2D33; font-weight: 500; border-bottom: 1px solid var(--mx-grey); padding-top: .65rem; padding-bottom: .65rem; white-space: nowrap; }
.cpr-metrix .cpl-table > tbody > tr > td, .cpr-metrix .cp-table > tbody > tr > td { border-color: var(--mx-stroke); }
.cpr-metrix .cpl-table > tbody > tr.table-active > td, .cpr-metrix .cpl-table > tbody > tr.active > td { --bs-table-bg-state: color-mix(in srgb, var(--brand) 9%, white); }
.cpr-metrix .cpl-table strong, .cpr-metrix .cp-table strong { color: var(--mx-ink); font-weight: 600; }
.cpr-metrix .cp-wrap { border: 1px solid var(--mx-stroke); border-radius: 12px; }
.cpr-metrix .cp-table tr.priced td:first-child { border-left-color: var(--brand); }
.cpr-metrix .cp-table .cp-price input, .cpr-metrix .cp-table input.form-control { background-color: #F4F5FA; border-color: transparent; border-radius: 8px; }
.cpr-metrix .cp-table input.form-control:focus { background-color: #fff; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 15%, transparent); }
.cpr-metrix #cf-side .badge { border: 0 !important; border-radius: 8px; font-weight: 500; padding: .3em .65em; }
.cpr-metrix #cf-side .badge.text-bg-success { background: rgba(50, 147, 111, .16) !important; color: #519C66 !important; }
.cpr-metrix #cf-side .badge.text-bg-danger { background: rgba(245, 126, 119, .16) !important; color: #CC5F5F !important; }
.cpr-metrix #cf-side .badge.text-bg-warning { background: #FFF2E2 !important; color: #8A5A12 !important; }
.cpr-metrix #cf-side .badge.text-bg-secondary, .cpr-metrix #cf-side .badge.text-bg-light { background: rgba(94, 99, 102, .1) !important; color: var(--mx-text) !important; }
.cpr-metrix #cf-side .badge.text-bg-primary, .cpr-metrix #cf-side .badge.text-bg-info { background: color-mix(in srgb, var(--brand) 14%, white) !important; color: color-mix(in srgb, var(--brand) 85%, black) !important; }
.cpr-metrix #cf-side h2.h6, .cpr-metrix #cf-side .card-body > .d-flex > strong { font-size: 1.05rem; font-weight: 500; color: var(--mx-ink); }
.cpr-metrix .btn-sm { border-radius: 8px; }
.cpr-metrix .cpl-table .text-primary { color: var(--brand) !important; }
.cpr-metrix #cf-side a:not(.btn):not(.badge), .cpr-metrix #cf-side .text-primary, .cpr-metrix #cf-side .btn-link { color: var(--brand) !important; }
/* Work orders — Metrix (owner, 2026-10-13; the kit's "Orders" table): Client Files kit styles (.cf-metrix) + the work order table */
.wom-metrix .cf-sum-label.cf-sum-warn { color: #CC5F5F; }
.wom-metrix .wo-panel .wo-project { color: var(--mx-text); }
.wom-metrix .wo-panel .wo-project strong { color: var(--mx-ink); }
.wom-metrix .wo-panel > .d-flex > strong { font-size: 1.1rem; font-weight: 500; color: var(--mx-ink); }
.wom-metrix .wo-table { --bs-table-color: var(--mx-text); color: var(--mx-text); }
.wom-metrix .wo-table > thead > tr > th { background: #fff; color: #2C2D33; font-weight: 500; border-top: 1px solid var(--mx-grey); border-bottom: 1px solid var(--mx-grey); padding-top: .7rem; padding-bottom: .7rem; }
.wom-metrix .wo-table > tbody > tr > td { border-color: var(--mx-stroke); }
.wom-metrix .wo-table > tbody.wo-group + tbody.wo-group > tr.wo-main > td { border-top: 1px solid var(--mx-grey); }
.wom-metrix .wo-table tbody.wo-group:hover > tr > td { background-color: #F8F9FC; }
.wom-metrix .wo-table tr.wo-main td.font-monospace, .wom-metrix .wo-table tr.wo-main .font-monospace { color: var(--brand); }
.wom-metrix .wo-table .badge.text-bg-light { background: rgba(94, 99, 102, .08) !important; border: 0 !important; border-radius: 8px; color: var(--mx-text); font-weight: 500; }
.wom-metrix .wo-table .badge.text-bg-danger { background: rgba(245, 126, 119, .16) !important; color: #CC5F5F !important; border-radius: 8px; font-weight: 500; }
.wom-metrix .wo-table .pr-slots { border-radius: 8px; font-weight: 500; padding: .15em .6em; }
.wom-metrix .wo-table .pr-slots.full { background: rgba(50, 147, 111, .16); color: #519C66; }
.wom-metrix .wo-table .pr-slots.part { background: #FFF2E2; color: #8A5A12; }
.wom-metrix .wo-table .pr-slots.none { background: rgba(245, 126, 119, .16); color: #CC5F5F; }
.wom-metrix .wo-table .btn-sm { border-radius: 8px; }
.wom-metrix .wo-panel a:not(.btn):not(.badge):not(.pr-slots) { color: var(--brand); }
.wom-metrix .wo-cal-sticky { box-shadow: 0 -.5rem 1.25rem rgba(28, 29, 34, .08); }

/* ===== Shared Metrix kit look for a whole page (.mx-page, with .cf-metrix for cards / inputs / summary cards) — owner, 2026-10-13,
   Dispatch pages (New Work Orders, Todo Calendar, Affectations, SMS Messages). Tables: white header, kit greys; Bootstrap badges shown as
   kit pills; buttons / links / switches in the business colour. ===== */
.mx-page .table { --bs-table-color: var(--mx-text); color: var(--mx-text); }
.mx-page .table > thead > tr > th { background: #fff; color: #2C2D33; font-weight: 500; border-bottom: 1px solid var(--mx-grey); }
.mx-page .table > tbody > tr > td { border-color: var(--mx-stroke); }
.mx-page .table strong, .mx-page .table .fw-semibold { color: var(--mx-ink); }
.mx-page .badge { border-radius: 8px; font-weight: 500; }
.mx-page .badge.text-bg-success { background: rgba(50, 147, 111, .16) !important; color: #519C66 !important; }
.mx-page .badge.text-bg-danger { background: rgba(245, 126, 119, .16) !important; color: #CC5F5F !important; }
.mx-page .badge.text-bg-warning { background: #FFF2E2 !important; color: #8A5A12 !important; }
.mx-page .badge.text-bg-secondary, .mx-page .badge.text-bg-light { background: rgba(94, 99, 102, .1) !important; color: var(--mx-text) !important; border-color: transparent !important; }
.mx-page .badge.text-bg-primary, .mx-page .badge.text-bg-info { background: color-mix(in srgb, var(--brand) 14%, white) !important; color: color-mix(in srgb, var(--brand) 85%, black) !important; }
.mx-page .btn-sm { border-radius: 8px; }
.mx-page .btn-outline-primary { --bs-btn-color: var(--brand); --bs-btn-border-color: color-mix(in srgb, var(--brand) 45%, white); --bs-btn-hover-bg: var(--brand); --bs-btn-hover-border-color: var(--brand); --bs-btn-active-bg: var(--brand); --bs-btn-active-border-color: var(--brand); }
.mx-page .btn-group > .btn-primary, .mx-page .btn-group > .btn-outline-primary { border-radius: 8px !important; margin-right: .25rem; }
.mx-page a:not(.btn):not(.badge):not(.pr-slots):not(.todo-wo) { color: var(--brand); }
.mx-page .form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.mx-page .pr-slots { border-radius: 8px; font-weight: 500; }
.mx-page .pr-slots.full { background: rgba(50, 147, 111, .16); color: #519C66; }
.mx-page .pr-slots.part { background: #FFF2E2; color: #8A5A12; }
.mx-page .pr-slots.none { background: rgba(245, 126, 119, .16); color: #CC5F5F; }
.mx-page .cf-sum-label.cf-sum-warn { color: #CC5F5F; }
.mx-page .wo-table tbody.wo-group:hover > tr > td { background-color: #F8F9FC; }
.mx-page .wo-table > tbody.wo-group + tbody.wo-group > tr.wo-main > td { border-top: 1px solid var(--mx-grey); }
/* Todo Calendar: the month as a kit card */
.todo-metrix .todo-cal { border: 0; border-radius: 12px; background: #fff; }
.todo-metrix .todo-cal-head > div { background: #fff; color: var(--mx-muted); font-weight: 500; border-bottom: 1px solid var(--mx-grey); }
.todo-metrix .todo-day { border-color: var(--mx-stroke); }
.todo-metrix .todo-day:hover { background: #F8F9FC; }
.todo-metrix .todo-day.other { background: #FAFBFD; opacity: .75; }
.todo-metrix .todo-day-num { color: var(--mx-ink); font-weight: 500; }
.todo-metrix .todo-item { border-radius: 8px; background: color-mix(in srgb, var(--brand) 8%, white); border-left-color: var(--brand); color: var(--mx-ink); }
.todo-metrix .todo-item.done { background: rgba(50, 147, 111, .12); border-left-color: #519C66; }
.todo-metrix .todo-item.overdue { background: rgba(245, 126, 119, .14); border-left-color: #CC5F5F; }
.todo-metrix .todo-item.cancelled { background: rgba(94, 99, 102, .08); border-left-color: #A6A8B1; }
.todo-metrix .todo-item .todo-wo { color: var(--brand); }
.todo-metrix #todo-month { font-family: 'Poppins', 'Inter', system-ui, sans-serif; font-weight: 500; color: var(--mx-ink); }
.todo-metrix #todo-overdue .card { border: 0 !important; background: rgba(245, 126, 119, .08); }
/* Affectations: the day's stat tiles as kit summary cards */
.woa-metrix .woa-stats { gap: 1rem; }
.woa-metrix .woa-stat { border: 0; border-radius: 12px; background: #fff; padding: .9rem 1.1rem; }
.woa-metrix .woa-stat:hover { box-shadow: 0 0 0 1px var(--mx-grey); }
.woa-metrix .woa-stat.active { box-shadow: 0 0 0 2px var(--brand); }
.woa-metrix .woa-stat-title { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: .92rem; color: var(--mx-muted); }
.woa-metrix .woa-stat-num { font-family: 'Poppins', 'Inter', system-ui, sans-serif; font-weight: 500; font-size: 1.6rem; color: var(--mx-ink); }
.woa-metrix .woa-stat-bar { height: .35rem; border-radius: 1rem; background: #EEF0FA; }
.woa-metrix .woa-stat-bar .progress-bar { border-radius: 1rem; }
.woa-metrix .woa-stat-foot, .woa-metrix .woa-stat-sub { color: var(--mx-muted); }
.woa-metrix .woa-table > thead > tr > th { background: #fff !important; }
.woa-metrix .asg-table .table > thead > tr > th { background: #F8F9FC; }
/* SMS Messages: the kit "Messages" screen — contacts list and thread in one white card, rounded bubbles */
.smsm-metrix .smsm { border: 0; border-radius: 12px; background: #fff; }
.smsm-metrix .smsm-side { border-right: 1px solid var(--mx-stroke); }
.smsm-metrix .smsm-side-head, .smsm-metrix .smsm-head, .smsm-metrix .smsm-wos { border-color: var(--mx-stroke); }
.smsm-metrix .smsm-item { border-bottom: 1px solid var(--mx-stroke); padding: .75rem 1rem; }
.smsm-metrix .smsm-item:hover { background: #F8F9FC; }
.smsm-metrix .smsm-item.active { background: color-mix(in srgb, var(--brand) 9%, white); box-shadow: inset 3px 0 0 var(--brand); }
.smsm-metrix .smsm-avatar { border-radius: 8px; background: color-mix(in srgb, var(--brand) 14%, white); color: color-mix(in srgb, var(--brand) 85%, black); font-weight: 600; }
.smsm-metrix .smsm-item.active .smsm-avatar { background: var(--brand); color: #fff; }
.smsm-metrix .smsm-avatar.unknown { background: #F1F3F9; color: var(--mx-muted); }
.smsm-metrix .smsm-name { color: var(--mx-ink); }
.smsm-metrix .smsm-time, .smsm-metrix .smsm-phone, .smsm-metrix .smsm-preview { color: var(--mx-faint); }
.smsm-metrix .smsm-item.unread .smsm-name, .smsm-metrix .smsm-item.unread .smsm-preview { color: #1C1D22; }
.smsm-metrix .smsm-msgs { background: #FAFBFD; }
.smsm-metrix .smsm-bubble { border-radius: 14px; }
.smsm-metrix .smsm-msg.in .smsm-bubble { background: #fff; color: #1C1D22; box-shadow: 0 0 0 1px var(--mx-stroke); border-bottom-left-radius: 4px; }
.smsm-metrix .smsm-msg.out .smsm-bubble { border-bottom-right-radius: 4px; }
.smsm-metrix .smsm-msg.system .smsm-bubble { background: #FFF6EC; border: 1px dashed #F5D2A8; color: #6E5634; }
.smsm-metrix .smsm-meta { color: var(--mx-faint); }
.smsm-metrix .smsm-day span { background: #EEF0FA; color: var(--mx-muted); }
.smsm-metrix .smsm-compose { border-color: var(--mx-stroke); }
.smsm-metrix .smsm-compose textarea { background: #F4F5FA; border-color: transparent; border-radius: 10px; }
.smsm-metrix .smsm-compose textarea:focus { background: #fff; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 15%, transparent); }
.smsm-metrix .btn-outline-info { --bs-btn-color: var(--brand); --bs-btn-border-color: color-mix(in srgb, var(--brand) 40%, white); --bs-btn-hover-bg: var(--brand); --bs-btn-hover-border-color: var(--brand); --bs-btn-active-bg: var(--brand); border-radius: 8px; }
/* rail counters fully visible (owner, 2026-10-13: "the red circle is cut at the edge of the section button"): the button no longer clips
   (the rail itself still hides the folded labels), and the circle sits over the button's top-right corner */
.sb-rail-btn { overflow: visible; }
.sb-rail-count { top: -.3rem; right: -.35rem; box-shadow: 0 0 0 2px #0c1221; z-index: 1; }
.sb-rail:not(.sb-rail-rest):hover .sb-rail-count, .sb-rail:not(.sb-rail-rest):focus-within .sb-rail-count { top: .65rem; right: .5rem; box-shadow: none; }
/* Operations board — Metrix (owner, 2026-10-13): shared kit block (.cf-metrix .mx-page) + the board specifics */
.ops-metrix .cf-ico-red { color: #CC5F5F; background: rgba(245, 126, 119, .16); }
.ops-metrix .ops-summary { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.ops-metrix .ops-summary .cf-sum-figs { gap: 1.5rem; }
.ops-metrix .cf-sum-n.cf-sum-warn { color: #CC5F5F; }
.ops-metrix .cf-sum-n.ops-warn, .ops-metrix .cf-sum-label.ops-warn { color: #B7791F; }
.ops-metrix .cf-sum-n.ops-ok { color: #519C66; }
.ops-metrix .ops-stat-of { font-size: 1rem; color: var(--mx-faint); font-weight: 400; }
.ops-metrix #ops-when .h5 { font-family: 'Poppins', 'Inter', system-ui, sans-serif; font-weight: 500; color: var(--mx-ink); }
.ops-metrix .ops-live { border-color: var(--mx-line); color: var(--mx-muted); background: #fff; }
.ops-metrix .ops-live.on { background: rgba(50, 147, 111, .12); color: #519C66; border-color: transparent; }
.ops-metrix .card > .card-header { background: #fff; border-bottom: 1px solid var(--mx-stroke); font-weight: 500; color: var(--mx-ink); }
.ops-metrix .ops-call > .card-header { background: rgba(245, 126, 119, .1); color: #A33F3F; border-bottom-color: transparent; }
.ops-metrix .ops-call.calm > .card-header { background: #fff; color: var(--mx-ink); }
.ops-metrix .ops-call-card { border: 1px solid var(--mx-stroke); border-radius: 12px; background: #FAFBFD; padding: .65rem .8rem; }
.ops-metrix .ops-wo.is-done { box-shadow: inset 3px 0 0 #519C66; }
.ops-metrix .ops-wo-alert { background: #FFF2E2; color: #8A5A12; border-color: var(--mx-stroke); }
.ops-metrix .ops-table th { text-transform: none; letter-spacing: 0; font-size: .85rem; font-weight: 500; color: #2C2D33; background: #fff; }
.ops-metrix .ops-table tr.ops-row-alert td { background: rgba(245, 126, 119, .08); }
.ops-metrix .ops-table tr.ops-row-empty td { background: #FFF8EE; }
.ops-metrix .ops-step { border-radius: 8px; border-color: var(--mx-line); color: var(--mx-muted); }
.ops-metrix .ops-step.done { background: var(--brand); border-color: var(--brand); color: #fff; }
.ops-metrix .ops-step.now { border-color: var(--brand); color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, white); }
.ops-metrix .ops-step.warn { border-color: transparent; background: #FFF2E2; color: #8A5A12; }
/* the SMS window, as SMS Messages */
.ops-metrix .ops-chat { border-radius: 12px; }
.ops-metrix .ops-chat-item { border-bottom-color: var(--mx-stroke); }
.ops-metrix .ops-chat-item:hover { background: #F8F9FC; }
.ops-metrix .ops-chat-item.unread { background: color-mix(in srgb, var(--brand) 8%, white); box-shadow: inset 3px 0 0 var(--brand); }
.ops-metrix .ops-thread { background: #FAFBFD; }
.ops-metrix .ops-bubble { border-radius: 14px; border-color: var(--mx-stroke); color: #1C1D22; }
.ops-metrix .ops-msg.out .ops-bubble { background: var(--brand); border-color: var(--brand); color: #fff; border-bottom-right-radius: 4px; }
.ops-metrix .ops-msg.sys .ops-bubble { background: #FFF6EC; border: 1px dashed #F5D2A8; color: #6E5634; }
.ops-metrix .ops-msg-meta { color: var(--mx-faint); }
.ops-metrix .ops-summary .cf-sum-label::first-letter { text-transform: uppercase; }
@media (min-width: 1200px) { .ops-metrix .ops-summary { grid-template-columns: 1fr 1fr 1.55fr; } .ops-metrix .ops-summary .cf-sum-figs { flex-wrap: nowrap; gap: 1.25rem; } }
/* Store → Orders — Metrix (owner, 2026-10-13): shared kit block + the warehouse specifics (truck cards, item cards, checks, crew chips) */
.wh-metrix .cf-sum-of { font-size: 1rem; color: var(--mx-faint); font-weight: 400; }
.wh-metrix .wh-table > thead > tr > th { background: #fff; color: #2C2D33; font-weight: 500; }
.wh-metrix .wh-veh-cell { background: #FAFBFD; border-right-color: var(--mx-stroke); }
.wh-metrix .wh-veh { border: 0; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--mx-stroke); border-left: 4px solid var(--brand); }
.wh-metrix .wh-veh > .bi-truck { color: var(--brand); }
.wh-metrix .wh-veh.rented { border-left-color: #5570F1; } .wh-metrix .wh-veh.rented > .bi-truck { color: #5570F1; }
.wh-metrix .wh-veh.todo { box-shadow: 0 0 0 1px #F5D2A8; border-left: 4px dashed #E0A458; background: #FFF8EE; } .wh-metrix .wh-veh.todo > .bi-truck { color: #B7791F; }
.wh-metrix .wh-veh.none { border-left-color: var(--mx-line); } .wh-metrix .wh-veh.none > .bi-truck { color: var(--mx-line); }
.wh-metrix .wh-veh.loaded { background: rgba(50, 147, 111, .06); }
.wh-metrix .wh-veh-name { font-family: 'Poppins', 'Inter', system-ui, sans-serif; font-weight: 500; color: var(--mx-ink); }
.wh-metrix .wh-veh-sub { color: var(--mx-muted); }
.wh-metrix .wh-veh-load { border-radius: 8px; border-color: var(--mx-line); }
.wh-metrix .wh-veh-load.done { background: rgba(50, 147, 111, .16); border-color: transparent; color: #519C66; }
.wh-metrix .wh-item-check { border-radius: 10px; border-color: var(--mx-stroke); background: #fff; }
.wh-metrix .wh-item-check.equipment { border-left-color: var(--brand); }
.wh-metrix .wh-item-check.done { background: rgba(50, 147, 111, .1); border-color: transparent; border-left-color: #519C66; }
.wh-metrix .wh-item-check.done span { color: #2F6B42; }
.wh-metrix .wh-item-fam { color: var(--mx-faint); }
.wh-metrix .wh-item { border-radius: 8px; border-color: var(--mx-stroke); }
.wh-metrix .wh-progress { border-radius: 8px; font-weight: 600; }
.wh-metrix .wh-progress.all { background: rgba(50, 147, 111, .16); color: #519C66; }
.wh-metrix .wh-progress.some { background: #FFF2E2; color: #8A5A12; }
.wh-metrix .wh-table .wh-check.done { background: rgba(50, 147, 111, .08); }
.wh-metrix .wh-person { border-radius: 8px; border-color: var(--mx-stroke); background: #F4F5FA; color: var(--mx-ink); }
.wh-metrix .wh-person.lead { border-color: #FFCC91; background: #FFF6EC; }
.wh-metrix .wh-person.wh-unassigned { border-color: #E0A458; color: #8A5A12; background: transparent; }
.wh-metrix .wh-place { border-radius: 8px; border-color: var(--mx-line); }
/* the "subtle" Bootstrap badges as kit pills too (.mx-page pages) */
.mx-page .badge.text-bg-success-subtle { background: rgba(50, 147, 111, .12) !important; color: #519C66 !important; border: 0 !important; }
.mx-page .badge.text-bg-danger-subtle { background: rgba(245, 126, 119, .14) !important; color: #CC5F5F !important; border: 0 !important; }
.mx-page .badge.text-bg-warning-subtle, .mx-page .badge.text-bg-info-subtle { background: #FFF2E2 !important; color: #8A5A12 !important; border: 0 !important; }
/* Warehouse → Orders / Space management — Metrix (owner, 2026-10-13) */
.sto-metrix .sto-card { border: 0; border-radius: 12px; }
.sto-metrix .sto-card .font-monospace.fw-semibold { color: var(--brand); }
.sto-metrix .sto-line { border-top: 1px solid var(--mx-stroke); }
.spc-metrix .spc-kpi { border: 0; border-radius: 12px; background: #F4F5FA; padding: .75rem .9rem; }
.spc-metrix .spc-kpi.alloc { background: #FFF2E2; } .spc-metrix .spc-kpi.free { background: rgba(50, 147, 111, .1); }
.spc-metrix .spc-num { font-family: 'Poppins', 'Inter', system-ui, sans-serif; font-weight: 500; color: var(--mx-ink); }
.spc-metrix .spc-bar { border-radius: 8px; background: #EEF0FA; }
.spc-metrix .spc-list-bar { border-radius: 1rem; background: #EEF0FA; }
.spc-metrix .progress-bar.bg-success { background-color: #519C66 !important; } .spc-metrix .progress-bar.bg-warning { background-color: #E0A458 !important; } .spc-metrix .progress-bar.bg-danger { background-color: #CC5F5F !important; }
.spc-metrix #cf-side h2.h6, .spc-metrix #cf-side .card-body > .d-flex > strong { font-size: 1.05rem; font-weight: 500; color: var(--mx-ink); }

.mx-page .btn-primary .badge { background: rgba(255, 255, 255, .25) !important; color: #fff !important; }
.spc-metrix .space-chart .area { fill: color-mix(in srgb, var(--brand) 14%, transparent); } .spc-metrix .space-chart .line { stroke: var(--brand); stroke-width: 1.75; }
/* Field → Timesheets / Expenses — Metrix (owner, 2026-10-13): shared kit block + the work order cards and their tables */
.sv-metrix .cf-sum-of { font-size: .95rem; color: var(--mx-faint); font-weight: 400; }
.sv-metrix .sv-job { border: 0; border-radius: 12px; overflow: hidden; }
.sv-metrix .sv-job-head { border-bottom-color: var(--mx-stroke); color: var(--mx-text); }
.sv-metrix .sv-job-head .fw-semibold, .sv-metrix .sv-job-head strong, .sv-metrix .sv-job-head .font-monospace { color: var(--mx-ink); }
.sv-metrix .sv-job-head .font-monospace.fw-semibold { color: var(--brand); }
.sv-metrix .sv-table th { text-transform: none; letter-spacing: 0; font-size: .8rem; font-weight: 500; color: #2C2D33; background: #fff; border-bottom: 1px solid var(--mx-grey); }
.sv-metrix .sv-table td { border-color: var(--mx-stroke); }
.sv-metrix .sv-table .form-control-sm, .sv-metrix .sv-table .form-select-sm { background-color: #F4F5FA; border-color: transparent; border-radius: 8px; }
.sv-metrix .sv-table .form-control-sm:focus, .sv-metrix .sv-table .form-select-sm:focus { background-color: #fff; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 15%, transparent); }
.sv-metrix .sv-table tr.locked td { background: #FAFBFD; color: var(--mx-muted); }
.sv-metrix .sv-table tr.locked .form-control, .sv-metrix .sv-table tr.locked .form-select { background: #EEF0F5; }
.sv-metrix .sv-table tr.row-add td { background: color-mix(in srgb, var(--brand) 5%, white); }
.sv-metrix .sv-table td.total { color: var(--mx-ink); }
.sv-metrix .btn-group > .btn-outline-secondary.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.sv-metrix .btn-group > .btn-outline-secondary { border-radius: 8px !important; margin-right: .25rem; }
/* PEVL pages — Metrix (owner, 2026-10-13: Truck Logbook, Logbook Reviews, Vehicle Files, Drivers Files): shared kit block + specifics */
.pevl-metrix .cf-ico-red { color: #CC5F5F; background: rgba(245, 126, 119, .16); }
.pevl-metrix .cf-sum-of { font-size: .95rem; color: var(--mx-faint); font-weight: 400; }
.pevl-metrix .nav-pills .nav-link { border-radius: 10px; color: var(--mx-text); }
.pevl-metrix .nav-pills .nav-link.active { background: var(--brand); color: #fff; }
.pevl-metrix .table-danger > td, .pevl-metrix tr.table-danger td { --bs-table-bg: rgba(245, 126, 119, .08); --bs-table-color: var(--mx-ink); }
.pevl-metrix .lr-table tr.lr-done td { color: var(--mx-faint); }
.pevl-metrix .tf-photo { border: 0; border-radius: 12px; background: #F4F5FA; }
.pevl-metrix .tf-kpi { border: 0; border-radius: 12px; background: #F4F5FA; padding: .6rem .9rem; }
.pevl-metrix .tf-kpi-label { text-transform: none; letter-spacing: 0; font-size: .85rem; color: var(--mx-muted); }
.pevl-metrix .tf-kpi-value { font-family: 'Poppins', 'Inter', system-ui, sans-serif; font-weight: 500; color: var(--mx-ink); }
.pevl-metrix .tf-total { background: #F4F5FA; border-radius: 10px; padding: .55rem .75rem; }
.pevl-metrix .tf-total .tf-kpi-label { font-size: .8rem; }
.pevl-metrix .tf-total .fw-semibold { font-family: 'Poppins', 'Inter', system-ui, sans-serif; font-weight: 500 !important; color: var(--mx-ink); }
.pevl-metrix .df-avatar { border-radius: 14px; background: color-mix(in srgb, var(--brand) 14%, white); color: color-mix(in srgb, var(--brand) 85%, black); }
.pevl-metrix #cf-side h2.h6, .pevl-metrix #cf-side .card-body > .d-flex > strong, .pevl-metrix #cf-side .card-header { font-size: 1.05rem; font-weight: 500; color: var(--mx-ink); background: #fff; }
.pevl-metrix #cf-side .h4, .pevl-metrix #cf-side .h5 { font-family: 'Poppins', 'Inter', system-ui, sans-serif; font-weight: 500; color: var(--mx-ink); }
.pevl-metrix .df-trips tr.df-warn > td:first-child { box-shadow: inset 3px 0 0 #CC5F5F; }
/* Accounting reports — Metrix (owner, 2026-10-13: Employee Salary, Supplier Salary, Pre-Invoice, Project Cost, Rental Space) */
.acc-metrix .sal-filters, .acc-metrix .salrep { border: 0; border-radius: 12px; }
.acc-metrix .salrep { padding: 1.5rem; }
.acc-metrix .salrep-head h2 { font-weight: 500; color: var(--mx-ink); }
.acc-metrix .salrep-sum { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: .75rem; border: 0; padding: 0; margin-bottom: 1.25rem; }
.acc-metrix .salrep-sum > div { background: #F4F5FA; border-radius: 12px; padding: .75rem 1rem; gap: .2rem; }
.acc-metrix .salrep-sum > div.salrep-key { background: color-mix(in srgb, var(--brand) 10%, white); }
.acc-metrix .salrep-sum .small { font-size: .85rem; color: var(--mx-muted) !important; }
.acc-metrix .salrep-sum strong { font-family: 'Poppins', 'Inter', system-ui, sans-serif; font-weight: 500; font-size: 1.35rem; color: var(--mx-ink); }
.acc-metrix .salrep-sum strong.text-danger { color: #CC5F5F !important; }
.acc-metrix .salrep-sum strong.text-success { color: #519C66 !important; }
.acc-metrix .salrep-emp-head { background: #F4F5FA; border-radius: 10px; padding: .55rem .85rem; color: var(--mx-ink); }
.acc-metrix .salrep-table thead th, .acc-metrix .suprep-table thead th { color: #2C2D33; font-weight: 500; font-size: .8rem; border-bottom: 1px solid var(--mx-grey); }
.acc-metrix .salrep-table td, .acc-metrix .suprep-table td { border-color: var(--mx-stroke); }
.acc-metrix .salrep-table tr.salrep-proj td, .acc-metrix .suprep-table tr.salrep-proj td { background: #FAFBFD; color: var(--mx-text); }
.acc-metrix .salrep-table tr.salrep-total td, .acc-metrix .suprep-table tr.salrep-total td { border-top: 1px solid var(--mx-grey); color: var(--mx-ink); }
.acc-metrix .alert-light.border { background: #F4F5FA; border: 0 !important; border-radius: 10px; color: var(--mx-text); }
@media print { .acc-metrix .salrep-sum > div { background: none !important; border: 1px solid #ccc; } }
/* Employee Files — Metrix (owner, 2026-10-13): the Client Files kit block (.cf-metrix) + the ids of the employees view */
.emp-metrix #ep-count { color: var(--mx-muted); font-weight: 500; }
.emp-metrix .ep-tree .alert-light.border { background: #F4F5FA; border: 0 !important; border-radius: 10px; color: var(--mx-text); }
.emp-metrix .ep-people.ep-flat .ep-person { padding: .7rem 1rem; border-bottom: 1px solid var(--mx-stroke); border-left: 0; }
.emp-metrix .ep-person:hover { background: #F8F9FC; }
.emp-metrix .ep-person.active { background: color-mix(in srgb, var(--brand) 9%, white); box-shadow: inset 3px 0 0 var(--brand); }
.emp-metrix .ep-person.active .ep-person-name > span { color: var(--mx-ink); }
.emp-metrix .ep-skill { background: color-mix(in srgb, var(--brand) 10%, white); border: 0; border-radius: 6px; font-weight: 500; }
.emp-metrix #ep-detail .h4, .emp-metrix #ep-detail h1, .emp-metrix #ep-detail .h5 { font-family: 'Poppins', 'Inter', system-ui, sans-serif; font-weight: 500; color: var(--mx-ink); }
.emp-metrix #ep-detail .ep-avatar.lg { border-radius: 12px; }
.emp-metrix #ep-detail h2.h6 { font-size: 1.05rem; font-weight: 500; color: var(--mx-ink); }
.emp-metrix #ep-detail .form-label { color: var(--mx-muted); font-size: .88rem; margin-bottom: .3rem; }
.emp-metrix #ep-detail .form-control, .emp-metrix #ep-detail .form-select, .emp-metrix #ep-detail .input-group-text { background-color: #F4F5FA; border-color: transparent; border-radius: 8px; }
.emp-metrix #ep-detail .input-group > :not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.emp-metrix #ep-detail .input-group > :not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.emp-metrix #ep-detail .form-control:focus, .emp-metrix #ep-detail .form-select:focus { background-color: #fff; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 15%, transparent); }
.emp-metrix #ep-detail .form-control.is-invalid { border-color: #CC5F5F; }
.emp-metrix #ep-detail .ep-skills thead th { background: #fff !important; color: #2C2D33; font-weight: 500; border-bottom: 1px solid var(--mx-grey); }
/* Suppliers section — Metrix (owner, 2026-10-13: Supplier Files, Supplier Rates, Supplier Employees, Inventory / Equipment / Rental space) */
.sup-metrix .sf-spent, .srt-metrix .sf-spent { color: var(--mx-ink); font-family: 'Poppins', 'Inter', system-ui, sans-serif; font-weight: 500; }
.sup-metrix .sf-spent.text-secondary, .srt-metrix .sf-spent.text-secondary { color: var(--mx-faint) !important; }
.sup-metrix #cf-side .card-body > .d-flex .badge, .srt-metrix #cf-side .card-body > .d-flex .badge { border-radius: 8px; }
.srt-metrix #cf-side .card .card-body > .d-flex > strong { font-weight: 500; color: var(--mx-ink); }
.emp-metrix .ep-company { border-bottom: 1px solid var(--mx-stroke); }
.emp-metrix .ep-company-row { padding: .7rem 1rem; }
.emp-metrix .ep-company-row:hover { background: #F8F9FC; }
.emp-metrix .ep-company-row strong { font-weight: 500; color: var(--mx-ink); }
.emp-metrix .ep-kind { border-radius: 6px; }
.emp-metrix .ep-avatar.out { background: #fff; border: 1px dashed var(--mx-grey); color: var(--mx-text); }
.ro-metrix > p.text-secondary { color: var(--mx-muted) !important; }
.ro-metrix .form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
/* Virtual Director — Metrix (owner, 2026-10-13: Director Rules, Twilio Config; SMS Messages is the Dispatch view, already in the kit look) */
.dr-metrix #cf-side .card-header { background: #fff !important; border-bottom: 1px solid var(--mx-stroke); padding: .8rem 1.1rem; }
.dr-metrix #cf-side .card-header strong { font-weight: 500; color: var(--mx-ink); font-size: 1.02rem; }
.dr-metrix .dr-num { background: var(--brand) !important; color: #fff !important; border-radius: 8px !important; font-family: 'Poppins', 'Inter', system-ui, sans-serif; }
.dr-metrix .dr-blockly { border: 1px solid var(--mx-stroke); border-radius: 12px; }
.dr-metrix .dr-sms { background: #F4F5FA; border-radius: 10px; color: var(--mx-ink); }
.dr-metrix #cf-side .form-label { color: var(--mx-muted); font-size: .88rem; }
.dr-metrix #cf-side .form-control, .dr-metrix #cf-side .form-select { background-color: #F4F5FA; border-color: transparent; border-radius: 8px; }
.dr-metrix #cf-side .form-control:focus, .dr-metrix #cf-side .form-select:focus { background-color: #fff; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 15%, transparent); }
.dr-metrix #cf-side .input-group > :not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.dr-metrix #cf-side .input-group > :not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.dr-metrix #cf-side .btn-group > .btn-outline-secondary.active, .dr-metrix #cf-side .btn-check:checked + .btn-outline-secondary { background: var(--brand); border-color: var(--brand); color: #fff; }
.dr-metrix #cf-side .alert-light.border { background: #F4F5FA; border: 0 !important; border-radius: 10px; }
.dr-metrix .cf-list .ep-avatar { font-size: 1rem; }
.smss-metrix .cf-sum-n { font-size: 1.15rem; }
.smss-metrix #smss-body .form-label { color: var(--mx-muted); font-size: .88rem; }
.smss-metrix #smss-body .form-control { background-color: #F4F5FA; border-color: transparent; border-radius: 8px; }
.smss-metrix #smss-body .form-control:focus { background-color: #fff; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 15%, transparent); }
.smss-metrix #smss-body .input-group > :not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.smss-metrix #smss-body .input-group > :not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.smss-metrix > p.text-secondary { color: var(--mx-muted) !important; }
/* Settings section — Metrix (owner, 2026-10-13): the inlineTable lists with cfg.summary (Offer Catalogue, Offer families, Employee skills,
   Document types, Client types) and Project Steps */
.set-metrix .cf-summary:has(> .cf-sum-card:only-child) { grid-template-columns: minmax(18rem, 34rem); }
.set-metrix > p.text-secondary, .ps-metrix p.text-secondary { color: var(--mx-muted) !important; }
.set-metrix .card .table { --bs-table-color: var(--mx-text); color: var(--mx-text); }
.set-metrix .card .table > thead > tr > th { background: #fff; color: #2C2D33; font-weight: 500; border-bottom: 1px solid var(--mx-grey); padding-top: .8rem; padding-bottom: .8rem; }
.set-metrix .card .table > thead > tr > th.sortable { cursor: pointer; }
.set-metrix .card .table > thead > tr > th.sortable i { color: var(--mx-line); }
.set-metrix .card .table > thead > tr > th.sorted, .set-metrix .card .table > thead > tr > th.sorted i { color: var(--brand); }
.set-metrix .card .table > tbody > tr > td { border-color: var(--mx-stroke); padding-top: .6rem; padding-bottom: .6rem; }
.set-metrix .card .table > tbody strong { color: var(--mx-ink); font-weight: 600; }
.set-metrix .card .table .btn-sm { border-radius: 8px; }
.set-metrix tr.row-add td { background: color-mix(in srgb, var(--brand) 5%, white); }
.set-metrix .table .form-control, .set-metrix .table .form-select { background-color: #F4F5FA; border-color: transparent; border-radius: 8px; }
.set-metrix .table .form-control:focus, .set-metrix .table .form-select:focus { background-color: #fff; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 15%, transparent); }
.set-metrix .input-group > :not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.set-metrix .input-group > :not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.ps-metrix .card-header { background: #fff !important; border-bottom: 1px solid var(--mx-stroke); color: var(--mx-ink); }
.ps-metrix .ps-step-head { background: #fff; }
.ps-metrix .ps-step-head strong, .ps-metrix .ps-help > summary { font-weight: 500; color: var(--mx-ink); }
.ps-metrix .ps-blockly { border: 1px solid var(--mx-stroke); border-radius: 12px; }
.ps-metrix .form-label { color: var(--mx-muted); }
.ps-metrix .form-control, .ps-metrix .form-select { background-color: #F4F5FA; border-color: transparent; border-radius: 8px; }
.ps-metrix .form-control:focus, .ps-metrix .form-select:focus { background-color: #fff; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 15%, transparent); }
.ps-metrix .nav-tabs .nav-link.active { color: var(--brand); font-weight: 500; }
.ps-metrix .ps-help code { color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, white); border-radius: 4px; padding: 0 .25rem; }
/* Administration — Metrix (owner, 2026-10-13: Businesses, Users, Application Roles, Business settings, ID Settings, SMS Templates, Twilio Config,
   File storage, Logs; mxPage() in views.js) */
.adm-metrix p.text-secondary, .adm-metrix .form-text { color: var(--mx-muted) !important; }
.adm-metrix .card-header { background: #fff !important; border-bottom: 1px solid var(--mx-stroke); padding: .8rem 1.1rem; }
.adm-metrix .card-header strong, .adm-metrix .card-title, .adm-metrix h2.h5, .adm-metrix h2.h6, .adm-metrix h5 { font-weight: 500; color: var(--mx-ink); }
.adm-metrix .card .table { --bs-table-color: var(--mx-text); color: var(--mx-text); }
.adm-metrix .card .table > thead > tr > th { background: #fff; color: #2C2D33; font-weight: 500; border-bottom: 1px solid var(--mx-grey); padding-top: .8rem; padding-bottom: .8rem; }
.adm-metrix .card .table > tbody > tr > td { border-color: var(--mx-stroke); padding-top: .6rem; padding-bottom: .6rem; }
.adm-metrix .card .table > tbody strong { color: var(--mx-ink); font-weight: 600; }
.adm-metrix .btn-sm { border-radius: 8px; }
.adm-metrix .form-label { color: var(--mx-muted); font-size: .88rem; }
.adm-metrix .form-control, .adm-metrix .form-select { background-color: #F4F5FA; border-color: transparent; border-radius: 8px; }
.adm-metrix .form-control:focus, .adm-metrix .form-select:focus { background-color: #fff; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 15%, transparent); }
.adm-metrix .form-control-color { padding: .2rem; }
.adm-metrix .input-group > :not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.adm-metrix .input-group > :not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.adm-metrix .input-group-text { background: #F4F5FA; border-color: transparent; color: var(--mx-faint); }
.adm-metrix .list-group-item { border-color: var(--mx-stroke); color: var(--mx-ink); padding: .7rem 1rem; }
.adm-metrix .list-group-item.active { background: color-mix(in srgb, var(--brand) 9%, white); color: var(--mx-ink); border-color: var(--mx-stroke); box-shadow: inset 3px 0 0 var(--brand); font-weight: 500; }
.adm-metrix .list-group-item.active .badge { background: var(--brand) !important; color: #fff !important; }
.adm-metrix .nav-tabs { border-bottom-color: var(--mx-grey); }
.adm-metrix .nav-tabs .nav-link { color: var(--mx-text); border: 0; border-bottom: 2px solid transparent; }
.adm-metrix .nav-tabs .nav-link.active { color: var(--brand); border-bottom-color: var(--brand); background: none; font-weight: 500; }
.adm-metrix .st-card { border: 0; border-radius: 12px; background: #fff; }
.adm-metrix .st-vars .badge { background: color-mix(in srgb, var(--brand) 10%, white) !important; color: color-mix(in srgb, var(--brand) 80%, black) !important; border: 0 !important; border-radius: 6px; }
.adm-metrix .logs-scroll thead th { background: #fff; color: #2C2D33; font-weight: 500; }
.adm-metrix .alert-light.border { background: #F4F5FA; border: 0 !important; border-radius: 10px; color: var(--mx-text); }
.adm-metrix .alert-info { background: color-mix(in srgb, var(--brand) 8%, white); border: 0; border-radius: 10px; color: var(--mx-ink); }
.adm-metrix .card h3.h6.text-uppercase { text-transform: none !important; letter-spacing: 0; font-size: 1.05rem; font-weight: 500; color: var(--mx-ink) !important; }
.adm-metrix .btn-link { color: var(--brand); }