/* ─── dropdown / popover component (see dropdown.js) ─── */

.dropdown {
  position: fixed;
  /* above modal overlays (500) — a dropdown is always the topmost transient */
  z-index: 600;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: max-content;
  min-width: 140px;
  max-width: min(320px, calc(100vw - 16px));
  padding: 6px;
  background: #15171c;
  border: 1px solid #2a2e38;
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}

/* scrollable area; dropdown.js caps its max-height (maxItems / viewport) */
.dd-body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #3a3f4a transparent;
}
.dd-body::-webkit-scrollbar {
  width: 8px;
}
.dd-body::-webkit-scrollbar-thumb {
  background: #3a3f4a;
  border-radius: 4px;
}

/* pinned below the scroll area */
.dd-footer {
  flex-shrink: 0;
}

.dd-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 6px;
  cursor: pointer;
  color: #cdd2da;
  font-size: 13px;
  user-select: none;
  text-decoration: none; /* rows can be <a> */
  outline: none;
}
.dd-row:hover,
.dd-row:focus-visible {
  background: #232730;
}
.dd-row.active {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
/* A footer action wears the row's box — same padding, type size and icon size —
   so the pinned actions line up with the list above them. It only differs by a
   resting fill, which is what marks it as an action rather than a choice.
   The type/alignment resets are load-bearing: a <button> otherwise takes the
   UA's centred text and an absolute line-height from `font: inherit`, which is
   what made the button and the <a> beside it two different heights. */
.dd-action {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 5px 8px;
  border: none;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  color: #cdd2da;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.4;
  text-align: left;
  text-decoration: none; /* an action that navigates is a real <a> */
  cursor: pointer;
  user-select: none;
  outline: none;
}
/* An icon-less action has no glyph anchoring it to the left edge, so its label
   sits where a button's label belongs — the middle. */
.dd-action--plain .dd-label {
  text-align: center;
}
/* spacing off the body above and off each other — one value, so a footer of
   one action and a footer of three are rhythmically the same */
.dd-footer > .dd-action:first-child,
.dd-action + .dd-action {
  margin-top: 6px;
}
.dd-action:hover,
.dd-action:focus-visible {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.dd-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Checkbox row (ddCheckRow): the checkbox component's own <label> wearing the
   row's box, so the whole row is the hit target. The two-class selector settles
   it against .cb's inline-flex whichever order the stylesheets load in. */
.dd-row.dd-check {
  display: flex; /* blockified, so it fills the body — no width needed, and a
                    width of 100% plus the child row's indent would be 100% + 24px,
                    which the body answers with a horizontal scrollbar */
  box-sizing: border-box;
}
/* a dead row shouldn't light up under the pointer as if it would do something */
.dd-row.dd-check.is-disabled:hover,
.dd-row--static:hover {
  background: none;
}
/* ...and the same for a row that never had anywhere to go: ddRow stamps this
   when it was given neither onClick nor href, so a read-only list keeps the
   row metrics without borrowing the affordance. */
.dd-row--static {
  cursor: default;
}
/* A row that belongs to the one above it, indented to where the parent's text
   starts (8px padding + a 16px box + an 8px gap), and a size down — the
   hierarchy is what the indent is for, so the type only has to agree with it. */
.dd-row--child {
  margin-left: 24px;
  font-size: 12px;
  color: #8a90a0;
}

/* two-line row (ddRow's `sublabel`): the label column stacks, and each line
   ellipsises on its own — the shell sizes to content, so a long machine key
   must not be what decides the pop's width */
.dd-row.has-sub .dd-label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow: visible;
}
.dd-row.has-sub .dd-label-text,
.dd-sub {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dd-sub {
  font-size: 11px;
  color: #6a7080;
}
.crate-owner {
  color: #8a90a0;
}

/* non-interactive hint (e.g. an empty menu explaining itself) */
.dd-empty {
  padding: 6px 8px;
  color: #6a7080;
  font-size: 12.5px;
  max-width: 210px;
  line-height: 1.45;
  user-select: none;
}

.dd-sep {
  flex-shrink: 0;
  height: 1px;
  background: #2a2e38;
  margin: 4px 2px;
}

.dd-input {
  display: block;
  width: 100%;
  background: #232730;
  border: 1px solid #3a3f4a;
  border-radius: 6px;
  color: #cdd2da;
  font: 13px/1 "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  padding: 6px 8px;
  outline: none;
  box-sizing: border-box;
  margin-top: 2px;
}
.dd-input:focus {
  border-color: #5a6170;
}
.dd-input::placeholder {
  color: #4a5060;
}

/* destructive trailing icon button inside a row */
.dd-del {
  flex-shrink: 0;
  border: none;
  background: none;
  color: #8a90a0;
  padding: 6px 8px;
  cursor: pointer;
  display: grid;
  place-items: center;
  border-radius: 4px;
  line-height: 0;
}
.dd-del svg {
  width: 13px;
  height: 13px;
}
.dd-del:hover {
  background: rgba(229, 72, 77, 0.15);
  color: #e5484d;
}

/* trailing action cluster (visibility + delete) */
.dd-actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
}

/* leading row icon (e.g. the bell on alert rows) — decorative: clicks pass
   through to the row (ddRow reserves leading clicks for real controls) */
.dd-icon {
  flex-shrink: 0;
  display: inline-flex;
  line-height: 0;
  pointer-events: none; /* color inherits from the row text */
}
.dd-icon svg {
  width: 13px;
  height: 13px;
}

/* label + count as one group: the badge is information about the row, not an
   action, so it sits beside the name — the row's flex gap then spaces the
   whole group from the trailing action cluster */
.dd-label-group {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.dd-label-group .dd-label {
  flex: 0 1 auto; /* natural width — the badge hugs the name */
}

/* new-matches count on an alert row. line-height = height centers the digit
   vertically — flex centering kept landing it a hair high (baseline drift of
   the small glyph inside its line box). */
.dd-unseen {
  flex-shrink: 0;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: #e5484d;
  color: #fff;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 16px;
  padding-top: 1px; /* optical: the digit's cap sits high at this size */
  text-align: center;
  display: inline-block;
  box-sizing: border-box;
}
/* a disabled (paused) alert row reads dimmer */
.dd-row.al-off .dd-label {
  color: #6a7080;
}

/* A choice that is still a choice, but can't do its job yet (a connector
   template whose domain has no provider installed). Only the main line dims —
   the sub is the REASON, and a reason dimmed to match its label is a reason
   nobody reads. Hover and focus are untouched: the row is pickable, and a row
   that goes dead under the pointer says the opposite. */
.dd-row--unavailable .dd-label-text {
  color: #7d8496;
}
.dd-row--unavailable .dd-sub {
  color: #9a7b3e;
}
.dropdown--light .dd-row--unavailable .dd-label-text {
  color: #8a8a92;
}
.dropdown--light .dd-row--unavailable .dd-sub {
  color: #92650a;
}

/* visibility toggle inside a crate row */
.dd-vis {
  flex-shrink: 0;
  border: none;
  background: none;
  color: #8a90a0;
  padding: 6px 8px;
  cursor: pointer;
  display: grid;
  place-items: center;
  border-radius: 4px;
  line-height: 0;
}
.dd-vis svg {
  width: 13px;
  height: 13px;
}
.dd-vis:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #c8ccd4;
}

/* non-interactive section header inside a menu (e.g. the sort menu's groups) */
.dd-head {
  padding: 7px 8px 3px;
  color: #6a7080;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  user-select: none;
}

/* A wrapped set of compact choices (see ddChips). Shares the horizontal inset
   of .dd-row and .dd-head, so a header sitting above a set reads as its label
   and the whole menu keeps one left edge. */
.dd-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 3px 8px 6px;
}
.dd-chip {
  font: inherit;
  font-size: 12px;
  line-height: 1;
  padding: 5px 7px;
  border: 1px solid #2a2e38;
  border-radius: 6px;
  background: #1b1e25;
  color: #cdd2da;
  cursor: pointer;
  outline: none;
}
.dd-chip--mono {
  font-family: monospace;
}
.dd-chip:hover:not(:disabled),
.dd-chip:focus-visible:not(:disabled) {
  background: #262b34;
  border-color: #3a3f4a;
  color: #fff;
}
.dd-chip.active {
  background: rgba(255, 255, 255, 0.08);
  border-color: #4a5060;
  color: #fff;
}
/* Already taken — still shown, because a catalog that hides what you've used
   can't answer "is that one available"; just not pickable again. */
