/* NeoFrame CSS Framework */
:root {
	/* Base Colors */
	--nf-primary: #2563eb;
	--nf-primary-dark: #1d4ed8;
	--nf-secondary: #0ea5e9;
	--nf-success: #10b981;
	--nf-warning: #f59e0b;
	--nf-danger: #ef4444;
	--nf-info: #3b82f6;

	/* Theme Colors - Dark */
	--nf-dark-bg: #0f172a;
	--nf-dark-bg-secondary: #1e293b;
	--nf-dark-bg-form: #1a243d;
	--nf-dark-text: #f1f5f9;
	--nf-dark-text-secondary: #cbd5e1;
	--nf-dark-border: rgba(148, 163, 184, 0.2);

	/* Theme Colors - Light */
	--nf-light-bg: #f9fafb;
	--nf-light-bg-secondary: #f1f5f9;
	--nf-light-bg-form: #ffffff;
	--nf-light-text: #0f172a;
	--nf-light-text-secondary: #475569;
	--nf-light-border: rgba(148, 163, 184, 0.3);


	/* Current Theme */
	--nf-bg: var(--nf-dark-bg);
	--nf-bg-secondary: var(--nf-dark-bg-secondary);
	--nf-bg-form: var(--nf-dark-bg-form);
	--nf-text: var(--nf-dark-text);
	--nf-text-secondary: var(--nf-dark-text-secondary);
	--nf-border: var(--nf-dark-border);

	/* Spacing */
	--nf-spacing-xs: 0.25rem;
	--nf-spacing-sm: 0.5rem;
	--nf-spacing-md: 1rem;
	--nf-spacing-lg: 1.2rem;
	--nf-spacing-xl: 1.5rem;

	/* Border Radius */
	--nf-radius-sm: 4px;
	--nf-radius-md: 8px;
	--nf-radius-lg: 12px;

	/* Shadows */
	--nf-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	--nf-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
	--nf-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
	--nf-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);

	/* Transitions */
	--nf-transition: all 0.2s ease-in-out;

	/* Navbar */
	--nf-navbar-height: 56px;
	--nf-navbar-padding-y: 0.5rem;
	--nf-navbar-padding-x: 1rem;
	--nf-table-bg: var(--nf-bg-secondary);
	--nf-table-border-color: #444;
	--nf-table-header-bg: #344560;
	--nf-table-header-color: #e0e0e0;
	--nf-table-row-hover-bg: rgba(255, 255, 255, 0.07);
	--nf-table-row-alt-bg: rgba(255, 255, 255, 0.03);
	--nf-table-col-hover-bg: rgba(255, 255, 255, 0.05);

	/* Палитра более темных, но контрастных цветов для темной темы */
	--nf-table-color-1: #5d5221; /* Темно-желтый */
	--nf-table-color-2: #1e515d; /* Темно-голубой */
	--nf-table-color-3: #2a5d34; /* Темно-зеленый */
	--nf-table-color-4: #5c2d33; /* Темно-красный */
	--nf-table-color-5: #4b4b4b; /* Темно-серый */
	--nf-table-color-6: #4a2a5c; /* Темно-фиолетовый */

	/* Темная тема - Уведомления */
	--nf-alert-primary-bg: rgba(30, 58, 138, 0.2);
	--nf-alert-primary-border: #2563eb;
	--nf-alert-primary-text: #bfdbfe;

	--nf-alert-success-bg: rgba(5, 150, 105, 0.2);
	--nf-alert-success-border: #10b981;
	--nf-alert-success-text: #a7f3d0;

	--nf-alert-danger-bg: rgba(185, 28, 28, 0.2);
	--nf-alert-danger-border: #ef4444;
	--nf-alert-danger-text: #fca5a5;

	--nf-alert-warning-bg: rgba(217, 119, 6, 0.2);
	--nf-alert-warning-border: #f59e0b;
	--nf-alert-warning-text: #fbdd93;

}

.nf-light-theme {
	--nf-bg: var(--nf-light-bg);
	--nf-bg-secondary: var(--nf-light-bg-secondary);
	--nf-bg-form: var(--nf-light-bg-form);
	--nf-text: var(--nf-light-text);
	--nf-text-secondary: var(--nf-light-text-secondary);
	--nf-border: var(--nf-light-border);

	/* Улучшенные цвета */
	--nf-table-bg: #ffffff;
	--nf-table-border-color: #cbd5e1;
	--nf-table-header-bg: #e2e8f0;
	--nf-table-header-color: #1e293b;
	--nf-table-row-hover-bg: rgba(228, 228, 231, 0.5);
	--nf-table-row-alt-bg: rgba(241, 245, 249, 0.7);
	--nf-table-border-width: 1px;

	--nf-table-color-1: #fef9c3; /* Янтарный */
	--nf-table-color-2: #dbeafe; /* Синий */
	--nf-table-color-3: #dcfce7; /* Зеленый */
	--nf-table-color-4: #fee2e2; /* Красный */
	--nf-table-color-5: #f3f4f6; /* Серый */
	--nf-table-color-6: #f3e8ff; /* Фиолетовый */

	/* Светлая тема - Уведомления */
	--nf-alert-primary-bg: #dbeafe;
	--nf-alert-primary-border: #bfdbfe;
	--nf-alert-primary-text: #1e40af;

	--nf-alert-success-bg: #d1fae5;
	--nf-alert-success-border: #a7f3d0;
	--nf-alert-success-text: #065f46;

	--nf-alert-danger-bg: #fee2e2;
	--nf-alert-danger-border: #fecaca;
	--nf-alert-danger-text: #991b1b;

	--nf-alert-warning-bg: #ffedd5;
	--nf-alert-warning-border: #fed7aa;
	--nf-alert-warning-text: #92400e;

}

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

