/*
 * Shared semantic table contract.
 *
 * Data tables retain native table layout at every viewport. Their immediate
 * frame owns horizontal overflow; rows and cells never become detached cards
 * or generate duplicate responsive labels. Presentation tables used by HTML
 * email are deliberately excluded.
 */

body :is(.content, .modal-card) :is(
    .app-table-frame,
    [data-table-frame],
    .account-details-table-shell,
    .newsroom-table-scroll,
    .ops-table-shell,
    .ops-email-delivery-frame,
    .ops-active-runs-table-frame,
    .ops-user-activity-table-frame,
    .ops-user-favorites-table-frame,
    .ops-user-detail-table-frame,
    .ops-report-table-scroll,
    .operation-action-report-table-shell
) {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    overscroll-behavior-x: contain;
    scrollbar-gutter: auto;
    -webkit-overflow-scrolling: touch;
}

body :is(.content, .modal-card) table:not([role="presentation"], .calendar-grid) {
    display: table;
    width: 100%;
    max-width: none;
}

body :is(.content, .modal-card) table:not([role="presentation"], .calendar-grid) > colgroup {
    display: table-column-group;
}

body :is(.content, .modal-card) table:not([role="presentation"], .calendar-grid) > thead {
    position: static;
    display: table-header-group;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

body :is(.content, .modal-card) table:not([role="presentation"], .calendar-grid) > tbody {
    display: table-row-group;
    width: auto;
}

body :is(.content, .modal-card)
    table:not([role="presentation"], .calendar-grid) > :is(thead, tbody) > tr[hidden],
body :is(.content, .modal-card)
    table:not([role="presentation"], .calendar-grid) > :is(thead, tbody) > tr.app-pagination-hidden {
    display: none;
}

body :is(.content, .modal-card)
    table:not([role="presentation"], .calendar-grid) > :is(thead, tbody) > tr:not([hidden]):not(.app-pagination-hidden) {
    display: table-row;
    width: auto;
    margin: 0;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
}

/*
 * Count only ordinary visible data rows so hidden pagination rows and
 * structural expansion rows never disturb the alternating sequence. Nested
 * semantic tables establish their own sequence through the same rule.
 */
:where(body :is(.content, .modal-card) table:not([role="presentation"], .calendar-grid) > tbody)
    > tr:nth-child(odd of :not(
        [hidden],
        .app-pagination-hidden,
        .app-table-child-row,
        [data-table-child-row],
        .ops-action-nested-row,
        .ops-schedule-nested-row,
        .ops-report-nested-row,
        .ops-user-create-row,
        .ops-user-detail-row,
        .ops-table-empty-row,
        .app-content-state-table-row
    )) {
    background-color: var(--app-surface-table-row);
}

:where(body :is(.content, .modal-card) table:not([role="presentation"], .calendar-grid) > tbody)
    > tr:nth-child(even of :not(
        [hidden],
        .app-pagination-hidden,
        .app-table-child-row,
        [data-table-child-row],
        .ops-action-nested-row,
        .ops-schedule-nested-row,
        .ops-report-nested-row,
        .ops-user-create-row,
        .ops-user-detail-row,
        .ops-table-empty-row,
        .app-content-state-table-row
    )) {
    background-color: var(--app-surface-table-row-alt);
}

body :is(.content, .modal-card)
    table:not([role="presentation"], .calendar-grid) > :is(thead, tbody) > tr > :is(th, td) {
    display: table-cell;
    width: auto;
    max-width: none;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
}

body :is(.content, .modal-card)
    table:not([role="presentation"], .calendar-grid) > tbody > tr > td::before {
    display: none;
    content: none;
}

body :is(.content, .modal-card)
    table:not([role="presentation"], .calendar-grid) > tbody > tr:is(
        .app-table-child-row,
        [data-table-child-row],
        .ops-action-nested-row,
        .ops-schedule-nested-row,
        .ops-report-nested-row,
        .ops-user-create-row,
        .ops-user-detail-row
    ):not([hidden]):not(.app-pagination-hidden) {
    display: table-row;
}

body :is(.content, .modal-card)
    table:not([role="presentation"], .calendar-grid) > tbody > tr:is(
        .app-table-child-row,
        [data-table-child-row],
        .ops-action-nested-row,
        .ops-schedule-nested-row,
        .ops-report-nested-row,
        .ops-user-create-row,
        .ops-user-detail-row
    ) > td[colspan] {
    display: table-cell;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding-inline: 0;
    overflow: visible;
}

body :is(.content, .modal-card) :is(
    .app-table-child-frame,
    [data-table-child-frame],
    .ops-nested-action-shell,
    .ops-nested-schedule-shell,
    .ops-report-table-shell
) {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin-inline: 0;
    overflow-x: auto;
    overflow-y: visible;
    overscroll-behavior-x: contain;
}

/* Shared sortable table headers keep sorting inside the semantic header cell.
   Server-rendered and client-rendered tables may use the same anatomy. */
body :is(.content, .modal-card)
    table:not([role="presentation"], .calendar-grid) > thead > tr > th:has(> .app-table-sort-button) {
    padding: 0;
}

.app-table-sort-button {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1.35rem;
    align-items: center;
    column-gap: 0.58rem;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: var(--app-control-min-height);
    margin: 0;
    padding: var(--app-control-padding-y) var(--app-control-padding-x);
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-align: left;
    text-decoration: none;
    text-transform: inherit;
    cursor: pointer;
}

.app-table-sort-button:hover {
    background: var(--app-overlay-accent-subtle);
    color: inherit;
}

.app-table-sort-button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -3px;
}

