/* Shared component layer, loaded last. Older stylesheets keep their layout
   rules; this file gives every control, dialog, table and panel the same
   calm shape and takes all colors from tokens.css. */

/* Older variable names resolve to tokens in both themes. */
html:root,
html:root[data-theme='dark'] {
  --navy: var(--scs-nav);
  --teal: var(--scs-accent);
  --line: var(--scs-line);
  --muted: var(--scs-ink-3);
  --text: var(--scs-ink);
  --panel: var(--scs-surface);
  --surface: var(--scs-surface);
  --border: var(--scs-line);
  --accent: var(--scs-accent);
  --button-bg: var(--scs-surface);
  --button-border: var(--scs-line-strong);
  --button-text: var(--scs-ink);
  --button-hover: var(--scs-surface-3);
  --button-hover-border: var(--scs-ink-3);
  --button-active: var(--scs-line-2);
  --button-focus: var(--scs-focus);
  --button-primary-bg: var(--scs-accent);
  --button-primary-hover: var(--scs-accent-hover);
  --toolbar-divider: var(--scs-line);
  --danger-text: var(--scs-danger);
  --danger-border: var(--scs-danger-line);
  --danger-bg: var(--scs-surface);
  --danger-hover: var(--scs-danger-soft);
  --danger-active: var(--scs-danger-soft);
  --danger-focus: var(--scs-danger);
  --page-bg: var(--scs-surface);
  --settings-surface: var(--scs-surface);
  font-family: var(--scs-font);
  color: var(--scs-ink);
  background: var(--scs-bg);
}

html:root body {
  background: var(--scs-bg);
  color: var(--scs-ink);
}

/* Buttons: secondary by default, one filled primary per view, danger only
   where something is removed. */
html:root
  button:where(
    :not(
      .brand,
      .section-link,
      .catalog-toggle,
      .home-card,
      .diagram-card,
      .home-template-card,
      .grid-sort,
      [role='tab']
    )
  ) {
  border-radius: var(--scs-radius-s);
  box-shadow: none;
}

html:root button.primary {
  background: var(--scs-accent);
  border-color: var(--scs-accent);
  color: var(--scs-accent-ink);
  font-weight: 600;
}

html:root button.primary:hover:not(:disabled) {
  background: var(--scs-accent-hover);
  border-color: var(--scs-accent-hover);
  color: var(--scs-accent-ink);
}

html:root button.danger {
  background: var(--scs-surface);
  border-color: var(--scs-danger-line);
  color: var(--scs-danger);
}

html:root button.danger:hover:not(:disabled) {
  background: var(--scs-danger-soft);
  border-color: var(--scs-danger);
  color: var(--scs-danger);
}

html:root button:disabled {
  opacity: 1;
  color: var(--scs-ink-disabled);
  background: var(--scs-surface-2);
  border-color: var(--scs-line);
  box-shadow: none;
}

html:root button.primary:disabled {
  color: var(--scs-ink-disabled);
  background: var(--scs-surface-3);
  border-color: var(--scs-line);
}

html:root :is(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--scs-focus);
  outline-offset: 1px;
}

/* Form controls */
html:root :is(input:not([type='checkbox'], [type='radio'], [type='color'], [type='range']), select, textarea) {
  border-color: var(--scs-line-strong);
  border-radius: var(--scs-radius-s);
  background-color: var(--scs-surface);
  color: var(--scs-ink);
}

/* Inline editors stay transparent; the navigation keeps its dark fields. */
html:root :is(.grid td, .project-heading, .search) :is(input, select) {
  background-color: transparent;
}

html:root .sidebar :is(input, select) {
  background-color: var(--scs-nav-2);
  border-color: var(--scs-nav-line);
  color: var(--scs-nav-ink);
}

html:root :is(input, select, textarea):focus {
  outline: 2px solid var(--scs-focus);
  outline-offset: -1px;
}

html:root :is(input, textarea)::placeholder {
  color: var(--scs-ink-3);
}

html:root input[type='checkbox'],
html:root input[type='radio'] {
  accent-color: var(--scs-accent);
}

/* Dialogs: plain surface, one header line, actions on the right. */
html:root dialog:not(.pro-editor-shell) {
  border: 1px solid var(--scs-line);
  border-radius: var(--scs-radius-l);
  background: var(--scs-surface);
  color: var(--scs-ink);
  box-shadow: var(--scs-shadow-pop);
}

