/* 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);
    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;
}

/* 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 > tbody > tr:nth-child(even):not(.ss3-sliding-child):not(.child) > *,
:is(.ss3-grid-mode-responsive, .ss3-grid-shell)[data-grid-display-only="true"] table.dataTable.ss3-grid-striped > tbody > tr:nth-child(even):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 > tbody > tr: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 > tbody tr > .sorting_1,
:is(.ss3-grid-mode-responsive, .ss3-grid-shell) table.dataTable.order-column > tbody tr > .sorting_2,
:is(.ss3-grid-mode-responsive, .ss3-grid-shell) table.dataTable.order-column > tbody tr > .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. */
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;
}

.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: 1px solid var(--ss3-color-divider-subtle);
    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);
    box-shadow: 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);
}