/* ==============================
   Контейнер
============================== */
.table-responsive {
  width: 100%;
  margin: 2rem 0;
  overflow-x: auto; /* для ПК, на мобилках переопределим */
}

/* ==============================
   Таблица
============================== */
.table-responsive .table {
  width: 100%;
  border-collapse: collapse;
  font-family: Arial, sans-serif;
  font-size: 0.95rem;
  text-align: left;
  min-width: 650px;
  background: #ffffff;
}

/* ==============================
   Заголовок таблицы
============================== */
.table-responsive .table thead th {
  background-color: #e8f0fd; /* светло-синий фон */
  color: #0a3d8f; /* деловой синий текст */
  font-weight: 600;
  padding: 14px 16px;
  border-bottom: 2px solid #c2d1eb;
}

/* ==============================
   Первый столбец — якорный
============================== */
.table-responsive .table tbody td:first-child {
  font-weight: 600;
  color: #0a3d8f; /* деловой синий акцент */
  width: 22%;
  white-space: nowrap; /* запрещаем перенос для коротких слов */
}

/* ==============================
   Ячейки
============================== */
.table-responsive .table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid #f0f0f0;
  vertical-align: top;
  color: #333;
  word-break: normal;
  overflow-wrap: normal;
  white-space: normal;
}

/* ==============================
   Чередование строк
============================== */
.table-responsive .table tbody tr:nth-child(even) {
  background-color: #f7faff; /* очень мягкий синий */
}

/* ==============================
   Hover
============================== */
.table-responsive .table tbody tr:hover {
  background-color: #e2ecfd;
  transition: 0.2s ease;
}

/* ==============================
   Галочки и прочерк
============================== */
.table-responsive .yes {
  color: #0a3d8f; /* синий вместо зеленого */
  font-weight: 600;
}

.table-responsive .no {
  color: #b5b5b5;
}

/* ==============================
   Мягкий акцент для 3-й колонки (если нужно)
============================== */
.table-responsive .table th:nth-child(3),
.table-responsive .table td:nth-child(3) {
  background-color: #f0f4fd; /* нежный синий фон */
}

/* ==============================
   Верхняя цветная полоска
============================== */
.table-responsive::before {
  content: "";
  display: block;
  height: 4px;
  background: linear-gradient(to right, #0a3d8f, #0c4fa0);
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

/* ==============================
   Мобильная адаптивность
============================== */
@media screen and (max-width: 768px) {

  .table-responsive {
    overflow-x: visible; /* убираем скролл */
  }

  .table-responsive .table {
    min-width: 100%;
  }

  .table-responsive .table thead {
    display: none;
  }

  .table-responsive .table,
  .table-responsive .table tbody,
  .table-responsive .table tr,
  .table-responsive .table td {
    display: block;
    width: 100%;
  }

  .table-responsive .table tr {
    margin-bottom: 1.2rem;
    background: #ffffff;
    border: 1px solid #eaeaea;
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
  }

  .table-responsive .table tbody td {
    border: none;
    padding: 8px 6px;
    position: relative;
  }

  .table-responsive .table tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    display: block;
    margin-bottom: 4px;
    color: #0a3d8f;
    font-size: 0.85rem;
  }

  /* убираем акцент 3-й колонки */
  .table-responsive .table th:nth-child(3),
  .table-responsive .table td:nth-child(3) {
    background-color: transparent;
  }

}