/* diagram_table.css (6.9): diagrams as a table, styled like the interface library table. */
html:root #table-actions > .diagram-layout-switch { margin-left: auto; }
html:root .dashboard-view > .diagram-layout-switch { display: inline-flex; gap: 0; }

html:root .diagram-table-scroll {
  overflow-x: auto;
  border: 1px solid var(--scs-line);
  border-top: 3px solid #117782;
  border-radius: 11px;
  background: var(--scs-surface);
}
/* Inside a dashboard section the section is the frame. */
html:root .dashboard-list .diagram-table-scroll { border: 0; border-top: 1px solid var(--scs-line); border-radius: 0; }

html:root .diagram-table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 13px; }
html:root .diagram-table th,
html:root .diagram-table td { padding: 7px 12px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--scs-line-2); }
html:root .diagram-table thead th {
  background: var(--scs-accent-soft);
  border-bottom: 1px solid var(--scs-line);
  color: var(--scs-ink-2);
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}
html:root .diagram-table .is-number { text-align: right; font-variant-numeric: tabular-nums; }
html:root .diagram-table td time { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Sortable headers are plain text buttons; the arrow shows the active column. */
html:root .diagram-table-sortable > button {
  min-height: 0;
  height: auto;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
html:root .diagram-table-sortable > button:hover { color: var(--scs-accent); }
html:root .diagram-table-sortable > button > span { color: var(--scs-accent); font-size: 10px; }
html:root .diagram-table-sortable.is-number > button { flex-direction: row-reverse; }

html:root .diagram-table-group > th {
  background: var(--scs-surface-2);
  border-bottom: 1px solid var(--scs-line);
  color: var(--scs-ink);
  font-size: 13px;
  font-weight: 650;
}
html:root .diagram-table-group small { margin-left: 6px; color: var(--scs-ink-3); font-weight: 400; }
html:root .diagram-table-group button { margin-left: 8px; }

html:root .diagram-table-row { cursor: pointer; }
html:root .diagram-table-row:hover { background: var(--scs-row-hover); }
html:root .diagram-table-row.is-disabled .diagram-table-name strong { color: var(--scs-ink-3); }
html:root .diagram-table-row > td:first-child { position: relative; min-width: 260px; }

html:root .diagram-table-open {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 0;
  height: auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--scs-ink);
  text-align: left;
  font: inherit;
  cursor: pointer;
}
html:root .diagram-table-open:focus-visible { outline: 2px solid var(--scs-focus); outline-offset: 2px; border-radius: 3px; }
/* Symbol and colour of the diagram kind exactly as on the tiles (which follow the navigation):
   .diagram-table carries data-diagram-kind and the same --card-* tokens as .diagram-card. */
html:root .diagram-table-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  color: var(--card-accent);
  background: var(--card-chip);
  border: 1px solid var(--card-border);
}
html:root .diagram-table-icon svg { width: 20px; height: 20px; }
html:root .diagram-table-name { display: grid; gap: 1px; min-width: 0; }
html:root .diagram-table-name strong { font-weight: 600; overflow-wrap: anywhere; }
html:root .diagram-table-id { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--scs-ink-3); }
html:root .diagram-table-id code { font-family: var(--scs-font-mono); font-size: 11.5px; background: none; padding: 0; color: inherit; }
html:root .diagram-table-id small { color: var(--scs-warn); }
html:root .diagram-table-id .scs-origin { margin: 0; }

html:root .diagram-status-edit {
  min-height: 0;
  height: auto;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
html:root .diagram-status-edit:hover .scs-status { box-shadow: 0 0 0 1px var(--scs-accent-line); }
html:root .diagram-table .scs-status-select { max-width: 160px; }
html:root .diagram-table .scs-tag-cell { flex-wrap: wrap; }

html:root .diagram-table-actions { width: 1%; text-align: right; white-space: nowrap; }
#app .diagram-table-actions .diagram-card-delete { position: static; display: inline-grid; width: 30px; height: 30px; padding: 6px; color: var(--scs-ink-3); }
/* The rename pencil of the title sits next to the name, like in the former dashboard list. */
html:root .diagram-table-row .diagram-title-pencil { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); }

html:root .diagram-table-hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  padding: 9px 14px;
  border: 1px solid var(--scs-accent-line);
  border-radius: 8px;
  background: var(--scs-accent-soft);
  color: var(--scs-ink);
  font-size: 13px;
}
html:root .diagram-table-hint > span { flex: 1 1 260px; }
html:root .diagram-table-hint-close { font-size: 16px; line-height: 1; }

/* 6.12: Vorlagen and Notizübersicht share the switch and the table of the diagram pages. */
html:root #table-actions > .template-layout-switch { margin-left: auto; }
html:root .note-filters > .notes-layout-switch { display: inline-flex; gap: 0; }
html:root :is(.template-table, .note-table) .diagram-table-name { max-width: 560px; }
html:root :is(.template-table-text, .note-table-text) {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--scs-ink-3);
  font-size: var(--scs-text-s);
  line-height: 1.45;
  white-space: normal;
}
html:root :is(.template-table, .note-table) td { white-space: nowrap; }
html:root :is(.template-table, .note-table) td:first-child,
html:root .note-table td:nth-child(2) { white-space: normal; }
html:root .note-table .diagram-table-row > td:first-child { width: 1%; min-width: 0; }
html:root .note-table td:nth-child(2) { min-width: 300px; }
html:root .note-table .note-priority { display: inline-block; }
html:root .note-table select { min-width: 140px; }
html:root :is(.template-table, .note-table) .diagram-table-actions { text-align: right; width: 1%; }
html:root :is(.template-table .diagram-table-actions, .note-row-actions) {
  white-space: nowrap;
}
html:root .note-row-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; }
html:root .template-table .diagram-table-actions > * + * { margin-left: 6px; }
html:root .note-table .note-row.note-done .diagram-table-name strong { color: var(--scs-ink-3); }