/******************************************************************************
 * Responsive — адаптивность для планшетов и мобильных устройств
 * Прототип MYTENNIS.ONLINE
 ******************************************************************************/

/* -----------------------------------------------
 * Tablet: 768-1024px
 * ----------------------------------------------- */
@media (max-width: 1024px) {
	.app-sidebar {
		display: none;
	}

	.sidebar-toggle {
		display: flex;
	}

	.form-row {
		flex-direction: column;
	}

	.filter-bar {
		flex-direction: column;
		align-items: stretch;
	}

	.search-input-wrap {
		min-width: auto;
	}
}

/* -----------------------------------------------
 * Mobile: <768px
 * ----------------------------------------------- */
@media (max-width: 768px) {
	:root {
		--header-height: 48px;
		--sidebar-width: 280px;
	}

	.app-header {
		padding: 0 var(--spacing-sm);
	}

	.header-logo img {
		height: 24px;
	}

	.player-selector-dropdown {
		width: 300px;
	}
	.player-selector-name {
		display: none;
	}
	.player-selector-trigger {
		padding: var(--spacing-xs);
		border: none;
		max-width: none;
	}

	.app-content {
		padding: var(--spacing-md);
	}

	.page-header {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--spacing-sm);
	}

	.page-actions {
		width: 100%;
	}

	.page-actions .btn {
		flex: 1;
	}

	h1 {
		font-size: var(--font-size-xl);
	}

	/* Player card header — адаптация для мобильных */
	.player-card-header {
		flex-direction: column;
		align-items: center !important;
	}

	.player-card-header .avatar-lg {
		width: 80px;
		height: 80px;
		font-size: 24px;
		margin-bottom: var(--spacing-sm);
	}

	.player-card-header > .player-card-info {
		width: 100%;
	}

	.player-card-header .table {
		width: 100%;
	}

	.player-card-header .table td:first-child {
		width: auto !important;
		min-width: 120px;
		padding-right: 12px;
		white-space: nowrap;
		font-weight: 600;
	}

	.player-card-header .table td {
		display: table-cell !important;
		white-space: normal !important;
		word-break: break-word;
		padding: var(--spacing-xs) var(--spacing-sm);
		border-bottom: none;
	}

	.player-card-header .table td:before {
		display: none !important;
	}

	/* Публичная статистика — последние матчи: разрешить перенос участников */
	.last-matches-players {
		white-space: normal !important;
		overflow: visible !important;
		text-overflow: clip !important;
	}

	.auth-card {
		padding: var(--spacing-lg);
		box-shadow: none;
		border: none;
	}

	.toast-container {
		left: var(--spacing-md);
		right: var(--spacing-md);
		max-width: none;
	}

	.toast {
		min-width: auto;
	}

	.card-header {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--spacing-sm);
	}

	.list-item {
		flex-wrap: wrap;
	}

	.list-item-actions {
		flex-shrink: 1;
		flex-wrap: wrap;
		width: 100%;
		margin-top: 6px;
		justify-content: flex-start;
	}

	.table {
		font-size: var(--font-size-xs);
	}

	.table th,
	.table td {
		padding: var(--spacing-xs) var(--spacing-sm);
	}

	/* мобильные таблицы — карточный вид вместо прокрутки */
	#tab-players table,
	#tab-invites table,
	#tab-responses table,
	#tab-matches table,
	#tab-sess-registry table,
	#inv-results table,
	#resp-results table {
		display: block !important;
		width: 100%;
	}

	#tab-players table thead,
	#tab-invites table thead,
	#tab-responses table thead,
	#tab-matches table thead,
	#tab-sess-registry table thead,
	#inv-results table thead,
	#resp-results table thead {
		display: none;
	}

	#tab-players table tbody,
	#tab-players table tr,
	#tab-invites table tbody,
	#tab-invites table tr,
	#tab-responses table tbody,
	#tab-responses table tr,
	#tab-matches table tbody,
	#tab-matches table tr,
	#tab-sess-registry table tbody,
	#tab-sess-registry table tr,
	#inv-results table tbody,
	#inv-results table tr,
	#resp-results table tbody,
	#resp-results table tr {
		display: block;
		width: 100%;
	}

	#tab-players table tr,
	#tab-invites table tr,
	#tab-responses table tr,
	#tab-matches table tr,
	#tab-sess-registry table tr,
	#inv-results table tr,
	#resp-results table tr {
		background: var(--color-bg);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-md);
		padding: var(--spacing-md);
		margin-bottom: var(--spacing-md);
		box-shadow: 0 1px 3px rgba(0,0,0,0.05);
	}

	#tab-players table tr:hover,
	#tab-invites table tr:hover,
	#tab-responses table tr:hover,
	#tab-matches table tr:hover,
	#tab-sess-registry table tr:hover,
	#inv-results table tr:hover,
	#resp-results table tr:hover {
		background: var(--color-bg);
	}

	#tab-players table td,
	#tab-invites table td,
	#tab-responses table td,
	#tab-matches table td,
	#tab-sess-registry table td,
	#inv-results table td,
	#resp-results table td {
		display: flex;
		align-items: flex-start;
		padding: 4px 0;
		border-bottom: none;
		white-space: normal !important;
		word-break: break-word;
	}

	/* tab-main — таблица с деталями сессии (не карточный вид, а обычная таблица)
	   Её оставляем как есть, на мобильных просто уменьшаем отступы */
	#tab-main table th,
	#tab-main table td {
		padding: 4px 8px;
	}

	/* публичный список сессий (вне табов) */
	#app-content > .card > .card-body > .table,
	#app-content > .card > .card-body table.table {
		display: block !important;
		width: 100%;
	}
	#app-content > .card > .card-body > .table thead,
	#app-content > .card > .card-body table.table thead {
		display: none;
	}
	#app-content > .card > .card-body > .table tbody,
	#app-content > .card > .card-body table.table tbody,
	#app-content > .card > .card-body > .table tr,
	#app-content > .card > .card-body table.table tr {
		display: block;
		width: 100%;
	}
	#app-content > .card > .card-body > .table tr,
	#app-content > .card > .card-body table.table tr {
		background: var(--color-bg);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-md);
		padding: var(--spacing-md);
		margin-bottom: var(--spacing-md);
		box-shadow: 0 1px 3px rgba(0,0,0,0.05);
	}
	#app-content > .card > .card-body > .table tr:hover,
	#app-content > .card > .card-body table.table tr:hover {
		background: var(--color-bg);
	}
	#app-content > .card > .card-body > .table td,
	#app-content > .card > .card-body table.table td {
		display: flex;
		align-items: flex-start;
		padding: 4px 0;
		border-bottom: none;
		white-space: normal !important;
		word-break: break-word;
	}
	#app-content > .card > .card-body > .table td:before,
	#app-content > .card > .card-body table.table td:before {
		content: attr(data-label);
		font-weight: 600;
		font-size: 11px;
		color: var(--color-text-muted);
		min-width: 90px;
		flex-shrink: 0;
		padding-right: 8px;
	}
	#app-content > .card > .card-body > .table td:last-child,
	#app-content > .card > .card-body table.table td:last-child {
		border-bottom: none;
	}
	#app-content > .card > .card-body table.table td[data-label=""]:before,
	#app-content > .card > .card-body table.table td:not([data-label]):before {
		display: none;
	}

	#tab-players table td:before,
	#tab-invites table td:before,
	#tab-responses table td:before,
	#tab-matches table td:before,
	#tab-sess-registry table td:before,
	#inv-results table td:before,
	#resp-results table td:before {
		content: attr(data-label);
		font-weight: 600;
		font-size: 11px;
		color: var(--color-text-muted);
		min-width: 90px;
		flex-shrink: 0;
		padding-right: 8px;
	}

	#tab-players table td:last-child,
	#tab-invites table td:last-child,
	#tab-responses table td:last-child,
	#tab-matches table td:last-child,
	#tab-sess-registry table td:last-child,
	#inv-results table td:last-child,
	#resp-results table td:last-child {
		border-bottom: none;
	}

	/* убираем overflow-x:auto на родительском контейнере таблиц в мобильной версии */
	#tab-players [style*="overflow-x"],
	#tab-invites [style*="overflow-x"],
	#tab-responses [style*="overflow-x"],
	#tab-matches [style*="overflow-x"],
	#tab-sess-registry [style*="overflow-x"],
	#inv-results [style*="overflow-x"],
	#resp-results [style*="overflow-x"],
	#app-content > .card > .card-body [style*="overflow-x"],
	#h2h-content > .card > .card-body [style*="overflow-x"] {
		overflow-x: visible !important;
	}

	/* перенос табов на мобильных */
	.tabs {
		flex-wrap: wrap;
	}

	.tab {
		flex: 0 0 auto;
	}

	/* Match roster — карточный вид таблицы на мобильных */
	#mr-table,
	#mr-table thead,
	#mr-table tbody,
	#mr-table tr {
		display: block;
		width: 100%;
	}
	#mr-table th {
		display: none;
	}
	#mr-table td {
		display: flex;
		padding: 4px 8px;
		border: none;
		width: 100% !important;
		max-width: none !important;
	}
	#mr-table td:before {
		content: attr(data-label);
		font-weight: 600;
		min-width: 90px;
		flex-shrink: 0;
		color: var(--color-text-muted);
	}
	#mr-table tr {
		border: 1px solid var(--color-border);
		border-radius: var(--radius-sm);
		margin-bottom: 8px;
		padding: 8px;
	}

	/* Match roster filters — в колонку на мобильных */
	.filter-bar {
		flex-direction: column;
	}
	.filter-bar select,
	.filter-bar input,
	.filter-bar .city-autocomplete-wrap {
		width: 100% !important;
		min-width: 0 !important;
		max-width: none !important;
	}
	.filter-bar .city-autocomplete-wrap {
		display: block !important;
	}

	/* Модалка матча — полная ширина на мобильных */
	.modal-box {
		max-width: 100% !important;
		margin: 0;
		padding: 16px;
	}

	/* H2H: скрываем десктопную таблицу, показываем мобильные блоки */
	.h2h-log-desktop {
		display: none !important;
	}
	.h2h-log-mobile {
		display: block !important;
	}
	.h2h-log-mobile .h2h-log-mobile-block {
		background: var(--color-bg);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-md);
		padding: var(--spacing-md);
		margin-bottom: var(--spacing-md);
		box-shadow: 0 1px 3px rgba(0,0,0,0.05);
	}
	.h2h-log-mobile .h2h-log-mobile-period {
		font-size: 14px;
		font-weight: 700;
		margin-bottom: 8px;
		padding-bottom: 6px;
		border-bottom: 1px solid var(--color-border);
	}
	.h2h-log-mobile .h2h-log-mobile-stats,
	.h2h-log-mobile .h2h-log-mobile-p1data,
	.h2h-log-mobile .h2h-log-mobile-p2data {
		display: flex;
		flex-wrap: wrap;
		gap: 4px 8px;
		font-size: 12px;
		padding: 2px 0;
	}
	.h2h-log-mobile .h2h-log-mobile-p1data {
		border-top: 1px dashed var(--color-border);
		padding-top: 6px;
		margin-top: 4px;
	}
	.h2h-log-mobile .h2h-log-mobile-p2data {
		border-top: 1px dashed var(--color-border);
		padding-top: 6px;
		margin-top: 4px;
	}
	.h2h-log-mobile .h2h-log-mobile-label {
		width: 100%;
		font-size: 12px;
		font-weight: 700;
		margin-bottom: 2px;
	}
	.h2h-log-mobile .h2h-log-mobile-label.p1-label {
		color: var(--color-primary);
	}
	.h2h-log-mobile .h2h-log-mobile-label.p2-label {
		color: var(--color-danger);
	}
	.h2h-log-mobile .h2h-log-mobile-stats span,
	.h2h-log-mobile .h2h-log-mobile-p1data span,
	.h2h-log-mobile .h2h-log-mobile-p2data span {
		background: var(--color-bg-secondary);
		padding: 2px 8px;
		border-radius: 4px;
		white-space: nowrap;
		cursor: pointer;
	}
	.h2h-log-mobile .h2h-log-mobile-stats span:hover,
	.h2h-log-mobile .h2h-log-mobile-p1data span:hover,
	.h2h-log-mobile .h2h-log-mobile-p2data span:hover {
		background: var(--color-bg-tertiary);
	}

	/* H2H: карточный вид для таблицы История матчей */
	#h2h-content > .card > .card-body table.table {
		display: block !important;
		width: 100%;
	}
	#h2h-content > .card > .card-body table.table thead {
		display: none;
	}
	#h2h-content > .card > .card-body table.table tbody,
	#h2h-content > .card > .card-body table.table tr {
		display: block;
		width: 100%;
	}
	#h2h-content > .card > .card-body table.table tr {
		background: var(--color-bg);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-md);
		padding: var(--spacing-md);
		margin-bottom: var(--spacing-md);
		box-shadow: 0 1px 3px rgba(0,0,0,0.05);
	}
	#h2h-content > .card > .card-body table.table td {
		display: flex;
		align-items: flex-start;
		padding: 4px 0;
		border-bottom: none;
		white-space: normal !important;
		word-break: break-word;
	}
	#h2h-content > .card > .card-body table.table td:before {
		content: attr(data-label);
		font-weight: 600;
		font-size: 11px;
		color: var(--color-text-muted);
		min-width: 90px;
		flex-shrink: 0;
		padding-right: 8px;
	}
	#h2h-content > .card > .card-body table.table td:last-child {
		border-bottom: none;
	}
}

