:root {
	--bg-well-start: green;
	--bg-well-end: lightgreen;

	--bg-warning-start: orange;
	--bg-warning-end: yellow;

	--bg-danger-start: deeppink;
	--bg-danger-end: orangered;

	--bg-critical-start: crimson;
	--bg-critical-end: red;

	--wrapper-size: 120px;
	--chart-height: 130px;
	--ps-size: 120px;

	--status-gap: .5rem;
	--columns: 4;
	--ping-height: 50px;
}

/* Общий контейнер для status-container элементов */
.status-containers-wrapper {
	position: relative;
	display: flex;
	flex-wrap: wrap;
}

pre {
	font-family: monospace;
}

h6 {
	margin: .5rem .25rem;
}

.status-container {
	padding: var(--status-gap);
	position: relative;
	display: grid;
	--width-cpumem: calc(50% - var(--bs-border-width) - var(--wrapper-size) / 2 - var(--status-gap) - var(--ps-size) / 2);
	--col-1: var(--width-cpumem);
	--col-2: var(--bs-border-width);
	--col-3: var(--width-cpumem);
	--col-4: var(--bs-border-width);
	--col-5: calc(var(--wrapper-size) + var(--status-gap) * 2);
	--col-6: var(--bs-border-width);
	--col-7: auto;
	grid-template-columns: var(--col-1) var(--col-2) var(--col-3) var(--col-4) var(--col-5) var(--col-6) var(--col-7);

	hr {
		margin: 0;

		&.hr-vertical {
			border: 0;
			border-left: var(--bs-border-width) solid;
		}
	}

	.content {
		display: grid;
		gap: var(--status-gap);

		.wrapper-container {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			height: var(--chart-height);
			width: var(--wrapper-size);
			max-width: var(--wrapper-size);
			padding: var(--status-gap);
		}

		.wrapper {
			height: var(--wrapper-size);
			width: var(--wrapper-size);
			display: flex;
			justify-content: center;
			align-items: center;
		}

		canvas.diagram-chart {
			max-height: var(--chart-height);
			max-width: calc(100%);
			padding: .125rem var(--status-gap) 0;
		}

		pre {
			font-size: 12px;
			line-height: 1em;
			text-align: center;
			overflow: initial;
			margin: 0 0 auto 0;

			&.cpu-pre {
				display: flex;
				flex-wrap: nowrap;
			}
		}

		&.cpu-content {
			grid-row: 1;
			grid-column: 1;
			grid-template-columns: var(--wrapper-size) auto;

			& + hr {
				grid-row: 1;
				grid-column: 2;
			}

			.cpu-critical,
			.cpu-warning,
			.cpu-danger,
			.cpu-well {
				padding: .1rem;
				/*outline: .5px solid #9e9e9e;*/
				width: 100%;

				&:not(:first-of-type) {
					border-left: 1px solid #aaa;
				}
			}

			.cpu-critical {
				background: var(--bg-critical-end);
			}

			.cpu-warning {
				background: var(--bg-warning-end);
			}

			.cpu-danger {
				background: var(--bg-danger-end);
			}
		}

		&.mem-content {
			grid-row: 1;
			grid-column: 3;
			grid-template-columns: var(--wrapper-size) auto;

			& + hr {
				grid-row: 1;
				grid-column: 4;
			}
		}

		&.disk-content {
			grid-row: 1;
			grid-column: 5;
			grid-template-columns: var(--wrapper-size) auto;
		}

		&.process-content {
			padding: var(--status-gap);
			grid-row: 1;
			grid-column: 7;
			/*grid-template-columns: var(--wrapper-size) auto;*/

			& + hr {
				grid-row: 2;
				grid-column: 1 / span 7;
			}

			.ps-first {
				font-size: 12px;
				word-break: break-word;
			}
		}
	}

	.ps-pre {
		grid-column: 1 / -1;
	}
}

