body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #1e1e2f;
    color: #ffffff;
}

.wrapper {
    display: flex;
}

.sidebar {
    width: 220px;
    background-color: #27293d;
    height: 100vh;
    position: fixed;
}

.sidebar .logo {
    padding: 20px;
    text-align: center;
    background-color: #1f1f2e;
}

.sidebar .logo h2 {
    margin: 0;
    font-size: 24px;
}

.sidebar ul {
    list-style: none;
    padding: 0;
    margin-top: 20px;
}

.sidebar ul li {
    margin-bottom: 10px;
}

.sidebar ul li a {
    color: #ffffff;
    text-decoration: none;
    display: flex;
    align-items: center;
    padding: 15px 20px;
    transition: background-color 0.3s;
}

.sidebar ul li a i {
    margin-right: 10px;
}

.sidebar ul li a:hover {
    background-color: #3a3f51;
}

.main-content {
    margin-left: 220px;
    padding: 20px;
    width: calc(100% - 220px);
}

.content-section {
    display: none;
}

.content-section.active {
    display: block;
}

h2, h3, h4 {
    color: #ffffff;
}

form input, form select {
    width: calc(25% - 10px);
    padding: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    background-color: #2d2d3e;
    border: 1px solid #3a3a4f;
    color: #ffffff;
    border-radius: 4px;
}

form button {
    padding: 10px 20px;
    background-color: #4a90e2;
    border: none;
    color: #ffffff;
    border-radius: 4px;
    cursor: pointer;
}

form button:hover {
    background-color: #357ab8;
}

table {
    width: 100%;
    border-collapse: collapse;
    background-color: #2d2d3e;
    margin-bottom: 20px;
    border-radius: 4px;
    overflow: hidden;
}

table th, table td {
    padding: 12px 15px;
    border-bottom: 1px solid #3a3a4f;
    color: #ffffff;
}

table th {
    background-color: #1f1f2e;
    text-align: left;
}

table tr:hover {
    background-color: #3a3f51;
}

button {
    background-color: #4a90e2;
    color: #ffffff;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #357ab8;
}

#product-materials, #product-processes {
    margin-bottom: 20px;
}

.product-material, .product-process {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.product-material select,
.product-process select {
    width: calc(30% - 10px);
    margin-right: 10px;
}

.product-material input[type="number"],
.product-process input[type="number"] {
    width: calc(20% - 10px);
    margin-right: 10px;
}

.product-material .unit-span,
.product-process .unit-span {
    width: calc(20% - 10px);
    margin-right: 10px;
    color: #ffffff;
}

h3 {
    margin-top: 30px;
}

.action-buttons {
    display: flex;
    gap: 10px;
}

.action-buttons button {
    padding: 5px 10px;
    font-size: 14px;
}

.editable-cell {
    position: relative;
}

/* Стили для полей ввода в таблицах при редактировании */
table td input[type="text"],
table td input[type="number"] {
    width: 100%;
    padding: 5px;
    background-color: #2d2d3e; /* Тёмный фон */
    border: 1px solid #3a3a4f;
    color: #ffffff; /* Белый текст */
    border-radius: 4px;
}

/* Стили для кнопок "Удалить" */
.delete-button, .remove-button {
    background-color: #e74c3c;
    color: #ffffff;
}

.delete-button:hover, .remove-button:hover {
    background-color: #c0392b;
}

/* Выравнивание кнопки "Удалить" в разделе "Добавить изделие" */
.product-material .remove-button,
.product-process .remove-button {
    align-self: center;
    height: 36px; /* Устанавливаем высоту кнопки, чтобы совпадала с полями ввода */
    margin-left: 10px;
}

.hidden {
    display: none;
}

/* Стили для всплывающего уведомления */
#popup-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background-color: rgba(76, 175, 80, 0.9); /* Зеленый фон */
    color: #ffffff;
    padding: 15px 20px;
    border-radius: 5px;
    z-index: 1000;
    transition: opacity 0.5s ease;
}

#popup-notification.hidden {
    opacity: 0;
    visibility: hidden;
}

#popup-notification p {
    margin: 0;
}

/* Стили для формы входа */
.login-wrapper {
    max-width: 400px;
    margin: 100px auto;
    background-color: #27293d;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
}

.login-wrapper h2 {
    margin-bottom: 20px;
}

.login-wrapper input {
    width: calc(100% - 20px);
    padding: 10px;
    margin-bottom: 15px;
    background-color: #2d2d3e;
    border: 1px solid #3a3a4f;
    color: #ffffff;
    border-radius: 4px;
}

.login-wrapper button {
    width: 100%;
    padding: 10px;
    background-color: #4a90e2;
    border: none;
    color: #ffffff;
    border-radius: 4px;
    cursor: pointer;
}

.login-wrapper button:hover {
    background-color: #357ab8;
}

.error {
    color: #e74c3c;
    margin-bottom: 15px;
}

/* Стили для раздела "Расход материала" */
#consumption-form {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

#consumption-form label {
    margin-right: 10px;
}

#consumption-form select,
#consumption-form input {
    margin-right: 10px;
    padding: 10px;
    background-color: #2d2d3e;
    border: 1px solid #3a3a4f;
    color: #ffffff;
    border-radius: 4px;
}

#consumption-results h4 {
    margin-top: 20px;
}

.consumption-table {
    width: 100%;
    border-collapse: collapse;
    background-color: #2d2d3e;
    margin-bottom: 20px;
    border-radius: 4px;
    overflow: hidden;
}

.consumption-table th, .consumption-table td {
    padding: 12px 15px;
    border-bottom: 1px solid #3a3a4f;
    color: #ffffff;
}

.consumption-table th {
    background-color: #1f1f2e;
    text-align: left;
}

.consumption-table tr:hover {
    background-color: #3a3f51;
}