.tt-table {
    width: 100%;
    color: var(--text-color);
    border-collapse: collapse;
}

.tt-table {
    /* Padding */
    --tt-table-padding-header: var(--step--2) var(--step--4);
    --tt-table-padding-body: var(--step--2) var(--step--4);
    --tt-table-padding-footer: var(--step--2) var(--step--2);
    /* Compact */
    --tt-table-padding-compact-header: var(--step--3) var(--step--3);
    --tt-table-padding-compact-body: var(--step--4) var(--step--4);
    --tt-table-padding-compact-footer: var(--step--3) var(--step--3);
    /* super compact */
    --tt-table-padding-super-compact-header: var(--step--5) var(--step--5);
    --tt-table-padding-super-compact-body: var(--step--7) var(--step--7);
    --tt-table-padding-super-compact-footer: var(--step--5) var(--step--5);

    /* Dividers */
    --tt-table-divider-header: var(--border-thin) solid var(--border-muted, #cfcfcf);
    --tt-table-divider-body: var(--border-thin) solid var(--bg-muted);
    --tt-table-divider-footer: var(--border-thin) solid var(--border-muted, #cfcfcf);
    --tt-table-outer-border: var(--border-thin) solid var(--border-muted, #cfcfcf);
}

/* HEADER (THEAD) */
.tt-table thead th {
    padding: var(--tt-table-padding-header);
    border-bottom: var(--tt-table-divider-header);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
}

/* BODY (TBODY) */
.tt-table tbody tr {
    border-bottom: var(--tt-table-divider-body);
}
.tt-table tbody td {
    padding: var(--tt-table-padding-body);
}

/* FOOTER (TFOOT) */
.tt-table tfoot td {
    padding: var(--tt-table-padding-footer);
    border-top: var(--tt-table-divider-footer);
    font-weight: var(--font-weight-semibold);
}

/* DIVIDERS */
.tt-table--strong-dividers {
    --tt-table-divider-header: 1px solid var(--text-color);
    --tt-table-divider-body: 1px solid var(--border-muted, #cfcfcf);
    --tt-table-divider-footer: 1px solid var(--text-color);
    --tt-table-outer-border: var(--border-thin) solid var(--text-color);
}

/* GROUPED ROWS
   For a table whose rows come in blocks under a heading row - a preview of per
   diems gathered under the job that claimed them, say - with one tbody per block
   and the heading as a single colspan cell.

   The heading carries what the rows would otherwise repeat in a column of their
   own, which on a narrow table is a fifth of the width spent saying one name, and
   it keeps the rows somebody wants read together from being separated by it.

   Space before a block is what marks it, because every row already carries the
   same divider and a heading with only that around it reads as one more row
   rather than as the start of something. Space rather than a heavier rule: the
   rule would compete with the header's own, and there is no hierarchy here to
   argue about - the blocks are peers.

   The first block needs none; the header's rule is already above it. Give each
   block its own tbody, which is also what stops a browser breaking a heading away
   from its rows when the table is printed.

   Usage:
     <table class="tt-table tt-table--compact tt-table--grouped">
       <thead>…</thead>
       <tbody>
         <tr><td colspan="5">…the heading…</td></tr>
         <tr>…</tr>
       </tbody>
       <tbody>…the next block…</tbody>
     </table>
*/
.tt-table--grouped tbody + tbody > tr:first-child > td {
    padding-block-start: var(--space-s);
}

/* GROUP HEADING TBODY
   For a table that is already one tbody per row group (a crew member and their
   entries), where the blocks above those need a heading tbody of their own.
   Only the heading gets the space and weight, so the groups under it stay tight. */
.tt-table tbody.tt-table-group-heading > tr > td {
    font-weight: var(--font-weight-semibold);
}
.tt-table tbody + tbody.tt-table-group-heading > tr > td {
    padding-block-start: var(--space-m);
}

/* INDENTED ROWS
   For rows nested under a heading row (unions under a country, agreements under a
   union). Padding on the cell rather than margin on its text, so a name that wraps
   stays aligned with its first line. The space tokens are fluid, so the indent
   already narrows on small screens. */
.tt-table td.tt-table-indent-1 {
    padding-inline-start: var(--space-xs);
}
.tt-table td.tt-table-indent-2 {
    padding-inline-start: var(--space-m);
}

/* COLORS */
.tt-table--primary {
    --tt-table-divider-header: 1px solid var(--primary-color);
    --tt-table-divider-footer: 1px solid var(--primary-color);
}
.tt-table--accent {
    --tt-table-divider-header: 1px solid var(--accent-color);
    --tt-table-divider-footer: 1px solid var(--accent-color);
}

/* COMPACT */
.tt-table--compact {
    --tt-table-padding-header: var(--tt-table-padding-compact-header);
    --tt-table-padding-body: var(--tt-table-padding-compact-body);
    --tt-table-padding-footer: var(--tt-table-padding-compact-footer);
}
.tt-table--compact-header {
    --tt-table-padding-header: var(--tt-table-padding-compact-header);
}
.tt-table--compact-body {
    --tt-table-padding-body: var(--tt-table-padding-compact-body);
}
.tt-table--compact-footer {
    --tt-table-padding-footer: var(--tt-table-padding-compact-footer);
}

/* Action column for icon buttons (expand/collapse) */
.tt-table-col-action {
    width: 44px;
}

/* Primary column: absorbs remaining space without expanding to fit content */
.tt-table .tt-table-col-primary {
    width: 100%;
    max-width: 0;
    overflow: hidden;
}

/* Job name row: flex container so icon + title link sit on the same line */
.tt-job-name-row {
    display: flex;
    align-items: baseline;
    gap: 0.5em;
    min-width: 0;
    overflow: hidden;
}

/* Job title line: production name + company name on one row; company name truncates with ellipsis */
.tt-job-title {
    display: flex;
    align-items: baseline;
    gap: 0.35em;
    min-width: 0;
    overflow: hidden;
    flex: 1 1 0;
}
.tt-job-production {
    flex-shrink: 0;
    white-space: nowrap;
}
.tt-job-company {
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Position line: department + job title on one row; job title truncates with ellipsis */
.tt-job-position-row {
    display: flex;
    align-items: baseline;
    gap: 0.35em;
    min-width: 0;
    overflow: hidden;
}
.tt-job-department {
    flex-shrink: 0;
    white-space: nowrap;
}
.tt-job-position {
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* RESPONSIVE — drop one step-level on narrow screens, shrink action column and icon buttons */
@media (max-width: 576px) {
    .tt-table {
        --tt-table-padding-header: var(--step--3) var(--step--5);
        --tt-table-padding-body: var(--step--3) var(--step--5);
        --tt-table-padding-compact-header: var(--step--4) var(--step--5);
        --tt-table-padding-compact-body: var(--step--5) var(--step--5);
    }
    .tt-table-col-action {
        width: 28px;
    }
    .tt-table td .tt-btn-icon,
    .tt-table th .tt-btn-icon {
        --btn-icon-size: 1.5rem;
    }
}

/* SUPER COMPACT */
.tt-table--super-compact {
    --tt-table-padding-header: var(--tt-table-padding-super-compact-header);
    --tt-table-padding-body: var(--tt-table-padding-super-compact-body);
    --tt-table-padding-footer: var(--tt-table-padding-super-compact-footer);
    font-size: var(--step--2);
}
.tt-table--super-compact-header {
    --tt-table-padding-header: var(--tt-table-padding-super-compact-header);
}
.tt-table--super-compact-body {
    --tt-table-padding-body: var(--tt-table-padding-super-compact-body);
}
.tt-table--super-compact-footer {
    --tt-table-padding-footer: var(--tt-table-padding-super-compact-footer);
}

/* TEXT ALIGN */
/* Right-align last column */
.tt-table--last-col-right tr:not(.no-last-right) > td:last-child:not(:only-child),
.tt-table--last-col-right thead th:last-child,
.tt-table--last-col-right tfoot tr:not(.no-last-right) > td:last-child:not(:only-child),
.tt-table--last-col-right thead th .tt-text-right,
.tt-table--last-col-right td .tt-text-right {
    text-align: right;
}

/* LAST CHILD */
.tt-table tr:not(.no-last-right) > td:last-child:not(:only-child),
.tt-table thead th:last-child,
.tt-table tfoot tr:not(.no-last-right) > td:last-child:not(:only-child),
.tt-table thead th .tt-text-right,
.tt-table td .tt-text-right {
    text-align: right;
}

/* TEXT TABLES — every column holds prose, so the last one is a sentence rather
   than a figure and must stay left-aligned. Matches the LAST CHILD selectors
   above at the same specificity and later in the file, so it wins without
   needing an !important or a longer selector. */
.tt-table--text tr:not(.no-last-right) > td:last-child:not(:only-child),
.tt-table--text thead th:last-child,
.tt-table--text tfoot tr:not(.no-last-right) > td:last-child:not(:only-child) {
    text-align: left;
}

/* Right-align on the cell element itself */
.tt-table th.tt-text-right,
.tt-table td.tt-text-right {
    text-align: right;
}

.tt-table td div {
    white-space: normal;
}

/* Cells that must never wrap (e.g. formatted currency + hours) */
.tt-table .tt-table-col-nowrap,
.tt-table .tt-table-col-nowrap div {
    white-space: nowrap;
}

/* Secondary columns: never wrap, and hide when the card-body container is too narrow */
.tt-table .tt-table-col-secondary,
.tt-table .tt-table-col-secondary div {
    white-space: nowrap;
}

@container (max-width: 560px) {
    .tt-table .tt-table-col-secondary {
        display: none;
    }
}

/* STACK
   When the card body is too narrow, each row wraps into lines: the first cell (the
   row's name) on top, any other unlabelled cell (an action) beside it, then each
   cell with a data-label below as a "label … value" line.
   Add .tt-table-col-panel to a labelled cell to show it as an info panel item
   instead: label above value, sitting beside the other panel cells. */
@container (max-width: 640px) {
    .tt-table--stack thead {
        display: none;
    }
    .tt-table--stack,
    .tt-table--stack tbody {
        display: block;
    }
    .tt-table--stack tbody tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        column-gap: var(--space-m);
        padding: var(--space-2xs) var(--step--5);
    }
    /* Line break between the name/action line and the labelled cells */
    .tt-table--stack tbody tr::after {
        content: "";
        order: 1;
        flex-basis: 100%;
    }
    .tt-table.tt-table--stack tbody td {
        display: block;
        padding: var(--space-3xs) 0;
    }
    /* The name heads the stacked row, a step up so it holds its own beside the action */
    .tt-table--stack td:first-child {
        flex: 1 1 0;
        min-width: 0;
        font-size: var(--step-0);
    }
    .tt-table.tt-table--stack tbody td[data-label] {
        order: 2;
        flex: 1 0 100%;
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: var(--space-xs);
        text-align: right;
        overflow-wrap: anywhere;
    }
    .tt-table--stack td[data-label]::before {
        content: attr(data-label);
        flex-shrink: 0;
        text-align: left;
        color: var(--text-muted);
    }

    /* Label and value sizes match .tt-info-panel-label and .tt-info-panel-value */
    /* Equal shares so panel cells line up across rows, but never narrower than their value */
    .tt-table.tt-table--stack tbody td.tt-table-col-panel {
        flex: 1 1 0;
        min-width: fit-content;
        display: block;
        text-align: left;
        font-size: var(--step--1);
    }
    .tt-table--stack td.tt-table-col-panel::before {
        display: block;
        font-size: var(--step--2);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        margin-bottom: 0.1rem;
    }
}

/* Icons in dedicated table cells don't need inline-text margins — cell padding handles spacing */
.tt-table td .tt-icon {
    margin: 0;
}

/* Entry date/time display used in hours and payroll tables */
.tt-entry-date {
    font-weight: var(--font-weight-semibold);
    line-height: 1.2;
    margin-bottom: 0.1em;
}
.tt-entry-time {
    white-space: nowrap;
    font-size: var(--step--2);
}
.tt-table td .tt-entry-rate {
    white-space: nowrap;
    font-size: var(--step--2);
}
@media (max-width: 576px) {
    .tt-entry-date {
        font-size: var(--step--2);
    }
}
/* UTILITY */
.tt-table tt.nowrap {
    white-space: normal;
}
/* BORDERS */
.tt-table--bordered {
    border: var(--tt-table-outer-border);
}
/* Vertical cell borders */
.tt-table--bordered th,
.tt-table--bordered td {
    border-right: var(--tt-table-divider-body);
}
/* Remove last column border */
.tt-table--bordered th:last-child,
.tt-table--bordered td:last-child {
    border-right: none;
}

/* No borders at all */
.tt-table--no-borders,
.tt-table--no-borders th,
.tt-table--no-borders tr,
.tt-table--no-borders td {
    --tt-table-divider-header: none;
    --tt-table-divider-body: none;
    --tt-table-divider-footer: none;
}
.tt-table--last-row-no-border tbody tr:last-child {
    --tt-table-divider-body: none;
}

/* HIDDEN ROWS */
.hidden-row {
    display: none;
}
tr:not(.hidden-row) {
    animation: fadeIn 0.15s ease-out;
}

/* COLLAPSIBLE GROUPS - a tbody (group-toggle controller) folded down to its heading row */
.tt-group--collapsed > tr:not(:first-child) {
    display: none;
}
/* The button cycles collapsed (expand) → rows shown (expand all) → details open (contract) */
.tt-group--collapsed :is(.tt-group-expand-all-icon, .tt-group-contract-icon),
tbody:not(.tt-group--collapsed) .tt-group-expand-icon,
tbody:not(.tt-group--collapsed).tt-group--detailed .tt-group-expand-all-icon,
tbody:not(.tt-group--collapsed):not(.tt-group--detailed) .tt-group-contract-icon {
    display: none;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-2px); }
    to { opacity: 1; transform: translateY(0); }
}