body:has(#artux-tectonic) {
	#firstHeading {
		display: none;
	}

	#maincontentwrapper {
		padding-top: 0 !important;
	}
}



#artux-tectonic {
	--tt-bg-color: hsl(0, 0%, 75%);
	--tt-btn-color: hsl(0, 0%, 90%);
	--tt-hover-color: hsl(0, 0%, 80%);
}

#artux-tectonic {
	display: grid;
    width: 100%;
	
	row-gap: 16px;
	padding: 8px;
	
	background-color: hsl(0, 0%, 65%);
}



/*===============*/
/* TREE OVERVIEW */
/*===============*/

#tt-tree-overview {
	display: grid;
	grid-auto-rows: 40px;

	row-gap: 4px;
	padding: 4px;

	background-color: var(--tt-bg-color);
	;
}

#tt-tree-overview > span {
	display: flex;
	background-color: var(--tt-btn-color);

	&:not(:empty):hover {
		cursor: pointer;
		background-color: var(--tt-hover-color);
	}

	span {
		display: grid;
		align-items: center;

		margin: 4px;
		padding: 0 4px;

		font-weight: normal;
	}

	.tt-level-name {
		background-color: hsl(0, 0%, 85%);
		font-family: monospace;
	}

	.tt-level-title {
		font-family: monospace;
	}
}



/*=================*/
/*  CONTROL PANEL  */
/*=================*/

#tt-control-panel {
	display: flex;
	height: 44px;
	
	background-color: var(--tt-btn-color);
}

#tt-control-panel .tt-btn {
	width: 44px;
	background-color: hsl(0, 0%,90%);
	
	:hover {
		background-color: var(--tt-hover-color);
		cursor: pointer;
	}
	
	&.selected {
		background-color: var(--tt-hover-color);
	}
	
	
	i {
		display: flex;
		height: 100%;
        align-items: center;   /* vertical centering */
        justify-content: center; /* horizontal centering */
	}
	
	
	&.right {
		margin-left: auto;
	}
}

#tt-control-panel #tt-ctrl-signature {
	padding: 0 10px;
	font-weight: normal;
	display: flex;
	height: 100%;
    align-items: center;   /* vertical centering */
}



/*=================*/
/*  DATATABLES     */
/*=================*/

#tt-datatable {
	background-color: hsl(80, 0%, 95%);
	padding: 5px;
}

#tt-datatable > span,
#tt-datatable .tt-placeholder-loading {
	display: flex;
	min-height: 200px;
    align-items: center;   /* vertical centering */
    justify-content: center; /* horizontal centering */
}

#tt-datatable > .dt-container {
	
}


#tt-datatable > .dt-container tr {
	cursor: pointer;

	&:hover {
		background-color: #eeeeee;
	}

	&:has(.dataset-details)>td {
		background: hsl(0, 0%, 90%);
	}

	.dataset-details {
		display: grid;
		gap: 4px;
		grid-template-columns: min-content auto;

		span,
		div {
			padding: 4px;
			background: hsla(0, 0%, 100%, .8);
		}
	}
}




/*=============================*/
/* Skeleton animation (UNUSED) */
/*=============================*/

.skeleton > span {
	background: linear-gradient(90deg, #e0e0e0 25%, #f2f2f2 50%, #e0e0e0 75%);
	background-size: 200% 100%;
	animation: skeleton-loading 5s linear infinite;
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}