/* Opt-in records: unclassified and document tables retain their existing owners. */
.hr-table-region {
    max-width: 100%;
    min-width: 0;
}

.hr-table-region:has(> .hr-table[data-hr-table-mode]) {
    overflow-x: auto;
}

.hr-table-scroll-cue {
    color: var(--hr-color-text-muted);
    font-size: var(--hr-font-size-small);
    margin: var(--hr-space-2) 0;
}

.hr-table-region[tabindex]:focus-visible {
    outline: 2px solid var(--hr-color-focus);
    outline-offset: 3px;
}

.hr-table[data-hr-table-mode="record-card"],
.hr-table[data-hr-table-mode="deliberate-scroll"] {
    border-collapse: collapse;
    min-width: 100%;
    table-layout: auto;
    width: 100%;
}

.hr-table[data-hr-table-mode="record-card"] > :is(thead, tbody, tfoot) > tr > :is(th, td),
.hr-table[data-hr-table-mode="deliberate-scroll"] > :is(thead, tbody, tfoot) > tr > :is(th, td) {
    border-bottom: 1px solid var(--hr-color-border);
    overflow-wrap: break-word;
    padding: var(--hr-space-3);
    text-align: left;
    vertical-align: top;
    white-space: normal;
    width: auto;
    word-break: normal;
}

.hr-table[data-hr-table-mode="record-card"] :is(.table-preview, .long-text) {
    max-width: 28rem;
    overflow-wrap: anywhere;
    white-space: normal;
}

.hr-table[data-hr-table-mode="record-card"] > tbody > tr > td {
    max-width: 22rem;
    min-width: 7rem;
    overflow-wrap: anywhere;
}

.hr-table[data-hr-table-mode="deliberate-scroll"] {
    width: max-content;
}

.hr-table[data-hr-table-mode="deliberate-scroll"] > thead > tr > th {
    white-space: nowrap;
}

