/* Icon library (4.7.1): one card per icon in an even grid, and the accessory icon picker used in
   the systems catalog, the element table and the icon dialogs. */

html:root .icons-grid {
  grid-template-columns: repeat(auto-fill, minmax(188px, 1fr));
  grid-auto-rows: 1fr;
  gap: 14px;
}

html:root .icons-grid > .scoped-icon {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--scs-line);
  border-radius: var(--scs-radius-m, 8px);
  background: var(--scs-surface);
}

html:root .icons-grid > .scoped-icon:hover,
html:root .icons-grid > .scoped-icon:focus-within {
  border-color: var(--scs-line-strong);
}

html:root .icons-grid .icon-card {
  flex: 1;
  gap: 6px;
  width: 100%;
  min-height: 0;
  padding: 18px 12px 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  white-space: normal;
}

html:root .icons-grid .icon-card:hover {
  background: var(--scs-surface-2);
}

html:root .icons-grid .icon-card strong {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html:root .icons-grid .icon-card small {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html:root .icons-grid .icon-card .icon-symbol {
  margin-bottom: 4px;
}

html:root .icons-grid .icon-card .icon-color-mode {
  margin-top: 2px;
}

html:root .icons-grid .scoped-icon > .icon-usage-badges,
html:root .icons-grid .scoped-icon > .sort-date {
  padding: 0 12px 8px;
  text-align: center;
}

html:root .icons-grid .icon-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 42px;
  padding: 6px 8px;
  border-top: 1px solid var(--scs-line-2);
  background: var(--scs-surface-2);
}

html:root .icons-grid .icon-actions > [data-scope-kind] {
  flex: 1;
  min-width: 0;
  padding: 4px 6px;
  overflow: hidden;
  border-color: transparent;
  background: transparent;
  color: var(--scs-ink-3);
  font-size: var(--scs-text-xs, 11px);
  text-align: left;
  text-overflow: ellipsis;
}

html:root .icons-grid .icon-actions > [data-scope-kind]:hover {
  border-color: var(--scs-line);
  background: var(--scs-surface);
  color: var(--scs-ink);
}

html:root .icon-card-action {
  display: inline-grid;
  flex: 0 0 30px;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border-color: transparent;
  background: transparent;
  color: var(--scs-ink-3);
}

html:root .icon-card-action:hover {
  border-color: var(--scs-line);
  background: var(--scs-surface);
  color: var(--scs-ink);
}

html:root .icon-card-action.danger:hover {
  border-color: var(--scs-danger-line);
  color: var(--scs-danger);
}

html:root .icon-card-action .scs-icon {
  width: 16px;
  height: 16px;
}

/* Accessory icons: preview, chosen icons as chips, a searchable list to add more. */
html:root .accessory-field {
  display: grid;
  gap: 10px;
  min-width: 0;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
}

html:root .accessory-field > legend {
  margin-bottom: 7px;
  padding: 0;
  color: var(--scs-ink-2);
  font-size: 12px;
}

html:root .accessory-body {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

html:root .accessory-preview {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  min-width: 92px;
  height: 64px;
  padding: 8px 12px;
  border: 1px solid var(--scs-line);
  border-radius: var(--scs-radius-m, 8px);
  background: var(--scs-surface-2);
}

html:root .accessory-preview-picture {
  display: flex;
  align-items: center;
  gap: 4px;
}

html:root .accessory-preview-base {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

html:root .accessory-preview-extra {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

html:root .accessory-preview-empty {
  width: 34px;
  height: 34px;
  border: 1px dashed var(--scs-line-strong);
  border-radius: var(--scs-radius-s);
}

html:root .accessory-current {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

html:root .accessory-chips {
  display: contents;
}

html:root .accessory-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 4px 0 8px;
  border: 1px solid var(--scs-line-strong);
  border-radius: 16px;
  background: var(--scs-surface);
  color: var(--scs-ink);
  font-size: 12px;
}

html:root .accessory-chip.is-unknown {
  border-color: var(--scs-danger-line);
  color: var(--scs-danger);
}

html:root .accessory-chip img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

html:root .accessory-remove {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--scs-ink-3);
}

html:root .accessory-remove:hover {
  background: var(--scs-surface-3);
  color: var(--scs-ink);
}

html:root .accessory-add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  font-size: 12px;
}

html:root .accessory-add[aria-expanded='true'] {
  border-color: var(--scs-focus);
}

html:root .accessory-mode {
  justify-self: start;
}

html:root .accessory-choices {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--scs-line);
  border-radius: var(--scs-radius-m, 8px);
  background: var(--scs-surface-2);
}

html:root .accessory-choices[hidden] {
  display: none;
}

html:root .accessory-search {
  width: 100%;
}

html:root .accessory-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 6px;
  max-height: 210px;
  overflow: auto;
  overscroll-behavior: contain;
}

html:root .accessory-options [role='option'] {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: 38px;
  padding: 0 8px;
  overflow: hidden;
  background: var(--scs-surface);
  font-size: 12px;
  text-align: left;
  text-overflow: ellipsis;
}

