/* =============================================================================
   JES CRM · list.css — the list view, the LISTS sidebar, the search row, the
   filter bar and the saved views (static/js/ui/list-view.js, list-sidebar.js,
   search-row.js, columns-chooser.js, saved-views.js, filter-bar.js). Owner: the
   "list" builder of the vtiger-look wave (docs/vtiger-look/02-ui-contract.md §a.3,
   §a.5, §d). Drawn the way vtiger 7 draws a list (layouts/v7 listview.less,
   todc-bootstrap): grey action bar buttons, 13 px semibold headings with faint
   sort arrows, a search row with a green "Search", rows of wrapped text (three
   lines at most), blue links. Every value comes from tokens.css.
   ============================================================================= */

/* ---------- frame: sidebar + main ---------- */
.list { min-width: 0; }
/* a page's banner ("To invoice (0)", a notice) is the first thing of the list column, above the action bar, with the
   action bar's own inset: the LISTS sidebar to its left still starts right under the module bar (live 51) */
.list__main > .list__banner { margin: var(--space-2) var(--space-3) 0; }
/* a banner that draws nothing for this caller takes no room: the action bar sits at the same height on every list */
.list__banner:empty { display: none; }
.list__layout { display: flex; align-items: stretch; min-width: 0; }
/* the list of a page route fills the window below the module bar, so the sidebar's right border runs down the
   page even under a short list (the shell's 30 px bottom padding and the module bar's 1 px line taken off) */
.list:not(.list--embedded) > .list__layout { min-height: calc(100vh - var(--shell-bar-height) - var(--modulebar-height) - 31px); }
.list__sidebar { flex: 0 0 auto; display: flex; }
.list__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

/* ---------- LISTS sidebar ---------- */
.list-sidebar { position: relative; display: flex; align-items: flex-start; border-right: 1px solid var(--color-border-light); background: var(--color-surface); }
.list-sidebar__handle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 32px; margin-top: var(--space-6); padding: 0;
  border: 1px solid var(--color-border); border-left: 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--color-btn-bg); color: var(--color-text); font: inherit; font-weight: var(--font-weight-semibold); cursor: pointer;
}
.list-sidebar__handle:hover { background: var(--color-surface-hover); }
.list-sidebar__handle:focus-visible { outline: 2px solid var(--color-focus-ring); }
.list-sidebar.is-open { flex-direction: row-reverse; }
.list-sidebar.is-open .list-sidebar__handle { border-left: 1px solid var(--color-border); border-right: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.list-sidebar__body { width: var(--list-sidebar-width); padding: var(--space-3) var(--space-3) var(--space-4); }
.list-sidebar__body[hidden] { display: none; }
.list-sidebar__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); }
.list-sidebar__title { font-size: var(--font-size-btn); font-weight: var(--font-weight-semibold); color: var(--color-title); text-transform: uppercase; }
.list-sidebar__add { min-width: var(--control-height); justify-content: center; font-weight: 700; }
.list-sidebar__search { width: 100%; height: var(--control-height); margin-bottom: var(--space-3); }
.list-sidebar__group {
  margin: var(--space-3) 0 var(--space-1); padding-top: var(--space-2); border-top: 1px solid var(--color-border-light);
  font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); color: var(--color-title); text-transform: uppercase;
}
.list-sidebar__items { margin: 0; padding: 0; list-style: none; }
.list-sidebar__item { position: relative; display: flex; align-items: center; gap: var(--space-1); padding: 0 var(--space-1) 0 var(--space-2); border-radius: var(--radius-sm); }
.list-sidebar__item:hover, .list-sidebar__item.is-current { background: var(--color-surface-hover); }
.list-sidebar__link {
  flex: 1 1 auto; min-width: 0; padding: var(--space-1) 0; color: var(--color-text); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--font-size-md);
}
.list-sidebar__link:hover { color: var(--color-link); }
.list-sidebar__link:focus-visible { outline: 2px solid var(--color-focus-ring); }
.list-sidebar__item.is-current .list-sidebar__link { font-weight: var(--font-weight-semibold); }
.list-sidebar__item.is-default .list-sidebar__link::after { content: " ✓"; color: var(--color-text-muted); }
/* the ▾ of a list shows on the current list, on hover and when the keyboard is on it */
.list-sidebar__menu { opacity: 0; }
.list-sidebar__item:hover .list-sidebar__menu, .list-sidebar__item.is-current .list-sidebar__menu,
.list-sidebar__menu:focus-within { opacity: 1; }

/* ---------- action bar ---------- */
.list__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); }
.list--embedded .list__actions { padding: 0 0 var(--space-2); }
.list__bulk { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.list__selected { color: var(--color-text-muted); font-size: var(--font-size-md); }
.list__search { flex: 0 1 16rem; min-width: 8rem; height: var(--control-height); }
.list__spacer { flex: 1; }
.list__add .fa, .list__customize .fa { margin-right: var(--space-1); }
.list__notice {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: var(--space-2) var(--space-3) 0;
  padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); background: var(--color-row-selected);
}
.list__filter { margin: 0 var(--space-3) var(--space-2); }
.list--embedded .list__filter { margin: 0 0 var(--space-2); }

/* ---------- page text "1 to 100 of N", page jump "…", ‹ › ---------- */
.list__pager { display: inline-flex; align-items: center; gap: var(--space-1); white-space: nowrap; }
.list__range { margin-right: var(--space-1); font-size: var(--font-size-md); color: var(--color-text); }
.list__jump { position: relative; display: inline-block; }
.list__jump > summary { list-style: none; }
.list__jump > summary::-webkit-details-marker { display: none; }
.list__jumppanel {
  position: absolute; right: 0; top: calc(100% + var(--space-1)); z-index: 5;
  display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-dropdown);
}
.list__jumpinput { width: 4rem; height: var(--control-height); }
.list__jumpinput[aria-invalid="true"] { border-color: var(--color-danger); }

/* ---------- the table ---------- */
/* position: relative on every box that scrolls sideways: a .visually-hidden text inside it (the header
   of a column of buttons) is then clipped with the box instead of widening the whole page */
.list__body { min-width: 0; }
.list__body[aria-busy="true"] { opacity: 0.6; }
.list__scroll {
  position: relative; overflow: auto; background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  /* the table scrolls inside its box, in both directions: the box is never taller than the window, so the
     bar that scrolls sideways is in reach without going down a hundred rows first, and the headings and the
     search row stay in sight (sticky) while the rows move */
  max-height: max(20rem, calc(100vh - 12rem));
}
/* a page's banner (the job orders' "Table | Clean view | Split view", "To invoice (0)") takes its height off the box */
.list__main:has(> .list__banner:not(:empty)) .list__scroll { max-height: max(20rem, calc(100vh - 14.5rem)); }
.list--embedded .list__scroll { border: 1px solid var(--color-border); }
.list__table { width: 100%; border-collapse: collapse; }
.list__table thead { position: sticky; top: 0; z-index: 2; background: var(--color-surface); }
.list__head th {
  padding: var(--list-head-padding); border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-btn); font-weight: var(--font-weight-semibold); color: var(--color-text-strong);
  text-align: left; vertical-align: middle; white-space: nowrap; background: var(--color-surface);
}
.list__table td {
  padding: var(--list-cell-padding); border-top: 1px solid var(--color-border);
  color: var(--color-text-strong); text-align: left; vertical-align: middle;
  min-width: 6rem; max-width: 22rem;
}
/* amounts are left-aligned under their headings, as vtiger draws them (live 40: Total, Net Profit, ADD GST 9%) */
.list__table td.is-number { font-variant-numeric: tabular-nums; }
/* text wraps and shows at most three lines; list-view.js gives the cell its whole text as a tooltip */
.list__clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; overflow-wrap: anywhere; }
.list__table a { color: var(--color-link); text-decoration: none; }
.list__table a:hover { text-decoration: underline; }
.list__vtiger-owner { color: var(--color-text-muted); }

/* sort: faint arrows, full on hover, the sorted column's arrow says the direction */
.list__sort { display: inline-flex; align-items: center; gap: var(--space-1); border: 0; background: transparent; padding: 0; font: inherit; font-weight: inherit; color: inherit; cursor: pointer; }
.list__sort:focus-visible { outline: 2px solid var(--color-focus-ring); }
.list__arrow { opacity: 0.3; }
.list__sort:hover .list__arrow, .list__sort.is-sorted .list__arrow { opacity: 1; }

/* the first column: select-all, column chooser; per row the tick and ⋮ */
.list__check { width: 1%; white-space: nowrap; }
.list__table td.list__check { min-width: 0; }
/* vtiger keeps the tick box off the left edge and apart from the icon after it (live 10: about 20px in, about
   30px from tick to tick-next icon); Ray: the boxes sat too close to the side */
.list__table td.list__check, .list__head th.list__check, .list__searchrow th.list__check {
  padding-left: var(--space-4); padding-right: var(--space-3);
}
.list__check > * { vertical-align: middle; }
.list__check input[type="checkbox"] { margin: 0 var(--space-3) 0 0; }
/* the column chooser is vtiger's bare grid icon (no button frame), like the row's ⋮ */
.list__chooser.btn { border-color: transparent; background: transparent; box-shadow: none; color: var(--color-text-strong); }
.list__chooser.btn:hover, .list__chooser.btn:focus-visible { background: transparent; color: var(--color-link); }
/* the ⋮ of a row is a bare icon, no button frame (ListViewRecordActions.tpl: span.dropdown-toggle > i.fa-ellipsis-v) */
.list__rowmenu { display: inline-block; }
.list__rowmenu-button {
  display: inline-flex; align-items: center; justify-content: center; min-width: 14px; padding: 0 var(--space-1);
  border: 0; background: transparent; color: var(--color-text); font: inherit; line-height: 1; cursor: pointer;
}
.list__rowmenu-button:hover, .list__rowmenu-button[aria-expanded="true"] { color: var(--color-text-strong); }
.list__rowmenu-button:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 1px; }

/* the search row */
.list__searchrow th { padding: var(--space-1) var(--space-1) var(--space-2); border-bottom: 1px solid var(--color-border); background: var(--color-surface); vertical-align: top; font-weight: normal; }
.list__searchinput { width: 100%; min-width: 6rem; height: var(--control-height); font-size: var(--font-size-btn); }
.list__searchinput[aria-invalid="true"] { border-color: var(--color-danger); }
.list__searchbtn { width: 100%; white-space: nowrap; }
/* every select cell ("Select an Option ▾": picklist, record, people, Yes / No) has one look and room for its text */
.search-row__multi { position: relative; min-width: 9.5rem; }
.search-row__select { position: relative; display: block; min-width: 9.5rem; }
.search-row__select > .search-row__choice {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; min-width: 0;
  padding: 0 var(--space-6) 0 var(--space-2); color: var(--color-text); cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.search-row__select > .search-row__choice.is-empty { color: var(--color-text-muted); }
.search-row__choice option { color: var(--color-text); }
.search-row__select::after {
  content: "▾"; position: absolute; right: var(--space-2); top: 50%; transform: translateY(-50%);
  color: var(--color-text-muted); font-size: var(--font-size-btn); pointer-events: none;
}
.search-row__summary {
  display: flex; align-items: center; height: var(--control-height); padding: 0 var(--space-2);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface);
  color: var(--color-text-muted); font-size: var(--font-size-btn); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
  list-style: none;
}
.search-row__summary::-webkit-details-marker { display: none; }
.search-row__summary::after { content: "▾"; margin-left: auto; padding-left: var(--space-2); }
.search-row__panel {
  position: absolute; left: 0; top: calc(100% + var(--space-1)); z-index: 6; min-width: 14rem; max-width: 22rem;
  padding: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface); box-shadow: var(--shadow-dropdown); text-align: left;
}

/* the rows */
/* the data cells open the record on a click; the first column (tick, ⋮) does not */
.list__row td[data-col] { cursor: pointer; }
.list__row:hover { background: var(--color-row-hover); }
.list__row:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: -2px; }
.list__row.is-selected { background: var(--color-row-selected); }
/* row states a page may give through list.rowClass */
.list__row.is-muted, .list__row.is-draft { color: var(--color-text-muted); }
.list__row.is-muted td, .list__row.is-draft td { color: var(--color-text-muted); }
.list__row.is-struck td { color: var(--color-text-muted); text-decoration: line-through; }
.list__row.is-warning td:first-child { box-shadow: inset var(--space-1) 0 0 var(--color-warning); }
.list__row.is-attention td:first-child { box-shadow: inset var(--space-1) 0 0 var(--color-info); }

