/* #region Warband editor area */
#warband-editor {
	--unit-head-backgroundcolor: #d8d8d8;
	--input-borderradius: 0.15em;
	--input-hover-bordercolor: rgba(92, 92, 92, 0.7);
	--input-hover-shadow: 0.1em 0.1em 0.3em #00000040;

	--button-standby-bordercolor: #bdbdbd;
	--button-standby-background: linear-gradient(to bottom, #f9f9f9 50%, #efefef 100%);
	--button-standby-fontcolor: var(--button-standby-bordercolor);
	--button-hover-background: linear-gradient(to bottom, #f3f7fe 50%, #dce3f2 100%);
	--button-hover-bordercolor: #8295bd;
	--button-hover-color: #63718f;
	--button-hover-shadow: var(--input-hover-shadow);
	--button-active-shadow: 0.08em 0.05em 0.15em #00000040;

	flex: 1;
	cursor: default;
	margin: 1em auto 3em auto;
	width: 100%;

	* {
		font-family: var(--warband-font);
		font-size: 1em;
		background-color: inherit;
	}

	[name="warbandname"] {
		font-size: 2em;
		font-weight: bold;
		width: 100%;
		text-align: center;
		margin: 0 0 1em 0;
	}

	[data-highlight-personalities="true"] [data-ispersonality="true"] {
		font-weight: bold;
	}

	input,
	select,
	span,
	div[name="warbandname"][contenteditable] {
		border: 1px solid transparent;
		display: inline-block;
		padding: 0;
	}

	input,
	select,
	[contenteditable],
	.clickable {
		border-radius: var(--input-borderradius);
		cursor: text;
	}
	input,
	select {
		max-width: max-content;
	}

	div.specialrules {
		/* Display all specialrules a flexbox */
		display: flex;
		flex-wrap: wrap;
		column-gap: 0.3em;
		align-items: flex-start;
		/* Add a comma to every actual specialrule (but not the last one) */
		span[name="specialrule"]:not(:last-of-type)::after {
			content: ",";
		}
	}

	#warband-summary {
		margin-top: 1.5em;
		span {
			display: inline-block;
		}
		.rule-violation {
			color: red;
			text-indent: -1.4em;
			margin-left: 1.6em;
			&::before {
				content: "\f06a"; /* circle-exclamation */
				font-family: var(--fontawesome);
				font-weight: 800;
				font-size: 0.9em;
				padding-right: 0.5em;
			}
		}
	}
}

@media print {
	/* Remove "up/down" buttons from `<input type="number">` elements. */
	input[type="number"] {
		appearance: textfield; /* Firefox */
		-moz-appearance: textfield; /* Firefox */
	}
	input[type="number"]::-webkit-inner-spin-button,
	input[type="number"]::-webkit-outer-spin-button {
		-webkit-appearance: none; /* Chrome, Safari, Edge */
		margin: 0;
	}

	#warband-editor {
		padding: 0;
		margin: 1em 0 0 0;
		width: 100vw;
		.clickable,
		.specialruletrigger,
		.tooltip {
			display: none;
		}
		input,
		select,
		span {
			border: none;
		}
	}
}

@media print and (max-width: 510px) {
	#warband-editor {
		margin: 0;
		[name="warbandname"] {
			font-size: 1.75em;
		}
	}
}

@media screen {
	#warband-editor {
		[name="warbandname"] {
			margin-top: 1em;
			text-shadow: 0.05em 0.05em 0.3em #00000052;
		}

		span[name="specialrule"] {
			.tooltip {
				display: block;
				position: absolute;
				visibility: hidden;
				font-family: var(--sans-font);
				font-size: 0.8em;
				color: black;
				padding: 0.4em;
				margin-top: 0.5em;
				background-color: #ffffd0;
				box-shadow: 0.2em 0.2em 0.7em #00000080;
				z-index: 99999;
				border-radius: 0.5em;
				pointer-events: none;
				white-space: normal;
			}
			.tooltip:before {
				content: "";
				position: absolute;
				border-bottom: 15px solid #ffffd0;
				border-left: 8px solid transparent;
				border-right: 8px solid transparent;
				left: 1.2em;
				margin-top: -18px;
			}
			&:hover .tooltip {
				visibility: visible;
			}
			.out-of-scope {
				border-bottom: 2px dotted #f00;
			}
		}

		.clickable {
			color: #aaa;
			padding: 0 0.2em;
			cursor: pointer;
			&:hover {
				color: #000;
			}
		}

		.specialruletrigger {
			user-select: none;
			font-family: var(--sans-font);
			color: #aaa;
			padding: 0.1em 0.5em;
			margin: -0.1em 0em;
			border-radius: 0.5em;
			border: 2px dashed #dfdfdf;
		}

		i.fa-regular,
		i.fa-solid {
			font-family: var(--fontawesome);
			display: inline-block;
			width: 1em;
			text-align: center;
		}

		/* No need for warband summary to be sticky on printer. */
		#warband-summary {
			position: sticky;
			bottom: 0;
			margin-top: 3em;
			pointer-events: none;
			background-color: #ffffff60;
			span,
			span::before {
				max-width: fit-content;
				background-color: #fff;
				border-radius: 0.5em;
				box-shadow: 0 0 0 2px #fff;
				pointer-events: auto;
				cursor: text;
			}
		}
	}
}
/* #endregion */

