/* SETTINGS.HTML */
/* Общие стили для меню */
:root {
  --primary-color: #007bff;
  --text-color: #333;
  --background-light: #fff;
  --background-lighter: #f8f9fa;
  --box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  --border-color: rgba(0, 0, 0, 0.1);
  --border-radius: 5px;
  --transition-duration: 0.3s; /*Общая длительность анимаций*/
}

/* General Styles */
body {
  font-family: sans-serif; /* Пример, добавьте свой шрифт */
  margin: 0; /* Убираем дефолтные отступы body */
}

.product-img.placeholder {
	width: 100px;
	height: 100px;
	background: #f0f0f0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: black;
	font-size: 14px;
}

.container {
  max-width: 90%;
  
  margin: 0 auto;
  padding: 0 15px;
}

/* Адаптивная обёртка для таблиц */
.table-responsive {
	width: 100%;
	overflow-y: auto;
	overflow-x: auto;
}

.table-scrollable {
	max-height: 400px;
	overflow-y: auto;
	overflow-x: auto
}

.changed-order-qty {
	border: 2px solid orange;
}


.table-vertical-scroll {
	max-height: 680px; /* настройте по необходимости */
	overflow-y: auto;
	overflow-x: auto; /* оставить горизонтальный скролл при необходимости */
	-webkit-overflow-scrolling: touch;
}


/* Header Styles */
header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--box-shadow);
}

header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
}

h1 {
  font-size: 28px;
  font-weight: bold;
  margin: 0;
}

/* Navigation Styles (Desktop) */
nav {
  display: flex;
  justify-content: space-between;
  margin: 20px 0;
}

.main-menu ul,
.shop-menu ul,
.chat-menu ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  flex-wrap: wrap; /* Добавляем перенос строк при необходимости */
}

.main-menu li,
.shop-menu li,
.chat-menu li {
  margin-right: 20px; /* Горизонтальный отступ между пунктами */
  margin-bottom: 15px; /* Вертикальный отступ для переноса строк */
  position: relative;
}

/* Стили для кнопок меню */
.main-menu a,
.shop-menu a,
.chat-menu a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px 20px;
  text-decoration: none;
  color: var(--text-color);
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  transition: all var(--transition-duration);
  position: relative;
  min-width: 120px;
  height: 45px;
  box-shadow: var(--box-shadow);
  border-radius: var(--border-radius);
  background: linear-gradient(to right, var(--background-light), var(--background-lighter));
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-color);
  animation: pulse 2s infinite;
  will-change: transform, box-shadow;
  
  font-size: clamp(14px, 1.25vw, 16px);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.main-menu a::before,
.shop-menu a::before,
.chat-menu a::before {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--primary-color);
  position: absolute;
  bottom: 0;
  left: 0;
  transform: scaleX(0);
  transform-origin: left;  /* Анимация начинается слева */
  transition: transform var(--transition-duration);
}

.main-menu a:hover,
.shop-menu a:hover,
.chat-menu a:hover {
  color: var(--primary-color);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  background: linear-gradient(to right, var(--background-lighter), var(--background-light));
}

.main-menu a:hover::before,
.shop-menu a:hover::before,
.chat-menu a:hover::before {
  transform: scaleX(1);
}

.main-menu a i,
.shop-menu a i,
.chat-menu a i {
  font-size: 20px;
  margin-right: 10px;
  color: var(--primary-color);
  transition: color var(--transition-duration);
}

.main-menu a:hover i,
.shop-menu a:hover i,
.chat-menu a:hover i {
  color: var(--background-light); /* Или другой цвет для контраста */
}

/* Styles for the second menu (chat) */
.chat-menu {
  justify-content: flex-end;
}

.chat-menu li {
  margin-right: 0;
}

/* Additional improvements for focus and active states */
.main-menu a:focus,
.shop-menu a:focus,
.chat-menu a:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.3);
}

.main-menu a:active,
.shop-menu a:active,
.chat-menu a:active {
  transform: translateY(0);
  box-shadow: var(--box-shadow);
}

/* Menu Entrance Animation */
.main-menu.show,
.shop-menu.show,
.chat-menu.show {
  opacity: 1;
  transform: translateY(0);
}

