/* Economics table block: wrapper and base table layout. */

/* Wrapper provides the anchor for the absolutely-positioned settings overlay.
   As a flex child of the performance tab it fills all remaining vertical space.
   Must be a flex container itself so EconomicsTable-container can use flex: 1 1 0
   instead of height: 100% — flex-basis is more reliably bounded than percentage height. */
.EconomicsTable-wrapper {
    /* Z-index stacking hierarchy */
    --z-index-table-cell: 10;
    --z-index-header-cell: calc(var(--z-index-table-cell) + 1);
    --z-index-settings-column: calc(var(--z-index-header-cell) + 1);

    /* thead covers regular tbody sticky cells but sits behind section sub-header rows */
    --z-index-frozen-thead: calc(var(--z-index-settings-column) + 1);

    /* Section sub-header rows overlap thead row 2 so the section name replaces Hours/GBP when sticky */
    --z-index-section-sub-header: calc(var(--z-index-frozen-thead) + 1);
    --z-index-section-sub-header-label: calc(var(--z-index-section-sub-header) + 1);

    /* Settings overlay remains above everything */
    --z-index-settings-overlay: calc(var(--z-index-section-sub-header-label) + 1);

    /*
     * Height of one frozen thead row.
     * Section sub-header rows use this as their sticky top offset so they
     * freeze at the same level as thead row 2, overlapping it.
     * --economics-thead-height (= 2x row height) is kept for reference.
     * AR: This calculation is an approximation. I observe different heights on different screens due to subtle differences in font rendering
     * BM: Values is fixed per the design updates.
     */
    --economics-thead-row-height: 36px;
    --economics-tbody-offset: calc(-1 * var(--economics-thead-row-height));
    --economics-tbody-row-height: 32px;

    /* Height of the coloured swatch strip above category headers (.EconomicsTable-swatchRow).
       Separate so sticky offsets below the thead can include it. */
    --economics-thead-swatch-height: var(--padding-xs);
    --economics-thead-total-height: calc(var(--economics-thead-row-height) + var(--economics-thead-swatch-height));

    /* Sub-header row (second row of sticky thead) styling */
    --economics-sub-header-background: var(--surface-accent);
    --economics-sub-header-text: var(--text-default);

    /* Comparator header label gap (no direct bootstrap equivalent) */
    --economics-comparator-header-margin: 6px;

    /* Vars for border radius box shadow clip */
    --table-border-radius: var(--border-radius-lg);
    --box-shadow-color: var(--surface-subtle-light);
    --box-shadow-offset: calc(2 * var(--table-border-radius));

    /*
     * Custom table colours with their transparency. Note the values
     * set are inverse of the designs to achieve the intended effect
     */
    --economics-total-header-cell-border: color-mix(in srgb, var(--border-info), transparent 60%);
    --economics-total-body-cell-border: color-mix(in srgb, var(--border-info), transparent 80%);
    --economics-header-cell-border: color-mix(in srgb, var(--border-default), transparent 50%);
    --economics-body-cell-border: color-mix(in srgb, var(--border-default), transparent 70%);
    --economics-header-btn: color-mix(in srgb, var(--text-inverse), transparent 30%);

    /* Table column widths */
    --economics-label-column-width: 200px;
    --economics-category-column-width: 100px;
    --economics-cell-column-width: 90px;
    --economics-cell-secondary-column-width: var(--economics-cell-column-width);

    position: relative;
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* define EconomicsTable */
.EconomicsTable {
    margin-bottom: calc(var(--economic-section-count, 0) * var(--economics-tbody-offset));
    width: auto;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--text-default);
}

.EconomicsTable:has(.EconomicsTable-sectionBody) {
    --economic-section-count: 1;
}

.EconomicsTable:has(.EconomicsTable-sectionBody ~ .EconomicsTable-sectionBody) {
    --economic-section-count: 2;
}

.EconomicsTable:has(.EconomicsTable-sectionBody ~ .EconomicsTable-sectionBody ~ .EconomicsTable-sectionBody) {
    --economic-section-count: 3;
}