html:root dialog::backdrop {
  background: var(--scs-overlay);
  backdrop-filter: none;
}

html:root .dialog-heading {
  padding: 14px 20px;
  border-bottom: 1px solid var(--scs-line);
}

html:root .dialog-heading h2 {
  font-size: var(--scs-text-l);
  font-weight: 650;
  letter-spacing: 0;
}

html:root .dialog-heading button {
  background: transparent;
  border-color: transparent;
  color: var(--scs-ink-3);
}

html:root .dialog-heading button:hover {
  background: var(--scs-surface-3);
  color: var(--scs-ink);
}

html:root #dialog-body {
  padding: 18px 20px;
}

html:root #dialog-body p {
  color: var(--scs-ink-2);
}

html:root .dialog-footer {
  padding: 12px 20px;
  background: var(--scs-surface-2);
  border-top: 1px solid var(--scs-line);
}

/* Choice lists inside dialogs read as rows, not as raised tiles. */
html:root .dialog-options button {
  background: var(--scs-surface);
  border-color: var(--scs-line);
  border-radius: var(--scs-radius-m);
  color: var(--scs-ink);
}

html:root .dialog-options button:hover:not(:disabled) {
  background: var(--scs-accent-soft);
  border-color: var(--scs-accent-line);
}

html:root .dialog-options button small {
  color: var(--scs-ink-3);
}

/* Application chrome */
html:root .topbar {
  background: var(--scs-surface);
  border-bottom-color: var(--scs-line);
}

html:root .eyebrow {
  color: var(--scs-ink-3);
  letter-spacing: 0.06em;
  font-weight: 600;
}

html:root h1 {
  color: var(--scs-ink);
  letter-spacing: -0.01em;
}

html:root #view-description {
  color: var(--scs-ink-2);
}

html:root :is(.editor-pane, .preview-pane) {
  background: var(--scs-surface);
  border-color: var(--scs-line);
  border-radius: var(--scs-radius-l);
  box-shadow: var(--scs-shadow-1);
}

/* Tables */
html:root .grid th {
  background: var(--scs-surface-2);
  color: var(--scs-ink-2);
  border-bottom-color: var(--scs-line);
  font-size: var(--scs-text-xs);
}

html:root .grid td {
  background: var(--scs-surface);
  border-color: var(--scs-line-2);
}

/* 4.4.6: alternating rows in every table, light and dark, so the eye stays in its row.
   Sticky row controls follow the row colour; selection and hover win over the stripe. */
html:root .grid tbody tr:nth-child(even) > td,
html:root
  :is(
    .function-table,
    .requirements-table,
    .trace-table,
    .explorer-table,
    .object-table,
    .object-relations-table,
    .object-usage-table,
    .custom-field-table,
    .search-results-table,
    .impact-table,
    .variant-table,
    .account-table,
    .catalog-table,
    .dashboard-table,
    .focus-table
  )
  > tbody
  > tr:nth-child(even)
  > td {
  background-color: var(--scs-row-alt);
}

html:root .grid tbody tr:hover > td,
html:root
  :is(
    .function-table,
    .requirements-table,
    .trace-table,
    .explorer-table,
    .object-table,
    .object-relations-table,
    .object-usage-table,
    .custom-field-table,
    .search-results-table,
    .impact-table,
    .variant-table,
    .account-table,
    .catalog-table,
    .dashboard-table,
    .focus-table
  )
  > tbody
  > tr:hover
  > td {
  background-color: var(--scs-row-hover);
}

html:root .grid td.row-control {
  background: var(--scs-surface-2);
  color: var(--scs-ink-3);
}

html:root .grid tbody tr:has(> td > .row-check:checked) > td,
html:root .grid tbody tr.catalog-target-row > td {
  background-color: var(--scs-accent-soft);
}

html:root .grid tbody tr > td.selected {
  background: var(--scs-accent-soft);
  box-shadow: inset 0 0 0 2px var(--scs-accent);
}

html:root .grid-footer {
  background: var(--scs-surface-2);
  border-top-color: var(--scs-line);
  color: var(--scs-ink-3);
}

/* Tabs */
html:root .tabs button.active {
  color: var(--scs-ink);
  border-bottom-color: var(--scs-accent);
}