.dd-chip:disabled {
  opacity: 0.4;
  cursor: default;
}

/* ─── light surface (cards, forms, admin) ───────────────────────────────────
   The shell above is drawn for a dark popover over the gallery. A surface that
   is already white asks for the inverse, and the component takes it the way
   createCheckbox does — `variant: "light"` on the caller, one modifier class
   here, overriding only what differs.

   The values are lifted from the admin's own popovers, which this variant
   replaced: #fff / #d8d8de / the softer shadow from .access-drop, #f3f3f6 hover
   from .retag-opt, #ececef from .retag-sep, #9aa0aa from .retag-key. */

.dropdown--light {
  background: #fff;
  border-color: #d8d8de;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.dropdown--light .dd-body {
  scrollbar-color: #c9c9d0 transparent;
}
.dropdown--light .dd-body::-webkit-scrollbar-thumb {
  background: #c9c9d0;
}

.dropdown--light .dd-row {
  color: #111;
}
.dropdown--light .dd-row:hover,
.dropdown--light .dd-row:focus-visible {
  background: #f3f3f6;
}
.dropdown--light .dd-row.active {
  background: #ececef;
  color: #111;
}
.dropdown--light .dd-sub,
.dropdown--light .dd-empty,
.dropdown--light .dd-head,
.dropdown--light .crate-owner,
.dropdown--light .dd-row--child,
.dropdown--light .dd-row.al-off .dd-label {
  color: #9aa0aa;
}
.dropdown--light .dd-sep {
  background: #ececef;
}
.dropdown--light .dd-chip {
  background: #f7f7f9;
  border-color: #dcdce2;
  color: #111;
}
.dropdown--light .dd-chip:hover:not(:disabled),
.dropdown--light .dd-chip:focus-visible:not(:disabled) {
  background: #ececef;
  border-color: #c9c9d0;
  color: #111;
}
.dropdown--light .dd-chip.active {
  background: #ececef;
  border-color: #b9b9c4;
  color: #111;
}

