/* Item Manager
   - .item-manager
   - .item-list
   - .item (choices items)
   - icon affordances inside items
*/

/* Anchor and hook connection fields sticky at top of their respective tabs */

.item-manager {
  background: var(--co-edge);
  border-bottom: 1px solid;    
  display: flex;
  gap: .5rem;
  padding-bottom: 1rem;
  position: sticky;
  top: 0;
  z-index: 1;
}
.item-manager .form-field {
  flex: 1;
}
.item-manager #form-field-anchor_usages,
.item-manager #form-field-hook_usages {
  flex: 0 0 36%;
}

 .item-manager-join { align-self: center; } /* for the text between fields */

/* Anchor dialog specific styling */

/* #anchor_dialog {
  text-transform: none;
}
#anchor_dialog #add-anchor-connection-button { */

.item-manager-add {
  background: var(--co-edge);
}
#detail-action dialog {
  text-transform: none;
}
#detail-action dialog .item-manager {
  background: none;
  position: static;
}
.item-list-current {
  max-height: 300px;
  overflow: auto;
}

.item-manager .edit-msg,
#anchor-connection-fields #form-field-anchors_field,
#hook-connection-fields #form-field-hooks_field {
  align-content: center;
  flex: 1;
}

.item-manager > button {
  font-size: 2.5rem;
  line-height: 0;
  height: 45px;
  width: 45px;
  padding: 0;
}


/* Show/hide states for connection field buttons based on edit mode */
.item-manager .edit-msg,
.item-manager.edit-mode #form-field-anchors_field,
.item-manager.edit-mode .item-manager-add,
.item-manager .item-manager-update,
.item-manager .item-manager-cancel,
.item-manager.edit-mode #form-field-hooks_field {
  display: none;
}
.item-manager.edit-mode .edit-msg,
.item-manager.edit-mode .item-manager-update,
.item-manager.edit-mode .item-manager-cancel {
  display: block;
}

/* Height of anchor and hook connections multi-select fields */
#id_anchor_connections, #id_hook_connections {
  height: 380px;
}

/* Anchor connection update fields styling */
.item-list .form-field {
  margin-bottom: 1rem;
}
.item-list .choices__inner {
  min-height: 40px;
}

  /* Choices.js items in item lists */
.item-list .choices__list--multiple .choices__item {
  align-items: center;
  background: transparent;
  border: none;
  border-radius: 0;
  color: inherit;
  display: flex;
  font-size: 1rem;
  justify-content: flex-start;
  margin: 0;
  min-height: 40px;
  padding: .5rem 1rem;
  text-align: left;
  transition: .25s background;
}

/* Edit mode styling for connection items */
.item-list .edit-mode .choices__item {
  opacity: .25;
  pointer-events: none;
}

.item-list .edit-mode .choices__item.editing {
  background: var(--co-blue2)!important; /* this has stopped displaying after the js refactor */
  opacity: 1;
  pointer-events: default;
} 

/* Newly added item highlight */
.item-list .choices__item.new {
  transition: 1.5s background-color .5s;
}

/* Hover and highlight states for list items */
.item-list .choices__list--multiple .choices__item.is-highlighted {
  background: none;
  border: none;
}
.item-list .choices__item.highlight {
  background-color: #FADEAD!important;
}
.item-list .choices__item:hover {
  background-color: #f5f5f5!important;
  transition: .25s background;
}


/* Primary anchor connection at top of list */
#form-field-anchor_connections .choices__item:first-child {
  background-color: var(--co-mid)!important;
  border-bottom: 1px solid var(--co-dark)!important;
}

/* X "Remove" button styling in list items */
.item-list .choices[data-type*="select-multiple"] .choices__button {
  background-color: #E17373;
  background-size: .75rem;
  border: none;
  padding-left: 0;
  height: 1.5rem;
  width: 2rem;
  margin: 0;
  visibility: hidden;
  margin-left: .25rem;
}

/* get the buttons pushed to the right when there is no edit icon to push them by adding the no-left-icon class as needed */
.no-left-icon .choices[data-type*="select-multiple"] .choices__button {
  margin-left: auto;
}

.item-list-remove button {
  background: none!important;
  text-indent: 0!important;
  width: auto!important;
}


/* Icons within list items (anchor, hook, edit, primary) */
.item-list .connection-anchor,
.item-list .connection-hook,
.item-list .item-workspace,
.item-list .workgroup,
.item-list .connection-edit,
.item-list .item-primary {
  background: url('/static/core/img/US_Icon_Anchor.svg') no-repeat center;
  background-size: contain;
  height: 1.25rem;
  width: 2rem;
  padding: .25em;
  visibility: hidden;
}

.item-list .connection-hook {
  background-image: url('/static/core/img/US_Icon_Hook.svg');
}

.item-list .item-workspace {
  background-image: url('/static/core/img/US_WS_icon.svg');
}

.item-list button.connection-edit {
  background-image: url('/static/core/img/pencil.svg');
  margin-right: auto; /* push pencil icon to left just after title and everything after it to the right*/
}

.item-list .item-primary {
  background-image: url('/static/core/img/up.svg');
  margin-left: auto;
}

/* Icons should NOT also push with margin-left:auto */
.item-list .connection-hook,
.item-list .item-workspace,
.item-list .item-primary {
  margin-left: 0; /* override auto */
}

