/* Board grid: monday's Main table (spec §4, §8.2–8.8, QA-3). Loaded after the older layers, so rules are scoped under #view.
   Geometry: 40px gutter (row "…" menu) · 6px group bar + checkbox · sticky name column · 37px rows on #d0d4e4 gridlines. */

#view .board-body {
  --gutter-w: 40px; --check-w: 40px; --name-w: 360px; --name-end-w: 65px;
  --lead-w: calc(var(--gutter-w) + var(--check-w) + var(--name-w));
  position: relative; margin: 0 -30px 0 calc(-1 * var(--gutter-w)); padding: 0 30px 24px 0;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: thin;
}
/* Desktop boards: the board body is the scroller in both directions, so each group's header row can stick at top:0 (spec §4.9)
   while the board header, view tabs and toolbar stay put above it. */
@media (min-width: 761px) {
  .app-shell > main > .content:has(> #view > .board-body) { display: flex; flex-direction: column; height: calc(100vh - var(--topbar-height) - 1px); }
  .app-shell > main > .content:has(> #view > .board-body) > * { flex: none; }
  .app-shell > main > .content:has(> #view > .board-body) > #view { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding-bottom: 0; }
  #view:has(> .board-body) > * { flex: none; }
  #view > .board-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding-bottom: 120px; }
}
#view .board-group .board-table thead th, #view .board-group .board-table thead td { position: sticky; top: 0; z-index: 5; }
#view .board-group .board-table thead .col-gutter, #view .board-group .board-table thead .col-check, #view .board-group .board-table thead .col-name { z-index: 6; }
#view .board-group .board-table thead.stuck th:not(.col-gutter) { box-shadow: var(--floating-header-shadow); }
#view .board-group .board-table thead.stuck .col-check { box-shadow: inset var(--group-bar-width) 0 0 var(--group-color), var(--floating-header-shadow); }

/* ---------- Group (spec §4.1, §4.2) ---------- */
#view .board-group { display: block; width: max-content; min-width: 100%; margin: 0 0 30px; padding: 0; border: 0; border-radius: 0;
  background: transparent; box-shadow: none; overflow: visible; }
#view .board-group .group-title { position: sticky; left: var(--gutter-w); z-index: 4; display: flex; align-items: center; width: max-content;
  height: var(--group-title-height); margin-left: var(--gutter-w); padding-left: 6px; }
#view .board-group .group-heading { display: inline-flex; align-items: center; gap: 6px; width: auto; height: 32px; min-height: 0; margin: 0;
  padding: 0 8px 0 2px; border: 1px solid transparent; border-radius: var(--border-radius-small); background: transparent; box-shadow: none;
  color: var(--group-color); font: var(--font-h3-normal); letter-spacing: var(--letter-spacing-h3); text-align: left; cursor: pointer; white-space: nowrap; }
#view .board-group .group-heading:hover { background: transparent; }
#view .board-group .group-heading strong { font: inherit; color: inherit; letter-spacing: inherit; max-width: 560px; overflow: hidden; text-overflow: ellipsis; }
#view .board-group .group-heading small { margin-left: 2px; padding: 0; border: 0; background: none; font: var(--font-text2-normal); color: var(--secondary-text-color);
  opacity: 0; transition: opacity .2s ease; }
#view .board-group:hover .group-heading small, #view .board-group .group-heading:focus-visible small, #view .board-group.collapsed .group-heading small { opacity: 1; }
#view .board-group .group-chevron { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; color: var(--group-color); }
#view .board-group .group-chevron svg.icon { width: 22px; height: 22px; }

/* ---------- Table and cells ---------- */
#view .board-group .board-table { table-layout: fixed; border-collapse: separate; border-spacing: 0; margin: 0; background: transparent;
  font: var(--font-text2-normal); color: var(--primary-text-color); }
#view .board-table col.c-gutter { width: var(--gutter-w); }
#view .board-table col.c-check { width: var(--check-w); }
#view .board-table col.c-name { width: var(--name-w); }
#view .board-group .board-table th, #view .board-group .board-table td {
  position: relative; top: auto; left: auto; z-index: auto; height: 37px; min-height: 0; max-width: none; min-width: 0; box-sizing: border-box;
  padding: 0; border: 0; border-right: 1px solid var(--table-border-color); border-bottom: 1px solid var(--table-border-color);
  background: var(--table-background-color); box-shadow: none; text-align: center; vertical-align: middle; white-space: nowrap;
  font: var(--font-text2-normal); color: var(--primary-text-color); text-transform: none; letter-spacing: 0; }
#view .board-group .board-table small:not(.group-heading small) { display: none; }

/* Gutter, group bar + checkbox, sticky name column (spec §4.9) */
#view .board-group .board-table .col-gutter { position: sticky; left: 0; z-index: 3; padding: 0; border: 0; background: var(--primary-background-color); text-align: left; }
#view .board-group .board-table .col-check { position: sticky; left: var(--gutter-w); z-index: 3; padding: 0 0 0 var(--group-bar-width);
  box-shadow: inset var(--group-bar-width) 0 0 var(--group-color); }
#view .board-group .board-table .col-check input { display: inline-flex; margin: 0; vertical-align: middle; }
#view .board-group .board-table .col-name { position: sticky; left: calc(var(--gutter-w) + var(--check-w)); z-index: 3; text-align: left; }
#view .board-body.scrolled-x .board-table td.col-name, #view .board-body.scrolled-x .board-table th.col-name { box-shadow: var(--sticky-column-shadow); }
#view .board-body.scrolled-x .board-table .summary-lead { box-shadow: var(--sticky-column-shadow), 0 8px 0 0 var(--primary-background-color); }
#view .board-body.scrolled-x .board-table .collapsed-name { box-shadow: inset var(--group-bar-width) 0 0 var(--group-color), var(--sticky-column-shadow); }

/* Header row (spec §4.3): the same 37px pitch as rows (QA-3.2): 1px top + 35px + 1px bottom, border-box. */
#view .board-group .board-table thead th { height: 37px; border-top: 1px solid var(--table-border-color); background: var(--table-background-color); padding: 0 6px; font-weight: 400; }
#view .board-group .board-table thead .col-gutter { border-top: 0; }
#view .board-group .board-table thead .col-check { border-top-left-radius: 6px; }
#view .board-group .board-table thead th:hover { background: var(--pulse-background-color); }
#view .board-group .board-table thead .col-gutter:hover { background: var(--primary-background-color); }
/* While the column "…" shows, reserve room on both sides so the centered title ellipsizes before the button (QA-3.3). */
#view .board-group .board-table thead th:not(.col-check):not(.col-gutter):is(:hover, :has(.th-menu[aria-expanded="true"], .th-menu:focus-visible)) { padding-left: 30px; padding-right: 30px; }
#view .board-table .sort-button { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; height: 35px; margin: 0; padding: 0;
  border: 0; background: none; font: var(--font-text2-normal); color: var(--primary-text-color); text-transform: none; letter-spacing: 0; cursor: pointer; }
#view .board-table .sort-button:hover { color: var(--primary-text-color); }
#view .board-table .sort-button .th-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view .board-table .sort-button .sort-icon { flex: none; width: 16px; height: 16px; color: var(--primary-color); opacity: 1; }
#view .board-table thead .th-menu { position: absolute; top: 50%; right: 4px; margin: 0; transform: translateY(-50%); opacity: 0; transition: opacity 150ms var(--motion-timing-transition); }
#view .board-table thead tr .th-menu { opacity: 0; }
#view .board-table thead tr th:hover .th-menu, #view .board-table thead tr .th-menu:focus-visible, #view .board-table thead tr .th-menu[aria-expanded="true"] { opacity: 1; background: var(--pulse-background-color); }
#view .board-table thead .th-menu:hover, #view .board-table thead .th-menu[aria-expanded="true"] { background: var(--ui-background-color); }
#view .board-table .th-static { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view .board-table .sort-button span { opacity: 1; font: inherit; color: inherit; }

/* Item rows (spec §4.4) */
#view .board-group .board-table tbody tr:hover > td:not(.col-gutter) { background: var(--pulse-background-color); }
#view .board-group .board-table tbody tr.checked > td:not(.col-gutter) { background: var(--primary-selected-color); }
#view .board-group .board-table tbody tr.checked:hover > td:not(.col-gutter) { background: var(--primary-selected-hover-color); }
#view .board-group .board-table td:has(.inline-form) { z-index: 30; overflow: visible; }

/* Row "…" menu in the gutter */
#view .row-menu-button { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-left: 8px; padding: 0;
  border: 0; border-radius: var(--border-radius-small); background: transparent; color: var(--primary-text-color); cursor: pointer; opacity: 0;
  transition: opacity var(--motion-productive-medium); }
#view tr:hover .row-menu-button, #view .row-menu-button:focus-visible, #view .row-menu-button[aria-expanded="true"] { opacity: 1; }
#view .row-menu-button:hover, #view .row-menu-button[aria-expanded="true"] { background: var(--layout-border-color); }
#view .row-menu { position: fixed; z-index: 1000; min-width: 200px; text-align: left; }
#view .board-group .board-table td.col-gutter:has(.row-menu:not([hidden])) { z-index: 60; }

/* Name cell (spec §4.5 Name, QA-3.4, QA-3.5) */
#view .board-group .board-table td.col-name { padding-right: var(--name-end-w); }
#view .board-table .cell-name { position: static; display: flex; align-items: center; gap: var(--space-8); height: 36px; min-width: 0; padding: 0 4px 0 14px; }
#view .board-table .cell-name > .avatar { margin: 0; }
/* Company avatars are 20px squares with one initial at a readable size (§1.2 minimum text). */
#view .board-table .cell-name > .avatar.square { font-size: 11px; font-weight: 600; letter-spacing: 0; }
#view .board-table .cell-name .name-link { flex: 0 1 auto; min-width: 0; margin: 0; padding: 0; border: 0; background: none; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font: var(--font-text2-normal); font-weight: 400; color: var(--primary-text-color); text-align: left; cursor: pointer; line-height: 20px; }
#view .board-table .cell-name .name-link:hover { color: var(--primary-text-color); text-decoration: none; }
#view .board-table .cell-pencil-btn { position: static; display: inline-flex; flex: none; align-items: center; justify-content: center; width: 24px; height: 24px;
  margin: 0; padding: 0; border: 0; border-radius: var(--border-radius-small); background: transparent; color: var(--icon-color); cursor: pointer; opacity: 0; font-size: 0; }
#view .board-table .cell-pencil-btn svg.icon { width: 16px; height: 16px; }
#view .board-table .cell-pencil-btn:hover { background: var(--ui-background-color); color: var(--primary-text-color); }
#view .board-table tr:hover .cell-pencil-btn, #view .board-table .cell-pencil-btn:focus-visible { opacity: 1; }
#view .board-table .name-end { position: absolute; top: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; width: var(--name-end-w);
  border-left: 1px solid var(--table-border-color); }
#view .board-table .item-card-button { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 28px; padding: 0;
  border: 0; border-radius: var(--border-radius-small); background: transparent; color: var(--icon-color); cursor: pointer; }
#view .board-table .item-card-button:hover { background: var(--primary-background-hover-color); color: var(--primary-text-color); }
#view .board-table .item-card-button svg.icon { width: 20px; height: 20px; }
#view .board-table .updates-badge { position: absolute; top: 13px; left: 18px; min-width: 14px; height: 14px; padding: 0 4px; box-sizing: border-box; border-radius: 10px;
  background: var(--secondary-text-color); color: #fff; font: 600 10px/14px var(--font-family); box-shadow: 0 0 0 2px var(--primary-background-color); pointer-events: none; }
/* CRM boards: the count sits on the item-card icon as a 12px badge at icon x+12, y+10 (spec §4.5); 14px stays for the Update bubble. */
#view .board-table .item-card-button .updates-badge { top: 14px; left: 18px; min-width: 12px; height: 12px; padding: 0 3px; border-radius: 6px; font: 600 9px/12px var(--font-family);
  box-shadow: 0 0 0 1.5px var(--primary-background-color); }

/* Editable value cells */
#view .board-table .board-cell { position: static; display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 36px; min-height: 0;
  margin: 0; padding: 0 8px; border: 0; border-radius: 0; background: transparent; color: var(--primary-text-color); font: var(--font-text2-normal);
  text-align: center; cursor: pointer; overflow: hidden; }
#view .board-table .board-cell.cell-people, #view .board-table .board-cell.cell-date { overflow: visible; }
#view .board-table .board-cell.cell-text:hover, #view .board-table .board-cell.cell-long:hover, #view .board-table .board-cell.cell-number:hover,
#view .board-table .board-cell.cell-percent:hover, #view .board-table .board-cell.cell-email:hover, #view .board-table .board-cell.cell-link:hover,
#view .board-table .board-cell.cell-phone:hover { box-shadow: inset 0 0 0 1px var(--ui-border-color); border-radius: var(--border-radius-small); }
#view .board-table .board-cell:focus-visible { box-shadow: inset 0 0 0 1px var(--secondary-text-color); border-radius: 0; }
#view .board-table .board-cell.cell-long, #view .board-group .board-table td.col-long { justify-content: flex-start; text-align: left; }
#view .board-table .text-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view .board-table .placeholder { font-size: 13px; font-style: normal; color: var(--secondary-text-color); opacity: 0; transition: opacity var(--motion-productive-medium);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view .board-table tr:hover .placeholder, #view .board-table :focus-visible > .placeholder { opacity: 1; }
#view .board-table .num { font: var(--font-text2-normal); color: var(--primary-text-color); }
#view .board-table .cell-hover-add { height: 36px; padding: 0 8px; border: 0; background: none; color: var(--secondary-text-color); font: var(--font-text2-normal);
  opacity: 0; cursor: pointer; }
#view .board-table tr:hover .cell-hover-add, #view .board-table .cell-hover-add:focus-visible { opacity: 1; }
#view .board-table .cell-hover-add:hover { color: var(--primary-color); }

/* Status / stage / priority: full-cell fill with centered text, white or dark by the color (--status-text, WCAG AA) (spec §4.5 Status, §8.12) */
#view .board-group .board-table td.col-status { padding: 0; }
#view .board-table .label-select { appearance: none; -webkit-appearance: none; display: block; width: 100%; height: 36px; min-width: 0; max-width: none; min-height: 0;
  margin: 0; padding: 0 8px; border: 0; border-radius: 0; background: var(--status, var(--color-explosive)); background-image: none; box-shadow: none;
  color: var(--status-text, #fff); font: var(--font-text2-normal); text-align: center; text-align-last: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
#view .board-table .label-select.is-blank { color: transparent; }
#view .board-table .label-select option { background: var(--primary-background-color); color: var(--primary-text-color); text-align: left; }
#view .board-table .label-select:focus-visible { outline: none; box-shadow: inset 0 0 0 2px currentColor; border-radius: 0; }
#view .board-group .board-table td.col-status::after { content: ""; position: absolute; top: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 0;
  border-color: transparent; border-right-color: var(--primary-background-color); border-bottom-color: rgba(0, 0, 0, .2); transition: border-width .3s .2s ease; pointer-events: none; }
#view .board-group .board-table td.col-status:hover::after { border-width: 0 10px 10px 0; }

/* Connected records and dropdown values as CRM chips (spec §3.11, QA-3.9, QA-3.10) */
#view .board-table .chip.crm { display: inline-flex; flex: 0 1 auto; align-items: center; gap: 4px; min-width: 0; max-width: 100%; height: 22px; margin: 0; padding: 0 6px;
  border: 0; border-radius: var(--border-radius-small); background: var(--crm-chip-color); color: var(--primary-text-color); font: var(--font-text2-normal); box-sizing: border-box; }