body.nf-framework {
	background-color: var(--nf-bg);
	color: var(--nf-text);
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	line-height: 1.6;
	margin: 0;
	padding: 0;
}

/* Typography */
.nf-h1, .nf-h2, .nf-h3, .nf-h4, .nf-h5, .nf-h6 {
	margin-top: 0;
	margin-bottom: var(--nf-spacing-md);
	font-weight: 600;
	line-height: 1.2;
}

.nf-h1 {
	font-size: 2.5rem;
}

.nf-h2 {
	font-size: 2rem;
}

.nf-h3 {
	font-size: 1.75rem;
}

.nf-h4 {
	font-size: 1.5rem;
}

.nf-h5 {
	font-size: 1.25rem;
}

.nf-h6 {
	font-size: 1rem;
}

.nf-p {
	margin-top: 0;
	margin-bottom: var(--nf-spacing-md);
}

/* Buttons */
.nf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--nf-spacing-sm) var(--nf-spacing-md);
	border: none;
	border-radius: var(--nf-radius-md);
	font-weight: 500;
	font-size: 1rem;
	cursor: pointer;
	transition: var(--nf-transition);
	text-decoration: none;
	gap: var(--nf-spacing-xs);
}

.nf-btn:focus {
	outline: 2px solid var(--nf-primary);
	outline-offset: 2px;
}

.nf-btn-primary {
	background-color: var(--nf-primary);
	color: white;
	box-shadow: var(--nf-shadow);
}

.nf-btn-primary:hover {
	background-color: var(--nf-primary-dark);
	transform: translateY(-2px);
	box-shadow: var(--nf-shadow-md);
}

.nf-btn-secondary {
	background-color: transparent;
	color: var(--nf-text);
	border: 1px solid var(--nf-border);
}

.nf-btn-secondary:hover {
	background-color: var(--nf-bg-secondary);
}

.nf-btn-success {
	background-color: var(--nf-success);
	color: white;
}

.nf-btn-success:hover {
	background-color: #059669;
	transform: translateY(-2px);
	box-shadow: var(--nf-shadow-md);
}

.nf-btn-danger {
	background-color: var(--nf-danger);
	color: white;
}

.nf-btn-danger:hover {
	background-color: #dc2626;
	transform: translateY(-2px);
	box-shadow: var(--nf-shadow-md);
}

.nf-btn-sm {
	padding: var(--nf-spacing-xs) var(--nf-spacing-sm);
	font-size: 0.875rem;
}

.nf-btn-lg {
	padding: var(--nf-spacing-md) var(--nf-spacing-lg);
	font-size: 1.125rem;
}

.nf-btn-block {
	width: 100%;
	display: flex;
}

/* Forms */
.nf-form-group {
	margin-bottom: var(--nf-spacing-md);
}

.nf-form-label {
	display: block;
	margin-bottom: var(--nf-spacing-xs);
	font-weight: 500;
	color: var(--nf-text);
}

.nf-form-control {
	display: block;
	width: 100%;
	padding: var(--nf-spacing-sm) var(--nf-spacing-md);
	font-size: 1rem;
	line-height: 1.5;
	color: var(--nf-text);
	background-color: var(--nf-bg-form);
	background-clip: padding-box;
	border: 1px solid var(--nf-border);
	border-radius: var(--nf-radius-md);
	transition: var(--nf-transition);
}

.nf-form-control:focus {
	color: var(--nf-text);
	background-color: var(--nf-bg-form);
	border-color: var(--nf-primary);
	outline: 0;
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25);
}

.nf-form-control::placeholder {
	color: var(--nf-text-secondary);
}

.nf-form-select {
	display: block;
	width: 100%;
	padding: var(--nf-spacing-sm) var(--nf-spacing-md);
	font-size: 1rem;
	line-height: 1.5;
	color: var(--nf-text);
	background-color: var(--nf-bg-form);
	background-clip: padding-box;
	border: 1px solid var(--nf-border);
	border-radius: var(--nf-radius-md);
	transition: var(--nf-transition);
}

.nf-form-check {
	display: flex;
	align-items: center;
	margin-bottom: var(--nf-spacing-sm);
}

.nf-form-check-input {
	margin-right: var(--nf-spacing-sm);
	width: 1rem;
	height: 1rem;
}

.nf-form-check-label {
	margin-bottom: 0;
}

/* Alerts */
.nf-alert {
	position: relative;
	padding: var(--nf-spacing-md);
	margin-bottom: var(--nf-spacing-md);
	border: 1px solid transparent;
	border-radius: var(--nf-radius-md);
}

.nf-alert-primary {
	color: var(--nf-alert-primary-text);
	background-color: var(--nf-alert-primary-bg);
	border-color: var(--nf-alert-primary-border);
}

.nf-alert-success {
	color: var(--nf-alert-success-text);
	background-color: var(--nf-alert-success-bg);
	border-color: var(--nf-alert-success-border);
}

.nf-alert-danger {
	color: var(--nf-alert-danger-text);
	background-color: var(--nf-alert-danger-bg);
	border-color: var(--nf-alert-danger-border);
}

.nf-alert-warning {
	color: var(--nf-alert-warning-text);
	background-color: var(--nf-alert-warning-bg);
	border-color: var(--nf-alert-warning-border);
}

.nf-alert-dismissible {
	padding-right: 3rem;
}

.nf-alert-dismissible .nf-alert-close {
	position: absolute;
	top: 0;
	right: 0;
	padding: var(--nf-spacing-md);
	color: inherit;
	background: none;
	border: none;
	font-size: 1.5rem;
	cursor: pointer;
}

