/* ===== КОМПОНЕНТЫ ДИЗАЙН-СИСТЕМЫ ===== */

/* ===== НАВИГАЦИЯ ===== */

.navigation {
	background-color: var(--bg-surface);
	border-radius: var(--radius-xl);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	border: 1px solid var(--border-default);
}

.navigation ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.navigation li {
	border-bottom: 1px solid var(--border-light);
	margin: 0;
	padding: 0;
}

.navigation li:last-child {
	border-bottom: none;
}

.navigation a {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-3) var(--space-4);
	color: var(--text-primary);
	font-weight: var(--font-weight-medium);
	border-left: 3px solid transparent;
	transition: all var(--transition-base);
}

.navigation a:hover {
	background-color: var(--primary-lighter);
	color: var(--primary);
	border-left-color: var(--primary);
	text-decoration: none;
}

.navigation a.active {
	background-color: var(--primary-lighter);
	color: var(--primary-dark);
	border-left-color: var(--primary);
	font-weight: var(--font-weight-semibold);
}

/* ===== ВИДЖЕТЫ ===== */

.widget {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.widget-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: var(--space-4);
	border-bottom: 2px solid var(--border-default);
}

.widget-title {
	margin: 0;
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-bold);
	color: var(--text-primary);
}

.widget-content {
	flex: 1;
}

/* ===== КАРТОЧКИ НОВОСТЕЙ ===== */

.story,
.news-card {
	background-color: var(--bg-surface);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-xl);
	overflow: hidden;
	transition: all var(--transition-base);
	display: flex;
	flex-direction: column;
}

.story:hover,
.news-card:hover {
	box-shadow: var(--shadow-lg);
	border-color: var(--primary-light);
	transform: translateY(-4px);
}

.story-header,
.news-card-header {
	padding: var(--space-6);
	border-bottom: 1px solid var(--border-light);
	background-color: var(--bg-default);
}

.story-title,
.news-card-title {
	margin: 0 0 var(--space-2) 0;
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-bold);
	color: var(--text-primary);
}

.story-meta,
.news-card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	font-size: var(--font-size-sm);
	color: var(--text-secondary);
}

.story-meta-item,
.news-card-meta-item {
	display: flex;
	align-items: center;
	gap: var(--space-1);
}

.story-content,
.news-card-content {
	padding: var(--space-6);
	flex: 1;
	line-height: var(--line-height-relaxed);
}

.story-footer,
.news-card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-4) var(--space-6);
	border-top: 1px solid var(--border-light);
	background-color: var(--bg-default);
	font-size: var(--font-size-sm);
}

/* ===== КОММЕНТАРИИ ===== */

.comment {
	background-color: var(--bg-surface);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-lg);
	padding: var(--space-6);
	margin-bottom: var(--space-6);
	transition: all var(--transition-base);
}

.comment:hover {
	box-shadow: var(--shadow-md);
	border-color: var(--primary-light);
}

.comment-header {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	margin-bottom: var(--space-4);
}

.comment-avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--primary-light);
}

.comment-author {
	font-weight: var(--font-weight-semibold);
	color: var(--text-primary);
}

.comment-time {
	font-size: var(--font-size-sm);
	color: var(--text-secondary);
	margin-top: var(--space-1);
}

.comment-content {
	margin-bottom: var(--space-4);
	line-height: var(--line-height-relaxed);
	color: var(--text-primary);
}

.comment-actions {
	display: flex;
	gap: var(--space-3);
	font-size: var(--font-size-sm);
}

.comment-action {
	color: var(--text-secondary);
	cursor: pointer;
	transition: all var(--transition-base);
}

.comment-action:hover {
	color: var(--primary);
}

/* ===== ТЕГИ ===== */

.tag,
.badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: var(--space-1) var(--space-3);
	background-color: var(--primary-lighter);
	color: var(--primary);
	border-radius: var(--radius-full);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semibold);
	white-space: nowrap;
	transition: all var(--transition-base);
	text-decoration: none;
	border: 1px solid var(--primary-light);
}

.tag:hover,
.badge:hover {
	background-color: var(--primary-light);
	color: var(--primary-dark);
	transform: translateY(-1px);
	box-shadow: var(--shadow-sm);
	text-decoration: none;
}

.badge-secondary {
	background-color: var(--secondary-light);
	color: var(--secondary);
	border-color: var(--secondary-light);
}

.badge-secondary:hover {
	background-color: var(--color-secondary-200);
	color: var(--secondary);
}

.badge-accent {
	background-color: var(--accent-light);
	color: var(--accent);
	border-color: var(--accent-light);
}

.badge-accent:hover {
	background-color: var(--color-accent-200);
	color: var(--accent);
}

.badge-success {
	background-color: rgba(16, 185, 129, 0.1);
	color: var(--color-success);
	border-color: rgba(16, 185, 129, 0.3);
}

.badge-success:hover {
	background-color: rgba(16, 185, 129, 0.2);
}

.badge-error {
	background-color: rgba(239, 68, 68, 0.1);
	color: var(--color-error);
	border-color: rgba(239, 68, 68, 0.3);
}

.badge-error:hover {
	background-color: rgba(239, 68, 68, 0.2);
}

/* ===== УВЕДОМЛЕНИЯ И АЛЕРТЫ ===== */