#view .board-table .chip.crm.plain { padding: 0 8px; }
#view .board-table .chip.crm.more { flex: none; padding: 0 6px; }
#view .board-table .chip.crm.clickable { cursor: pointer; }
#view .board-table .chip.crm.clickable:hover { background: var(--crm-selected-hover-color); }
#view .board-table .chip.crm svg.icon { flex: none; width: 16px; height: 16px; color: var(--primary-text-color); }
#view .board-table .chip.crm .chip-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view .board-table .chip-list { display: inline-flex; align-items: center; justify-content: center; gap: 6px; max-width: 100%; min-width: 0; }
#view .board-group .board-table td.col-chips { padding: 0 8px; }
#view .board-table .chip-cell { display: flex; align-items: center; justify-content: center; height: 36px; padding: 0 8px; min-width: 0; }
#view .board-table .chip-select { appearance: none; -webkit-appearance: none; position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; max-width: none;
  margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; font: var(--font-text2-normal); }
#view .board-table .chip-select:focus-visible + *, #view .board-table .chip-cell:focus-within { box-shadow: inset 0 0 0 1px var(--secondary-text-color); }
#view .board-table .cell-add { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%;
  background: var(--primary-color); color: #fff; opacity: 0; }
#view .board-table .cell-add svg.icon { width: 14px; height: 14px; }
#view .board-table tr:hover .cell-add { opacity: 1; }

/* People (spec §3.9 board People cell) */
#view .board-table .people-view { display: inline-flex; align-items: center; justify-content: center; }
#view .board-table .people-view > .avatar { --avatar-ring: var(--pulse-background-color); position: relative; border-color: var(--pulse-background-color); }
#view .board-table .people-view > * + .avatar, #view .board-table .people-view > .avatar + .avatar-counter { margin-left: -6px; }
#view .board-table .people-view > .avatar-counter { position: relative; height: 28px; min-width: 28px; background: var(--counter-dark); color: #fff;
  font: 300 11.5px/25px var(--font-family); border: 1px solid var(--pulse-background-color); box-sizing: border-box; }
#view .board-table .people-view > .avatar.empty { border: 0; }

/* Dates with deadline indicator (spec §4.5 Date, QA-3.7) */
#view .board-group .board-table td.col-date { padding: 0; }
#view .board-table .date-view { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 36px; min-width: 0;
  padding: 0 28px; box-sizing: border-box; color: var(--pulse-text-color); font: var(--font-text2-normal); }
#view .board-table .board-cell.cell-date { padding: 0; }
#view .board-table .date-view .date-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view .board-table .date-view .date-text.free { color: var(--secondary-text-color); }
#view .board-table .date-view.done .date-text { text-decoration: line-through; }
#view .board-table .date-view .deadline { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); display: inline-flex; }
#view :is(.board-table, .pipe-value) .deadline-pie { display: block; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--secondary-text-color);
  background: conic-gradient(var(--secondary-text-color) calc(var(--p, 0) * 360deg), transparent 0); }
#view :is(.board-table, .pipe-value) .deadline-ring { display: block; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--color-explosive); }
#view :is(.board-table, .pipe-value) .deadline .deadline-overdue { width: 16px; height: 16px; color: var(--color-stuck-red); }
#view :is(.board-table, .pipe-value) .deadline .deadline-done { width: 16px; height: 16px; color: var(--positive-color); }
#view .board-table .date-view .date-add { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 16px; height: 16px; color: var(--ui-border-color); opacity: 0; }
#view .board-table tr:hover .date-view.no-date .date-add { opacity: 1; }
#view .board-table .date-view.no-date:has(.date-text) .date-add { display: none; }
#view .board-table .stale-date { display: flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 8px; }
#view .board-table .stale-date > .date-view { width: auto; padding: 0; margin: 0; flex: 0 1 auto; }
#view .board-table .stale-flag { flex: none; height: 18px; padding: 0 6px; border-radius: 9px; background: var(--color-working_orange-selected);
  color: var(--primary-text-color); font: var(--font-text3-normal); line-height: 18px; }
#view .board-table .next-step { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; height: 36px; margin: 0; padding: 0 8px;
  border: 0; background: none; color: var(--primary-text-color); font: var(--font-text2-normal); text-align: left; cursor: pointer; }
#view .board-table .next-step:hover { box-shadow: inset 0 0 0 1px var(--ui-border-color); border-radius: var(--border-radius-small); }
#view .board-table .next-step > .date-view { flex: none; width: auto; margin: 0; padding: 0 0 0 22px; position: relative; }
#view .board-table .next-step > .date-view .deadline { left: 0; }
#view .board-table .next-step-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--secondary-text-color); }

/* Links, email, phone (spec §4.5) */
#view .board-table .cell-link { position: relative; display: flex; align-items: center; justify-content: center; height: 36px; padding: 0 26px; min-width: 0; }
#view .board-table .cell-link a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--link-color); text-decoration: none; }
#view .board-table .cell-link a:hover { text-decoration: underline; }
#view .board-table .cell-link .cell-pencil-btn { position: absolute; right: 2px; top: 6px; }

/* Labels (spec §3.11 colored label chips, -selected tint + dot) */
#view .board-group .board-table td.col-labels { padding: 0; }
#view .board-table .label-cell { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 6px; width: 100%; height: 36px; min-height: 0;
  margin: 0; padding: 0 8px; border: 0; border-radius: 0; background: transparent; cursor: pointer; overflow: hidden; }
#view .board-table .label-cell:hover { background: transparent; box-shadow: inset 0 0 0 1px var(--ui-border-color); border-radius: var(--border-radius-small); }
#view .board-table .label-chip { --c: var(--label-blue); --c-selected: var(--label-blue-selected); display: block; flex: 0 1 auto; min-width: 0; max-width: 130px;
  height: 22px; margin: 0; padding: 0 8px 0 6px; border: 0; border-radius: var(--border-radius-small); background: var(--c-selected);
  color: var(--primary-text-color); font: var(--font-text2-normal); line-height: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; }
