/* ============================================================
   Kopie der Shadow-DOM-Stile der Tabellenkomponente <sys-table>
   (ui-dev/components/SysTable/src/components/SysTable.vue, Stand
   30.09.2026). In der App liegen sie im Shadow-Root der Komponente;
   die Demo rendert dieselbe Tabelle statisch im normalen DOM
   (div.sys-table > table.table.oo-table…), deshalb stehen sie hier.
   Alle Regeln hängen an .sys-table und wirken nur auf diese Tabellen.
   Bei Änderungen an der Komponente nachziehen (Playbook §3).
   ============================================================ */
.sys-table table > tbody > tr > td.sys-valign-middle { vertical-align: middle !important; }
.sys-table table > tbody > tr.clickable:focus { outline: none; }
.sys-table table > tbody > tr.clickable:focus-visible { outline: 2px solid rgba(71, 151, 194, .8); outline-offset: -2px; }
.sys-table-empty { padding: 16px 8px; }
.sys-table th[aria-sort] { user-select: none; }
.sys-table table thead tr th[data-sorter="false"] { cursor: default; }

/* Schmale Bildschirme: die gestapelte Zeile als Karte (Bestandsregeln der Komponente) */
@media (max-width: 767.98px) {
	.sys-table table.table-responsiv-xs > tbody { display: block; }
	.sys-table table.table-responsiv-xs > tbody > tr { display: flex; flex-wrap: wrap; align-items: center; height: auto; padding: 10px 8px 12px; row-gap: 2px; }
	.sys-table table.table-responsiv-xs > tbody > tr > td { padding: 0; line-height: 1.45; }
	.sys-table table.table-responsiv-xs > tbody > tr > td.sys-col-icon { flex: 0 0 auto; width: auto; padding-right: 8px; }
	.sys-table table.table-responsiv-xs > tbody > tr > td.sys-col-primary { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 600; }
	.sys-table table.table-responsiv-xs > tbody > tr > td.sys-col-stack { flex: 0 0 100%; display: flex; gap: 6px; text-align: left; }
	.sys-table table.table-responsiv-xs > tbody > tr > td.sys-col-stack[data-label]:before { content: attr(data-label) ":"; flex: 0 0 auto; width: auto; min-width: 0; font-size: 12px; font-weight: 400; opacity: .65; padding-top: 1px; }
	.theme4 .sys-table table.table-responsiv-xs > tbody > tr > td.sys-col-stack[data-label]:before { opacity: 1; }
	.sys-table table.table-responsiv-xs > tbody > tr > td.sys-cell-empty { display: none; }
}