/* Десктоп: показываем таблицу, скрываем мобильные блоки H2H */
.h2h-log-mobile {
	display: none;
}

/* Стрелка курсора для кликабельных строк */
tr[data-href] {
	cursor: pointer;
}

.list-item[data-href] {
	cursor: pointer;
}

.list-item[data-href]:hover {
	background: var(--color-bg-hover);
}

/* Элементы запросов дружбы */
.request-message {
	font-size: 13px;
	color: var(--color-text-muted);
	margin-top: 4px;
	padding: 4px 8px;
	background: var(--color-bg-secondary);
	border-radius: var(--radius-sm);
	border-left: 2px solid var(--color-primary);
}

.request-status {
	font-size: 13px;
	margin-top: 4px;
	padding: 2px 0;
}

.request-status-1 {
	color: var(--color-text-muted);
}

.request-status-8 {
	color: var(--color-danger);
}

.request-status-10 {
	color: var(--color-success);
}

.request-reply {
	font-size: 13px;
	color: var(--color-text-muted);
	margin-top: 4px;
	padding: 4px 8px;
	background: var(--color-bg-secondary);
	border-radius: var(--radius-sm);
}

/* ===== Лента событий (feed) ===== */
.feed-item .card-body {
	padding: 12px 16px;
}

.list-item-avatar {
	flex-shrink: 0;
	display: inline-block;
	width: 40px;
	height: 40px;
}