#view .board-table .label-chip::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--c); vertical-align: 0; }
#view .board-table .label-chip.green { --c: var(--label-green); --c-selected: var(--label-green-selected); }
#view .board-table .label-chip.amber { --c: var(--label-amber); --c-selected: var(--label-amber-selected); }
#view .board-table .label-chip.red { --c: var(--label-red); --c-selected: var(--label-red-selected); }
#view .board-table .label-chip.lilac { --c: var(--label-lilac); --c-selected: var(--label-lilac-selected); }
#view .board-table .label-chip.teal { --c: var(--label-teal); --c-selected: var(--label-teal-selected); }
#view .board-table .label-chip.pink { --c: var(--label-pink); --c-selected: var(--label-pink-selected); }
#view .board-table .label-chip.gray { --c: var(--label-gray); --c-selected: var(--label-gray-selected); }
#view .board-table .label-chip.more { flex: none; padding: 0 6px; background: var(--ui-background-color); }
#view .board-table .label-chip.more::before { display: none; }
#view .board-table .label-cell .placeholder { font-size: 13px; }

/* Button column (Leads "Create deal", follow-ups "Mark done"; spec §4.5 Button column) */
#view .board-group .board-table td.col-button { padding: 0 8px; }
#view .board-table .button-cell { display: inline-flex; align-items: center; justify-content: center; max-width: 100%; height: 26px; margin: 0; padding: 0 12px;
  border: 0; border-radius: var(--border-radius-small); background: var(--color-grass_green); color: #fff; font: var(--font-text2-normal);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
#view .board-table .button-cell:hover { background: var(--color-grass_green-hover); }
#view .board-table .button-cell.secondary { background: transparent; color: var(--primary-text-color); box-shadow: inset 0 0 0 1px var(--ui-border-color); }
#view .board-table .button-cell.secondary:hover { background: var(--primary-background-hover-color); }

/* Checkbox column (follow-ups "Done"; spec §4.5): centered 18px box, checked = green Check with no box. */
#view .board-table .check-cell { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin: 0; padding: 0; box-sizing: border-box;
  border: 1px solid var(--ui-border-color); border-radius: 4px; background: var(--primary-background-color); color: var(--color-done-green, #00c875); cursor: pointer; vertical-align: middle; }
#view .board-table .check-cell:hover { border-color: var(--primary-text-color); }
#view .board-table .check-cell.on { border: 0; background: none; }
#view .board-table .check-cell svg.icon { width: 18px; height: 18px; }

/* Empty group and "+ Add item" row (spec §4.6, §4.10, QA-3.1 elevation) */
#view .board-group .board-table tfoot td { background: var(--table-background-color); font-weight: 400; color: var(--primary-text-color); }
#view .board-group .board-table .row-rest { border-right: 0; }
#view .board-group .board-table .empty-row .empty-cell { padding: 0 8px 0 14px; color: var(--secondary-text-color); overflow: hidden; text-overflow: ellipsis; }
#view .board-group .board-table .empty-row .col-check { box-shadow: inset var(--group-bar-width) 0 0 var(--group-color); }
#view .board-group .board-table .add-row td:not(.col-gutter):not(.col-check) { box-shadow: var(--board-elevation); }
#view .board-group .board-table .add-row .col-check { box-shadow: inset var(--group-bar-width) 0 0 color-mix(in srgb, var(--group-color) 50%, transparent), var(--board-elevation);
  border-bottom-left-radius: 6px; transition: box-shadow .1s; }
#view .board-group .board-table .add-row:hover .col-check, #view .board-group .board-table .add-row:focus-within .col-check {
  box-shadow: inset var(--group-bar-width) 0 0 var(--group-color), var(--board-elevation); }
#view .board-group .board-table .add-row .add-cell { padding: 0 0 0 4px; border-right: 0; }
#view .board-table .check-ghost { display: inline-block; width: 16px; height: 16px; box-sizing: border-box; border: 1px solid var(--ui-border-color); border-radius: var(--border-radius-small); opacity: .4; vertical-align: middle; }
#view .board-table .add-item-button { display: flex; align-items: center; width: calc(var(--name-w) - 24px); max-width: calc(100% - 6px); height: 26px; margin: 0; padding: 0 10px;
  border: 0; border-radius: var(--border-radius-small); background: transparent; color: var(--secondary-text-color); font: var(--font-text2-normal); text-align: left; cursor: pointer; }
#view .board-table .add-item-button:hover { box-shadow: inset 0 0 0 1px var(--ui-border-color); }
#view .board-table .add-item-button:focus-visible { background: var(--primary-background-color); box-shadow: inset 0 0 0 1px var(--primary-color); }
#view .board-group .board-table .add-row:focus-within td:not(.col-gutter) { background: var(--primary-selected-color); }
#view .board-table .add-item-button:disabled { opacity: .5; cursor: not-allowed; }

