/* ux_unified.css (6.5): one visual language for catalogs, libraries, templates and menus.
   Principle (Daniel 2026-11-07): colour is welcome. Every card uses the same recipe as the
   diagram cards of 6.4: a soft diagonal tint, a 3px top edge in the card's colour, one radius,
   a light shadow. Diagram and template cards keep their kind colour; library cards (domains,
   interfaces, notes) use petrol, sketches ochre, mind maps teal.
   Loaded last; html:root raises specificity above themes.css without !important. */

/* ---------- 1. One card: tint + top edge ------------------------------------------------- */
html:root :is(.domain-card, .note-card, .sketch-card) {
  --card-accent: #117782;
  --card-tint: #e3f3f3;
  --card-surface: #f7fbfc;
  --card-border: #bcdadd;
  border: 1px solid var(--card-border);
  border-top: 3px solid var(--card-accent);
  border-radius: 11px;
  background: linear-gradient(135deg, var(--card-tint), var(--card-surface) 65%);
  box-shadow: 0 3px 10px #18384f08;
  transition: border-color .16s, box-shadow .16s;
}
html:root :is(.domain-card, .note-card, .sketch-card):hover {
  border-color: var(--card-accent);
  box-shadow: 0 7px 20px #18384f16;
}
/* Notes: graphite like the project cards; sketches ochre; mind maps teal. */
html:root .note-card { --card-accent: #656a70; --card-tint: #eceef0; --card-surface: #f8f9fa; --card-border: #d3d7db; }
html:root .sketch-card { --card-accent: #ab8035; --card-tint: #fcf0d7; --card-surface: #fffcf6; --card-border: #e8d8b7; }
html:root .sketch-card.mindmap-card { --card-accent: var(--scs-label-teal); --card-tint: #e3f3f3; --card-surface: #f7fbfc; --card-border: #bcdadd; }
html:root .domain-card > .color-swatch { box-shadow: 0 0 0 3px #ffffffb3; }
html[data-theme=dark] :is(.domain-card, .note-card, .sketch-card) {
  --card-tint: #204752; --card-surface: #1b303e; --card-border: #3c6570;
}
html:root .template-card { padding: 14px 16px; border-radius: 11px; }
html:root .template-card h2 { margin-top: 10px; }
html:root .template-card-type .ux-act { margin-left: 2px; }

/* Card text never leaves its card. */
html:root .sketch-card .sketch-open :is(strong, h3) {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- 2. One row action ------------------------------------------------------------- */
html:root .ux-acts {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  margin-left: auto;
}
html:root :is(#app, #dialog) button.ux-act {
  display: inline-grid;
  place-items: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--scs-radius-s);
  background: transparent;
  color: var(--scs-ink-3);
  box-shadow: none;
}
html:root :is(#app, #dialog) button.ux-act:hover {
  background: var(--scs-surface-3);
  border-color: var(--scs-line);
  color: var(--scs-ink);
}
html:root :is(#app, #dialog) button.ux-act.danger:hover {
  background: var(--scs-danger-soft);
  border-color: var(--scs-danger-line);
  color: var(--scs-danger);
}
html:root :is(#app, #dialog) button.ux-act:focus-visible {
  outline: 2px solid var(--scs-focus);
  outline-offset: 1px;
}
html:root :is(#app, #dialog) button.ux-act .scs-icon,
html:root :is(#app, #dialog) button.ux-act svg { width: 16px; height: 16px; }
html:root .domain-card { padding: 14px 16px; gap: 12px; }
html:root .domain-card > .ux-acts { align-self: flex-start; }
html:root .note-card { padding: 16px; }

/* ---------- 3. Template gallery: the same card, chosen with a radio ------------------------ */
html:root .template-gallery {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: 10px;
}
html:root label.template-choice.template-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  cursor: pointer;
  border-radius: 11px;
}
html:root label.template-choice .template-card-type {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--card-accent, var(--scs-ink-3));
  font-size: 11px;
}
html:root label.template-choice .template-card-type > span { color: var(--scs-ink-3); }
html:root label.template-choice .template-card-type .navigation-icon { width: 20px; height: 20px; }
html:root label.template-choice .template-card-type input { margin: 0 0 0 auto; }
html:root label.template-choice strong { font-size: 14px; line-height: 1.4; color: var(--scs-ink); }
html:root label.template-choice small { margin-top: 4px; line-height: 1.5; }
html:root label.template-choice:has(input:checked) {
  background: linear-gradient(135deg, var(--card-tint), var(--card-surface) 65%);
  border-color: var(--card-accent, var(--scs-accent));
  box-shadow: 0 0 0 1px var(--card-accent, var(--scs-accent)), 0 7px 20px #18384f16;
}

/* ---------- 4. Menus: Projektaktionen uses the shared studio-menu list ----------------- */
html:root .dashboard-tools-menu.studio-menu {
  position: absolute;
  inset: auto;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
html:root .dashboard-project-tools:not([open]) > .dashboard-tools-menu.studio-menu { display: none; }
html:root .dashboard-tools-menu.studio-menu button {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}
html:root .dashboard-tools-menu.studio-menu button:hover:not(:disabled) { background: var(--scs-surface-3); }

/* ---------- 5. Option dialogs: text wraps inside its option -------------------------------- */
html:root .dialog-options button,
html:root .dialog-options button small {
  white-space: normal;
  overflow-wrap: anywhere;
  min-width: 0;
}
html:root .dialog-options button { height: auto; }

/* ---------- 6. Editor tab bar: labels are never cut ---------------------------------------- */
html:root #app #tabs { overflow-x: auto; scrollbar-width: thin; }
html:root #app #tabs button[role=tab] { min-width: max-content; }

/* ---------- 7. Filter panel (Systemkatalog): one button, the filters as a toolbar row -------- */
html:root #app #table-actions > button.ux-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--scs-control-h);
  min-height: var(--scs-control-h);
  padding: 0 10px;
}
html:root #app #table-actions > button.ux-filter-toggle::after {
  content: '▾';
  font-size: 10px;
  color: var(--scs-ink-3);
}
html:root #app #table-actions > button.ux-filter-toggle[aria-expanded=true]::after { content: '▴'; }
html:root #app #table-actions > button.ux-filter-toggle[data-active] {
  border-color: var(--scs-accent);
  color: var(--scs-accent);
}
html:root .ux-filter-count {
  min-width: 18px;
  padding: 1px 5px;
  border-radius: 9px;
  background: var(--scs-accent);
  color: var(--scs-accent-ink, #fff);
  font-size: 10px;
  line-height: 1.4;
  text-align: center;
}
html:root .ux-filter-count:empty { display: none; }
html:root .table-toolbar > .ux-filter-panel {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 0 0 4px;
  padding: 10px 12px;
  background: var(--scs-surface-2);
  border: 1px solid var(--scs-line);
  border-radius: var(--scs-radius-m);
}
html:root .table-toolbar > .ux-filter-panel[hidden] { display: none; }
html:root .ux-filter-panel > label.catalog-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--scs-ink-2);
  font-size: 12px;
}
html:root .ux-filter-panel select,
html:root .ux-filter-panel .icon-picker-trigger {
  height: var(--scs-control-h);
  min-height: var(--scs-control-h);
  max-width: 220px;
  font-size: 12px;
}

/* ---------- 8. Skizzen / Mindmaps: the page heading carries title and text --------------- */
html:root #app .sketches-content > .sketch-list-heading { display: none; }
html:root #app .project-dashboard-toolbar:has(> #table-actions > .dashboard-tabs[hidden]):not(:has(.dashboard-view:not(.dashboard-view-inactive))) { display: none; }

/* ---------- 9. One toolbar height: 32px for every control next to the table --------------- */
html:root #table-actions > label.catalog-filter > select {
  height: var(--scs-control-h);
  min-height: var(--scs-control-h);
}
html:root #table-actions > label.sort-control > select { max-width: 170px; }

