/*
 * Highlight rules (js/shared/highlight-rules.js): a highlighted row takes
 * its first rule's tint, with the heading text colour so every tint keeps
 * AA contrast (the tints are too strong for the lighter body grey), and its
 * marker cell shows a numbered chip per matching rule. Colours live in
 * asc-tokens.css (--asc-highlight-<key>-bg / -chip, light and dark).
 *
 * The tint goes through Bootstrap's --bs-table-bg so hover still layers
 * --bs-table-bg-state over it on every cell.
 */
.asc-highlight--amber { --asc-highlight-bg: var(--asc-highlight-amber-bg); --asc-highlight-chip: var(--asc-highlight-amber-chip); }
.asc-highlight--red { --asc-highlight-bg: var(--asc-highlight-red-bg); --asc-highlight-chip: var(--asc-highlight-red-chip); }
.asc-highlight--green { --asc-highlight-bg: var(--asc-highlight-green-bg); --asc-highlight-chip: var(--asc-highlight-green-chip); }
.asc-highlight--blue { --asc-highlight-bg: var(--asc-highlight-blue-bg); --asc-highlight-chip: var(--asc-highlight-blue-chip); }
.asc-highlight--purple { --asc-highlight-bg: var(--asc-highlight-purple-bg); --asc-highlight-chip: var(--asc-highlight-purple-chip); }
.asc-highlight--slate { --asc-highlight-bg: var(--asc-highlight-slate-bg); --asc-highlight-chip: var(--asc-highlight-slate-chip); }

tr.asc-highlight-row > td {
  --bs-table-bg: var(--asc-highlight-bg);
  color: var(--bs-heading-color, var(--asc-text-heading));
}

tr.asc-highlight-row > td .text-muted {
  color: inherit !important;
}

.asc-highlight-marker {
  width: 1%;
  min-width: 2.25rem;
  padding-left: 0.5rem !important;
  padding-right: 0.25rem !important;
  white-space: nowrap;
}

.asc-highlight-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.25rem;
  border-radius: 0.3rem;
  background-color: var(--asc-highlight-chip);
  color: var(--asc-highlight-chip-text);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
}

.asc-highlight-chip + .asc-highlight-chip {
  margin-left: 0.2rem;
}

.asc-highlight-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.8125rem;
}

.asc-highlight-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.asc-highlight-legend-label {
  color: var(--bs-heading-color, var(--asc-text-heading));
  font-weight: 600;
}

.asc-highlight-legend-condition {
  color: var(--asc-text-muted);
}

/* The rules editor (js/shared/highlight-rules-editor.js). */
.asc-highlight-editor-rule {
  padding: 0.75rem;
  border: 1px solid var(--asc-border);
  border-radius: 0.5rem;
}

.asc-highlight-editor-rule + .asc-highlight-editor-rule {
  margin-top: 0.75rem;
}

.asc-highlight-editor-values {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: 0.125rem 1rem;
  max-height: 10rem;
  overflow-y: auto;
  padding: 0.375rem 0.5rem;
  border: 1px solid var(--asc-border);
  border-radius: 0.375rem;
}

.asc-highlight-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  min-height: calc(1.5em + 0.5rem + 2px);
  align-items: center;
}

.asc-highlight-swatch {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.375rem;
  background-color: var(--asc-highlight-chip);
  border: 2px solid transparent;
  box-shadow: inset 0 0 0 2px var(--bs-paper-bg, #fff);
  cursor: pointer;
}

input:checked + .asc-highlight-swatch {
  border-color: var(--bs-heading-color, var(--asc-text-heading));
}

input:focus-visible + .asc-highlight-swatch {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

.asc-highlight-swatch.is-taken {
  opacity: 0.3;
  cursor: not-allowed;
}