/* Summary row (spec §4.7): battery, sums, date range */
#view .board-group .board-table .summary-row td { height: 37px; padding: 0 8px; box-shadow: var(--board-elevation); }
#view .board-group .board-table .summary-row .col-gutter, #view .board-group .board-table .summary-row .summary-lead, #view .board-group .board-table .add-row .col-gutter { box-shadow: 0 8px 0 0 var(--primary-background-color); }
#view .board-group .board-table .summary-row .summary-lead { position: sticky; left: var(--gutter-w); z-index: 3; border: 0; background: var(--primary-background-color); }
#view .board-group .board-table .summary-row .summary-lead + td { border-left: 1px solid var(--table-border-color); border-bottom-left-radius: 6px; }
#view .board-table .battery { display: block; width: 100%; height: 24px; overflow: visible; }
#view .board-table .sum-value { display: block; font: var(--font-text2-normal); line-height: 18px; color: var(--primary-text-color); }
#view .board-table .sum-label { display: block; margin: 0; font: 400 11.5px/13px var(--font-family); color: var(--secondary-text-color); text-transform: none; letter-spacing: 0; }
#view .board-table .date-range { display: inline-block; max-width: 100%; height: 22px; padding: 0 10px; border-radius: 11px; background: var(--group-color); color: var(--group-color-text, #fff);
  font: 400 12px/20px var(--font-family); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; }

/* Collapsed group (spec §4.8) */
#view .board-group.collapsed { margin-bottom: 16px; }
#view .board-group.collapsed .board-table .collapsed-row > * { height: 60px; vertical-align: top; border-top: 1px solid var(--table-border-color); }
#view .board-group.collapsed .board-table .collapsed-row > .col-gutter { border-top: 0; }
#view .board-group.collapsed .board-table .collapsed-name { position: sticky; left: var(--gutter-w); z-index: 3; padding: 4px 8px 0 calc(var(--group-bar-width) + 6px);
  text-align: left; border-radius: 6px 0 0 6px; box-shadow: inset var(--group-bar-width) 0 0 var(--group-color); }
#view .board-group.collapsed .collapsed-name .group-heading { display: grid; grid-template-columns: auto 1fr; align-items: center; height: auto; gap: 0 6px;
  padding: 2px 8px 2px 2px; border-radius: 0 4px 4px 0; max-width: 100%; }
#view .board-group.collapsed .collapsed-name .group-heading:hover { background: var(--pulse-hover-background-color); }
#view .board-group.collapsed .collapsed-name .group-heading small { grid-column: 2; margin: 0; line-height: 20px; }
#view .board-group.collapsed .board-table .collapsed-row td:not(.col-gutter) { padding: 6px 8px 0; }
#view .board-table .collapsed-title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--font-text2-normal); color: var(--primary-text-color); }
#view .board-table .collapsed-summary { display: block; margin-top: 6px; }
#view .board-table .collapsed-summary .sum-label { display: none; }

/* In-cell editor floats over the row, like monday's cell editors */
#view .board-group .board-table .inline-form { position: absolute; z-index: 30; top: 0; left: 0; width: max-content; min-width: max(100%, 280px); max-width: 360px;
  box-sizing: border-box; padding: var(--space-8); border-radius: var(--border-radius-medium); background: var(--primary-background-color); box-shadow: var(--box-shadow-medium); text-align: left; white-space: normal; }
#view .board-group .board-table .inline-form input, #view .board-group .board-table .inline-form textarea { display: block; width: 100%; min-width: 0; box-sizing: border-box; height: 32px;
  padding: 0 var(--space-8); border: 1px solid var(--primary-color); border-radius: var(--border-radius-small); font: var(--font-text2-normal); color: var(--primary-text-color); }
#view .board-group .board-table .inline-form textarea { height: 96px; padding: var(--space-8); resize: vertical; }
#view .board-group .board-table .inline-form > div { display: flex; justify-content: flex-end; gap: var(--space-8); margin-top: var(--space-8); }
#view .board-group .board-table .inline-form .button { height: 32px; min-height: 32px; padding: 0 var(--space-12); font: var(--font-text2-normal); }
#view .board-group .board-table .inline-form .inline-error { margin: var(--space-4) 0 0; color: var(--negative-color); font: var(--font-text3-normal); }
#view .board-group .board-table .inline-form .inline-error:empty { display: none; }

/* Bulk-action bar (spec §4.12) */
.bulk-bar { position: fixed; left: calc(var(--panel-left, 72px) + (100vw - var(--panel-left, 72px)) / 2); bottom: 32px; z-index: 900; display: flex; align-items: center; height: 64px; min-width: 440px; transform: translateX(-50%);
  border-radius: var(--border-radius-medium); background: var(--primary-background-color); box-shadow: var(--box-shadow-large); overflow: hidden; }
.bulk-bar[hidden] { display: none; }
.bulk-bar .bulk-count { display: flex; align-items: center; justify-content: center; flex: none; width: 64px; height: 64px; background: var(--primary-color); color: #fff;
  font: 300 24px/1 var(--title-font-family); }
.bulk-bar .bulk-text { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 0 24px; font: 400 17px/23px var(--title-font-family); color: var(--primary-text-color); white-space: nowrap; }
.bulk-bar .bulk-dots { display: flex; gap: 4px; height: 8px; }
.bulk-bar .bulk-dots:empty { display: none; }
.bulk-bar .bulk-dot { width: 8px; height: 8px; border-radius: 50%; }
.bulk-bar .bulk-actions { display: flex; margin-left: auto; }
.bulk-bar .bulk-action { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 72px; height: 64px; padding: 0; border: 0;
  background: transparent; color: var(--primary-text-color); font: var(--font-text3-normal); cursor: pointer; }
.bulk-bar .bulk-action:hover { background: var(--primary-background-hover-color); }
.bulk-bar .bulk-close { display: flex; align-items: center; justify-content: center; width: 56px; height: 64px; padding: 0; border: 0; border-left: 1px solid var(--layout-border-color);
  background: transparent; color: var(--icon-color); cursor: pointer; }
