/*
Base layout and UI styles
2024 Jal
*/

/* UI Elements */
button {
	cursor: pointer;
	margin: 0.6em 0em;
}

button, select, legend {
	font-size: 0.75em;
	padding: 0.4em 0.8em;
}

textarea {
	font-family: monospace;
	font-size: 0.9em;
}

button, textarea, select, fieldset {
	border: 1px solid #e9ecf0;
	border-radius: 0.4em;
	background-color: #f6f7fa;
}

/* Layout */
.contentside {
	max-width: 100ch;
	margin: auto;
	padding: 2em 2em 10em 2em;
	overflow: visible;
	position: relative;
	float: left;
}

.inputforms {
	margin-left: 1em;
	margin-right: 1em;
	position: relative;
	float: left;
}

/* Style buttons */
.style-button {
	padding: 5px 10px;
	margin: 0 5px;
	cursor: pointer;
	border: 1px solid #ccc;
	background: #f0f0f0;
	border-radius: 3px;
}

.style-button.active {
	background: #e0e0e0;
	border-color: #999;
}

/* Table borders */
table tr:first-child th {
	border-top: 0;
}

table tr:last-child td {
	border-bottom: 0;
}

table tr td:first-child,
table tr th:first-child {
	border-left: 0;
}

table tr td:last-child,
table tr th:last-child {
	border-right: 0;
}

/* Images */
img {
	max-width: 80%;
}

/* Dark mode for UI elements */
@media (prefers-color-scheme: dark) {
	button, textarea, select, fieldset {
		background: #161b22;
		color: #dce3e9;
		border: 1px solid #30363d;
	}

	button:hover {
		background: #29323f;
	}

	.style-button {
		background: #2d333b;
		border-color: #444c56;
		color: #adbac7;
	}

	.style-button.active {
		background: #444c56;
		border-color: #768390;
	}
}

/* Print styles */
@media print {
	body {
		visibility: hidden;
	}

	h1:not(:first-child) { 
		page-break-before: always; 
	}

	h2 {
		page-break-before: auto;
	}

	table tr td {
		page-break-inside: avoid;
	}

	.section-to-print {
		visibility: visible;
		position: absolute;
		left: 0;
		top: 0;
	}

	.inputforms {
		display: none;
	}
}