/* Partners 3.0 grid wrappers and DataTables presentation. */

.ss3-grid-shell {
    background: var(--ss3-color-surface);
    border: 1px solid var(--ss3-color-border);
    border-radius: var(--ss3-radius-lg);
    box-shadow: var(--ss3-shadow-sm);
    padding: var(--ss3-space-3);
    overflow: hidden;
}

.ss3-grid-shell + .ss3-grid-shell {
    margin-top: var(--ss3-space-3);
}

.ss3-grid-toolbar {
    justify-content: space-between;
    margin-bottom: var(--ss3-space-2);
}

.ss3-grid-mode-responsive {
    min-width: 0;
    overflow-x: visible;
}

.ss3-grid-mode-responsive table.dataTable,
.ss3-grid-shell table.dataTable {
    width: 100% !important;
}

/* Open-sided tables use one shared horizontal separator grammar. The default is
   white and unstriped; a supported striped modifier is opt-in. */
:is(.ss3-grid-mode-responsive, .ss3-grid-shell) table.dataTable,
:is(.ss3-grid-mode-responsive, .ss3-grid-shell) table.dataTable > :is(thead, tbody, tfoot) {
    border-left: 0;
    border-right: 0;
}

:is(.ss3-grid-mode-responsive, .ss3-grid-shell) table.dataTable > :is(thead, tbody, tfoot) {
    background: var(--ss3-color-surface);
}

:is(.ss3-grid-mode-responsive, .ss3-grid-shell) table.dataTable > thead > tr > * {
    border-top: 0;
    border-bottom: 1px solid var(--ss3-color-border-strong);
}

:is(.ss3-grid-mode-responsive, .ss3-grid-shell) table.dataTable > tbody > tr > * {
    border-top: 0;
    border-bottom: 1px solid var(--ss3-color-divider-subtle);
}

/* Ordinary report resets must preserve vendor selection and nested SearchPanes.
   Pane row states have their own shared rules below. */
:is(.ss3-grid-mode-responsive, .ss3-grid-shell) table.dataTable:not(.dtsp-searchPane table) > tbody > tr:not(.selected):not(.dtrg-group) > * {
    background-color: var(--ss3-color-surface);
    box-shadow: none !important;
}

:is(.ss3-grid-mode-responsive, .ss3-grid-shell) table.dataTable > tfoot > tr > * {
    border-top: 1px solid var(--ss3-color-border-strong);
    border-bottom: 0;
}

.ss3-grid-mode-responsive table.dataTable thead th,
.ss3-grid-mode-responsive table.dataTable tbody td,
.ss3-grid-shell table.dataTable thead th,
.ss3-grid-shell table.dataTable tbody td {
    vertical-align: middle;
}

.ss3-grid-mode-responsive table.dataTable thead th,
.ss3-grid-mode-responsive table.dataTable tbody td,
.ss3-grid-shell table.dataTable thead th,
.ss3-grid-shell table.dataTable tbody td {
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
}

.ss3-grid-mode-responsive table.dataTable thead th,
.ss3-grid-shell table.dataTable thead th {
    font-size: var(--ss3-font-size-supporting);
    font-weight: var(--ss3-font-weight-strong);
    line-height: var(--ss3-line-height-tight);
}

.ss3-grid-mode-responsive table.dataTable tbody td,
.ss3-grid-shell table.dataTable tbody td {
    font-size: var(--ss3-font-size-body);
    font-weight: var(--ss3-font-weight-regular);
    line-height: var(--ss3-line-height-body);
}

.ss3-grid-mode-responsive .dt-container,
.ss3-grid-shell .dt-container {
    max-width: 100%;
    color: var(--ss3-color-text);
}

.ss3-grid-mode-responsive table.dataTable .button {
    margin: 0;
}

.ss3-grid-mode-spreadsheet {
    overflow-x: auto;
    max-width: 100%;
}

.ss3-row-actions {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--ss3-space-1);
    white-space: nowrap;
}

.ss3-row-actions .button {
    margin: 0;
}

/* An opt-in identity column retains a useful reading width before native
   Responsive collapses secondary fields. Pair with the shared text wrapping
   utility when names or other record labels may contain long unbroken text. */