/* Cards */
.nf-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	word-wrap: break-word;
	background-color: var(--nf-bg-secondary);
	background-clip: border-box;
	border: 1px solid var(--nf-border);
	border-radius: var(--nf-radius-lg);
	box-shadow: var(--nf-shadow);
}
.nf-card .nf-card{
	background-color: var(--nf-bg-form);
}

.nf-card-header {
	padding: var(--nf-spacing-md) var(--nf-spacing-lg);
	margin-bottom: 0;
	background-color: rgba(0, 0, 0, 0.03);
	border-bottom: 1px solid var(--nf-border);
	border-radius: var(--nf-radius-lg) var(--nf-radius-lg) 0 0;
}

.nf-card-body {
	flex: 1 1 auto;
	padding: var(--nf-spacing-lg);
}

/* Modals */
/* Основной оверлей модального окна */
.nf-modal {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1050;
	display: none;
	width: 100%;
	height: 100%;
	/* ВАЖНО: Убираем overflow: hidden с .nf-modal */
	/* overflow: hidden; УДАЛЕН */
	outline: 0;
	/* Фон оверлея */
	background-color: rgba(0, 0, 0, 0.5);
	/* Добавляем для поддержки мобильной прокрутки */
	-webkit-overflow-scrolling: touch;
}

/* Класс, показывающий модальное окно */
.nf-modal.show {
	display: flex;
	align-items: center;
	justify-content: center;
	/* ВАЖНО: Убираем overflow: hidden с .nf-modal.show */
	/* overflow: hidden; УДАЛЕН */
}

/* Диалоговое окно внутри оверлея */
.nf-modal-dialog {
	position: relative;
	width: auto;
	margin: var(--nf-spacing-md);
	pointer-events: none;
	max-width: 500px;
	width: 90vw;
	/* Добавляем для поддержки мобильной прокрутки */
	-webkit-overflow-scrolling: touch;
}

/* Контент модального окна */
.nf-modal-content {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	pointer-events: auto;
	background-color: var(--nf-bg-secondary);
	background-clip: border-box;
	border: 1px solid var(--nf-border);
	border-radius: var(--nf-radius-lg);
	box-shadow: var(--nf-shadow-lg);
	outline: 0;
	/* ВАЖНО: Ограничиваем максимальную высоту и разрешаем прокрутку */
	max-height: calc(100vh - 2 * var(--nf-spacing-md)); /* Учитываем отступы сверху и снизу */
	overflow: hidden; /* Скрываем переполняющий контент самого .nf-modal-content */
	/* Добавляем для поддержки мобильной прокрутки */
	-webkit-overflow-scrolling: touch;
}

/* Заголовок модального окна */
.nf-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--nf-spacing-lg);
	border-bottom: 1px solid var(--nf-border);
	border-top-left-radius: var(--nf-radius-lg);
	border-top-right-radius: var(--nf-radius-lg);
	flex-shrink: 0; /* Не сжимается */
	/* overflow: hidden; */ /* Убедитесь, что он не перехватывает прокрутку */
}

/* Заголовок модального окна */
.nf-modal-title {
	margin: 0;
	line-height: 1.5;
}

/* Кнопка закрытия модального окна */
.nf-modal-close {
	padding: var(--nf-spacing-xs);
	margin: calc(var(--nf-spacing-xs) * -1) calc(var(--nf-spacing-xs) * -1) calc(var(--nf-spacing-xs) * -1) auto;
	background: none;
	border: none;
	font-size: 1.5rem;
	cursor: pointer;
	color: var(--nf-text-secondary);
}

/* Тело модального окна - ОСНОВНАЯ ПРОКРУЧИВАЕМАЯ ОБЛАСТЬ */
.nf-modal-body {
	position: relative;
	/* ВАЖНО: Разрешаем прокрутку внутри тела модального окна */
	flex: 1 1 auto; /* Занимает всё доступное пространство */
	overflow-y: auto; /* Разрешаем вертикальную прокрутку */
	overflow-x: hidden; /* Обычно горизонтальная прокрутка не нужна */
	padding: var(--nf-spacing-lg);
	/* Добавляем для поддержки мобильной прокрутки */
	-webkit-overflow-scrolling: touch;
}

/* Подвал модального окна */
.nf-modal-footer {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: var(--nf-spacing-lg);
	border-top: 1px solid var(--nf-border);
	border-bottom-right-radius: var(--nf-radius-lg);
	border-bottom-left-radius: var(--nf-radius-lg);
	flex-shrink: 0; /* Не сжимается */
	/* overflow: hidden; */ /* Убедитесь, что он не перехватывает прокрутку */
}

/* Стили для кнопок в подвале */
.nf-modal-footer > :not(:first-child) {
	margin-left: .25rem;
}

.nf-modal-footer > :not(:last-child) {
	margin-right: .25rem;
}


/* Grid System with CSS Grid and Gap Support */
.nf-container {
	width: 100%;
	padding-right: var(--nf-spacing-md);
	padding-left: var(--nf-spacing-md);
	margin-right: auto;
	margin-left: auto;
}

@media (min-width: 576px) {
	.nf-container {
		max-width: 100vw;;
	}
}

@media (min-width: 768px) {
	.nf-container {
		max-width: 100vw;;
	}
	}

@media (min-width: 992px) {
	.nf-container {
		max-width: 100vw;;
	}
	}

@media (min-width: 1200px) {
	.nf-container {
		max-width: 1140px;
	}
	}

