/* Configuration Tabs Sidebar Styles */

.config-sidebar {
	background: #fff;
	border-radius: 8px;
	padding: 0.5rem;
	box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.config-sidebar .nav-link {
	color: #495057;
	border-radius: 6px;
	padding: 0.75rem 1rem;
	margin-bottom: 0.5rem;
	text-align: left;
	transition: all 0.2s ease;
	border: 1px solid transparent;
	font-weight: 500;
	display: flex;
	align-items: center;
}

.config-sidebar .nav-link:hover {
	background: #f8f9fa;
	color: #217FF9;
	border-color: #e9ecef;
}

.config-sidebar .nav-link.active {
	background: #217FF9;
	color: #fff;
	box-shadow: 0 0.125rem 0.5rem rgba(33, 127, 249, 0.4);
	border-color: transparent;
}

.config-sidebar .nav-link.active:hover {
	background: #1a6ad4;
	color: #fff;
}

.config-sidebar .nav-link i {
	font-size: 1.1rem;
	width: 24px;
	display: inline-block;
}

/* Content Area */
.tab-content {
	min-height: 400px;
}

.form-section h6 {
	font-size: 1.1rem;
	margin-bottom: 1.5rem;
}

/* Mobile Responsive */
@media (max-width: 767px) {
	.config-sidebar {
		display: flex;
		overflow-x: auto;
		padding: 0.5rem;
		margin-bottom: 1rem;
		position: static !important;
	}
	
	.config-sidebar .nav-link {
		margin-bottom: 0;
		margin-right: 0.5rem;
		white-space: nowrap;
		flex-shrink: 0;
		padding: 0.6rem 1rem;
		font-size: 0.9rem;
	}
	
	.config-sidebar .nav-link:last-child {
		margin-right: 0;
	}
}

/* Smooth transitions for tab switching */
.tab-pane {
	animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Form improvements */
.form-label {
	margin-bottom: 0.5rem;
	font-size: 0.95rem;
}

.input-group-text {
	background: #f8f9fa;
	border-right: none;
}

.input-group .form-control {
	border-left: none;
}

/* Restore left border for form-control when there's no input-group-text before it */
.input-group > .form-control:first-child {
	border-left: 1px solid #ced4da;
}

/* Remove left border if input-group-text exists before form-control */
.input-group > .input-group-text + .form-control {
	border-left: none;
}

.input-group:focus-within .input-group-text {
	border-color: #86b7fe;
}

.input-group:focus-within .form-control {
	border-color: #86b7fe;
}

/* Badge enhancements */
.badge.bg-success-soft {
	background-color: #d4edda !important;
	color: #155724 !important;
}

.badge.bg-warning-soft {
	background-color: #fff3cd !important;
	color: #856404 !important;
}

.badge.bg-secondary-soft {
	background-color: #e2e3e5 !important;
	color: #383d41 !important;
}

.badge.bg-danger-soft {
	background-color: #f8d7da !important;
	color: #721c24 !important;
}

.badge.bg-info-soft {
	background-color: #d1ecf1 !important;
	color: #0c5460 !important;
}

/* Alert Info styling */
.alert-info {
	background-color: #d1ecf1 !important;
	color: #0c5460 !important;
}

/* Language Cards */
.language-card {
	transition: all 0.3s ease;
	background: #fff;
	border-color: #ced4da !important;
	min-height: 70px;
}

/* Кликабельные карточки (только для готовых языков) */
.language-card-clickable {
	cursor: pointer;
}

.language-card-clickable:hover {
	background: #f8f9fa;
	border-color: #217FF9 !important;
	box-shadow: 0 0.125rem 0.5rem rgba(33, 127, 249, 0.15);
	transform: translateY(-2px);
}

/* Кнопки внутри карточки не должны наследовать курсор pointer */
.language-card button {
	cursor: pointer;
}

.language-card .form-check-input {
	cursor: pointer;
	width: 3rem;
	height: 1.5rem;
}

.language-card .form-check-input:focus {
	border-color: #217FF9;
	box-shadow: 0 0 0 0.25rem rgba(33, 127, 249, 0.25);
}

.language-card .form-check-input:checked {
	background-color: #217FF9;
	border-color: #217FF9;
}

/* Active Languages Container - Ensure two columns on desktop */
#active_languages_container.row {
	display: flex !important;
	flex-wrap: wrap !important;
}

@media (min-width: 768px) {
	#active_languages_container.row > .col-md-6 {
		flex: 0 0 50% !important;
		max-width: 50% !important;
		width: 50% !important;
	}
}

