/* ========================================================================= */
/* =================== БАЗОВЫЕ СТИЛИ И LAYOUT СИСТЕМА ==================== */
/* ========================================================================= */

/* ========================================================================= */
/* =================== ALEXANDER BIKMUKHAMETOV - MAIN STYLES ============= */
/* ========================================================================= */

/* ========================================================================= */
/* ========================== CSS RESET =================================== */
/* ========================================================================= */

/* Alpine.js: hide elements until initialized */
[x-cloak] { display: none !important; }

* {
	padding: 0;
	margin: 0;
	border: 0;
	box-sizing: border-box;
}

*:before,
*:after {
	box-sizing: border-box;
}

:focus,
:active {
	outline: none;
}

a:focus,
a:active {
	outline: none;
}

nav,
footer,
header,
aside {
	display: block;
}

html,
body {
	height: 100%;
	width: 100%;
	font-size: 100%;
	line-height: 1;
	font-size: 14px;
	-ms-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}

input,
button,
textarea {
	font-family: inherit;
}

input::-ms-clear {
	display: none;
}

button {
	cursor: pointer;
}

button::-moz-focus-inner {
	padding: 0;
	border: 0;
}

a,
a:visited {
	text-decoration: none;
}

a:hover {
	text-decoration: none;
}

ul li {
	list-style: none;
}

img {
	vertical-align: top;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-size: inherit;
	font-weight: inherit;
}

/* ========================================================================= */
/* ===================== БАЗОВАЯ СТРУКТУРА LAYOUT ========================= */
/* ========================================================================= */

html {
	scroll-behavior: smooth;
	overflow-x: hidden;
	scrollbar-gutter: stable;
}

body {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	background: var(--bg-primary);
	color: var(--text-primary);
	line-height: 1.5;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	transition: background-color 0.3s ease, color 0.3s ease;
}

/* ОСНОВНАЯ СТРУКТУРА */
.wrapper {
	min-height: 100vh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.container {
	max-width: 600px;
	margin: 0 auto;
	padding: 0 2rem;
}

.content {
	flex: 1 1 auto;
}

/* СЕКЦИИ - основные стили определены в content.css для избежания дублирования */

/* Адаптивность container */
@media (max-width: 768px) {
	.container {
		padding: 0 1.5rem;
	}
}

@media (max-width: 480px) {
	.container {
		padding: 0 1rem;
	}
}

/* ========================================================================= */
/* ====================== ПРОГРЕСС СКРОЛЛА =============================== */
/* ========================================================================= */

.scroll-progress {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: var(--bg-secondary);
	z-index: var(--z-scroll-progress);
}

.scroll-progress-bar {
	height: 100%;
	background: linear-gradient(90deg,
			rgba(var(--brand-blue-rgb), 0.4),
			rgba(var(--brand-blue-rgb), 0.6));
	width: 0%;
	transition: width 0.1s ease;
	backdrop-filter: blur(8px);
}

/* ========================================================================= */
/* ========================= УТИЛИТАРНЫЕ КЛАССЫ =========================== */
/* ========================================================================= */

/* ЦВЕТА ТЕКСТА */
.text-primary {
	color: var(--text-primary) !important;
}

.text-secondary {
	color: var(--text-secondary) !important;
}

.text-tertiary {
	color: var(--text-tertiary) !important;
}

.text-muted {
	color: var(--text-muted) !important;
}

.text-inverse {
	color: var(--text-inverse) !important;
}

.text-brand {
	color: var(--color-primary) !important;
}

/* ФОНЫ */
.bg-primary {
	background: var(--bg-primary) !important;
}

.bg-secondary {
	background: var(--bg-secondary) !important;
}

.bg-surface {
	background: var(--bg-surface) !important;
}

/* ТЕНИ */
.shadow-xs {
	box-shadow: var(--shadow-xs) !important;
}

.shadow-sm {
	box-shadow: var(--shadow-sm) !important;
}

.shadow-md {
	box-shadow: var(--shadow-md) !important;
}

.shadow-lg {
	box-shadow: var(--shadow-lg) !important;
}

.shadow-xl {
	box-shadow: var(--shadow-xl) !important;
}

/* СКРЫТИЕ ДЛЯ SCREEN READERS */
.sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* АНИМАЦИИ */
.transition-smooth {
	transition: var(--transition-smooth) !important;
}

.transition-bounce {
	transition: var(--transition-bounce) !important;
}

.transition-fast {
	transition: var(--transition-fast) !important;
}

/* ========================================================================= */
/* ================ ГЛОБАЛЬНЫЕ ПЕРЕХОДЫ МЕЖДУ ТЕМАМИ ==================== */
/* ========================================================================= */

/* Плавные переходы при смене тем для всех элементов */
*,
*::before,
*::after {
	transition:
		background-color 0.3s ease,
		color 0.3s ease,
		border-color 0.3s ease,
		box-shadow 0.3s ease,
		opacity 0.3s ease !important;
}

/* Исключения для элементов с анимациями */
.scroll-progress-bar,
.data-flow-line,
[class*="animation"],
[class*="pulse"],
[class*="spin"],
.theme-toggle,
.theme-toggle * {
	transition: none !important;
}

/* Восстанавливаем transition для переключателя тем */
.theme-toggle {
	transition: all 0.3s ease !important;
}

.theme-toggle::before {
	transition: var(--transition-bounce) !important;
}

/* ========================================================================= */
/* ======================= СКРОЛЛБАРЫ И ВЫДЕЛЕНИЕ ======================== */
/* ========================================================================= */

/* КАСТОМНЫЕ СКРОЛЛБАРЫ */
::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

::-webkit-scrollbar-track {
	background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
	background: var(--border-medium);
	border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--border-dark);
}

/* ВЫДЕЛЕНИЕ ТЕКСТА */
::selection {
	background: rgba(var(--brand-blue-rgb), 0.3);
	color: var(--text-primary);
}

::-moz-selection {
	background: rgba(var(--brand-blue-rgb), 0.3);
	color: var(--text-primary);
}

/* ========================================================================= */
/* ======================= ACCESSIBILITY ================================= */
/* ========================================================================= */

/* УМЕНЬШЕННЫЕ АНИМАЦИИ */
@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.theme-toggle,
	.theme-toggle::before {
		transition: none !important;
	}
}

/* ВЫСОКИЙ КОНТРАСТ */
@media (prefers-contrast: high) {
	:root[data-theme="light"] {
		--text-primary: #000000;
		--text-secondary: #333333;
		--border-light: #666666;
		--border-medium: #999999;
		--border-dark: #000000;
	}

	:root[data-theme="dark"] {
		--text-primary: #ffffff;
		--text-secondary: #cccccc;
		--border-light: #999999;
		--border-medium: #666666;
		--border-dark: #ffffff;
	}
}

/* Focus styles */
.theme-toggle:focus-visible {
	outline: 2px solid var(--color-primary) !important;
	outline-offset: 3px !important;
}

/* ========================================================================= */
/* ========================== ПЕЧАТЬ ===================================== */
/* ========================================================================= */

@media print {

	.theme-toggle,
	#n8n-chat {
		display: none !important;
	}

	:root {
		--bg-primary: #ffffff;
		--bg-secondary: #ffffff;
		--text-primary: #000000;
		--text-secondary: #333333;
	}

	.scroll-progress {
		display: none;
	}

	body {
		background: white;
		color: black;
	}
}

/* ========================================================================= */
/* =================== ПРЕДОТВРАЩЕНИЕ FOUC =============================== */
/* ========================================================================= */

html:not([data-theme]) {
	visibility: hidden;
}

html[data-theme] {
	visibility: visible;
}