.button, .icon-button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); color: var(--ink-800); cursor: pointer; font-weight: 600; transition: background var(--motion-fast), border-color var(--motion-fast), transform var(--motion-fast); }
.button { padding: 9px 14px; }
.icon-button { width: 44px; flex: 0 0 44px; padding: 0; font-size: 18px; }
.button:hover, .icon-button:hover { border-color: var(--ink-500); background: #fafbfc; }
.button:active, .icon-button:active { transform: translateY(1px); }
.button:disabled, .icon-button:disabled { opacity: .5; cursor: not-allowed; }
.button-primary { border-color: var(--brand-700); background: var(--brand-700); color: white; }
.button-primary:hover { border-color: var(--brand-600); background: var(--brand-600); }
.button-danger { border-color: color-mix(in srgb, var(--danger-700) 30%, var(--line)); color: var(--danger-700); background: var(--danger-100); }
.button-ghost { border-color: transparent; background: transparent; }
.button-block { width: 100%; }
.view-stack { display: grid; gap: var(--space-5); }
.view-intro, .collection-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.view-intro p, .collection-meta { margin: 0; color: var(--ink-600); }
.toolbar-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.collection-search { min-height: 40px; display: flex; align-items: center; gap: 4px; padding: 0 4px 0 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); }
.collection-search input { min-width: min(220px, 35vw); border: 0; outline: 0; background: transparent; }
.collection-search .icon-button[hidden] { display: none; }
.record-workspace > .collection-toolbar { justify-content: flex-start; flex-wrap: wrap; gap: var(--space-2); }
.record-lookup { min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.record-lookup .field { width: min(250px, 100%); }
.record-workspace > .collection-toolbar > .toolbar-actions { width: auto; margin-left: auto; }
.record-workspace > .filter-bar .toolbar-actions { width: auto; }
.filter-bar { display: flex; align-items: end; flex-wrap: wrap; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-sm); }
.ptr { position: fixed; z-index: var(--z-toast); top: 0; left: 50%; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: var(--brand-700); background: var(--surface); box-shadow: var(--shadow-md); transform: translate(-50%, -56px); transition: transform .2s ease; pointer-events: none; }
.ptr.ready { color: var(--surface); background: var(--brand-600); }
.field { min-width: 150px; display: grid; gap: 6px; }
.field-grow { flex: 1; }
.field label { color: var(--ink-600); font-size: 12px; font-weight: 600; }
.field input, .field select, .field textarea { width: 100%; min-height: 44px; padding: 9px 11px; border: 1px solid var(--line-strong); border-radius: 9px; background: white; }
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--brand-600); box-shadow: 0 0 0 3px var(--brand-100); }
/* SYS-07: a subtle, self-clearing highlight for a field an open form just
   refreshed from a live push (not a user action, so it must stay quiet). */