/* Show icons and buttons on hover/focus of connection items */
#form-field-anchor_connections .choices__item:not(:first-child):hover .item-primary,
#form-field-anchor_connections .choices__item:not(:first-child):focus .item-primary,
.item-list .choices__item:hover .connection-anchor,
.item-list .choices__item:focus .connection-anchor,
.item-list .choices__item:hover .connection-hook,
.item-list .choices__item:focus .connection-hook,
.item-list .choices__item:hover .item-workspace,
.item-list .choices__item:focus .item-workspace,
.item-list .choices__item:hover .connection-edit,
.item-list .choices__item:focus .connection-edit,
.item-list .choices__item:hover .choices__button,
.item-list .choices__item:focus .choices__button {
  visibility: visible;
}

/* Transparent background for connection list containers */
.item-list .choices__inner {
  background: transparent;
  border: none;
  padding: 0;
}
.item-list .choices__inner {
  background: var(--co-edge);
  border-radius: 4px;
}


/* Hide dropdown and input field in item lists (managed via dedicated UI) */
.item-list .choices__list--dropdown,
.item-list .choices__input {
  /* prevent list of choices from appearing */
  display: none!important;
}


/* CONVERT TO USING ITEM MANAGER STYLES */
/* Chapters Panel Styles - similar to hooks panel */
/* List of chapters with auto-numbering */
/* Displays numbered list of chapters associated with study */
/* Sortable drag-and-drop enabled */
/* id: -Theai */
.chapters-panel .chapter-connections-list {
  counter-reset: chapter-counter;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Ghost element shown while dragging a chapter to reorder */
/* id: -Th'ai */
.chapters-panel .sortable-ghost {
  opacity: 0.4;
  background: #f5f5f5;
}

/* Quick-add chapter input styling */
/* Text input at bottom of chapters list for quick chapter creation */
/* Simple text input at bottom of chapters list */
/* id: -Theai */
.quick-add-chapter input {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
  transition: border-color 0.2s;
}

/* Orange border on focus for quick-add chapter input */
/* id: -Th'ai */
.quick-add-chapter input:focus {
  outline: none;
  border-color: #ff8c00;
}

/* Individual chapter item in chapters list - numbered automatically */
/* id: -Th'ai */
.chapters-panel .chapter-connection-item {
  align-items: center;
  background: transparent;
  border-bottom: 1px solid var(--co-light);
  counter-increment: chapter-counter;
  display: flex;
  font-size: 1rem;
  justify-content: flex-start;
  margin: 0;
  padding: .75rem 1rem .75rem 2.5rem;
  position: relative;
  transition: .25s background;
}

/* Auto-generated chapter number (1., 2., 3., etc.) positioned on left */
/* id: -Th'ai */
.chapters-panel .chapter-connection-item::before {
  content: counter(chapter-counter) ".";
  font-weight: 500;
  left: 1rem;
  position: absolute;
}

/* White background on hover for chapter items */
/* id: -Th'ai */
.chapters-panel .chapter-connection-item:hover {
  background-color: #fff;
}

/* Container for chapter info (thumbnail, title, handle) */
/* id: -Th'ai */
.chapters-panel .chapter-info {
  align-items: center;
  display: flex;
  gap: 1rem;
  width: 100%;
}

/* Drag handle icon - hidden by default, appears on hover */
/* id: -Th'ai */
.chapters-panel .chapter-info .handle {
  opacity: 0;
  transition: opacity 0.2s;
  visibility: hidden;
}

/* Shows drag handle when hovering over chapter item */
/* id: -Th'ai */
.chapters-panel .chapter-connection-item:hover .handle,
.chapters-panel .chapter-connection-item:focus-within .handle {
  opacity: 1;
  visibility: visible;
}

/* Chapter thumbnail image with rounded corners */
/* id: -Th'ai */
.chapters-panel .chapter-info img {
  border-radius: 4px;
  flex-shrink: 0;
}

/* Chapter title text - grows to fill available space */
/* id: -Th'ai */
.chapters-panel .chapter-title {
  flex-grow: 1;
}

/* Chapter title link styled to match surrounding text */
/* id: -Th'ai */
.chapters-panel .chapter-title a {
  color: inherit;
  text-decoration: none;
}

/* Underlines chapter title link on hover */
/* id: -Th'ai */
.chapters-panel .chapter-title a:hover {
  text-decoration: underline;
}

/* Delete button (X) for removing chapter - hidden by default, red background */
/* id: -Th'ai */
.chapters-panel .chapter-delete {
  background-color: #E17373;
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 1.25rem;
  font-weight: bold;
  height: 1.5rem;
  line-height: 1;
  opacity: 0;
  padding: 0;
  transition: opacity 0.2s;
  visibility: hidden;
  width: 1.5rem;
}

/* Shows delete button when hovering over chapter item */
/* id: -Th'ai */
.chapters-panel .chapter-connection-item:hover .chapter-delete,
.chapters-panel .chapter-connection-item:focus-within .chapter-delete {
  opacity: 1;
  visibility: visible;
}

/* Message shown when no chapters exist yet */
/* id: -Th'ai */
.chapters-panel .empty-message {
  color: #666;
  font-style: italic;
  padding: 1rem;
}