html:root .tabs button span {
  background: var(--scs-surface-3);
  color: var(--scs-ink-2);
}

/* Notices (6.13). A quiet card in the corner instead of a dark bar across the middle: it says
   what just happened without covering the place one works in. Where it goes is decided in app.js
   (dodgeToast); here it gets its size, colours and the entrance. The coloured edge tells the kind:
   accent for a notice, danger for an error that stays until it is closed. */
html:root #toast {
  position: fixed;
  inset: auto;
  margin: 0;
  transform: none;
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  width: max-content;
  max-width: min(440px, calc(100vw - 32px));
  min-height: 40px;
  padding: 8px 6px 8px 14px;
  border: 1px solid var(--scs-line-strong);
  border-left: 3px solid var(--scs-accent);
  border-radius: var(--scs-radius-m);
  background: var(--scs-surface);
  color: var(--scs-ink);
  box-shadow: var(--scs-shadow-pop);
  font-size: var(--scs-text-m);
  line-height: 1.45;
  overflow-wrap: anywhere;
  z-index: 20;
}
html:root[data-theme='dark'] #toast {
  background: var(--scs-surface-2);
}
html:root #toast.error {
  border-left-color: var(--scs-danger);
  background: var(--scs-danger-soft);
  color: var(--scs-ink);
}
html:root #toast:popover-open {
  transition:
    opacity 0.14s ease-out,
    transform 0.14s ease-out;
}
@starting-style {
  html:root #toast:popover-open {
    opacity: 0;
    transform: translateY(6px);
  }
}
@media (prefers-reduced-motion: reduce) {
  html:root #toast:popover-open {
    transition: none;
  }
}
/* Actions (Rückgängig, Anzeigen …) follow the text, the close button always comes last. */
html:root #toast .toast-undo {
  order: 1;
  flex: none;
  margin: 0 0 0 4px;
  min-height: 0;
  padding: 4px 10px;
  border: 1px solid var(--scs-line-strong);
  border-radius: var(--scs-radius-s);
  background: transparent;
  color: var(--scs-accent-hover);
  font-size: var(--scs-text-s);
  font-weight: 600;
  line-height: 1.4;
}
html:root #toast .toast-undo:hover {
  border-color: var(--scs-accent);
  background: var(--scs-accent-soft);
}
html:root #toast .toast-close {
  order: 2;
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: var(--scs-radius-s);
  background: transparent;
  color: var(--scs-ink-3);
}
html:root #toast .toast-close::before {
  content: '×';
  font-size: 18px;
  line-height: 1;
}
html:root #toast .toast-close:hover {
  background: var(--scs-surface-3);
  color: var(--scs-ink);
}
html:root #toast :is(.toast-undo, .toast-close):focus-visible {
  outline: 2px solid var(--scs-focus);
  outline-offset: 1px;
}

/* Identifiers such as SYS-0003 or IF-ETH */
.scs-id {
  font-family: var(--scs-font-mono);
  font-size: var(--scs-text-xs);
  color: var(--scs-ink-2);
  background: var(--scs-surface-3);
  border: 1px solid var(--scs-line-2);
  border-radius: 3px;
  padding: 1px 5px;
  white-space: nowrap;
}

/* State pills */
.scs-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--scs-text-xs);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--scs-surface-3);
  color: var(--scs-ink-2);
  white-space: nowrap;
}

.scs-pill::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.scs-pill.is-ok {
  background: var(--scs-ok-soft);
  color: var(--scs-ok);
}

.scs-pill.is-warn {
  background: var(--scs-warn-soft);
  color: var(--scs-warn);
}

.scs-pill.is-danger {
  background: var(--scs-danger-soft);
  color: var(--scs-danger);
}

.scs-pill.is-accent {
  background: var(--scs-accent-soft);
  color: var(--scs-accent);
}

/* Extra footer actions sit on the left, apart from close and submit. */
html:root .dialog-footer [data-dialog-extra] {
  margin-right: auto;
}

/* A failed action is reported where the user is looking, next to its button. */
html:root #dialog-error {
  flex: 1 1 auto;
  margin: 0 auto 0 0;
  color: var(--scs-danger);
  font-size: var(--scs-text-s);
}

html:root #dialog-error[hidden] {
  display: none;
}

/* License & edition */
html:root .license-dialog #dialog-body {
  display: grid;
  gap: var(--scs-space-4);
}

