$border-color: #ddd;
$light-bg: #f9f9f9;
$header-bg: #f4f4f4;
$row-bg: #ffffff;
$row-hover-bg: #f1f1f1;
$text-color: #333;
$button-bg: #2271b1;
$button-hover-bg: #1e5a8c;
$error-bg: #f44336;
$delete-bg: #d32f2f;
$delete-hover-bg: #b71c1c;
$padding-small: 4px 6px;
$padding-medium: 8px 12px;

.table-container {
  margin-top: 20px;
  border: 1px solid $border-color;
  border-radius: 4px;
  background-color: $light-bg;

  .table-header, .table-row {
    display: flex;
    padding: 6px;
    border-bottom: 1px solid $border-color;
  }

  .table-header {
    background-color: $header-bg;
    color: $text-color;
    font-weight: bold;
  }

  .table-row {
    background-color: $row-bg;
    transition: background-color 0.3s ease;

    &:hover {
      background-color: $row-hover-bg;
    }

    .table-cell {
      flex: 1;
      text-align: center;
      padding: $padding-small;
      border-left: 1px solid $border-color;

      &:first-child {
        border-left: none; // Убираем границу слева у первой ячейки
      }
    }
  }

  .table-cell {
    font-size: 12px;
    color: $text-color;
  }
}

.filters {
  margin-bottom: 20px;
  display: flex;
  justify-content: flex-start;
  align-items: center;

  input, select, button {
    padding: $padding-medium;
    margin-right: 8px;
    font-size: 14px;
  }

  button {
    background-color: $button-bg;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    padding: 8px 15px;

    &:hover {
      background-color: $button-hover-bg;
    }
  }
}

.error-message {
  background-color: $error-bg;
  color: white;
  padding: 10px;
  margin-bottom: 20px;
}

.action-button {
  padding: $padding-medium;
  margin: 8px;
  background-color: $button-bg;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  font-size: 14px;
  transition: background-color 0.3s ease;

  &:hover {
    background-color: $button-hover-bg;
  }

  &.stop {
    margin-right: 10px;
  }

  &.delete {
    background-color: $delete-bg;

    &:hover {
      background-color: $delete-hover-bg;
    }
  }
}

.pagination {
  margin-top: 20px;
  text-align: center;

  a {
    margin: 0 5px;
    text-decoration: none;
    color: $button-bg;
    font-weight: bold;

    &:hover {
      color: $button-hover-bg;
    }
  }
}


.table-container {
  margin-top: 20px;
  border: 1px solid #ddd; /* Легкая граница для контейнера */
  border-radius: 4px;
  background-color: #f9f9f9; /* Светлый фон для контейнера */
}

.table-header, .table-row {
  display: flex;
  padding: 6px; /* Меньше отступов для еще более компактного вида */
  border-bottom: 1px solid #ddd; /* Легкие разделители между строками */
}

.table-header {
  background-color: #f4f4f4; /* Серый фон для заголовка */
  color: #333; /* Темный цвет текста */
  font-weight: bold; /* Жирное начертание текста */
}

.table-row {
  background-color: #ffffff; /* Белый фон для строк */
  transition: background-color 0.3s ease; /* Плавное изменение фона при наведении */
}

.table-row:hover {
  background-color: #f1f1f1; /* Легкий серый фон при наведении */
}

.table-header .table-cell, .table-row .table-cell {
  flex: 1;
  text-align: center;
  padding: 4px 6px; /* Меньше отступов для компактности */
  border-left: 1px solid #ddd; /* Линии между ячейками */
}

.table-header .table-cell:first-child, .table-row .table-cell:first-child {
  border-left: none; /* Убираем границу слева у первой ячейки */
}

.table-cell {
  font-size: 12px; /* Уменьшаем размер шрифта для компактности */
  color: #333; /* Темный текст для контраста */
}

/* Стили для фильтров */
.filters {
  margin-bottom: 20px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.filters input, .filters select, .filters button {
  padding: 8px 12px;
  margin-right: 8px;
  font-size: 14px; /* Уменьшаем размер шрифта для фильтров */
}

.filters button {
  background-color: #2271b1; /* Синий цвет кнопки фильтров */
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  padding: 8px 15px;
}

.filters button:hover {
  background-color: #1e5a8c; /* Темный синий при наведении */
}

.error-message {
  color: red;
  font-size: 14px;
  margin-top: 5px;
  margin-bottom: 5px;
}

/* Стиль для кнопок */
.action-button {
  padding: 8px 12px;
  margin: 8px;
  background-color: #2271b1;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  font-size: 14px; /* Размер шрифта для кнопок */
  transition: background-color 0.3s ease; /* Плавное изменение фона кнопок при наведении */
}

.action-button:hover {
  background-color: #1e5a8c; /* Цвет фона при наведении */
}

/* Специальные стили для кнопок "Остановить" и "Удалить" */
.stop {
  margin-right: 10px;
}

.delete {
  background-color: #d32f2f; /* Красный фон для кнопки "Удалить" */
}

.delete:hover {
  background-color: #b71c1c; /* Темный красный при наведении */
}

/* Пагинация */
.pagination {
  margin-top: 20px;
  text-align: center;
}

.pagination a {
  margin: 0 5px;
  text-decoration: none;
  color: #2271b1;
  font-weight: bold;
}

.pagination a:hover {
  color: #1e5a8c;
}

/* Отступы для ячеек таблицы */
.table-row {
  border-top: 1px solid #ddd;
}