.field[data-remote-updated] input, .field[data-remote-updated] select, .field[data-remote-updated] textarea, .field[data-remote-updated] .supplier-picker-trigger {
  animation: field-remote-flash 2.4s ease-out;
}
@keyframes field-remote-flash {
  0% { background-color: var(--brand-100); border-color: var(--brand-600); }
  100% { background-color: white; border-color: var(--line-strong); }
}
.live-conflict-notice { display: grid; gap: var(--space-2); padding: var(--space-3); border: 1px solid color-mix(in srgb, var(--warning-700) 30%, var(--line)); border-radius: var(--radius-sm); background: var(--warning-100); color: var(--warning-700); }
.live-conflict-notice p { margin: 0; font-weight: 600; }
.live-conflict-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.live-unavailable-notice { padding: var(--space-3); border: 1px solid color-mix(in srgb, var(--danger-700) 30%, var(--line)); border-radius: var(--radius-sm); background: var(--danger-100); color: var(--danger-700); }
.supplier-picker { position: relative; width: 100%; }
.supplier-picker-trigger { width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 9px 11px; border: 1px solid var(--line-strong); border-radius: 9px; color: var(--ink-900); background: white; text-align: left; cursor: pointer; }
.supplier-picker-trigger > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.supplier-picker-trigger:focus { outline: 0; border-color: var(--brand-600); box-shadow: 0 0 0 3px var(--brand-100); }
.supplier-picker-popover { position: absolute; z-index: var(--z-surface); top: calc(100% + 5px); left: 0; width: min(420px, 100%); padding: 8px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow-md); }
.supplier-picker-upward .supplier-picker-popover { top: auto; bottom: calc(100% + 5px); }
.supplier-picker-popover[hidden] { display: none; }
.supplier-picker-popover input { width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: white; }
.supplier-picker-options { display: grid; max-height: min(36dvh, 280px); margin-top: 6px; overflow-y: auto; overscroll-behavior: contain; }
.supplier-picker-option { width: 100%; min-height: 44px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; padding: 8px 10px; border: 0; border-bottom: 1px solid var(--line); color: var(--ink-900); background: transparent; text-align: left; cursor: pointer; }
.supplier-picker-option:last-child { border-bottom: 0; }
.supplier-picker-option:hover, .supplier-picker-option:focus, .supplier-picker-option[aria-pressed="true"] { background: var(--surface-soft); outline: 0; }
.supplier-picker-option span, .supplier-picker-option small { min-width: 0; overflow-wrap: anywhere; }
.supplier-picker-option small { color: var(--ink-600); }
.supplier-picker-empty { margin: 0; padding: var(--space-3); color: var(--ink-600); text-align: center; }
.collection-shell { min-width: 0; }
.table-scroll { min-width: 0; width: fit-content; max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-sm); overscroll-behavior-x: contain; }
/* Capped table width is structural: a cell's max-width alone cannot constrain
   automatic table layout. The visible column count also changes at breakpoints. */