.EconomicsTable:has(.EconomicsTable-sectionBody ~ .EconomicsTable-sectionBody ~ .EconomicsTable-sectionBody ~ .EconomicsTable-sectionBody) {
    --economic-section-count: 4;
}

/* flex: 1 1 0 + min-height: 0 is more reliable than height: 100% for bounding the
   scroll container — this ensures both scrollbars stay within the visible viewport area
   (matching the pattern used by the Gantt's .gantt-scrollable container). */
.EconomicsTable-container {
    border-radius: var(--table-border-radius);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1 1 0;
    min-height: 0;
}

/* Clips the space the table's negative margin-bottom leaves behind.
   Must be overflow: clip, not hidden — hidden would become the sticky cells' scroll box */
.EconomicsTable-clipper {
    display: flow-root;
    width: max-content;
    min-width: 100%;
    overflow: clip;
}

/* Base header cell styles */
.EconomicsTable th.EconomicsTable-headerCell {
    white-space: nowrap;
    overflow: hidden;
    border-right: var(--border-xs) solid var(--economics-header-cell-border);
}

.EconomicsTable th.EconomicsTable-headerCell,
.EconomicsTable-dataRow--totals th.EconomicsTable-cell--label {
    padding: var(--padding-xxs) var(--padding-sm);
    min-height: var(--economics-thead-row-height);
    height: var(--economics-thead-row-height);
    max-height: var(--economics-thead-row-height);
    vertical-align: middle;
    background: var(--surface-emphasis);
    color: var(--text-inverse);
    font-weight: var(--font-weight-semibold);
}

.EconomicsTable th.EconomicsTable-headerCell--rowLabel {
    background: var(--surface-emphasis);
    color: var(--text-inverse);
    border-color: var(--economics-header-cell-border);
    min-width: var(--economics-label-column-width);
    max-width: calc(3 * var(--economics-label-column-width));
    position: sticky;
    top: var(--economics-thead-swatch-height);
    left: 0;

    /* Above sub-header cells so it covers the thead's empty first cell when scrolled */
    z-index: var(--z-index-section-sub-header-label);
}

.EconomicsTable-headerCell--sub-title {
    border-color: var(--economics-header-cell-border);
}

.EconomicsTable th.EconomicsTable-headerCell--first {
    border-top-left-radius: var(--table-border-radius);
    box-shadow:
        var(--box-shadow-offset) calc(-1 * var(--box-shadow-offset)) 0 calc(-1 * var(--box-shadow-offset)) var(--box-shadow-color),
        calc(-1 * var(--box-shadow-offset)) calc(-1 * var(--box-shadow-offset)) 0 calc(-1 * var(--box-shadow-offset)) var(--box-shadow-color);
}

.EconomicsTable th .EconomicsTable-headerCell--displaySettings {
    display: flex;
    justify-content: space-between;
}

/* thead sticks as a single unit. Uses the highest z-index so it always
   covers section sub-header and label cells as they scroll underneath it. */
.EconomicsTable thead {
    position: sticky;
    top: 0;
    z-index: var(--z-index-frozen-thead);
}

/* Top header row: title — extra specificity to override .u-table thead th { border-top: none } */
.EconomicsTable thead th.EconomicsTable-headerCell--category {
    font-weight: var(--font-weight-semibold);

    /* AR: Box shadow clips the rounded corners so scrolling content below sticky header is hidden */
    box-shadow:
        var(--box-shadow-offset) calc(-1 * var(--box-shadow-offset)) 0 calc(-1 * var(--box-shadow-offset)) var(--box-shadow-color),
        calc(-1 * var(--box-shadow-offset)) calc(-1 * var(--box-shadow-offset)) 0 calc(-1 * var(--box-shadow-offset)) var(--box-shadow-color);
}

.EconomicsTable thead th.EconomicsTable-headerCell--last,
.EconomicsTable .EconomicsTable-sectionSubHeader--inline th.EconomicsTable-headerCell--last {
    border-right-color: transparent;
    border-top-right-radius: var(--table-border-radius);
}

