/**
 * @file: smart-loader.css
 * @description: Стили компонента SmartLoader — select режима, динамическая зона,
 *               пагинация, спиннер. Паттерн как в админке.
 * @created: 2026-09-12 14:00
 */

/* ─── Переключатель режимов (select) ──────────────────────────────── */
.sl-mode-select {
	padding: 4px 8px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 13px;
	background: #fff;
	cursor: pointer;
	min-width: 130px;
}
.sl-mode-select:focus {
	border-color: #3c8dbc;
	outline: none;
	box-shadow: 0 0 0 2px rgba(60,141,187,.2);
}

/* ─── Контейнер управления (select + вид) ─────────────────────────── */
.sl-controls-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 10px;
}
.sl-controls-bar label {
	font-size: 13px;
	color: #666;
	margin: 0;
	white-space: nowrap;
}

/* ─── Динамическая зона загрузки ──────────────────────────────────── */
.sl-load-zone {
	text-align: center;
	padding: 12px 0;
}

/* Кнопка «Загрузить ещё» */
.sl-load-more-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 20px;
	border: none;
	border-radius: 6px;
	background: #3c8dbc;
	color: #fff;
	font-size: 14px;
	cursor: pointer;
	transition: background .2s;
}
.sl-load-more-btn:hover {
	background: #367fa9;
}
.sl-load-more-btn:disabled {
	background: #999;
	cursor: not-allowed;
}
.sl-load-more-count {
	opacity: .8;
}

/* «Все загружены» */
.sl-all-loaded {
	color: #888;
	font-size: 13px;
}

/* ─── Пагинация ───────────────────────────────────────────────────── */
.sl-pagination {
	display: none;
	justify-content: center;
	align-items: center;
	gap: 4px;
	flex-wrap: wrap;
	padding: 10px 0;
}
.sl-page-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 32px;
	padding: 0 8px;
	border: 1px solid #ddd;
	border-radius: 4px;
	background: #fff;
	color: #333;
	font-size: 13px;
	cursor: pointer;
	transition: all .15s;
}
.sl-page-btn:hover:not([disabled]):not(.sl-page-btn--active) {
	background: #f0f0f0;
	border-color: #bbb;
}
.sl-page-btn--active {
	background: #3c8dbc;
	color: #fff;
	border-color: #3c8dbc;
}
.sl-page-btn[disabled] {
	opacity: .4;
	cursor: not-allowed;
}
.sl-page-nav {
	font-weight: 700;
}
.sl-page-dots {
	padding: 0 4px;
	color: #999;
}
.sl-page-info {
	margin-left: 8px;
	color: #888;
	font-size: 12px;
}

/* ─── Строка инфо «Показано N из M» ──────────────────────────────── */
.sl-info {
	text-align: center;
	color: #888;
	font-size: 12px;
	padding: 4px 0;
}

/* ─── Спиннер ─────────────────────────────────────────────────────── */
.sl-spinner-sm {
	display: inline-block;
	width: 14px;
	height: 14px;
	border: 2px solid #ccc;
	border-top-color: #3c8dbc;
	border-radius: 50%;
	animation: sl-spin .6s linear infinite;
	vertical-align: middle;
}
@keyframes sl-spin {
	to { transform: rotate(360deg); }
}

/* ─── Адаптив ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
	.sl-controls-bar {
		flex-direction: column;
		align-items: flex-start;
	}
	.sl-mode-select {
		width: 100%;
	}
	.sl-page-info {
		display: block;
		width: 100%;
		text-align: center;
		margin: 8px 0 0;
	}
}

/* ─── Ошибка загрузки + повтор (v2) ─── */
.sl-error-msg {
	color: #d9534f;
	font-weight: 600;
	margin-right: 8px;
}

.sl-retry-btn {
	padding: 6px 14px;
	border: 1px solid #d9534f;
	border-radius: 4px;
	background: transparent;
	color: #d9534f;
	font-size: 14px;
	cursor: pointer;
	transition: background .2s, color .2s;
}

.sl-retry-btn:hover {
	background: #d9534f;
	color: #fff;
}

/* Сентинел автоскролла — визуально невидим, но кликабелен по позиции */
.sl-sentinel {
	width: 100%;
	pointer-events: none;
}

/* ─── Тёмная тема (html[data-theme="dark"]) ─── */
html[data-theme="dark"] .sl-mode-select {
	background: #2a2a2a;
	color: #e0e0e0;
	border-color: #444;
}

html[data-theme="dark"] .sl-load-more-btn {
	background: #2a2a2a;
	color: #e0e0e0;
	border-color: #444;
}

html[data-theme="dark"] .sl-load-more-btn:hover {
	background: #333;
}

html[data-theme="dark"] .sl-page-btn {
	background: #2a2a2a;
	color: #e0e0e0;
	border-color: #444;
}

html[data-theme="dark"] .sl-page-btn--active {
	background: #4a90d9;
	color: #fff;
	border-color: #4a90d9;
}

html[data-theme="dark"] .sl-info,
html[data-theme="dark"] .sl-all-loaded,
html[data-theme="dark"] .sl-auto-loading {
	color: #9a9a9a;
}

/* ─── v3: иконки режимов + пагинация в стиле сайта ─── */
.sl-mode-divider {
	width: 1px;
	height: 28px;
	background: #e0e0e0;
	margin: 0 4px;
	align-self: center;
	display: inline-block;
}

.sl-mode-btn i {
	font-size: 1rem;
}

/* Активная страница пагинации — как активная кнопка вида (news.css .view-toggle-btn.active) */
.pagination-list .pagenav.active {
	background: linear-gradient(135deg, #3498db, #2980b9);
	border-color: #3498db;
	color: #ffffff;
	box-shadow: 0 4px 8px rgba(52, 152, 219, 0.3);
}

.pagination-list .pagenav.disabled {
	pointer-events: none;
	opacity: 0.45;
}

.pagination-list .sl-page-dots {
	padding: 8px 6px;
	color: #6c757d;
}

.pagination-list .sl-page-info {
	padding: 8px 12px;
	color: #6c757d;
	font-size: 0.95rem;
}

/* Info-строка «Показано N из M» */
.sl-info {
	text-align: center;
	color: #6c757d;
	font-size: 0.9rem;
	margin: 10px 0;
}

/* ─── v3: inline-элементы автоскролла (в центральном блоке) ─── */
.sl-remaining {
	text-align: center;
	color: #6c757d;
	font-size: 0.95rem;
	margin: 14px 0 6px;
}

.sl-remaining b {
	color: #495057;
}

.sl-inline-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 16px 0;
	color: #6c757d;
	font-size: 0.95rem;
}

html[data-theme="dark"] .sl-remaining {
	color: #9a9a9a;
}

html[data-theme="dark"] .sl-remaining b {
	color: #c9c9c9;
}

html[data-theme="dark"] .sl-inline-loading {
	color: #9a9a9a;
}

/* Тёмная тема для новых элементов */
html[data-theme="dark"] .sl-mode-divider {
	background: #444;
}

html[data-theme="dark"] .pagination-list .sl-page-dots,
html[data-theme="dark"] .pagination-list .sl-page-info,
html[data-theme="dark"] .sl-info {
	color: #9a9a9a;
}