/* One spacing system for every table, including nested actions and app tables. */
body.web-ui {
 --table-cell-x: 20px;
 --table-cell-y: 16px;
 --table-head-y: 14px;
 --table-action-x: 24px;
 --table-control-gap: 16px;
}
html[data-theme] body.web-ui .table-wrap th {
 padding: var(--table-head-y) var(--table-cell-x) !important;
 vertical-align: middle !important;
 line-height: 1.5 !important;
}
html[data-theme] body.web-ui .table-wrap td,
html[data-theme] body.web-ui .table-wrap .table-empty-row td {
 padding: var(--table-cell-y) var(--table-cell-x) !important;
 vertical-align: middle !important;
 line-height: 1.5 !important;
 gap: var(--table-control-gap);
}
html[data-theme] body.web-ui .table-wrap :is(th,td).table-actions {
 padding-left: var(--table-action-x) !important;
 text-align: left;
}
html[data-theme] body.web-ui .table-wrap .table-cell-value {
 min-width: 0;
 overflow-wrap: anywhere;
}
html[data-theme] body.web-ui .table-wrap .table-actions>.table-cell-value,
html[data-theme] body.web-ui .table-wrap .table-cell-value:has(>.button,>button,>form,>details) {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 justify-content: flex-start;
 gap: var(--table-control-gap);
}
html[data-theme] body.web-ui .table-wrap .table-cell-value>:is(.button,button,form,details) {
 margin: 0 !important;
 max-width: 100%;
}
html[data-theme] body.web-ui .table-wrap .table-cell-value :is(button,.button) {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-height: 48px !important;
 padding: 12px 20px !important;
 margin: 0 !important;
 gap: 8px;
 max-width: 100%;
 font-size: var(--ui-text) !important;
 line-height: 1.5 !important;
 white-space: normal;
}
html[data-theme] body.web-ui .table-wrap .table-cell-value :is(.form-actions,.actions) {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: var(--table-control-gap);
 margin: 0 !important;
}
html[data-theme] body.web-ui .table-wrap .table-cell-value form {
 min-width: 0;
 max-width: 100%;
 padding: 0;
 margin: 0;
}
html[data-theme] body.web-ui .table-wrap .table-cell-value form[data-inline-form] {
 align-items: flex-end;
 gap: var(--table-control-gap);
}
html[data-theme] body.web-ui .table-wrap .table-cell-value form[data-inline-form]>.field {margin: 0}
html[data-theme] body.web-ui .table-wrap .table-cell-value form:has(.field)>.form-actions {margin-top: 16px !important}
html[data-theme] body.web-ui .table-wrap .table-cell-value details {max-width: 100%; min-width: 0}
html[data-theme] body.web-ui .table-wrap .table-cell-value details>summary {
 min-height: 48px;
 padding: 12px 0 !important;
 font-size: 16px !important;
 line-height: 1.5;
}
html[data-theme] body.web-ui .table-wrap .table-cell-value details>form {padding-top: 16px}
html[data-theme] body.web-ui .table-wrap .table-cell-value>small {display: block; margin-top: 6px; line-height: 1.5}
html[data-theme] body.web-ui .table-wrap .table-cell-value:has(>.row-details-toggle) {flex-direction: column; align-items: flex-start}
html[data-theme] body.web-ui .table-wrap .row-details-toggle {display: none !important}
@media(max-width:600px) {
 body.web-ui {--table-cell-x: 16px; --table-cell-y: 14px; --table-action-x: 16px}
 html[data-theme] body.web-ui .table-wrap tbody {gap: 16px}
 html[data-theme] body.web-ui .table-wrap tbody tr {border-radius: 2px !important}
 html[data-theme] body.web-ui .table-wrap td.table-actions {grid-template-columns: minmax(0,1fr)}
 html[data-theme] body.web-ui .table-wrap .row-details-toggle {display: inline-flex !important}
}
@media print {
 html[data-theme] body.web-ui .table-wrap :is(th,td),
 html[data-theme] body.web-ui .table-wrap .table-empty-row td {padding: 8px !important; line-height: 1.4 !important}
 html[data-theme] body.web-ui .table-wrap .table-actions {display: none !important}
 html[data-theme] body.web-ui .table-wrap .row-details-toggle {display: none !important}
}