.list-item-avatar .avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Дата/время в списке чатов (справа сверху) */
.list-item-date {
	margin-left: auto;
	flex-shrink: 0;
	font-size: 12px;
	color: var(--color-text-muted);
	white-space: nowrap;
	align-self: flex-start;
	padding-top: 2px;
}

/* Последнее сообщение в списке чатов */
.chat-last-msg {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
	color: var(--color-text-muted);
	font-size: 13px;
}

.chat-list .list-item {
	position: relative;
	align-items: flex-start;
}

.chat-list .list-item-content {
	flex: 1;
	min-width: 0;
	overflow: hidden;
}

.feed-item-header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}

.feed-item-avatar {
	flex-shrink: 0;
	display: inline-block;
	width: 40px;
	height: 40px;
}

.feed-item-avatar .avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.feed-item-author {
	flex: 1;
	min-width: 0;
}

.feed-item-name {
	font-weight: 600;
	font-size: 14px;
	color: var(--color-text);
	text-decoration: none;
}

.feed-item-name:hover {
	color: var(--color-primary);
}

.feed-item-date {
	font-size: 12px;
	color: var(--color-text-muted);
	margin-top: 2px;
}

.feed-item-body {
	font-size: 14px;
	line-height: 1.5;
	color: var(--color-text);
}