:is(.ss3-grid-mode-responsive, .ss3-grid-shell) table.dataTable > :is(thead, tbody, tfoot) > tr > .ss3-grid-identity-cell {
    min-width: 12rem;
}

/* A semantic action column owns right-edge alignment. Its row-action group fills
   the cell so the rightmost fixed icon canvas aligns with child-editor tools. */
:is(.ss3-grid-mode-responsive, .ss3-grid-shell) table.dataTable > :is(thead, tbody, tfoot) > tr > .ss3-grid-action-cell {
    padding-inline-end: 0;
    text-align: right;
}

/* The row target occupies its cell's vertical space, not target + cell padding.
   Other cells retain normal text padding and may grow for multiline content. */
:is(.ss3-grid-mode-responsive, .ss3-grid-shell) table.dataTable > tbody > tr > .ss3-grid-action-cell {
    padding-block: 0;
    height: var(--ss3-control-height);
}

:is(.ss3-grid-mode-responsive, .ss3-grid-shell) table.dataTable > tbody > tr > .ss3-grid-action-cell > .ss3-row-actions {
    display: flex;
    width: 100%;
    justify-content: flex-end;
}

.ss3-grid-shell table.dataTable thead th:first-child,
.ss3-grid-shell table.dataTable tbody td:first-child,
.ss3-grid-mode-responsive table.dataTable thead th:first-child,
.ss3-grid-mode-responsive table.dataTable tbody td:first-child {
    text-align: left;
}

/* DataTables controls use one consistent label-and-control grammar. */
.ss3-grid-mode-responsive .dt-container .dt-layout-row,
.ss3-grid-shell .dt-container .dt-layout-row {
    margin: var(--ss3-space-2) 0;
}

.ss3-grid-mode-responsive .dt-container .dt-layout-row:first-child,
.ss3-grid-shell .dt-container .dt-layout-row:first-child {
    align-items: end;
    gap: var(--ss3-space-3);
}

.ss3-grid-mode-responsive .dt-length,
.ss3-grid-mode-responsive .dt-search,
.ss3-grid-shell .dt-length,
.ss3-grid-shell .dt-search {
    display: flex;
    align-items: center;
    gap: var(--ss3-space-2);
    margin: 0;
}

.ss3-grid-mode-responsive .dt-length label,
.ss3-grid-mode-responsive .dt-search label,
.ss3-grid-shell .dt-length label,
.ss3-grid-shell .dt-search label {
    margin: 0;
    color: var(--ss3-color-text);
    font-size: var(--ss3-font-size-label);
    font-weight: var(--ss3-font-weight-strong);
    line-height: var(--ss3-line-height-tight);
    white-space: nowrap;
}

.ss3-grid-mode-responsive .dt-length select,
.ss3-grid-shell .dt-length select {
    width: auto;
    min-width: 4rem;
    margin: 0;
}

.ss3-grid-mode-responsive .dt-search input,
.ss3-grid-shell .dt-search input {
    width: min(22rem, 34vw);
    min-width: 12rem;
    margin: 0;
}

.ss3-grid-mode-responsive .dt-info,
.ss3-grid-mode-responsive .dt-paging,
.ss3-grid-shell .dt-info,
.ss3-grid-shell .dt-paging {
    font-size: var(--ss3-font-size-supporting);
    line-height: var(--ss3-line-height-body);
}

/* A one-page filtered result does not need pagination or a repeated info line. */
.ss3-grid-mode-responsive .dt-container.ss3-dt-one-page .dt-info,
.ss3-grid-mode-responsive .dt-container.ss3-dt-one-page .dt-paging,
.ss3-grid-shell .dt-container.ss3-dt-one-page .dt-info,
.ss3-grid-shell .dt-container.ss3-dt-one-page .dt-paging {
    display: none;
}

.ss3-grid-mode-responsive .dt-container.ss3-dt-one-page > .dt-layout-row:nth-last-child(1 of .dt-layout-row):not(.dt-layout-table),
.ss3-grid-shell .dt-container.ss3-dt-one-page > .dt-layout-row:nth-last-child(1 of .dt-layout-row):not(.dt-layout-table) {
    display: none;
    min-height: 0;
    margin-top: 0;
    margin-bottom: 0;
}