/* Coloured swatch strip above category headers, mirroring the PerformanceSettingsBar legend. */
.EconomicsTable-swatchRow td.EconomicsTable-swatchCell {
    height: var(--economics-thead-swatch-height);
    padding: 0;
    border: 0;
    border-top-left-radius: var(--border-radius-default);
    border-top-right-radius: var(--border-radius-default);
}

/* Uncoloured swatch cells (leftmost + section divider): match page bg so the sticky
   thead's white background doesn't show through. */
.EconomicsTable-swatchRow td.EconomicsTable-swatchCell--empty,
.EconomicsTable-swatchRow td.EconomicsTable-swatchCell--divider {
    background: var(--surface-subtle-light);
    border-radius: 0;
}

/* Rightmost swatch matches the container's outer radius (avoids a smaller inset curl). */
.EconomicsTable-swatchRow td.EconomicsTable-swatchCell:last-child {
    border-top-right-radius: var(--table-border-radius);
}

/* Swatch colours — must match .PerformanceSettingsBar-legendSwatch--*. */
.EconomicsTable-swatchRow td.EconomicsTable-swatchCell--actuals {
    background: var(--surface-data-secondary);
}

.EconomicsTable-swatchRow td.EconomicsTable-swatchCell--futureForecast {
    background: var(--surface-data-monochromatic-light);
}

.EconomicsTable-swatchRow td.EconomicsTable-swatchCell--total {
    background: var(--surface-data-quatery);
}

.EconomicsTable-swatchRow td.EconomicsTable-swatchCell--comparator {
    background: var(--surface-data-primary);
}