/* Grid Row using CSS Grid */
.nf-row {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 0; /* Default gap is 0 */
}

/* Gap Utilities */
.nf-gap-0 {
	gap: 0;
}

.nf-gap-xs {
	gap: var(--nf-spacing-xs);
}

.nf-gap-sm {
	gap: var(--nf-spacing-sm);
}

.nf-gap-md {
	gap: var(--nf-spacing-md);
}

.nf-gap-lg {
	gap: var(--nf-spacing-lg);
}

.nf-gap-xl {
	gap: var(--nf-spacing-xl);
}

.nf-gap-x-0 {
	column-gap: 0;
}

.nf-gap-x-xs {
	column-gap: var(--nf-spacing-xs);
}

.nf-gap-x-sm {
	column-gap: var(--nf-spacing-sm);
}

.nf-gap-x-md {
	column-gap: var(--nf-spacing-md);
}

.nf-gap-x-lg {
	column-gap: var(--nf-spacing-lg);
}

.nf-gap-x-xl {
	column-gap: var(--nf-spacing-xl);
}

.nf-gap-y-0 {
	row-gap: 0;
}

.nf-gap-y-xs {
	row-gap: var(--nf-spacing-xs);
}

.nf-gap-y-sm {
	row-gap: var(--nf-spacing-sm);
}

.nf-gap-y-md {
	row-gap: var(--nf-spacing-md);
}

.nf-gap-y-lg {
	row-gap: var(--nf-spacing-lg);
}

.nf-gap-y-xl {
	row-gap: var(--nf-spacing-xl);
}

/* Column classes for Grid */
.nf-col {
	grid-column: span 12;
}

.nf-col-1 {
	grid-column: span 1;
}

.nf-col-2 {
	grid-column: span 2;
}

.nf-col-3 {
	grid-column: span 3;
}

.nf-col-4 {
	grid-column: span 4;
}

.nf-col-5 {
	grid-column: span 5;
}

.nf-col-6 {
	grid-column: span 6;
}

.nf-col-7 {
	grid-column: span 7;
}

.nf-col-8 {
	grid-column: span 8;
}

.nf-col-9 {
	grid-column: span 9;
}

.nf-col-10 {
	grid-column: span 10;
}

.nf-col-11 {
	grid-column: span 11;
}

.nf-col-12 {
	grid-column: span 12;
}

/* Responsive Grid */
@media (min-width: 576px) {
	.nf-col-sm-1 {
		grid-column: span 1;
	}

	.nf-col-sm-2 {
		grid-column: span 2;
	}

	.nf-col-sm-3 {
		grid-column: span 3;
	}

	.nf-col-sm-4 {
		grid-column: span 4;
	}

	.nf-col-sm-5 {
		grid-column: span 5;
	}

	.nf-col-sm-6 {
		grid-column: span 6;
	}

	.nf-col-sm-7 {
		grid-column: span 7;
	}

	.nf-col-sm-8 {
		grid-column: span 8;
	}

	.nf-col-sm-9 {
		grid-column: span 9;
	}

	.nf-col-sm-10 {
		grid-column: span 10;
	}

	.nf-col-sm-11 {
		grid-column: span 11;
	}

	.nf-col-sm-12 {
		grid-column: span 12;
	}

	/* Auto width columns for sm */
	.nf-col-sm {
		grid-column: auto;
	}

	.nf-col-sm-auto {
		grid-column: auto;
	}
}

@media (min-width: 768px) {
	.nf-col-md-1 {
		grid-column: span 1;
	}

	.nf-col-md-2 {
		grid-column: span 2;
	}

	.nf-col-md-3 {
		grid-column: span 3;
	}

	.nf-col-md-4 {
		grid-column: span 4;
	}

	.nf-col-md-5 {
		grid-column: span 5;
	}

	.nf-col-md-6 {
		grid-column: span 6;
	}

	.nf-col-md-7 {
		grid-column: span 7;
	}

	.nf-col-md-8 {
		grid-column: span 8;
	}

	.nf-col-md-9 {
		grid-column: span 9;
	}

	.nf-col-md-10 {
		grid-column: span 10;
	}

	.nf-col-md-11 {
		grid-column: span 11;
	}

	.nf-col-md-12 {
		grid-column: span 12;
	}

	/* Auto width columns for md */
	.nf-col-md {
		grid-column: auto;
	}

	.nf-col-md-auto {
		grid-column: auto;
	}
}

@media (min-width: 992px) {
	.nf-col-lg-1 {
		grid-column: span 1;
	}

	.nf-col-lg-2 {
		grid-column: span 2;
	}

	.nf-col-lg-3 {
		grid-column: span 3;
	}

	.nf-col-lg-4 {
		grid-column: span 4;
	}

	.nf-col-lg-5 {
		grid-column: span 5;
	}

	.nf-col-lg-6 {
		grid-column: span 6;
	}

	.nf-col-lg-7 {
		grid-column: span 7;
	}

	.nf-col-lg-8 {
		grid-column: span 8;
	}

	.nf-col-lg-9 {
		grid-column: span 9;
	}

	.nf-col-lg-10 {
		grid-column: span 10;
	}

	.nf-col-lg-11 {
		grid-column: span 11;
	}

	.nf-col-lg-12 {
		grid-column: span 12;
	}

	/* Auto width columns for lg */
	.nf-col-lg {
		grid-column: auto;
	}

	.nf-col-lg-auto {
		grid-column: auto;
	}
}