.bulk-bar .bulk-close:hover { background: var(--primary-background-hover-color); }

/* ---------- Narrower panels and phones ---------- */
/* Scrolling a cell into view keeps it clear of the sticky gutter, checkbox and name columns. */
#view .board-body { scroll-padding-left: calc(var(--gutter-w, 40px) + var(--check-w, 40px) + var(--name-w, 360px)); }
@media (max-width: 1279px) {
  #view .board-body { --gutter-w: 34px; margin-right: -24px; padding-right: 24px; }
}
@media (max-width: 760px) {
  #view .board-body { --gutter-w: 28px; --check-w: 6px; --name-w: 200px; --name-end-w: 40px; margin: 0 -16px; padding-right: 16px; }
  #view .board-group .board-table .col-check input, #view .board-table .check-ghost { display: none; }
  #view .board-group .board-table .col-check { padding: 0; }
  #view .row-menu-button { margin-left: 2px; opacity: .7; }
  #view .board-table .cell-name { padding-left: 8px; }
  #view .board-table .item-card-button { width: 28px; }
  #view .board-group .group-heading strong { max-width: 240px; }
  .bulk-bar { display: none; }
}
@media (hover: none) { #view .row-menu-button { opacity: .7; } }
/* The empty-person avatar must not pick up the generic .empty message padding from crm.css. */
.avatar.empty { padding: 0; font-size: inherit; line-height: 1; text-align: initial; }

/* ---------- Review round 1 (spec §4.5, QA-3.8): status buttons, label and people pickers, name-cell hover ---------- */
/* The status cell is a button with the label colour filling the cell; the fold appears on hover. */
#view .board-table button.label-select { display: block; line-height: 36px; }
#view .board-table button.label-select:hover { background: var(--status-hover, var(--status)); }
#view .board-table button.label-select.is-blank { color: transparent; }
#view .board-table button.label-select[aria-expanded="true"] { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .8); }
.status-picker { position: fixed; z-index: 1000; width: 200px; max-height: calc(100vh - 16px); padding: 8px 24px; box-sizing: border-box; overflow: visible;
  border-radius: var(--border-radius-medium); background: var(--primary-background-color); box-shadow: var(--box-shadow-medium); }
.status-picker .picker-caret { position: absolute; top: -4px; left: var(--caret-x, 50%); width: 8px; height: 8px; background: var(--primary-background-color); transform: translateX(-50%) rotate(45deg);
  box-shadow: -2px -2px 3px rgba(0, 0, 0, .06); }
.status-picker.above .picker-caret { top: auto; bottom: -4px; box-shadow: 2px 2px 3px rgba(0, 0, 0, .08); }
.status-picker .opt { position: relative; display: block; width: 100%; height: 32px; margin: 0 0 8px; padding: 0 8px; border: 0; border-radius: 2px; background: var(--c); color: var(--c-text, #fff);
  font: var(--font-text2-normal); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; transition: background-color var(--motion-productive-short); }
.status-picker .opt:last-child { margin-bottom: 0; }
.status-picker .opt:hover, .status-picker .opt:focus-visible { background: var(--c-hover); outline: none; }
.status-picker .opt:focus-visible { box-shadow: 0 0 0 2px var(--primary-background-color), 0 0 0 4px var(--primary-color); }
.status-picker .opt.blank { background: var(--color-explosive); color: var(--color-explosive-text); }
.status-picker .opt.blank:hover { background: var(--color-explosive-hover-fill); }
.people-picker { position: fixed; z-index: 1000; width: 300px; max-height: min(440px, calc(100vh - 16px)); padding: 8px; box-sizing: border-box; overflow-y: auto;
  border-radius: var(--border-radius-medium); background: var(--primary-background-color); box-shadow: var(--box-shadow-medium); }
.people-picker .picker-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 8px; }
.people-picker .people-chip { height: 24px; padding: 0 2px 0 3px; gap: 4px; background: var(--primary-selected-color); border-radius: var(--border-radius-small); }
.people-picker .people-chip .avatar { --size: 18px; font-size: 9px; }
.people-picker .chip-remove { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; border: 0; border-radius: var(--border-radius-small);
  background: transparent; color: var(--icon-color); cursor: pointer; }
.people-picker .chip-remove:hover { background: var(--primary-selected-hover-color); color: var(--primary-text-color); }
.people-picker .picker-search { display: flex; width: 100%; box-sizing: border-box; border: 1px solid var(--ui-border-color); border-radius: var(--border-radius-small); }
.people-picker .picker-search:focus-within { border-color: var(--primary-color); }
.people-picker .picker-section-title { margin: 12px 4px 4px; font: var(--font-text3-normal); color: var(--secondary-text-color); }
.people-picker .people-options { display: flex; flex-direction: column; }
.people-picker .people-option { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 8px; border: 0; border-radius: var(--border-radius-small); background: transparent;
  color: var(--primary-text-color); font: var(--font-text2-normal); text-align: left; cursor: pointer; }
.people-picker .people-option:hover, .people-picker .people-option:focus-visible { background: var(--primary-background-hover-color); outline: none; }
.people-picker .people-option .avatar { --size: 24px; font-size: 10px; }
.people-picker .people-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.people-picker .people-sub { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--secondary-text-color); }
.people-picker .picker-empty { margin: 4px; color: var(--secondary-text-color); font: var(--font-text2-normal); }
#view .board-table .avatar.unknown, .avatar.unknown { display: inline-flex; align-items: center; justify-content: center; background: var(--avatar-color); color: var(--avatar-text, #fff); font: 600 13px/1 var(--font-family); }