.license-status {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--scs-space-3);
  align-items: center;
  padding: var(--scs-space-3) var(--scs-space-4);
  border: 1px solid var(--scs-line);
  border-radius: var(--scs-radius-m);
  background: var(--scs-surface-2);
}

.license-status strong {
  display: block;
  font-size: var(--scs-text-l);
}

html:root .license-status p {
  margin: 2px 0 0;
  font-size: var(--scs-text-s);
  color: var(--scs-ink-2);
}

.license-status-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--scs-line);
  border-radius: var(--scs-radius-m);
  background: var(--scs-surface);
  color: var(--scs-accent);
}

.license-status-icon svg {
  width: 20px;
  height: 20px;
}

:is(.license-features, .license-details) {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--scs-text-s);
}

:is(.license-features, .license-details) :is(th, td) {
  padding: 6px 8px;
  border-bottom: 1px solid var(--scs-line-2);
  text-align: left;
  font-weight: 400;
}

.license-features thead th {
  font-weight: 600;
  color: var(--scs-ink-2);
  border-bottom-color: var(--scs-line);
}

.license-features :is(thead th, td):not(:first-child) {
  text-align: center;
  width: 64px;
}

.license-features tbody th strong {
  display: block;
  font-weight: 600;
}

.license-features tbody th small {
  display: block;
  color: var(--scs-ink-2);
}

.license-yes {
  color: var(--scs-ok);
  font-weight: 700;
}

.license-no {
  color: var(--scs-ink-3);
}

.license-details th {
  color: var(--scs-ink-3);
  width: 34%;
  white-space: nowrap;
}

.license-section {
  display: grid;
  gap: var(--scs-space-2);
}

.license-section h3 {
  margin: 0;
  font-size: var(--scs-text-m);
}

.license-section > button:not(.license-drop) {
  justify-self: start;
}

html:root button.license-drop {
  display: grid;
  gap: 2px;
  text-align: left;
  white-space: normal;
  padding: var(--scs-space-3);
  border: 1.5px dashed var(--scs-line-strong);
  border-radius: var(--scs-radius-m);
  background: var(--scs-surface);
  color: var(--scs-accent);
  font-weight: 600;
}

html:root button.license-drop small {
  color: var(--scs-ink-3);
  font-weight: 400;
}

html:root button.license-drop.has-file {
  border-style: solid;
  border-color: var(--scs-accent-line);
  background: var(--scs-accent-soft);
}

.license-users {
  display: flex;
  flex-wrap: wrap;
  gap: var(--scs-space-2) var(--scs-space-4);
}

.license-users label {
  display: flex;
  gap: 6px;
  align-items: center;
}

.license-seat-count {
  margin: 0;
  font-size: var(--scs-text-s);
  color: var(--scs-ink-2);
}

.license-seat-count.is-full {
  color: var(--scs-warn);
}

.license-danger {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding: var(--scs-space-3) var(--scs-space-4);
  border: 1px solid var(--scs-danger-line);
  border-radius: var(--scs-radius-m);
}

.license-danger small {
  display: block;
  color: var(--scs-ink-3);
}

.license-note {
  color: var(--scs-ink-3);
  font-size: var(--scs-text-s);
}

/* 6.12: the grid gap spaces the dialog; paragraphs add no margin of their own,
   and short column headings ("Pour vous") stay on one line. */
html:root .license-dialog #dialog-body > p {
  margin: 0;
}

.license-features thead th {
  white-space: nowrap;
}

/* 4.4.6: a new, incomplete row is a draft until its required fields are set. */
html:root .grid tbody tr.draft-row > td {
  background-color: var(--scs-warn-soft);
  border-top: 1px dashed var(--scs-warn-line);
  border-bottom: 1px dashed var(--scs-warn-line);
}

/* 4.8.0: catalog instances sit indented under their base system (ISLAND → ISLAND Fwd). */
.grid tbody tr.system-instance-row > td:has([data-field='Name']) {
  padding-left: 22px;
}
/* 5.4.1: a frozen name cell stays sticky (it holds the ↳ itself); position: relative here
   moved it by its left offset over Posttag and let it scroll away. */