@media screen and (min-width: 721px) {
    .hr-table.timekeeping-needs-review-table[data-hr-table-mode="record-card"] > thead > tr > th.sortable-header {
        padding-block: 0;
    }

    .hr-table.timekeeping-needs-review-table[data-hr-table-mode="record-card"] > thead > tr > th.actions-cell {
        padding-block: var(--hr-space-3);
    }

    .timekeeping-needs-review-action-heading {
        display: inline;
    }

    .hr-table:is(.daily-schedule-table, .daily-other-table)[data-hr-table-mode="record-card"] {
        border-collapse: separate;
        border-spacing: 0;
        min-width: 0;
        padding-inline-end: 3px;
        table-layout: fixed;
        width: 100%;
    }

    .hr-table:is(.daily-schedule-table, .daily-other-table)[data-hr-table-mode="record-card"] > :is(thead, tbody) > tr > :is(th, td) {
        max-width: none;
        min-width: 0;
        overflow-wrap: anywhere;
        padding: var(--hr-space-2);
        padding-inline-end: calc(var(--hr-space-2) + 2px);
    }

    .hr-table.daily-schedule-table[data-hr-table-mode="record-card"] > :is(thead, tbody) > tr > :is(th, td):nth-child(1) { width: 11%; }
    .hr-table.daily-schedule-table[data-hr-table-mode="record-card"] > :is(thead, tbody) > tr > :is(th, td):nth-child(2) { width: 13%; }
    .hr-table.daily-schedule-table[data-hr-table-mode="record-card"] > :is(thead, tbody) > tr > :is(th, td):nth-child(3) { width: 13%; }
    .hr-table.daily-schedule-table[data-hr-table-mode="record-card"] > :is(thead, tbody) > tr > :is(th, td):nth-child(4) { width: 12%; }
    .hr-table.daily-schedule-table[data-hr-table-mode="record-card"] > :is(thead, tbody) > tr > :is(th, td):nth-child(5) { width: 15%; }
    .hr-table.daily-schedule-table[data-hr-table-mode="record-card"] > :is(thead, tbody) > tr > :is(th, td):nth-child(6) { width: 36%; }

    .hr-table.daily-other-table[data-hr-table-mode="record-card"] > :is(thead, tbody) > tr > :is(th, td):nth-child(1) { width: 10%; }
    .hr-table.daily-other-table[data-hr-table-mode="record-card"] > :is(thead, tbody) > tr > :is(th, td):nth-child(2) { width: 12%; }
    .hr-table.daily-other-table[data-hr-table-mode="record-card"] > :is(thead, tbody) > tr > :is(th, td):nth-child(3) { width: 16%; }
    .hr-table.daily-other-table[data-hr-table-mode="record-card"] > :is(thead, tbody) > tr > :is(th, td):nth-child(4) { width: 14%; }
    .hr-table.daily-other-table[data-hr-table-mode="record-card"] > :is(thead, tbody) > tr > :is(th, td):nth-child(5) { width: 16%; }
    .hr-table.daily-other-table[data-hr-table-mode="record-card"] > :is(thead, tbody) > tr > :is(th, td):nth-child(6) { width: 32%; }

    .hr-table:is(.daily-schedule-table, .daily-other-table)[data-hr-table-mode="record-card"] > thead > tr > th {
        overflow-wrap: normal;
        vertical-align: top;
        word-break: normal;
    }

    .hr-table:is(.daily-schedule-table, .daily-other-table)[data-hr-table-mode="record-card"] > thead > tr > th.sortable-header {
        padding-block: 0;
    }

    .hr-table:is(.daily-schedule-table, .daily-other-table)[data-hr-table-mode="record-card"]:has(.table-sort-button) > thead > tr > th.actions-cell {
        padding-block: 12px;
    }

    .hr-table.daily-schedule-table[data-hr-table-mode="record-card"] > tbody > tr > :is(td:nth-child(1), td:nth-child(3), td:nth-child(4)),
    .hr-table.daily-other-table[data-hr-table-mode="record-card"] > tbody > tr > :is(td:nth-child(1), td:nth-child(2)) {
        overflow-wrap: normal;
        white-space: nowrap;
        word-break: normal;
    }

    .hr-table:is(.daily-schedule-table, .daily-other-table)[data-hr-table-mode="record-card"] .actions-cell {
        min-width: 0;
    }

    .hr-table:is(.daily-schedule-table, .daily-other-table)[data-hr-table-mode="record-card"] .hr-action {
        max-width: 100%;
        min-width: 0;
    }

    .hr-table:is(.daily-schedule-table, .daily-other-table)[data-hr-table-mode="record-card"] .table-sort-button {
        overflow-wrap: normal;
        white-space: normal;
        word-break: normal;
    }

    .hr-table.daily-schedule-table[data-hr-table-mode="record-card"] .manual-resolution-form [name="eventTime"] {
        min-width: 11.5rem;
        width: 100%;
    }

    .hr-table.clock-event-history-table[data-hr-table-mode="record-card"] {
        min-width: 68rem;
    }

    .hr-table.clock-event-history-table[data-hr-table-mode="record-card"] > :is(thead, tbody) > tr > :is(:nth-child(1), :nth-child(2), :nth-child(3), :nth-child(4), :nth-child(5), :nth-child(6), :nth-child(7), :nth-child(8)) {
        min-width: 0;
        overflow-wrap: normal;
        word-break: normal;
    }

    .hr-table.clock-event-history-table[data-hr-table-mode="record-card"] > :is(thead, tbody) > tr > :is(:nth-child(1), :nth-child(2), :nth-child(3), :nth-child(6)) {
        white-space: nowrap;
    }

    .hr-table.clock-event-history-table[data-hr-table-mode="record-card"] > :is(thead, tbody) > tr > :nth-child(6) {
        min-width: 8rem;
    }

    .hr-table.clock-event-history-table[data-hr-table-mode="record-card"] > :is(thead, tbody) > tr > :nth-child(9) {
        min-width: 12rem;
        overflow-wrap: break-word;
    }

    .hr-table.clock-event-history-table[data-hr-table-mode="record-card"] > :is(thead, tbody) > tr > :nth-child(10) {
        min-width: 18rem;
    }

    .hr-table.clock-event-history-table[data-hr-table-mode="record-card"] .hr-action {
        white-space: nowrap;
    }

    .hr-table.payroll-preview-readiness-table {
        min-width: 780px;
    }

    .hr-table.overtime-decision-table[data-hr-table-mode="record-card"] {
        min-width: 78rem;
    }

    #overtime-recent-decisions .hr-table.overtime-decision-table[data-hr-table-mode="record-card"] {
        min-width: 75rem;
        table-layout: fixed;
    }

    #overtime-recent-decisions .hr-table.overtime-decision-table[data-hr-table-mode="record-card"] > :is(thead, tbody) > tr > :nth-child(10) {
        width: 24%;
    }

    #overtime-recent-decisions .hr-table.overtime-decision-table[data-hr-table-mode="record-card"] > thead > tr > th.sortable-header {
        padding-block: 0;
        padding-inline: var(--hr-space-3);
    }

    #overtime-pending-decisions .hr-table.overtime-decision-table[data-hr-table-mode="record-card"] {
        min-width: 0;
        table-layout: auto;
        width: 100%;
    }

    #overtime-pending-decisions .hr-table.overtime-decision-table[data-hr-table-mode="record-card"] > tbody > tr > td {
        overflow-wrap: normal;
        word-break: normal;
    }

    #overtime-pending-decisions .hr-table.overtime-decision-table[data-hr-table-mode="record-card"] > :is(thead, tbody) > tr > :is(:nth-child(2), :nth-child(4), :nth-child(6)) {
        white-space: nowrap;
    }

    #overtime-pending-decisions .hr-table.overtime-decision-table[data-hr-table-mode="record-card"] > thead > tr > th.sortable-header {
        padding-block: 0;
        padding-inline: var(--hr-space-3);
    }

    #overtime-pending-decisions .hr-table.overtime-decision-table[data-hr-table-mode="record-card"] > thead > tr > th:first-child:not(.sortable-header) {
        padding-inline-start: calc(var(--hr-space-3) + 2px);
    }

    .hr-table.payroll-preview-readiness-table > tbody > tr > :is(.payroll-readiness-setup-cell, .payroll-readiness-rate-cell) {
        min-width: 190px;
    }

    /* Operations forms need usable input widths inside desktop records. */
    .hr-table.hr-table--operations-records > tbody > tr > td:has(form, .early-clock-out-details) {
        min-width: 20rem;
    }

    #overtime-recent-decisions .hr-table.overtime-decision-table[data-hr-table-mode="record-card"] > tbody > tr > td.actions-cell:has(.classification-review) {
        min-width: 0;
    }

    #overtime-pending-decisions .hr-table.overtime-decision-table[data-hr-table-mode="record-card"] > tbody > tr > td.actions-cell:has(.overtime-pending-review) {
        min-width: 0;
    }

    .hr-table.hr-table--operations-records:is(.daily-schedule-table, .daily-other-table) > tbody > tr > td.actions-cell:has(form) {
        min-width: 0;
    }

    .hr-table:is(.compact-exception-table, .clock-event-history-table)[data-hr-table-mode="record-card"] > thead > tr > th.sortable-header {
        padding-block: 0;
    }

    .hr-table.hr-table--operations-records > thead .table-sort-button {
        padding-inline: 0;
    }

    .hr-table[data-hr-table-mode="record-card"] { display: table; }
    .hr-table[data-hr-table-mode="record-card"] > thead { display: table-header-group; }
    .hr-table[data-hr-table-mode="record-card"] > tbody { display: table-row-group; }
    .hr-table[data-hr-table-mode="record-card"] > :is(thead, tbody, tfoot) > tr { display: table-row; }
    .hr-table[data-hr-table-mode="record-card"] > :is(thead, tbody, tfoot) > tr > :is(th, td) {
        display: table-cell;
    }
    .hr-table[data-hr-table-mode="record-card"] > tbody > tr > td::before { content: none; }

    /* Inspection columns retain their alignment until the record-card breakpoint. */
    .hr-table.toolbox-inspection-items[data-hr-table-mode="record-card"] > :is(thead, tbody) > tr > :is(:nth-child(2), :nth-child(3)) {
        text-align: center;
    }

    .hr-table.toolbox-inspection-items[data-hr-table-mode="record-card"] > thead > tr > :is(:nth-child(2), :nth-child(3)) .table-sort-button {
        justify-content: center;
        text-align: center;
    }

    .hr-table.toolbox-inspection-items[data-hr-table-mode="record-card"] .toolbox-inspection-present {
        justify-content: center;
        margin-inline: auto;
    }

    .hr-table.toolbox-inspection-items[data-hr-table-mode="record-card"] > thead > tr > :nth-child(4) .table-sort-button {
        padding-inline: 10px;
    }

    .hr-table.toolbox-inspection-items[data-hr-table-mode="record-card"] .toolbox-inspection-counted {
        max-width: 120px;
        width: 120px;
    }
}