/* ---------- 10. Self-explaining controls ---------------------------------------------------- */

/* ---------- 11. Section titles in sentence case (Stufe 2): no tracked-out capitals ---------- */
html:root :is(
  .choice-group, .command-palette .command-group, .group-context-title, .custom-field-group,
  .picker-tree h4, .picker-cart h3, .fp-type-heading, .model-peek-kind,
  .pro-editor-head strong, .pro-connections > h3, .pro-inspector-section > h4,
  .pro-editor-table caption, .pro-outline-group, .settings-nav-group h3, .settings-group-title,
  .tutorial-kicker, .tutorial-chooser h3
) {
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  font-weight: 650;
  color: var(--scs-ink-2);
}
html:root #sidebar .sidebar-toolbar > span {
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
}
html:root .project-picker label { font-size: 12px; letter-spacing: 0; font-weight: 600; }
html:root :is(.content-heading, .project-dashboard-mode) .eyebrow { letter-spacing: 0; font-size: 11px; }

/* ---------- 12. Editor table toolbar (Stufe 2): one row of actions, view tools beside it ------ */
html:root #app.editor-mode #table-actions,
html:root #app #table-actions:has(> #editor-actions-wrap) { flex-wrap: wrap; row-gap: 6px; }
html:root #table-actions > #editor-actions-wrap[hidden] { display: none; }
/* Row order: two icon buttons; the name stays in the tooltip and for screen readers. */
html:root #table-actions > .row-order-controls > button > span { display: none; }
html:root #table-actions > .row-order-controls > button {
  width: var(--scs-control-h);
  min-width: var(--scs-control-h);
  padding: 0;
  justify-content: center;
}
html:root #editor-actions-panel > button.danger { color: var(--scs-danger); }
html:root #editor-actions-panel > button.danger:hover:not(:disabled) { background: var(--scs-danger-soft); }
html:root .table-tools > label.sort-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--scs-ink-2);
  font-size: 12px;
}
html:root .table-tools > label.sort-control > select {
  height: var(--scs-control-h);
  min-height: var(--scs-control-h);
  max-width: 170px;
}
html:root #app #table-actions:has(> #editor-actions-wrap) { column-gap: 4px; }
html:root #table-actions > .row-order-controls { gap: 0; }
html:root #table-actions > .row-order-controls > button { width: 28px; min-width: 28px; }
html:root .table-toolbar:has(#editor-actions-wrap) > .table-tools {
  flex-wrap: wrap;
  min-width: 0;
  max-width: 100%;
  row-gap: 6px;
}
html:root .table-toolbar:has(#editor-actions-wrap) > .table-tools > label.search { flex: 1 1 160px; min-width: 140px; }

/* ---------- 13. Darstellung (Stufe 2): switches, help behind an info button ----------------- */
/* Switch first, then its caption, as a checkbox reads. */
html:root .layout-settings label.field.has-switch {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 4px 10px;
  min-height: var(--scs-control-h);
}
html:root .layout-settings label.field.has-switch { position: relative; }
html:root .layout-settings label.field.has-switch > .layout-switch { order: -1; }
/* The select stays in the form for its handlers; the switch is what people see and use. */
html:root .layout-settings label.field.has-switch > select.layout-switch-select {
  position: absolute;
  left: 0;
  top: calc(50% - 11px);
  width: 38px;
  height: 22px;
  min-height: 0;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
html:root :is(#app, #dialog) button.layout-switch {
  position: relative;
  width: 38px;
  min-width: 38px;
  height: 22px;
  min-height: 22px;
  padding: 0;
  border: 1px solid var(--scs-line);
  border-radius: 11px;
  background: var(--scs-surface-3);
  box-shadow: none;
  transition: background-color .15s, border-color .15s;
}
html:root :is(#app, #dialog) button.layout-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px #18384f40;
  transition: transform .15s;
}
html:root :is(#app, #dialog) button.layout-switch[aria-checked=true] {
  background: var(--scs-accent);
  border-color: var(--scs-accent);
}
html:root :is(#app, #dialog) button.layout-switch[aria-checked=true]::after { transform: translateX(16px); }
html:root :is(#app, #dialog) button.layout-switch:focus-visible { outline: 2px solid var(--scs-focus); outline-offset: 2px; }
html:root :is(#app, #dialog) button.layout-switch:disabled { opacity: .5; }
@media (prefers-reduced-motion: reduce) {
  html:root button.layout-switch, html:root button.layout-switch::after { transition: none; }
}
html:root .field-caption { display: inline-flex; align-items: center; gap: 6px; }
html:root :is(#app, #dialog) button.field-info {
  display: inline-grid;
  place-items: center;
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  padding: 0;
  border: 1px solid var(--scs-line);
  border-radius: 50%;
  background: var(--scs-surface);
  color: var(--scs-ink-3);
  font: italic 600 11px/1 Georgia, serif;
  box-shadow: none;
  vertical-align: middle;
}
html:root :is(#app, #dialog) button.field-info:hover,
html:root :is(#app, #dialog) button.field-info[aria-expanded=true] {
  border-color: var(--scs-accent);
  color: var(--scs-accent);
}
html:root legend > button.field-info { margin-left: 6px; }
html:root .layout-settings .field-help.is-folded { display: none; }
html:root .layout-settings .field-help:not(.is-folded) {
  display: block;
  margin-top: 4px;
  padding: 6px 8px;
  border-left: 2px solid var(--scs-accent);
  background: var(--scs-surface-2);
  border-radius: 0 var(--scs-radius-s) var(--scs-radius-s) 0;
}
html:root .layout-settings label.field.has-switch > .field-caption { flex: 1 1 0; min-width: 0; display: inline; }
html:root .layout-settings label.field.has-switch > .field-caption > .field-info { margin-left: 6px; }

/* ---------- 14. Prüfzentrum (Stufe 2): findings as a table, one row per finding ------------- */
html:root .quality-findings.is-table {
  display: block;
  margin-top: 12px;
  border: 1px solid var(--scs-line);
  border-radius: var(--scs-radius-m);
  background: var(--scs-surface);
  overflow: hidden;
}
html:root .quality-findings.is-table > .quality-head,
html:root .quality-findings.is-table .quality-finding,
html:root .quality-findings.is-table .quality-group > summary {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) minmax(0, max-content);
  column-gap: 16px;
  align-items: start;
}
html:root .quality-findings.is-table > .quality-head {
  padding: 8px 14px 8px 17px;
  background: var(--scs-surface-2);
  border-bottom: 1px solid var(--scs-line);
  color: var(--scs-ink-2);
  font-size: 12px;
  font-weight: 650;
}
html:root .quality-findings.is-table .quality-finding {
  margin: 0;
  padding: 10px 14px;
  border: 0;
  border-left: 3px solid #6b8eaa;
  border-radius: 0;
  border-bottom: 1px solid var(--scs-line);
  background: transparent;
}
html:root .quality-findings.is-table .quality-finding.error { border-left-color: #b63d38; }
html:root .quality-findings.is-table .quality-finding.warning { border-left-color: #b78018; }
html:root .quality-findings.is-table .quality-finding.waived { border-left-color: #758778; }
html:root .quality-findings.is-table .quality-finding:hover { background: var(--scs-surface-2); }
html:root .quality-findings.is-table .quality-finding > * { grid-column: 2; }
html:root .quality-findings.is-table .quality-finding > .quality-badges {
  grid-column: 1;
  grid-row: 1 / span 8;
  flex-direction: column;
  gap: 2px;
  padding-top: 1px;
  font-size: 12px;
}
html:root .quality-findings.is-table .quality-finding.error > .quality-badges > span:first-child { color: #b63d38; font-weight: 600; }
html:root .quality-findings.is-table .quality-finding.warning > .quality-badges > span:first-child { color: #9a6a0f; font-weight: 600; }
html:root .quality-findings.is-table .quality-finding > .quality-buttons {
  grid-column: 3;
  grid-row: 1 / span 8;
  margin: 0;
  justify-content: flex-end;
}
html:root .quality-findings.is-table .quality-finding h3 { margin: 0 0 2px; }
html:root .quality-findings.is-table .quality-finding :is(.quality-location, .quality-details, .quality-reason) { margin: 2px 0; }
/* A group of the same finding: one row with its count; opened, its rows follow indented. */
html:root .quality-findings.is-table .quality-group {
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--scs-line);
  border-radius: 0;
  background: transparent;
}
html:root .quality-findings.is-table .quality-group > summary {
  padding: 10px 14px 10px 17px;
  list-style: none;
  font-weight: 600;
}
html:root .quality-findings.is-table .quality-group > summary::-webkit-details-marker { display: none; }
html:root .quality-findings.is-table .quality-group > summary:hover { background: var(--scs-surface-2); }
html:root .quality-findings.is-table .quality-group > summary > .quality-group-count { grid-column: 1; grid-row: 1 / span 2; }
html:root .quality-findings.is-table .quality-group > summary > .quality-group-count::before {
  content: '▸';
  display: inline-block;
  width: 14px;
  color: var(--scs-ink-3);
}
html:root .quality-findings.is-table .quality-group[open] > summary > .quality-group-count::before { content: '▾'; }
html:root .quality-findings.is-table .quality-group > summary > span:not(.quality-group-count),
html:root .quality-findings.is-table .quality-group > summary > small { grid-column: 2 / -1; }
html:root .quality-findings.is-table .quality-group[open] > summary { margin: 0; border-bottom: 1px solid var(--scs-line); }
html:root .quality-findings.is-table .quality-group .quality-finding { padding-left: 28px; background: var(--scs-surface-2); }
html:root .quality-findings.is-table .quality-group .quality-finding + .quality-finding { margin-top: 0; }
html:root .quality-findings.is-table .quality-group .quality-finding:last-child { border-bottom: 0; }
html:root .quality-findings.is-table > :last-child { border-bottom: 0; }
html:root .quality-findings.is-table > .empty-table { padding: 24px; }
@container checks (max-width: 720px) {
  html:root .quality-findings.is-table > .quality-head { display: none; }
  html:root .quality-findings.is-table .quality-finding { grid-template-columns: 84px minmax(0, 1fr); }
  html:root .quality-findings.is-table .quality-finding > .quality-buttons { grid-column: 2; grid-row: auto; justify-content: flex-start; margin-top: 6px; }
}
html:root .quality-findings.is-table .quality-group { border-left: 3px solid #6b8eaa; }
html:root .quality-findings.is-table .quality-group.error { border-left-color: #b63d38; }
html:root .quality-findings.is-table .quality-group.warning { border-left-color: #b78018; }
html:root .quality-findings.is-table .quality-group > summary { padding-left: 14px; }
html:root .quality-findings.is-table .quality-group .quality-finding { border-left: 0; }

/* ---------- 15. Interfacebibliothek and Domänen as tables (Stufe 2) ------------------------ */
html:root #table-actions > .library-layout-switch { margin-left: auto; }
html:root .domain-cards.is-list {
  display: block;
  border: 1px solid var(--scs-line);
  border-top: 3px solid #117782;
  border-radius: 11px;
  background: var(--scs-surface);
  overflow: hidden;
}
html:root .domain-cards.is-list > :is(.domain-cards-head, .domain-card) {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 16px;
  padding: 8px 14px;
}
html:root .domain-cards.is-list > .domain-cards-head {
  background: linear-gradient(135deg, #e3f3f3, #f7fbfc 65%);
  border-bottom: 1px solid var(--scs-line);
  color: var(--scs-ink-2);
  font-size: 12px;
  font-weight: 650;
}
html:root .domain-cards.is-list > .domain-cards-head > span:last-child { text-align: right; }
html:root .domain-cards.is-list > .domain-card {
  min-height: 0;
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--scs-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
html:root .domain-cards.is-list > .domain-card:last-child { border-bottom: 0; }
html:root .domain-cards.is-list > .domain-card:hover { background: var(--scs-surface-2); box-shadow: none; }
html:root .domain-cards.is-list > .domain-card > .ux-acts { align-self: center; }
html:root .domain-cards.is-list > .domain-card > div { min-width: 0; }
html:root .domain-cards.is-list > .domain-card > div > small { display: block; margin-top: 2px; }
html:root .domain-cards.is-list > .domain-card > .color-swatch { width: 44px; height: 22px; border-radius: 6px; }
html:root .domain-cards.is-list > .domain-card > .interface-visual { width: 96px; }
html[data-theme=dark] .domain-cards.is-list > .domain-cards-head { background: linear-gradient(135deg, #204752, #1b303e 65%); }
html:root .domain-cards.is-list > :is(.interface-group-title, h3, h4) {
  margin: 0;
  padding: 7px 14px;
  background: var(--scs-surface-2);
  border-bottom: 1px solid var(--scs-line);
  font-size: 13px;
  font-weight: 650;
}
html:root .domain-cards.is-list > :is(.interface-group-title, h3, h4) small { margin-left: 4px; color: var(--scs-ink-3); }
/* 7.0.1: in the table a group row and its subgroup rows read as two levels, like an outline:
   the group (e.g. "Protokolle und Datensignale") is the strong band with a firm top line,
   the subgroup (own group, e.g. "Feldbus") is indented under it with a tree corner, on the row
   background, in a lighter weight. */
html:root .domain-cards.is-list > .interface-group-title {
  background: var(--scs-surface-3);
  border-top: 1px solid var(--scs-line-strong);
  color: var(--scs-ink);
  font-weight: 700;
}
html:root .domain-cards.is-list > .interface-group-title:first-of-type { border-top: 0; }
html:root .domain-cards.is-list > .interface-subgroup-title {
  position: relative;
  padding: 6px 14px 6px 40px;
  border-left: 0;
  background: var(--scs-surface-2);
  color: var(--scs-ink-2);
  font-size: 12.5px;
  font-weight: 600;
}
html:root .domain-cards.is-list > .interface-subgroup-title::before {
  content: '';
  position: absolute;
  left: 22px;
  top: 0;
  width: 9px;
  height: 50%;
  border-left: 1.5px solid var(--scs-line-strong);
  border-bottom: 1.5px solid var(--scs-line-strong);
  border-bottom-left-radius: 3px;
}

/* ---------- 16. Objektseiten (Stufe 3) ------------------------------------------------------ */
/* Long diagram and label names wrap inside their column instead of pushing the table sideways. */
html:root .object-card .object-table-scroll td :is(.object-link, a):not(.id-chip) { white-space: normal; text-align: left; overflow-wrap: break-word; }
/* 6.9 audit: links in the attribute list (e.g. "Untergeordnet") wrap inside the card instead of running past its edge. */
html:root .object-card dd > .object-link { display: block; max-width: 100%; white-space: normal; text-align: left; overflow-wrap: break-word; }
html:root #page-actions-menu-panel > #object-delete { color: var(--scs-danger); }
html:root #page-actions-menu-panel > #object-delete:hover:not(:disabled) { background: var(--scs-danger-soft); }
html:root .object-row-actions { text-align: right; }
/* Trace explorer: relation rows laid out as a grid keep one row background, not one per cell. */
html:root .object-relations-table.relation-rows tr:nth-child(even) > td { background: transparent; }
html:root .object-relations-table.relation-rows tbody tr:nth-child(even) { background: var(--scs-surface-2); }
/* Settings tables (Eigene Felder, Status & Tags): the same row actions as the libraries. */
html:root .custom-field-actions { text-align: right; white-space: nowrap; }
html:root .custom-field-actions button.ux-act { margin: 0; }
html:root :is(#app, #dialog) button.ux-act:disabled { opacity: .35; cursor: default; background: transparent; border-color: transparent; }
/* Serverstatus: section titles, empty notes and the refresh button line up with the rows. */
html:root .server-status > :is(h3, .server-status-empty, .server-status-actions, p) { padding-left: 12px; padding-right: 12px; }
html:root .server-status > h3 { font-size: 13px; font-weight: 650; }
html:root .server-status-actions { padding-bottom: 12px; }
/* Settings: every row keeps label left and control right; a scope or state tag sits under the label,
   so a row with a tag no longer moves its button into the middle. */
html:root .settings-row:has(> .settings-scope-tag:not(:empty)) { grid-template-columns: minmax(0, 1fr) minmax(200px, 300px); row-gap: 6px; }
html:root .settings-row > .settings-scope-tag:not(:empty) { grid-column: 1; grid-row: 2; justify-self: start; text-align: left; }
html:root .settings-row:has(> .settings-scope-tag:not(:empty)) > .settings-control { grid-column: 2; grid-row: 1 / span 2; }

/* ---------- 17. Mindmap editor (Stufe 3) ------------------------------------------------------ */
html:root .mindmap-layout-label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--scs-ink-2); }
html:root :is(#mindmap-undo, #mindmap-redo) { display: inline-grid; place-items: center; width: 32px; padding: 0; }
html:root :is(#mindmap-undo, #mindmap-redo) svg { width: 16px; height: 16px; }

/* ---------- 18. Import dialogs (Stufe 3): one look for the file field --------------------------- */
html:root #dialog input[type=file] {
  width: 100%;
  min-height: 0;
  height: auto;
  padding: 10px;
  border: 1px dashed var(--scs-line-strong, var(--scs-line));
  border-radius: var(--scs-radius-m);
  background: var(--scs-surface-2);
  color: var(--scs-ink-2);
  font-size: 12px;
  cursor: pointer;
}
html:root #dialog input[type=file]:hover { border-color: var(--scs-accent); }
html:root #dialog input[type=file]::file-selector-button {
  margin-right: 10px;
  padding: 6px 12px;
  border: 1px solid var(--scs-line);
  border-radius: var(--scs-radius-s);
  background: var(--scs-surface);
  color: var(--scs-ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

/* ---------- 19. Katalog-Werkzeugleiste: überall dieselbe Reihenfolge ------------------------ */
/* Filter, Gruppen, Sortieren links (filter_panel.js ordnet sie); der Umschalter Liste|Hierarchie bzw.
   Tabelle|Kacheln steht rechts außen, direkt vor Spalten, Ansichten und Suche. */
html:root #table-actions > :is(.function-view-switch, .library-layout-switch) { margin-left: auto; }
/* Sammelaktionen erscheinen erst, wenn Zeilen ausgewählt sind, wie Duplizieren und Entfernen im Systemkatalog. */
html:root #table-actions:has(> #function-selection[hidden]) > #function-group-bulk,
html:root #table-actions > #bulk-actions:disabled { display: none; }
html:root .ux-filter-panel > .model-filters { flex-basis: 100%; }

/* ---------- 20. Einstellungen (Stufe 3, zweiter Durchgang) --------------------------------- */
/* Listen in den Einstellungen: Überschrift links, Hinzufügen rechts in derselben Zeile. */
html:root .settings-list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 16px 6px; }
html:root .settings-list-head .scs-label-heading { margin: 0; }
html:root .settings-list-head .custom-field-toolbar { margin: 0; padding: 0; border: 0; }
html:root .settings-list-head .custom-field-toolbar > button { min-height: 30px; padding: 4px 12px; }
/* Die Kennung ist ein Speicherschlüssel; die Liste zeigt Namen, der Dialog zeigt die Kennung beim Anlegen. */
html:root :is(#object-tag-table, #object-status-table) :is(th, td):nth-child(2) { display: none; }
/* Ein ausgeschalteter Schalter bleibt als Schalter erkennbar. */
html:root input.settings-switch:not(:checked) { background: var(--scs-line-strong); border-color: var(--scs-line-strong); }
html:root input.settings-switch:not(:checked)::after { background: #fff; }
/* Zähler und Badges neben Titeln: dieselbe Pille wie überall, keine Schreibmaschinenschrift. */
html:root .settings-count { font-family: inherit; font-weight: 600; padding: 0 7px; border-radius: 999px; background: var(--scs-surface-3); color: var(--scs-ink-2); }
html:root .settings-label > b .scs-pill { margin-left: 6px; vertical-align: 1px; }
/* Überschrift „Zeitplan“ im Sicherungsblock nicht größer als der Blocktitel. */
html:root #settings-root .settings-panel h3, html:root #settings-root .settings-panel h4 { font-size: var(--scs-text-m, 14px); }

/* ---------- 21. Vorlagenauswahl: Auswahlpunkt in Zeilenhöhe ------------------------------- */
/* Der Radiobutton wurde von der Karte auf volle Höhe gezogen; der Fokusrahmen sah aus wie ein leeres Feld. */
html:root .template-choice > input[type='radio'] { align-self: flex-start; flex: none; width: 16px; height: 16px; margin-top: 2px; }

/* ---------- 10. Notizübersicht like Skizzen and Mindmaps (6.8.2) -------------------------- */
/* Same compact heading as the project dashboard pages; filters sit above the cards. */
html:root #app:is([data-view='project-notes'], [data-view='settings']) .table-toolbar:not(:has(#editor-actions-wrap)) { display: none; }
/* 6.9 audit: title size and position as on every other page (was 21px, 12px higher). */
html:root #app[data-view='project-notes'] .content-heading { padding: 20px 28px 14px; gap: 10px; }
html:root #app[data-view='project-notes'] #view-title { font-size: 23px; line-height: 1.3; margin: 4px 0; overflow-wrap: anywhere; }
html:root #app[data-view='project-notes'] #view-description { margin-top: 3px; font-size: 12px; line-height: 1.4; }
html:root #app[data-view='project-notes'] .notes-content { padding-top: 14px; }
@media (max-width: 1300px) { html:root #app[data-view='project-notes'] .content-heading { padding: 12px 20px; } }
@media (max-width: 720px) {
  html:root #app[data-view='project-notes'] .content-heading { padding: 10px 12px; }
  html:root #app[data-view='project-notes'] #view-title { font-size: 19px; }
}
html:root .note-list-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0 0 16px;
}
html:root .note-list-bar > p { margin: 0; color: var(--muted); font-size: 13px; }
html:root .note-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
html:root .note-filters label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--scs-ink-2); }
html:root .note-filters :is(select, input) { height: var(--scs-control-h); min-height: var(--scs-control-h); padding-top: 0; padding-bottom: 0; font-size: 12px; line-height: 1.2; }
html:root .note-filters input { width: 200px; max-width: 100%; }
/* One card recipe: the sketch card, in the graphite of notes; priority tints the top edge. */
html:root .note-cards.sketch-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 16px; }
html:root .note-card { display: flex; flex-direction: column; padding: 0; border-radius: 12px; overflow: hidden; }
html:root .note-card.note-priority-high { --card-accent: #b7791f; }
html:root .note-card .note-open {
  display: flex; flex-direction: column; gap: 7px; flex: 1; width: 100%; padding: 12px; border: 0; box-shadow: none;
  background: transparent; text-align: left; color: var(--scs-ink); min-height: 0; white-space: normal;
}
html:root .note-card .note-open:focus-visible { outline: 2px solid var(--scs-focus); outline-offset: -2px; }
html:root .note-card .note-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
html:root .note-card .note-open > strong {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 16px; line-height: 1.35; overflow-wrap: anywhere;
}
html:root .note-card .note-body {
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; max-height: none;
  font-size: 12px; line-height: 1.6; color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere;
}
html:root .note-card .note-actions {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0 12px 12px; border: 0;
}
html:root .note-card .note-actions :is(select, button:not(.ux-act)) { font-size: 12px; padding: 5px 9px; min-height: 30px; }
html:root .note-card .note-actions select { flex: 0 1 auto; min-width: 0; max-width: 150px; padding-top: 0; padding-bottom: 0; line-height: 1.2; }
html:root .note-card .note-object { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html:root .note-empty > svg { color: #656a70; }
html:root .note-empty .empty-actions { display: flex; gap: 8px; justify-content: center; margin-top: 12px; }
html:root .note-family { font-size: 12px; margin: -4px 0 12px; }

/* ---------- 14. 6.9 audit O1/O6/O7: one toolbar on every list page ----------------------- */
/* Two zones that never trade places: filters on the left (they may take a second row), view
   switch, saved views and search fixed at the top right. Editor tables keep their own toolbar. */
html:root #app .table-toolbar:not(:has(#editor-actions-wrap)) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px 16px;
}
html:root #app .table-toolbar:not(:has(#editor-actions-wrap)) > #table-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; grid-column: 1; grid-row: 1;
}
html:root #app .table-toolbar:not(:has(#editor-actions-wrap)) > .table-tools {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; margin-left: 0; grid-column: 2; grid-row: 1;
}
html:root #app .table-toolbar:not(:has(#editor-actions-wrap)) > :not(#table-actions):not(.table-tools) { grid-column: 1 / -1; }
html:root #app .table-toolbar .table-tools > label.search { width: 13rem; flex: 0 0 13rem; }
/* The view switch always sits at the end of the filters, next to the tools. */
html:root #app #table-actions > .segmented { margin-left: auto; order: 9; }
html:root #app[data-view='project-notes'] .table-toolbar:not(:has(#editor-actions-wrap)) { display: none; }

/* O6: one field recipe and one height (32px) for every picker in a toolbar: quiet caption,
   plain white field. The pill chips and the 37px project filters are gone. */
html:root #app .table-toolbar :is(.chip-select, .section-project-filter, .catalog-filter, .sort-control) {
  display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 0;
  color: var(--scs-ink-3); font-size: 12px; font-weight: 400;
}
html:root #app .table-toolbar :is(.chip-select, .section-project-filter, .catalog-filter, .sort-control) select,
html:root #app .table-toolbar .diagram-picker > button {
  height: var(--scs-control-h); min-height: var(--scs-control-h); max-width: 190px;
  padding: 0 28px 0 10px; border: 1px solid var(--scs-line-strong); border-radius: var(--scs-radius-s);
  background-color: var(--scs-surface); color: var(--scs-ink); font-size: 12px; font-weight: 400; line-height: 1.2;
}
html:root #app .table-toolbar:not(:has(#editor-actions-wrap)) .sort-control select { width: auto; min-width: 0; max-width: 170px; }
html:root #app .table-toolbar .diagram-picker > button { padding-right: 10px; }
html:root #app .table-toolbar :is(.chip-toggle, #advanced-label) { min-height: var(--scs-control-h); font-size: 12px; }
html:root #app .table-toolbar > #table-actions > button,
html:root #app .table-toolbar > .table-tools button { min-height: var(--scs-control-h); }

/* O1: the notes overview uses the same quiet search field as every list. */
html:root .note-filters input[type='search'],
html:root #notes-search {
  border-color: transparent; background: var(--scs-bg); border-radius: var(--scs-radius-s);
}

/* O7: the icon library switches its view like every other page (segmented, no filled button). */
html:root .catalog-view-switch.segmented { gap: 0; }

/* ---------- 15. 6.9 audit O2: the diagram editor fits a 1440 px screen --------------------- */
/* The preview actions wrap instead of running out of the pane ("Ebenen" was cut off). */
html:root #app[data-view='chain'] .preview-actions { flex-wrap: wrap; flex-shrink: 1; min-width: 0; justify-content: flex-end; row-gap: 6px; }
/* A narrow editor pane keeps every tab and the menu in one row: tighter tabs, "Darstellung" as
   its sliders icon (name in the tooltip), Duplicate and Remove as icons. */
html:root #app[data-view='chain'] .editor-pane { container-name: editorpane; container-type: inline-size; }
@container editorpane (max-width: 680px) {
  html:root #app #tabs .editor-tabs-primary [role='tab'] { padding: 0 7px; gap: 5px; }
  html:root #app #tabs .editor-tabs-primary .editor-inspector-toggle .tab-label { display: none; }
  html:root #app #table-actions > :is(#duplicate-rows, #delete-rows) { font-size: 0; gap: 0; padding: 0 8px; }
}
html:root #app #tabs .editor-tabs-primary.is-compact [role='tab'][data-tab]:not(.active):not(.editor-inspector-toggle) {
  font-size: 0; gap: 0; padding: 0 10px;
}
html:root #app #tabs .editor-tabs-primary.is-compact [role='tab'][data-tab]:not(.active) > span:not(.tab-label) { display: none; }

/* ---------- 16. 6.9 audit O3: list tables read as tables, not as forms ---------------------- */
/* A choice in a table row looks like its value; frame and arrow appear on row hover and focus.
   Coloured edges (catalog level, status colour) stay, they carry meaning. */
html:root #app :is(.function-table, .grid) tbody select:not(.compact-select select) {
  appearance: none; -webkit-appearance: none; border: 1px solid transparent; border-radius: var(--scs-radius-s, 6px);
  background-color: transparent; background-repeat: no-repeat; background-position: right 7px center; background-size: 11px;
  padding-right: 22px; text-overflow: ellipsis; box-shadow: none; color: inherit;
}
html:root #app :is(.function-table, .grid) tbody tr:hover select:not(.compact-select select),
html:root #app :is(.function-table, .grid) tbody select:not(.compact-select select):focus {
  border-color: var(--scs-line-strong, var(--scs-line));
  background-color: var(--scs-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%237d8e9b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
html:root #app .function-table tbody select.function-group-logical { border-left: 3px solid var(--scs-accent); }
html:root #app .function-table tbody select.function-group-physical { border-left: 3px solid var(--scs-warn); }
html:root #app :is(.function-table, .grid) tbody select.scs-status-select[data-label-color]:not([data-label-color='']) {
  border-left: 4px solid var(--label-c);
}
html:root #app .function-table tbody tr:hover select:disabled { border-color: transparent; background-image: none; }
@media (forced-colors: active) {
  html:root #app :is(.function-table, .grid) tbody select { appearance: auto; border-color: CanvasText; }
}

/* ---------- 17. 6.9 audit O9: one head on every object page, attributes read as values ------- */
/* The attributes of a function stay editable on the page but read like the other object pages:
   no frame until hover or focus ("Bearbeiten" in the head focuses the name). */
html:root #app .function-attributes :is(textarea, select),
html:root #app .object-card-attributes .object-attrs select {
  border-color: transparent; background-color: transparent; box-shadow: none;
}
html:root #app .function-attributes select,
html:root #app .object-card-attributes .object-attrs select { appearance: none; -webkit-appearance: none; padding-right: 24px; }
html:root #app .function-attributes textarea { resize: none; min-height: 0; }
html:root #app .function-attributes :is(textarea, select):is(:hover, :focus),
html:root #app .object-card-attributes .object-attrs select:is(:hover, :focus) {
  border-color: var(--scs-line-strong, var(--scs-line)); background-color: var(--scs-surface);
}
html:root #app .function-attributes select:is(:hover, :focus),
html:root #app .object-card-attributes .object-attrs select:is(:hover, :focus) {
  background-repeat: no-repeat; background-position: right 8px center; background-size: 11px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%237d8e9b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
html:root #app .object-card-attributes .object-attrs select.scs-status-select[data-label-color]:not([data-label-color='']) {
  border-left: 4px solid var(--label-c);
}
@media (forced-colors: active) {
  html:root #app :is(.function-attributes, .object-card-attributes .object-attrs) :is(textarea, select) { appearance: auto; border-color: CanvasText; }
}

/* ---------- 18. 6.9 audit O12: the diagram ID says what it is ------------------------------- */
/* Cards and the editor title name the ID ("ID" is the same word in German, English and French). */
html:root .diagram-card-id::before,
html:root #view-title-id > .id-chip::before {
  content: 'ID'; margin-right: 5px; font-family: var(--scs-font, inherit); font-size: 10px; font-weight: 600;
  letter-spacing: .4px; color: var(--scs-ink-3);
}

/* ---------- 19. 6.9 audit O8: deleting is not the loudest action on a card -------------------- */
html:root #app button.diagram-card-delete:not(:hover):not(:focus-visible) {
  border-color: transparent; background: transparent; color: var(--scs-ink-3);
}
html:root #app button.diagram-card-delete:hover:not(:disabled) {
  border-color: var(--scs-danger-line); background: var(--scs-danger-soft); color: var(--scs-danger);
}

/* ---------- 20. 6.9 audit O11: one primary in the check centre, groups name their level ----- */
html:root .quality-findings.is-table .quality-group > summary > .quality-group-count { font-weight: 400; color: var(--scs-ink-3); white-space: nowrap; }
html:root .quality-findings.is-table .quality-group > summary > .quality-group-count > b { font-weight: 600; color: var(--scs-ink-2); }

/* ---------- 21. 6.9 audit O14: no empty note bar under the icon choice ------------------------ */
html:root .icon-suggest-note:empty { display: none; }

/* ---------- 22. 6.9 audit O5: no text below 11 px ------------------------------------------- */
/* Counters in the menu, footers, card notes and badges were 10 px; 11 px is the smallest step. */
html:root #app :is(.page-link-host > b, .menu-check-value > span, .sidebar-bottom, .sidebar-bottom > *, .grid-footer,
  .interface-group-title small, .icon-card small, .icon-card .icon-color-mode, .icon-usage-badges span,
  .trace-derived-note, .note-card-heading span, .template-card-type small) {
  font-size: 11px;
}

/* ---------- 23. 6.9 audit O10: dark design details ------------------------------------------ */
/* The sidebar resizer is a quiet line in the dark design, not a light stripe. */
html[data-theme='dark'] #sidebar-resizer:not(:hover):not(:focus-visible) { background: var(--scs-line); }
html[data-theme='dark'] .sidebar-resizing #sidebar-resizer { background: #3394a2; }
/* Catalog icons are drawn for light paper: their small preview keeps a light tile. */
html[data-theme='dark'] .icon-picker-picture:has(img) { background: #e3edf3; border-color: transparent; }
/* "Not covered" in the matrix: a light red tint instead of a heavy dark red block. */
html[data-theme='dark'] .trace-matrix tr.gap:not(.derived-only) > td:not(.trace-row-coverage) {
  background: color-mix(in srgb, var(--scs-danger) 20%, transparent);
}