/* White, unstriped rows are the shared default. Alternating shading is an
   explicit display-only variant and requires both the modifier and declared use. */
:is(.ss3-grid-mode-responsive.ss3-grid-striped, .ss3-grid-shell.ss3-grid-striped)[data-grid-display-only="true"] table.dataTable:not(.dtsp-searchPane table) > tbody > tr:nth-child(even):not(.selected):not(.ss3-sliding-child):not(.child) > *,
:is(.ss3-grid-mode-responsive, .ss3-grid-shell)[data-grid-display-only="true"] table.dataTable.ss3-grid-striped:not(.dtsp-searchPane table) > tbody > tr:nth-child(even):not(.selected):not(.ss3-sliding-child):not(.child) > * {
    background-color: var(--ss3-color-grid-stripe);
}

/* A subtle ordinary-row hover is shared default behavior, independent of vendor
   hover/display classes. Child/Responsive detail rows and child editor contents
   retain their own surface and control states. */
:is(.ss3-grid-mode-responsive, .ss3-grid-shell) table.dataTable:not(.dtsp-searchPane table) > tbody > tr:not(.selected):not(.ss3-sliding-child):not(.child):hover > * {
    background-color: var(--ss3-color-grid-hover);
    box-shadow: none !important;
}

:is(.ss3-grid-mode-responsive, .ss3-grid-shell) table.dataTable.order-column:not(.dtsp-searchPane table) > tbody > tr:not(.selected) > :is(.sorting_1, .sorting_2, .sorting_3) {
    box-shadow: none !important;
}

@media screen and (max-width: 39.9375em) {
    .ss3-grid-shell {
        padding: var(--ss3-space-3);
    }

    .ss3-grid-mode-responsive .dt-container .dt-layout-row:first-child:not(.dt-layout-table),
    .ss3-grid-shell .dt-container .dt-layout-row:first-child:not(.dt-layout-table) {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: end;
        gap: var(--ss3-space-3);
    }

    .ss3-grid-mode-responsive .dt-container .dt-layout-row:first-child > .dt-layout-start,
    .ss3-grid-shell .dt-container .dt-layout-row:first-child > .dt-layout-start {
        order: 1;
        justify-self: start;
        min-width: 0;
    }

    .ss3-grid-mode-responsive .dt-container .dt-layout-row:first-child > .dt-layout-end,
    .ss3-grid-shell .dt-container .dt-layout-row:first-child > .dt-layout-end {
        order: 2;
        justify-self: stretch;
        min-width: 0;
    }

    .ss3-grid-mode-responsive .dt-length,
    .ss3-grid-mode-responsive .dt-search,
    .ss3-grid-shell .dt-length,
    .ss3-grid-shell .dt-search {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: end;
        gap: var(--ss3-space-1);
        text-align: left;
    }

    .ss3-grid-mode-responsive .dt-length label,
    .ss3-grid-mode-responsive .dt-search label,
    .ss3-grid-shell .dt-length label,
    .ss3-grid-shell .dt-search label {
        justify-self: start;
        text-align: left;
    }

    .ss3-grid-mode-responsive .dt-search input,
    .ss3-grid-shell .dt-search input {
        width: 100%;
        min-width: 0;
    }
}

/* A shared caption owns its content spacing. The vendor table-layout row must
   not add another margin to semantic headings or the following result group. */
:is(.ss3-grid-mode-responsive, .ss3-grid-shell) .dt-layout-table:has(> .dt-layout-cell > table > caption.ss3-grid-caption) {
    margin-block: 0;
}

/* ServiceSoftware caption: collection actions, filters, one global Search, and an optional Create target. */
table.dataTable > caption.ss3-grid-caption {
    caption-side: top;
    padding: 0 0 var(--ss3-space-3);
    text-align: left;
    font-weight: normal;
    white-space: normal;
}

.ss3-grid-caption [hidden] {
    display: none !important;
}

.ss3-grid-caption-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--ss3-space-3);
    row-gap: var(--ss3-space-3);
}

.ss3-grid-caption-actions {
    display: flex;
    flex: 1 1 0;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--ss3-space-4);
    row-gap: var(--ss3-space-3);
    min-width: 0;
    max-width: 100%;
}