/* Mobile: single column */
@media (max-width: 767.98px) {
	#active_languages_container.row > .col-12 {
		flex: 0 0 100% !important;
		max-width: 100% !important;
		width: 100% !important;
	}
	
	/* Улучшенная адаптация карточек языков на мобильных */
	.language-card {
		min-height: auto !important;
	}
}

/* ==================== Resources List Styles ==================== */

.resources-list {
	background: #fff;
	border-radius: 8px;
}

.resources-list .list-group-item {
	border: none;
	border-bottom: 1px solid #e9ecef;
	padding: 1rem 0;
	transition: background-color 0.2s ease;
}

.resources-list .list-group-item:last-child {
	border-bottom: none;
}

.resources-list .list-group-item:hover {
	background-color: #f8f9fa;
}

.resource-icon {
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bg-primary-soft {
	background-color: #e3f2fd !important;
}

.bg-success-soft {
	background-color: #d4edda !important;
}

/* Modal Styles */
#addResourceModal .modal-content {
	border-radius: 12px;
	border: none;
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

#addResourceModal .modal-header {
	padding: 1.5rem 1.5rem 1rem;
}

#addResourceModal .modal-body {
	padding: 1rem 1.5rem 1.5rem;
}

#addResourceModal .btn-group .btn-check:checked + label {
	background-color: #217FF9;
	color: #fff;
	border-color: #217FF9;
}

#addResourceModal .input-group-text {
	background-color: #f8f9fa;
	border-right: 1px solid #ced4da;
}

/* Empty State */
.resources-list .text-center.py-4 {
	background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.resources-list .text-center.py-4 i {
	color: #adb5bd;
}

/* Resource Type Badge Colors */
.resource-icon.bg-primary-soft .bi-globe {
	color: #217FF9;
}

.resource-icon.bg-success-soft .bi-file-earmark,
.resource-icon.bg-success-soft .bi-file-earmark-pdf,
.resource-icon.bg-success-soft .bi-file-earmark-word,
.resource-icon.bg-success-soft .bi-file-earmark-text {
	color: #28a745;
}

/* Button hover effects */
.resources-list .btn-outline-primary:hover {
	transform: scale(1.05);
	transition: transform 0.2s ease;
}

/* Alert animations */
#resourceAlertContainer .alert {
	animation: slideInDown 0.3s ease-out;
}

@keyframes slideInDown {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Loading spinner */
.resources-list .spinner-border {
	width: 2rem;
	height: 2rem;
}

/* Responsive adjustments */
@media (max-width: 767px) {
	.resource-icon {
		width: 40px;
		height: 40px;
	}
	
	.resources-list .list-group-item .d-flex {
		flex-wrap: wrap;
	}
	
	.resources-list .list-group-item .btn-outline-primary {
		margin-top: 0.5rem;
	}
	
	/* Выравнивание иконок по центру на мобильных */
	.resources-list .list-group-item > .d-flex.align-items-center {
		flex-wrap: wrap;
	}
	
	.resources-list .list-group-item > .d-flex.align-items-center > .d-flex:last-child {
		justify-content: center;
		width: 100%;
		margin-top: 0.75rem;
		margin-left: 0;
		margin-right: 0;
	}
	
	.resources-list .list-group-item > .d-flex.align-items-center > .flex-grow-1 {
		width: 100%;
		margin-top: 0.5rem;
	}
}

/* Success state after adding resource */
.alert-success {
	background-color: #d4edda;
	border-color: #c3e6cb;
	color: #155724;
}

.alert-danger {
	background-color: #f8d7da;
	border-color: #f5c6cb;
	color: #721c24;
}

/* File input styling */
#documentFile {
	cursor: pointer;
}

#documentFile::-webkit-file-upload-button {
	background-color: #217FF9;
	color: white;
	padding: 0.5rem 1rem;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

#documentFile::-webkit-file-upload-button:hover {
	background-color: #1a6ad4;
}

/* Resource list item text overflow handling */
.resources-list .fw-semibold {
	word-break: break-word;
	overflow-wrap: break-word;
}

/* ==================== End Resources List Styles ==================== */

/* ==================== Rebuild Button Styles ==================== */
#rebuildBotBtn {
	animation: pulse 2s ease-in-out infinite;
	box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.4);
	transition: all 0.3s ease;
}

#rebuildBotBtn:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(255, 193, 7, 0.3);
	animation: none;
}

@keyframes pulse {
	0%, 100% {
		box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.4);
	}
	50% {
		box-shadow: 0 0 0 8px rgba(255, 193, 7, 0);
	}
}

#rebuildAlert {
	border-left: 4px solid #0dcaf0;
	background-color: #cff4fc;
	animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.resources-list .btn-outline-danger:hover {
	background-color: #dc3545;
	border-color: #dc3545;
	color: white;
}
/* ==================== End Rebuild Button Styles ==================== */

