:root {
	--main-padding: 2.0em;
	--simutrans-transparent: #e7ffff;
	--simutrans-paktype: 128px;
	--small-preview-ratio: 1;
}

body {
	background: #ddd;
}

/* 画像なし画像 */
.noimage {
	margin-top: 2.0em;
}

/* ヘッダ */
header {
	z-index: 99998;
	position: sticky;
	top: 0;
	left: 0;
	width: 100%;
	background-color: #fff;
	margin: 0;
	margin-bottom: calc(2.0em - 4px);
	padding: calc(0.8em - 4px) var(--main-padding);
	border-bottom: 1px solid var(--formation-table-main-border);
	display: flex;

	>div.button-group {
		display: flex;

		&:not(:last-child) {
			margin-right: 1.0em;
			padding-right: 0.25em;
			border-right: 1px solid #bbb;
		}
	}

	& div.button-outer {
		margin-right: 0.75em;
	}

	>div.button-group div.button-outer {

		.mku-drop-menu-container .mku-drop-parent-button,
		>button {
			padding: 8px 10px;
			background-color: var(--button-face);
			border: 1px solid var(--button-face);
			border-radius: 3px;
			font-size: 11pt;

			&:hover {
				background-color: var(--button-face-hover);
			}

			&:active {
				background-color: var(--button-face-active);
			}
		}

		.mku-drop-menu-container {
			&:has(input.mku-drop-menu-checkbox:checked) .mku-drop-parent-button {
				color: var(--button-face);
				background-color: #fff !important;
			}

			.mku-drop-container {
				border: 1px solid #333;
				box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);

				& button {
					font-size: 11pt;
					background-color: #fff;
					color: var(--button-face);
					display: block;
					width: 100%;
					border: none;
					border-radius: 0;
					padding: 8px 10px;
					padding-right: 12px;
					text-align: left;

					&:not(:last-child) {
						border-bottom: 1px solid #777 !important;
					}

					&:hover {
						background-color: var(--table-alternate-color-2);
					}

					&::before {
						display: inline-block;
						width: 1.0em;
					}
				}

			}
		}
	}
}


header>div.button-group div.button-outer .mku-drop-menu-container:has(input.mku-drop-menu-checkbox:disabled) .mku-drop-parent-button,
header>div.button-group div.button-outer>button:disabled,
header>div.button-group div.button-outer .mku-drop-menu-container .mku-drop-container button:disabled {
	pointer-events: none !important;
	background-color: #ddd !important;
	border-color: #ccc;
	color: #777 !important;
}

/* メイン画面 */
select#carsSelectBox {
	max-width: calc(100vw / 3 - 12em);
}