/* Name cell: no visible pencil; the cell around the name is the rename target with monday's edit outline on hover. */
#view .board-table .cell-name { position: relative; }
/* Leave a strip after even the longest name, so the mouse can always reach the rename target. */
#view .board-table .cell-name > .name-link { max-width: calc(100% - 28px); }
#view .board-table .cell-name > .name-link, #view .board-table .cell-name > .avatar, #view .board-table .cell-name > .open-mini, #view .board-table .cell-name > .cell-check { position: relative; z-index: 1; }
#view .board-table .cell-pencil-btn { position: absolute; inset: 6px auto 6px 6px; width: calc(100% - 10px); height: auto; opacity: 1; z-index: 0; background: transparent; border-radius: var(--border-radius-small); }
#view .board-table .cell-pencil-btn svg.icon { display: none; }
#view .board-table .cell-pencil-btn:hover { background: transparent; }
#view .board-table tr:hover .cell-name .cell-pencil-btn { box-shadow: inset 0 0 0 1px var(--ui-border-color); }
#view .board-table .cell-pencil-btn:focus-visible { box-shadow: inset 0 0 0 1px var(--primary-color); outline: none; }
#view .board-table .cell-link .cell-pencil-btn { position: absolute; inset: auto 2px auto auto; top: 6px; width: 24px; height: 24px; }
#view .board-table .cell-link .cell-pencil-btn svg.icon { display: block; }
#view .board-table .cell-link .cell-pencil-btn { opacity: 0; }
#view .board-table tr:hover .cell-link .cell-pencil-btn { opacity: 1; box-shadow: none; }
/* "Open" and the follow-up check float at the end of the name area on hover, so idle names keep their full width. */
#view .board-table .cell-name > .open-mini, #view .board-table .cell-name > .cell-check { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; }
#view .board-table .cell-name > .open-mini { right: 8px; }
#view .board-table .cell-name > .cell-check + .open-mini, #view .board-table .cell-name > .open-mini:has(+ .cell-check) { right: 36px; }
#view .board-table .cell-name > .cell-check { right: 8px; }
#view .board-table .open-mini { display: inline-flex; flex: none; align-items: center; gap: 4px; height: 22px; margin: 0; padding: 0 6px; border: 0; border-radius: var(--border-radius-small);
  background: var(--pulse-background-color); color: var(--secondary-text-color); font: 400 12px/20px var(--font-family); cursor: pointer; opacity: 0; transition: opacity var(--motion-productive-medium); }
#view .board-table .open-mini svg.icon { width: 14px; height: 14px; }
#view .board-table tr:hover .open-mini, #view .board-table .open-mini:focus-visible { opacity: 1; }
#view .board-table .open-mini:hover { background: var(--pulse-hover-background-color); color: var(--primary-text-color); }
#view .board-table .cell-check { flex: none; margin: 0; color: var(--icon-color); background: var(--pulse-background-color); opacity: 0; transition: opacity var(--motion-productive-medium); }
#view .board-table tr:hover .cell-check, #view .board-table .cell-check:focus-visible { opacity: 1; }
#view .board-table .cell-check:hover { background: var(--pulse-hover-background-color); color: var(--primary-text-color); }
#view .board-table tr.checked .open-mini, #view .board-table tr.checked .cell-check, #view .board-table tr.panel-open .open-mini, #view .board-table tr.panel-open .cell-check { background: var(--primary-selected-color); }
#view .board-table .cell-check svg.icon { width: 16px; height: 16px; }
/* Updates bubble on boards that open the side panel (§4.5): Update.svg with the count, AddUpdate.svg when there are none. */
#view .board-table .updates-button { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 28px; padding: 0; border: 0;
  border-radius: var(--border-radius-small); background: transparent; color: var(--icon-color); cursor: pointer; }
#view .board-table .updates-button svg.icon { width: 22px; height: 22px; }
#view .board-table .updates-button.is-empty { color: var(--ui-border-color); }
#view .board-table tr:hover .updates-button.is-empty, #view .board-table .updates-button:hover { color: var(--icon-color); }
#view .board-table .updates-button:hover { background: var(--primary-background-hover-color); }
#view .board-table .updates-button .updates-badge { top: 11px; left: 19px; }
/* The row whose side panel is open stays highlighted (§5.2). */
#view .board-group .board-table tbody tr.panel-open > td:not(.col-gutter) { background: var(--primary-selected-color); }
/* Leads: "Create deal" shows for qualified leads; other open leads reveal it on hover (§8.5). */
#view .board-table .button-cell.on-hover { opacity: 0; transition: opacity var(--motion-productive-medium); }
#view .board-table tr:hover .button-cell.on-hover, #view .board-table .button-cell.on-hover:focus-visible { opacity: 1; }
/* Next follow-up is a date column: the date and deadline indicator only (§8.6). */
#view .board-table .next-step { justify-content: center; padding: 0; }
#view .board-table .next-step > .date-view { width: 100%; padding: 0 28px; }
#view .board-table .next-step > .date-view .deadline { left: 10px; }
#view .board-table thead tr th .th-menu:hover, #view .board-table thead tr th .th-menu[aria-expanded="true"] { background: var(--ui-background-color); }