.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: 1px solid var(--border-muted, #cfcfcf);
    --tt-table-divider-body: 1px solid var(--bg-muted);
    --tt-table-divider-footer: 1px solid var(--border-muted, #cfcfcf);
    --tt-table-outer-border: 1px 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: 600;
    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: 600;
}

/* 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: 1px solid var(--text-color);
}

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

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

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

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

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