.data-table { --table-columns: var(--table-columns-desktop, 6); width: calc(var(--table-columns) * 175px); max-width: 100%; table-layout: fixed; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.data-table th { height: 36px; padding: 4px 10px; border-bottom: 1px solid var(--line-strong); color: var(--ink-600); background: #f8f9fb; font-size: 11px; font-weight: 500; letter-spacing: .025em; text-align: left; white-space: nowrap; }
.data-table th.numeric, .data-table td.numeric { text-align: right; }
.data-table th button { min-height: 32px; margin: -2px -6px; padding: 4px 6px; border-radius: 7px; background: transparent; cursor: pointer; font: inherit; color: inherit; }
.data-table th button:hover { background: var(--surface-soft); }
.data-table td { height: 40px; padding: 4px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; font-weight: 400; white-space: nowrap; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr { cursor: pointer; }
.data-table tbody tr:nth-child(even) { background: #f8fafc; }
.data-table tbody tr:hover { background: #eef3f8; }
.data-table tbody tr[aria-selected="true"] { background: #e8f0fc; }
.data-table td.identity { font-weight: 500; }
.data-table .bounded-cell { max-width: 240px; }
.data-table .cell-text { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.data-table .cell-text-narrow { max-width: 130px; }
.data-table td.identity .cell-text { max-width: 280px; }
.data-table td.identity .cell-text-narrow { max-width: 130px; }
.data-table td.supplier { white-space: normal; overflow-wrap: anywhere; }
.data-table td.state { white-space: normal; }
.data-table td.numeric { white-space: nowrap; }
.data-table td.numeric .chip { display: flex; width: max-content; max-width: 100%; margin: 3px 0 0 auto; white-space: normal; }
.money-range { display: grid; justify-items: end; gap: 2px; }
.money-range > span { white-space: nowrap; }
.data-table td:not(.supplier):not(.numeric):not(.state):not(.actions):not(.identity) { overflow: hidden; text-overflow: ellipsis; }
.data-table td.supplier a { overflow-wrap: anywhere; }
.static-table-layout { min-width: 0; max-width: 100%; container-type: inline-size; }
@container (max-width: 960px) {
  .static-table-layout > .table-scroll { display: block; width: 100%; border: 0; background: transparent; box-shadow: none; overflow: visible; }
  .static-table-layout .data-table, .static-table-layout .data-table tbody { display: block; width: 100%; }
  .static-table-layout .data-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .static-table-layout .data-table tbody tr { display: block; min-width: 0; margin-bottom: var(--space-3); padding: var(--space-2); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
  .static-table-layout .data-table tbody td { display: flex; min-width: 0; width: 100%; height: auto; align-items: baseline; justify-content: space-between; gap: 8px; padding: 7px; white-space: normal; overflow: visible; overflow-wrap: anywhere; text-align: right; }
  .static-table-layout .data-table tbody td:last-child { border-bottom: 0; }
  .static-table-layout .data-table tbody td::before { content: attr(data-label); flex: 0 0 min(100px, 35%); color: var(--ink-600); font-size: 11px; text-align: left; }
.static-table-layout .data-table tbody td > * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
}
.collection-table-layout { min-width: 0; max-width: 100%; container-type: inline-size; }
  .collection-table-layout.collection-stacked > .table-scroll { display: block; width: 100%; border: 0; background: transparent; box-shadow: none; overflow: visible; }
  .collection-table-layout.collection-stacked .data-table, .collection-table-layout.collection-stacked .data-table tbody { display: block; width: 100%; }
  .collection-table-layout.collection-stacked .data-table thead { display: block; }
  .collection-table-layout.collection-stacked .data-table thead tr { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 0 8px; }
  .collection-table-layout.collection-stacked .data-table thead th { display: block; width: auto; height: auto; padding: 2px; border: 0; border-radius: 7px; }
  .collection-table-layout.collection-stacked .data-table thead th:not(:has([data-sort])) { display: none; }
  .collection-table-layout.collection-stacked .data-table tbody tr { display: block; min-width: 0; margin-bottom: var(--space-3); padding: var(--space-2); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
  .collection-table-layout.collection-stacked .data-table tbody td { display: flex; min-width: 0; width: 100%; height: auto; align-items: baseline; justify-content: space-between; gap: 8px; padding: 7px; white-space: normal; overflow: visible; overflow-wrap: anywhere; text-align: right; }
  .collection-table-layout.collection-stacked .data-table tbody td:last-child { border-bottom: 0; }
  .collection-table-layout.collection-stacked .data-table tbody td::before { content: attr(data-label); flex: 0 0 min(100px, 35%); color: var(--ink-600); font-size: 11px; text-align: left; }
  .collection-table-layout.collection-stacked .data-table tbody td > * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
  .collection-table-layout.collection-stacked .data-table tbody td.numeric { white-space: nowrap; }
  .collection-table-layout.collection-stacked .data-table tbody td.actions:has(.row-actions:empty) { display: none; }
  .collection-table-layout.collection-stacked .row-actions { flex-wrap: wrap; justify-content: flex-end; }
.data-table td.secondary { color: var(--ink-600); }
.data-table td.actions { min-width: 112px; text-align: right; }
.row-actions { display: inline-flex; gap: 4px; }
.row-actions .icon-button { width: 32px; min-height: 32px; flex-basis: 32px; }
.card-list { display: grid; gap: var(--space-3); }
.record-card { width: 100%; min-width: 0; display: grid; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); text-align: left; cursor: pointer; }
.record-card:hover { border-color: var(--line-strong); }
.record-card.selected { border-color: var(--brand-600); box-shadow: 0 0 0 3px var(--brand-100); }
.record-card-open { width: 100%; min-height: 44px; display: block; padding: 0; border: 0; color: inherit; background: transparent; text-align: left; cursor: pointer; }
.record-card-select { min-width: 0; display: flex; align-items: flex-start; gap: var(--space-2); cursor: pointer; }
.record-card-select .card-top { min-width: 0; flex: 1; }
.card-top, .card-amounts, .card-footer { min-width: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.card-identity { min-width: 0; }
.card-identity strong { display: block; overflow-wrap: anywhere; font-size: 15px; }
.card-identity span { display: block; margin-top: 3px; color: var(--ink-600); font-size: 12px; overflow-wrap: anywhere; }
.card-primary-amount { font-size: 20px; font-weight: 700; letter-spacing: -.025em; white-space: nowrap; }
.card-context { display: grid; gap: 2px; color: var(--ink-600); font-size: 12px; text-align: right; }
.card-context b { color: var(--ink-800); font-weight: 600; }
.card-footer { align-items: center; padding-top: var(--space-2); border-top: 1px solid var(--line); color: var(--ink-600); font-size: 12px; }
.card-footer > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.card-pdf { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; margin: -8px -8px -8px 0; border-radius: 9px; color: var(--brand-700); }
.select-box { width: 44px; height: 44px; flex: 0 0 44px; margin: 0; accent-color: var(--brand-700); cursor: pointer; }
.chip { min-height: 26px; max-width: 100%; display: inline-flex; align-items: center; padding: 4px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 1.2; white-space: normal; }
.chip-success { color: var(--success-700); background: var(--success-100); }
.chip-warning { color: var(--warning-700); background: var(--warning-100); }
.chip-danger { color: var(--danger-700); background: var(--danger-100); }
.chip-info { color: var(--info-700); background: var(--info-100); }
.chip-special { color: var(--special-700); background: var(--special-100); }
.chip-neutral { color: var(--ink-600); background: var(--surface-soft); }
.invoice-status { display: inline-flex; align-items: center; gap: 5px; }
.status-dot { width: 10px; height: 10px; flex: 0 0 auto; display: inline-block; border-radius: 50%; background: var(--ink-500); }
.status-dot-success { background: var(--success-700); }
.status-dot-warning { background: var(--warning-700); }
.status-dot-danger { background: var(--danger-700); }
.status-dot-info { background: var(--info-700); }
.status-dot-special { background: var(--special-700); }
.status-dot-neutral { background: var(--ink-500); }
.status-badge { width: 18px; height: 18px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 11px; font-weight: 700; line-height: 1; }
.status-badge-success { color: var(--success-700); background: var(--success-100); }
.status-badge-warning { color: var(--warning-700); background: var(--warning-100); }
.status-badge-danger { color: var(--danger-700); background: var(--danger-100); }
.status-badge-info { color: var(--info-700); background: var(--info-100); }
.status-badge-special { color: var(--special-700); background: var(--special-100); }
.status-badge-neutral { color: var(--ink-600); background: var(--surface-soft); }
.state-panel { min-height: 220px; display: grid; place-items: center; padding: var(--space-8); border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); color: var(--ink-600); background: var(--surface); text-align: center; }
.state-panel > div { max-width: 430px; }
.state-icon { width: 48px; height: 48px; display: grid; place-items: center; margin: 0 auto var(--space-4); border-radius: 50%; background: var(--surface-soft); color: var(--brand-700); font-size: 21px; }
.skeleton { overflow: hidden; position: relative; background: var(--surface-soft); }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent); animation: shimmer 1.3s infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }
.surface-layer { position: fixed; inset: 0; z-index: var(--z-surface); display: grid; align-items: stretch; justify-items: end; }
.surface-layer[hidden] { display: none; }
.surface-backdrop { position: absolute; inset: 0; background: rgba(23, 32, 51, .5); backdrop-filter: blur(3px); animation: fade-in var(--motion-fast); }
.surface-panel { position: relative; width: min(580px, 100%); height: 100%; min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--surface); box-shadow: var(--shadow-lg); animation: slide-in var(--motion-medium) var(--ease); }
.surface-panel[data-surface-kind="modal"] { width: min(680px, calc(100% - 40px)); height: auto; max-height: min(820px, calc(100dvh - 40px)); align-self: center; justify-self: center; border-radius: var(--radius-xl); animation-name: surface-pop; }
.surface-panel[data-surface-variant="pdf"] { width: min(1100px, calc(100vw - 40px)); height: min(88dvh, 900px); max-height: min(88dvh, 900px); }
.surface-head { flex: 0 0 auto; min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 12px var(--space-4); border-bottom: 1px solid var(--line); }
.surface-head h2 { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.surface-body { min-width: 0; min-height: 0; flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-5); }
.surface-foot { flex: 0 0 auto; display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-3) var(--space-4) calc(var(--space-3) + var(--safe-bottom)); border-top: 1px solid var(--line); background: var(--surface); }
@keyframes fade-in { from { opacity: 0; } }
@keyframes slide-in { from { transform: translateX(100%); } }
@keyframes surface-pop { from { opacity: 0; transform: scale(.97) translateY(8px); } }
.detail-list { display: grid; grid-template-columns: minmax(110px, .45fr) minmax(0, 1fr); margin: 0; border-top: 1px solid var(--line); }
.detail-list dt, .detail-list dd { margin: 0; padding: 11px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.detail-list dt { padding-right: var(--space-4); color: var(--ink-600); font-size: 12px; }
.detail-list dd { font-weight: 500; }
.detail-table-scroll { min-width: 0; max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); overscroll-behavior-x: contain; }
/* Dense detail tables may scroll inside their bounded panel; each column still
   has a real cap, including when an extracted description has no word breaks. */
.detail-table { width: calc(var(--detail-columns, 3) * 200px); table-layout: fixed; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.detail-table th, .detail-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.detail-table th { color: var(--ink-600); background: var(--surface-soft); font-size: 11px; white-space: nowrap; }
.detail-table th:not(:first-child), .detail-table td:not(:first-child) { text-align: right; }
.detail-table tbody tr:last-child td { border-bottom: 0; }
.surface-menu { display: grid; gap: var(--space-2); }
.surface-menu a[hidden] { display: none !important; }
.surface-menu a, .surface-menu button { width: 100%; min-height: 52px; display: flex; align-items: center; gap: var(--space-3); padding: 10px 12px; border-radius: 10px; background: transparent; text-align: left; cursor: pointer; font-weight: 600; }
.surface-menu a:hover, .surface-menu button:hover { background: var(--surface-soft); }
.surface-menu .menu-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: var(--surface-soft); }
.anchored-menu { position: fixed; z-index: calc(var(--z-surface) + 2); width: min(300px, calc(100vw - 16px)); max-height: min(520px, calc(100dvh - 16px)); display: grid; gap: 2px; overflow-y: auto; padding: 6px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-lg); animation: surface-pop var(--motion-fast) var(--ease); }
.anchored-menu [role="menuitem"] { width: 100%; min-height: 44px; display: flex; align-items: center; gap: var(--space-3); padding: 8px 10px; border-radius: 8px; background: transparent; text-align: left; font-weight: 600; }
.anchored-menu [role="menuitem"]:hover, .anchored-menu [role="menuitem"]:focus-visible { background: var(--surface-soft); }
.bulk-bar { position: sticky; z-index: var(--z-sticky); bottom: var(--space-3); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-4); padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); color: white; background: var(--ink-950); box-shadow: var(--shadow-md); }
.bulk-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.bulk-bar .button { min-height: 40px; }
.toast-region { position: fixed; top: calc(var(--topbar-height) + var(--space-4) + var(--safe-top)); left: calc(var(--sidebar-width) + var(--space-4) + var(--safe-left)); z-index: var(--z-toast); display: grid; gap: var(--space-2); pointer-events: none; }
.app-shell.sidebar-collapsed ~ .toast-region { left: calc(var(--sidebar-rail) + var(--space-4) + var(--safe-left)); }
.toast { max-width: min(320px, calc(100vw - 24px)); display: flex; align-items: flex-start; gap: 8px; padding: 9px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--ink-950); color: white; box-shadow: var(--shadow-md); animation: surface-pop var(--motion-medium); }
.toast-body { min-width: 0; flex: 1; display: grid; gap: 6px; }
.toast-label { overflow-wrap: anywhere; }
.toast-context { overflow: hidden; color: rgba(255,255,255,.72); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.toast-action { pointer-events: auto; justify-self: start; }
.toast-spinner { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 1px; border: 2px solid rgba(255,255,255,.32); border-top-color: white; border-radius: 50%; animation: toast-spin .8s linear infinite; }
.toast-progress { width: 100%; height: 5px; accent-color: white; }
.toast-progress:not([value]) { animation: toast-progress-pulse 1.1s ease-in-out infinite; }
@keyframes toast-spin { to { transform: rotate(360deg); } }
@keyframes toast-progress-pulse { 50% { opacity: .45; } }

/* Shared collection allocator owns width and visibility at every viewport. */
.collection-table-layout > .table-scroll { width: 100%; }
.collection-table-layout .data-table { width: 100%; }
.collection-table-layout .data-table [hidden] { display: none !important; }
.collection-table-layout .data-table .bounded-cell,
.collection-table-layout .data-table .cell-text { max-width: 100%; }
.collection-table-layout .data-table td.actions { min-width: 0; }
.collection-table-layout:not(.collection-stacked) .row-actions { display: inline-flex; flex-wrap: nowrap; }
.collection-table-layout.collection-stacked .data-table .cell-text { white-space: normal; overflow-wrap: anywhere; }

.collection-table-layout .data-table td.narrative .cell-text { white-space: normal; overflow-wrap: anywhere; }

.collection-table-layout .data-table td.state .chip { overflow-wrap: anywhere; }