.grid tbody tr.system-instance-row > td:has([data-field='Name']):not(.grid-pinned) {
  position: relative;
}
.grid tbody tr.system-instance-row > td:has([data-field='Name'])::before {
  content: '↳';
  position: absolute;
  left: 7px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--scs-ink-3, var(--scs-ink-2));
  font-size: 12px;
  pointer-events: none;
}
.grid tbody tr.system-base-row [data-field='Name'] {
  font-weight: 600;
}

/* 5.1.0: element hidden in this diagram only. */
.grid tbody tr.element-hidden-row > td {
  opacity: 0.55;
}

/* 5.2: fill handle like a spreadsheet. The square sits on the bottom right corner of the
   selected cells; dragging it marks the rows it will fill with a dashed frame. */
html:root .grid td .grid-fill-handle {
  position: absolute;
  right: -4px;
  bottom: -4px;
  z-index: 3;
  width: 9px;
  height: 9px;
  border: 1.5px solid var(--scs-surface);
  border-radius: 2px;
  background: var(--scs-focus);
  cursor: crosshair;
  box-sizing: border-box;
}
html:root .grid td .grid-fill-handle:hover {
  transform: scale(1.25);
}
html:root .grid td.fill-preview {
  box-shadow: inset 0 0 0 1.5px var(--scs-focus);
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0 6px,
    color-mix(in srgb, var(--scs-focus) 10%, transparent) 6px 8px
  );
}
html:root .grid-filling,
html:root .grid-filling * {
  cursor: crosshair;
  user-select: none;
}

/* 5.4: frozen columns like in a spreadsheet. The columns that name the row (catalog: ID and
   system name, diagram tables: the first column) stay at the left while the table scrolls
   sideways; StudioGrid sets their left offset. They keep the row colour so nothing shows
   through, and the last one casts a soft edge while the table is scrolled. */
html:root .grid :is(th, td).grid-pinned {
  position: sticky;
}
html:root .grid th.grid-pinned {
  z-index: 4;
}
html:root .grid td.grid-pinned {
  z-index: 2;
}
html:root .grid td.grid-pinned:has(.grid-fill-handle),
html:root .grid td.grid-pinned:focus-within {
  z-index: 3;
}
html:root .grid :is(th, td).grid-pinned-last::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: -1px;
  right: -8px;
  width: 8px;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(to right, color-mix(in srgb, var(--scs-ink) 12%, transparent), transparent);
  transition: opacity 0.15s;
}
html:root .grid-scrolled-x .grid :is(th, td).grid-pinned-last::after {
  opacity: 1;
}
html:root .grid-scrolled-x .grid :is(th, td).grid-pinned-last {
  border-right-color: var(--scs-line);
}
/* A hidden element dims its content, not the frozen cell, which must stay opaque. */
.grid tbody tr.element-hidden-row > td.grid-pinned {
  opacity: 1;
}
.grid tbody tr.element-hidden-row > td.grid-pinned > * {
  opacity: 0.55;
}

/* 5.4.4 Alle Diagramme als Bilder: format cards, types, live count. */
.image-export-formats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
.image-export-formats > label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--scs-line);
  border-radius: var(--scs-radius-m);
  background: var(--scs-surface);
  cursor: pointer;
}
.image-export-formats > label:has(input:checked) {
  border-color: var(--scs-accent);
  background: var(--scs-accent-soft);
}
.image-export-formats input[type='radio'] {
  appearance: auto;
  -webkit-appearance: radio;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  min-height: 0;
  margin: 3px 0 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  accent-color: var(--scs-accent);
}
.image-export-formats small {
  display: block;
  margin-top: 3px;
  color: var(--scs-ink-2, var(--scs-ink));
  opacity: 0.8;
  line-height: 1.35;
}
.image-export-badge {
  font-style: normal;
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--scs-accent);
  color: var(--scs-accent-ink);
  margin-left: 4px;
  vertical-align: 1px;
}
.image-export-types {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 0 0 10px;
}
.image-export-types label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.image-export-count {
  margin: 12px 0 4px;
}

/* 6.0: confirmation dialog (studioConfirm in app.js) replaces the browser's confirm(). */
dialog.studio-confirm {
  max-width: 440px;
  border: 1px solid var(--scs-line);
  border-radius: 10px;
  padding: 20px 22px 16px;
  background: var(--scs-surface);
  color: var(--scs-ink);
  box-shadow: var(--scs-shadow-pop);
}
dialog.studio-confirm::backdrop {
  background: var(--scs-overlay);
}
dialog.studio-confirm p {
  margin: 0 0 18px;
  line-height: 1.55;
}
.studio-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* 6.0: one table look for all catalogs. Cells end in an ellipsis and show the
   full value as tooltip (app.js); example placeholders ("z. B. BK-1") appear
   only while typing so they never look like stored values; the row number
   stands beside its checkbox. */
