/* Status and tags (5.0): calm coloured badges like Netbox, readable in light and dark. */
[data-label-color] {
  --label-c: var(--scs-label-grey);
}
[data-label-color='grey'] {
  --label-c: var(--scs-label-grey);
}
[data-label-color='blue'] {
  --label-c: var(--scs-label-blue);
}
[data-label-color='teal'] {
  --label-c: var(--scs-label-teal);
}
[data-label-color='green'] {
  --label-c: var(--scs-label-green);
}
[data-label-color='yellow'] {
  --label-c: var(--scs-label-yellow);
}
[data-label-color='orange'] {
  --label-c: var(--scs-label-orange);
}
[data-label-color='red'] {
  --label-c: var(--scs-label-red);
}
[data-label-color='purple'] {
  --label-c: var(--scs-label-purple);
}
[data-label-color='pink'] {
  --label-c: var(--scs-label-pink);
}
[data-label-color='petrol'] {
  --label-c: var(--scs-label-petrol);
}

html:root .scs-status,
html:root .scs-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  min-height: 20px;
  padding: 0 8px;
  border: 1px solid color-mix(in srgb, var(--label-c) 45%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--label-c) 12%, var(--scs-surface));
  color: var(--label-c);
  font: 600 var(--scs-text-xs) / 18px var(--scs-font);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

html:root .scs-status::before {
  content: '';
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--label-c);
}

html:root .scs-tag {
  border-radius: var(--scs-radius-s);
}

html:root button.scs-tag {
  cursor: pointer;
}

html:root button.scs-tag:hover,
html:root button.scs-tag:focus-visible {
  background: color-mix(in srgb, var(--label-c) 22%, var(--scs-surface));
}

html:root .scs-status.is-unknown,
html:root .scs-tag.is-unknown {
  border-style: dashed;
}

html:root .scs-tag-cell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-height: 24px;
}

html:root .scs-tag-cell .scs-tag-edit {
  min-height: 22px;
  padding: 0 4px;
  opacity: 0.7;
}

html:root .scs-tag-cell:hover .scs-tag-edit,
html:root .scs-tag-cell .scs-tag-edit:focus-visible {
  opacity: 1;
}

/* A status choice shows its colour as a dot and a tinted edge. */
html:root select.scs-status-select[data-label-color]:not([data-label-color='']) {
  border-left: 4px solid var(--label-c);
}

html:root .object-meta .scs-status,
html:root .object-meta .scs-tag {
  margin-left: 2px;
}

html:root .grid .grid-editor-content .scs-tag {
  margin-right: 2px;
}

/* Tag picker */
html:root .scs-tag-choices {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 6px 12px;
  max-height: 320px;
  overflow: auto;
  padding: 2px;
}

html:root .scs-tag-choice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

html:root .scs-tag-choice small {
  flex-basis: 100%;
  margin-left: 22px;
  color: var(--scs-ink-3);
}

html:root .scs-tag-new {
  display: grid;
  grid-template-columns: 1fr 140px;
  gap: 12px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--scs-line-2);
}

/* Tag page */
html:root .scs-tag-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

html:root .scs-tag-page-head p {
  flex-basis: 100%;
  margin: 0;
  color: var(--scs-ink-2);
}

html:root .scs-tag-group h4 {
  margin: 12px 0 6px;
  font-size: var(--scs-text-s);
}

html:root .scs-tag-group ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--scs-line);
  border-radius: var(--scs-radius-m);
}

html:root .scs-tag-group li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--scs-line-2);
}

html:root .scs-tag-group li:last-child {
  border-bottom: 0;
}

html:root .scs-label-heading {
  margin: 18px 16px 4px;
  font-size: var(--scs-text-m);
}

html:root .settings-panel > .settings-intro + .scs-label-heading {
  margin-top: 8px;
}

html:root .scs-label-table td small {
  display: block;
  margin-top: 2px;
  color: var(--scs-ink-3);
}

html:root .scs-label-fields {
  display: grid;
  gap: 10px;
}

html:root .req-tags {
  max-width: 220px;
}

/* Change log (5.0) */
html:root .object-change-log h4 {
  margin: 16px 0 8px;
  font-size: var(--scs-text-s);
}

html:root .change-log-fields {
  margin: 0;
  padding: 0;
  list-style: none;
}

html:root .change-log-fields li + li {
  margin-top: 2px;
}

html:root .change-log-fields b {
  margin-right: 4px;
  color: var(--scs-ink-2);
  font-weight: 600;
}

html:root .change-log-action {
  font-weight: 600;
}

html:root .change-log-action[data-action='created'] {
  color: var(--scs-ok);
}

html:root .change-log-action[data-action='deleted'] {
  color: var(--scs-danger);
}

html:root .change-log-table td {
  vertical-align: top;
}

html:root .change-log-kind {
  max-width: 260px;
  margin-bottom: 10px;
}

html:root .change-log-object small {
  display: block;
  color: var(--scs-ink-3);
}

/* Import with preview (5.0) */
html:root .table-import-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 4px;
}
html:root .table-import-count {
  padding: 2px 10px;
  border: 1px solid var(--scs-line);
  border-radius: 999px;
  font-size: 0.86rem;
}
html:root .table-import-count[data-import-action='error'] b {
  color: var(--scs-danger);
}
html:root .table-import-scroll {
  max-height: 46vh;
  overflow: auto;
}
html:root .table-import-errors {
  margin: 0;
  padding-left: 18px;
  color: var(--scs-danger);
}
html:root .table-import-table td:first-child {
  width: 4em;
}

/* Bulk actions (5.0) */
html:root .requirements-table .req-check {
  width: 32px;
  text-align: center;
}
html:root #bulk-actions {
  max-width: 220px;
}

/* Revisionsverlauf (6.6) */
html:root .revision-actions {
  min-width: 150px;
}

html:root .revision-actions > div {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
}

html:root .revision-value {
  display: block;
  max-height: 8em;
  overflow: auto;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

html:root .revision-note {
  color: var(--scs-ink-3);
}

html:root .revision-pro {
  color: var(--scs-ink-2);
  font-weight: 600;
}

html:root .revision-settings {
  display: grid;
  gap: 10px;
  margin: 0 0 12px;
  padding: 0;
  border: 0;
}

html:root .revision-settings .field {
  max-width: 420px;
}