/* List grid (B-020 / B-021): deals list today, leads / people / organizations / activities later.
   Sticky 14px/600 header, 32px rows, thin grid lines, inline cell editor, bulk edit panel.
   Colours only via tokens.css. */

/* ---- Page --------------------------------------------------------------------------------------- */
.list-page .toolbar-row { min-height: var(--control-h); }
.list-toolbar { margin-bottom: var(--sp-5); }
.list-add { gap: var(--sp-2); padding: 0 var(--sp-5) 0 var(--sp-4); font-weight: var(--fw-semibold); }
.list-count { font-weight: var(--fw-semibold); }
.list-bulk-bar .toolbar-left { display: flex; align-items: center; gap: var(--sp-4); }
.list-bulk-bar .link-btn { margin: 0; }
.list-bulk-count { margin: 0 var(--sp-2) 0 var(--sp-3); font-weight: var(--fw-semibold); white-space: nowrap; }
.list-bulk-delete:hover { color: var(--red); }
.toolbar-row[hidden] { display: none; }

/* ---- Grid frame ---------------------------------------------------------------------------------- */
.list-grid {
  position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column;
  margin: 0 calc(-1 * var(--sp-6)); border-top: 1px solid var(--grid-line); background: var(--bg-surface);
}
.list-scroll { flex: 1; min-height: 0; overflow: auto; }
.list-table { display: flex; flex-direction: column; min-width: max-content; }
/* Build Q review fix (round 2): a resizable grid (leads inbox) fits its box: fr columns share the spare room, and below
   the columns' minimums (--list-min-w, set by list-grid.js) the table scrolls sideways inside .list-scroll. */
.list-grid.is-fit .list-table { width: 100%; min-width: var(--list-min-w, max-content); }
.list-row {
  display: grid; grid-template-columns: var(--list-cols); min-height: 32px; height: 32px;
  border-bottom: 1px solid var(--grid-line); background: var(--bg-surface);
  transition: background var(--t-fast) var(--ease);
}
.list-body .list-row:hover { background: var(--bg-hover); }
.list-body .list-row.is-selected { background: var(--bg-selected); }
.list-body .list-row.is-selected:hover { background: var(--bg-selected); }
.list-sentinel { height: 1px; }
.list-loading[hidden], .list-empty[hidden], .list-error[hidden] { display: none; }

/* ---- Header --------------------------------------------------------------------------------------- */
.list-head { position: sticky; top: 0; z-index: 2; background: var(--grid-head-bg); }
.list-th {
  display: flex; align-items: center; gap: var(--sp-2); min-width: 0; padding: 0 var(--sp-4);
  border: 0; border-right: 1px solid var(--grid-line); background: none; color: var(--text);
  font: inherit; font-size: var(--fs-md); font-weight: var(--fw-semibold); text-align: left; white-space: nowrap;
}
.list-th.is-right { justify-content: flex-end; }
.list-th.is-right .list-sort-ic { order: -1; }
.list-th-label { overflow: hidden; text-overflow: ellipsis; }
.list-th.is-sortable { cursor: pointer; }
.list-th.is-sortable:hover, .list-th.is-open { background: var(--bg-hover); }
.list-th:focus-visible { outline: 2px solid var(--border-focus); outline-offset: -2px; }
.list-sort-ic { display: inline-flex; color: var(--blue); }
.list-sort-ic .ic, .list-sort-ic svg { width: 12px; height: 12px; display: block; }
.list-sort-menu { min-width: 200px; }

.list-check-cell { justify-content: center; padding: 0; }
.list-end-cell { justify-content: center; padding: 0; border-right: 0; }
.list-checkbox { width: 16px; height: 16px; margin: 0; accent-color: var(--blue-bright); cursor: pointer; }

.list-gear {
  position: relative; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  border: 0; border-radius: var(--r-sm); background: none; color: var(--text-muted); cursor: default;
}
.list-gear .ic, .list-gear svg { width: 16px; height: 16px; display: block; }
.list-soon {
  position: absolute; top: -3px; right: -10px; padding: 0 3px; border-radius: var(--r-sm);
  background: var(--menu-pill-bg); color: var(--text-inverse); font-size: 9px; line-height: 13px;
  font-weight: var(--fw-semibold); letter-spacing: 0.02em; pointer-events: none;
}

