/* Общие стили */
body {
    font-family: Arial, sans-serif;
    margin: 20px;
    background-color: #f4f4f9;
    color: #333;
}

/* Заголовок */
h1 {
    text-align: center;
    color: #0073aa;
}

/* Форма загрузки */
form#excel-upload-form {
    margin: 20px auto;
    padding: 20px;
    border: 1px solid #ddd;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    max-width: 500px;
    text-align: center;
}

form#excel-upload-form input[type="file"] {
    margin-bottom: 10px;
}

form#excel-upload-form input[type="submit"] {
    padding: 10px 20px;
    background-color: #0073aa;
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

form#excel-upload-form input[type="submit"]:hover {
    background-color: #005177;
}

/* Таблица данных */
table#order-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

table#order-table th,
table#order-table td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: center;
}

table#order-table th {
    background-color: #0073aa;
    color: #fff;
    text-transform: uppercase;
}

table#order-table tr:nth-child(even) {
    background-color: #f9f9f9;
}

table#order-table tr.scanned {
    background-color: #dff0d8;
    color: #3c763d;
}

/* Стиль кнопки внутри таблицы */
table#order-table button.save-btn {
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 50%;
    width: 2px;
    height: 2px;
    font-size: 12px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    padding: 0;
}

table#order-table button.save-btn:hover {
    background-color: #218838;
}

/* Кнопка с классом 'edit-container' для совместимости с таблицей */
table#order-table .edit-container button {
    background-color: #0073aa; /* Цвет фона кнопки */
    color: white; /* Цвет текста кнопки */
    border: 1px solid #0056b3; /* Цвет границы */
    padding: 5px 10px; /* Размер кнопки */
    border-radius: 3px; /* Скругленные углы */
    cursor: pointer;
}

table#order-table .edit-container button:hover {
    background-color: #0056b3; /* Цвет фона при наведении */
    border-color: #004085; /* Цвет границы при наведении */
}

/* Кнопки выбора даты */
.date-button {
    margin: 5px;
    padding: 10px 20px;
    background-color: #0073aa;
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    display: inline-block;
}

.date-button:hover {
    background-color: #005177;
}

/* Поле ввода сканирования */
#scan-input {
    display: block;
    margin: 20px auto;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 3px;
    width: 80%;
    max-width: 500px;
}

button[onclick="scanOrder()"] {
    display: block;
    margin: 10px auto;
    padding: 10px 20px;
    background-color: #28a745;
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

button[onclick="scanOrder()"]:hover {
    background-color: #218838;
}

/* Текущая дата и время */
#current-time {
    text-align: center;
    margin: 20px;
    font-size: 16px;
    font-weight: bold;
    color: #555;
}

/* далее кнопка идет */
/* Стили для контейнера */
.edit-container {
  position: relative;
  display: inline-block;
}

/* Поле ввода */
.edit-field {
  padding-right: 30px; /* Оставляем место для кнопки */
  padding: 5px;
  font-size: 14px;
}

/* Кнопка (птичка) */
.save-btn {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 12px;
  display: none; /* Скрыта по умолчанию */
  cursor: pointer;
  justify-content: center;
  align-items: center;
}

.save-btn:hover {
  background-color: #218838;
}