/* Дополнительные стили для улучшения адаптивности таблиц */

/* Исправление выравнивания заголовков и столбцов таблиц */
table {
  table-layout: fixed !important;
  width: 100% !important;
}

/* Синхронизация ширины заголовков и столбцов */
table thead th,
table tbody td {
  box-sizing: border-box;
}

/* Исправление переноса текста в заголовках */
table thead th {
  white-space: normal !important;
  word-wrap: break-word !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  hyphens: auto !important;
  line-height: 1.4 !important;
  vertical-align: top !important;
  padding: 0.75rem 0.5rem !important;
  min-height: 2.5rem !important;
}

/* Адаптивные стили для заголовков на мобильных */
@media (max-width: 768px) {
  table thead th {
    padding: 1rem 0.5rem !important;
    font-size: 1.2rem !important;
    line-height: 1.3 !important;
    min-height: 3rem !important;
  }
}

@media (max-width: 576px) {
  table thead th {
    padding: 0.8rem 0.4rem !important;
    font-size: 1.1rem !important;
    line-height: 1.2 !important;
    min-height: 2.8rem !important;
  }
}

/* Дополнительные стили для точного выравнивания */
table thead {
  width: 100%;
}

table tbody {
  width: 100%;
}

/* Обеспечиваем одинаковую ширину для соответствующих столбцов */
table colgroup col {
  width: auto;
}

/* Стили для принудительного выравнивания ширины */
.table-header-sync {
  table-layout: fixed;
}

.table-header-sync thead th,
.table-header-sync tbody td {
  width: auto;
  min-width: 0;
  max-width: none;
}

/* Стили для автоматической синхронизации ширины столбцов */
.table-auto-sync {
  table-layout: auto;
}

.table-auto-sync thead th,
.table-auto-sync tbody td {
  width: auto;
}

/* Стили для таблиц с равномерным распределением ширины */
.table-equal-width {
  table-layout: fixed;
}

.table-equal-width thead th,
.table-equal-width tbody td {
  width: calc(100% / var(--column-count, 1));
}

/* Дополнительные стили для правильного переноса текста в заголовках */
table thead th {
  text-align: center;
  font-weight: 600;
}

/* Стили для заголовков с принудительным переносом */
.table-header-wrap th {
  white-space: normal !important;
  word-wrap: break-word !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  hyphens: auto !important;
  line-height: 1.3 !important;
  padding: 0.8rem 0.5rem !important;
  min-height: 3rem !important;
}

