/******************************************************************************
 * notes.css — заметки H2H (компактные, фиксированный модал, mobile-cards)
 ******************************************************************************/

/* === Оверлей === */
.note-overlay {
	position: fixed;
	inset: 0;
	z-index: 1200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-lg);
	background: rgba(15, 23, 42, 0.45);
	overflow-y: auto;
}

/* === Модал (фиксированные размеры) === */
.note-modal {
	position: relative;
	width: 600px;
	max-width: 100%;
	height: 560px;
	max-height: calc(100vh - 64px);
	display: flex;
	flex-direction: column;
	margin: auto;
	background: var(--color-surface);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card), 0 16px 48px rgba(0, 0, 0, 0.18);
}

.note-modal--sm {
	height: auto;
}

.note-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-md) var(--space-lg);
	border-bottom: 1px solid var(--color-border-light);
	flex-shrink: 0;
}

.note-modal__title {
	margin: 0;
	font-size: var(--font-size-lg);
	font-weight: 600;
}

.note-modal__close {
	border: none;
	background: transparent;
	font-size: var(--font-size-lg);
	line-height: 1;
	cursor: pointer;
	color: var(--color-text-muted);
	padding: 4px 8px;
}

.note-modal__player {
	padding: var(--space-sm) var(--space-lg);
	border-bottom: 1px solid var(--color-border-light);
	flex-shrink: 0;
	position: relative;
	padding-right: 56px;
}

.note-modal__analysis-btn {
	position: absolute;
	right: var(--space-lg);
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
	opacity: 0.7;
	transition: opacity 0.15s ease;
}

.note-modal__analysis-btn:hover {
	opacity: 1;
}

.note-modal__player-name {
	font-weight: 600;
	font-size: var(--font-size-md);
	margin-bottom: 2px;
}

.note-modal__player-meta {
	font-size: var(--font-size-sm);
	color: var(--color-text-muted);
}

.note-modal__body {
	padding: var(--space-md) var(--space-lg);
}

/* === Табы === */
.note-modal__tabs {
	display: flex;
	border-bottom: 2px solid var(--color-border-light);
	flex-shrink: 0;
}

.note-tab {
	flex: 1;
	padding: 8px 4px;
	border: none;
	background: transparent;
	font-size: var(--font-size-sm);
	font-weight: 500;
	color: var(--color-text-muted);
	cursor: pointer;
	text-align: center;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	white-space: nowrap;
}

.note-tab--active {
	color: var(--color-primary);
	border-bottom-color: var(--color-primary);
}

/* === Панели === */
.note-modal__panels {
	flex: 1;
	overflow: hidden;
	position: relative;
}

.note-panel {
	display: none;
	position: absolute;
	inset: 0;
	overflow-y: auto;
	padding: var(--space-md) var(--space-lg);
}

.note-panel--active {
	display: block;
}

/* === Поле заметки === */
.note-panel--text {
	display: none;
	position: absolute;
	inset: 0;
	padding: var(--space-md) var(--space-lg);
}

.note-panel--text.note-panel--active {
	display: flex;
	flex-direction: column;
}

.note-ff-text {
	flex: 1;
	width: 100%;
	resize: none;
	line-height: 1.55;
}

/* === Теги-чипсы (всегда развёрнутые) === */

.note-tags-cat-title {
	font-size: var(--font-size-sm);
	font-weight: 600;
	color: var(--color-text);
	margin: 10px 0 6px;
}

.note-tags-cat-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-bottom: var(--space-sm);
}

.note-chip {
	display: inline-block;
	padding: 3px 10px;
	border: 1px solid var(--color-border);
	border-radius: 999px;
	font-size: var(--font-size-sm);
	line-height: 1.45;
	cursor: pointer;
	background: var(--color-surface);
	color: var(--color-text-muted);
	transition: background 0.15s, border-color 0.15s, color 0.15s;
	user-select: none;
}

.note-chip:hover {
	border-color: var(--color-primary);
	color: var(--color-text);
}

.note-chip--on.note-chip--strength {
	background: #e8f5e9;
	border-color: #2e7d32;
	color: #2e7d32;
}

.note-chip--on.note-chip--weakness {
	background: #ffebee;
	border-color: #c62828;
	color: #c62828;
}

.note-chip--on.note-chip--info {
	background: var(--color-primary-light);
	border-color: var(--color-primary);
	color: var(--color-primary-dark);
}

/* === Аналитика (список тактических советов) === */
.note-analysis-section-title {
	font-size: var(--font-size-md);
	font-weight: 600;
	color: var(--color-text);
	margin: var(--space-md) 0 var(--space-sm);
}

.note-analysis-section-title:first-child {
	margin-top: 0;
}

.note-analysis-list {
	margin: 0;
	padding: 0 var(--space-md) 0 1.25rem;
	list-style: disc;
}

.note-analysis-tactic {
	margin-bottom: var(--space-sm);
	line-height: 1.55;
	font-size: var(--font-size-sm);
}

.note-analysis-toggle {
	display: inline-block;
	font-size: var(--font-size-xs);
	color: var(--color-primary);
	text-decoration: none;
	margin: 0 0 var(--space-sm) 1.25rem;
	cursor: pointer;
}

.note-analysis-toggle:hover {
	text-decoration: underline;
}

/* === Действия внизу модала === */
.note-modal__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	padding: var(--space-sm) var(--space-lg) var(--space-md);
	border-top: 1px solid var(--color-border-light);
	flex-shrink: 0;
}

.note-modal__error {
	padding: var(--space-sm) var(--space-lg);
	font-size: var(--font-size-sm);
	color: var(--color-danger);
	background: rgba(251, 62, 124, 0.06);
	border-top: 1px solid rgba(251, 62, 124, 0.15);
	flex-shrink: 0;
}