@media screen and (min-width: 721px) and (max-width: 981px) {
    .hr-table:is(.daily-schedule-table, .daily-other-table)[data-hr-table-mode="record-card"] > :is(thead, tbody) > tr > :is(th, td) {
        padding: 4px 3px;
    }

    .hr-table:is(.daily-schedule-table, .daily-other-table)[data-hr-table-mode="record-card"] .hr-status {
        display: inline-block;
        overflow-wrap: anywhere;
        padding: 2px 3px;
        word-break: break-word;
    }
}

/* Pending decisions become readable cards when the workbench leaves no more than
   80rem for the expanded nine-column table. This is an intrinsic component boundary, not a
   new page viewport breakpoint. */
.overtime-pending-table-region {
    container: overtime-pending-table / inline-size;
}

@container overtime-pending-table (max-width: 80rem) {
    .overtime-pending-table-region {
        overflow: visible;
    }

    .overtime-pending-table-region > .overtime-decision-table,
    .overtime-pending-table-region > .overtime-decision-table > tbody,
    .overtime-pending-table-region > .overtime-decision-table > tbody > tr,
    .overtime-pending-table-region > .overtime-decision-table > tbody > tr > td {
        box-sizing: border-box;
        display: block;
        max-width: 100%;
        min-width: 0;
        width: 100% !important;
    }

    .overtime-pending-table-region > .overtime-decision-table > thead {
        border: 0;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        white-space: nowrap;
        width: 1px;
    }

    .overtime-pending-table-region > .overtime-decision-table > thead:has(.table-sort-button) {
        clip: auto;
        clip-path: none;
        display: block;
        height: auto;
        margin: 0 0 var(--hr-space-3);
        overflow: visible;
        position: static;
        white-space: normal;
        width: 100%;
    }

    .overtime-pending-table-region > .overtime-decision-table > thead:has(.table-sort-button)::before {
        color: var(--hr-color-text-muted);
        content: "Sort records";
        display: block;
        font-size: var(--hr-font-size-small);
        margin-bottom: var(--hr-space-2);
    }

    .overtime-pending-table-region > .overtime-decision-table > thead:has(.table-sort-button) > tr {
        display: flex;
        flex-wrap: wrap;
        gap: var(--hr-space-2);
    }

    .overtime-pending-table-region > .overtime-decision-table > thead:has(.table-sort-button) > tr > th {
        border: 0;
        display: block;
        padding: 0;
        width: auto;
    }

    .overtime-pending-table-region .table-sort-button {
        border: 1px solid var(--hr-color-border);
        border-radius: var(--hr-radius-control);
        min-height: var(--hr-control-height-compact);
        padding: var(--hr-space-2);
        white-space: normal;
    }

    .overtime-pending-table-region > .overtime-decision-table > thead:has(.table-sort-button) > tr > th.actions-cell {
        align-items: center;
        display: flex;
        min-height: var(--hr-control-height-compact);
        padding: var(--hr-space-2);
    }

    .overtime-pending-table-region > .overtime-decision-table > tbody > tr {
        background: var(--hr-color-surface);
        border: 1px solid var(--hr-color-border);
        border-radius: var(--hr-radius-surface);
        margin: 0 0 var(--hr-space-4);
        overflow: visible;
    }

    .overtime-pending-table-region > .overtime-decision-table > tbody > tr > td {
        min-height: 0;
        overflow: visible;
        overflow-wrap: normal;
        text-align: left;
        white-space: normal;
    }

    .overtime-pending-table-region > .overtime-decision-table > tbody > tr > td:last-child {
        border-bottom: 0;
    }

    .overtime-pending-table-region > .overtime-decision-table > tbody > tr > td[data-label]::before {
        color: var(--hr-color-text-muted);
        content: attr(data-label);
        display: block;
        font-size: var(--hr-font-size-small);
        font-weight: var(--hr-font-weight-bold);
        margin-bottom: var(--hr-space-1);
    }

    .overtime-pending-table-region .overtime-pending-review,
    .overtime-pending-table-region .overtime-decision-form,
    .overtime-pending-table-region .overtime-decision-field,
    .overtime-pending-table-region [class~="hr-control"] {
        box-sizing: border-box;
        max-width: 100%;
        min-width: 0;
        width: 100%;
    }

    .overtime-pending-table-region .overtime-pending-review__summary {
        width: fit-content;
    }
}

