/* CSS for styling */
body, html {
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: sans-serif;
}

* { user-select: none; }
*:focus { outline: none; }

.container {
	display: grid;
	grid-template-columns: 1fr 2fr;
	grid-template-rows: 1fr 2fr;
	gap: 10px;
	width: 100vw;
	height: 100vh;
}

.section {
	background-color: #f0f0f0;
	border: 1px solid #ccc;
	display: flex;
	flex-direction: column; /* Ensure content within sections stacks vertically */
	justify-content: center;
	align-items: center;
	font-size: 24px;
	overflow-y: auto; /* Add vertical scrolling */
}

.section.overview_control { 
	grid-row: 1 / span 2; /* Span the top left section across both rows */
	justify-content: unset;
	align-items: normal;
	padding: 8px;
	gap: 8px;
}

.table-wrapper {
	flex-grow: 1; /* Table wrapper takes remaining space */
	display: flex;
	justify-content: flex-start; /* Align content to the left */
	align-items: flex-start; /* Align content to the top */
	flex-direction: column; /* Content arranged in a column */
	overflow: auto; /* Enable scrolling within the table wrapper */
}

#myTable {
	background-color: #fff;
	width: 100%;
	border-collapse: collapse; /* Collapse table borders */
}

#myTable th {
	position: sticky;
	top: 0; /* Stick the table header to the top */
	background-color: #f0f0f0; /* Set background color for the sticky header */
	width: 100%; /* Ensure table header takes full width */
}

.button-wrapper {
	position: sticky;
	top: 0; /* Stick the button wrapper to the top */
	background-color: #f0f0f0; /* Set background color for the sticky wrapper */
	padding: 10px; /* Add padding for spacing */
	left: 10px;
}

ul {
	list-style-type: none;
	padding: 0;
}
.list-item {
	margin-bottom: 10px;
	display: flex;
	align-items: center;
}

.dot {
	height: 10px;
	width: 10px;
	border-radius: 999px;
	margin-right: 10px;
}
.dot.on { background-color: green; }
.dot.off { background-color: red; }

.buttons {
	margin-left: auto;
}
.dropdown {
	margin-left: 10px;
}

.bottom-right {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center; /* Align squares to the center horizontally */
	gap: 8px;
}

.bottom-right p {
	margin: 8px;
}
.canvas-square {
	border: 5px solid black;
	flex-grow: 1;
	height: calc(40% - 5px);
	background-color: #ccc;
	position: relative;
}
.traffic-light {
	width: 20px;
	height: 20px;
	background-color: red;
	position: absolute;
	bottom: 5px;
	right: 5px;
}
.barrier {
	width: 20px;
	height: 20px;
	background-color: red;
	position: absolute;
	bottom: 5px;
	left: 5px;
}

/* Styles for the inner content of the squares */
.inner-content {
	position: absolute;
	inset: 8px;
}

details {
	border: 1px solid #0008;
	padding: 4px;
}

details summary {
	user-select: none;
	cursor: pointer;
}

details[open] summary {
	border-bottom: 1px solid #0008;
}

input[type="range"] {
	width: 100%;
}

dialog {
	z-index: 999;
	min-width: 320px;
	text-align: center;
	border-radius: 12px;
	border: 1px solid #0006;
	box-shadow: 0 4px 32px -12px #000a;
}
::backdrop {
  background-color: #0008;
  /* opacity: 0.6; */
	backdrop-filter: blur(12px);
}

.blink {
	animation-name: blink;
	animation-duration: 150ms;
	animation-direction: alternate;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

@keyframes blink {
  from { color: red; }
  to { color: black; }
}

.padtop { margin-top: 16px; }
dialog h1 { margin-top: 0; }

button {
	font-size: 1rem;
	border-radius: 8px;
	border: 1px solid #0004;
	padding: 4px 8px;
	cursor: pointer;
	background-color: #0001;
}

button[disabled] {
	cursor: not-allowed;
}

button:not([disabled]):active {
	background-color: #0004;
}

.inputlabel {
	display: flex;
	gap: 8px;
	align-items: stretch;
}