table {
    position: relative;
    margin: 0 0 0 0;
    table-layout: fixed;
    /* need to leave this a separate otherwise collapse shows bleeding at the top of tbl when scrolling down */
    border-collapse: separate;
    /* border-collapse: collapse; */
    /* helps avoid sticky/border seams */
    /* border-spacing: 1px; */
    /* border-color: blue; */
    border-spacing: 0 1px;
}

table thead {
    /* the following doesnt work due to table element model not respecting thead min-height */
    /* min-height: 260px; */
    /* height does work */
    height: 40px;
}


td {
    border-bottom: 1px solid var(--color-table-cell-border);
}


th {
    position: sticky;
    top: 0;
    /* the following padding is overriden by the full-border-cells class */
    padding: 3px 5px;
    /* the following doesnt work due to table element model not respecting thead min-height */
    /* min-height: 60px; */
    background: var(--color-table-col-headers-background);
    color: var(--color-table-col-headers-text);
    /* font-weight: 400; */
    font-weight: var(--color-table-col-headers-fontweight);
    user-select: none;
    text-align: left;
    font-size: 0.8rem;
    z-index: 10;

    border-top: DarkGray 1px solid !important;
    border-bottom: DarkGray 1px solid;

}

/* the row of grouping captions above the column headers - built by table2.js from the
   superHeader of each column. both rows are sticky, so the column headers stop below the
   super header row instead of on top of it. --super-header-height is measured and set on
   the table once the row is built */
table.has-super-headers th {
    top: var(--super-header-height, 0px);
}

table.has-super-headers th.super-header-th {
    top: 0;
}

.super-header-th {
    /* the sides tell one group from the next - a group with no color of its own has only
       these to show where it starts and ends */
    border-left: 1px solid var(--color-table-cell-border-side);
    border-right: 1px solid var(--color-table-cell-border-side);
    font-size: 0.78rem;
}


th.center, td.left {
    text-align: left;
}

th.center, td.center {
    text-align: center;
}

th.right, td.right {
    text-align: right;
}

th.grayed, td.grayed {
    color: silver;
    font-size: 0.8rem;
}

th div {
    color: var(--color-table-col-headers-text);
}


tr:hover {
    background-color: var(--color-table-row-hover);
}

tr:hover td {
    /* 2025-11-12 - adding in following line - if the row is being highlted for hover then also change the fore color for text to black otherwise we cant see the grayed out columns: ; */
    /* took about the !important since it was overriding the special colors for the sliding editor which is always dark in all modes */
    color: var(--color-table-row-hover-forecolor);
}

tr {
    background-color: var(--color-table-row);
}

tr.selected {
    background-color: var(--color-table-row-selected);
}

tr.selected td {
    color: var(--color-table-row-selected-forecolor);
}

/* tr.row-grayed>td {
    color: pink;
} */

table tbody {
    overflow-y: auto;
    max-height: 800px;

}

/* includes tbl and body so as not to affect the headers row */
table tbody tr:nth-child(even) {
    /* background-color: silver;  */
    /* var(--color-table-row-alt); */
}

table tbody tr:nth-child(odd) {
    /* background-color: var(--color-table-row); */
}



/* td.td-warning {
    color: var(--color-table-cell-warning);
    word-wrap: break-word;
    white-space: normal;
    max-width: 180px;
} */



tr.totals {}

/* the totals row stays at the bottom of the scrolling area rather than having to be
   scrolled down to, the same way the column headers stay at the top of it. the cells
   are what is sticky, not the row - a tr cannot be, table rows not being positioned.
   the background is no longer optional here: a see-through sticky row shows the data
   rows sliding past underneath it. z-index keeps it over those rows, and under the
   column headers (10) for the moment the two would otherwise meet */
tr.totals>td {
    position: sticky;
    bottom: 0;
    z-index: 9;
    background-color: var(--color-table-row-totals-background);

    font-weight: 600;
    /*400*/
    line-height: 32px;
    color: var(--color-table-row-totals);
    border-top: DarkGray 1px solid;
    border-bottom: DarkGray 2px solid;
}


td {
    font-size: 0.85rem;
    padding: 2px 6px 2px 12px;
    text-align: left;
    line-height: 200%;
    color: var(--color-table-text);
    white-space: nowrap;
    user-select: none;
}

.full-border-cells th, td {
    border-right: calc(var(--table-border-side-width) * 1px) solid var(--color-table-cell-border-side);
    font-size: 0.8rem;
    padding: calc(var(--table-row-spacing) * 1px) calc(var(--table-col-spacing) * 1px + 3px);
}

/* .simple-table {
    height: fit-content;
    background-color: white;
    padding: 60px;
} */

.event-log-image {
    padding-top: 0px;
    padding-bottom: 5px;
    margin-right: 5px;
    vertical-align: bottom;
}


th.hide {
    /* display: none; */
    display: var(--toggle-hide-columns);
}

td.hide {
    /* display: none; */
    display: var(--toggle-hide-columns);
}


#butDelete svg {
    margin-left: 6px;
}


.sortable-th {
    /* position: relative;  */
}

