/* -------------------------------------------------------
                 DROPDOWN SELECT
   ------------------------------------------------------- */
/* Single-select trigger box (e.g. the Icon Manager's container filter) —
   shows the current option's own (CSS-truncated) label. Multi-select
   triggers (e.g. the tasks page's relation "+" button) don't use this;
   they keep their own existing button styling and show state via chips
   instead. */
.custom-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font: inherit;
  color: inherit;
  cursor: var(--cursor-pointer, pointer);
}
.custom-select-trigger-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.custom-select-trigger i {
  flex: none;
  font-size: 9px;
  opacity: 0.7;
}

/* ---- selected-item chips (multi-select only) ---- */
.custom-select-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--highlight, #cfcf00) 18%, transparent);
  border: 1px solid
    color-mix(in srgb, var(--highlight, #cfcf00) 50%, transparent);
  border-radius: 10px;
  padding: 2px 6px;
  font-size: 0.75em;
  color: var(--font-color-clear, #d0d0d0);
  white-space: nowrap;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Small "the related task is already done" badge — every relation-chip
   build site (tasks/scripts/taskReadDetail.js, descriptionEditor.js,
   taskRelations.js's peek, and the homepage's own scripts/taskReadPanel.js)
   adds this whenever the related task itself is done (isTaskDone/
   isTaskCompleted - same logic, two names, one per "world" - see either
   function's own comment for why). Sits INSIDE the chip's own bounds, over
   its right edge, rather than poking out past it — a negative inset was
   tried first but .custom-select-chip's own overflow:hidden above (needed
   for its text ellipsis) clips its positioned descendants too, badge
   included, regardless of how far outside its own box they're offset to.
   .custom-select-chip-done's own padding-right below reserves room so the
   badge overlaps empty padding, not the (possibly ellipsis'd) title text —
   the full title is always available via the chip's own tooltip anyway, so
   losing a couple more characters to truncation here costs nothing. */
.custom-select-chip-done-badge {
  position: absolute;
  top: 50%;
  right: 2px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--task-done, #2edb51);
  color: var(--main-theme-darkest, #000);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  padding-right: 1px;
  padding-bottom: 1px;
  border: 1px solid var(--main-theme, #1a1a1a);
}
/* Same subtle dimming .tasks-overview-completed-body's own done cards
   already get (styles.css) - the badge above is the actual signal, this
   just keeps a done relation from visually competing with still-open
   ones sitting right next to it. padding-right makes room for the badge
   itself (see its own comment above) instead of overlapping the text. */
.custom-select-chip.custom-select-chip-done {
  opacity: 0.75;
  padding-right: 18px;
}
.custom-select-chip-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
/* General, unscoped (not tied to whichever container a chip happens to be
   built inside - relations read view/preview/peek, tasks/scripts/
   taskReadDetail.js+descriptionEditor.js+taskRelations.js, are the only
   current .custom-select-chip-clickable users, but this holds regardless of
   where the class shows up next). Explicit either way rather than leaning
   on inheritance for the non-clickable case - a plain chip (e.g. a
   selected tag/category, this file's own multi-select use) has no cursor
   rule of its own today and would happen to inherit body's own
   var(--cursor-auto) anyway, but stating it here directly means that stays
   true even if some ancestor ever sets its own cursor in between. */
.custom-select-chip.custom-select-chip-clickable {
  cursor: var(--cursor-pointer, pointer);
}
.custom-select-chip:not(.custom-select-chip-clickable) {
  cursor: var(--cursor-auto, auto);
}
.custom-select-chip-remove {
  background: none;
  border: none;
  color: inherit;
  cursor: var(--cursor-pointer, pointer);
  padding: 0 0 0 3px;
  opacity: 0.55;
  font-size: 1.2em;
  line-height: 1;
  flex-shrink: 0;
}
.custom-select-chip-remove:hover {
  opacity: 1;
}
/* Marks the sub-task peek's own "pending" relation chip
   (updateSubTaskPendingChip, tasks/scripts/tasks.js) as visual-only — it
   reflects the sub-task's currently typed title live, but nothing has
   actually written to the parent's own `related` array yet; that only
   happens once createTask (tasks.js) really saves it. Dashed + faded
   instead of the solid look every ACTUALLY-saved relation chip gets
   (.custom-select-chip above), so it never reads as already confirmed. */
.custom-select-chip-pending {
  background: transparent;
  border-style: dashed;
  opacity: 0.75;
  font-style: italic;
}

/* Toggled on a .confirm-dialog (attachDropdownSelect's own open()/close(),
   dropdownSelect.js) for exactly as long as one of its own dropdown popups
   is open - overrides the native <dialog> UA-stylesheet default of
   overflow: auto, which otherwise gave the whole DIALOG a scrollbar the
   instant the popup (deliberately allowed to render taller than the
   dialog's own box there, same file) actually did - not the popup itself
   getting clipped, but the dialog around it turning scroll-clipped instead,
   which read just as broken. Scoped to this one class/state rather than a
   blanket override on .confirm-dialog, so a genuinely too-tall dialog on a
   short viewport (long warning text, say) keeps that native safety net the
   rest of the time. */
dialog.has-open-dropdown-popup {
  overflow: visible;
}

/* ---- the dropdown/popup itself ---- */
.custom-select-popup {
  position: absolute;
  z-index: 9000;
  background: var(--main-theme, #202020);
  border: 1px solid var(--secondary-color, #5aaafa);
  border-radius: 8px;
  display: none;
  flex-direction: column;
  max-height: 500px;
  overflow-y: auto;
  min-width: 220px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
}
.custom-select-popup.open {
  display: flex;
  max-width: 250px;
}
.custom-select-popup-header {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--main-theme-darker, #151515);
  font-size: 0.72em;
  color: var(--font-color-clear, #d0d0d0);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 6px 6px 12px;
  border-bottom: 1px solid var(--secondary-color, #5aaafa);
  border-radius: 8px 8px 0 0;
  flex-shrink: 0;
  text-shadow: none;
}
/* Everything except the header — its own padding/gap, set once here instead
   of on the popup itself (which would otherwise double up with each item's
   own padding at the top/bottom edge — see the removed first-/last-child
   overrides this replaced). */
.custom-select-popup-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
}
/* One per option-group boundary (the `group` field on an option,
   attachDropdownSelect) — e.g. an admin-only profile picker's own account
   headers. Deliberately NOT sticky like .custom-select-popup-header above
   (stacking several sticky headers at once would look broken); a top
   border/margin on every group after the first is what visually separates
   it from the previous group's own last item instead. */
.custom-select-popup-group-header {
  padding: 4px 6px;
  font-size: 0.72em;
  color: var(--font-color-clear, #d0d0d0);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.75;
}
.custom-select-popup-group-header:not(:first-child) {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--secondary-color, #5aaafa);
}
.custom-select-popup-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: var(--cursor-pointer, pointer);
  font-size: 0.8em;
  color: var(--font-color-clear, #d0d0d0);
  background: none;
  flex-shrink: 0;
  border-bottom: 1px solid
    color-mix(in srgb, var(--secondary-color) 40%, transparent);
  text-align: left;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.custom-select-popup-item:hover {
  background: var(--main-theme-lighter, #2b2b2b);
}
/* Up/Down highlights an item via this class (highlightClass option,
   attachPopupListNav, shared/scripts/dropdownSelect.js) instead of moving
   real DOM focus onto it — for a popup whose trigger is a live text input
   (e.g. the tasks page's #taskCategory suggestion dropdown), where real
   item focus would yank the cursor/selection out of it mid-typing. Same
   tint :hover already uses above, so a keyboard-highlighted row reads
   identically to a mouse-hovered one. */
.custom-select-popup-item.keyboard-highlighted {
  background: var(--main-theme-lighter, #2b2b2b);
}
.custom-select-popup-item.selected {
  color: var(--highlight, #cfcf00);
  background: color-mix(in srgb, var(--highlight, #cfcf00) 12%, transparent);
}
.custom-select-popup-item.selected::before {
  content: "✓";
  font-size: 0.85em;
  flex-shrink: 0;
}
/* Wraps an option alongside its own delete button (onDeleteOption,
   attachDropdownSelect) — a <button> can't contain another <button>, so
   this sits beside .custom-select-popup-item as a plain, non-interactive row
   instead of nesting them. Only present for a dropdown that opted into
   onDeleteOption and/or onRerollOption (the tag picker,
   tasks/scripts/taskCreateEdit.js) — everything else keeps appending
   .custom-select-popup-item straight into .custom-select-popup-items,
   unaffected. */
.custom-select-popup-item-row {
  display: flex;
  align-items: center;
}
.custom-select-popup-item-row .custom-select-popup-item {
  flex: 1;
  width: auto;
  min-width: 0;
}
.custom-select-popup-item-delete,
.custom-select-popup-item-reroll {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--font-color, #a5a5a5);
  opacity: 0.5;
  font-size: 1.3em;
  line-height: 1;
  padding: 4px 6px;
  cursor: var(--cursor-pointer, pointer);
}
.custom-select-popup-item-delete:hover {
  opacity: 1;
  transform: scale(1.4);
  transition: transform 200ms ease;
  color: var(--priority-one, #ff1414);
}
.custom-select-popup-item-reroll {
  font-size: 1.05em;
}
.custom-select-popup-item-reroll:hover {
  opacity: 1;
  transform: scale(1.25);
  transition: transform 200ms ease;
  color: var(--highlight);
}
/* The "+ createLabel" row pinned at the bottom of the list (onCreate,
   attachDropdownSelect) — a small top border/margin sets it apart from the
   real options above rather than reading as just one more of them. */
.custom-select-popup-add-new {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--grid-color, #3f3f3f);
}
.custom-select-popup-add-new-btn i {
  color: var(--secondary-color, #5aaafa);
  flex-shrink: 0;
}
.custom-select-popup-add-new-input {
  width: 100%;
  padding: 5px 10px;
  border-radius: 5px;
  border: 1px solid var(--secondary-color, #5aaafa);
  background: var(--main-theme-lighter, #2b2b2b);
  color: var(--font-color-clear, #d0d0d0);
  font-size: 0.8em;
  outline: none;
}
.custom-select-popup-empty {
  font-size: 0.8em;
  color: var(--font-color, #a5a5a5);
  padding: 6px 10px;
  text-align: center;
}
.custom-select-popup-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.8em;
  color: var(--font-color, #a5a5a5);
  padding: 6px 10px;
  text-align: center;
}
.custom-select-popup-loading-spinner {
  width: 12px;
  height: 12px;
  border: 2px solid var(--main-theme-lighter, #2b2b2b);
  border-top-color: var(--secondary-color, #5aaafa);
  border-radius: 50%;
  flex-shrink: 0;
  animation: custom-select-popup-loading-spin 700ms linear infinite;
}
@keyframes custom-select-popup-loading-spin {
  to {
    transform: rotate(360deg);
  }
}