/* ==================== Telegram Group Highlight Animation ==================== */
@keyframes highlight {
	0% {
		background-color: #ffffff;
		transform: scale(1);
	}
	50% {
		background-color: #e7f3ff;
		transform: scale(1.02);
		box-shadow: 0 0 20px rgba(13, 110, 253, 0.3);
	}
	100% {
		background-color: #ffffff;
		transform: scale(1);
	}
}

.telegram-group-item {
	transition: all 0.3s ease;
}
/* ==================== End Telegram Group Highlight Animation ==================== */

/* ==================== Spinner Animation for Pending Status ==================== */
@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

.spinner-icon {
	display: inline-block;
	animation: spin 1s linear infinite;
}
/* ==================== End Spinner Animation ==================== */

/* ==================== Language Card States ==================== */

/* Processing state - shimmer effect */
[data-status="processing"] .language-card {
	background: linear-gradient(90deg, #fff 0%, #fff9e6 50%, #fff 100%);
	background-size: 200% 100%;
	animation: shimmer 2s infinite;
	position: relative;
}

@keyframes shimmer {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* Ready state */
[data-status="ready"] .language-card {
	background: #fff;
}

/* Default language highlight */
.language-card.border-primary {
	border-width: 2px !important;
	box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15) !important;
}

/* Update button styling */
.language-card .update-language-btn {
	transition: all 0.2s ease;
	opacity: 0.7;
}

.language-card .update-language-btn:hover {
	opacity: 1;
	transform: scale(1.15);
}

.language-card .update-language-btn:active {
	transform: scale(0.95);
}

/* Delete button styling */
.language-card .delete-language-btn {
	transition: all 0.2s ease;
	opacity: 0.7;
}

.language-card .delete-language-btn:hover {
	opacity: 1;
	transform: scale(1.15);
}

.language-card .delete-language-btn:active {
	transform: scale(0.95);
}

/* Mobile styles for language card buttons */
@media (max-width: 767px) {
	.language-card {
		flex-wrap: nowrap !important;
		padding: 1rem !important;
	}
	
	/* Контейнер с флагом и названием языка */
	.language-card > .d-flex.align-items-center:first-child {
		flex-grow: 1;
		flex-shrink: 1;
		min-width: 0;
		margin-right: 0.75rem;
	}
	
	/* Контейнер с кнопками - должен оставаться на одной строке */
	.language-card > .d-flex.align-items-center:last-child {
		flex-wrap: nowrap !important;
		flex-shrink: 0;
		justify-content: flex-end;
		gap: 0.5rem;
		margin-top: 0 !important;
		width: auto !important;
	}
	
	.language-card .update-language-btn,
	.language-card .delete-language-btn,
	.language-card .recreate-language-btn {
		width: 44px !important;
		height: 44px !important;
		padding: 0 !important;
		min-width: 44px !important;
		max-width: 44px !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		flex-shrink: 0;
		margin: 0 !important;
	}
	
	.language-card .update-language-btn i,
	.language-card .delete-language-btn i,
	.language-card .recreate-language-btn i {
		margin: 0 !important;
		font-size: 1.1rem;
	}
	
	.language-card .update-language-btn.me-2 {
		margin-right: 0 !important;
	}
	
	.language-card .badge {
		margin-right: 0 !important;
		margin-bottom: 0;
		flex-shrink: 0;
	}
}

/* Disabled delete button (for default language) */
.language-card .delete-language-btn:disabled,
.language-card .delete-language-btn.disabled {
	opacity: 0.4;
	cursor: not-allowed;
	color: #6c757d !important;
	border-color: #6c757d !important;
	background-color: transparent !important;
	pointer-events: none;
}

.language-card .delete-language-btn:disabled:hover,
.language-card .delete-language-btn.disabled:hover {
	opacity: 0.4;
	transform: none;
}

/* Processing badge */
.badge.bg-warning {
	animation: pulse-badge 1.5s ease-in-out infinite;
}

@keyframes pulse-badge {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0.7;
	}
}

/* Add button loading state */
#add_language_btn:disabled {
	cursor: not-allowed;
}

/* Language select dropdown */
#language_select {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

#language_select option {
	padding: 8px;
}

/* ==================== End Language Card States ==================== */

/* ==================== Action Buttons Mobile Spacing ==================== */
@media (max-width: 767px) {
	/* Add margin bottom to Reset Changes button on mobile for spacing */
	.d-flex.justify-content-between.align-items-center > div:last-child .btn-outline-primary.me-2 {
		margin-bottom: 0.75rem;
		margin-right: 0 !important;
	}
}
/* ==================== End Action Buttons Mobile Spacing ==================== */