.sortable-th::after {
    content: "\25B2\A\25BC";
    /* Up and down arrows stacked */
    white-space: pre;
    color: var(--color-table-col-headers-updown-arrows);
    display: inline-block;
    font-size: 8px;
    position: absolute;
    right: 3px;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 8px;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.sortable-th:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.sortable-th:hover::after {
    opacity: 1;
}

/* draggable column-resize grip on the right edge of each header */
.col-resize-handle {
    position: absolute;
    top: 0;
    right: 0;
    width: 6px;
    height: 100%;
    cursor: col-resize;
    user-select: none;
    z-index: 2;
    background-color: transparent;
    opacity: 0;
    /* fade-out (returning to this state) is immediate */
    transition: background-color 0.15s ease 0s, opacity 0.15s ease 0s;
}

.col-resize-handle:hover {
    background-color: var(--color-table-col-headers-updown-arrows);
    opacity: 0.5;
    /* the grip only appears after 1s of hovering the edge */
    transition: background-color 0.15s ease 1s, opacity 0.15s ease 1s;
}

/* while hovering the resize grip, hide the sort arrows/underline immediately */
.sortable-th:has(.col-resize-handle:hover)::after {
    opacity: 0;
    transition: opacity 0.15s ease 0s;
}

.sortable-th:has(.col-resize-handle:hover) {
    text-decoration: none;
}

.multi-lines-th::after {
    right: 4px;
}


.table-height-normal {
    /* this overrides auto fill 100% of height */
    height: max-content;
    /* or */
}


.selected-row {
    background-color: yellow;
}


.frozen-column-header {
    position: sticky;
    left: 0;
    z-index: 11;
    /* to prevent bleed-thru;*/
    /* background-color: rgb(230, 230, 230);     */
    background-color: var(--color-table-col-headers-background);
}


.frozen-column-cell {
    position: sticky;
    left: 0;
    z-index: 1;
    /* to prevent bleed-thru;*/
    /* background-color: rgb(230, 230, 230);     */
    background-color: var(--color-table-row);
}

.frozen-column-cell:hover {
    background-color: var(--color-table-row-hover);
}

tr:hover .frozen-column-cell {
    background-color: var(--color-table-row-hover);
}

tr.selected .frozen-column-cell {
    background-color: var(--color-table-row-selected);
}


/* ---- the frozen columns of a dynamic list ---- */

/* the rules above freeze the one column a page names by number, and park it at the left
   edge. a dynamic list names none - each of its column definitions carries its own Frozen
   tick instead, and there can be several. so each one parks after the ones frozen before
   it rather than all of them at 0, and --frozen-left is where that works out to - measured
   and set in table2.js, FrozenColumns_apply, since it follows the widths the columns end
   up with */

/* the header is already sticky to the top of the list - this makes it sticky sideways as
   well, so it stays with its column. over the ordinary headers (10), which slide under it.
   this also does the super header above a group of frozen columns: a group is never part
   frozen and part not (SuperHeaders_getGroups splits one that would be), so a frozen group
   parks the same way a single column does - and the groups further along stop sliding
   across above the frozen columns, which is what they did before */
th.frozen-col-header {
    left: var(--frozen-left, 0px);
    z-index: 12;
}

/* a frozen cell is painted over the rows passing behind it, so it cannot be see-through.
   z-index puts it over the ordinary cells and under the totals row (9) */
td.frozen-col-cell {
    position: sticky;
    left: var(--frozen-left, 0px);
    z-index: 2;
    background-color: var(--color-table-row);
}

/* the frozen cell carries its own background, so it has to repeat whatever the row it is
   part of is showing - otherwise the row changes color around it and it does not */
tr:hover>td.frozen-col-cell {
    background-color: var(--color-table-row-hover);
}

tr.selected>td.frozen-col-cell {
    background-color: var(--color-table-row-selected);
}

/* the totals row is sticky to the bottom already - a frozen column of it is sticky both
   ways, and keeps the totals background rather than the row one */
tr.totals>td.frozen-col-cell {
    left: var(--frozen-left, 0px);
    z-index: 11;
    background-color: var(--color-table-row-totals-background);
}

/* the last of the frozen columns - a soft shadow marks where the frozen part ends, so it
   is clear which columns are the ones staying put */
.frozen-col-edge {
    box-shadow: 2px 0 3px -1px rgba(0, 0, 0, 0.16);
}


tr.disabled-row td {
    opacity: 25%;
}

/* a row whose record is not active - a portfolio company that is not Active in the fund,
   say, which is still listed but is not one of the live ones.
   the text is faded toward whatever the row is painted rather than set to a stated gray,
   so it reads as dimmed in every theme - a gray that works on the light ones disappears
   on the dark ones.
   it is the text color that carries the fade and not the cell's opacity: a frozen column's
   cell has to keep a solid background, or the columns scrolling behind it show through */
tr.inactive-row > td {
    color: color-mix(in srgb, currentColor 50%, transparent);
}

/* whatever the cells hold takes the same faded color - a link carries a color of its own
   and would otherwise stay as bright as an active row's. .td-link states it !important
   (it has a totals row to get past), so this has to as well */
tr.inactive-row > td * {
    color: inherit !important;
}

td.highlight-in-yellow {
    background-color: lightyellow;
}

td.highlight-in-pink {
    color: firebrick;
    background-color: pink;
}

tr.table-row-highlight{
    background-color:var(--color-table-row-highlight);
}

/* how the text of a data cell behaves where it does not fit the width of the column.
   set from the column definition - a column flagged Data Wrap gets td-data-wrap, and
   every other one td-data-nowrap (see Table1_addTd in table2.js) */

td.td-data-wrap {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
}

td.td-data-nowrap {
    white-space: nowrap;
    text-overflow: ellipsis;
}