/* Diagram page: one row of four content tabs, the views of the active tab below it,
   and the appearance settings as an inspector to the right of the diagram. */
#app #tabs.tabs {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0;
  height: auto;
  min-height: 0;
  padding: 0 12px 0 16px;
}

.editor-tabs-primary {
  display: flex;
  align-items: stretch;
  gap: 4px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

#app #tabs .editor-tabs-primary [role='tab'] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  height: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0 10px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--scs-ink-2);
  font-size: var(--scs-text-m);
  font-weight: 500;
  box-shadow: none;
}

#app #tabs .editor-tabs-primary [role='tab']:hover {
  background: transparent;
  color: var(--scs-ink);
}

#app #tabs .editor-tabs-primary [role='tab'].active {
  background: transparent;
  box-shadow: none;
  border-bottom-color: var(--scs-accent);
  color: var(--scs-ink);
  font-weight: 600;
}

#app #tabs .editor-tabs-primary [role='tab'] span:not(.tab-label) {
  margin: 0;
  padding: 1px 6px;
  border-radius: 8px;
  background: var(--scs-surface-3);
  color: var(--scs-ink-3);
  font-size: var(--scs-text-xs);
  font-weight: 500;
}

/* The table controls stay level with the first row when the views row is shown. */
#app .editor-heading {
  align-items: flex-start;
  container-type: inline-size;
}

#app .editor-heading > #toggle-editor-layout,
#app .editor-heading > #expand-table {
  margin-top: 6px;
}

#app.stacked-editor #tabs.tabs {
  height: auto;
}

/* "Darstellung" sits apart at the end of the row. */
#app #tabs .editor-tabs-primary .editor-inspector-toggle {
  margin-left: auto;
  color: var(--scs-ink-2);
}

#app #tabs .editor-tabs-primary .editor-inspector-toggle svg {
  width: 16px;
  height: 16px;
}

#app #tabs .editor-tabs-primary .editor-inspector-toggle .tab-label {
  margin: 0;
  padding: 0;
  background: none;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

/* Narrow editor panes keep every tab reachable: secondary labels give way to their icons. */
/* 6.12: the tabs carry counts on every list, so the layout toggle drops its word earlier. */
@container (max-width: 760px) {
  #app .editor-heading .editor-layout-toggle span {
    display: none;
  }
}

/* 6.5: "Darstellung" keeps its word as long as the tabs fit; a bare sliders icon was not understood.
   6.12: below 620px the counted tabs need the room, otherwise the word was cut off. */
@container (max-width: 620px) {
  #app:not(.inspector-mode) #tabs .editor-tabs-primary .editor-inspector-toggle .tab-label {
    display: none;
  }
}

@container (max-width: 600px) {
  #app #tabs .editor-tabs-primary [role='tab'] span:not(.tab-label) {
    display: none;
  }
}

/* Views of the active tab as a small segmented control. */
#app #tabs .editor-subtabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 8px 0 10px;
}

#app #tabs .editor-subtabs[hidden] {
  display: none;
}

#app #tabs .editor-subtabs > [data-tab]:not(.is-shown),
#app #tabs .editor-subtabs > [data-subtab]:not(.is-shown) {
  display: none;
}

#app #tabs .editor-subtabs > :is([data-tab], [data-subtab]) {
  height: 28px;
  min-height: 28px;
  margin: 0;
  padding: 0 10px;
  border: 1px solid var(--scs-line);
  border-radius: var(--scs-radius-s);
  background: var(--scs-surface);
  color: var(--scs-ink-2);
  font-size: var(--scs-text-s);
  font-weight: 500;
  box-shadow: none;
}

#app #tabs .editor-subtabs > :is([data-tab], [data-subtab]):hover {
  border-color: var(--scs-line-strong);
  color: var(--scs-ink);
}

#app #tabs .editor-subtabs > :is([data-tab], [data-subtab]).active {
  border-color: var(--scs-accent-line);
  background: var(--scs-accent-soft);
  color: var(--scs-ink);
  font-weight: 600;
}