.ss3-grid-caption-command-group {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    column-gap: var(--ss3-space-3);
    row-gap: var(--ss3-space-3);
    min-width: 0;
    white-space: nowrap;
}

.ss3-grid-caption-filter-group {
    display: inline-flex;
    flex: 0 1 max-content;
    flex-wrap: wrap;
    align-items: center;
    inline-size: max-content;
    max-inline-size: 100%;
    column-gap: var(--ss3-space-2);
    row-gap: var(--ss3-space-3);
    min-width: 0;
}

.ss3-grid-caption-command-group:not(:has(> .ss3-grid-caption-action:not([hidden]))),
.ss3-grid-caption-filter-group:not(:has(> .ss3-grid-caption-filter:not([hidden]))) {
    display: none;
}

.ss3-grid-caption .ss3-grid-caption-action[data-label="true"] {
    padding-block: 0;
    padding-inline-end: 0;
    border: 0;
}

.ss3-grid-caption-command-group > .ss3-grid-caption-action[data-label="true"]:nth-child(1 of :not([hidden])) {
    padding-inline-start: 0;
}

/* Geometry comes from ss3-icon-action: 24px glyph in a 40px target.
   Keep the first glyph at the content edge; measure gaps between whole targets. */
.ss3-grid-caption-command-group > .ss3-grid-caption-action:not([data-label="true"]):nth-child(1 of :not([hidden])) {
    margin-inline-start: calc((1.5rem - var(--ss3-control-height)) / 2);
}

.ss3-grid-caption-filter {
    display: inline-flex;
    align-items: center;
    min-width: min(11rem, 100%);
    margin: 0;
}

.ss3-grid-caption-filter select {
    width: auto;
    min-width: 11rem;
    margin: 0;
}

/* A visible filter caption belongs to its control. Separate labelled units
   from adjacent filters with the shared column gap; keep label/control close. */
.ss3-grid-caption-filter-group:has(> .ss3-grid-caption-filter[data-label="true"]) {
    column-gap: var(--ss3-gap-column);
}

.ss3-grid-caption-filter[data-label="true"] {
    gap: var(--ss3-gap-label);
}

.ss3-grid-caption-filter :is(input, select) {
    margin-bottom: 0;
}

/* Compact numeric filters compose with selects without shrinking a whole group
   beside commands into two misaligned rows. This is a shared caption variant. */
.ss3-grid-caption-filter-group:has(> .ss3-grid-caption-filter[data-control="number"]) {
    flex-basis: 18.5rem;
    inline-size: 18.5rem;
    min-inline-size: min(18.5rem, 100%);
}

.ss3-grid-caption-filter-group:has(> .ss3-grid-caption-filter[data-control="number"]) > .ss3-grid-caption-filter:not([data-control="number"]) {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
}

.ss3-grid-caption-filter-group:has(> .ss3-grid-caption-filter[data-control="number"]) select {
    width: 100%;
    min-width: 0;
}

.ss3-grid-caption-filter-group > .ss3-grid-caption-filter[data-control="number"] {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    white-space: nowrap;
}

.ss3-grid-caption-filter[data-control="number"] input[type="number"] {
    width: 4rem;
    min-width: 0;
    height: var(--ss3-control-height);
    margin: 0;
}

.ss3-grid-caption-search {
    flex: 0 1 20rem;
    min-width: 0;
    margin: 0 0 0 auto;
}

.ss3-grid-caption-search input {
    width: 100%;
    min-width: 0;
    margin: 0;
}

.ss3-grid-caption-target {
    width: 100%;
    min-width: 0;
    margin-top: var(--ss3-space-3);
}

.ss3-grid-caption [data-grid-action][aria-disabled="true"] {
    opacity: 0.25;
    cursor: not-allowed;
}

/* A supported shared caption retains actions when its business collection is empty.
   Ordinary tables keep their native emptyTable message. A no-match result still
   renders the ordinary table context; the table layout row is never a footer. */
/* An empty collection has no table body following its caption. Its peer section
   owns the next boundary gap; retain no caption-to-body allowance. */
table.dataTable.ss3-dt-empty-collection > caption.ss3-grid-caption {
    padding-bottom: 0;
}