@media (min-width: 1200px) {
	.nf-col-xl-1 {
		grid-column: span 1;
	}

	.nf-col-xl-2 {
		grid-column: span 2;
	}

	.nf-col-xl-3 {
		grid-column: span 3;
	}

	.nf-col-xl-4 {
		grid-column: span 4;
	}

	.nf-col-xl-5 {
		grid-column: span 5;
	}

	.nf-col-xl-6 {
		grid-column: span 6;
	}

	.nf-col-xl-7 {
		grid-column: span 7;
	}

	.nf-col-xl-8 {
		grid-column: span 8;
	}

	.nf-col-xl-9 {
		grid-column: span 9;
	}

	.nf-col-xl-10 {
		grid-column: span 10;
	}

	.nf-col-xl-11 {
		grid-column: span 11;
	}

	.nf-col-xl-12 {
		grid-column: span 12;
	}

	/* Auto width columns for xl */
	.nf-col-xl {
		grid-column: auto;
	}

	.nf-col-xl-auto {
		grid-column: auto;
	}
}

/* Text Alignment */
.nf-text-center {
	text-align: center;
}

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

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

@media (min-width: 768px) {
	.nf-text-md-center {
		text-align: center;
	}

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

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

/* Margin Utilities */
.nf-m-0 {
	margin: 0;
}

.nf-m-1 {
	margin: var(--nf-spacing-xs);
}

.nf-m-2 {
	margin: var(--nf-spacing-sm);
}

.nf-m-3 {
	margin: var(--nf-spacing-md);
}

.nf-m-4 {
	margin: var(--nf-spacing-lg);
}

.nf-m-5 {
	margin: var(--nf-spacing-xl);
}

.nf-mt-0 {
	margin-top: 0;
}

.nf-mt-1 {
	margin-top: var(--nf-spacing-xs);
}

.nf-mt-2 {
	margin-top: var(--nf-spacing-sm);
}

.nf-mt-3 {
	margin-top: var(--nf-spacing-md);
}

.nf-mt-4 {
	margin-top: var(--nf-spacing-lg);
}

.nf-mt-5 {
	margin-top: var(--nf-spacing-xl);
}

.nf-mb-0 {
	margin-bottom: 0;
}

.nf-mb-1 {
	margin-bottom: var(--nf-spacing-xs);
}

.nf-mb-2 {
	margin-bottom: var(--nf-spacing-sm);
}

.nf-mb-3 {
	margin-bottom: var(--nf-spacing-md);
}

.nf-mb-4 {
	margin-bottom: var(--nf-spacing-lg);
}

.nf-mb-5 {
	margin-bottom: var(--nf-spacing-xl);
}

.nf-ml-0 {
	margin-left: 0;
}

.nf-ml-1 {
	margin-left: var(--nf-spacing-xs);
}

.nf-ml-2 {
	margin-left: var(--nf-spacing-sm);
}

.nf-ml-3 {
	margin-left: var(--nf-spacing-md);
}

.nf-ml-4 {
	margin-left: var(--nf-spacing-lg);
}

.nf-ml-5 {
	margin-left: var(--nf-spacing-xl);
}

.nf-mr-0 {
	margin-right: 0;
}

.nf-mr-1 {
	margin-right: var(--nf-spacing-xs);
}

.nf-mr-2 {
	margin-right: var(--nf-spacing-sm);
}

.nf-mr-3 {
	margin-right: var(--nf-spacing-md);
}

.nf-mr-4 {
	margin-right: var(--nf-spacing-lg);
}

.nf-mr-5 {
	margin-right: var(--nf-spacing-xl);
}

.nf-mx-0 {
	margin-left: 0;
	margin-right: 0;
}

.nf-mx-1 {
	margin-left: var(--nf-spacing-xs);
	margin-right: var(--nf-spacing-xs);
}

.nf-mx-2 {
	margin-left: var(--nf-spacing-sm);
	margin-right: var(--nf-spacing-sm);
}

.nf-mx-3 {
	margin-left: var(--nf-spacing-md);
	margin-right: var(--nf-spacing-md);
}

.nf-mx-4 {
	margin-left: var(--nf-spacing-lg);
	margin-right: var(--nf-spacing-lg);
}

.nf-mx-5 {
	margin-left: var(--nf-spacing-xl);
	margin-right: var(--nf-spacing-xl);
}

.nf-my-0 {
	margin-top: 0;
	margin-bottom: 0;
}

.nf-my-1 {
	margin-top: var(--nf-spacing-xs);
	margin-bottom: var(--nf-spacing-xs);
}

.nf-my-2 {
	margin-top: var(--nf-spacing-sm);
	margin-bottom: var(--nf-spacing-sm);
}

.nf-my-3 {
	margin-top: var(--nf-spacing-md);
	margin-bottom: var(--nf-spacing-md);
}

.nf-my-4 {
	margin-top: var(--nf-spacing-lg);
	margin-bottom: var(--nf-spacing-lg);
}

.nf-my-5 {
	margin-top: var(--nf-spacing-xl);
	margin-bottom: var(--nf-spacing-xl);
}

/* Padding Utilities */
.nf-p-0 {
	padding: 0;
}

.nf-p-1 {
	padding: var(--nf-spacing-xs);
}

.nf-p-2 {
	padding: var(--nf-spacing-sm);
}

.nf-p-3 {
	padding: var(--nf-spacing-md);
}

.nf-p-4 {
	padding: var(--nf-spacing-lg);
}

.nf-p-5 {
	padding: var(--nf-spacing-xl);
}

.nf-pt-0 {
	padding-top: 0;
}

.nf-pt-1 {
	padding-top: var(--nf-spacing-xs);
}

.nf-pt-2 {
	padding-top: var(--nf-spacing-sm);
}

.nf-pt-3 {
	padding-top: var(--nf-spacing-md);
}

.nf-pt-4 {
	padding-top: var(--nf-spacing-lg);
}

.nf-pt-5 {
	padding-top: var(--nf-spacing-xl);
}

.nf-pb-0 {
	padding-bottom: 0;
}

.nf-pb-1 {
	padding-bottom: var(--nf-spacing-xs);
}

.nf-pb-2 {
	padding-bottom: var(--nf-spacing-sm);
}

.nf-pb-3 {
	padding-bottom: var(--nf-spacing-md);
}

.nf-pb-4 {
	padding-bottom: var(--nf-spacing-lg);
}

.nf-pb-5 {
	padding-bottom: var(--nf-spacing-xl);
}

.nf-pl-0 {
	padding-left: 0;
}

.nf-pl-1 {
	padding-left: var(--nf-spacing-xs);
}

.nf-pl-2 {
	padding-left: var(--nf-spacing-sm);
}

.nf-pl-3 {
	padding-left: var(--nf-spacing-md);
}

.nf-pl-4 {
	padding-left: var(--nf-spacing-lg);
}

.nf-pl-5 {
	padding-left: var(--nf-spacing-xl);
}

.nf-pr-0 {
	padding-right: 0;
}

.nf-pr-1 {
	padding-right: var(--nf-spacing-xs);
}

.nf-pr-2 {
	padding-right: var(--nf-spacing-sm);
}

.nf-pr-3 {
	padding-right: var(--nf-spacing-md);
}

.nf-pr-4 {
	padding-right: var(--nf-spacing-lg);
}

.nf-pr-5 {
	padding-right: var(--nf-spacing-xl);
}

.nf-px-0 {
	padding-left: 0;
	padding-right: 0;
}

.nf-px-1 {
	padding-left: var(--nf-spacing-xs);
	padding-right: var(--nf-spacing-xs);
}

.nf-px-2 {
	padding-left: var(--nf-spacing-sm);
	padding-right: var(--nf-spacing-sm);
}

.nf-px-3 {
	padding-left: var(--nf-spacing-md);
	padding-right: var(--nf-spacing-md);
}

.nf-px-4 {
	padding-left: var(--nf-spacing-lg);
	padding-right: var(--nf-spacing-lg);
}

.nf-px-5 {
	padding-left: var(--nf-spacing-xl);
	padding-right: var(--nf-spacing-xl);
}

.nf-py-0 {
	padding-top: 0;
	padding-bottom: 0;
}

.nf-py-1 {
	padding-top: var(--nf-spacing-xs);
	padding-bottom: var(--nf-spacing-xs);
}

.nf-py-2 {
	padding-top: var(--nf-spacing-sm);
	padding-bottom: var(--nf-spacing-sm);
}

.nf-py-3 {
	padding-top: var(--nf-spacing-md);
	padding-bottom: var(--nf-spacing-md);
}

.nf-py-4 {
	padding-top: var(--nf-spacing-lg);
	padding-bottom: var(--nf-spacing-lg);
}

.nf-py-5 {
	padding-top: var(--nf-spacing-xl);
	padding-bottom: var(--nf-spacing-xl);
}

/* Flexbox Utilities (for non-grid layouts) */
.nf-d-flex {
	display: flex;
}

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

.nf-flex-row {
	flex-direction: row;
}

.nf-justify-content-start {
	justify-content: flex-start;
}

.nf-justify-content-end {
	justify-content: flex-end;
}

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

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

.nf-justify-content-around {
	justify-content: space-around;
}

.nf-align-items-start {
	align-items: flex-start;
}

.nf-align-items-end {
	align-items: flex-end;
}

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

.nf-align-items-baseline {
	align-items: baseline;
}

.nf-align-items-stretch {
	align-items: stretch;
}

/* Navbar Component */
.nf-navbar {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	padding: var(--nf-navbar-padding-y) var(--nf-navbar-padding-x);
	background-color: var(--nf-bg-secondary);
	border-bottom: 1px solid var(--nf-border);
	min-height: var(--nf-navbar-height);
}

.nf-navbar.nf-navbar-fixed-top {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1030;
	border-radius: 0;
}

.nf-navbar-brand {
	display: inline-block;
	padding-top: 0.3125rem;
	padding-bottom: 0.3125rem;
	margin-right: 1rem;
	font-size: 1.25rem;
	line-height: inherit;
	white-space: nowrap;
	text-decoration: none;
	color: var(--nf-text);
	font-weight: 500;
	/* Убираем margin-top, чтобы выровнять по центру */
	align-self: center;
}

.nf-navbar-brand:hover, .nf-navbar-brand:focus {
	text-decoration: none;
	color: var(--nf-primary);
}

.nf-navbar-nav {
	display: flex;
	flex-direction: column;
	padding-left: 0;
	margin-bottom: 0;
	list-style: none;
	margin-top:auto;
	align-self: center;
}

.nf-navbar-nav .nf-nav-link {
	display: block;
	padding: 0.5rem 1rem;
	text-decoration: none;
	color: var(--nf-text);
	transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
	border-radius: var(--nf-radius-sm);
}

.nf-navbar-nav .nf-nav-link:hover, .nf-navbar-nav .nf-nav-link:focus {
	color: var(--nf-primary);
	background-color: rgba(37, 99, 235, 0.1);
}

.nf-navbar-nav .nf-nav-link.active {
	color: var(--nf-primary);
	font-weight: 500;
}

.nf-navbar-nav .nf-dropdown {
	position: relative;
}

.nf-navbar-nav .nf-dropdown-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1000;
	display: none;
	float: left;
	min-width: 10rem;
	padding: 0.5rem 0;
	margin: 0.125rem 0 0;
	/*font-size: 1rem;*/
	color: var(--nf-text);
	text-align: left;
	list-style: none;
	background-color: var(--nf-bg-secondary);
	background-clip: padding-box;
	border: 1px solid var(--nf-border);
	border-radius: var(--nf-radius-md);
	box-shadow: var(--nf-shadow);
}

