/* Customize columns (B-087, components/column-picker.js): the list grid's gear modal.
   Colours via tokens; the few new ones sit here until they move to tokens.css. */
:root {
  --col-list-max-h: 260px;
  --col-row-h: 36px;
  --col-drag-bg: #ffffff;
}

.col-picker { display: flex; flex-direction: column; gap: var(--sp-5); min-height: 0; }

/* ---- Search ---- */
.col-search-wrap { position: relative; }
.col-search-ic {
  position: absolute; left: 10px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%);
  color: var(--text-2); pointer-events: none;
}
.col-search-ic svg { width: 16px; height: 16px; display: block; }
.col-search.input { width: 100%; padding-left: 34px; }

/* ---- Sections ---- */
.col-scroll { display: flex; flex-direction: column; gap: var(--sp-6); max-height: min(560px, 62vh); overflow-y: auto; }
.col-section { display: flex; flex-direction: column; gap: var(--sp-2); }
.col-caption {
  font-size: 11px; line-height: 16px; font-weight: var(--fw-semibold); color: var(--text-2);
  text-transform: uppercase; letter-spacing: 0.04em;
}

/* ---- Tabs (Deal / Person / Organization fields) ---- */
.col-tabs { display: flex; gap: var(--sp-5); border-bottom: 1px solid var(--border); margin-bottom: var(--sp-1); }
.col-tab {
  position: relative; padding: var(--sp-3) 0; border: 0; background: none; color: var(--text-2);
  font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-semibold); cursor: pointer;
  transition: color var(--t-fast) var(--ease);
}
.col-tab:hover { color: var(--text); }
.col-tab.is-active { color: var(--blue); }
.col-tab.is-active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 1px;
  background: var(--blue);
}
.col-tab:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; border-radius: var(--r-sm); }
.col-tabs.is-searching .col-tab { color: var(--text-muted); }

/* ---- Rows ---- */
.col-list {
  list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--r-md);
  overflow: hidden;
}
.col-list-hidden { max-height: var(--col-list-max-h); overflow-y: auto; }
.col-row {
  display: flex; align-items: center; gap: var(--sp-2); min-height: var(--col-row-h); padding: 0 var(--sp-4) 0 var(--sp-2);
  border-top: 1px solid var(--grid-line); background: var(--bg-surface);
  transition: background var(--t-fast) var(--ease);
}
.col-row:first-child { border-top: 0; }
.col-row:hover { background: var(--bg-hover); }
.col-row.is-hidden { padding-left: var(--sp-4); }
.col-label {
  display: flex; align-items: center; gap: var(--sp-3); flex: 1; min-width: 0; min-height: var(--col-row-h);
  margin: 0; cursor: pointer; font-size: var(--fs-md); font-weight: var(--fw-regular);
}
.col-row.is-locked .col-label { cursor: default; }
.col-check { width: 16px; height: 16px; margin: 0; flex: none; accent-color: var(--blue); cursor: inherit; }
.col-pick-name {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text);
  font-size: var(--fs-md); font-weight: var(--fw-regular);
}
.col-lock { display: inline-flex; color: var(--text-muted); }
.col-lock svg { width: 13px; height: 13px; }
.col-group {
  display: inline-flex; align-items: center; gap: var(--sp-2); flex: none;
  font-size: var(--fs-sm); color: var(--text-2);
}
.col-custom {
  padding: 0 6px; border-radius: var(--r-pill); background: var(--chip-bg); color: var(--text-2);
  font-size: 11px; line-height: 16px;
}
.col-empty { padding: var(--sp-4); color: var(--text-muted); font-size: var(--fs-sm); text-align: center; }

/* ---- Drag handle and drag state ---- */
.col-drag {
  display: inline-grid; place-items: center; width: 22px; height: 28px; padding: 0; flex: none;
  border: 0; border-radius: var(--r-sm); background: none; color: var(--text-muted); cursor: grab;
  touch-action: none; transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.col-drag svg { width: 14px; height: 14px; display: block; }
.col-row:hover .col-drag, .col-drag:focus-visible { color: var(--text-2); }
.col-drag:hover { background: var(--bg-selected); }
.col-drag:focus-visible { outline: 2px solid var(--border-focus); outline-offset: -2px; }
.col-drag:disabled { cursor: default; opacity: 0.35; background: none; }
.col-list.is-sorting, .col-list.is-sorting * { cursor: grabbing; }
.col-row.is-dragging {
  position: relative; z-index: 1; background: var(--col-drag-bg); box-shadow: var(--shadow-popover);
  border-radius: var(--r-sm);
}

/* ---- Footer ---- */
.col-default { font-size: var(--fs-md); }