/* 6.12: list views name their size with the same quiet pill as the tabs above. */
#app #tabs .editor-subtabs > :is([data-tab], [data-subtab]).is-shown:not([hidden]) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#app #tabs .editor-subtabs > :is([data-tab], [data-subtab]) .tab-count {
  min-width: 0;
  margin: 0;
  padding: 1px 6px;
  border-radius: 8px;
  background: var(--scs-surface-3);
  color: var(--scs-ink-3);
  font-size: var(--scs-text-xs);
  font-weight: 500;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}

#app #tabs .editor-subtabs > :is([data-tab], [data-subtab]).active .tab-count {
  background: var(--scs-surface);
  color: var(--scs-ink-2);
}

#app #tabs .editor-subtabs .tab-count:empty {
  display: none;
}

/* Inspector: the appearance forms open in the editor pane. Editor and diagram keep their side and
   width (4.7.1: swapping them confused users); the tabs drop their counts to stay on one line. */
#app.inspector-mode .editor-heading #toggle-editor-layout,
#app.inspector-mode .editor-heading #expand-table,
#app.inspector-mode .editor-pane .table-tools,
#app.inspector-mode .editor-pane .table-toolbar:not(:has(#table-actions > *)),
#app.inspector-mode #tabs .editor-tabs-primary [role='tab'] span:not(.tab-label) {
  display: none;
}

#app.inspector-mode #tabs .editor-tabs-primary [role='tab'] {
  padding: 0 7px;
  font-size: var(--scs-text-s);
}

#app.inspector-mode #tabs .editor-tabs-primary .editor-inspector-toggle .tab-label {
  display: inline;
}

/* In the narrow inspector, forms stack into one column. */
#app.inspector-mode .layout-form {
  grid-template-columns: 1fr;
  padding: 16px;
}

/* Relations tab: the cards and the relation table of the object pages, grouped by the
   diagram's own elements (relation_table.js). */
.relation-page {
  display: grid;
  gap: var(--scs-space-4);
  align-content: start;
  padding: var(--scs-space-4);
  container-type: inline-size;
}

.relation-groups .relation-group th {
  padding: 10px 12px 6px;
  border-top: 1px solid var(--scs-line);
  border-bottom: 0;
  background: var(--scs-surface-2);
  color: var(--scs-ink);
  font-size: var(--scs-text-m);
  font-weight: 600;
}

.relation-groups tbody:first-of-type .relation-group th {
  border-top: 0;
}

.relation-groups .relation-group th > * {
  vertical-align: baseline;
}

.relation-groups .relation-group small {
  display: inline;
  margin-left: var(--scs-space-2);
  color: var(--scs-ink-3);
  font-size: var(--scs-text-xs);
  font-weight: 400;
}

.relation-groups .relation-group .object-count {
  display: inline-block;
  margin-left: var(--scs-space-2);
}

/* Hyperlinks: the same card; each link is a row of the card instead of a box of its own. */
html:root .hyperlinks-page .hyperlinks-hint {
  margin: var(--scs-space-3) var(--scs-space-4) var(--scs-space-2);
  color: var(--scs-ink-3);
  font-size: var(--scs-text-s);
}

html:root .hyperlinks-page .hyperlinks-empty {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: var(--scs-space-2) var(--scs-space-4) var(--scs-space-3);
  color: var(--scs-ink-3);
  font-size: var(--scs-text-s);
}

html:root .hyperlinks-page .hyperlinks-empty strong {
  color: var(--scs-ink);
  font-weight: 600;
}

html:root .hyperlinks-page .hyperlink-list {
  gap: 0;
  margin: 0;
}

html:root .hyperlinks-page .hyperlink-row {
  padding: 10px var(--scs-space-4);
  border: 0;
  border-bottom: 1px solid var(--scs-line-2);
  border-radius: 0;
}

html:root .hyperlinks-page .hyperlink-row:last-child {
  border-bottom: 0;
}