/* Открытие меню по hover */
.nf-navbar-nav .nf-dropdown:hover .nf-dropdown-menu,
.nf-navbar-nav .nf-dropdown.show .nf-dropdown-menu {
	display: block;
}

/* Открытие меню по click */
.nf-navbar-nav .nf-dropdown.nf-dropdown-click:hover .nf-dropdown-menu {
	display: none; /* Скрываем при hover, если режим click */
}

.nf-navbar-nav .nf-dropdown.nf-dropdown-click.show .nf-dropdown-menu {
	display: block; /* Показываем при show (click) */
}

.nf-navbar-nav .nf-dropdown-menu .nf-dropdown-item {
	display: block;
	width: 100%;
	padding: 0.25rem 1rem;
	clear: both;
	font-weight: 400;
	color: var(--nf-text);
	text-align: inherit;
	white-space: nowrap;
	background-color: transparent;
	border: 0;
	text-decoration: none;
}

.nf-navbar-nav .nf-dropdown-menu .nf-dropdown-item:hover,
.nf-navbar-nav .nf-dropdown-menu .nf-dropdown-item:focus {
	color: var(--nf-primary);
	text-decoration: none;
	background-color: rgba(37, 99, 235, 0.1);
}

.nf-navbar-nav .nf-dropdown-menu .nf-dropdown-item.active {
	color: var(--nf-primary);
	font-weight: 500;
}