.alert {
	padding: var(--space-4) var(--space-6);
	border-radius: var(--radius-lg);
	border-left: 4px solid;
	margin-bottom: var(--space-6);
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.alert-info {
	background-color: rgba(59, 130, 246, 0.1);
	border-left-color: var(--color-info);
	color: var(--color-info);
}

.alert-success {
	background-color: rgba(16, 185, 129, 0.1);
	border-left-color: var(--color-success);
	color: var(--color-success);
}

.alert-warning {
	background-color: rgba(245, 158, 11, 0.1);
	border-left-color: var(--color-warning);
	color: var(--color-warning);
}

.alert-error {
	background-color: rgba(239, 68, 68, 0.1);
	border-left-color: var(--color-error);
	color: var(--color-error);
}

.alert-close {
	margin-left: auto;
	cursor: pointer;
	opacity: 0.7;
	transition: opacity var(--transition-base);
}

.alert-close:hover {
	opacity: 1;
}

/* ===== ФОРМА ===== */

.form-group {
	margin-bottom: var(--space-6);
}

.form-label {
	display: block;
	margin-bottom: var(--space-2);
	font-weight: var(--font-weight-medium);
	color: var(--text-primary);
	font-size: var(--font-size-sm);
}

.form-label.required::after {
	content: ' *';
	color: var(--color-error);
}

.form-hint {
	display: block;
	margin-top: var(--space-1);
	font-size: var(--font-size-xs);
	color: var(--text-secondary);
}

.form-error {
	display: block;
	margin-top: var(--space-1);
	font-size: var(--font-size-xs);
	color: var(--color-error);
}

.form-field-group {
	display: grid;
	gap: var(--space-4);
}

.form-field-group.two-cols {
	grid-template-columns: 1fr 1fr;
}

@media (max-width: 768px) {
	.form-field-group.two-cols {
		grid-template-columns: 1fr;
	}
}

/* ===== ПАГИНАЦИЯ ===== */

.pagination {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin: var(--space-8) 0;
	justify-content: center;
	flex-wrap: wrap;
}

.pagination a,
.pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 var(--space-2);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-lg);
	color: var(--primary);
	text-decoration: none;
	transition: all var(--transition-base);
	font-weight: var(--font-weight-medium);
	font-size: var(--font-size-sm);
}

.pagination a:hover {
	background-color: var(--primary-lighter);
	border-color: var(--primary);
}

.pagination .active,
.pagination span.current {
	background-color: var(--primary);
	color: #FFFFFF;
	border-color: var(--primary);
	cursor: default;
}

.pagination .disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.pagination .disabled:hover {
	background-color: transparent;
	border-color: var(--border-default);
	color: var(--primary);
}

/* ===== ПРОФИЛЬ ВИДЖЕТ ===== */

.profile-widget {
	background-color: var(--bg-surface);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-xl);
	padding: var(--space-6);
	box-shadow: var(--shadow-sm);
	transition: all var(--transition-base);
}

.profile-widget:hover {
	box-shadow: var(--shadow-md);
	border-color: var(--primary-light);
}

.profile-header {
	display: flex;
	gap: var(--space-4);
	margin-bottom: var(--space-6);
	padding-bottom: var(--space-6);
	border-bottom: 1px solid var(--border-light);
}

.profile-avatar {
	position: relative;
	flex-shrink: 0;
}

.profile-avatar img {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var(--primary);
	display: block;
}

.profile-info {
	flex: 1;
}

.profile-name {
	margin: 0 0 var(--space-1) 0;
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-bold);
	color: var(--text-primary);
}

.profile-status {
	font-size: var(--font-size-sm);
	color: var(--text-secondary);
}

/* ===== ИКОНКИ ===== */

.icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	fill: currentColor;
	vertical-align: -0.125em;
}

.icon-sm {
	width: 0.875em;
	height: 0.875em;
}

.icon-lg {
	width: 1.5em;
	height: 1.5em;
}

.icon-xl {
	width: 2em;
	height: 2em;
}

/* ===== УТИЛИТЫ ===== */

.text-center {
	text-align: center;
}

.text-right {
	text-align: right;
}

.text-left {
	text-align: left;
}

.text-justify {
	text-align: justify;
}

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

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

.text-success {
	color: var(--color-success);
}

.text-error {
	color: var(--color-error);
}

.text-warning {
	color: var(--color-warning);
}

.text-info {
	color: var(--color-info);
}

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

.font-normal {
	font-weight: var(--font-weight-normal);
}

.font-medium {
	font-weight: var(--font-weight-medium);
}

.font-semibold {
	font-weight: var(--font-weight-semibold);
}

.font-bold {
	font-weight: var(--font-weight-bold);
}

.font-extrabold {
	font-weight: var(--font-weight-extrabold);
}

/* ===== ОТСТУПЫ ===== */

.m-0 { margin: 0; }
.m-1 { margin: var(--space-1); }
.m-2 { margin: var(--space-2); }
.m-3 { margin: var(--space-3); }
.m-4 { margin: var(--space-4); }
.m-5 { margin: var(--space-5); }
.m-6 { margin: var(--space-6); }
.m-8 { margin: var(--space-8); }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

.p-0 { padding: 0; }
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }

/* ===== DISPLAY ===== */

.hidden {
	display: none;
}

.block {
	display: block;
}

.inline {
	display: inline;
}

.inline-block {
	display: inline-block;
}

.flex {
	display: flex;
}

.flex-col {
	flex-direction: column;
}

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

.justify-center {
	justify-content: center;
}

.justify-between {
	justify-content: space-between;
}

.align-center {
	align-items: center;
}

.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }