/*
	Lotus Maxima - Table theme (c) 2017-2026 by Pedro
	https://pedrosworks.com/
*/

.hidden{
	display:none !important;
}

button{
	--button-color:var(--primarylight);
	color:var(--text);
	background-color:var(--button-color);
	font-size: inherit;
	font-family: inherit;
	align-self:center;
	align-items: center;
	display: flex;
	flex-direction: column;
	border-width: 0px;
	padding:var(--h-2) var(--w2) var(--h-2) var(--w2);
	margin:var(--h1) var(--w2) var(--h1) var(--w1);
	border-radius: var(--s1);
}

button.selected{
	border-top-width:var(--s-8);
	border-bottom-width:0;
}

button.inline{
	display: inline;
	width: unset;
	margin: unset;
	padding-left: unset;
	padding-right: unset;
}

button a{
	text-decoration:none;
	color:inherit;
}

.inputlabel{
	 padding: 0;
	 white-space:nowrap;
	 border:none;
}
.inputlabel button{
	padding:0px 2px;
	border-radius:calc(var(--lineheight)*0.3);
	background-color: var(--primarylightest);
	border-bottom-width: 1px;
	
}
.inputlabel .subtract{
	--huen:-60;
}

.search{
	position: sticky;
	top: var(--s4);
	z-index: 4;
}

.table .search{
	width: 100%;
}

.search ~ * thead,
.search > * thead{
	top:calc(var(--lineheight)*1.9) /*space for both search and headers*/
}
	

	.table{
	font-size: 90%;
	overflow-x:clip;
	overflow-y:clip; /* so the eather does not come below on search scroll*/
	margin-top: var(--s1);
	margin-bottom: var(--s1);
	word-break:break-word
}

table{
	border-collapse: collapse;
	width:100%;
}

thead{
	position: sticky;
  top: var(--s4);
	z-index: 4;
}

.ascended::before{
	content:"▲"
}
.descended::before{
	content:"▼"
}

thead th{
	background-color:var(--terciarychiaroscuro);
	color:var(--neutrallightest);
	padding:var(--s1);
}


tbody tr{
	background-color:var(--neutrallightest);
}
tbody tr:nth-child(odd){
	background-color:var(--neutrallight);
}


tbody tr:hover{
	background-color:var(--secondarylight);
	color:var(--neutraldarkest);
}

tbody td:hover{
	background-color:var(--secondarylight);
	filter:brightness(0.9)
}

td{
	padding: var(--s-2);
	min-width: 40px
}

.table.dense td{
	max-width: 0px;
}

@media only screen and (max-width:350px){

	thead th, tbody tr{
		display:flex;
		flex-direction:column;
	}
	tr{
		margin-bottom: var(--dynasize);
		border-bottom: var(--dynasize) solid var(--lightcolour);
	}
	tr td{
		text-align: left;
	}
	tr:nth-child(even) td{
		text-align: right;
	}
	
	.table.dense td{
	   max-width: 100vw
  }
	
}

.table .caption{
	color:var(--darkcolour);
	font-style:italic;
}

.table .image{
	max-width: calc(var(--fontheight) * 10)
}