.cp-column-picker {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  margin: 0 0 var(--space-3);
  background: var(--surface);
}

.cp-column-picker__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.cp-column-picker__input {
  width: 100%;
  min-height: var(--space-10);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--content-1);
  font-family: var(--sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  outline: none;
  transition:
    border-color var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-fast) var(--ease-standard),
    background-color var(--dur-fast) var(--ease-standard);
}

.cp-column-picker__input:focus {
  border-color: var(--cp-accent);
  box-shadow: var(--focus-ring);
}

.cp-column-picker__input::placeholder {
  color: var(--content-placeholder);
  opacity: 1;
}

.cp-column-picker__input:placeholder-shown {
  border-color: var(--field-empty-border);
  background-color: var(--field-empty-surface);
}

.cp-column-picker__input:not(:placeholder-shown) {
  border-color: var(--field-filled-border);
  background-color: var(--field-filled-surface);
}

.cp-column-picker__empty {
  grid-column: 1 / -1;
  margin: var(--space-3) 0 0;
  padding: var(--space-4);
  border: 1px dashed var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--content-2);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  text-align: center;
}

.cp-column-picker--hidden,
.cp-column-picker__empty.hidden {
  display: none !important;
}

.cp-column-order {
  margin: 0 0 var(--space-4);
  padding: var(--space-3);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
}

.cp-column-order__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0 0 var(--space-2);
}

.cp-column-order__header strong {
  color: var(--content-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.cp-column-order__header span {
  color: var(--content-2);
  font-size: var(--text-xs);
  text-align: right;
}

.cp-column-order__list {
  display: grid;
  gap: var(--space-1);
  max-height: min(32vh, calc(var(--space-10) * 6));
  padding: var(--space-1);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.cp-column-order__row {
  position: relative;
  display: grid;
  grid-template-columns: var(--space-6) var(--space-6) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--space-9);
  padding: var(--space-1) var(--space-1) var(--space-1) var(--space-2);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--content-1);
  transition:
    border-color var(--dur-fast) var(--ease-standard),
    background-color var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-fast) var(--ease-standard),
    opacity var(--dur-fast) var(--ease-standard);
}

.cp-column-order__row:focus-visible {
  outline: none;
  border-color: var(--cp-accent);
  box-shadow: var(--focus-ring);
}

.cp-column-order__row.is-dragging {
  opacity: 0.48;
}

.cp-column-order__row.is-drop-before::before,
.cp-column-order__row.is-drop-after::after {
  position: absolute;
  right: 0;
  left: 0;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--cp-accent);
  content: "";
}

.cp-column-order__row.is-drop-before::before { top: calc(var(--space-1) * -1); }
.cp-column-order__row.is-drop-after::after { bottom: calc(var(--space-1) * -1); }

.cp-column-order__handle {
  width: var(--space-5);
  height: var(--space-5);
  background: var(--content-3);
  cursor: grab;
  -webkit-mask: url("/assets/static/lucide-icons/list-ordered.svg") center / contain no-repeat;
  mask: url("/assets/static/lucide-icons/list-ordered.svg") center / contain no-repeat;
}

.cp-column-order__handle:active { cursor: grabbing; }
.cp-column-order__handle:not([draggable="true"]) { cursor: default; opacity: 0.45; }

.cp-column-order__position {
  display: inline-grid;
  place-items: center;
  width: var(--space-6);
  height: var(--space-6);
  border-radius: var(--radius-circle);
  background: var(--cp-accent-soft);
  color: var(--cp-accent);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.cp-column-order__name {
  min-width: 0;
  overflow: hidden;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp-column-order__actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.cp-column-order__action {
  display: inline-grid;
  place-items: center;
  width: var(--space-8);
  height: var(--space-8);
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--content-2);
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard);
}

.cp-column-order__action::before {
  width: var(--space-4);
  height: var(--space-4);
  background: currentColor;
  content: "";
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

.cp-column-order__action.is-left::before {
  -webkit-mask-image: url("/assets/static/lucide-icons/arrow-left.svg");
  mask-image: url("/assets/static/lucide-icons/arrow-left.svg");
}

.cp-column-order__action.is-right::before {
  -webkit-mask-image: url("/assets/static/lucide-icons/arrow-right.svg");
  mask-image: url("/assets/static/lucide-icons/arrow-right.svg");
}

.cp-column-order__action.is-hide::before {
  -webkit-mask-image: url("/assets/static/lucide-icons/x.svg");
  mask-image: url("/assets/static/lucide-icons/x.svg");
}

.cp-column-order__action:hover:not(:disabled),
.cp-column-order__action:focus-visible:not(:disabled) {
  outline: none;
  background: var(--cp-accent-soft);
  color: var(--cp-accent);
}

.cp-column-order__action:disabled {
  cursor: not-allowed;
  opacity: 0.28;
}

.cp-column-order__live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.cp-operational-columns-modal {
  z-index: calc(var(--z-modal) + 1) !important;
}

.cp-operational-columns-modal .cust-cols-panel {
  width: min(680px, 96vw);
}

.cp-operational-columns-modal .inv-form-body {
  padding-bottom: var(--space-4);
}

.cp-operational-columns-trigger {
  flex: 0 0 auto;
  min-height: var(--space-9);
  white-space: nowrap;
}

.pc-row-options .cp-operational-columns-trigger,
.ics-counted-toolbar .cp-operational-columns-trigger,
.hr-library-toolbar .cp-operational-columns-trigger {
  margin-left: auto;
}

.reorderable-columns-table[data-cp-operational-columns] :is(th, td) {
  width: auto !important;
}

#opportunities-contacts-page .reorderable-columns-table[data-cp-operational-columns] :is(th, td) {
  width: auto !important;
}

/* Staff's legacy table widths and wrapping follow cell positions. Preserve the
   intended behavior by attaching wrapping to the semantic columns instead. */
#staff-list-section .staff-list-table[data-cp-operational-columns] :is(th, td) {
  overflow: hidden;
  white-space: nowrap;
}

#staff-list-section .staff-list-table[data-cp-operational-columns] :is(
  [data-column-key="department"],
  [data-column-key="actions"]
) {
  overflow: visible;
  white-space: normal;
}

@media (max-width: 720px) {
  .cp-operational-columns-trigger {
    width: 100%;
  }
}

/* HR Files historically hid responsive columns by position. Once the user can
   move columns, those rules must follow column meaning instead. */
@media (max-width: 1080px) {
  #hr-page .hr-library-table[data-cp-operational-columns] :is(th, td):not([hidden]) {
    display: table-cell;
  }

  #hr-page .hr-library-table[data-cp-operational-columns] :is(
    [data-column-key="folder"],
    [data-column-key="modified_by"]
  ) {
    display: none;
  }
}

@media (max-width: 760px) {
  #hr-page .hr-library-table[data-cp-operational-columns] :is(
    [data-column-key="type"],
    [data-column-key="modified"],
    [data-column-key="size"]
  ) {
    display: none;
  }
}

.cp-column-order.is-empty .cp-column-order__list::after {
  padding: var(--space-3);
  color: var(--content-2);
  content: "Select a column below to add it to the table.";
  font-size: var(--text-sm);
  text-align: center;
}

@media (max-width: 640px) {
  .cp-column-order__header {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-1);
  }

  .cp-column-order__header span { text-align: left; }
  .cp-column-order__row { grid-template-columns: var(--space-5) var(--space-6) minmax(0, 1fr) auto; }
}

@media (prefers-reduced-motion: reduce) {
  .cp-column-order__row,
  .cp-column-order__action { transition: none; }
}