html:root .relation-page .architecture-tools {
  margin: 0;
  padding: 0;
  border-color: var(--scs-line);
  border-radius: var(--scs-radius-l);
}

html:root .relation-page .architecture-tools > header {
  justify-content: flex-start;
  margin: 0;
}

html:root .relation-page .architecture-tools > .version-actions {
  margin: var(--scs-space-3) var(--scs-space-4) 0;
}

html:root .relation-page .architecture-tools > small {
  margin: var(--scs-space-2) var(--scs-space-4) var(--scs-space-3);
  font-size: var(--scs-text-xs);
}

/* Next to the preview, and in the right column of the traceability explorer and pane, the
   table has little room: each relation becomes two lines, role, ID, status and edit button
   above, the target below, with no sideways scrolling. Relation tables carry .relation-rows. */
@container (max-width: 720px) {
  .relation-rows,
  .relation-rows tbody {
    display: block;
  }

  .relation-rows thead {
    display: none;
  }

  .relation-rows .relation-group,
  .relation-rows .relation-group th {
    display: block;
  }

  .relation-rows tr:not(.relation-group) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    align-items: center;
    column-gap: var(--scs-space-2);
    padding: 8px 12px;
    border-bottom: 1px solid var(--scs-line-2);
  }

  .relation-rows tbody tr:not(.relation-group):last-child {
    border-bottom: 0;
  }

  .relation-rows tr:not(.relation-group) > td {
    padding: 0;
    border: 0;
  }

  .relation-rows tr:not(.relation-group) > td:nth-child(2) {
    grid-row: 2;
    grid-column: 1 / -1;
    padding-top: 4px;
  }

  .relation-rows tr:not(.relation-group) > td.object-row-actions {
    width: auto;
  }

  /* "im Diagramm" stands for a missing ID; on two lines the target says it already. */
  .relation-rows tr:not(.relation-group) > td:nth-child(3) > .muted {
    display: none;
  }
}

/* 6.9 audit: every main editor tab carries a symbol like "Darstellung" (same shapes as icons.js).
   Drawn as a mask so the label text nodes that app.js rewrites stay untouched. */
#app #tabs .editor-tabs-primary [role='tab'][data-tab]:not(.editor-inspector-toggle)::before {
  content: '';
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: var(--tab-symbol) center / 16px 16px no-repeat;
  mask: var(--tab-symbol) center / 16px 16px no-repeat;
}
#app #tabs [data-tab='nodes'] {
  --tab-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8a2 2 0 0 0-1-1.7l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.7l7 4a2 2 0 0 0 2 0l7-4a2 2 0 0 0 1-1.7z'/%3E%3Cpath d='M3.3 7 12 12l8.7-5M12 22V12'/%3E%3C/svg%3E");
}
#app #tabs [data-tab='connections'] {
  --tab-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16 3 4 4-4 4'/%3E%3Cpath d='M20 7H4'/%3E%3Cpath d='m8 21-4-4 4-4'/%3E%3Cpath d='M4 17h16'/%3E%3C/svg%3E");
}
#app #tabs [data-tab='relations'] {
  --tab-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='18' r='3'/%3E%3Ccircle cx='6' cy='6' r='3'/%3E%3Ccircle cx='18' cy='6' r='3'/%3E%3Cpath d='M18 9v2c0 .6-.4 1-1 1H7c-.6 0-1-.4-1-1V9M12 12v3'/%3E%3C/svg%3E");
}
#app #tabs [data-tab='notes'] {
  --tab-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2' width='16' height='20' rx='2'/%3E%3Cpath d='M2 6h4M2 10h4M2 14h4M2 18h4M9 7h7M9 11h7'/%3E%3C/svg%3E");
}
#app
  #tabs
  .editor-tabs-primary
  [role='tab'][data-tab]:not([data-tab='nodes']):not([data-tab='connections']):not([data-tab='relations']):not(
    [data-tab='notes']
  )::before {
  content: none;
}