/* Общие стили для таблицы */
table.table-bordered {
    width: 100%;
    border-collapse: collapse;
}

thead.thead-light th {
    background-color: #f8f9fa; /* Светло-серый */
    text-align: center;
    font-weight: bold;
    padding: 10px;
}

/* Стили для строк таблицы */
table tbody tr td {
    padding: 8px;
    text-align: center;
    vertical-align: middle;
    border: 1px solid #dee2e6;
}

/* Цветовые схемы для продуктов */
.product-oil {
    background-color: #ccffcc; /* Светло-зеленый для масла */
}

.product-flour {
    background-color: #ffcccc; /* Светло-красный для муки */
}

/* Поле для ввода количества */
.face-count {
    width: 60px;
    text-align: center;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Поле для ввода комментария */
.comment-field {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-top: 5px;
}

/* Скрытые строки для комментариев */
.comment-row {
    display: none;
}

/* Стиль для чекбоксов */
.additional-place-checkbox {
    transform: scale(1.5); /* Увеличиваем размер чекбокса */
}

/* Отступы и центрирование для кнопок */
button {
    margin-top: 20px;
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    border-radius: 4px;
    background-color: #28a745; /* Зелёный */
    color: #fff;
    cursor: pointer;
}

button:hover {
    background-color: #218838;
}

/* Для выравнивания таблицы */
.container {
    margin-top: 20px;
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}
.sku-checkbox {
    transform: scale(2); /* Увеличение размера чекбокса */
}

.price-input {
    width: 100%;
    text-align: right;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Стили для подсказок в select */
select option[disabled],
select option[value=""] {
    color: #a9a9a9; /* Серый цвет */
    opacity: 0.7; /* Легкая прозрачность */
}

/* Применение цвета для плейсхолдера, если select не выбран */
select:invalid {
    color: #a9a9a9; /* Серый цвет плейсхолдера */
}

/* Цвет для выбранного значения */
select {
    color: #000; /* Основной текст - черный */
}

/* Управление шириной столбцов */
.table th:first-child,
.table td:first-child {
    width: 50%;
    text-align: left; /* Первый столбец (Бренд) занимает половину таблицы */
}

.table th:nth-child(2),
.table td:nth-child(2) {
    width: 30%; /* Второй столбец (Кол-во фейсов) */
}

.table th:nth-child(3),
.table td:nth-child(3) {
    width: 20%; /* Третий столбец (Доп. место) */
}


/* Выравнивание заголовков таблицы по центру */
.table th {
    text-align: center; /* Горизонтальное выравнивание текста */
    vertical-align: middle; /* Вертикальное выравнивание текста */
}