.dropdown--light .dd-action {
  background: #111;
  color: #fff;
}
.dropdown--light .dd-action:hover,
.dropdown--light .dd-action:focus-visible {
  background: #000;
  color: #fff;
}

.dropdown--light .dd-input {
  background: #fff;
  border-color: #d8d8de;
  color: #111;
}
.dropdown--light .dd-input:focus {
  border-color: #9aa0aa;
}
.dropdown--light .dd-input::placeholder {
  color: #b4b4bd;
}

.dropdown--light .dd-del,
.dropdown--light .dd-vis {
  color: #9aa0aa;
}
.dropdown--light .dd-vis:hover {
  background: #f3f3f6;
  color: #111;
}

/* ─── trigger side: the button that OPENS a menu ───────────────────────────
   Everything above styles the menu; these two style what you click to get it.
   They live here rather than in styles.css because that file isn't loaded on
   admin.html, while this one is loaded everywhere a dropdown exists — which is
   also why nothing below uses a custom property: --text and friends don't
   exist on that page. */

/* The caret. Same glyph whether it sits beside a label (a span inside the
   button) or IS the whole button (icon-only triggers), so both wear this class
   and only the host's spacing differs. Size and opacity sit on the svg, not on
   the element: on an icon-only trigger the element is a bordered box, and
   dimming or rotating THAT would take the border with it. dropdown.js stamps
   .dd-open on the anchor while the menu is up — the button in both shapes,
   hence the two selectors — so the flip comes free. */
.dd-caret {
  flex: none;
  display: inline-flex;
}
.dd-caret svg {
  width: 12px;
  height: 12px;
  opacity: 0.45;
  transition: transform 0.12s;
}
.dd-open .dd-caret svg,
.dd-caret.dd-open svg {
  transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
  .dd-caret svg { transition: none; }
}

/* A trigger that names the current choice instead of an action — a select in
   everything but markup, for when the menu picks a value the button then has
   to keep showing. The value carries the text weight and the caret stays dim,
   so the eye lands on the answer rather than on the affordance. */
.dd-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 148px;
  font-family: inherit;
  font-size: 12px;
  padding: 5px 10px 5px 12px;
  border: 1px solid #d0d0d8;
  border-radius: 6px;
  background: #fff;
  color: #3c3c50;
  cursor: pointer;
}
.dd-trigger:hover { background: #f3f3f8; }
.dd-trigger.dd-open { border-color: #a8a8b8; background: #f3f3f8; }
.dd-trigger:disabled { opacity: 0.5; cursor: default; }
.dd-trigger-value { font-weight: 500; }