.feed-event-text {
	margin-bottom: 4px;
}

.feed-event-detail {
	font-size: 13px;
	color: var(--color-text-muted);
	margin-top: 3px;
}

.feed-event-score {
	font-size: 16px;
	font-weight: 700;
	color: var(--color-primary);
}

.feed-event-message {
	padding: 8px 12px;
	background: var(--color-bg-secondary);
	border-radius: var(--radius-md);
	border-left: 3px solid var(--color-primary);
	font-style: italic;
}

.feed-item-actions {
	margin-top: 8px;
	text-align: right;
}

.feed-match-block {
	margin: 8px 0;
	padding: 12px;
	background: var(--color-bg-secondary);
	border-radius: var(--radius-md);
	text-align: center;
	max-width: 500px;
}

.feed-match-trophy {
	font-size: 20px;
	line-height: 1;
	height: 20px;
}

.feed-match-header {
	margin-bottom: 8px;
}

.feed-match-date {
	font-weight: 600;
	font-size: 13px;
	color: var(--color-text);
}

.feed-match-location {
	font-size: 12px;
	color: var(--color-text-muted);
	margin-top: 2px;
}

.feed-match-sides {
	display: flex;
	align-items: stretch;
	justify-content: center;
	gap: 8px;
}

.feed-match-side {
	flex: 1;
	max-width: 40%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.feed-match-player {
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
}

.feed-match-winner .feed-match-player {
	font-weight: 700;
}

.feed-match-plus {
	font-size: 11px;
	color: var(--color-text-muted);
	line-height: 1;
}

.feed-match-vs {
	font-weight: 700;
	font-size: 16px;
	color: var(--color-primary);
	flex-shrink: 0;
	align-self: center;
}

.feed-match-score {
	margin-top: 8px;
	font-weight: 900;
	font-size: 18px;
	text-align: center;
	color: var(--color-primary);
}

/* Мобильная версия */
@media (max-width: 768px){
	.feed-item .card-body {
		padding: 10px 12px;
	}

	.feed-item-header {
		flex-wrap: wrap;
	}

	.feed-item-date {
		width: 100%;
		text-align: left;
		margin-top: 2px;
	}

	.feed-match-block {
		max-width: none;
	}
}

.compare-periods-info {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.7;
	color: var(--color-text);
	padding: 10px 14px;
	background: var(--color-bg-secondary);
	border-radius: 8px;
	margin-bottom: 12px;
}

.compare-period-line {
	white-space: nowrap;
}

.compare-chart-selectors {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

@media (max-width: 768px){
	.hide-mobile {
		display: none;
	}

	.compare-period-line {
		white-space: normal;
	}

	.compare-chart-selectors {
		display: flex;
		flex-wrap: nowrap;
		gap: 8px;
	}

	.compare-chart-selectors #compare-metric-select {
		width: 70%;
		max-width: none;
	}

	.compare-chart-selectors #compare-chart-type {
		width: 30%;
		max-width: none;
	}
}