table.dataTable.ss3-dt-empty-collection > thead,
table.dataTable.ss3-dt-empty-collection > tbody {
    display: none;
}

.dt-container.ss3-dt-empty-collection > .dt-layout-row:last-child:not(.dt-layout-table) {
    display: none;
}

@media screen and (max-width: 39.9375em) {
    .ss3-grid-caption-actions {
        flex: 1 1 100%;
        width: 100%;
    }

    .ss3-grid-caption-filter-group {
        flex: 1 1 12rem;
        inline-size: auto;
    }

    .ss3-grid-caption-search {
        flex-basis: 100%;
        margin-left: 0;
    }

    .ss3-grid-caption-filter {
        flex: 1 1 12rem;
        width: 100%;
    }

    .ss3-grid-caption-filter select {
        width: 100%;
        min-width: 0;
    }
}

/* Compact DataTables Create and child-editor headers use the section composition,
   with the caption at the start and simple icon tools at the end. */
.ss3-grid-caption [data-grid-editor] > header,
.ss3-sliding-child-target [data-grid-editor] > header {
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}

.ss3-grid-caption [data-grid-editor] > header > :is(h2, h3),
.ss3-sliding-child-target [data-grid-editor] > header > :is(h2, h3) {
    flex: 1 1 auto;
    min-width: 0;
}


.ss3-grid-caption :is(.ss3-section, .ss3-card)[data-grid-editor] > header > .ss3-action-bar,
.ss3-sliding-child-target :is(.ss3-section, .ss3-card)[data-grid-editor] > header > .ss3-action-bar {
    justify-content: flex-end;
    align-items: center;
    flex-wrap: nowrap;
    flex-shrink: 0;
    min-height: 1.5rem;
    margin-inline-start: auto;
    margin-inline-end: 0;
}

:is(.ss3-grid-mode-responsive, .ss3-grid-shell) [data-sliding-child-toggle] > i {
    font-size: 1.5rem;
}

/* Structural styling for the reusable sliding target. Normal rows retain their
   shared horizontal separators. An expanded parent transfers its ending separator
   to the attached child so one logical record has exactly one ending boundary. */
[data-sliding-child-icon-show][hidden],
[data-sliding-child-icon-hide][hidden],
.ss3-sliding-child-icon[hidden],
.ss3-sliding-child-target .ss3-sliding-child-collapse[hidden] {
    display: none !important;
}

:is(.ss3-grid-mode-responsive, .ss3-grid-shell) table.dataTable > tbody > tr:is(.ss3-sliding-child-parent, .dtr-expanded) > * {
    border-bottom-color: transparent;
    box-shadow: none;
}

:is(.ss3-grid-mode-responsive, .ss3-grid-shell) table.dataTable > tbody > tr.ss3-sliding-child > td.ss3-sliding-child {
    padding: 0 !important;
    border: 0;
    background: var(--ss3-color-surface);
    box-shadow: none !important;
    white-space: normal;
}

/* DataTables Responsive disclosure is a separate interaction but uses the same
   one-boundary-per-record rule. */
:is(.ss3-grid-mode-responsive, .ss3-grid-shell) table.dataTable > tbody > tr.child > td {
    border-top: 0;
    border-bottom: 1px solid var(--ss3-color-divider-subtle);
    background: var(--ss3-color-surface);
}

/* Separate the complete expanded record from a following parent while retaining
   one child-owned separator. This more-specific rule follows the structural reset. */
:is(.ss3-grid-mode-responsive, .ss3-grid-shell) table.dataTable > tbody > tr.ss3-sliding-child:has(+ tr) > td.ss3-sliding-child {
    padding-bottom: var(--ss3-space-2) !important;
}

/* Child editors use the available row width without widening the parent table. */
.ss3-sliding-child-target > :is(.ss3-section, .ss3-card)[data-layout="section"] {
    contain: inline-size;
}

.ss3-sliding-child-target {
    display: none;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: var(--ss3-space-3) 0 var(--ss3-space-4);
    border-bottom: 2px solid var(--ss3-color-structure);
    background: var(--ss3-color-surface);
}

.ss3-sliding-child-target.ss3-sliding-child-parent-hidden {
    border-top: 1px solid var(--ss3-color-divider-subtle);
}

