/*---------------------------------------------------------------------------*/
/* fixed layouted table with a horizontal scrollbar for the whole table and
   a vertical one for the body part only with adaptive height */

.Table
{
	--cell_height: 1.3em;
	--cell_hspacing: 0.5em;
	--cell_vspacing: 2px;
	
	width: max-content;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: end; /* this is to right align items in table header and footer, which do not have a left scrollbar like the article */
}

.Table>*
{
	width: max-content; /* to make the hor scrollbar appear for the ancestor and the background appear over full width */
	direction: rtl; /* to make the scrollbar appear left */
}

.Table>header
{
	flex: 0 0 auto;
	background-color: var(--table_line);
	--unclip_color: var(--table_line);
}

.Table>article
{
	flex: 0 1 auto; /* do not grow here because of visible scrollbar */
	overflow-y: scroll; /* using 'auto' would make the horizontal scroll appear also */
	--unclip_color: var(--article_background);
}

.Table>footer
{
	flex: 0 0 auto;
	background-color: var(--submenu_background);
}

.Table>*>div /* container for columns */
{
	width: max-content; /* to make the hor scrollbar appear for the ancestor and the background appear over full width */
	display: flex;
	flex-direction: row;
	padding: 0 calc(0.5 * var(--cell_hspacing)); /* columns have the same */
	border: solid 1px var(--table_line);
	border-top: unset;
	direction: ltr; /* undo what was needed for scrollbar positioning in the parent */
}

.Table>*>div>div /* columns */
{
	width: 6em; /* default; can be overidden per column */
	height: max-content; /* otherwise separator borders are not drawn completely with scrolling */
	background-color: inherit; /* to allow cells inherting it also (neede for unclipping feature) */
}

.Table>*>div>div>div /* cells */
{
	height: var(--cell_height); /* to ensure proper row alignment and prevent collapsing of empty cells */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding: 0 calc(0.5 * var(--cell_hspacing)); /* ver hor; padding does not collapse */
	margin: var(--cell_vspacing) 0; /* margins collapse within the column div */
}

/*---------------------------------------------------------------------------*/

.TableGroup /* for columns with group flag */
{
	border-left: solid 1px var(--table_line);
	margin-left: var(--cell_hspacing); /* this will be a gap in hover color */
}

.TableJoin /* for rows with join header */
{
	border-top: solid 1px var(--table_line);
}

.Table>article *.TableNumber, /* for columns with float or date data */
.Table>footer *.TableNumber
{
	text-align: right;
}

.TableUnclip /* for clipped cells when being hovered */
{
	width: max-content; /* to make visible clipped content */
	position: relative; /* to bring it on top in z-order */
	background-color: var(--unclip_color); /* would be transparent otherwise */
	padding-right: 0.5em !important;
}

.TableHighlight /* for all cells in row of hovered body cell */
{
	background-color: var(--submenu_background);
}

/*---------------------------------------------------------------------------*/

.Table img
{
	vertical-align: text-bottom;
}

.Table input[type=checkbox]
{
	margin: 0;
	margin-right: var(--cell_hspacing);
	vertical-align: middle;
}

/*---------------------------------------------------------------------------*/