/****************************************************************/
/*																*/
/* www.HS-and-H.com HSH_AI.Table.Hierarchical.css				*/
/* Used in conjunction with 									*/
/* HSH_AI.Nucleus.Library.11.php::buildHTMLTableFromDataset()	*/
/* or ad hoc builds.											*/
/*																*/
/****************************************************************/

/* Base Table Styling */

:root {
	--table-header-bg-color:black;		/* light yellow: or try #FCFF36 */
	--table-header-color:	white;		/* light yellow: or try #FCFF36 */
}

/* Depth-based row coloring */
.hierarchical-table tr[data-depth="0"] {
    --row-base-color:		#2e6da4;												/* Agent level rows (Deep blue)				*/
    --row-leftmost-color:	color-mix(in srgb, var(--row-base-color) 65%, black);	/* Slightly deeper for collapsible column	*/
}

.hierarchical-table tr[data-depth="1"] {
    --row-base-color:		#5cb85c;												/* Mission level rows (Green)				*/
    --row-leftmost-color:	color-mix(in srgb, var(--row-base-color) 65%, black);	/* Slightly deeper for collapsible column	*/
}

.hierarchical-table tr[data-depth="2"] {
    --row-base-color:		#f0ad4e;												/* Task level rows (Orange)					*/
    --row-leftmost-color:	color-mix(in srgb, var(--row-base-color) 65%, black);	/* Slightly deeper for collapsible column	*/
}

.hierarchical-table {
    width:				100%;
    border-collapse:	collapse;
    font-family:		Arial, sans-serif;
    font-size:			12px;
    color:				black;
	border:				1px solid #ccc;
}

.hierarchical-table th,
.hierarchical-table td {
	border:				1px solid #ccc;
	padding:			1px;
	text-align:			left;
}

/* Sticky header row */
.hierarchical-table thead th {
	position:			sticky;
	top:				0;
    color:				var(--table-header-color);
    background-color:	var(--table-header-bg-color);
	/*background:		#f1f1f1;*/
	z-index:			2;
}

/* Sticky first column */
.hierarchical-table tbody th:first-child,
.hierarchical-table tbody td:first-child {
	position:			sticky;
	left:				0;
	z-index:			1;
}

/* Title column (expandable) retains full depth color */
.hierarchical-table td:first-child {
    background-color:	var(--row-leftmost-color, var(--row-base-color));
    color:				white;
    font-weight:		bold;
}

/* Sticky header/first column intersection (auto via position stacking) */
.hierarchical-table thead th:first-child {
	z-index: 3;
}

/* Zebra-striping other columns using CSS custom props    */
/* --row-base-colour is already a fuction of [data-depth] */
.hierarchical-table tr[data-depth]:nth-child(odd) td:not(:first-child) {
    background-color: color-mix(in srgb, var(--row-base-color) 15%, white);
}
.hierarchical-table tr[data-depth]:nth-child(even) td:not(:first-child) {
    background-color: color-mix(in srgb, var(--row-base-color) 30%, white);
}

.hierarchical-table td:focus {
	outline: 			2px solid #666;		/* cell highlight during navigation */
}

/* Optional semantic styles */
.cell-highlight {
	background-color: #ffff99;	/* light yellow */
	font-weight: bold;
	color: black;
}

.cell-error {
	background-color: #ffe6e6;
	color: #900;
	font-weight: bold;
}