/* "No Organizations found. Create Organization" */
.list__body > .state { border-top: 1px solid var(--color-border); }
.list__create { color: var(--color-link); }

/* ---------- column chooser ---------- */
.columns-chooser { margin: 0; padding: 0; list-style: none; max-height: 24rem; overflow: auto; }
.columns-chooser li { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) 0; }
.columns-chooser label { flex: 1; }

/* ---------- saved views: the dialog of Save as / Share ---------- */
.views__people { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

/* ---------- advanced filter (filter-bar.js) ---------- */
.filter { padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border-light); border-radius: var(--radius-sm); background: var(--color-modulebar-bg); }
.filter__group-title { margin: var(--space-2) 0 var(--space-1); font-size: var(--font-size-btn); font-weight: var(--font-weight-semibold); color: var(--color-title); }
.filter__row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-2); margin-bottom: var(--space-2); }
.filter__value { display: flex; flex: 1 1 14rem; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; }
.filter__value > input, .filter__value > select { flex: 1; min-width: 6rem; }
.filter__value > input[aria-invalid="true"] { border-color: var(--color-danger); }
.filter__kept { flex: 1 1 14rem; color: var(--color-text-muted); overflow-wrap: anywhere; }
.filter__buttons { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.filter__row--locked { align-items: center; }
.filter__lock { color: var(--color-text-muted); }
/* vtiger's two condition panels of Create / Edit List (layout 'panels'; the screen is ui/view-editor.js) */
.filter--panels { display: flex; flex-direction: column; gap: var(--space-3); padding: 0; border: 0; background: none; }
.filter__panel { padding: var(--space-3); border: 1px solid var(--color-border-light); background: var(--color-surface); }
.filter__panel-head { margin-bottom: var(--space-2); }
.filter__panel-title { color: var(--color-text-strong); font-weight: var(--font-weight-semibold); }
.filter__hint { color: var(--color-text-muted); }
.filter--panels .filter__row { flex-wrap: nowrap; align-items: center; }
.filter--panels .filter__row > select:first-child { flex: 0 1 30%; min-width: 9rem; }
.filter--panels .filter__row > select:nth-child(2) { flex: 0 1 20%; min-width: 7rem; }
.filter--panels .filter__value { flex: 1 1 30%; }
.filter__remove { color: var(--color-text-muted); }
.filter__remove:hover { color: var(--color-danger); }
.filter__panel-foot { margin-top: var(--space-1); }
@media (max-width: 767px) {
  .filter--panels .filter__row { flex-wrap: wrap; }
  .filter--panels .filter__row > select:first-child, .filter--panels .filter__row > select:nth-child(2) { flex: 1 1 100%; }
}

/* ---------- layout switch "Table | Clean view | Split view" (list-layout.js, page option list.altView) ---------- */
.list-layout { display: inline-flex; border: 1px solid var(--color-btn-border); border-radius: var(--radius-md); overflow: hidden; }
.list-layout__item {
  display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--btn-padding);
  background: var(--color-btn-bg); color: var(--color-text); font-size: var(--font-size-btn); text-decoration: none;
}
.list-layout__item + .list-layout__item { border-left: 1px solid var(--color-btn-border); }
.list-layout__item:hover { background: var(--color-surface-hover); color: var(--color-text-strong); text-decoration: none; }
.list-layout__item.is-active { background: var(--color-surface); color: var(--color-text-strong); font-weight: var(--font-weight-semibold); }
.list-layout__item:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: -2px; }

/* ---------- narrow screens ---------- */
@media (max-width: 767px) {
  .list__layout { flex-direction: column; }
  .list-sidebar__body { width: auto; }
  .list-sidebar { border-right: 0; border-bottom: 1px solid var(--color-border-light); }
  .list__search { flex: 1 1 100%; }
}