html:root .grid td .id-chip {
  display: inline-block;
  max-width: calc(100% - 16px);
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 18px;
  vertical-align: middle;
}
html:root .grid td input:not([type='checkbox']):not(:focus) {
  text-overflow: ellipsis;
}
html:root .grid td input.placeholder-on-focus:not(:focus)::placeholder {
  color: transparent;
}
html:root .grid td.row-control {
  white-space: nowrap;
}
html:root .grid td.row-control .row-check {
  display: inline-block;
  margin: 0 4px 0 0;
}
html:root .grid td.row-control .drag-handle {
  display: inline-block;
  min-width: 2.2em;
  text-align: left;
  vertical-align: middle;
}

/* 6.0: project cards on the start page keep their card width; a single project no
   longer stretches over the whole page (auto-fit collapsed the empty tracks). */
html:root .home-cards:has(> .project-card) {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}

/* 6.0: suggestion lists (interface types, functions) */
.suggest-list {
  display: grid;
  gap: 4px;
  max-height: 52vh;
  overflow: auto;
}
.suggest-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: var(--scs-radius-s);
}
.suggest-row:hover {
  background: var(--scs-row-hover);
}
.suggest-row > span {
  display: grid;
  gap: 2px;
}
.suggest-row small {
  color: var(--scs-ink-2);
}
.suggest-row input:not([type='checkbox']) {
  width: 100%;
}
.grid td select.value-suggested {
  font-style: italic;
}

/* 6.0: grouped findings in the Prüfzentrum */
.quality-group {
  border: 1px solid var(--scs-line);
  border-radius: var(--scs-radius-m);
  padding: 8px 12px;
  background: var(--scs-surface);
}
.quality-group > summary {
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  font-weight: 600;
}
.quality-group > summary small {
  flex-basis: 100%;
  font-weight: 400;
  color: var(--scs-ink-3);
}
.quality-group[open] > summary {
  margin-bottom: 10px;
}
.quality-group .quality-finding + .quality-finding {
  margin-top: 8px;
}
.quality-group-count {
  color: var(--scs-accent);
}

