/* Стили для страницы входа */
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Занимает всю высоту экрана */
    background-color: #f0f2f5;
}

.login-box {
    background-color: white;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 400px;
    text-align: center;
}

.login-box h2 {
    margin-bottom: 20px;
    font-size: 24px;
    color: #333;
}

.form-group {
    margin-bottom: 20px;
    text-align: left;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    color: #555;
}

.form-group input {
    width: 100%;
    padding: 10px;
    font-size: 14px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-sizing: border-box;
}

.form-group input:focus {
    border-color: #007bff;
    outline: none;
}

.btn-login {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    color: white;
    background-color: #007bff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn-login:hover {
    background-color: #0056b3;
}

/* Раскраска по статусу заявки */
.status-new { background-color: white; }
.status-delivery { background-color: yellow; }
.status-delivered { background-color: lightgreen; }

/* Основные стили */
body {
	font-family:'PT Sans', sans-serif;
	margin-top: 50px; /* Отступ для меню */
    padding: 3px;
}
table {
	width: 100%;
	border-collapse: collapse;
}
th, td {
	border: 1px solid #ddd;
	padding: 3px;
	text-align: center;
}
th {
	background-color: #f2f2f2;
}
h1 {
	padding: 5px;
	text-align: center;
}

/* Стили для flashed-сообщений */
.flashed-messages {
	position: fixed;
	top: 20px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1001;
	text-align: center;
}
.alert {
	padding: 15px 20px;
	margin-bottom: 10px;
	border: 1px solid transparent;
	border-radius: 5px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	animation: slideDown 0.5s ease-out;
	font-family: Arial, sans-serif;
	font-size: 14px;
	display: inline-block;
	max-width: 90%;
	background-color: #fff;
}
.alert-success {
	color: #155724;
	background-color: #d4edda;
	border-color: #c3e6cb;
}
.alert-error {
	color: #721c24;
	background-color: #f8d7da;
	border-color: #f5c6cb;
}
.alert-info {
	color: #0c5460;
	background-color: #d1ecf1;
	border-color: #bee5eb;
}
.alert-warning {
	color: #856404;
	background-color: #fff3cd;
	border-color: #ffeeba;
}
.alert-message {
	color: #0c5460;
	background-color: #d1ecf1;
	border-color: #bee5eb;
}

/* Анимация появления сообщений */
@keyframes slideDown {
	from {
		transform: translate(-50%, -100%);
		opacity: 0;
	}
	to {
		transform: translate(-50%, 0);
		opacity: 1;
	}
}

/* Кнопка закрытия */
.close-btn {
	background: none;
	border: none;
	font-size: 18px;
	cursor: pointer;
	margin-left: 10px;
	color: inherit;
}
.close-btn:hover {
	opacity: 0.8;
}

/* Стили для главного меню */
.main-menu {
	background-color: #333;
	padding: 10px;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1000;
}
.main-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
}
.main-menu ul li {
	margin-right: 20px;
}
.main-menu ul li a {
	color: white;
	text-decoration: none;
	font-size: 16px;
	display: flex;
	align-items: center;
}
.main-menu ul li a i {
	margin-right: 8px;
}
.main-menu ul li a:hover {
	color: #f0f0f0;
}

/* cyrillic-ext */
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/css/fontawesome.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/css/fontawesome.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/css/fontawesome.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/css/fontawesome.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Стили для кнопок и ссылок */
.btn-action {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    font-size: 14px;
    color: white;
    background-color: #007bff;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn-action i {
    margin-right: 8px;
}

.btn-action:hover {
    background-color: #0056b3;
}

.btn-delete {
    background-color: #dc3545;
}

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

.actions {
    margin-bottom: 20px;
}

/* Стили для страницы склада */
.warehouse-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.product-column {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.product-column h3 {
    margin-bottom: 15px;
    font-size: 18px;
    color: #333;
}

.quantity-cell {
    padding: 15px;
    background-color: #f8f9fa;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.quantity-cell:hover {
    background-color: #e9ecef;
}

/* Стили для popup */
.popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.popup-content {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 300px;
    text-align: center;
}

.popup-content h3 {
    margin-bottom: 15px;
    font-size: 20px;
    color: #333;
}

.popup-content label {
    display: block;
    margin-bottom: 10px;
    font-size: 14px;
    color: #555;
}

.popup-content input {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    font-size: 14px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-sizing: border-box;
}

.popup-content button {
    margin: 5px;
}

/* Стили для toggle switch */
.toggle-switch-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: #007bff;
}

input:checked + .slider:before {
    transform: translateX(26px);
}

.toggle-label {
    margin-left: 10px;
    font-size: 16px;
    color: #333;
}

/* Стили для контейнера формы редактирования */
.edit-order-container {
    display: flex;
    justify-content: center;
    padding: 20px;
    background-color: #f0f2f5;
}

.edit-order-box {
    background-color: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 500px;
}

.edit-order-box h1 {
    margin-bottom: 10px;
    font-size: 24px;
    color: #333;
    text-align: center;
}

/* Стили для формы */
.form-group {
    margin-bottom: 5px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    color: #555;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 10px;
    font-size: 14px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-sizing: border-box;
}

.form-group textarea {
    resize: vertical;
    min-height: 100px;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: #007bff;
    outline: none;
}

/* Стили для строки продукта */
.product-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.product-row label {
    margin-bottom: 0;
    flex: 1;
}

.product-row input {
    flex: 2;
}

/* Стили для кнопки "Сохранить" */
.btn-action-save {
	align: center;
    display: inline-flex;
    align-items: center;
    padding: 7px 17px;
    font-size: 16px;
    color: white;
    background-color: #007bff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn-action-save i {
    margin-right: 8px;
}

.btn-action-save:hover {
    background-color: #0056b3;
}

/* Стили для подсветки ячеек */
.highlight-green {
    background-color: #d4edda; /* Зелёный фон */
    color: #155724; /* Тёмно-зелёный текст */
}

.highlight-red {
    background-color: #f8d7da; /* Красный фон */
    color: #721c24; /* Тёмно-красный текст */
}

/* Стили для модального окна */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 400px;
    text-align: center;
}

.modal-content h2 {
    margin-bottom: 20px;
    font-size: 20px;
    color: #333;
}

.modal-content select {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    font-size: 14px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-sizing: border-box;
}

.modal-content .close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    cursor: pointer;
}

.modal-content .close:hover {
    color: #007bff;
}

/* Стили для кнопок в модальном окне */
.modal-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.btn-cancel {
    background-color: #dc3545;
}

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