.app-table-sort-label {
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: normal;
}

/*
 * One visual contract for every application data table. Page styles may set
 * functional geometry such as column widths and minimum scroll widths, but
 * surfaces, borders, typography, spacing, hover, focus, and empty rows live
 * here. The file is loaded after page styles from base.html.
 */
html body :is(#mainContent, .modal-card) :is(
    .app-table-frame,
    [data-table-frame],
    .account-details-table-shell,
    .newsroom-table-scroll,
    .ops-table-shell,
    .ops-email-delivery-frame,
    .ops-active-runs-table-frame,
    .ops-user-activity-table-frame,
    .ops-user-favorites-table-frame,
    .ops-user-detail-table-frame,
    .ops-report-table-scroll,
    .operation-action-report-table-shell
) {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

html body :is(#mainContent, .modal-card) :is(
    .app-table-frame,
    [data-table-frame],
    .account-details-table-shell,
    .newsroom-table-scroll,
    .ops-table-shell,
    .ops-email-delivery-frame,
    .ops-active-runs-table-frame,
    .ops-user-activity-table-frame,
    .ops-user-favorites-table-frame,
    .ops-user-detail-table-frame,
    .ops-report-table-scroll,
    .operation-action-report-table-shell
):focus-visible {
    outline: 2px solid var(--app-color-focus);
    outline-offset: 3px;
}

html body :is(#mainContent, .modal-card) table:not([role="presentation"], .calendar-grid) {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    border: 1px solid var(--app-border-color-standard);
    border-radius: var(--app-surface-radius);
    border-collapse: separate;
    border-spacing: 0;
    background: var(--app-surface-table);
    background-clip: padding-box;
    box-shadow: none;
    color: var(--app-text-color-body);
}

html body :is(#mainContent, .modal-card) table:not([role="presentation"], .calendar-grid) > thead {
    background: var(--app-surface-table-header);
}

html body :is(#mainContent, .modal-card)
    table:not([role="presentation"], .calendar-grid) > thead > tr > th {
    box-sizing: border-box;
    min-height: var(--app-control-min-height);
    padding: var(--app-control-padding-y) var(--app-control-padding-x);
    border: 0;
    border-inline-end: 1px solid var(--app-border-color-standard);
    border-bottom: 1px solid var(--app-border-color-standard);
    background: transparent;
    color: var(--app-text-color-strong);
    font-size: var(--app-badge-font-size);
    font-weight: 900;
    letter-spacing: 0.035em;
    line-height: 1.25;
    text-align: left;
    text-transform: uppercase;
    vertical-align: middle;
}

html body :is(#mainContent, .modal-card)
    table:not([role="presentation"], .calendar-grid) > tbody > tr > :is(th, td) {
    box-sizing: border-box;
    min-width: 0;
    padding: var(--app-control-padding-y) var(--app-control-padding-x);
    border: 0;
    border-inline-end: 1px solid var(--app-border-color-standard);
    border-bottom: 1px solid var(--app-border-color-subtle);
    background: transparent;
    color: var(--app-text-color-body);
    font-size: var(--app-field-value-font-size);
    line-height: 1.45;
    text-align: left;
    vertical-align: top;
}

html body :is(#mainContent, .modal-card)
    table:not([role="presentation"], .calendar-grid) > :is(thead, tbody) > tr > :is(th, td):last-child {
    border-inline-end: 0;
}

html body :is(#mainContent, .modal-card)
    table:not([role="presentation"], .calendar-grid) > tbody > tr:last-child > :is(th, td) {
    border-bottom: 0;
}

html body :is(#mainContent, .modal-card)
    table:not([role="presentation"], .calendar-grid) > tbody > tr:not(.app-table-child-row, [data-table-child-row]) {
    transition: background-color 0.16s ease;
}

html body :is(#mainContent, .modal-card)
    table:not([role="presentation"], .calendar-grid) > tbody > tr:not(
        .app-table-child-row,
        [data-table-child-row],
        .ops-table-empty-row
    ):hover {
    background: var(--app-interactive-hover-surface);
}

html body :is(#mainContent, .modal-card)
    table:not([role="presentation"], .calendar-grid) .ops-table-empty-row > :is(th, td) {
    height: 4rem;
    color: var(--app-text-color-muted);
    font-weight: 700;
    text-align: left;
    vertical-align: middle;
}
.app-table-sort-icons {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    min-width: 1.35rem;
    min-height: 1.55rem;
}

.app-table-sort-icon {
    display: grid;
    place-items: center;
    width: 1rem;
    height: 0.72rem;
    font-size: 0.9rem;
    font-weight: 900;
    line-height: 0.72rem;
    opacity: 0.42;
    transition: opacity 120ms ease;
}

th[aria-sort="ascending"] .app-table-sort-icon.is-ascending,
th[aria-sort="descending"] .app-table-sort-icon.is-descending {
    opacity: 1;
}

th[aria-sort="ascending"] .app-table-sort-icon.is-descending,
th[aria-sort="descending"] .app-table-sort-icon.is-ascending {
    opacity: 0.16;
}

@media (prefers-reduced-motion: reduce) {
    .app-table-sort-icon {
        transition: none;
    }
}
/* Premium application-table surface. The scroll frame owns the continuous
 * border, clipping, radius, and depth; the semantic table remains native. */
html body :is(#mainContent, .modal-card) :is(
    .app-table-frame,
    [data-table-frame],
    .account-details-table-shell,
    .newsroom-table-scroll,
    .ops-table-shell,
    .ops-email-delivery-frame,
    .ops-active-runs-table-frame,
    .ops-user-activity-table-frame,
    .ops-user-favorites-table-frame,
    .ops-user-detail-table-frame,
    .ops-report-table-scroll,
    .operation-action-report-table-shell
) {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid var(--app-border-color-standard);
    border-radius: var(--app-surface-radius);
    background: var(--app-surface-table);
    box-shadow: var(--app-shadow-table-frame);
    isolation: isolate;
}

html body :is(#mainContent, .modal-card) :is(
    .app-table-frame,
    [data-table-frame],
    .account-details-table-shell,
    .newsroom-table-scroll,
    .ops-table-shell,
    .ops-email-delivery-frame,
    .ops-active-runs-table-frame,
    .ops-user-activity-table-frame,
    .ops-user-favorites-table-frame,
    .ops-user-detail-table-frame,
    .ops-report-table-scroll,
    .operation-action-report-table-shell
) > table:not([role="presentation"], .calendar-grid) {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

html body :is(#mainContent, .modal-card) table:not([role="presentation"], .calendar-grid) > thead {
    background-color: var(--app-surface-table-header);
    background-image: var(--app-gradient-table-header);
}

html body :is(#mainContent, .modal-card)
    table:not([role="presentation"], .calendar-grid) > thead > tr > th {
    padding: clamp(0.72rem, 1vw, 0.88rem) clamp(0.82rem, 1.4vw, 1rem);
    border-inline-end: 0;
    letter-spacing: 0.045em;
}

html body :is(#mainContent, .modal-card)
    table:not([role="presentation"], .calendar-grid) > tbody > tr > :is(th, td) {
    padding: clamp(0.76rem, 1.1vw, 0.94rem) clamp(0.82rem, 1.4vw, 1rem);
    border-inline-end: 0;
}

html body :is(#mainContent, .modal-card)
    table:not([role="presentation"], .calendar-grid) > tbody > tr:not(
        .app-table-child-row,
        [data-table-child-row],
        .ops-table-empty-row
    ):is(:hover, :focus-within) {
    background: var(--app-interactive-hover-surface);
}

html body :is(#mainContent, .modal-card)
    table:not([role="presentation"], .calendar-grid) > tbody > tr:not(
        .app-table-child-row,
        [data-table-child-row],
        .ops-table-empty-row
    ):is(:hover, :focus-within) > :first-child {
    box-shadow: var(--app-shadow-table-row-hover);
}

@media (prefers-reduced-motion: reduce) {
    html body :is(#mainContent, .modal-card)
        table:not([role="presentation"], .calendar-grid) > tbody > tr {
        transition: none;
    }
}