/* The gear with a column picker (B-087). */
.list-gear.is-live { cursor: pointer; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.list-gear.is-live:hover { background: var(--bg-hover); color: var(--text); }
.list-gear.is-live:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 1px; }

/* ---- Resize and reorder (Build Q, opt-in: the leads list) -------------------------------------------
   The header cell sits in a wrapper with an 8px handle on its right edge: invisible until hovered or focused,
   then a 2px blue line the header's height. Dragging a header shows a 2px blue drop line at the slot. */
.list-th-wrap { position: relative; display: flex; min-width: 0; }
.list-th-wrap > .list-th { flex: 1; min-width: 0; }
.list-resize {
  position: absolute; top: 0; right: -4px; bottom: 0; z-index: 3; width: 8px; cursor: col-resize; touch-action: none;
}
.list-resize::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 3px; width: 2px; background: var(--border-focus);
  opacity: 0; transition: opacity var(--t-fast) var(--ease);
}
.list-resize:hover::after, .list-resize:focus-visible::after, .list-resize.is-active::after { opacity: 1; }
.list-resize:focus-visible { outline: none; }
.list-grid.is-resizing, .list-grid.is-resizing * { cursor: col-resize !important; user-select: none; }
.list-grid.is-reordering, .list-grid.is-reordering * { cursor: grabbing !important; user-select: none; }
.list-th-wrap.is-col-dragging > .list-th { background: var(--bg-selected); }
.list-col-drop {
  position: absolute; top: 0; z-index: 4; width: 2px; background: var(--border-focus); pointer-events: none;
}
.list-col-drop[hidden] { display: none; }
/* Phone width: no handles (saved widths still apply). */
@media (max-width: 639px) { .list-resize { display: none; } }

/* ---- Cells ---------------------------------------------------------------------------------------- */
.list-td {
  position: relative; display: flex; align-items: center; min-width: 0; padding: 0 var(--sp-4);
  border-right: 1px solid var(--grid-line); font-size: var(--fs-md); color: var(--text);
}
.list-td.is-right { justify-content: flex-end; font-variant-numeric: tabular-nums; }
.list-td-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-link { color: inherit; }
.list-link:hover { color: var(--link); text-decoration: underline; }

/* Won rows read green, lost rows red (the whole row's text, links included). */
.list-row.row-won .list-td, .list-row.row-won .list-link { color: var(--pill-won); }
.list-row.row-lost .list-td, .list-row.row-lost .list-link { color: var(--red); }

/* Hovered editable cell: 2px blue outline r4 and a white pencil button at the right edge. */
.list-td.is-editable:hover, .list-td.is-editing {
  box-shadow: inset 0 0 0 2px var(--border-focus); border-radius: var(--r-sm);
}
.list-td.is-editable.is-right { padding-right: var(--sp-4); }
.cell-edit {
  display: none; flex: none; align-items: center; justify-content: center; width: 26px; height: 24px;
  margin-left: var(--sp-3); padding: 0; border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--bg-surface); color: var(--text); box-shadow: var(--shadow-button); cursor: pointer;
}
.cell-edit .ic, .cell-edit svg { width: 14px; height: 14px; display: block; }
.cell-edit:hover { background: var(--bg-hover); }
.list-td.is-editable:hover .cell-edit { display: inline-flex; }
.list-td.is-editable:hover .list-td-text { flex: 1; }
.list-td.is-editable.is-right:hover .list-td-text { text-align: right; }

/* Row '...' shows on row hover (and while its menu is open). */
.list-more {
  display: none; align-items: center; justify-content: center; width: 28px; height: 24px; padding: 0;
  border: 0; border-radius: var(--r-sm); background: none; color: var(--text-2); cursor: pointer;
}
.list-more .ic, .list-more svg { width: 16px; height: 16px; display: block; }
.list-more:hover { background: var(--border); color: var(--text); }
.list-row:hover .list-more, .list-more[aria-expanded="true"] { display: inline-flex; }

/* Loading / empty / error */
.list-row.is-skeleton .skeleton-bar { height: 10px; margin: 0; }
.list-row.is-skeleton:hover { background: var(--bg-surface); }
.list-empty { padding: var(--sp-10) var(--sp-6); text-align: center; }
.list-empty-title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--text); }
.list-empty-text { margin-top: var(--sp-3); color: var(--text-2); }
.list-error { padding: var(--sp-6); color: var(--red); }