#constraint-container {
	column-count: 3;
	column-gap: 1.6em;
	padding: 0 var(--main-padding);
	margin-top: 1em;
	margin-bottom: 3em;

	>div {
		page-break-inside: avoid;
		break-inside: avoid;
		break-before: column;
		height: calc(100vh - 18.5em - var(--simutrans-paktype));
		border: 1px solid var(--formation-table-main-border);
		padding: 1.0em;
		background-color: #fff;
		transition: height 150ms 0s ease;

		&:nth-child(2) {
			text-align: center;
			overflow-y: hidden;
			box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);

			#main-image-container .image-container {
				cursor: pointer;
				display: block;
				margin: 0 auto;
			}

			#main-proptable-container {
				height: calc((100vh - 18.5em - var(--simutrans-paktype)) - var(--simutrans-paktype) - 6.6em + 4px);
				overflow-y: scroll;
				border: 1px solid var(--formation-table-main-border);
				margin-top: 1em;
				transition: height 150ms 0s ease;

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

					& input,
					& .input-textbox {
						width: 100%;
						font-size: 9pt;
						padding: 0.4em;
					}

					& tr:nth-child(even) {
						background-color: #f2f2f2;
					}

					& th,
					& td {
						padding: 10px;
						text-align: center;
						border-bottom: 1px solid #ccc;
						font-size: 75%;
					}

					& td {
						&:first-child {
							text-align: right;
							font-weight: bold;

							& p {
								opacity: 0.5;
								font-weight: normal;
								margin: 0;
							}
						}

						&:first-child,
						&:last-child {
							width: max-content;
							text-wrap: nowrap;
						}

						&:nth-child(2) {
							text-align: left;
							width: 100%;
							text-wrap: wrap;
							position: relative;
							padding-left: 0;
							padding-right: 0;

							.suggestion-box {
								z-index: 1000;

								>div {
									padding: 0.4em;
								}
							}
						}

						&:last-child {
							color: #f00;
							font-size: 75%;

							& button {
								font-size: 12pt;
								padding: 1px 8px;
							}
						}
					}
				}
			}
		}

		&.constraint-view {
			overflow-y: scroll;
			background-repeat: no-repeat;
			background-size: 20vw;
			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1) inset;

			>ul {
				padding-left: 0;
				display: flex;
				flex-wrap: wrap;
				margin: 0;

				>li.draggable-object {
					list-style: none;
					z-index: 1;
					box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.3);
				}

			}
		}

		&#constraint-prev-container {
			background-position: bottom 1rem left 1rem;
			background-image: url(../img/constraint_prev.png);
		}

		&#constraint-next-container {
			background-position: bottom 1rem right 1rem;
			background-image: url(../img/constraint_next.png);
		}

		& p {
			margin-top: 0;

			&#prop-controller {
				margin: 0;
				background-color: rgba(255, 255, 255, 0.9);
				padding-top: 1em;
				padding-bottom: 1em;
				position: sticky;
				margin-top: 0.5em;
				bottom: 0;
			}
		}
	}
}

.image-container {
	display: inline-block;
	user-select: none;
	border: 1px solid var(--formation-table-main-border);
	width: var(--simutrans-paktype);
	height: var(--simutrans-paktype);
	background-color: var(--simutrans-transparent);
	overflow: hidden;
	background-repeat: no-repeat;

	&.no-image {
		background-position: center;
		background-size: 50%;
	}
}

/* フッタ */
footer {
	z-index: 999;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: #fff;
	margin: 0;
	margin-bottom: 0;
	padding: 0.8em var(--main-padding);
	border-top: 1px solid var(--formation-table-main-border);
	transition: transform 150ms 0s ease;

	& p {
		margin-top: 0;
	}

	& #addons-list {
		border: 1px solid var(--formation-table-main-border);
		display: flex;
		width: 100%;
		overflow-x: scroll;
		min-height: var(--simutrans-paktype);
		box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.1) inset;

		>div.draggable-object {
			width: calc(var(--simutrans-paktype) + 2em + 4px + 1px);

			&:not(:last-child) {
				margin-right: 0;
			}

			&.editing {
				border: 2px solid var(--formation-table-main-border);
			}
		}
	}

}


/* メッセージ */
.message-content {
	&.normal-message {
		top: calc(40px + 0em);
	}

	&.dat-file-loaded {
		top: calc(40px + 0em);
	}

	&.image-file-loaded,
	&.file-saved {
		top: calc(40px + 4.5em);
	}

	&.tab-file-loaded {
		top: calc(40px + 9.0em);
	}
}

/* 折り畳み */
#collapsible-button::before {
	margin: 0;
	display: block;
	transition: transform 150ms 0s ease;
}

body.collapsible {
	#collapsible-button::before {
		transform: rotate(180deg);
	}

	#constraint-container>div {
		height: calc(100vh - 11em + 8px);

		&:nth-child(2) #main-proptable-container {
			height: calc((100vh - 11em) - var(--simutrans-paktype) - 6.6em + 8px);
		}
	}

	& footer {
		transform: translateY(calc(100% - 3em));
	}
}