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);
}

/* a bar across the top and the bottom of the whole row, so the selected one is picked out
   from the hover colour and from the rows either side of it. inset shadows on the cells
   rather than a border on the row: a border adds to the height of the row and pushes the
   rows below it down every time the selection moves, and a shadow on a tr is not painted
   on a collapsed-border table in every browser. the cells sit against each other, so the
   bars meet up as one line the width of the row */
tr.selected > td {
    box-shadow: inset 0 2px 0 0 var(--color-table-row-selected-forecolor),
                inset 0 -2px 0 0 var(--color-table-row-selected-forecolor);
}

/* the last of the frozen columns carries the divider marking where the frozen part ends.
   that is the same property, so it has to be written out again here - otherwise the rule
   above replaces it and the divider breaks at that one cell on the selected row */
tr.selected > td.frozen-col-edge {
    box-shadow: inset 0 2px 0 0 var(--color-table-row-selected-forecolor),
                inset 0 -2px 0 0 var(--color-table-row-selected-forecolor),
                2px 0 3px -1px rgba(0, 0, 0, 0.16);
}

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

/* a value that is there but does not count - the FV methodology of a company the OPM
   calculation passes over, say. only the text is dimmed: it is not a warning */
td.highlight-in-gray {
    color: gray;
}

/* the row's warning color, on the columns of a dynamic list ticked Warning Color. the row
   says which through its WarningsColor column: warn while its warnings are not yet
   acknowledged, ok once they are. what Warnings.StyleText2 does on the hand-written pages */
td.warning-color-warn {
    color: var(--color-text-warning);
}

td.warning-color-ok {
    color: green;
}

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

/* a line the page puts under a cell's own value - why the last backsolver run would not calculate
   this company, say. it sits inside a td that is otherwise nowrap, so it states its own wrapping */
.table-cell-runnote,
.table-cell-runnote-done {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
    font-size: 0.75rem;
    font-style: italic;
    line-height: 1.25;
    padding-top: 2px;
}

/* why the run would not calculate this company. --color-text-warning is firebrick on the light
   themes and pink on the dark ones - a flat red is barely legible on a dark row */
.table-cell-runnote {
    color: var(--color-text-warning);
}

/* ...and the ones it did calculate. not a warning, so it takes the ordinary text colour */
.table-cell-runnote-done {
    color: var(--color-text-1);
}

/* the company the backsolver is working on right now. strong on purpose: the run puts up a modal
   please-wait dialog, so this is read through the dimming the modal lays over the page.
   the background stays this amber on every theme - it has to carry through that dimming - so the
   text is pinned dark rather than following --color-text-1, which is white on the dark themes */
tr.table-row-calculating > td {
    background-color: #ffd75e;
    color: #222;
    font-weight: 600;
}

/* whatever the cells hold takes that same dark text - a link carries a color of its own and would
   otherwise stay bright on the amber. same reasoning as tr.inactive-row above */
tr.table-row-calculating > td * {
    color: inherit !important;
}

/* a result cell of a list that calculates down its rows - the Fair Value OPM and Waterfall runs
   write the outcome of each company into one as it finishes. the warning colour is theme-aware:
   firebrick on the light themes, pink on the dark ones */
.table-cell-result-warning {
    color: var(--color-text-warning);
}

/* the one row of a list that has no rows - 'No rows to show', 'No rows match the search' or the
   Please Wait message (see MessageRow_add in table2.js). a single cell spanning every column. it
   is not a row of the list, so it does not take the hover or the selected colours */
tr.table-message-row,
tr.table-message-row:hover {
    background-color: transparent;
}

tr.table-message-row > td,
tr.table-message-row:hover > td {
    padding: 20px 16px;
    color: var(--color-text-1);
    opacity: 0.7;
    font-style: italic;
    border-bottom: none;
    cursor: default;
}