/* Header cells with a swatch above zero their top corners to meet the swatch flat. */
.EconomicsTable thead .EconomicsTable-headerRow th.EconomicsTable-headerCell--hasSwatch {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* Fixed-width numeric columns so toggling categories changes table width instead of cell width */
.EconomicsTable-headerCell--sub {
    min-width: var(--economics-cell-column-width);
    width: var(--economics-cell-column-width);
    white-space: nowrap;
}

.EconomicsTable tbody .EconomicsTable-headerCell--sub {
    background: var(--economics-sub-header-background);
    color: var(--economics-sub-header-text);
    font-weight: var(--font-weight-semibold);
    border-right: solid var(--border-xs) var(--economics-header-cell-border);
}

.EconomicsTable tbody .EconomicsTable-headerCell--sub.EconomicsTable-headerCell--last {
    border-right: none;
}

/* Category header cells in row 1 that are not "always visible" (Actuals/Future Forecast when table is in collapsed mode) */
.EconomicsTable thead .EconomicsTable-headerRow th.EconomicsTable-headerCell--sub {
    background: var(--surface-emphasis-subtle);
}

/* Sub-header row (row 2 of sticky thead): column sub-headers (Hours, GBP, etc.) */
.EconomicsTable thead .EconomicsTable-subHeaderRow th.EconomicsTable-headerCell {
    background: var(--economics-sub-header-background);
    color: var(--economics-sub-header-text);
    box-shadow:
        var(--box-shadow-offset) var(--box-shadow-offset) 0 calc(-1 * var(--box-shadow-offset)) var(--box-shadow-color),
        calc(-1 * var(--box-shadow-offset)) var(--box-shadow-offset) 0 calc(-1 * var(--box-shadow-offset)) var(--box-shadow-color);
}

/* Filler cell: extends the dark background across the full row width.
   No sticky-top — scrolls away when section name sticks, revealing the category headers. */
.EconomicsTable tbody .EconomicsTable-sectionFillerHeader th.EconomicsTable-headerCell--fillerFiller {
    background: var(--surface-emphasis);
    border-top-right-radius: var(--table-border-radius);
}

.EconomicsTable tbody th.EconomicsTable-headerCell--sub-title {
    background: var(--surface-emphasis-subtle);
    color: var(--text-inverse);
    z-index: var(--z-index-section-sub-header-label);
    left: 0;
}

.EconomicsTable .EconomicsTable-hiddenSubHeader {
    position: relative;
    top: var(--economics-thead-row-height);
}

.EconomicsTable .EconomicsTable-hiddenSubHeader td.EconomicsTable-headerCell--sub-title {
    position: sticky;
    left: 0;
    top: var(--economics-thead-total-height);
    z-index: var(--z-index-section-sub-header-label);
    height: var(--economics-thead-row-height);
    background: var(--economics-sub-header-background);
}

/* Column divider styles — appears in both thead and tbody */
td.EconomicsTable-columnDivider,
th.EconomicsTable-columnDivider {
    min-width: var(--padding-xs);
    background: transparent !important;
    border-bottom: none !important;
    border-left: none;
    border-right: none;
    border-top: none;
}

/* In thead, the sticky white background shows through transparent cells. Match page bg. */
.EconomicsTable thead th.EconomicsTable-columnDivider {
    background: var(--surface-subtle-light) !important;
}

/* Base cell styles — separate borders (top + left only, last-child gets right) */
.EconomicsTable-cell {
    min-height: var(--economics-tbody-row-height);
    height: var(--economics-tbody-row-height);
    padding: var(--padding-xxs) var(--padding-sm);
    vertical-align: middle;
    border: var(--border-xs) none var(--economics-body-cell-border);
    border-bottom-style: solid;
    border-right-style: solid;
    color: var(--text-accent);
    background-color: var(--surface-default);
}

/* Cells that have both hours and currency should not have a dividing border
 * Same applies to the last cell in any section
 */
.EconomicsTable-cell--hours,
.EconomicsTable-cell--last {
    border-right-color: transparent;
}

/* Border in the comparator between the varaince type cells should not show, but only if they are both enabled */
.EconomicsTable tr:has(.EconomicsTable-cell--variance-change):has(.EconomicsTable-cell--variance-difference) .EconomicsTable-cell--variance-change {
    border-right-color: transparent;
}

.EconomicsTable tr th.last-child {
    border-right-color: transparent;
}

.EconomicsTable-cell--info {
    background-color: var(--surface-info-subtle);
    border-bottom-color: var(--economics-total-body-cell-border);
    color: var(--text-info-dark);
}

.EconomicsTable tbody .EconomicsTable-headerCell--info {
    background-color: var(--surface-info-accent);
    color: var(--text-info-dark);
    border-right: solid var(--border-xs) var(--economics-total-header-cell-border);
}

/* Sticky left column — horizontally pinned in both section sub-header and data rows. */
.EconomicsTable-headerCell--rowLabel,
.EconomicsTable-headerCell--sub-title,
.EconomicsTable-cell--label {
    position: sticky;
    left: 0;
    border-right: var(--border-xs) solid var(--border-default);
    min-width: var(--economics-label-column-width);
    max-width: calc(3 * var(--economics-label-column-width));
    overflow: hidden;
}

.EconomicsTable-cell--label,
.EconomicsTable-cell--categoryLabel {
    z-index: var(--z-index-table-cell);
    background: var(--surface-subtle-dark);
    border-color: var(--economics-body-cell-border);
    color: var(--text-default);
    font-weight: var(--font-weight-regular);
}

.EconomicsTable-childTotalsRow .EconomicsTable-cell {
    font-weight: var(--font-weight-semibold);
}

.EconomicsTable-cell--totals {
    font-weight: var(--font-weight-semibold);
}

/* Fixed-width numeric columns so toggling categories changes table width instead of cell width */
.EconomicsTable-cell--numeric {
    min-width: var(--economics-cell-column-width);
    width: var(--economics-cell-column-width);
    white-space: nowrap;
}

.EconomicsTable-dataRow--totals .EconomicsTable-cell {
    border-right-style: solid;
    border-right-color: var(--economics-header-cell-border);
    background: var(--economics-sub-header-background);
    color: var(--economics-sub-header-text);
    font-weight: var(--font-weight-semibold);
}

.EconomicsTable-dataRow--totals td.EconomicsTable-cell--info {
    background-color: var(--surface-info-accent);
    color: var(--text-info-dark);
    border-right: solid var(--border-xs) var(--economics-total-header-cell-border);
}

/* Ensure there is no right border for the last info cell in totals row */
.EconomicsTable-dataRow--totals td.EconomicsTable-cell--info.EconomicsTable-cell--last {
    border-right: none;
}

/* Section sub-header rows: stick just below the category headers row.
   Lower specificity selector must come before the rowLabel override below. */
.EconomicsTable-sectionSubHeader > th {
    position: sticky;
    top: var(--economics-thead-total-height);
    z-index: var(--z-index-section-sub-header);
}

/* Section sub-header label cell: pinned horizontally at left: 0 via the shared --rowLabel rule.
   Higher z-index so it appears above sibling column cells when scrolling horizontally. */
.EconomicsTable-sectionSubHeader > th.EconomicsTable-headerCell--rowLabel {
    z-index: var(--z-index-section-sub-header-label);
}

/* --inline variant: label sticks just below the swatch (same level as category headers),
   so the section name moves up to cover tableTitle when scrolled. */
.EconomicsTable-sectionSubHeader--inline > th.EconomicsTable-headerCell--rowLabel {
    top: var(--economics-thead-swatch-height);
    z-index: var(--z-index-section-sub-header-label);
}

.EconomicsTable-headerContent {
    display: inline-flex;
    align-items: center;
}

/* Sub-header cells (Hours/GBP headers) - only for secondary headers in comparator/variance section */
th[data-test="EconomicsTable-secondarySubHeader"] {
    width: var(--economics-cell-secondary-column-width);
    min-width: var(--economics-cell-secondary-column-width);
}

.SelectableDropdownItem-buttonContent,
.SelectableDropdownItem-icon {
    color: var(--text-default);
}

/* Numeric cells have default width ONLY for secondary/comparator columns to prevent jumping */
td.EconomicsTable-cell--secondary {
    width: var(--economics-cell-secondary-column-width);
    min-width: var(--economics-cell-secondary-column-width);
}

.EconomicsTable tbody th.EconomicsTable-headerCell--no-border,
.EconomicsTable tbody th.EconomicsTable-cell--no-border,
.EconomicsTable tbody td.EconomicsTable-cell--no-border {
    border-right-color: transparent;
}

/* Warning text displayed below row label when a threshold is breached */
.EconomicsTable-warningText {
    display: block;
    font-size: var(--font-size-small);
    color: var(--danger);
    font-weight: var(--font-weight-regular);
    white-space: normal;
}

.Btn.EconomicsTable-headerBtn {
    margin-left: var(--padding-xs);
    color: var(--economics-header-btn);

    /* BM Overrides the icon size so that it is inline with the text size and doesn't increase the header sizes unexpectedly */
    font-size: 0.6rem !important;
}

.Btn.EconomicsTable-headerBtn:hover,
.Btn.EconomicsTable-headerBtn:focus {
    color: var(--text-inverse);
    border-color: var(--border-inverse);
}

/* Inline edit (pencil) button shown next to editable row labels (e.g. Fee) */

.Btn.EconomicsTable-editBtn {
    color: var(--icon-accent);
    font-size: var(--font-size-small);
    flex-shrink: 0;
    margin-left: auto;
}

.Btn.EconomicsTable-editBtn:disabled,
.Btn.EconomicsTable-editBtn.disabled {
    color: var(--text-subtle);
}

/*
 * Section-level borders and rounded corners.
 * Every section's last row gets a bottom border.
 * Only the first section gets top-left rounding, only the last section gets bottom rounding.
 * Intermediate section edges stay sharp so sections look "cut" from the same table.
 * Every section gets its order set as a style variable directly thus allowing for dynamic offset adjustment.
 * It does create an issue at the bottom of the table adding white space if there are too many entries, but should not be an issue for now
 */
tbody.EconomicsTable-sectionBody {
    position: relative;
    top: calc((var(--economic-section-order, 0) + 1) * var(--economics-tbody-offset));
}

/* Bottom rounding — all sections */
.EconomicsTable-cell--lastRow {
    border-bottom: none;
}

.EconomicsTable-cell--lastRow.EconomicsTable-cell--first,
.EconomicsTable-cell--lastRow.EconomicsTable-cell--label {
    border-bottom-left-radius: var(--table-border-radius);
}

.EconomicsTable-cell--lastRow.EconomicsTable-cell--last {
    border-bottom-right-radius: var(--table-border-radius);
}

/* Spacer between sections — no borders, background matching tab content background */
.EconomicsTable-sectionSpacerCell {
    height: var(--padding-sm);
    padding: 0;
    background: transparent;
    border: none;
}

/* Expandable row label content layout */
.EconomicsTable-labelContent {
    display: flex;
    align-items: center;
}

.EconomicsTable-labelMain {
    display: flex;
    align-items: center;
    gap: var(--padding-xxs);
    min-width: 0;
    white-space: nowrap;
}

.EconomicsTable-labelMain .JobGroupRichLabel-name {
    white-space: normal;
}

/* Chevron button in expandable rows */
.EconomicsTable-chevronBtn {
    padding: 0;
    border: none;
    background: none;
    color: var(--text-default);
    flex-shrink: 0;
    margin-right: var(--padding-xxs);
}

/* Chevron icon rotation */
.EconomicsTable-chevronIcon {
    transform: rotate(0deg);
    transition: transform 0.2s;
    font-size: var(--font-size-small);
    color: var(--text-default);
}

/* Push the chevron down when the label is a JobGroupRichLabel so it lines up with the code line */
.EconomicsTable-labelContent:has(.JobGroupRichLabel) {
    align-items: flex-start;
}

.EconomicsTable-labelContent:has(.JobGroupRichLabel) .EconomicsTable-chevronBtn {
    margin-top: var(--padding-xs);
}

/* Sections that actually contain a chevron switch their label-cell layout to
   a two-column */
.EconomicsTable-sectionBody:has(.EconomicsTable-chevronBtn) .EconomicsTable-labelContent {
    display: grid;
    grid-template-columns: var(--padding-lg) minmax(min-content, max-content);
}

.EconomicsTable-sectionBody .EconomicsTable-dataRow--totals .EconomicsTable-labelContent {
    display: flex;
}

.EconomicsTable-sectionBody:has(.EconomicsTable-chevronBtn) .EconomicsTable-labelMain {
    grid-column: 2;
}

.EconomicsTable-sectionBody:has(.EconomicsTable-chevronBtn) .EconomicsTable-labelMain .JobGroupRichLabel {
    margin-top: var(--padding-xs);
}

.EconomicsTable-sectionBody:has(.EconomicsTable-chevronBtn) .EconomicsTable-chevronBtn {
    grid-column: 1;
    justify-self: center;

    .EconomicsTable-chevronIcon--expanded {
        transform: rotate(90deg);
    }

    /* Bold label for expandable parent rows (e.g. team names) */
    .EconomicsTable-cell--expandableLabel {
        font-weight: var(--font-weight-bold);
    }

    /* Indent child row labels */
    .EconomicsTable-cell--childLabel {
        padding-left: calc(var(--padding-md) + 24px);
    }
}

.EconomicsTable th.EconomicsTable-headerCell--categoryLabel,
.EconomicsTable td.EconomicsTable-cell--categoryLabel {
    min-width: var(--economics-category-column-width);
    max-width: calc(3 * var(--economics-label-column-width));
    overflow: hidden;
    text-overflow: ellipsis;
    position: sticky;

    /*
     * Sticky left = actual label width + (first-category width × whether this is past index 0).
     * min(1, index) is 0 for status (index 0) and 1 for partner (index 1), so partner sticks
     * immediately after status regardless of its auto-sized width.
     * --economics-actual-label-width and --economics-actual-category-0-width are set at runtime
     * via ResizeObserver in EconomicsTable.mjs.
     */
    left: calc(
        var(--economics-actual-label-width, var(--economics-label-column-width)) + min(1, var(--economic-category-index, 0)) *
            var(--economics-actual-category-0-width, var(--economics-category-column-width))
    );
}

.EconomicsTable-cell--categoryLabel {
    color: var(--text-emphasis);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-h6);
}

.EconomicsTable-cell--categoryLabel:has(.Pill-label) {
    padding: var(--padding-xxs) var(--padding-xxs);
}

.EconomicsTable-cell--categoryLabel .Pill-label {
    white-space: nowrap;
    text-overflow: ellipsis;
}

.EconomicsTable-workflowPill {
    max-width: 100%;
    overflow-wrap: anywhere;
}

.EconomicsTable-partner {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}