.nf-navbar-toggler {
	padding: 0.25rem 0.75rem;
	font-size: 1.25rem;
	line-height: 1;
	background-color: transparent;
	border: 1px solid transparent;
	border-radius: var(--nf-radius-sm);
	color: var(--nf-text);
	cursor: pointer;
	display: none;
}

.nf-navbar-toggler:hover, .nf-navbar-toggler:focus {
	text-decoration: none;
	outline: 0;
}

.nf-navbar-collapse {
	flex-basis: 100%;
	flex-grow: 1;
	align-items: center;
}

/* Navbar alignment */
.nf-navbar-nav.nf-justify-content-start {
	margin-right: auto;
}

.nf-navbar-nav.nf-justify-content-end {
	margin-left: auto;
}

.nf-navbar-nav.nf-justify-content-center {
	margin-left: auto;
	margin-right: auto;
}

/* Responsive Navbar */
@media (max-width: 767.98px) {
	.nf-navbar-nav {
		flex-direction: column;
	}

	.nf-navbar-nav .nf-dropdown-menu {
		position: static;
		float: none;
		width: auto;
		margin-top: 0;
		background-color: transparent;
		border: 0;
		box-shadow: none;
		padding-left: 1rem;
	}

	.nf-navbar-toggler {
		display: inline-block;
	}

	.nf-navbar-collapse {
		display: none;
	}

	.nf-navbar-collapse.show {
		display: block;
	}
}

@media (min-width: 768px) {
	.nf-navbar-expand-md {
		flex-flow: row nowrap;
		justify-content: flex-start;
	}

	.nf-navbar-expand-md .nf-navbar-nav {
		flex-direction: row;
		align-items: center; /* Выравнивание по центру по вертикали */
	}

	.nf-navbar-expand-md .nf-navbar-nav .nf-dropdown-menu {
		position: absolute;
	}

	.nf-navbar-expand-md .nf-navbar-collapse {
		display: flex !important;
		flex-basis: auto;
	}

	.nf-navbar-expand-md .nf-navbar-toggler {
		display: none;
	}
}

@media (min-width: 992px) {
	.nf-navbar-expand-lg {
		flex-flow: row nowrap;
		justify-content: flex-start;
	}

	.nf-navbar-expand-lg .nf-navbar-nav {
		flex-direction: row;
		align-items: center; /* Выравнивание по центру по вертикали */
	}

	.nf-navbar-expand-lg .nf-navbar-nav .nf-dropdown-menu {
		position: absolute;
	}

	.nf-navbar-expand-lg .nf-navbar-collapse {
		display: flex !important;
		flex-basis: auto;
	}

	.nf-navbar-expand-lg .nf-navbar-toggler {
		display: none;
	}
}

/* Toasts */
.nf-toast-container {
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 1060;
}

.nf-toast {
	display: flex;
	align-items: center;
	padding: var(--nf-spacing-md);
	margin-bottom: var(--nf-spacing-sm);
	width: 350px;
	max-width: 90vw;
	border-radius: var(--nf-radius-md);
	box-shadow: var(--nf-shadow-lg);
	opacity: 0;
	transform: translateX(100%);
	transition: all 0.3s ease-in-out;
}

.nf-toast.show {
	opacity: 1;
	transform: translateX(0);
}

.nf-toast-success {
	background-color: var(--nf-success);
	color: white;
}

.nf-toast-danger {
	background-color: var(--nf-danger);
	color: white;
}

.nf-toast-warning {
	background-color: var(--nf-warning);
	color: white;
}

.nf-toast-info {
	background-color: var(--nf-info);
	color: white;
}

.nf-toast-icon {
	margin-right: var(--nf-spacing-md);
	font-size: 1.5rem;
}

.nf-toast-content {
	flex: 1;
}

.nf-toast-close {
	background: none;
	border: none;
	color: white;
	font-size: 1.25rem;
	cursor: pointer;
	padding: 0;
	margin-left: var(--nf-spacing-md);
}