/* ==================== Dashboard Action Buttons Styles ==================== */
/* Убедиться, что кнопки всегда выстроены в ряд на всех устройствах */
.actions-buttons-wrapper,
.d-flex.actions-buttons-wrapper,
.d-flex.gap-2.actions-buttons-wrapper {
	flex-wrap: nowrap !important;
	flex-direction: row !important;
	display: flex !important;
	align-items: center;
	gap: 0.5rem;
}

/* Убедиться, что ячейка действий не обрезает кнопки */
.actions-cell,
td.actions-cell {
	white-space: nowrap;
	overflow: visible;
	min-width: fit-content;
}

/* Убедиться, что контейнер в ячейке действий всегда в ряд */
td.actions-cell .actions-buttons-wrapper,
td.actions-cell .d-flex.actions-buttons-wrapper {
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	display: flex !important;
}

/* Убедиться, что все кнопки в actions-buttons-wrapper всегда в ряд */
.actions-buttons-wrapper .action-btn,
.actions-buttons-wrapper .btn,
.actions-buttons-wrapper a,
.actions-buttons-wrapper button {
	flex-shrink: 0;
	flex-grow: 0;
}

/* Убедиться, что таблица не обрезает кнопки */
.table-responsive {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* Мобильные стили */
@media (max-width: 767px) {
	/* Скрыть текст кнопок на мобильном */
	.actions-buttons-wrapper .btn-text-mobile-hide {
		display: none;
	}
	
	/* Убрать отступы у иконок, так как текста нет */
	.actions-buttons-wrapper .action-btn i {
		margin-right: 0;
		margin-left: 0;
	}
	
	/* Сделать кнопки квадратными на мобильном */
	.actions-buttons-wrapper .action-btn,
	.actions-buttons-wrapper .btn {
		width: 44px !important;
		height: 44px !important;
		padding: 0 !important;
		min-width: 44px !important;
		max-width: 44px !important;
		display: flex !important;
		align-items: center;
		justify-content: center;
		border-radius: 6px;
		flex-shrink: 0;
		flex-grow: 0;
	}
	
	/* Уменьшить gap между кнопками на мобильном и убедиться, что в ряд */
	.actions-buttons-wrapper,
	.d-flex.actions-buttons-wrapper,
	.d-flex.gap-2.actions-buttons-wrapper {
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		gap: 0.5rem !important;
		display: flex !important;
	}
	
	/* Адаптация таблицы для мобильных */
	.dashboard-table {
		font-size: 0.875rem;
	}
	
	/* Убедиться, что ячейка действий на мобильном не меняет направление */
	.dashboard-table td.actions-cell,
	.dashboard-table .actions-cell {
		display: table-cell !important;
	}
	
	.dashboard-table td.actions-cell .actions-buttons-wrapper,
	.dashboard-table .actions-cell .actions-buttons-wrapper {
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		display: flex !important;
		width: 100%;
	}
	
	/* Уменьшить размер иконок на мобильном для лучшей видимости */
	.actions-buttons-wrapper .action-btn i {
		font-size: 1rem;
	}
	
	/* Ограничить длину названия чатбота на мобильном (короче) */
	.bot-name-link,
	.name-cell .bot-name-link {
		max-width: 120px !important;
	}
	
	.name-cell {
		max-width: 150px;
	}
}
/* ==================== End Dashboard Action Buttons Styles ==================== */

/* ==================== Bot Name Text Truncation ==================== */
/* Ограничить длину названия чатбота на десктопе (длиннее) */
.bot-name-link,
.name-cell .bot-name-link {
	display: inline-block;
	max-width: 300px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.name-cell {
	overflow: hidden;
}
/* ==================== End Bot Name Text Truncation ==================== */

/* ==================== Extension Settings Validation Styles ==================== */
/* Ensure extension setting fields have left border */
.extension-setting-field.form-control,
.extension-setting-field.form-select,
.extension-setting-field.form-control:first-child {
	border-left: 1px solid #ced4da !important;
}

/* Ensure left border even when inside input-group */
.input-group .extension-setting-field.form-control,
.input-group .extension-setting-field.form-select {
	border-left: 1px solid #ced4da !important;
}

.extension-setting-field.is-invalid {
	border-color: #dc3545 !important;
	box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25) !important;
}

.extension-setting-field.is-invalid:focus {
	border-color: #dc3545 !important;
	box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25) !important;
}

.extension-settings-form .form-label.required::after {
	content: " *";
	color: #dc3545;
	font-weight: bold;
}

/* Визуальная индикация ошибок валидации */
.extension-settings-form .invalid-feedback {
	display: block;
	color: #dc3545;
	font-size: 0.875rem;
	margin-top: 0.25rem;
}
/* ==================== End Extension Settings Validation Styles ==================== */