/* view-editor.css — vtiger's Create List / Edit List screen (ui/view-editor.js; vtiger CustomView EditView.tpl):
   drawn by the list in place of its sidebar and table, under the module bar. The condition panels are filter-bar.js
   ('panels', list.css); the footer is the record form's (blocks.css .form__footer--sticky, .form__save, .form__cancel). */

.list__editor { padding: var(--space-2) var(--space-3); }
.view-editor { border: 1px solid var(--color-border-light); background: var(--color-surface); }
.view-editor__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: 10px 15px; border-bottom: 1px solid var(--color-border-light);
}
.view-editor__title { margin: 0; font-size: var(--font-size-xl); font-weight: normal; color: var(--color-text); }
.view-editor__close { padding: 0 var(--space-1); font-size: var(--font-size-xl); line-height: 1; color: var(--color-text-muted); text-decoration: none; }
.view-editor__close:hover { color: var(--color-text-strong); }
/* room under the last part for the footer that stays at the bottom of the window (60 px + a margin) */
.view-editor__body { display: flex; flex-direction: column; gap: var(--space-4); padding: 15px 15px calc(60px + var(--space-6)); }
.view-editor__part { display: flex; flex-direction: column; gap: var(--space-2); }
.view-editor__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-6); }
.view-editor__label { color: var(--color-field-label); }
.view-editor__required { color: var(--color-required); }
.view-editor__name { width: 40%; min-width: 12rem; }
.view-editor__name[readonly] { background: var(--color-surface-alt); color: var(--color-text-muted); }
.view-editor__name[aria-invalid="true"] { border-color: var(--color-danger); }
.view-editor__tick { display: inline-flex; align-items: center; gap: var(--space-1); cursor: pointer; }
.view-editor__columns { width: 80%; }
.view-editor__share-box { width: 60%; }
.view-editor__conditions { padding: var(--space-3); border: 1px solid var(--color-border); background: var(--color-surface-alt); }
.view-editor__error:empty { display: none; }

/* ---------- the chip box (vtiger's select2 "multiple") ---------- */
.ve-chips {
  position: relative; min-height: var(--control-height); padding: 2px 4px; cursor: text;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface);
}
.ve-chips:focus-within { border-color: var(--color-focus-ring); }
.ve-chips--readonly { cursor: default; background: var(--color-surface-alt); }
.ve-chips--readonly .ve-chip { padding-left: 6px; cursor: default; color: var(--color-text-muted); }
.ve-chips__list { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ve-chip {
  display: inline-flex; align-items: center; gap: 2px; padding: 1px 6px 1px 2px; cursor: move;
  border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-badge-bg);
  color: var(--color-text); font-size: var(--font-size-md); user-select: none;
}
.ve-chip:focus { outline: 2px solid var(--color-focus-ring); outline-offset: 1px; }
.ve-chip.is-dragging { opacity: 0.5; }
.ve-chip.is-drop { border-color: var(--color-primary); }
.btn.ve-chip__remove { min-height: 0; padding: 0 3px; border: 0; color: var(--color-text-muted); font-weight: bold; line-height: 1; text-decoration: none; }
.btn.ve-chip__remove:hover { color: var(--color-text-strong); }
.ve-chip__mark { color: var(--color-required); }
.ve-chips__entry { flex: 1 1 8rem; min-width: 6rem; }
.ve-chips__input {
  width: 100%; min-height: 24px; padding: 0 4px;
  border: 0; outline: 0; background: transparent; box-shadow: none; color: var(--color-text);
}
.ve-chips__options {
  position: absolute; top: 100%; left: -1px; right: -1px; z-index: 30; max-height: 16rem; overflow-y: auto;
  margin: 0; padding: 0; list-style: none;
  border: 1px solid var(--color-border); background: var(--color-surface); box-shadow: var(--shadow-dropdown);
}
.ve-chips__option { padding: 4px 8px; cursor: pointer; }
.ve-chips__option[aria-selected="true"], .ve-chips__option:hover { background: var(--color-primary); color: var(--color-primary-text); }
.ve-chips__option--note, .ve-chips__option--note:hover { color: var(--color-text-muted); background: none; cursor: default; }
.ve-chips__note { color: var(--color-warning); font-size: var(--font-size-sm); }
.ve-chips__note:empty { display: none; }

@media (max-width: 767px) {
  .view-editor__name, .view-editor__columns, .view-editor__share-box { width: 100%; }
}