/* Active State Styles */
.main-menu .active a,
.shop-menu .active a,
.chat-menu .active a {
  background: linear-gradient(to right, var(--primary-color), #009bff);
  color: var(--background-light);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.main-menu .active a::before,
.shop-menu .active a::before,
.chat-menu .active a::before {
  transform: scaleX(1);
}

/* Additional Visual Effects */
.main-menu a::after,
.shop-menu a::after,
.chat-menu a::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--border-radius);
  opacity: 0;
  transition: opacity var(--transition-duration);
  background: rgba(255, 255, 255, 0.2);
  mix-blend-mode: screen;
  pointer-events: none;  /* Предотвращает перехват кликов */
  position: absolute;
  top: 0;
  left: 0;
}

.main-menu a:hover::after,
.shop-menu a:hover::after,
.chat-menu a:hover::after {
  opacity: 1;
}

/* Logout Button Styles */
.logout-btn {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  border-radius: var(--border-radius);
  background: #ff6b6b;
  color: var(--background-light);
  text-decoration: none;
  transition: background var(--transition-duration);
}

.logout-btn:hover {
  background: #ff5252;
}

.logout-btn i {
  margin-right: 5px;
}

.overlay.active {
  display: block;
}

/* Animation */
@keyframes pulse {
  0% {
	transform: scale(1);
  }
  50% {
	transform: scale(1.01);
  }
  100% {
	transform: scale(1);
  }
}

/* Content Styles */
.content {
  padding: 40px 0;
}

.content-section {
  margin-bottom: 40px;
}

.section-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
}

.section-description {
  font-size: 16px;
  color: #666;
  line-height: 1.6;
}

.main-menu li,
.shop-menu li,
.chat-menu li {
	margin-right: 5px;
	margin-bottom: 10px;
}

.main-menu a,
.shop-menu a,
.chat-menu a {
	width: 100%;
	box-sizing: border-box; /* Учитываем padding и border в ширине */
}

/* ORDERS.HTML	*/
.filter-panel {
	margin-bottom: 20px;
	padding: 15px;
	background: #f8f9fa;
	border: 1px solid #dee2e6;
	border-radius: 5px;
}

.form-group {
	margin-right: 20px;
	margin-bottom: 10px;
}
.form-label {
	display: block;
	margin-bottom: 5px;
	font-weight: bold;
}

.order-cost-filter-input {
	width: 100px;
}

.input-group {
	display: flex;
}

.input-group .input-group-text {
	background: #fff;
	border: 1px solid #ced4da;
	border-radius: 0.25rem;
	padding: 0.375rem 0.75rem;
	margin: 0 5px;
}

.table {
	width: 100%;
	border-collapse: collapse;
}

.table th,
.table td {
	padding: 12px;
	vertical-align: middle;
	border-top: 1px solid #dee2e6;
}

.table th {
	background: #f8f9fa;
	font-weight: bold;
}

.table-striped tbody tr:nth-of-type(odd) {
	background-color: #f8f9fa;
}

.table-bordered th,
.table-bordered td {
	border: 1px solid #dee2e6;
}

.btn-group {
	display: flex;
	gap: 5px;
}

.btn-sm {
	padding: 5px 10px;
	font-size: 0.8rem;
}

.status-select {
	width: 100%;
	padding: 5px;
	border: 1px solid #ced4da;
	border-radius: 4px;
}

.estimated-date-input {
	width: 100%;
	padding: 5px;
	border: 1px solid #ced4da;
	border-radius: 4px;
}

.save-date-btn {
	margin-top: 5px;
	padding: 5px 10px;
}

.btn-danger {
	color: white;
	background-color: #dc3545;
	border-color: #dc3545;
}

.btn-danger:hover {
	background-color: #c82333;
	border-color: #c82333;
}

.btn-info {
	color: white;
	background-color: #17a2b8;
	border-color: #17a2b8;
}

.btn-info:hover {
	background-color: #138496;
	border-color: #138496;
}

.btn-warning {
	color: white;
	background-color: #ffc107;
	border-color: #ffc107;
}