.daily-schedule-section {
    container-type: inline-size;
}

@media screen and (min-width: 721px) {
    @container (max-width: 36rem) {
        .hr-table:is(.daily-schedule-table, .daily-other-table)[data-hr-table-mode="record-card"],
        .hr-table:is(.daily-schedule-table, .daily-other-table)[data-hr-table-mode="record-card"] > tbody,
        .hr-table:is(.daily-schedule-table, .daily-other-table)[data-hr-table-mode="record-card"] > tbody > tr > td {
            box-sizing: border-box;
            display: block;
            max-width: 100%;
            min-width: 0;
            width: 100%;
        }

        .hr-table:is(.daily-schedule-table, .daily-other-table)[data-hr-table-mode="record-card"] > thead {
            border: 0;
            clip: rect(0 0 0 0);
            clip-path: inset(50%);
            display: table-header-group;
            height: 1px;
            margin: -1px;
            overflow: hidden;
            padding: 0;
            position: absolute;
            white-space: nowrap;
            width: 1px;
        }

        .hr-table:is(.daily-schedule-table, .daily-other-table)[data-hr-table-mode="record-card"] > thead:has(.table-sort-button) {
            clip: auto;
            clip-path: none;
            display: block;
            height: auto;
            margin: 0 0 var(--hr-space-3);
            overflow: visible;
            position: static;
            white-space: normal;
            width: 100%;
        }

        .hr-table:is(.daily-schedule-table, .daily-other-table)[data-hr-table-mode="record-card"] > thead:has(.table-sort-button)::before {
            color: var(--hr-color-text-muted);
            content: "Sort records";
            font-size: var(--hr-font-size-small);
        }

        .hr-table:is(.daily-schedule-table, .daily-other-table)[data-hr-table-mode="record-card"] > thead:has(.table-sort-button) > tr {
            display: flex;
            flex-wrap: wrap;
            gap: var(--hr-space-2);
        }

        .hr-table:is(.daily-schedule-table, .daily-other-table)[data-hr-table-mode="record-card"] > thead:has(.table-sort-button) > tr > th {
            border: 0;
            display: block;
            padding: 0;
            width: auto;
        }

        .hr-table:is(.daily-schedule-table, .daily-other-table)[data-hr-table-mode="record-card"] > tbody > tr {
            background: var(--hr-color-surface);
            border: 1px solid var(--hr-color-border);
            border-radius: var(--hr-radius-surface);
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            margin: 0 0 var(--hr-space-4);
            overflow: visible;
        }

        .hr-table:is(.daily-schedule-table, .daily-other-table)[data-hr-table-mode="record-card"] > tbody > tr > td {
            min-height: 0;
            overflow: visible;
            overflow-wrap: anywhere;
            text-align: left;
            white-space: normal;
            width: auto !important;
        }

        .hr-table:is(.daily-schedule-table, .daily-other-table)[data-hr-table-mode="record-card"] > tbody > tr > td[data-label]::before {
            color: var(--hr-color-text-muted);
            content: attr(data-label);
            display: block;
            font-size: var(--hr-font-size-small);
            font-weight: var(--hr-font-weight-bold);
            margin-bottom: var(--hr-space-1);
        }

        .hr-table:is(.daily-schedule-table, .daily-other-table)[data-hr-table-mode="record-card"] > tbody > tr > :is(.actions-cell, .long-text) {
            grid-column: 1 / -1;
        }

        .hr-table:is(.daily-schedule-table, .daily-other-table)[data-hr-table-mode="record-card"] .actions-cell :is([name="eventTime"], [name="notes"], [name="scheduleSlot"], [name="linkNotes"], [name="reviewNotes"]) {
            width: 100%;
        }

        .hr-table:is(.daily-schedule-table, .daily-other-table)[data-hr-table-mode="record-card"] .hr-status {
            overflow-wrap: normal;
            word-break: normal;
        }
    }
}

.overtime-decision-table .actions-cell > .action-stack {
    align-items: flex-start;
    justify-content: flex-start;
}

.overtime-pending-review {
    max-width: 100%;
    min-width: 0;
    text-align: left;
    width: fit-content;
}

.overtime-pending-review[open] {
    width: 100%;
}

