/* /* static/styles/custom_tables.css */ */
/**/
/* /* */
/*   ================================================================== */
/*   1. TABLE THEMES */
/*   These classes are added to the <table> element. They override the */
/*   default --accent-color, and the existing .data-table header style */
/*   in brutalist.css will automatically use it. */
/*   ================================================================== */
/* */ 
/* .table-theme-valuation { --accent-color: #3A5BA0; } */
/* .table-theme-winners   { --accent-color: #809A6F; } */
/* .table-theme-laggards  { --accent-color: #774360; } */
/* .table-theme-industry  { --accent-color: #CA965C; } */
/* .table-theme-commo     { --accent-color: #1a1a1a; } /* Black for commodities */ */
/**/
/**/
/* /* */
/*   ================================================================== */
/*   2. COLUMN WIDTH UTILITIES */
/*   Add these classes to <th> elements in your HTML to control */
/*   their width, replacing all the complex nth-child rules. */
/*   ================================================================== */
/* .col-xs { width: 35px; min-width: 35px; max-width: 100%; } */
/* .col-sm { width: 55px; min-width: 55px; max-width: 100%; } */
/* .col-md { width: 80px; min-width: 80px; max-width: 100%; } */
/* .col-lg { width: 150px; min-width: 150px; max-width: 100%; } */

/*
 * This container will wrap our table. While it has this class,
 * the table inside will be completely invisible but still occupy space,
 * preventing layout jumps.
 */
.datatable-container-loading > .data-table {
    visibility: hidden;
    opacity: 0;
}

/*
 * When the container gets the 'loaded' class (via JavaScript),
 * the table will fade in smoothly.
 */
.datatable-container-loaded > .data-table {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.3s ease-in;
}

/* /* */
/*   ================================================================== */
/*   3. DARK MODE COMPATIBILITY FOR TABLES */
/*   Ensures striped rows look good in dark mode. */
/*   ================================================================== */
/* */ */
/* html.dark-mode .data-table tr:nth-child(even) { */
/*     background-color: var(--subtle-bg-color); */
/* } */