html:root .accessory-options [role='option'] img {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  object-fit: contain;
}

html:root .accessory-options [role='option'] span {
  overflow: hidden;
  text-overflow: ellipsis;
}

html:root .accessory-options [role='option'][aria-selected='true'] {
  border-color: var(--scs-accent);
  background: var(--scs-accent-soft);
  color: var(--scs-accent);
  font-weight: 600;
}

html:root .accessory-hint,
html:root #dialog-body .accessory-hint {
  margin: 0;
  color: var(--scs-ink-3);
  font-size: 11px;
}

html:root .accessory-empty {
  grid-column: 1 / -1;
  margin: 6px 0;
  color: var(--scs-ink-3);
  font-size: 12px;
}

/* Grid cell: the editor button shows the chosen accessory icons. */
html:root .grid .grid-editor-content {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

html:root .grid .grid-editor-content img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

html[data-theme='dark'] :is(.accessory-preview, .accessory-chip img, .accessory-options img, .grid-editor-content img) {
  background: var(--scs-ink);
  border-radius: 4px;
}

html:root #app .icons-grid .icon-card-action.danger:not(:hover) {
  border-color: transparent;
  background: transparent;
}

/* Iconify search in the icon dialogs (5.4). */
html:root .iconify-search {
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
}
html:root .iconify-search-row {
  display: flex;
  gap: 6px;
}
html:root .iconify-search-row input {
  flex: 1;
  min-width: 0;
}
html:root .iconify-search-all {
  font-size: var(--scs-text-s, 12px);
}
html:root .iconify-search-status {
  margin: 0;
  font-size: var(--scs-text-s, 12px);
  color: var(--scs-ink-2, inherit);
}
html:root .iconify-search-status:empty {
  display: none;
}
html:root .iconify-search-results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 6px;
  max-height: 272px;
  overflow: auto;
}
html:root .iconify-search-results:empty {
  display: none;
}
html:root .iconify-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
  padding: 8px 4px 6px;
  border: 1px solid var(--scs-line);
  border-radius: var(--scs-radius-s, 6px);
  background: var(--scs-surface);
  color: var(--scs-ink);
  font: inherit;
  cursor: pointer;
  white-space: normal;
  height: auto;
}
html:root .iconify-tile:hover {
  background: var(--scs-surface-2);
  border-color: var(--scs-line-strong);
}
html:root .iconify-tile[aria-selected='true'] {
  border-color: var(--scs-accent);
  box-shadow: 0 0 0 2px var(--scs-accent-soft);
  background: var(--scs-accent-soft);
}
html:root .iconify-symbol {
  width: 32px;
  height: 32px;
  margin-bottom: 2px;
  object-fit: contain;
}
html:root .iconify-mono {
  display: block;
  background: currentColor;
  -webkit-mask: var(--iconify-src) center / contain no-repeat;
  mask: var(--iconify-src) center / contain no-repeat;
}
html:root .iconify-name,
html:root .iconify-tile small {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}
html:root .iconify-tile small {
  color: var(--scs-ink-2, inherit);
  font-size: 10px;
}
html:root .iconify-licence,
html:root .iconify-existing {
  font-size: 10px;
  padding: 0 5px;
  border-radius: 8px;
  border: 1px solid var(--scs-line);
}
html:root .iconify-licence.is-free {
  color: var(--scs-ok, inherit);
  border-color: var(--scs-ok-line, var(--scs-line));
}
html:root .iconify-licence.is-attribution {
  color: var(--scs-accent-ink, inherit);
  border-color: var(--scs-accent-line, var(--scs-line));
}
html:root .iconify-licence.is-restricted,
html:root .iconify-licence.is-unknown {
  color: var(--scs-danger-ink, inherit);
  border-color: var(--scs-danger-line, var(--scs-line));
}
html:root .iconify-existing {
  background: var(--scs-surface-2);
}
html:root .iconify-search-pick {
  margin: 0;
  padding: 6px 8px;
  border-radius: var(--scs-radius-s, 6px);
  background: var(--scs-surface-2);
  font-size: var(--scs-text-s, 12px);
}

/* 6.0: Icons vorschlagen */
.icon-suggest-list {
  display: grid;
  gap: 4px;
  max-height: 52vh;
  overflow: auto;
}
.icon-suggest-row {
  display: grid;
  grid-template-columns: auto 56px 1fr;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: var(--scs-radius-s);
}
.icon-suggest-row:hover {
  background: var(--scs-row-hover);
}
.icon-suggest-row .icon-symbol {
  height: 32px;
  gap: 2px;
}
.icon-suggest-row .icon-symbol img {
  width: 28px;
  height: 28px;
}
.icon-suggest-row .icon-symbol img + img {
  width: 14px;
  height: 14px;
}
.icon-suggest-row span {
  display: grid;
}
.icon-suggest-row small {
  color: var(--scs-ink-2);
}
.icon-suggest-note {
  display: block;
  margin-top: 4px;
  color: var(--scs-ink-2);
}