/* ---- Inline cell editor (components/cell-editor.js) ------------------------------------------------ */
.cell-editor {
  position: fixed; z-index: var(--z-popover); display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-3); border-radius: var(--r-sm); background: var(--bg-surface);
  box-shadow: inset 0 0 0 2px var(--border-focus), var(--menu-shadow);
  opacity: 0; transform: translateY(-2px);
  transition: opacity var(--t-fast) var(--ease-enter), transform var(--t-fast) var(--ease-enter);
}
.cell-editor.is-open { opacity: 1; transform: none; }
.cell-editor.is-up { flex-direction: column-reverse; }
.cell-editor.is-busy { cursor: progress; }
.cell-editor .cell-input { width: 100%; height: 28px; }
.cell-editor .cell-input.is-right { text-align: right; }
.cell-editor .select-trigger.cell-input { width: 100%; }
.cell-editor.is-invalid .cell-input { border-color: var(--red); }
.cell-error { color: var(--red); font-size: var(--fs-sm); line-height: var(--lh-sm); }
.cell-error:empty { display: none; }
.cell-editor-actions { display: flex; justify-content: flex-end; gap: var(--sp-3); }
.cell-editor-actions .btn { height: 28px; padding: 0 var(--sp-5); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }

/* ---- Bulk edit panel (components/bulk-edit.js) ----------------------------------------------------- */
.bulk-panel {
  position: fixed; z-index: var(--z-modal); top: 0; right: 0; bottom: 0; width: 400px; max-width: 100vw;
  display: flex; flex-direction: column; background: var(--bg-surface); box-shadow: var(--shadow-modal);
  transform: translateX(100%); transition: transform var(--t-slow) var(--ease-enter);
}
.bulk-panel.is-open { transform: none; }
.bulk-panel.is-closing { transform: translateX(100%); transition: transform var(--t-med) var(--ease-exit); }
.bulk-head {
  display: flex; align-items: center; gap: var(--sp-4); height: 56px; padding: 0 var(--sp-4) 0 var(--sp-6);
  border-bottom: 1px solid var(--border); flex: none;
}
.bulk-title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
.bulk-pill {
  padding: 0 var(--sp-3); border-radius: var(--r-pill); background: var(--menu-pill-bg); color: var(--text-inverse);
  font-size: var(--fs-xs); line-height: 18px; font-weight: var(--fw-semibold); text-transform: uppercase;
  letter-spacing: 0.03em;
}
.bulk-spacer { flex: 1; }
.bulk-x {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: var(--r-sm); background: none; color: var(--text-2); cursor: pointer;
}
.bulk-x:hover { background: var(--bg-hover); color: var(--text); }
.bulk-x .ic, .bulk-x svg { width: 16px; height: 16px; display: block; }
.bulk-body { flex: 1; min-height: 0; overflow: auto; padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-6); }
.bulk-field { display: flex; flex-direction: column; gap: var(--sp-3); }
.bulk-field .select-trigger { width: 100%; }
.bulk-field .input[type="date"] { width: 100%; }
.bulk-field .input[hidden] { display: none; }
.bulk-label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-2); }
.bulk-field.is-invalid .select-trigger, .bulk-field.is-invalid .input { border-color: var(--red); }
.bulk-field .field-error { color: var(--red); font-size: var(--fs-sm); }
.bulk-field .field-error:empty { display: none; }
.bulk-label-list { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-3) var(--sp-2); }
.bulk-label-list[hidden] { display: none; }
.bulk-label-row { font-size: var(--fs-md); }
.bulk-label-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.bulk-hint { color: var(--text-muted); font-size: var(--fs-sm); }
.bulk-error {
  padding: var(--sp-4) var(--sp-5); border-radius: var(--r-sm); background: var(--lost-bg); color: var(--red);
  font-size: var(--fs-sm);
}
.bulk-error[hidden] { display: none; }
.bulk-foot {
  display: flex; justify-content: flex-end; gap: var(--sp-4); padding: var(--sp-5) var(--sp-6);
  border-top: 1px solid var(--border); flex: none;
}
.bulk-foot .btn { font-weight: var(--fw-semibold); }