/* ------------------------------------------------------------------ *
 * Main data table (#mtable) styling. Scoped to #mtable so the
 * para_table / ts_table config tables are left untouched; colours
 * follow the active Bootstrap theme via --bs-* variables.
 * ------------------------------------------------------------------ */

/* header: faint fill + bold, thin separating line.
   Include .dash-select-header so the auto-added row-selection (checkbox)
   column's header matches the data-column headers. */
#mtable .dash-spreadsheet-inner th.dash-header,
#mtable .dash-spreadsheet-inner th.dash-select-header,
#para_table .dash-spreadsheet-inner th.dash-header,
#para_table .dash-spreadsheet-inner th.dash-select-header,
#ts_table .dash-spreadsheet-inner th.dash-header,
#ts_table .dash-spreadsheet-inner th.dash-select-header {
    /* background-color: rgba(var(--bs-secondary-rgb)); */
    font-weight: 600;
    border-bottom: 1px solid var(--bs-border-color);
}

/* zebra striping (main table only): nth-child(even) shades the same rows as
   the former style_data_conditional row_index 'odd' (0-based 1,3,5 = 1-based
   2,4,6). Include .dash-select-cell so the checkbox column stripes too. */
#mtable .dash-spreadsheet-inner tbody tr:nth-child(even) td,
#mtable .dash-spreadsheet-inner tbody tr:nth-child(even) td.dash-select-cell {
    background-color: rgba(var(--bs-primary-rgb), 0.2);
    /* background-color: rgba(var(--bs-tetriary-rgb)); */
}

/* row hover: danger (theme-aware) outline across the hovered row, a line
   above and below rather than a box around every cell. !important so it
   wins over the inline cell borders Dash sets. */
#mtable .dash-spreadsheet-inner tbody tr:hover td,
#para_table .dash-spreadsheet-inner tbody tr:hover td,
#ts_table .dash-spreadsheet-inner tbody tr:hover td {
    border-top: 1px solid rgba(var(--bs-danger-rgb), 1) !important;
    border-bottom: 1px solid rgba(var(--bs-danger-rgb), 1) !important;
}

/* config-table dropdowns: drop the grey frame so the dropdown blends into
   the cell, and darken the pale caret so it follows the theme text colour */
#para_table .Select-control,
#ts_table .Select-control {
    border: none !important;
    background-color: transparent !important;
}
#para_table .Select-arrow,
#ts_table .Select-arrow {
    border-top-color: var(--bs-body-color) !important;
}

/* ------------------------------------------------------------------ *
 * group separators (#mtable): box each top-level header group with a
 * border on its left AND right edges. Targets the columns by
 * data-dash-column so the border reaches EVERY merged-header sub-row
 * (group row, sub-name, unit, filter) and the body cells alike -- which
 * style_header_conditional could not do. The column lists match the
 * FIRST and LAST column of each group in assets/_main_columns.json.
 * ------------------------------------------------------------------ */

/* left edge: first column of each group */
#mtable [data-dash-column="sea"],
/* #mtable [data-dash-column="norwegian share"], */
#mtable [data-dash-column="rec. oil"],
#mtable [data-dash-column="rem. oil"],
#mtable [data-dash-column="STOIIP"],
#mtable [data-dash-column="RF oil"],
#mtable [data-dash-column="maturity oil"],
#mtable [data-dash-column="t10"],
#mtable [data-dash-column="prod. age"],
#mtable [data-dash-column="rem. OE prod. years"],
#mtable [data-dash-column="peak year"],
#mtable [data-dash-column="well num"],
#mtable [data-dash-column="subsea index"],
#mtable [data-dash-column="lat"],
#mtable [data-dash-column="depth min"],
#mtable [data-dash-column="depth"],
#mtable [data-dash-column="oil PV0"],
#mtable [data-dash-column="rec. oil PV"],
#mtable [data-dash-column="CO2 SC"],
#mtable [data-dash-column="CO2 SC/well num"],
#mtable [data-dash-column="CO2 density RC"],
#mtable [data-dash-column="injectivity ind."],
#mtable [data-dash-column="total score"] {
    /* border-left: 2px solid var(--bs-secondary-color) !important; */
    border-left: 1.5px solid var(--bs-secondary-color) !important;
    /* border-left: 2px solid var(--bs-primary-border-subtle) !important;     */
    /* border-left: var(--bs-primary-border) !important;     */
    /* border-left: 1.5px solid !important; */
}

/* right edge:  */
#mtable [data-dash-column="total score"] {
    border-right: 1.5px solid var(--bs-secondary-color) !important;
    /* border-right: 1.5px solid var(--bs-primary-border-subtle) !important; */
    /* border-right: 1.5px solid !important; */
}