/* app-style.css - общие стили для сайта и админки */
:root {
	--robin-egg-blue: #55dde0;
	--lapis-lazuli: #33658a;
	--charcoal: #2f4858;
	--hunyadi-yellow: #f6ae2d;
	--orange-pantone: #f26419;
	--primary-blue: #33658a;
	--primary-dark: #2f4858;
	--accent: #f26419;
	--warning: #f6ae2d;
	--success: #28a745;
	--danger: #dc3545;
	--light: #f8f9fa;
	--dark: #212529;
}

/* Общие стили */
a {
	color: var(--lapis-lazuli);
	text-decoration: none;
	transition: color 0.3s ease;
}

a:hover {
	color: var(--orange-pantone);
}

.form-control:focus,
.form-select:focus,
button:focus,
.btn:focus,
a:focus,
[role="button"]:focus,
i:focus {
	outline: none !important;
	box-shadow: 0 0 0 0px rgba(51, 101, 138, 0.25) !important; /* Видимая тень */
	border-color: transparent !important;
}

.tooltip {
	z-index: 1070 !important; /* выше модалок */
	pointer-events: none;
}

.tooltip-inner {
	pointer-events: none;
}

.text-primary, .text-info, .text-secondary {
	transition: color 0.2s ease;
}
.text-primary:hover { color: #0056b3 !important; }
.text-info:hover { color: #0077b6 !important; }
.text-secondary:hover { color: #0056b3 !important; }

/* Полные стили для плейсхолдера — все браузеры */
::placeholder {
	color: #adb5bd !important; /* Bootstrap "gray-500" — бледный, серый */
	opacity: 1;
	font-style: italic;
	font-size: 0.95em;
}

/* Для WebKit (Chrome, Edge, Safari) */
::-webkit-input-placeholder {
	color: #adb5bd !important;
	opacity: 1;
	font-style: italic;
	font-size: 0.95em;
}

/* Для Firefox */
::-moz-placeholder {
	color: #adb5bd !important;
	opacity: 1;
	font-style: italic;
	font-size: 0.95em;
}

/* Для старых версий Firefox */
:-moz-placeholder {
	color: #adb5bd !important;
	opacity: 1;
	font-style: italic;
	font-size: 0.95em;
}

/* Для IE/Edge */
:-ms-input-placeholder {
	color: #adb5bd !important;
	opacity: 1;
	font-style: italic;
	font-size: 0.95em;
}

/* === Мобильное меню (offcanvas) === */

/* Фон и текст для offcanvas */
.offcanvas.offcanvas-start {
	width: 250px;
	background: var(--lapis-lazuli) !important;
	color: white;
}

.offcanvas-header {
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.offcanvas-title img {
	filter: brightness(100%);
}

/* Ссылки в меню */
.offcanvas-body .nav-link {
	color: rgba(255, 255, 255, 0.8);
	padding: 0.8rem 1rem;
	border-radius: 5px;
	margin: 4px 0;
	transition: all 0.3s ease;
}

.offcanvas-body .nav-link:hover,
.offcanvas-body .nav-link.active {
	color: white;
	background: rgba(255, 255, 255, 0.1);
}

.offcanvas-body .nav-link i {
	width: 20px;
	margin-right: 10px;
	color: var(--orange-pantone);
}

/* Адаптивность */
@media (min-width: 768px) {
	.offcanvas {
		display: none !important;
	}
}

@media (max-width: 767.98px) {
	.sidebar {
		display: none !important;
	}
}

.auth-container {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	padding: 20px;
}

.auth-card {
	background: white;
	padding: 2rem;
	border-radius: 15px;
	box-shadow: 0 10px 25px rgba(0,0,0,0.1);
	width: 100%;
	max-width: 500px;
}

.nav-tabs .nav-link {
	border: none;
	color: #6c757d;
	font-weight: 500;
}

.nav-tabs .nav-link.active {
	color: #33658a;
	border-bottom: 2px solid #33658a;
}

.password-strength .progress {
	height: 5px;
	margin-top: 5px;
}

.h-captcha {
	margin-bottom: 1rem;
}

.captcha-status {
	font-size: 0.8rem;
	margin-top: 0.5rem;
}

.captcha-status.valid {
	color: #198754;
}

.captcha-status.invalid {
	color: #dc3545;
}

.form-control:focus,
.form-select:focus,
.btn:focus {
	outline: none;
	box-shadow: 0 0 0 0.2rem rgba(51, 101, 138, 0.25);
	border-color: var(--lapis-lazuli);
}

/* Цвета Bootstrap */
.bg-primary { 
	background: var(--lapis-lazuli) !important; 
}

.bg-gradient { 
	background: linear-gradient(135deg, var(--lapis-lazuli), var(--charcoal)) !important; 
}

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

.text-secondry { 
	color: var(--robin-egg-blue) !important; 
}

.text-accent { 
	color: var(--orange-pantone) !important; 
}

.text-warning { 
	color: var(--hunyadi-yellow) !important; 
}

/* Кнопки */
.btn-primary {
	background: var(--lapis-lazuli);
	border-color: var(--lapis-lazuli);
	color: white;
}

.btn-primary:hover {
	background: var(--charcoal);
	border-color: var(--charcoal);
	color: white;
}

.btn-outline-primary {
	color: var(--lapis-lazuli);
	background: transparent;
	border-color: var(--lapis-lazuli);
}

.btn-outline-primary:hover {
	background: var(--lapis-lazuli);
	border-color: var(--lapis-lazuli);
	color: white;
}

.btn-accent {
	background: var(--orange-pantone);
	border-color: var(--orange-pantone);
	color: white;
}

.btn-accent:hover {
	background: #e05a14;
	border-color: #e05a14;
	color: white;
}

.btn-warning {
	background: var(--hunyadi-yellow);
	border-color: var(--hunyadi-yellow);
	color: var(--charcoal);
}

.btn-warning:hover {
	background: #e59d1a;
	border-color: #e59d1a;
	color: var(--charcoal);
}

/* Навигация */
.navbar-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 800;
	font-size: 24px;
}

.navbar-brand img {
	transition: transform 0.3s ease;
}

.navbar-brand:hover img {
	transform: scale(1.05);
}

.navbar-dark .navbar-nav .nav-link {
	color: rgba(255, 255, 255, 0.85);
}

.navbar-dark .navbar-nav .nav-link:hover {
	color: white;
}

/* Карточки */
.card {
	border: 1px solid rgba(51, 101, 138, 0.1);
	border-radius: 10px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
	transition: all 0.3s ease;
}

.card:hover {
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
	transform: translateY(-2px);
}

.card-header {
	background: linear-gradient(135deg, var(--lapis-lazuli), var(--charcoal));
	color: white;
	border-bottom: none;
	border-radius: 10px 10px 0 0 !important;
}

/* Таблицы */
.table th {
	background: var(--lapis-lazuli);
	color: white;
	border-color: var(--charcoal);
}

.table-hover tbody tr:hover {
	background-color: rgba(51, 101, 138, 0.05);
}

/* Badges */
.badge.bg-primary {
	background: var(--lapis-lazuli) !important;
}

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

.badge.bg-warning {
	background: var(--hunyadi-yellow) !important;
	color: var(--charcoal);
}

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

/* Сайдбар админки */
.sidebar {
	background: var(--lapis-lazuli);
	color: white;
	min-height: 100vh;
	position: sticky;
	top: 0;
}

.sidebar .nav-link {
	color: rgba(255, 255, 255, 0.8);
	padding: 7px 10px;
	border-radius: 5px;
	margin: 2px 0;
	transition: all 0.3s ease;
}

.sidebar .nav-link:hover,
.sidebar .nav-link.active {
	color: white;
	background: rgba(255, 255, 255, 0.1);
}

.sidebar .nav-link i {
	width: 20px;
	margin-right: 10px;
}

/* Контент админки */
.admin-content {
	background: #f8f9fa;
	min-height: 100vh;
}

.admin-header {
	background: white;
	border-bottom: 2px solid var(--lapis-lazuli);
	padding: 1rem 2rem;
}

/* Формы в админке */
.admin-form .form-label {
	font-weight: 500;
	color: var(--charcoal);
}

.admin-form .form-control {
	border-radius: 8px;
	border: 2px solid #e9ecef;
}

.admin-form .form-control:focus {
	border-color: var(--lapis-lazuli);
}

/* Статусы */
.status-badge {
	font-size: 0.8em;
	padding: 0.35em 0.65em;
	border-radius: 20px;
}

/* Уведомления */
.alert {
	animation: fadeIn 0.3s ease-in;
}

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

.alert-primary {
	background: rgba(51, 101, 138, 0.1);
	border-color: var(--lapis-lazuli);
	color: var(--lapis-lazuli);
}

.alert-success {
	background: rgba(40, 167, 69, 0.1);
	border-color: var(--success);
	color: var(--success);
}

.alert-warning {
	background: rgba(246, 174, 45, 0.1);
	border-color: var(--hunyadi-yellow);
	color: var(--charcoal);
}

.alert-danger {
	background: rgba(220, 53, 69, 0.1);
	border-color: var(--danger);
	color: var(--danger);
}

/* Иконки */
.feature-icon {
	width: 60px;
	height: 60px;
	background: var(--lapis-lazuli);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 15px;
}

.feature-icon i {
	color: white;
	font-size: 1.5rem;
}

/* Адаптивность */
@media (max-width: 768px) {
	.sidebar {
		position: relative;
		min-height: auto;
	}
	
	.admin-content {
		min-height: auto;
	}
}

/* Анимации */
.fade-in {
	animation: fadeIn 0.5s ease-in;
}

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

.slide-in {
	animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
	from { transform: translateX(-100%); }
	to { transform: translateX(0); }
}

/* Индикатор сложности пароля */
#passwordStrength {
	margin-top: 0.5rem;
}

#passwordRequirements div {
	font-size: 0.8rem;
	margin: 0.1rem 0;
}

.progress-bar {
	transition: width 0.3s ease, background-color 0.3s ease;
}

/* Стили для полей с ошибками */
.is-invalid {
	border-color: #dc3545 !important;
}

.is-valid {
	border-color: #198754 !important;
}

/* Анимация для индикаторов */
.text-success {
	transition: color 0.3s ease;
}

.text-danger {
	transition: color 0.3s ease;
}

.btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	background-color: #6c757d !important;
	border-color: #6c757d !important;
}

.btn-success:not(:disabled) {
	background: var(--success);
	border-color: var(--success);
}

/* Индикация для полей */
.is-invalid {
	border-color: #dc3545 !important;
}

.is-valid {
	border-color: #198754 !important;
}