/* Group colours config page — one row per flavour group (+ a no-default row):
   a clickable swatch (effective colour), the group's name/tag, a colour control
   (editable hex, or a read-only inherited value when the group follows its
   flavour), and the group's member flavours as small swatched chips. */

.colour-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 0.5px solid var(--border);
}
.colour-row:last-child {
  border-bottom: none;
}

/* The no-default row is the app-level setting, set apart from the groups. */
.colour-row.no-default-row {
  margin-top: 8px;
  border-top: 1.5px dashed var(--border-strong);
  border-bottom: none;
  padding-top: 16px;
}

.colour-swatch {
  width: 34px;
  height: 34px;
  border-radius: var(--radius);
  border: 0.5px solid var(--border-strong);
  flex-shrink: 0;
  cursor: pointer;
  padding: 0;
  background: transparent;
  margin-top: 2px;
}
.colour-swatch:hover {
  filter: brightness(0.97);
}
/* Unset — dashed/empty swatch until a colour is chosen (or inherited). */
.colour-swatch.unset {
  border: 1.5px dashed var(--border-strong);
  cursor: default;
  background: repeating-linear-gradient(
    45deg,
    var(--surface-1),
    var(--surface-1) 4px,
    var(--surface-2) 4px,
    var(--surface-2) 8px
  );
}

/* Everything to the right of the swatch stacks vertically: head line, member
   chips, and (for single-flavour groups) the follow toggle. */
.colour-main {
  flex: 1;
  min-width: 0;
}
.colour-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.colour-meta {
  flex: 1;
  min-width: 0;
}
.colour-name {
  font-weight: 500;
  font-size: 14px;
}
.colour-tag {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}
.colour-tag.unset {
  font-style: italic;
}

.colour-control {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.colour-hex {
  width: 96px !important;
  flex-shrink: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  text-transform: uppercase;
}
.colour-hex.invalid {
  border-color: var(--danger-text);
}

/* Read-only inherited value shown when a single-flavour group follows its
   flavour — deliberately not an editable field that would silently do nothing. */
.colour-inherit {
  min-width: 96px;
  text-align: right;
  font-size: 13px;
}
.inherit-hex {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.inherit-none {
  font-style: italic;
  color: var(--text-muted);
}

/* Member flavour chips — the group's members with their own gelato colours. */
.member-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.member-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  padding: 2px 8px 2px 5px;
  border: 0.5px solid var(--border);
  border-radius: 999px;
  background: var(--surface-1);
  color: var(--text-secondary);
}
.chip-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 0.5px solid var(--border-strong);
  flex-shrink: 0;
}
.chip-swatch.unset {
  border: 1px dashed var(--border-strong);
  background: repeating-linear-gradient(
    45deg,
    var(--surface-1),
    var(--surface-1) 3px,
    var(--surface-2) 3px,
    var(--surface-2) 6px
  );
}
.member-none {
  font-size: 12px;
  font-style: italic;
  color: var(--text-muted);
}

/* "Follow flavour colour" toggle — single-flavour groups only. */
.follow-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
}
.follow-toggle input {
  width: auto;
  margin: 0;
}

/* The native picker is hidden — the swatch is the visible/clickable surface,
   and tapping it opens this picker via .click(). */
.colour-picker {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

/* Filter pills reuse the shared .pill styling; the colour-not-set toggle uses
   the same .active treatment as the type pills. */
.pill.filter-toggle {
  cursor: pointer;
}