/* 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 */

/* The picker bar is sticky at the top of its tab/sub-tab. It carries no bottom
   divider — the tab (or sub-tab) framing already separates it from the list. */
.item-manager {
  background: var(--co-edge);
  display: flex;
  gap: .5rem;
  padding-bottom: 1rem;
  position: sticky;
  /* Inside a sub-tabbed panel the sticky sub-tab bar owns the scrollport's top;   */
  /* --sticky-offset (popup-form.css, set on such panels) parks this bar right     */
  /* under it instead of riding up into it. Elsewhere it stays at 0. */
  top: var(--sticky-offset, 0);
  z-index: 1;
}
/* z-index:1 makes the bar a stacking context, so a dropdown opened INSIDE it can't
   out-rank a later sibling bar (Study ▸ Meta: the study-group list passed under the
   compositions picker — walk 3b, 8.30). While one of its pickers is open, the whole
   bar lifts above every other sticky bar and the sub-tab bar (3). */
.item-manager:has(.choices.is-open) {
  z-index: 6;
}
.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 */
/* In edit mode the pickerA (anchor/detail) field is hidden so only the usage
   picker stays active. pickerA wrappers always end in `_field` (legacy
   anchors_field/hooks_field AND the detail-popup panels' anchor_structural_field,
   hook_annotational_field, etc.); usage pickers end in `_usages` and targets in
   `_connections`, so this attribute selector hits pickerA alone. */
.item-manager .edit-msg,
.item-manager.edit-mode [id^="form-field-"][id$="_field"],
.item-manager.edit-mode .item-manager-add,
.item-manager .item-manager-update,
.item-manager .item-manager-cancel {
  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 (server-rendered .relation-row joins the
     group so the Person RELATIONS tab reads chip-identical: transparent,
     borderless, same padding/height/hover — NOT the bordered delineation-row
     look, which read as 'row outlines' in review) */
.item-list .choices__list--multiple .choices__item,
.item-list .relation-row {
  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,
.item-list .choices__item:focus-within,
.item-list .relation-row:hover,
.item-list .relation-row:focus-within {
  background-color: var(--co-pale2)!important;
  transition: .25s background;
}


/* X "Remove" button styling shared across three surfaces:
 *   - .choices__button  -- Choices.js multi-select chips (rendered by the
 *     library itself; the base Choices.js CSS provides background-image and
 *     text-indent, we override the color + size below)
 *   - .delineation-row__remove -- Glossary's Delineation tab disclosure rows
 *     (server-rendered <details>, see core/templates/inc/item_manager/
 *     delineations/_list.html)
 *   - .quote-row__remove -- Source's Quotes tab disclosure rows
 *     (server-rendered, library/templates/library/_quote_row.html)
 *
 * The two server-rendered buttons emit `&times;` as their text content for
 * accessibility + screen-reader fallback; `text-indent: -9999px` hides that
 * glyph visually so the white SVG × background-image is the only visible
 * rendering. The SVG (a 21x21 viewBox white cross) matches the one
 * Choices.js bundles for its multi-select close button, decoded from the
 * library's CSS at choices.min.css so the three surfaces are pixel-
 * identical at the same background-size. Future style refinements to any
 * of these classes touch this single rule. */
.item-list .choices[data-type*="select-multiple"] .choices__button,
.item-list .delineation-row__remove,
.item-list .quote-row__remove,
.item-list .relation-row__remove {
  background-color: #E17373;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==");
  background-repeat: no-repeat;
  background-position: center;
  background-size: .75rem;
  border: none;
  padding: 0;
  height: 1.5rem;
  width: 2rem;
  margin: 0 0 0 .25rem;
  cursor: pointer;
  text-indent: -9999px;
  overflow: hidden;
  visibility: hidden;
}

/* 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');
}

/* The workspace link carries an inline house mark (.mark, upstudy-marks.svg#mark-workspace)
   instead of a painted background -- a currentColor <use> is the only way a family mark
   reaches the row, so the shared background above is switched off here. */
.item-list .item-workspace {
  background-image: none;
  color: var(--co-ink);
  /* Sized by INK to the legacy row icons (the hover anchor `.hb-anchor` renders 16px tall):
     the marks are drawn full-bleed (lbk 26.08.29), the blocks stand ~12.3 of 16 units, so
     1.3rem (19.5px) puts 16px of blocks beside the 16px anchor (measured). Box = the ×'s 1.5rem. */
  height: 1.5rem;
  padding: 0;
  font-size: 1.3rem;
}

.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;
}

/* Primary-anchor chip: the row whose Connection.primary=True. The full highlight
   (background + bottom rule + left bar + bold) tracks the is-primary CLASS, not list
   position, so it works on either anchor sub-tab and follows the actual primary --
   floating-to-top is handled separately (server ordering + setConnectionPrimary). It was
   previously pinned to `#form-field-anchor_connections .choices__item:first-child`, which
   only highlighted the Annotational panel's first row and could not follow a Structural
   primary or clear when the primary moved sub-tabs. */
.item-list .choices__item.is-primary,
.item-list .relation-row.is-primary-relation {
  border-left: 3px solid var(--co-link);
  padding-left: calc(1rem - 3px); /* preserve the 1rem chip padding */
  font-weight: 700;
  background-color: var(--co-mid) !important;
  border-bottom: 1px solid var(--co-dark) !important;
}
/* The "Make primary" affordance is meaningless on the already-primary row. */
.item-list .choices__item.is-primary .item-primary {
  visibility: hidden !important;
}

/* Row-name link styling for the item-name-link mode (data-name-edit-url-template).
   The anchor wraps the chip's title text and inherits the body `a` rule: default
   color = inherit, no underline, hover/focus = var(--co-link). Row-level
   propagation (see below) turns the link blue when the surrounding chip is
   hovered, matching the chapter-connection-item pattern. */
.item-list .item-name-link {
  flex-grow: 1;
}
.item-list .choices__item:hover .item-name-link,
.item-list .choices__item:focus-within .item-name-link {
  color: var(--co-link);
}

/* 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.
   The Make-primary up-arrow reveals on hover for ANY non-primary chip in either
   anchor sub-tab (annotational + structural). It must NOT be gated on
   `:not(:first-child)`: now that the primary is a single connection spanning both
   sub-tabs (cover OR content), the first-listed chip is frequently NOT the primary
   and must stay promotable. The already-primary chip is hidden separately via
   `.choices__item.is-primary .item-primary` (visibility:hidden !important) above. */
.item-list .relation-row:hover .item-workspace,
.item-list .relation-row:focus-within .item-workspace,
.item-list .relation-row:hover .relation-row__remove,
.item-list .relation-row:focus-within .relation-row__remove,
.item-list .choices__item:hover .item-primary,
.item-list .choices__item: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 layout (border + focus styling now provided by
   the project-wide field rule + the .field-resting class on the input) */
.quick-add-chapter input {
  width: 100%;
  padding: 0.5rem;
  font-size: 1rem;
  transition: border-color 0.2s;
}

/* 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;
}

/* Hover/focus background for chapter items; row-level link-color
   propagation turns the chapter-title link blue when the row is hovered. */
.chapters-panel .chapter-connection-item:hover,
.chapters-panel .chapter-connection-item:focus-within {
  background-color: var(--co-pale2);
}
.chapters-panel .chapter-connection-item:hover .chapter-title a,
.chapters-panel .chapter-connection-item:focus-within .chapter-title a {
  color: var(--co-link);
}

/* 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;
}

/* 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;
}