@media screen and (min-width: 721px) {
    #overtime-pending-decisions .hr-table.overtime-decision-table[data-hr-table-mode="record-card"] > tbody > tr > td.actions-cell:has(> .overtime-pending-review[open]) {
        min-width: 22rem;
    }
}

.overtime-pending-review__summary {
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    max-width: 100%;
    padding-inline-end: calc(var(--hr-space-6) + var(--hr-space-2));
    position: relative;
    width: fit-content;
}

.overtime-pending-review__summary::after {
    color: var(--hr-color-text-muted);
    content: "\203A";
    font-size: var(--hr-font-size-section-title);
    inset-inline-end: var(--hr-space-2);
    line-height: 1;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.overtime-pending-review[open] > .overtime-pending-review__summary::after {
    transform: translateY(-50%) rotate(90deg);
}

.overtime-pending-review .overtime-decision-form {
    margin-top: var(--hr-space-3);
}

#overtime-recent-decisions .overtime-decision-table .actions-cell > .action-stack {
    justify-content: flex-end;
}

.overtime-decision-table .actions-cell > .action-stack > .hr-action {
    flex: 0 0 auto;
    width: auto;
}

#overtime-recent-decisions .classification-review {
    flex: 1 1 100%;
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
    text-align: left;
    white-space: normal;
    width: 100%;
}

#overtime-recent-decisions .classification-review[open] {
    flex: 1 1 100%;
    width: 100%;
}

#overtime-recent-decisions .classification-review__summary {
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    margin-inline-start: auto;
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
    padding-inline-end: calc(var(--hr-space-6) + var(--hr-space-2));
    position: relative;
    width: fit-content;
}

#overtime-recent-decisions .classification-review__summary::after {
    color: var(--hr-color-text-muted);
    content: "\203A";
    font-size: var(--hr-font-size-section-title);
    inset-inline-end: var(--hr-space-2);
    line-height: 1;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

#overtime-recent-decisions .classification-review[open] > .classification-review__summary::after {
    transform: translateY(-50%) rotate(90deg);
}

#overtime-recent-decisions .classification-review__form {
    box-sizing: border-box;
    display: grid;
    gap: var(--hr-space-3);
    margin-top: var(--hr-space-3);
    max-width: 100%;
    min-width: 0;
    width: 100%;
}

#overtime-recent-decisions .classification-review__explanation,
#overtime-recent-decisions .classification-review__feedback {
    margin: 0;
}

#overtime-recent-decisions .classification-review__explanation {
    color: var(--hr-color-text-muted);
    line-height: var(--hr-line-height-body);
}

#overtime-recent-decisions .classification-review__feedback {
    box-sizing: border-box;
    max-width: 100%;
    width: 100%;
}

.employee-overtime-summary__heading {
    margin: 0;
    padding-inline-end: calc(var(--hr-space-6) + var(--hr-space-2));
    position: relative;
}

.employee-overtime-summary__heading::after {
    color: var(--hr-color-text-muted);
    content: "\203A";
    font-size: var(--hr-font-size-page-title);
    inset-inline-end: 0;
    line-height: 1;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.employee-overtime-summary[open] > .employee-overtime-summary__heading::after {
    transform: translateY(-50%) rotate(90deg);
}

.employee-overtime-summary__body {
    display: grid;
    gap: var(--hr-space-4);
    margin-top: var(--hr-space-4);
    min-width: 0;
}

.employee-overtime-summary__body > .hr-action-group {
    justify-content: flex-start;
}

.overtime-decision-form {
    align-items: end;
    gap: var(--hr-space-3);
    margin: 0;
    width: 100%;
}

.overtime-decision-form__actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--hr-space-2);
}

.overtime-decision-form__actions .hr-action {
    flex: 0 0 auto;
    width: auto;
}