/* Draft state supplements the existing disclosure control without changing business
   data or row geometry. */
[data-sliding-child-toggle] {
    position: relative;
}

.ss3-grid-dirty-marker {
    position: absolute;
    top: 0.125rem;
    right: 0.125rem;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--ss3-color-warning-fill);
    box-shadow: 0 0 0 1px var(--ss3-color-warning-contrast),
                0 0 0 2px var(--ss3-color-surface);
    pointer-events: none;
}

.ss3-grid-dirty-marker[hidden] {
    display: none;
}

/* A pending write blocks table operations that would tear down or replace the
   owning record while leaving independent child editors usable. */
[data-grid-write-pending="true"] .ss3-grid-caption-controls,
[data-grid-write-pending="true"] .dt-paging,
[data-grid-write-pending="true"] table.dataTable > thead {
    pointer-events: none;
}

[data-grid-write-pending="true"] .ss3-grid-caption-controls,
[data-grid-write-pending="true"] .dt-paging,
[data-grid-write-pending="true"] table.dataTable > thead {
    opacity: 0.65;
}

/* Font Awesome hidden-column controls remain distinct from sliding-child double chevrons. */
:is(.ss3-grid-mode-responsive, .ss3-grid-shell) table.dataTable:is(.dtr-inline.collapsed, .dtr-column) > tbody > tr > :is(td, th).dtr-control::before {
    content: "\f150";
    font-family: var(--ss3-font-awesome);
    font-style: normal;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1;
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    box-sizing: content-box;
    text-align: center;
    text-indent: 0;
    vertical-align: middle;
    color: var(--ss3-color-action);
}

:is(.ss3-grid-mode-responsive, .ss3-grid-shell) table.dataTable:is(.dtr-inline.collapsed, .dtr-column) > tbody > tr.dtr-expanded > :is(td, th).dtr-control::before {
    content: "\f151";
}


/* Brief acknowledgement of an item added to a collection; lifetime is consumer-owned. */
:is(.ss3-grid-mode-responsive, .ss3-grid-shell) tr[data-ss3-row-added="true"] > td {
    background-color: var(--ss3-color-action-soft);
}

/* Keep a business date together while ordinary identity/context text can wrap. */
.ss3-date-value {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}


/* Native SearchPanes row states also cover direct DataTables integrations which
   do not receive the adapter's ss3-search-panes class. Use neutral fills and dark
   text rather than the vendor's white selected text and inset selection shadow. */
:is(.ss3-grid-mode-responsive, .ss3-grid-shell) .dtsp-searchPane table.dataTable > tbody > tr > * {
    color: var(--ss3-color-text);
    background-color: var(--ss3-color-surface);
    box-shadow: none !important;
}
:is(.ss3-grid-mode-responsive, .ss3-grid-shell) .dtsp-searchPane table.dataTable > tbody > tr:hover > * {
    background-color: color-mix(in srgb, var(--ss3-color-text) 5%, var(--ss3-color-surface));
}
:is(.ss3-grid-mode-responsive, .ss3-grid-shell) .dtsp-searchPane table.dataTable > tbody > tr.selected > * {
    color: var(--ss3-color-text);
    background-color: color-mix(in srgb, var(--ss3-color-text) 14%, var(--ss3-color-surface));
}
:is(.ss3-grid-mode-responsive, .ss3-grid-shell) .dtsp-searchPane table.dataTable > tbody > tr.selected:hover > * {
    background-color: color-mix(in srgb, var(--ss3-color-text) 22%, var(--ss3-color-surface));
}
:is(.ss3-grid-mode-responsive, .ss3-grid-shell) .dtsp-searchPane table.dataTable > tbody > tr :is(.dtsp-name, .dtsp-pill) {
    color: var(--ss3-color-text) !important;
}
:is(.ss3-grid-mode-responsive, .ss3-grid-shell) .dtsp-searchPane table.dataTable > tbody > tr .dtsp-pill {
    background-color: var(--ss3-color-surface) !important;
}
:is(.ss3-grid-mode-responsive, .ss3-grid-shell) .dtsp-searchPane table.dataTable > tbody > tr:is(:focus-within, :focus-visible) > *,
:is(.ss3-grid-mode-responsive, .ss3-grid-shell) .dtsp-searchPane table.dataTable > tbody > tr > :is(.focus, :focus-visible) {
    outline: 2px solid var(--ss3-color-action);
    outline-offset: -2px;
}