/* Стили для заголовков без переноса (для коротких заголовков) */
.table-header-nowrap th {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Принудительная адаптивность для всех таблиц */
@media (max-width: 1200px) {
  /* Принудительный горизонтальный скролл для всех таблиц */
  table {
    overflow-x: auto !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Восстанавливаем табличную структуру */
  table tbody,
  table thead,
  table tfoot {
    display: table !important;
    width: 100% !important;
    min-width: max-content !important;
  }
  
  table tr {
    display: table-row !important;
  }
  
  table th,
  table td {
    display: table-cell !important;
    white-space: nowrap !important;
    min-width: auto !important;
  }
}

/* Стили для таблиц с большим количеством колонок */
.table-wide {
  min-width: 100%;
}

.table-wide th,
.table-wide td {
  white-space: nowrap;
  min-width: 120px;
}

@media (max-width: 768px) {
  .table-wide th,
  .table-wide td {
    white-space: normal;
    min-width: auto;
    font-size: 1.4rem;
    padding: 1.1rem 0.6rem;
  }
}

/* Стили для таблиц с длинным текстом */
.table-text-long td {
  word-break: break-word;
  hyphens: auto;
  max-width: 200px;
}

/* Специальные стили для заголовков с длинным текстом */
.table-text-long th {
  white-space: normal !important;
  word-wrap: break-word !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  hyphens: auto !important;
  line-height: 1.3 !important;
  min-height: 3rem !important;
  max-width: 200px !important;
}

@media (max-width: 768px) {
  .table-text-long td {
    max-width: 150px;
    font-size: 1.4rem;
  }
}

@media (max-width: 576px) {
  .table-text-long td {
    max-width: 100px;
    font-size: 1.25rem;
  }
}

/* Стили для таблиц с числовыми данными */
.table-numeric td {
  text-align: right;
  font-family: 'Courier New', monospace;
}

@media (max-width: 768px) {
  .table-numeric td {
    text-align: center;
    font-size: 1.4rem;
  }
}

/* Стили для таблиц с изображениями */
.table-images img {
  max-width: 100px;
  height: auto;
}

@media (max-width: 768px) {
  .table-images img {
    max-width: 60px;
  }
}

@media (max-width: 576px) {
  .table-images img {
    max-width: 40px;
  }
}

/* Стили для таблиц с кнопками действий */
.table-actions {
  white-space: nowrap;
}

.table-actions .btn {
  margin: 2px;
  padding: 0.25rem 0.5rem;
  font-size: 0.8rem;
}

@media (max-width: 768px) {
  .table-actions {
    white-space: normal;
  }
  
  .table-actions .btn {
    display: block;
    width: 100%;
    margin: 2px 0;
  }
}

/* Стили для таблиц с чекбоксами */
.table-checkbox {
  width: 40px;
  text-align: center;
}

@media (max-width: 768px) {
  .table-checkbox {
    width: 30px;
  }
}

/* Стили для таблиц с датами */
.table-date {
  white-space: nowrap;
  min-width: 120px;
}

@media (max-width: 768px) {
  .table-date {
    white-space: normal;
    min-width: auto;
    font-size: 0.8rem;
  }
}

/* Стили для таблиц с статусами */
.table-status {
  text-align: center;
  min-width: 80px;
}

.table-status .badge {
  font-size: 0.7rem;
  padding: 0.25rem 0.5rem;
}

@media (max-width: 768px) {
  .table-status {
    min-width: auto;
  }
  
  .table-status .badge {
    font-size: 0.6rem;
    padding: 0.2rem 0.4rem;
  }
}

/* Стили для таблиц с ссылками */
.table-link a {
  color: #007bff;
  text-decoration: none;
}

.table-link a:hover {
  color: #0056b3;
  text-decoration: underline;
}

@media (max-width: 768px) {
  .table-link a {
    font-size: 0.8rem;
  }
}

/* Стили для таблиц с иконками */
.table-icon {
  text-align: center;
  width: 40px;
}

.table-icon i {
  font-size: 1.2rem;
}

@media (max-width: 768px) {
  .table-icon {
    width: 30px;
  }
  
  .table-icon i {
    font-size: 1rem;
  }
}

/* Стили для таблиц с прогресс-барами */
.table-progress {
  min-width: 100px;
}

.table-progress .progress {
  height: 20px;
  margin: 0;
}

@media (max-width: 768px) {
  .table-progress {
    min-width: auto;
  }
  
  .table-progress .progress {
    height: 15px;
  }
}

/* Стили для таблиц с аватарами */
.table-avatar {
  width: 50px;
  text-align: center;
}

.table-avatar img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

@media (max-width: 768px) {
  .table-avatar {
    width: 40px;
  }
  
  .table-avatar img {
    width: 30px;
    height: 30px;
  }
}

/* Стили для таблиц с рейтингами */
.table-rating {
  text-align: center;
  min-width: 80px;
}

.table-rating .stars {
  color: #ffc107;
  font-size: 1rem;
}

@media (max-width: 768px) {
  .table-rating {
    min-width: auto;
  }
  
  .table-rating .stars {
    font-size: 0.8rem;
  }
}

/* Стили для таблиц с тегами */
.table-tags {
  min-width: 120px;
}

.table-tags .tag {
  display: inline-block;
  background: #e9ecef;
  color: #495057;
  padding: 0.2rem 0.4rem;
  margin: 0.1rem;
  border-radius: 0.25rem;
  font-size: 0.7rem;
}

@media (max-width: 768px) {
  .table-tags {
    min-width: auto;
  }
  
  .table-tags .tag {
    font-size: 0.6rem;
    padding: 0.1rem 0.3rem;
  }
}

/* Стили для таблиц с выпадающими списками */
.table-dropdown {
  min-width: 100px;
}

.table-dropdown .dropdown-toggle {
  font-size: 0.8rem;
  padding: 0.25rem 0.5rem;
}

@media (max-width: 768px) {
  .table-dropdown {
    min-width: auto;
  }
  
  .table-dropdown .dropdown-toggle {
    font-size: 0.7rem;
    padding: 0.2rem 0.4rem;
  }
}

/* Стили для таблиц с поиском */
.table-search {
  margin-bottom: 1rem;
}

.table-search input {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
}

@media (max-width: 768px) {
  .table-search input {
    font-size: 0.8rem;
    padding: 0.4rem;
  }
}

/* Стили для таблиц с пагинацией */
.table-pagination {
  margin-top: 1rem;
  text-align: center;
}

.table-pagination .pagination {
  justify-content: center;
}

@media (max-width: 768px) {
  .table-pagination .pagination {
    font-size: 0.8rem;
  }
  
  .table-pagination .page-link {
    padding: 0.3rem 0.5rem;
  }
}

/* Стили для таблиц с сортировкой */
.table-sortable th {
  cursor: pointer;
  user-select: none;
  position: relative;
}

.table-sortable th:hover {
  background-color: #e9ecef;
}

.table-sortable th::after {
  content: '↕';
  position: absolute;
  right: 8px;
  opacity: 0.5;
}

.table-sortable th.sort-asc::after {
  content: '↑';
  opacity: 1;
}

.table-sortable th.sort-desc::after {
  content: '↓';
  opacity: 1;
}

@media (max-width: 768px) {
  .table-sortable th::after {
    font-size: 0.8rem;
    right: 4px;
  }
}