@media screen and (max-width: 720px) {
    .hr-table.hr-table--operations-records .actions-cell.has-timekeeping-correction {
        min-width: 0;
    }

    .hr-table-region:has(> .hr-table[data-hr-table-mode="record-card"]) {
        overflow: visible;
    }

    .hr-table[data-hr-table-mode="record-card"],
    .hr-table[data-hr-table-mode="record-card"] > :is(tbody, tfoot),
    .hr-table[data-hr-table-mode="record-card"] > :is(thead, tbody, tfoot) > tr,
    .hr-table[data-hr-table-mode="record-card"] > :is(thead, tbody, tfoot) > tr > :is(th, td) {
        box-sizing: border-box;
        display: block;
        max-width: 100%;
        min-width: 0;
        width: 100%;
    }

    .hr-table[data-hr-table-mode="record-card"] > colgroup { display: none; }

    /* Headers stay semantic; enhanced sort buttons remain visible on touch screens. */
    .hr-table[data-hr-table-mode="record-card"] > thead {
        border: 0;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        display: table-header-group;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        white-space: nowrap;
        width: 1px;
    }

    .hr-table[data-hr-table-mode="record-card"] > thead:has(.table-sort-button) {
        clip: auto;
        clip-path: none;
        display: block;
        height: auto;
        margin: 0 0 var(--hr-space-3);
        overflow: visible;
        position: static;
        white-space: normal;
        width: 100%;
    }

    .hr-table[data-hr-table-mode="record-card"] > thead:has(.table-sort-button)::before {
        color: var(--hr-color-text-muted);
        content: "Sort records";
        font-size: var(--hr-font-size-small);
    }

    .hr-table[data-hr-table-mode="record-card"] > thead:has(.table-sort-button) > tr {
        display: flex;
        flex-wrap: wrap;
        gap: var(--hr-space-2);
    }

    .hr-table[data-hr-table-mode="record-card"] > thead:has(.table-sort-button) > tr > th {
        border: 0;
        padding: 0;
        width: auto;
    }

    .hr-table[data-hr-table-mode="record-card"] .table-sort-button {
        border: 1px solid var(--hr-color-border);
        border-radius: var(--hr-radius-control);
        min-height: var(--hr-control-height-compact);
        padding: var(--hr-space-2);
        white-space: normal;
    }

    .hr-table[data-hr-table-mode="record-card"] > :is(tbody, tfoot) > tr {
        background: var(--hr-color-surface);
        border: 1px solid var(--hr-color-border);
        border-radius: var(--hr-radius-surface);
        margin: 0 0 var(--hr-space-4);
        overflow: visible;
    }

    .hr-table[data-hr-table-mode="record-card"] > :is(tbody, tfoot) > tr > :is(th, td) {
        min-height: 0;
        overflow: visible;
        overflow-wrap: anywhere;
        text-align: left;
    }

    .hr-table[data-hr-table-mode="record-card"] > :is(tbody, tfoot) > tr > :is(th, td):last-child {
        border-bottom: 0;
    }

    .hr-table[data-hr-table-mode="record-card"] > :is(tbody, tfoot) > tr > [data-label]::before {
        color: var(--hr-color-text-muted);
        content: attr(data-label);
        display: block;
        font-size: var(--hr-font-size-small);
        font-weight: var(--hr-font-weight-bold);
        margin-bottom: var(--hr-space-1);
        text-transform: none;
    }

    .hr-table[data-hr-table-mode="record-card"] :is(.hr-action, .hr-status, .action-stack, .table-preview, .long-text) {
        box-sizing: border-box;
        max-width: 100%;
        min-width: 0;
        white-space: normal;
        word-break: normal;
    }

    .hr-table[data-hr-table-mode="record-card"] .hr-action {
        height: auto;
        min-height: var(--hr-control-height-compact);
        overflow-wrap: normal;
    }

    .hr-table-region .hr-table.payroll-payslip-register[data-hr-table-mode="record-card"] > tbody > tr {
        grid-template-columns: minmax(0, 1fr);
    }

    .hr-table-region .hr-table.payroll-payslip-register[data-hr-table-mode="record-card"] > tbody > tr > .payroll-payslip-register__wide {
        grid-column: auto;
    }

}

/* Paging and conditional rows must not be resurrected by responsive display rules. */
.hr-table[data-hr-table-mode="record-card"] [hidden] {
    display: none;
}

/* The finalised payslip register is a compact two-column record layout at
   desktop widths and a single-column record layout on small screens. */
.hr-table-region:has(> .payroll-payslip-register) {
    overflow: visible;
}

.hr-table.payroll-payslip-register[data-hr-table-mode="record-card"],
.hr-table.payroll-payslip-register[data-hr-table-mode="record-card"] > tbody,
.hr-table.payroll-payslip-register[data-hr-table-mode="record-card"] > tbody > tr,
.hr-table.payroll-payslip-register[data-hr-table-mode="record-card"] > tbody > tr > td {
    box-sizing: border-box;
    display: block;
    max-width: 100%;
    min-width: 0;
    width: 100%;
}

.hr-table.payroll-payslip-register[data-hr-table-mode="record-card"] > thead {
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.hr-table.payroll-payslip-register[data-hr-table-mode="record-card"] > thead:has(.table-sort-button) {
    clip: auto;
    clip-path: none;
    display: block;
    height: auto;
    margin: 0 0 var(--hr-space-3);
    overflow: visible;
    position: static;
    white-space: normal;
    width: 100%;
}

.hr-table.payroll-payslip-register[data-hr-table-mode="record-card"] > thead:has(.table-sort-button)::before {
    color: var(--hr-color-text-muted);
    content: "Sort records";
    display: block;
    font-size: var(--hr-font-size-small);
    margin-bottom: var(--hr-space-2);
}

.hr-table.payroll-payslip-register[data-hr-table-mode="record-card"] > thead:has(.table-sort-button) > tr {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hr-space-2);
}

.hr-table.payroll-payslip-register[data-hr-table-mode="record-card"] > thead:has(.table-sort-button) > tr > th {
    border: 0;
    display: block;
    padding: 0;
    width: auto;
}

.hr-table.payroll-payslip-register[data-hr-table-mode="record-card"] .table-sort-button {
    border: 1px solid var(--hr-color-border);
    border-radius: var(--hr-radius-control);
    min-height: var(--hr-control-height-compact);
    padding: var(--hr-space-2);
    white-space: normal;
}

.hr-table.payroll-payslip-register[data-hr-table-mode="record-card"] > thead:has(.table-sort-button) > tr > th.actions-cell {
    align-items: center;
    display: flex;
    min-height: var(--hr-control-height-compact);
    padding: var(--hr-space-2);
}

.payroll-payslip-history__summary {
    cursor: pointer;
    list-style: none;
    padding-inline-end: calc(var(--hr-space-6) + var(--hr-space-2));
    position: relative;
}

.payroll-payslip-history__summary::-webkit-details-marker {
    display: none;
}