/* --- H2H Bridge responsive --- */
@media (max-width: 759px) {
	.h2h-bridge-details-desktop .h2h-bridge-details-table thead {
		display: none;
	}

	.h2h-bridge-details-desktop .h2h-bridge-details-table tbody tr {
		display: block;
		margin-bottom: 12px;
		padding: 12px;
		border: 1px solid var(--color-border, #dee2e6);
		border-radius: var(--radius-md, 8px);
	}

	.h2h-bridge-details-desktop .h2h-bridge-details-table tbody td {
		display: block;
		text-align: left;
		padding: 4px 0;
		border: none;
	}

	.h2h-bridge-details-desktop .h2h-bridge-details-table tbody td::before {
		content: attr(data-label);
		display: block;
		font-size: 11px;
		font-weight: 600;
		color: var(--color-text-muted, #6c757d);
		margin-bottom: 2px;
	}

	.h2h-bridge-simulation-table thead {
		display: none;
	}

	.h2h-bridge-simulation-table,
	.h2h-bridge-simulation-table tbody {
		display: block;
		width: 100%;
	}

	.h2h-bridge-simulation-table tbody tr {
		display: block;
		width: 100%;
		box-sizing: border-box;
		margin-bottom: 8px;
		padding: 10px 12px;
		border: 1px solid var(--color-border, #dee2e6);
		border-radius: var(--radius-md, 8px);
	}

	.h2h-bridge-simulation-table tbody td {
		display: block;
		width: 100%;
		box-sizing: border-box;
		padding: 2px 0;
		border: none;
		text-align: left !important;
	}

	.h2h-bridge-simulation-table tbody td::before {
		content: attr(data-label);
		display: inline-block;
		font-size: 11px;
		color: var(--color-text-muted, #6c757d);
		min-width: 72px;
		margin-right: 8px;
		vertical-align: top;
	}

	.h2h-bridge-simulation-table .h2h-bridge-sim-note {
		max-width: none;
	}

	.h2h-bridge-simulation-total {
		display: block !important;
		width: 100%;
	}

	.h2h-bridge-simulation-total td {
		display: block !important;
		width: 100%;
	}
}