#message {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: var(--bs-danger);
	color: white;
	font-weight: bold;
	opacity: 0;
	transition: .3s ease-in-out;
	padding: 0;
	font-size: 0;
	
	/* Добавляем отступы для внутренних элементов */
	& > div {
		padding: .75rem 1rem;
		margin: .5rem;
		width: 100%;
		text-align: center;
	}

	&.show {
		font-size: 1.5rem;
		opacity: 1;
		padding: .75rem 0;

		&[data-last-error]:after {
			content: attr(data-last-error);
			display: block;
			font-size: 1rem;
			white-space: pre;
		}
	}
}

.ps-first {
	width: auto;
	display: inline-table;
	font-size: 90%;
	line-height: .9em;
}

.server-time {
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 0;
	border-bottom-right-radius: var(--bs-border-radius);
	z-index: 10;
	font-size: .7rem;
	line-height: 1.6rem;
	font-family: monospace;
	padding-left: .5rem;

	b {
		/*width: 100px;*/
		display: inline-block;
		font-size: 1rem;
		text-transform: uppercase;
	}
}

[data-ready_check_at],
[data-message] {
	&:after {
		content: '';
	}
}


.pings {
	display: grid;
	grid-template-columns: repeat(var(--columns), 1fr);
	column-gap: 1rem;
	row-gap: 2rem;
	line-height: 1.2rem;

	.ping-element,
	.ping-help {
		position: relative;
		display: flex;
		flex-wrap: nowrap;
		height: var(--ping-height);

		& > * {
			position: relative;
			width: 100%;
			height: 100%;

			&:first-of-type {
				border-top-left-radius: var(--bs-border-radius);
				border-bottom-left-radius: var(--bs-border-radius);
			}

			&:last-of-type {
				border-top-right-radius: var(--bs-border-radius);
				border-bottom-right-radius: var(--bs-border-radius);
			}
		}
	}

	.ping-help {
		width: 60px;

		& > * {
			width: 1rem;
			height: 100%;

			&:after {
				content: attr(data-info);
				position: absolute;
				left: 0;
				right: 0;
				bottom: -1rem;
				transform: rotateZ(270deg);
				font-size: 12px;
				line-height: 5.2em;
				white-space: nowrap;
				text-align: center;
			}
		}

		&:before,
		&:after {
			position: absolute;
			text-align: center;
			left: 0;
			right: 0;
		}

		&:before {
			content: 'minute';
			bottom: 100%;
			font-size: 14px;
		}

		&:after {
			content: 'ping ms';
			top: 100%;
			font-size: 11px;
		}
	}

	.ping-element {
		width: 100%;

		& > * {

			&:before,
			&:after {
				position: absolute;
				text-align: center;
				left: 0;
				right: 0;
				line-height: 0.75rem;
			}

			&:before {
				content: attr(data-minute);
				bottom: 100%;
				font-size: 12px;
			}

			&:after {
				content: attr(data-ping);
				top: 100%;
				font-size: 11px;
			}
		}

		&:after {
			content: attr(data-title) " \A " attr(data-ip);
			color: white;
			font-weight: bold;
			text-shadow: 0 0 1px black, 0 0 1px black;
			white-space: pre;
			position: absolute;
			left: 15%;
			right: 0;
			top: 0;
			bottom: 0;
			display: flex;
			text-align: center;
			align-items: center;
			justify-content: center;

		}

		&[data-title=""]:after {
			content: attr(data-ip);
		}
	}

	.img-wrap {
		position: absolute;
		top: 0.25rem;
		left: var(--status-gap);
		z-index: 1;
		background: white;
		height: calc(var(--ping-height) - 0.5rem);
		display: flex;
		align-items: center;
		--pad: .1rem;
		padding: var(--pad) calc(var(--pad) * 2);
		border-radius: var(--bs-border-radius);

		img {
			max-height: calc(100% - 0.25rem);
			max-width: 144px;
			height: max-content;
		}
	}

	&.img-bg-transparent {
		.img-wrap {
			background: transparent;
			--pad: 0rem;

			img {
				height: 100%;
			}
		}
	}

	&.suppliers {
		.img-wrap {
			--pad: .25rem;
		}
	}
}