/* #region Classic unit sheet. */
#warband-editor .unitsheet-grid {
	--max-unit-sheet-width: 500px;
	display: flex;
	flex-direction: column;
	row-gap: 1.5em;

	thead .flex {
		display: flex;
		flex-direction: row;
		column-gap: 0.5em;
		align-items: baseline;
	}

	.buttons {
		display: none;
		flex-direction: column;
		row-gap: 0.5em;
		button {
			max-height: min-content;
			max-width: var(--max-unit-sheet-width);
		}
		button:first-child {
			padding: 1.5em;
		}
	}

	table.unitsheet {
		border: none;
		border-collapse: collapse;
		border-spacing: 0;
		table-layout: fixed;
		width: 100%;
		max-width: var(--max-unit-sheet-width);
		align-self: start; /* Align table to the top of the grid cell */

		td {
			text-align: left;
			vertical-align: baseline;
			padding: 0.35em;
			border: 1px solid black;
			font-weight: normal;
		}

		thead {
			tr {
				background-color: var(--unit-head-backgroundcolor);
			}
			[name="count"] {
				width: 3em;
			}
			/* The "count" input shall not be visible until its value is greater than 1. */
			&:not(:hover):not(:focus) input[name="count"][data-value="1"]:not(:hover):not(:focus) {
				color: transparent;
			}
		}

		tbody td {
			width: 33.33%;
		}
	}
}
@media (min-width: 715px) {
	#warband-editor .unitsheet-grid {
		display: grid;
		grid-template-columns: 1fr 1fr; /* Two equal-width columns */
		gap: 1.5em;
	}
}
@media screen {
	#warband-editor .unitsheet-grid {
		.buttons {
			display: flex;
		}
		table.unitsheet {
			box-shadow: 0.1em 0.1em 0.3em #0000002f;
			background: linear-gradient(165deg, #ffffff 75%, #f2f2f2 100%);

			tr.head {
				background: linear-gradient(135deg, #d8d8d8 70%, #c8c8c8 100%);
			}
		}
	}
}
/* #endregion */

/* #region "desktop" layouts input elements. */
#warband-editor .desktop {
	/* Remove caret from `<select>` elements. */
	select {
		appearance: none;
		-webkit-appearance: none; /* Safari */
		-moz-appearance: none; /* Firefox */
	}
	/* Make specialrule selector insisible by default; enable it on screen only. */
	select[name="specialrules"] {
		display: none;
	}
}
@media screen {
	#warband-editor .desktop {
		/* Highlight any input elements on respective hover ("ih" stands for "input hover"). */
		.ih:hover input,
		.ih:hover select,
		.ih:hover [contenteditable],
		.ih:hover .clickable {
			border-color: var(--input-hover-bordercolor);
			background-color: white;
			box-shadow: var(--button-hover-shadow);
			color: #000;
		}
		.ih:hover .specialruletrigger {
			text-align: center;
			border-radius: 0.5em;
			border-color: var(--button-standby-bordercolor);
			background-color: #f3f3f3;
			background: var(--button-standby-background);
			color: var(--button-standby-fontcolor);
			cursor: pointer;
			&:hover {
				background: var(--button-hover-background);
				border-color: var(--button-hover-bordercolor);
				border-style: solid;
				color: var(--button-hover-color);
				box-shadow: var(--button-hover-shadow);
				&:active {
					transform: translateY(2px);
					box-shadow: var(--button-active-shadow);
				}
			}
		}

		input,
		select {
			padding: 0 0.2em;
			min-width: 2em;
		}
		select {
			cursor: pointer;
		}

		input,
		select,
		[contenteditable],
		.clickable {
			&:hover,
			&:focus {
				border-color: var(--input-hover-bordercolor);
				background-color: #fff;
				box-shadow: var(--input-hover-shadow);
				position: relative; /* Requied for z-index to have effect. */
				z-index: 1;
			}
			&[name="warbandname"] {
				&:hover,
				&:focus {
					border-color: var(--input-hover-bordercolor);
					background: linear-gradient(to bottom, #fff 70%, #e0e0e0 100%);
					padding-right: initial;
					box-shadow: none;
				}
			}
		}

		[contenteditable].dyn-width:focus {
			min-width: 1em;
			&::after {
				content: "";
				padding-right: 1em;
			}
		}

		select[name="specialrules"] {
			color: #aaa;
			display: initial;
			&:hover,
			&:active {
				color: #000;
			}
		}

		.specialrule-deletehelper {
			cursor: pointer;
			/* Make actual specialrule red and strikethrough on hover */
			&:hover,
			&:hover ~ span {
				/* Only text content is in <span> elements. <div> is for the tooltip. */
				color: red;
				text-decoration: line-through;
			}
		}

		i.fa-regular,
		i.fa-solid {
			cursor: pointer;
			color: rgba(0, 0, 0, 0.3);
			&:hover {
				color: #495b8f;
			}
		}

		div.buttons {
			button {
				display: inline-block;
				flex: 1;
				font-family: var(--sans-font);
				text-align: center;
				border-radius: 1em;
				border: 2px dashed var(--button-standby-bordercolor);
				padding: 0.5em 1.5em;
				background-color: #f3f3f3;
				background: var(--button-standby-background);
				color: var(--button-standby-fontcolor);
				cursor: pointer;
				&:hover {
					background: var(--button-hover-background);
					border-color: var(--button-hover-bordercolor);
					border-style: solid;
					color: var(--button-hover-color);
					box-shadow: var(--button-hover-shadow);
					&:active {
						transform: translateY(2px);
						box-shadow: var(--button-active-shadow);
					}
				}
			}
		}
	}
}
/* #endregion */