/* SearchPanes composition only.30-components owns the adopted action targets and
   glyphs;40-forms owns fields. Vendor filtering, scrolling and collapse stay native. */
.ss3-search-panes.dtsp-panesContainer {
    padding: 0;
    margin-block: 0 var(--ss3-space-3);
    text-align: left;
}
.ss3-search-panes .dtsp-titleRow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ss3-space-3);
}
.ss3-search-panes.dtsp-panesContainer .dtsp-title {
    float: none;
    padding: 0;
    margin-inline-end: auto;
    color: var(--ss3-color-text);
    font-size: var(--ss3-font-size-label);
    font-weight: var(--ss3-font-weight-strong);
}
.ss3-search-panes.dtsp-panesContainer button.ss3-icon-action {
    float: none;
    opacity: 1;
    transform: none;
    vertical-align: middle;
}
.ss3-search-panes.dtsp-panesContainer button.ss3-icon-action:disabled {
    opacity: 0.55;
}
.ss3-search-panes.dtsp-panesContainer .dtsp-searchPanes {
    gap: var(--ss3-gap-column);
    justify-content: flex-start;
    margin-block-start: var(--ss3-space-3);
}
.ss3-search-panes.dtsp-panesContainer .dtsp-searchPanes .dtsp-searchPane {
    margin-block-start: 0 !important;
    flex: 1 1 18rem;
    min-width: 0 !important;
    max-width: 100% !important;
    width: auto !important;
}
.ss3-search-panes .dtsp-topRow.dtsp-subRowsContainer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--ss3-space-3);
    padding: 0;
    margin-block-end: var(--ss3-space-3);
}
.ss3-search-panes .dtsp-topRow :is(.dtsp-subRow1, .dtsp-subRow2) {
    width: 100%;
    flex: 0 0 auto;
    margin: 0;
}
.ss3-search-panes .dtsp-topRow .dtsp-searchCont {
    display: flex;
    align-items: center;
    gap: var(--ss3-space-2);
}
.ss3-search-panes .dtsp-topRow .dtsp-searchCont input.dtsp-search {
    flex: 1 1 0;
    width: 100%;
    min-width: 0;
    margin: 0;
}
.ss3-search-panes .dtsp-topRow .dtsp-buttonGroup {
    display: flex;
    justify-content: flex-end;
    gap: var(--ss3-space-3);
    margin: 0;
}
.ss3-search-panes .dtsp-topRow.dtsp-bordered {
    border-color: var(--ss3-color-divider-subtle);
}
@media screen and (max-width: 39.9375em) {
    .ss3-search-panes .dtsp-titleRow .dtsp-title { flex-basis: 100%; }
    .ss3-search-panes.dtsp-panesContainer .dtsp-searchPanes .dtsp-searchPane { flex-basis: auto; width: 100% !important; }
    .ss3-search-panes.dtsp-panesContainer .dtsp-searchPanes { flex-wrap: nowrap; }
}

/* The rich-filter surface spans the full DataTables layout row on phone. */
:is(.ss3-grid-mode-responsive, .ss3-grid-shell) .dt-layout-row > .dt-layout-cell:has(> .ss3-search-panes) {
    grid-column: 1 / -1;
    min-width: 0;
}
.ss3-search-panes .dtsp-topRow .dtsp-subRow1 button.dtsp-searchIcon {
    position: static;
    flex: 0 0 auto;
}

/* The first visible business column defaults to left alignment for every type.
   Shared grid initialization maintains the marker across native visibility changes. */
:is(.ss3-grid-mode-responsive, .ss3-grid-shell) table.dataTable > :is(thead, tbody, tfoot) > tr > .ss3-grid-leading-column {
    text-align: left;
}
:is(.ss3-grid-mode-responsive, .ss3-grid-shell) table.dataTable > :is(thead, tfoot) > tr > .ss3-grid-leading-column > :is(.dt-column-header, .dt-column-footer) {
    flex-direction: row;
}