/* Theme Toggle */
.nf-theme-toggle {
	background: none;
	border: none;
	color: var(--nf-text);
	cursor: pointer;
	font-size: 1.25rem;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: var(--nf-transition);
	align-self: center; /* Выравнивание по центру */
}

.nf-theme-toggle:hover {
	background: rgba(37, 99, 235, 0.1);
	transform: rotate(15deg);
}


/* --- Расширенные стили для таблиц NeoFrame --- */

/* --- Таблицы --- */
/* --- Расширенные стили для таблиц NeoFrame --- */

/* Переменные тем для таблиц */
/* Базовый стиль таблицы */
.nf-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	margin-bottom: 1rem;
	background-color: var(--nf-table-bg);
	color: var(--nf-text, #eeeeee);
	border: var(--nf-table-border-width) solid var(--nf-table-border-color);
	border-radius: var(--nf-border-radius, 0.375rem);
	overflow: hidden;
	box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

/* Стили для заголовков таблицы */
.nf-table thead {
	background-color: var(--nf-table-header-bg);
	color: var(--nf-table-header-color);
}

.nf-table thead th {
	padding: 0.75rem;
	text-align: left;
	font-weight: bold;
	border-bottom: calc(var(--nf-table-border-width) * 2) solid var(--nf-table-border-color);
}

/* Границы для закругленных углов в шапке */
.nf-table thead th:first-child {
	border-top-left-radius: var(--nf-border-radius, 0.375rem);
}

.nf-table thead th:last-child {
	border-top-right-radius: var(--nf-border-radius, 0.375rem);
}

/* Стили для тела таблицы */
.nf-table tbody tr {
	border-bottom: var(--nf-table-border-width) solid var(--nf-table-border-color);
}

.nf-table tbody tr:last-child {
	border-bottom: none;
}

/* Чередование фона строк */
.nf-table tbody tr:nth-child(even) {
	background-color: var(--nf-table-row-alt-bg);
}

/* Hover эффект ТОЛЬКО для строк в tbody */
.nf-table tbody tr:hover {
	background-color: var(--nf-table-row-hover-bg) !important;
}

.nf-table tbody td {
	padding: 0.75rem;
	border-right: var(--nf-table-border-width) solid var(--nf-table-border-color);
}

/* Убираем правую границу у последней ячейки в строке */
.nf-table tbody td:last-child {
	border-right: none;
}

/* Убираем нижнюю границу у последней строки */
.nf-table tbody tr:last-child td {
	border-bottom: none;
}

/* Стили для колонки действий */
.nf-table .nf-table-actions {
	text-align: right;
	white-space: nowrap;
	border-right: none !important; /* Убираем границу, если последняя */
}

/* Стилизация кнопок в действиях */
.nf-table .nf-table-actions .nf-btn {
	padding: 0.25rem 0.5rem;
	font-size: 0.875rem;
	margin-left: 0.25rem;
}

.nf-table .nf-table-actions .nf-btn:first-child {
	margin-left: 0;
}

/* --- Стили для раскраски --- */

/* 1. Чередование цвета фона по строкам (альтернатива стандартному nth-child) */
.nf-table-striped-alt tbody tr:nth-of-type(odd) {
	background-color: var(--nf-table-row-alt-bg);
}

/* 2. Раскраска фона по колонкам */
.nf-table-col-1 {
	background-color: var(--nf-table-color-1) !important;
}

.nf-table-col-2 {
	background-color: var(--nf-table-color-2) !important;
}

.nf-table-col-3 {
	background-color: var(--nf-table-color-3) !important;
}

.nf-table-col-4 {
	background-color: var(--nf-table-color-4) !important;
}

.nf-table-col-5 {
	background-color: var(--nf-table-color-5) !important;
}

.nf-table-col-6 {
	background-color: var(--nf-table-color-6) !important;
}

/* 3. Раскраска фона по строкам */
.nf-table-row-1 {
	background-color: var(--nf-table-color-1) !important;
}

.nf-table-row-2 {
	background-color: var(--nf-table-color-2) !important;
}

.nf-table-row-3 {
	background-color: var(--nf-table-color-3) !important;
}

.nf-table-row-4 {
	background-color: var(--nf-table-color-4) !important;
}

.nf-table-row-5 {
	background-color: var(--nf-table-color-5) !important;
}

.nf-table-row-6 {
	background-color: var(--nf-table-color-6) !important;
}


/* Адаптивность */
.nf-table-responsive {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-bottom: 1rem;
	border-radius: var(--nf-border-radius, 0.375rem);
	border: var(--nf-table-border-width) solid var(--nf-table-border-color);
}

.nf-table-responsive .nf-table {
	margin-bottom: 0;
	border-radius: 0;
	border: none;
	box-shadow: none;
}
html.nf-modal-open {
	overflow: hidden;
}
@media (max-width: 575.98px) {
	body{
		font-size: 12pt;
	}
	.nf-table tbody td {
		padding: 0.4rem;
	}
}
@media (min-width: 576px) {
	body{
		font-size: 12pt;
	}
	.nf-table tbody td {
		padding: 0.4rem;
	}
}

@media (min-width: 768px) {

	body{
		font-size: 13pt;
	}
	.nf-table tbody td {
		padding: 0.4rem;
	}
}

@media (min-width: 992px) {

	body{
		font-size: 14pt;
	}
	.nf-table tbody td {
		padding: 0.5rem;
	}
}

@media (min-width: 1200px) {

	body{
		font-size: 15pt;
	}
}


/* --- Конец расширенных стилей для таблиц --- */