/* CS-RYAZAN-NEW: мобильная адаптация модуля мониторинга в техно-киберпанк стиле */
html, body {
	max-width: 100%;
	overflow-x: hidden;
}

@media (max-width: 767.99px) {

	/* тот же шрифт, что и у цифр заполняемости — на весь мониторинг целиком.
	   ВАЖНО: иконки (<i class="fas ...">) исключены явно — универсальный
	   селектор "*" иначе перебивает их собственный шрифт иконок (Font Awesome)
	   бОльшей специфичностью, и вместо иконок показываются пустые квадратики. */
	.wapper .monitoring,
	.wapper .monitoring *:not(i),
	.table-responsive.monitoring-table,
	.table-responsive.monitoring-table *:not(i) {
		font-family: 'Orbitron', sans-serif;
	}

	/* ==== Режим "карточки" (monitoringType == 0) ==== */
	.wapper .monitoring {
		overflow: visible !important;
		white-space: normal !important;
		height: auto !important;
		display: block !important;
	}
	.wapper .monitoring #servers {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}
	.wapper .monitoring .server {
		display: block;
		width: 100%;
		height: auto;
		margin: 0;
		padding: 14px 16px 14px 108px;
		position: relative;
		background: linear-gradient(155deg, var(--cp-panel-2), var(--cp-panel) 60%, #0a0709 100%);
		border: 1px solid var(--cp-line);
		border-radius: 14px;
		box-shadow: 0 0 18px rgba(255,34,69,.12), inset 0 0 24px rgba(0,0,0,.5);
	}
	.wapper .monitoring .server .map-image {
		position: absolute;
		top: 14px;
		left: 14px;
		width: 80px;
		height: 80px;
		margin: 0;
		border-radius: 10px;
		border: 1px solid var(--cp-line);
	}
	.wapper .monitoring .server h3 {
		font-family: 'Orbitron', sans-serif;
		font-size: .8rem;
		color: var(--cp-text-hi);
		margin: 0 0 6px;
		white-space: normal;
		word-break: break-word;
	}
	.wapper .monitoring .server p {
		margin: 0 0 4px;
		font-size: .78rem;
		color: var(--cp-text-mute);
		white-space: normal;
	}

	/* ==== Режим "таблица" (monitoringType == 1 или 2) ==== */
	.table-responsive.monitoring-table {
		overflow: visible;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		background: transparent;
	}
	.monitoring-table > table,
	.monitoring-table > table > tbody {
		display: block;
		width: 100%;
		border: 0;
		margin: 0;
	}
	.monitoring-table > table > thead {
		display: none;
	}
	.monitoring-table > table > tbody > tr {
		position: relative;
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"name"
			"map"
			"act";
		align-items: center;
		row-gap: 10px;
		column-gap: 12px;
		margin-bottom: 12px;
		padding: 12px 14px;
		background: linear-gradient(155deg, var(--cp-panel-2), var(--cp-panel) 60%, #0a0709 100%);
		border: 1px solid var(--cp-line);
		border-radius: 14px;
		box-shadow: 0 0 18px rgba(255,34,69,.12), inset 0 0 24px rgba(0,0,0,.5);
	}
	.monitoring-table > table > tbody > tr > td {
		display: block;
		width: auto;
		padding: 0 !important;
		border: 0 !important;
		background: transparent !important;
		text-align: left !important;
		color: var(--cp-text-hi) !important;
		font-size: .85rem !important;
	}
	.monitoring-table > table > tbody > tr > td[data-label]::before {
		display: none;
	}
	.monitoring-table > table > tbody > tr > td a {
		color: var(--cp-red) !important;
	}

	/* ряд 1: название сервера */
	.monitoring-table > table > tbody > tr > td:nth-child(1) {
		grid-area: name;
		text-align: center !important;
		padding: 0 58px !important;
	}
	.monitoring-table > table > tbody > tr > td:nth-child(1) p {
		max-width: none;
		margin: 0;
		white-space: normal;
		overflow: visible;
		font-family: 'Orbitron', sans-serif;
		font-size: .76rem;
		line-height: 1.4;
		letter-spacing: .04em;
		word-break: break-word;
	}

	/* ряд 2: карта по центру (без подписи) */
	.monitoring-table > table > tbody > tr > td:nth-child(2) {
		grid-area: map;
		text-align: center !important;
		padding: 0 58px !important;
	}
	.monitoring-table > table > tbody > tr > td:nth-child(2) p {
		margin: 0;
		text-align: center;
		word-break: break-word;
	}

	/* кольцо количества игроков — в правый верхний угол */
	.monitoring-table > table > tbody > tr > td:nth-child(3) {
		position: absolute;
		top: 10px;
		right: 10px;
	}
	/* !important — иначе побеждает более специфичный (по числу элементов в
	   селекторе) плоский фон .monitoring-table > table > tbody > tr > td
	   .servers-online-line из theme_dark.css/theme_ghost.css, из-за чего
	   кольцо оставалось однотонным и выглядело незаполненным */
	.monitoring-table .servers-online-line {
		position: relative;
		width: 50px;
		height: 50px;
		margin: 0;
		padding: 0;
		border: 0 !important;
		border-radius: 50%;
		overflow: visible;
		cursor: pointer;
		background: conic-gradient(var(--cp-red) calc(var(--pct, 0) * 1%), rgba(255,255,255,.09) 0) !important;
		box-shadow: 0 0 12px rgba(255,34,69,.35);
	}
	.monitoring-table .servers-online-line .progress-bar {
		display: none !important;
	}
	.monitoring-table .servers-online-line .progress-val {
		position: absolute;
		top: 4px;
		right: 4px;
		bottom: 4px;
		left: 4px;
		width: auto;
		height: auto;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background: var(--cp-panel);
		font-family: 'Orbitron', sans-serif;
		font-size: .6rem;
		line-height: 1 !important;
		color: var(--cp-text-hi);
	}

	/* IP скрыт для компактности */
	.monitoring-table > table > tbody > tr > td:nth-child(4) {
		display: none;
	}

	/* ряд 3: кнопки действий по центру */
	.monitoring-table > table > tbody > tr > td:nth-child(5) {
		grid-area: act;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 8px;
	}
	.monitoring-table > table > tbody > tr > td:nth-child(5) > a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		margin: 0 !important;
		padding: 0 !important;
		background: var(--cp-panel-2) !important;
		border: 1px solid var(--cp-line) !important;
		border-radius: 10px;
		transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background-color .25s ease;
	}
	.monitoring-table > table > tbody > tr > td:nth-child(5) > a > i {
		color: var(--cp-text-hi) !important;
		transition: color .25s ease, text-shadow .25s ease;
	}
	.monitoring-table > table > tbody > tr > td:nth-child(5) > a:hover,
	.monitoring-table > table > tbody > tr > td:nth-child(5) > a:active,
	.monitoring-table > table > tbody > tr > td:nth-child(5) > a:focus-visible {
		transform: translateY(-3px) scale(1.1);
		background: var(--cp-panel) !important;
		border-color: var(--cp-red) !important;
		box-shadow: 0 0 16px rgba(255,34,69,.5);
	}
	.monitoring-table > table > tbody > tr > td:nth-child(5) > a:hover > i,
	.monitoring-table > table > tbody > tr > td:nth-child(5) > a:active > i,
	.monitoring-table > table > tbody > tr > td:nth-child(5) > a:focus-visible > i {
		color: var(--cp-red) !important;
		text-shadow: 0 0 8px rgba(255,34,69,.7);
	}
	.monitoring-table > table > tbody > tr > td[colspan] {
		grid-column: 1 / -1;
		grid-area: auto;
		justify-self: stretch;
		text-align: center !important;
		display: block;
	}

	/* строка-«итого» от модуля online_line — раньше рендерилась как ещё одна
	   карточка сервера (та же .servers-online-line, что и в строке сервера),
	   из-за чего на мобильной версии появлялся лишний, ничем не подписанный блок.
	   Теперь у неё свой класс (.online-line-total-row/.online-line-total) —
	   превращаем её в тонкую полоску без цифр, а не в карточку. */
	.monitoring-table > table > tbody > tr.online-line-total-row {
		display: block !important;
		grid-template-columns: none;
		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
		padding: 0 10px 10px !important;
		margin-bottom: 8px !important;
	}
	.monitoring-table > table > tbody > tr.online-line-total-row > td {
		display: block;
		padding: 0 !important;
		grid-column: auto;
	}
	/* !important — иначе проигрывает более специфичному .monitoring-table
	   .servers-online-line (стили кольца), у которого больше классов в селекторе */
	.online-line-total-row .servers-online-line {
		position: static !important;
		display: block !important;
		width: 100% !important;
		height: 6px !important;
		border: 0 !important;
		border-radius: 3px !important;
		background: rgba(255,255,255,.08) !important;
		overflow: hidden !important;
		box-shadow: none !important;
	}
	.online-line-total-row .progress-val {
		display: none !important;
	}
	.online-line-total-row .progress-bar {
		display: block !important;
		position: static !important;
		width: auto !important;
		height: 100% !important;
		margin: 0 !important;
		border: 0 !important;
		border-radius: 3px !important;
		background: linear-gradient(90deg, var(--cp-red-deep), var(--cp-red)) !important;
	}
}