.btn-warning:hover {
	background-color: #e0a800;
	border-color: #e0a800;
}


.status-filter {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.radio-group, .checkbox-group {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
}

.radio-item, .checkbox-item {
	display: flex;
	align-items: center;
	gap: 5px;
}

.radio-item input, .checkbox-item input {
	margin-right: 5px;
}

.radio-item label, .checkbox-item label {
	margin: 0;
}

/* DISCOUNTS.HTML	*/	
.text-muted {
	color: #888; /* Серый цвет для затемнения текста */
}

/* EDIT_CATEGORY.HTML	*/
.form-group {
	margin-right: 20px;
	margin-bottom: 10px;
}

/* PRODUCTS.HTML */
.filter-panel {
	margin-bottom: 20px;
	padding: 15px;
	background: #f8f9fa;
	border: 1px solid #dee2e6;
}

.form-group {
	margin-right: 20px;
	margin-bottom: 10px;
}

.table {
	width: 100%;
	border-collapse: collapse;
}

.table th,
.table td {
	padding: 12px;
	vertical-align: middle;
	border-top: 1px solid #dee2e6;
}

.table th {
	background: #f8f9fa;
	font-weight: bold;
}

.table-striped tbody tr:nth-of-type(odd) {
	background-color: #f8f9fa;
}

.table-bordered th,
.table-bordered td {
	border: 1px solid #dee2e6;
}

.btn-group {
	display: flex;
	gap: 5px;
}

.btn-sm {
	padding: 5px 10px;
	font-size: 0.8rem;
}

.status-select {
	width: 100%;
	padding: 5px;
	border: 1px solid #ced4da;
	border-radius: 4px;
}

.estimated-date-input {
	width: 100%;
	padding: 5px;
	border: 1px solid #ced4da;
	border-radius: 4px;
}

.save-date-btn {
	margin-top: 5px;
	padding: 5px 10px;
}

.btn-danger {
	color: white;
	background-color: #dc3545;
	border-color: #dc3545;
}

.btn-danger:hover {
	background-color: #c82333;
	border-color: #c82333;
}

.btn-info {
	color: white;
	background-color: #17a2b8;
	border-color: #17a2b8;
}

.btn-info:hover {
	background-color: #138496;
	border-color: #138496;
}

.btn-warning {
	color: white;
	background-color: #ffc107;
	border-color: #ffc107;
}

.btn-warning:hover {
	background-color: #e0a800;
	border-color: #e0a800;
}


/* USERS.HTML */
.filter-panel {
	margin-bottom: 20px;
	padding: 15px;
	background: #f8f9fa;
	border: 1px solid #dee2e6;
	border-radius: 5px;
}

.form-group {
	margin-right: 20px;
	margin-bottom: 10px;
}
.form-label {
	display: block;
	margin-bottom: 5px;
	font-weight: bold;
}

.order-cost-filter-input {
	width: 100px;
}

.input-group {
	display: flex;
}

.input-group .input-group-text {
	background: #fff;
	border: 1px solid #ced4da;
	border-radius: 0.25rem;
	padding: 0.375rem 0.75rem;
	margin: 0 5px;
}

.table {
	width: 100%;
	border-collapse: collapse;
}

.table th,
.table td {
	padding: 12px;
	vertical-align: middle;
	border-top: 1px solid #dee2e6;
}

.table th {
	background: #f8f9fa;
	font-weight: bold;
}

.table-striped tbody tr:nth-of-type(odd) {
	background-color: #f8f9fa;
}

.table-bordered th,
.table-bordered td {
	border: 1px solid #dee2e6;
}

.btn-group {
	display: flex;
	gap: 5px;
}

.btn-sm {
	padding: 5px 10px;
	font-size: 0.8rem;
}

.status-select {
	width: 100%;
	padding: 5px;
	border: 1px solid #ced4da;
	border-radius: 4px;
}

.estimated-date-input {
	width: 100%;
	padding: 5px;
	border: 1px solid #ced4da;
	border-radius: 4px;
}

.save-date-btn {
	margin-top: 5px;
	padding: 5px 10px;
}

.btn-danger {
	color: white;
	background-color: #dc3545;
	border-color: #dc3545;
}

.btn-danger:hover {
	background-color: #c82333;
	border-color: #c82333;
}

.btn-info {
	color: white;
	background-color: #17a2b8;
	border-color: #17a2b8;
}

.btn-info:hover {
	background-color: #138496;
	border-color: #138496;
}

.btn-warning {
	color: white;
	background-color: #ffc107;
	border-color: #ffc107;
}

.btn-warning:hover {
	background-color: #e0a800;
	border-color: #e0a800;
}



<!-- Cтили для количества в списке товаров -->	
.quantity-form {
	display: inline-block;
	vertical-align: middle;
}

.quantity-input {
	width: 120px;
	border-radius: 5px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.quantity-input input {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.quantity-input button {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	padding: 5px 10px;
}

.quantity-input .form-control {
	font-size: 14px;
	font-weight: bold;
}


/* Коллапсер — плавное раскрытие блока */
.collapsible .collapse {
	overflow: hidden;
	transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1);
	max-height: 0;
	will-change: max-height;
}

.collapsible .collapse.show {
	max-height: 3500px; /* достаточно большое значение для самого большого блока */
	transition: max-height 0.45s cubic-bezier(0.4,0,0.2,1);
}

.collapsible .toggle-collapse {
	margin-bottom: 12px;
	position: relative;
	z-index: 2;
}

.collapsible-accordion {
	background: #fff;
	border-radius: 8px;
	box-shadow: var(--box-shadow);
	margin-bottom: 24px;
	overflow: hidden;
	border: 1px solid #e6ecf0;
	max-width: 90%;
	margin: 0 auto;
}

.collapsible-accordion-settings {
	background: #fff;
	border-radius: 8px;
	box-shadow: var(--box-shadow);
	margin-bottom: 24px;
	overflow: hidden;
	border: 1px solid #e6ecf0;
	max-width: 100%;
	margin: 0 auto;
}

.collapsible-header {
	cursor: pointer;
	user-select: none;
	padding: 18px 24px;
	font-size: 1.2rem;
	font-weight: 500;
	display: flex;
	align-items: center;
	background: linear-gradient(90deg, #f9fafb, #f1f3f7);
	transition: background 0.2s;
}

.collapsible-header:focus {
	outline: none;
	background: #e0e7ef;
}

.collapsible-header:hover {
	background: #f3f6fa;
}

.collapsible-title {
	display: flex;
	align-items: center;
}

.collapsible-arrow {
	font-size: 1.1em;
	margin-right: 14px;
	transition: transform 0.3s cubic-bezier(0.36,0.66,0.04,1);
	color: #3a55d1;
}

.collapsible-header[aria-expanded="true"] .collapsible-arrow {
	transform: rotate(180deg);
}

.collapsible-body {
	overflow: hidden;
	transition: max-height 0.3s cubic-bezier(0.36,0.66,0.04,1);
	max-height: 2048px; /* до рендера js, временно */
	padding: 0 24px 18px 24px;
	will-change: max-height;
}

.collapsible-body.is-collapsed {
	max-height: 0 !important;
	padding-bottom: 0;
	transition: max-height 0.3s cubic-bezier(0.36,0.66,0.04,1), padding 0.2s;
}

/* Добавляем медиа-запрос для маленьких экранов */
/* Стили для адаптивной версии */
@media (max-width: 768px) {
	.main-menu a,
	.shop-menu a,
	.chat-menu a {
		min-width: 100px;
		font-size: clamp(12px, 1.5vw, 14px);
	}
	  
	.main-menu ul,
	.shop-menu ul,
	.chat-menu ul {
		justify-content: center; /* Центрируем пункты меню */
	}

	.table th,
	.table td {
		font-size: 0.9rem;
	}
	
	.btn-sm {
		font-size: 0.7rem;
	}
}


@media (max-width: 600px) {
	.collapsible-header {
		padding: 13px 8px;
		font-size: 1rem;
	}
	.collapsible-body {
		padding-right: 8px;
		padding-left: 8px;
	}
}


@media (max-width: 576px) {
	.table th,
	.table td {
		padding: 8px;
	}
	
	.btn-sm {
		padding: 4px 8px;
	}
}