/* 6.1: groups in every catalog and in the diagram menu (groups.js) */
.group-chip {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--scs-accent-soft);
  color: var(--scs-accent);
  font-size: var(--scs-text-xs);
  line-height: 1.5;
  vertical-align: middle;
}
.group-chip.none {
  background: transparent;
  border-color: var(--scs-line);
  color: var(--scs-ink-3);
}
.grid-group-row td,
.group-row td,
html:root .grid .grid-group-row td {
  height: auto;
  padding: 4px 8px;
  background: var(--scs-surface-2);
  border-top: 1px solid var(--scs-line-strong);
  position: sticky;
  left: 0;
}
.group-toggle,
html:root .group-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: none;
  padding: 2px 4px;
  min-height: 0;
  font-weight: 600;
  color: var(--scs-ink);
  cursor: pointer;
}
.group-toggle + small {
  color: var(--scs-ink-3);
  margin: 0 6px 0 2px;
  font-variant-numeric: tabular-nums;
}
.group-edit,
html:root .group-edit {
  border: 0;
  background: none;
  padding: 0 4px;
  min-height: 0;
  color: var(--scs-ink-3);
  cursor: pointer;
}
.group-edit:hover {
  color: var(--scs-accent);
}
.group-section + .group-section {
  margin-top: 14px;
}
.group-heading {
  display: flex;
  align-items: center;
  margin: 0 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--scs-line);
}
.group-choices {
  display: grid;
  gap: 4px;
}
.group-choice {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border: 1px solid var(--scs-line);
  border-radius: var(--scs-radius-s);
}
.group-choice small {
  margin-left: auto;
  color: var(--scs-ink-3);
}
.group-choice:has(input:checked) {
  border-color: var(--scs-accent);
  background: var(--scs-accent-soft);
}
#group-new-name {
  margin: 0 0 4px 30px;
}
.group-window {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
  min-height: 320px;
  border: 1px solid var(--scs-line);
  border-radius: var(--scs-radius-m);
  overflow: hidden;
}
@media (max-width: 640px) {
  .group-window {
    grid-template-columns: 1fr;
  }
}
.group-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px;
  background: var(--scs-surface-2);
  border-right: 1px solid var(--scs-line);
  max-height: 55vh;
  overflow: auto;
}
.group-item,
html:root .group-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: var(--scs-radius-s);
  background: none;
  color: var(--scs-ink);
  min-height: 0;
}
.group-item:hover {
  background: var(--scs-row-hover);
}
.group-item.active,
html:root .group-item.active {
  border-color: var(--scs-accent);
  background: var(--scs-surface);
  font-weight: 600;
}
.group-item small {
  color: var(--scs-ink-3);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.group-item input {
  width: 100%;
}
.group-new {
  display: grid;
  gap: 4px;
  margin-top: 6px;
}
.group-item-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--scs-line);
}
.group-members {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  min-width: 0;
}
.group-member-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.group-member-tools input[type='search'] {
  flex: 1;
  min-width: 160px;
}
.group-member-list {
  max-height: 46vh;
  overflow: auto;
}
.group-member {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 4px;
  border-bottom: 1px solid var(--scs-line);
}
.group-member > span:first-of-type {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.group-member .group-chip {
  margin-left: auto;
  flex: none;
  max-width: 45%;
}
.group-context-menu {
  position: fixed;
  z-index: 1000;
  display: grid;
  gap: 1px;
  min-width: 200px;
  max-width: 300px;
  padding: 6px;
  border: 1px solid var(--scs-line);
  border-radius: var(--scs-radius-m);
  background: var(--scs-surface);
  color: var(--scs-ink);
  box-shadow: var(--scs-shadow-pop);
}
.group-context-menu button,
html:root .group-context-menu button {
  justify-content: flex-start;
  text-align: left;
  border: 0;
  background: none;
  padding: 5px 8px;
  min-height: 0;
  color: var(--scs-ink);
}
.group-context-menu button:hover,
.group-context-menu button:focus-visible {
  background: var(--scs-accent-soft);
}
.group-context-title {
  padding: 4px 8px;
  font-size: var(--scs-text-xs);
  color: var(--scs-ink-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.group-context-menu hr {
  width: 100%;
  border: 0;
  border-top: 1px solid var(--scs-line);
  margin: 3px 0;
}
.diagram-group.drop-target > summary,
.diagram-drop-target {
  outline: 2px dashed var(--scs-accent);
  outline-offset: -2px;
}
html:root .req-group {
  display: inline-flex;
  max-width: 100%;
  min-height: 0;
  padding: 2px;
  border: 1px solid transparent;
  border-radius: var(--scs-radius-s);
  background: none;
  cursor: pointer;
}
html:root .req-group:hover,
html:root .req-group:focus-visible {
  border-color: var(--scs-line);
}
.dashboard-list-actions {
  display: inline-flex;
  gap: 6px;
}
/* The pencil in a menu group heading stays a small inline button, also in the chain list. */
#chain-list .diagram-group > summary .group-edit,
.sidebar .diagram-group > summary .group-edit {
  display: inline;
  width: auto;
  margin: 0 0 0 6px;
  padding: 0 6px;
}

/* 6.13: page navigation under long lists (250 rows per page). Stays visible at the bottom
   left of the scrolling table so the next page is one click away. */
html:root .grid-pager {
  position: sticky;
  left: 0;
  bottom: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  max-width: 100%;
  margin: 8px 0 0;
  padding: 6px 10px;
  border: 1px solid var(--scs-line);
  border-radius: 8px;
  background: var(--scs-surface);
  color: var(--scs-ink-2);
  font-size: 13px;
  box-shadow: 0 2px 8px rgb(0 0 0 / 8%);
}
html:root .grid-pager button {
  min-width: 30px;
  padding: 3px 8px;
  line-height: 1.3;
}
html:root .grid-pager .grid-pager-page {
  padding: 0 6px;
  color: var(--scs-ink);
  font-weight: 600;
}
html:root .grid-pager .grid-pager-rows {
  padding-left: 8px;
  border-left: 1px solid var(--scs-line);
  color: var(--scs-ink-3);
}