/* ===== Dashboard after the Webpixels app screens (owner, 2026-10-14: "inspire yourself from the app screens on
   webpixels.io/screens#application, redesign the dashboard"). From those screens: two-layer figure cards (grey frame with the title,
   white inner card with the figure), filter chips with a "+" that become filled when on, a clean white table with light headers, states
   as a coloured dot + text, small bordered action buttons. Font: Baloo Paaji 2 (owner, 2026-10-14: "I like the new font").
   Accents in the business colour (--brand). Project rows stay compact (PRODUCT.md). ===== */
.dash-wp {
  --wp-frame: #F4F4F5; --wp-line: #E4E4E7; --wp-line-2: #F1F1F3; --wp-ink: #18181B; --wp-text: #3F3F46; --wp-muted: #71717A; --wp-faint: #A1A1AA;
  --wp-green: #16A34A; --wp-orange: #EA580C; --wp-red: #DC2626; --wp-amber: #D97706; --wp-blue: #2563EB;
  --wp-font: 'Baloo Paaji 2', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-family: var(--wp-font); color: var(--wp-text);
}
.content.dash-wp { background: #FAFAFA; }
.dash-wp .form-control, .dash-wp .form-select, .dash-wp .input-group-text, .dash-wp .btn, .dash-wp .small { font-family: var(--wp-font); }

/* ---------- figure cards: a grey frame holding the title, a white card holding the figure ---------- */
.dash-wp .dash-att { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.1rem; margin-bottom: 1.4rem !important; align-items: stretch; }
.dash-wp .dash-att-item { display: flex; flex-direction: column; gap: 0; padding: .3rem; background: var(--wp-frame); border: 1px solid var(--wp-line); border-radius: 14px; box-shadow: none; text-align: left; color: var(--wp-text); font-family: var(--wp-font); transition: border-color .15s ease-out, box-shadow .15s ease-out; }
.dash-wp .dash-att-label { display: flex; align-items: center; gap: .5rem; padding: .55rem .8rem .6rem; font-size: 1.02rem; font-weight: 600; color: var(--wp-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-wp .dash-att-label > .bi { color: var(--wp-muted); font-size: .95rem; }
.dash-wp .dash-att-inner { flex: 1; display: flex; flex-direction: column; gap: .35rem; padding: .85rem 1rem .9rem; background: #fff; border: 1px solid var(--wp-line); border-radius: 10px; box-shadow: 0 1px 2px rgba(24, 24, 27, .05); }
.dash-wp .dash-att-n { font-size: 2.3rem; font-weight: 600; line-height: 1; color: var(--wp-ink); letter-spacing: -.01em; font-variant-numeric: tabular-nums; padding: 0; background: none; min-width: 0; text-align: left; }
.dash-wp .dash-att-x { font-size: .9rem; color: var(--wp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-wp .att-input:not(.zero) .dash-att-x { color: var(--wp-red); font-weight: 600; }
.dash-wp .att-input:not(.zero) .dash-att-label > .bi { color: var(--wp-red); }
.dash-wp .dash-att-item:hover:not(:disabled) { border-color: #D4D4D8; }
.dash-wp .dash-att-item:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.dash-wp .dash-att-item.on { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); background: color-mix(in srgb, var(--brand) 7%, var(--wp-frame)); }
.dash-wp .dash-att-item.on .dash-att-label, .dash-wp .dash-att-item.on .dash-att-label > .bi { color: var(--brand); }
.dash-wp .dash-att-item.zero { opacity: 1; }
.dash-wp .dash-att-item.zero .dash-att-n { color: var(--wp-faint); }
.dash-wp .dash-att > .btn-link { align-self: center; justify-self: start; }

/* ---------- the projects panel ---------- */
.dash-wp .card { background: #fff; border: 1px solid var(--wp-line); border-radius: 14px; box-shadow: 0 1px 2px rgba(24, 24, 27, .04); overflow: hidden; }
.dash-wp .alert-light { background: #fff !important; border: 1px solid var(--wp-line) !important; border-radius: 10px; color: var(--wp-text); }
.dash-wp .dash-toolbar { padding: 1.1rem 1.25rem .7rem; gap: .6rem !important; }
.dash-wp .dash-card-title { font-size: 1.45rem; font-weight: 600; color: var(--wp-ink); margin-right: .75rem !important; white-space: nowrap; }
.dash-wp .dash-card-count { margin-left: .35rem; padding: 0 .5rem; border: 1px solid var(--wp-line); border-radius: 999px; background: var(--wp-frame); color: var(--wp-text); font-size: .85rem; font-weight: 600; vertical-align: .2em; }
.dash-wp .dash-search { width: 22rem; max-width: 100%; }
.dash-wp .dash-search .input-group-text, .dash-wp .dash-search .form-control { border-color: var(--wp-line); background: #fff; }
.dash-wp .dash-search .input-group-text { border-radius: 8px 0 0 8px; color: var(--wp-muted); padding-right: .2rem; border-right: 0; }
.dash-wp .dash-search .form-control { border-radius: 0 8px 8px 0; border-left: 0; }
.dash-wp .dash-search:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); border-radius: 8px; }
.dash-wp .form-control::placeholder { color: var(--wp-faint); }
/* filter chips (Webpixels: "⊕ Date", "⊕ Status", "✕ Clear") */
.dash-wp .dash-chip { display: inline-flex; align-items: center; gap: .4rem; height: 2.4rem; padding: 0 .8rem; border: 1px dashed #D4D4D8; border-radius: 8px; background: #fff; color: var(--wp-text); font-size: .95rem; font-weight: 500; cursor: pointer; user-select: none; white-space: nowrap; transition: background .15s, border-color .15s; }
.dash-wp .dash-chip:hover { background: var(--wp-frame); border-color: var(--wp-faint); }
.dash-wp .dash-chip > .bi { color: var(--wp-muted); }
.dash-wp .dash-chip > .bi-check-circle-fill { display: none; }
.dash-wp .btn-check:checked + .dash-chip { border-style: solid; border-color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, white); color: var(--brand); }
.dash-wp .btn-check:checked + .dash-chip > .bi-plus-circle { display: none; }
.dash-wp .btn-check:checked + .dash-chip > .bi-check-circle-fill { display: inline; color: var(--brand); }
.dash-wp .btn-check:focus-visible + .dash-chip { outline: 2px solid var(--brand); outline-offset: 2px; }
.dash-wp .dash-chip-dates { border-style: solid; border-color: var(--wp-line); cursor: default; padding-right: .5rem; }
.dash-wp .dash-chip-dates:hover { background: #fff; }
.dash-wp .dash-chip-dates label { color: var(--wp-muted) !important; }
.dash-wp .dash-chip-dates input[type="date"] { border: 0; padding: 0 .2rem; height: 2rem; box-shadow: none; color: var(--wp-ink); background: transparent; }
.dash-wp .dash-chip-dates #dash-clear { color: var(--wp-faint) !important; }
.dash-wp .dash-chips { margin-left: .25rem; }
.dash-wp #dash-live { margin-left: auto; }
.dash-wp .dash-legend-line { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; padding: 0 1.25rem .8rem; color: var(--wp-muted); }

/* ---------- the table ---------- */
.dash-wp #dash-table { --bs-table-bg: #fff; --bs-table-color: var(--wp-text); color: var(--wp-text); margin: 0; }
.dash-wp #dash-table > thead > tr > th { background: #FAFAFA !important; color: var(--wp-muted); font-weight: 500; font-size: .98rem; text-transform: none; letter-spacing: 0; padding: .65rem .75rem; border-top: 1px solid var(--wp-line); border-bottom: 1px solid var(--wp-line); white-space: nowrap; }
.dash-wp #dash-table > thead > tr > th:first-child, .dash-wp #dash-table > tbody > tr > td:first-child { padding-left: 1.25rem; }
.dash-wp #dash-table > thead > tr > th:last-child, .dash-wp #dash-table > tbody > tr > td:last-child { padding-right: 1.25rem; }
.dash-wp #dash-table > tbody > tr > td { border-color: var(--wp-line-2); line-height: 1.2; }
.dash-wp #dash-table > tbody > tr.wo-main > td { padding-top: .5rem; padding-bottom: .15rem; }
.dash-wp #dash-table tr.dash-steps-row td { padding-top: 0; padding-bottom: .45rem; }
.dash-wp #dash-table > tbody + tbody > tr.wo-main > td { border-top: 1px solid var(--wp-line); }
.dash-wp #dash-table > tbody.wo-group:nth-of-type(even) > tr > td { --bs-table-bg-type: color-mix(in srgb, var(--brand) 4%, white); } /* the alternate project shading (owner, 2026-10-09) */
.dash-wp #dash-table > tbody.dash-project:hover > tr > td { --bs-table-bg-state: color-mix(in srgb, var(--brand) 8%, white); }
.dash-wp #dash-table a.font-monospace { font-family: var(--wp-font) !important; font-weight: 700; font-size: 1.06rem; color: var(--wp-ink); letter-spacing: .01em; }
.dash-wp #dash-table a.font-monospace:hover { color: var(--brand); text-decoration: underline !important; }
.dash-wp #dash-table .fw-semibold { color: var(--wp-ink); font-weight: 600 !important; }
.dash-wp #dash-table .text-secondary { color: var(--wp-muted) !important; }
.dash-wp #dash-table .text-success { color: var(--wp-green) !important; }
.dash-wp #dash-table .text-danger { color: var(--wp-red) !important; }
.dash-wp #dash-table > thead > tr > th.dash-sortable { cursor: pointer; user-select: none; }
.dash-wp #dash-table > thead > tr > th.dash-sortable:hover, .dash-wp th.dash-sortable.sorted, .dash-wp th.dash-sortable.sorted .dash-sort-ico { color: var(--wp-ink); }
.dash-wp .dash-sort-ico { margin-left: .35rem; font-size: .8em; color: #D4D4D8; }
/* the project state as a dot + text (Webpixels "● Completed") */
.dash-wp .mx-pill { display: inline-flex; align-items: center; gap: .35rem; padding: 0 0 0 .2rem; background: none !important; border: 0; font-size: .9rem; font-weight: 500; color: var(--wp-text); vertical-align: .05em; }
.dash-wp .mx-pill::before { content: ''; width: .5rem; height: .5rem; border-radius: 50%; background: var(--wp-faint); flex: none; }
.dash-wp .mx-pill.mx-st-lancer::before { background: var(--wp-blue); }
.dash-wp .mx-pill.mx-st-fini::before, .dash-wp .mx-pill.mx-quote::before { background: var(--wp-green); }
.dash-wp .mx-pill.mx-quote { color: var(--wp-green); }
.dash-wp .mx-pill.mx-quote > .bi { display: none; }
.dash-wp .mx-pill.mx-st-annule::before { background: var(--wp-red); }
.dash-wp .mx-pill:is(.mx-st-stand_by, .mx-st-reporte, .mx-st-non_fini, .mx-st-non_faite)::before { background: var(--wp-orange); }
/* counts and staffing as soft rounded tags (Webpixels "Processing / Shipped") */
.dash-wp .pr-slots, .dash-wp #dash-table a.badge.text-bg-light { display: inline-block; border: 1px solid transparent !important; border-radius: 999px; font-size: .85rem; font-weight: 600; line-height: 1.5; padding: 0 .6rem; }
.dash-wp #dash-table a.badge.text-bg-light { background: var(--wp-frame) !important; border-color: var(--wp-line) !important; color: var(--wp-ink) !important; }
.dash-wp .pr-slots.full { background: #DCFCE7; border-color: #BBF7D0 !important; color: #15803D; }
.dash-wp .pr-slots.part { background: #FFEDD5; border-color: #FED7AA !important; color: #C2410C; }
.dash-wp .pr-slots.none { background: #FEE2E2; border-color: #FECACA !important; color: #B91C1C; }
/* action buttons: small, bordered, white */
.dash-wp #dash-table .btn-sm { --bs-btn-padding-y: 0; --bs-btn-padding-x: .55rem; --bs-btn-font-size: .85rem; line-height: 1.6; border-radius: 8px; font-weight: 500; }
.dash-wp #dash-table .btn-outline-secondary, .dash-wp #dash-table .btn-outline-primary { --bs-btn-color: var(--wp-text); --bs-btn-border-color: var(--wp-line); --bs-btn-bg: #fff; --bs-btn-hover-bg: var(--wp-frame); --bs-btn-hover-color: var(--wp-ink); --bs-btn-hover-border-color: #D4D4D8; box-shadow: 0 1px 1px rgba(24, 24, 27, .04); }
.dash-wp #dash-table .btn-outline-primary > .bi { color: var(--brand); }
/* steps keep their arrows (owner, 2026-10-07), in soft tones */
.dash-wp .dash-step.st-done { --step-fg: #15803D; --step-bg: #DCFCE7; --step-bd: #BBF7D0; }
.dash-wp .dash-step.st-ongoing { --step-fg: #B45309; --step-bg: #FEF3C7; --step-bd: #FDE68A; }
.dash-wp .dash-step.st-input { --step-fg: #B91C1C; --step-bg: #FEE2E2; --step-bd: #FECACA; }
.dash-wp .dash-step.st-todo { --step-fg: var(--wp-muted); --step-bg: var(--wp-frame); --step-bd: var(--wp-line); }
.dash-wp .dash-step.dash-legend { border-radius: 999px; font-weight: 500; }
.dash-wp #dash-table .dash-steps-row .dash-step { font-family: var(--wp-font); font-weight: 600; line-height: 1.15; }
.dash-wp #dash-table .dash-steps-row .dash-step.st-done { background: #BBF7D0; color: #14532D; }
.dash-wp #dash-table .dash-steps-row .dash-step.st-input { background: #FECACA; color: #7F1D1D; }
.dash-wp #dash-table .dash-steps-row .dash-step.st-ongoing { background: #FDE68A; color: #78350F; }
.dash-wp #dash-table .dash-steps-row .dash-step.st-todo { background: #E4E4E7; color: #3F3F46; }
.dash-wp .step-group-name { font-family: var(--wp-font); color: var(--wp-muted); border-color: #D4D4D8; line-height: 1; padding-bottom: 0; }
.dash-wp a:not(.btn):not(.badge):not(.font-monospace) { color: var(--brand); }
@media (prefers-reduced-motion: reduce) { .dash-wp .dash-att-item, .dash-wp .dash-chip { transition: none; } }
@media (max-width: 767.98px) {
  .dash-wp .dash-att { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .dash-wp .dash-att-n { font-size: 1.8rem; }
  .dash-wp .dash-att-label { font-size: .9rem; padding: .45rem .6rem; }
  .dash-wp .dash-chip-dates { width: 100%; }
  .dash-wp .dash-chip-dates input[type="date"] { flex: 1; min-width: 0; }
}
/* the button's older centring (app.css) must not shrink the inner card */
.dash-wp .dash-att-item { align-items: stretch; justify-content: flex-start; }
.dash-wp .dash-att-label { justify-content: flex-start; text-align: left; }
.dash-wp .dash-att-inner { width: 100%; align-items: flex-start; text-align: left; }

/* ===== Dashboard = projects matrix (owner, 2026-10-14: "look at projects-view-redesign.html for inspiration to redesign the dashboard").
   One line per project; the steps as 16px squares under their names written vertically, grouped by step group; chips with counts;
   a step name filters the projects where it is open; the hovered column lights up; a tooltip on each square. `.dash-pv` (views.js). ===== */
.dash-pv {
  --pv-bg: #F6F7F9; --pv-line: #E7E9EE; --pv-ink: #1B1F24; --pv-muted: #6B7280; --pv-faint: #9AA1AB; --pv-hover: #F9FAFB;
  --pv-done: #22A061; --pv-done-bg: #E6F6ED; --pv-ongoing: #E0A10F; --pv-ongoing-bg: #FDF4DC; --pv-need: #D64545; --pv-need-bg: #FDE8E8; --pv-todo: #E3E6EB;
  --pv-col: color-mix(in srgb, var(--brand) 9%, white);
  --pv-font: 'Baloo Paaji 2', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-family: var(--pv-font); color: var(--pv-ink);
}
.content.dash-pv { background: var(--pv-bg); }
.dash-pv :is(.form-control, .btn, .input-group-text) { font-family: var(--pv-font); }
.dash-pv .pv-card { background: #fff; border: 1px solid var(--pv-line); border-radius: 14px; overflow: hidden; box-shadow: none; }
.dash-pv .alert-light { background: #fff !important; border: 1px solid var(--pv-line) !important; border-radius: 10px; }
/* head: title, search, dates, also show */
.dash-pv .pv-head { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; padding: 1.1rem 1.25rem .75rem; }
.dash-pv .pv-title { margin: 0 .25rem 0 0; font-size: 1.55rem; font-weight: 600; display: flex; align-items: center; gap: .5rem; }
.dash-pv .pv-count { font-size: .9rem; font-weight: 600; background: #EEF0F3; color: var(--pv-muted); border-radius: 99px; padding: 0 .6rem; }
.dash-pv .pv-search { flex: 1 1 16rem; max-width: 26rem; }
.dash-pv .pv-search :is(.form-control, .input-group-text) { border-color: var(--pv-line); background: #fff; height: 2.35rem; }
.dash-pv .pv-search .input-group-text { border-right: 0; color: var(--pv-faint); border-radius: 8px 0 0 8px; }
.dash-pv .pv-search .form-control { border-left: 0; padding-left: .1rem; border-radius: 0 8px 8px 0; }
.dash-pv .pv-search:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent); border-radius: 8px; }
.dash-pv .pv-dates { display: inline-flex; align-items: center; gap: .3rem; height: 2.35rem; padding: 0 .55rem; border: 1px solid var(--pv-line); border-radius: 8px; color: var(--pv-muted); font-size: .92rem; }
.dash-pv .pv-dates input { border: 0; height: 2rem; padding: 0 .2rem; width: auto; box-shadow: none; background: transparent; color: var(--pv-ink); }
.dash-pv .pv-dates #dash-clear { color: var(--pv-faint); }
.dash-pv .pv-also { display: inline-flex; gap: .35rem; }
.dash-pv .pv-also-btn { display: inline-flex; align-items: center; gap: .25rem; height: 2.35rem; padding: 0 .7rem; border: 1px dashed #D4D7DD; border-radius: 8px; background: #fff; color: var(--pv-ink); font-size: .92rem; cursor: pointer; user-select: none; }
.dash-pv .pv-also-btn .bi-check2 { display: none; }
.dash-pv .btn-check:checked + .pv-also-btn { border-style: solid; border-color: var(--pv-ink); background: var(--pv-ink); color: #fff; }
.dash-pv .btn-check:checked + .pv-also-btn .bi-plus { display: none; }
.dash-pv .btn-check:checked + .pv-also-btn .bi-check2 { display: inline; }
.dash-pv .btn-check:focus-visible + .pv-also-btn { outline: 2px solid var(--brand); outline-offset: 2px; }
.dash-pv .pv-live { margin-left: auto; }
/* filter chips with counts */
.dash-pv .pv-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding: 0 1.25rem .9rem; }
.dash-pv .pv-chip { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--pv-line); background: #fff; border-radius: 99px; padding: .25rem .8rem; font-size: .95rem; color: var(--pv-ink); }
.dash-pv .pv-chip b { font-weight: 600; color: var(--pv-muted); }
.dash-pv .pv-chip:hover { border-color: #D4D7DD; background: var(--pv-hover); }
.dash-pv .pv-chip.on { background: var(--pv-ink); color: #fff; border-color: var(--pv-ink); }
.dash-pv .pv-chip.on b { color: #CFD3DA; }
.dash-pv .pv-chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.dash-pv .pv-dot { width: .55rem; height: .55rem; border-radius: 50%; }
.dash-pv .pv-dot.input, .dash-pv .pv-dot.late { background: var(--pv-need); }
.dash-pv .pv-stepfilter { display: inline-flex; align-items: center; gap: .4rem; font-size: .95rem; background: var(--pv-col); color: color-mix(in srgb, var(--brand) 75%, black); border-radius: 99px; padding: .2rem .3rem .2rem .8rem; }
.dash-pv .pv-stepfilter button { border: 0; background: #fff; border-radius: 99px; width: 1.6rem; height: 1.6rem; color: var(--pv-muted); display: grid; place-items: center; }
/* the table */
.dash-pv .pv-table { --bs-table-bg: #fff; color: var(--pv-ink); font-family: var(--pv-font); }
.dash-pv .pv-table > thead > tr > th { background: #FBFBFC !important; color: var(--pv-muted); font-weight: 600; font-size: .9rem; text-transform: none; letter-spacing: 0; vertical-align: bottom; white-space: nowrap; padding: .55rem .75rem; border-top: 1px solid var(--pv-line); border-bottom: 1px solid var(--pv-line); }
.dash-pv .pv-table > thead > tr > th:first-child, .dash-pv .pv-table > tbody > tr > td:first-child { padding-left: 1.25rem; }
.dash-pv .pv-table > thead > tr > th:last-child, .dash-pv .pv-table > tbody > tr > td:last-child { padding-right: 1.25rem; }
.dash-pv .pv-table > tbody > tr > td { vertical-align: top; padding: .7rem .75rem; border-bottom: 1px solid var(--pv-line); border-top: 0; }
.dash-pv .pv-table > tbody.dash-project { cursor: pointer; }
.dash-pv .pv-table > tbody.dash-project:hover > tr > td { --bs-table-bg-state: var(--pv-hover); }
.dash-pv .pv-table > tbody.wo-group:nth-of-type(even) > tr > td, .dash-pv .pv-table > tbody.dash-project:nth-of-type(even) > tr > td { --bs-table-bg-type: color-mix(in srgb, var(--brand) 3%, white); } /* the alternate project shading (owner, 2026-10-09) */
.dash-pv .dash-sortable { cursor: pointer; user-select: none; }
.dash-pv .dash-sortable:hover, .dash-pv .dash-sortable.sorted, .dash-pv .dash-sortable.sorted .dash-sort-ico { color: var(--pv-ink); }
.dash-pv .dash-sort-ico { margin-left: .3rem; font-size: .8em; color: #D4D7DD; }
.dash-pv .pv-th-sep { margin: 0 .4rem; color: var(--pv-faint); }
/* project cell */
.dash-pv .pv-proj { min-width: 17rem; max-width: 24rem; }
.dash-pv .pv-proj-line { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .6rem; }
.dash-pv .pv-code { font-weight: 700; font-size: 1.02rem; color: var(--pv-ink); text-decoration: none; letter-spacing: .01em; }
.dash-pv .pv-code:hover { color: var(--brand); text-decoration: underline; }
.dash-pv .pv-status { display: inline-flex; align-items: center; gap: .35rem; font-size: .88rem; color: var(--pv-muted); font-weight: 500; }
.dash-pv .pv-status i { width: .45rem; height: .45rem; border-radius: 50%; background: var(--brand); }
.dash-pv .pv-status.st-fini i, .dash-pv .pv-status.pv-quote i { background: var(--pv-done); }
.dash-pv .pv-status.st-annule i { background: var(--pv-need); }
.dash-pv .pv-status:is(.st-stand_by, .st-reporte, .st-non_fini, .st-non_faite) i { background: var(--pv-ongoing); }
.dash-pv .pv-status.st-archive i { background: var(--pv-faint); }
.dash-pv .pv-name { font-weight: 600; margin-top: .05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-pv .pv-sub { font-size: .88rem; color: var(--pv-muted); }
.dash-pv .pv-sum { font-size: .88rem; color: var(--pv-muted); margin-top: .2rem; white-space: nowrap; }
.dash-pv .pv-sum .need { color: #A12D2D; } .dash-pv .pv-sum .ongoing { color: #8A5F00; }
.dash-pv .pv-acts { display: flex; gap: .3rem; margin-top: .4rem; }
.dash-pv .pv-ib { border: 1px solid var(--pv-line); border-radius: 6px; background: #fff; font-size: .84rem; padding: .05rem .5rem; color: var(--pv-muted); text-decoration: none; }
.dash-pv .pv-ib:hover { color: var(--pv-ink); border-color: #D4D7DD; }
/* due */
.dash-pv .pv-date { white-space: nowrap; }
.dash-pv .pv-rel { font-size: .88rem; color: var(--pv-muted); }
.dash-pv .pv-rel.late { color: var(--pv-need); } .dash-pv .pv-rel.soon { color: #8A5F00; }
/* the steps matrix: vertical names over their squares, grouped */
.dash-pv .pv-th-steps, .dash-pv .pv-steps { padding-left: .3rem !important; padding-right: .3rem !important; }
.dash-pv .pv-mx { display: flex; gap: .6rem; }
.dash-pv .pv-grp { display: flex; flex-direction: column; }
.dash-pv .pv-gl { font-size: .82rem; font-weight: 600; color: var(--pv-ink); border-bottom: 2px solid #CFD5DE; padding: 0 .15rem .2rem; margin-bottom: .3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; width: 0; min-width: 100%; }
.dash-pv .pv-row { display: flex; }
.dash-pv .pv-sh { width: 1.75rem; height: 8rem; display: flex; align-items: flex-end; justify-content: center; padding: 0 0 .3rem; border: 0; background: none; border-radius: 4px 4px 0 0; cursor: pointer; }
.dash-pv .pv-sh span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: .84rem; font-weight: 500; color: var(--pv-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-height: 7.6rem; }
.dash-pv .pv-sh:hover span, .dash-pv .pv-sh.hl span, .dash-pv .pv-sh.sel span { color: var(--brand); font-weight: 700; }
.dash-pv .pv-sh.sel, .dash-pv .pv-sh.hl, .dash-pv .pv-cw.hl { background: var(--pv-col); }
.dash-pv .pv-sh:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.dash-pv .pv-cw { width: 1.75rem; height: 1.9rem; display: flex; align-items: center; justify-content: center; border-radius: 4px; }
.dash-pv .pv-cell { display: block; width: 1.25rem; height: 1.25rem; border-radius: 4px; background: var(--pv-todo); position: relative; flex: none; }
.dash-pv .pv-cell.st-done { background: var(--pv-done); }
.dash-pv .pv-cell.st-ongoing { background: var(--pv-ongoing); }
.dash-pv .pv-cell.st-input { background: var(--pv-need); box-shadow: 0 0 0 2px var(--pv-need-bg); }
.dash-pv .pv-cell.st-done::after { content: ''; position: absolute; left: .42rem; top: .17rem; width: .32rem; height: .62rem; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.dash-pv .pv-cell.st-input::after { content: '!'; position: absolute; inset: 0; color: #fff; font-size: .85rem; font-weight: 800; line-height: 1.25rem; text-align: center; font-family: system-ui, sans-serif; }
.dash-pv .pv-cell.flash { animation: pv-flash 1.6s ease-out; }
@keyframes pv-flash { 0% { transform: scale(1.45); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 40%, transparent); } 100% { transform: none; } }
.dash-pv .pv-open { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .45rem; max-width: 40rem; }
.dash-pv .pv-tag { border-radius: 6px; padding: 0 .45rem; font-size: .84rem; font-weight: 500; }
.dash-pv .pv-tag.input { background: var(--pv-need-bg); color: #A12D2D; }
.dash-pv .pv-tag.ongoing { background: var(--pv-ongoing-bg); color: #8A5F00; }
/* staffing */
.dash-pv .pv-staff { white-space: nowrap; }
.dash-pv .pv-wo { font-size: .88rem; color: var(--pv-muted); text-decoration: none; }
a.pv-wo:hover { color: var(--brand); text-decoration: underline; }
.dash-pv .pv-mini { height: .38rem; width: 5.5rem; background: #EEF0F3; border-radius: 99px; overflow: hidden; margin-top: .35rem; }
.dash-pv .pv-mini span { display: block; height: 100%; background: var(--pv-ongoing); }
.dash-pv .pv-mini span.full { background: var(--pv-done); }
.dash-pv .pv-mini span.none { background: var(--pv-need); opacity: .45; }
/* cost vs billed */
.dash-pv .pv-cost { font-weight: 700; white-space: nowrap; }
.dash-pv .pv-billed { font-size: .88rem; color: var(--pv-muted); white-space: nowrap; }
.dash-pv .pv-flag { display: inline-block; font-size: .82rem; font-weight: 600; border-radius: 6px; padding: 0 .45rem; margin-top: .2rem; white-space: nowrap; }
.dash-pv .pv-flag.warn { background: var(--pv-need-bg); color: #A12D2D; }
.dash-pv .pv-flag.info { background: #F1F2F4; color: #4B5563; }
.dash-pv .pv-flag.good { background: var(--pv-done-bg); color: #17784A; }
.dash-pv .pv-flag.alert { background: #FFF1D6; color: #8A5F00; }
/* legend + tooltip */
.dash-pv .pv-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.1rem; padding: .7rem 1.25rem; border-top: 1px solid var(--pv-line); font-size: .9rem; color: var(--pv-muted); }
.dash-pv .pv-legend > span { display: inline-flex; align-items: center; gap: .45rem; }
.dash-pv .pv-legend .pv-cell { width: 1rem; height: 1rem; }
.dash-pv .pv-legend .pv-cell.st-done::after { left: .33rem; top: .12rem; width: .26rem; height: .5rem; }
.dash-pv .pv-legend .pv-cell.st-input::after { font-size: .7rem; line-height: 1rem; }
.dash-pv .pv-legend-hint { margin-left: auto; }
.pv-tip { position: fixed; z-index: 1080; pointer-events: none; display: none; max-width: 18rem; background: #1B1F24; color: #fff; font-size: .9rem; line-height: 1.35; padding: .5rem .65rem; border-radius: 7px; box-shadow: 0 8px 20px rgba(0, 0, 0, .25); font-family: 'Baloo Paaji 2', 'Inter', system-ui, sans-serif; }
.pv-tip.on { display: block; }
.pv-tip b { display: block; }
.pv-tip .pv-tip-d { color: #CFD3DA; margin-top: .2rem; }
@media (prefers-reduced-motion: reduce) { .dash-pv .pv-cell.flash { animation: none; } }
@media (max-width: 767.98px) { .dash-pv .pv-legend-hint { margin-left: 0; } .dash-pv .pv-dates { width: 100%; } .dash-pv .pv-dates input { flex: 1; min-width: 0; } }
/* compact rows: the summary and the two buttons share one line; the spare width goes to the steps */
.dash-pv .pv-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .75rem; margin-top: .2rem; }
.dash-pv .pv-foot .pv-sum { margin-top: 0; }
.dash-pv .pv-foot .pv-acts { margin-top: 0; }
.dash-pv .pv-table td.pv-steps, .dash-pv .pv-table th.pv-th-steps { width: 100%; }
.dash-pv .pv-table td.pv-proj { min-width: 25rem; width: 25rem; } .dash-pv .pv-foot { flex-wrap: nowrap; } .dash-pv .pv-foot .pv-acts { margin-left: auto; }

/* ===== The projects list fits the window (owner, 2026-10-14): the card is a column (head, chips, the scrolling list, the legend), its
   height set by fitCard() in views.js; the table header sticks at the top of the list; only the steps scroll left to right (.pv-mxwrap:
   width 0 + min-width 100%, so the steps column takes what the other columns leave and never widens the table). ===== */
@media (min-width: 768px) {
  .dash-pv .pv-card { display: flex; flex-direction: column; }
  .dash-pv .pv-head, .dash-pv .pv-chips, .dash-pv .pv-legend { flex: none; }
  .dash-pv .pv-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }
  .dash-pv .pv-table > thead > tr > th { position: sticky; top: 0; z-index: 3; box-shadow: 0 1px 0 var(--pv-line); }
  .dash-pv .pv-table > thead > tr > th:not(.pv-th-steps) { background: #FBFBFC !important; }
}
.dash-pv .pv-mxwrap { width: 0; min-width: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; }
.dash-pv .pv-mxwrap::-webkit-scrollbar { display: none; }
.dash-pv .pv-mxwrap .pv-mx { width: max-content; padding-right: .5rem; }
/* the header's scroller shows the bar: the one place to drag the steps */
.dash-pv .pv-mxwrap-head { scrollbar-width: thin; scrollbar-color: #C9CDD4 transparent; padding-bottom: .15rem; }
.dash-pv .pv-mxwrap-head::-webkit-scrollbar { display: block; height: 6px; }
.dash-pv .pv-mxwrap-head::-webkit-scrollbar-thumb { background: #C9CDD4; border-radius: 99px; }
.dash-pv .pv-open { width: 0; min-width: 100%; max-width: none; }
.dash-pv .pv-table td.pv-due, .dash-pv .pv-table th[data-sort="dates"] { width: 11rem; min-width: 11rem; }
.dash-pv .pv-table td.pv-staff, .dash-pv .pv-table th[data-sort="assigned"] { width: 9rem; min-width: 9rem; }
.dash-pv .pv-table th[data-sort="cost"], .dash-pv .pv-table tbody td:last-child.text-end { width: 11rem; min-width: 11rem; }

/* ===== Arrows on both sides of the step names + fades on the rows (owner, 2026-10-14: "option 2") ===== */
.dash-pv .pv-th-steps { position: sticky; } /* the arrows are placed in it (it is already sticky at the top) */
.dash-pv .pv-arrow { display: none; position: absolute; bottom: .45rem; z-index: 4; width: 1.9rem; height: 1.9rem; border: 1px solid var(--pv-line); border-radius: 50%; background: #fff; color: var(--pv-ink);
  align-items: center; justify-content: center; padding: 0; box-shadow: 0 2px 6px rgba(27, 31, 36, .14); cursor: pointer; transition: opacity .15s, transform .15s; }
.dash-pv .pv-th-steps.pv-overflow .pv-arrow { display: inline-flex; }
.dash-pv .pv-arrow.left { left: .1rem; } .dash-pv .pv-arrow.right { right: .1rem; }
.dash-pv .pv-arrow:hover:not(:disabled) { background: var(--pv-ink); color: #fff; border-color: var(--pv-ink); transform: scale(1.06); }
.dash-pv .pv-arrow:disabled { opacity: .35; cursor: default; box-shadow: none; }
.dash-pv .pv-arrow:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* the header's names fade under the arrows (no padding: the header's steps stay aligned with the rows' squares) */
.dash-pv .pv-mxwrap-head.more-right { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2.6rem), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 2.6rem), transparent); }
.dash-pv .pv-mxwrap-head.more-left { -webkit-mask-image: linear-gradient(90deg, transparent, #000 2.6rem); mask-image: linear-gradient(90deg, transparent, #000 2.6rem); }
.dash-pv .pv-mxwrap-head.more-left.more-right { -webkit-mask-image: linear-gradient(90deg, transparent, #000 2.6rem, #000 calc(100% - 2.6rem), transparent); mask-image: linear-gradient(90deg, transparent, #000 2.6rem, #000 calc(100% - 2.6rem), transparent); }
/* rows: the squares fade on the side where steps are hidden */
.dash-pv .pv-mxwrap.more-right:not(.pv-mxwrap-head) { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent); }
.dash-pv .pv-mxwrap.more-left:not(.pv-mxwrap-head) { -webkit-mask-image: linear-gradient(90deg, transparent, #000 2.5rem); mask-image: linear-gradient(90deg, transparent, #000 2.5rem); }
.dash-pv .pv-mxwrap.more-left.more-right:not(.pv-mxwrap-head) { -webkit-mask-image: linear-gradient(90deg, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(90deg, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent); }
@media (prefers-reduced-motion: reduce) { .dash-pv .pv-arrow { transition: none; } }
/* the Files / Cost report buttons always stay on one line (owner, 2026-10-14: in French they wrapped); the step summary gives way (ellipsis, full text on hover) */
.dash-pv .pv-foot .pv-acts { flex: none; }
.dash-pv .pv-ib { white-space: nowrap; display: inline-flex; align-items: center; gap: .25rem; }
.dash-pv .pv-foot .pv-sum { min-width: 0; overflow: hidden; text-overflow: ellipsis; }