/* === Иконка-кнопка inline в списках (турнир, рейтинг) === */
.note-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: transparent;
	cursor: pointer;
	padding: 2px 4px;
	vertical-align: middle;
	color: var(--color-text-muted);
	opacity: 0.45;
}

.note-icon:hover { opacity: 0.75; }

.note-icon--filled {
	opacity: 1;
	color: var(--color-primary);
}

.note-icon--filled:hover { opacity: 0.8; }

/* === Иконки-кнопки в реестре (изменить/удалить) === */
.note-roster-icon-cell {
	text-align: center;
	vertical-align: middle;
	white-space: nowrap;
}

.note-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: transparent;
	cursor: pointer;
	padding: 4px;
	color: var(--color-text-muted);
	border-radius: 4px;
}

.note-icon-btn:hover {
	color: var(--color-primary);
	background: var(--color-primary-light);
}

.note-icon-btn--danger:hover {
	color: var(--color-danger);
	background: rgba(251, 62, 124, 0.08);
}

/* На десктопе показываем SVG, на мобильном — текст */
.note-icon-svg--desktop { display: inline; }
.note-icon-svg--mobile { display: none; }

/* Ячейка мобильных действий (скрыта на десктопе) */
.note-roster-mob-actions-cell { display: none; }

.note-roster-mob-actions {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

/* === Мобильная адаптация === */
@media (max-width: 759px) {
	.note-overlay {
		padding: 10vh var(--space-md);
	}

	.note-modal {
		width: 100%;
		height: 80vh;
		max-height: 80vh;
		border-radius: var(--radius-md);
	}

	.note-modal__header {
		padding: var(--space-md) var(--space-md);
	}

	.note-modal__player {
		padding: var(--space-sm) var(--space-md);
	}

	.note-panel {
		padding: var(--space-sm) var(--space-md);
	}

	.note-modal__actions {
		padding: var(--space-sm) var(--space-md) var(--space-md);
	}

	/* Скрываем иконки, показываем мобильную строку действий */
	.note-roster-icon-cell { display: none !important; }
	.note-roster-mob-actions-cell {
		display: flex !important;
		justify-content: flex-start;
		padding: 6px 12px !important;
		border-top: 1px solid var(--color-border-light);
	}
	.note-roster-mob-actions-cell::before { display: none !important; }
}

/* === Фильтры заметок: свой grid-расклад === */
@media (min-width: 760px) {
	.rating-filter-panel--notes .rating-filter-panel__row--main {
		grid-template-columns: 2fr 1fr;
	}
	.rating-filter-panel--notes .rating-filter-panel__row--bottom {
		grid-template-columns: 2fr 1fr;
		align-items: end;
	}
}

/* ============================================
   Тактический анализ (API player.notes.h2h.tactical)
   ============================================ */

/* Панель переключателей (контекст + покрытие) */
.note-analysis-controls {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	padding: var(--space-sm) var(--space-lg);
	border-bottom: 1px solid var(--color-border-light);
	flex-shrink: 0;
}

.note-analysis-tabs {
	display: flex;
	gap: 0;
}

/* Тело контента анализа */
.note-analysis-body {
	flex: 1;
	overflow-y: auto;
	min-height: 0;
	padding: var(--space-md) var(--space-lg);
}

.note-analysis-loading {
	text-align: center;
	padding: var(--space-xl) 0;
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
}

/* Ключевая рекомендация */
.note-analysis-key {
	background: linear-gradient(135deg, rgba(251, 62, 124, 0.06), rgba(59, 130, 246, 0.06));
	border: 1px solid var(--color-primary);
	border-radius: var(--radius-md);
	padding: var(--space-md);
	margin-bottom: var(--space-lg);
}

.note-analysis-key__label {
	font-size: var(--font-size-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-primary);
	margin-bottom: var(--space-xs);
}

.note-analysis-key__text {
	font-size: var(--font-size-md);
	line-height: 1.6;
	font-weight: 500;
	color: var(--color-text);
}

/* Заголовки секций с цветовым кодированием */
.note-analysis-section-title--weak {
	color: var(--color-danger);
}

.note-analysis-section-title--strong {
	color: var(--color-warning, #f59e0b);
}

/* Элементы списка с цветовым кодированием */
.note-analysis-tactic--weak {
	border-left: 3px solid var(--color-danger);
	padding-left: var(--space-sm);
}

.note-analysis-tactic--strong {
	border-left: 3px solid var(--color-warning, #f59e0b);
	padding-left: var(--space-sm);
}

/* Подсказка об алгоритмической генерации */
.note-analysis-algo-hint {
	font-size: var(--font-size-xs);
	color: var(--color-text-muted);
	font-style: italic;
	margin: var(--space-md) 0;
	padding: var(--space-sm);
	border-radius: var(--radius-sm);
	background: var(--color-bg-secondary);
}

/* Рекомендации по наблюдению за соперником */
.note-analysis-scouting {
	font-size: var(--font-size-xs);
	color: var(--color-text-muted);
	margin-top: var(--space-md);
	padding-top: var(--space-md);
	border-top: 1px dashed var(--color-border-light);
}

.note-analysis-scouting__label {
	font-weight: 500;
	color: var(--color-text);
}

.note-analysis-scouting__tags {
	color: var(--color-primary);
}@media (max-width: 759px) {
	.note-analysis-controls {
		padding: var(--space-sm) var(--space-md);
		flex-wrap: wrap;
	}

	.note-analysis-body {
		padding: var(--space-md);
	}
}