.payroll-payslip-history__summary::after {
    color: var(--hr-color-text-muted);
    content: "\203A";
    font-size: var(--hr-font-size-page-title);
    inset-inline-end: 0;
    line-height: 1;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.payroll-payslip-history[open] > .payroll-payslip-history__summary::after {
    transform: translateY(-50%) rotate(90deg);
}

.payroll-payslip-history__body {
    margin-top: var(--hr-space-4);
    min-width: 0;
}

.hr-table.payroll-payslip-register[data-hr-table-mode="record-card"] > tbody > tr {
    background: var(--hr-color-surface);
    border: 1px solid var(--hr-color-border);
    border-radius: var(--hr-radius-surface);
    display: grid;
    gap: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0 0 var(--hr-space-4);
    overflow: visible;
}

.hr-table.payroll-payslip-register[data-hr-table-mode="record-card"] > tbody > tr > td {
    min-height: 0;
    overflow: visible;
    overflow-wrap: anywhere;
    padding: var(--hr-space-3);
    text-align: left;
}

.hr-table.payroll-payslip-register[data-hr-table-mode="record-card"] > tbody > tr > td[data-label]::before {
    color: var(--hr-color-text-muted);
    content: attr(data-label);
    display: block;
    font-size: var(--hr-font-size-small);
    font-weight: var(--hr-font-weight-bold);
    margin-bottom: var(--hr-space-1);
}

.hr-table.payroll-payslip-register[data-hr-table-mode="record-card"] > tbody > tr > .payroll-payslip-register__wide {
    grid-column: 1 / -1;
}

.hr-table--operations-records .timekeeping-correction-form,
.hr-table--operations-records .early-clock-out-leave-link-form {
    grid-template-columns: minmax(0, 1fr);
}

.hr-table--operations-records .early-clock-out-leave-link-form .hr-action {
    grid-column: 1;
    grid-row: auto;
}

.hr-table--operations-records .inline-resolution-form {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    max-width: 100%;
    min-width: 0;
}

.hr-table--operations-records .fire-extinguisher-history-notes {
    display: grid;
    gap: var(--hr-space-1);
}

/* Ten overview fields; administrative notes remain in the owning detail. */
.cash-advance-history-region {
    container: cash-advance-history / inline-size;
}

.hr-table.cash-advance-history-table[data-hr-table-mode="record-card"] > :is(thead, tbody) > tr > :is(th, td) {
    min-width: 0;
    overflow-wrap: normal;
    padding-inline: var(--hr-space-2);
}

.hr-table.cash-advance-history-table[data-hr-table-mode="record-card"] > tbody > tr > .long-text {
    min-width: 11rem;
    overflow-wrap: anywhere;
}

.hr-table.cash-advance-history-table[data-hr-table-mode="record-card"] > tbody > tr > :is([data-label="Date"], [data-sort-number]) {
    white-space: nowrap;
}

.hr-table.cash-advance-history-table[data-hr-table-mode="record-card"] .hr-action {
    overflow-wrap: normal;
    white-space: nowrap;
}

.cash-advance-history-table [data-label="Employee Signature"] .hr-action-group {
    justify-content: flex-start;
    margin-top: var(--hr-space-2);
}

.hr-table.cash-advance-history-table[data-hr-table-mode="record-card"] > thead > tr > th.sortable-header {
    padding-block: 0;
    padding-inline: var(--hr-space-2);
}

.cash-advance-history-table .table-sort-button {
    padding-inline: 0;
    overflow-wrap: normal;
    word-break: normal;
}

/* The region, rather than viewport width, determines whether ten fields fit. */
@container cash-advance-history (width < 78rem) {
    .hr-table.cash-advance-history-table[data-hr-table-mode="record-card"],
    .hr-table.cash-advance-history-table[data-hr-table-mode="record-card"] > tbody,
    .hr-table.cash-advance-history-table[data-hr-table-mode="record-card"] > tbody > tr > td {
        box-sizing: border-box;
        display: block;
        max-width: 100%;
        min-width: 0;
        width: 100%;
    }

    .hr-table.cash-advance-history-table[data-hr-table-mode="record-card"] > tbody > tr:not([hidden]) {
        background: var(--hr-color-surface);
        border: 1px solid var(--hr-color-border);
        border-radius: var(--hr-radius-surface);
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
        margin-bottom: var(--hr-space-4);
    }

    .hr-table.cash-advance-history-table[data-hr-table-mode="record-card"] > tbody > tr > :is(.long-text, .actions-cell) {
        grid-column: 1 / -1;
    }

    .hr-table.cash-advance-history-table[data-hr-table-mode="record-card"] > tbody > tr > td[data-label]::before {
        color: var(--hr-color-text-muted);
        content: attr(data-label);
        display: block;
        font-size: var(--hr-font-size-small);
        font-weight: var(--hr-font-weight-bold);
        margin-bottom: var(--hr-space-1);
    }

    .hr-table.cash-advance-history-table[data-hr-table-mode="record-card"] > tbody > tr > td:last-child {
        border-bottom: 0;
    }

    .hr-table.cash-advance-history-table[data-hr-table-mode="record-card"] > thead {
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }

    .hr-table.cash-advance-history-table[data-hr-table-mode="record-card"] > thead:has(.table-sort-button) {
        clip: auto;
        clip-path: none;
        display: block;
        height: auto;
        margin: 0 0 var(--hr-space-3);
        overflow: visible;
        position: static;
        width: 100%;
    }

    .cash-advance-history-table > thead:has(.table-sort-button)::before {
        color: var(--hr-color-text-muted);
        content: "Sort records";
        display: block;
        font-size: var(--hr-font-size-small);
        margin-bottom: var(--hr-space-2);
    }

    .hr-table.cash-advance-history-table[data-hr-table-mode="record-card"] > thead:has(.table-sort-button) > tr {
        display: flex;
        flex-wrap: wrap;
        gap: var(--hr-space-2);
    }

    .hr-table.cash-advance-history-table[data-hr-table-mode="record-card"] > thead:has(.table-sort-button) > tr > th {
        border: 0;
        display: block;
        padding: 0;
        width: auto;
    }

    .cash-advance-history-table .table-sort-button {
        border: 1px solid var(--hr-color-border);
        border-radius: var(--hr-radius-control);
        min-height: var(--hr-control-height-compact);
        padding: var(--hr-space-2);
        white-space: nowrap;
    }

    .hr-table.cash-advance-history-table[data-hr-table-mode="record-card"] > thead:has(.table-sort-button) > tr > th.actions-cell {
        align-items: center;
        display: flex;
        min-height: var(--hr-control-height-compact);
        padding: var(--hr-space-2);
    }
}

/* Keep the directory's short headings and profile action at normal size. */
.employee-directory-region {
    container: employee-directory / inline-size;
}

.hr-table.employee-directory-table[data-hr-table-mode="record-card"] > tbody > tr > td {
    min-width: 0;
}

.hr-table.employee-directory-table[data-hr-table-mode="record-card"] > thead > tr > th,
.employee-directory-table .table-sort-button,
.hr-table.employee-directory-table[data-hr-table-mode="record-card"] > tbody > tr > [data-label="Code"],
.hr-table.employee-directory-table[data-hr-table-mode="record-card"] > tbody > tr > [data-label="Start Date"] {
    white-space: nowrap;
}

.hr-table.employee-directory-table[data-hr-table-mode="record-card"] > tbody > tr > [data-label="Payment"] {
    min-width: calc(7ch + 2 * var(--hr-space-3));
}

.hr-table.employee-directory-table[data-hr-table-mode="record-card"] > thead > tr > th.sortable-header {
    padding-block: 0;
}

.employee-directory-table .table-sort-button {
    padding-inline: 0;
}

.hr-table.employee-directory-table[data-hr-table-mode="record-card"] .hr-action--nowrap {
    overflow-wrap: normal;
    white-space: nowrap;
}

.hr-table.employee-directory-table[data-hr-table-mode="record-card"] > :is(thead, tbody) > tr > .actions-cell {
    width: 1%;
}

@container employee-directory (width < 72rem) {
    .hr-table.employee-directory-table[data-hr-table-mode="record-card"],
    .hr-table.employee-directory-table[data-hr-table-mode="record-card"] > tbody,
    .hr-table.employee-directory-table[data-hr-table-mode="record-card"] > tbody > tr > td {
        box-sizing: border-box;
        display: block;
        max-width: 100%;
        min-width: 0;
        width: 100%;
    }

    .hr-table.employee-directory-table[data-hr-table-mode="record-card"] > tbody > tr:not([hidden]) {
        background: var(--hr-color-surface);
        border: 1px solid var(--hr-color-border);
        border-radius: var(--hr-radius-surface);
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
        margin-bottom: var(--hr-space-4);
    }

    .hr-table.employee-directory-table[data-hr-table-mode="record-card"] > tbody > tr > td.actions-cell {
        grid-column: 1 / -1;
        width: 100%;
    }

    .hr-table.employee-directory-table[data-hr-table-mode="record-card"] > tbody > tr > [data-label]::before {
        color: var(--hr-color-text-muted);
        content: attr(data-label);
        display: block;
        font-size: var(--hr-font-size-small);
        font-weight: var(--hr-font-weight-bold);
        margin-bottom: var(--hr-space-1);
        white-space: normal;
    }

    .hr-table.employee-directory-table[data-hr-table-mode="record-card"] > thead {
        border: 0;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }

    .hr-table.employee-directory-table[data-hr-table-mode="record-card"] > thead:has(.table-sort-button) {
        clip: auto;
        clip-path: none;
        display: block;
        height: auto;
        margin: 0 0 var(--hr-space-3);
        overflow: visible;
        position: static;
        width: 100%;
    }

    .employee-directory-table > thead:has(.table-sort-button)::before {
        color: var(--hr-color-text-muted);
        content: "Sort records";
        font-size: var(--hr-font-size-small);
    }

    .hr-table.employee-directory-table[data-hr-table-mode="record-card"] > thead:has(.table-sort-button) > tr {
        display: flex;
        flex-wrap: wrap;
        gap: var(--hr-space-2);
    }

    .hr-table.employee-directory-table[data-hr-table-mode="record-card"] > thead:has(.table-sort-button) > tr > th {
        border: 0;
        padding: 0;
        width: auto;
    }

    .employee-directory-table .table-sort-button {
        border: 1px solid var(--hr-color-border);
        border-radius: var(--hr-radius-control);
        min-height: var(--hr-control-height-compact);
        padding: var(--hr-space-2);
    }

    .hr-table.employee-directory-table[data-hr-table-mode="record-card"] > thead:has(.table-sort-button) > tr > th.actions-cell {
        align-items: center;
        box-sizing: border-box;
        display: flex;
        min-height: var(--hr-control-height-compact);
        padding: var(--hr-space-2);
    }
}


@media print {
    .hr-table-scroll-cue { display: none; }
}