/* ========== СТИЛИ ДЛЯ ТАБЛИЦ В КОНТЕНТЕ ========== */

/* Таблицы внутри контента статей */
.article-single__content table,
.case-single__content table,
.tutorial-single__content table,
.review-single__content table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--spacing-xl) 0;
    background-color: rgba(36, 45, 58, 0.6);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Заголовки таблиц */
.article-single__content table th,
.case-single__content table th,
.tutorial-single__content table th,
.review-single__content table th {
    background: linear-gradient(135deg, rgba(74, 159, 216, 0.25), rgba(76, 175, 80, 0.2));
    color: var(--color-text-primary);
    font-weight: 600;
    text-align: left;
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 2px solid rgba(74, 159, 216, 0.4);
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Ячейки таблиц */
.article-single__content table td,
.case-single__content table td,
.tutorial-single__content table td,
.review-single__content table td {
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
}

/* Чередующиеся строки (зебра-эффект) */
.article-single__content table tbody tr:nth-child(even),
.case-single__content table tbody tr:nth-child(even),
.tutorial-single__content table tbody tr:nth-child(even),
.review-single__content table tbody tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.02);
}

/* Ховер эффект для строк */
.article-single__content table tbody tr:hover,
.case-single__content table tbody tr:hover,
.tutorial-single__content table tbody tr:hover,
.review-single__content table tbody tr:hover {
    background-color: rgba(74, 159, 216, 0.08);
    transition: background-color var(--duration-normal) var(--ease-standard);
}

/* Последняя строка без нижней границы */
.article-single__content table tbody tr:last-child td,
.case-single__content table tbody tr:last-child td,
.tutorial-single__content table tbody tr:last-child td,
.review-single__content table tbody tr:last-child td {
    border-bottom: none;
}

/* Вертикальные границы между ячейками (опционально) */
.article-single__content table th:not(:last-child),
.article-single__content table td:not(:last-child),
.case-single__content table th:not(:last-child),
.case-single__content table td:not(:last-child),
.tutorial-single__content table th:not(:last-child),
.tutorial-single__content table td:not(:last-child),
.review-single__content table th:not(:last-child),
.review-single__content table td:not(:last-child) {
    border-right: 1px solid rgba(255, 255, 255, 0.05);
}

/* Первая колонка с выделением (если это заголовки строк) */
.article-single__content table tbody th,
.case-single__content table tbody th,
.tutorial-single__content table tbody th,
.review-single__content table tbody th {
    font-weight: 600;
    color: var(--color-text-primary);
    background-color: rgba(74, 159, 216, 0.08);
}

/* Адаптивность для маленьких экранов */
@media (max-width: 768px) {
    .article-single__content table,
    .case-single__content table,
    .tutorial-single__content table,
    .review-single__content table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: var(--spacing-lg) calc(var(--spacing-lg) * -1);
        width: calc(100% + var(--spacing-lg) * 2);
        border-radius: 0;
    }

    .article-single__content table th,
    .article-single__content table td,
    .case-single__content table th,
    .case-single__content table td,
    .tutorial-single__content table th,
    .tutorial-single__content table td,
    .review-single__content table th,
    .review-single__content table td {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: var(--font-size-sm);
        white-space: nowrap;
    }
}

/* Скроллбар для таблиц на мобильных */
@media (max-width: 768px) {
    .article-single__content table::-webkit-scrollbar,
    .case-single__content table::-webkit-scrollbar,
    .tutorial-single__content table::-webkit-scrollbar,
    .review-single__content table::-webkit-scrollbar {
        height: 8px;
    }

    .article-single__content table::-webkit-scrollbar-track,
    .case-single__content table::-webkit-scrollbar-track,
    .tutorial-single__content table::-webkit-scrollbar-track,
    .review-single__content table::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.05);
        border-radius: var(--radius-sm);
    }

    .article-single__content table::-webkit-scrollbar-thumb,
    .case-single__content table::-webkit-scrollbar-thumb,
    .tutorial-single__content table::-webkit-scrollbar-thumb,
    .review-single__content table::-webkit-scrollbar-thumb {
        background: rgba(74, 159, 216, 0.4);
        border-radius: var(--radius-sm);
    }

    .article-single__content table::-webkit-scrollbar-thumb:hover,
    .case-single__content table::-webkit-scrollbar-thumb:hover,
    .tutorial-single__content table::-webkit-scrollbar-thumb:hover,
    .review-single__content table::-webkit-scrollbar-thumb:hover {
        background: rgba(74, 159, 216, 0.6);
    }
}

/* Стили для caption (подпись таблицы) */
.article-single__content table caption,
.case-single__content table caption,
.tutorial-single__content table caption,
.review-single__content table caption {
    caption-side: top;
    padding: var(--spacing-md);
    font-weight: 600;
    color: var(--color-text-primary);
    text-align: left;
    font-size: var(--font-size-md);
}

/* Стили для ссылок внутри таблиц */
.article-single__content table a,
.case-single__content table a,
.tutorial-single__content table a,
.review-single__content table a {
    color: var(--color-accent);
    text-decoration: underline;
    text-decoration-color: rgba(74, 159, 216, 0.3);
    transition: all var(--duration-fast) var(--ease-standard);
}

.article-single__content table a:hover,
.case-single__content table a:hover,
.tutorial-single__content table a:hover,
.review-single__content table a:hover {
    color: var(--color-accent-hover);
    text-decoration-color: var(--color-accent-hover);
}

/* Стили для кода внутри таблиц */
.article-single__content table code,
.case-single__content table code,
.tutorial-single__content table code,
.review-single__content table code {
    background-color: rgba(0, 0, 0, 0.3);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.9em;
    color: rgba(139, 93, 255, 0.9);
}
/* ========== АДАПТИВНАЯ ТАБЛИЦА: Карточки на мобильных ========== */
@media (max-width: 767px) {
  .article-single__content table,
  .case-single__content table,
  .tutorial-single__content table,
  .review-single__content table {
    display: flex !important;
    flex-direction: column !important;
    overflow-x: visible !important;
    width: 100% !important;
    margin: var(--spacing-lg) 0 !important;
    border-radius: var(--radius-md) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  }
  
  /* Каждая строка — отдельная карточка */
  .article-single__content table tbody tr,
  .case-single__content table tbody tr,
  .tutorial__content table tbody tr,
  .review-single__content table tbody tr {
    display: flex !important;
    flex-direction: column !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: var(--spacing-md) !important;
    margin-bottom: var(--spacing-sm) !important;
    background: rgba(36, 45, 58, 0.6) !important;
    border-radius: var(--radius-sm) !important;
  }
  
  .article-single__content table tbody tr:last-child,
  .case-single__content table tbody tr:last-child,
  .tutorial-single__content table tbody tr:last-child,
  .review-single__content table tbody tr:last-child {
    border-bottom: none !important;
    margin-bottom: 0 !important;
  }
  
  /* Заголовки колонок — как метки */
  .article-single__content table th,
  .case-single__content table th,
  .tutorial-single__content table th,
  .review-single__content table th {
    display: block !important;
    padding: var(--spacing-xs) var(--spacing-sm) !important;
    font-size: var(--font-size-xs) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    opacity: 0.7 !important;
    border: none !important;
    background: transparent !important;
  }
  
  /* Ячейки — как значения */
  .article-single__content table td,
  .case-single__content table td,
  .tutorial-single__content table td,
  .review-single__content table td {
    display: block !important;
    padding: var(--spacing-xs) var(--spacing-sm) !important;
    border: none !important;
    font-size: var(--font-size-sm) !important;
    white-space: normal !important;
  }
  
  /* Первая колонка (Критерий) — жирным */
  .article-single__content table td:first-child,
  .case-single__content table td:first-child,
  .tutorial-single__content table td:first-child,
  .review-single__content table td:first-child {
    font-weight: 600 !important;
    color: var(--color-accent) !important;
    font-size: var(--font-size-base) !important;
    padding-bottom: var(--spacing-xs) !important;
  }
  
  /* Скрываем вертикальные границы */
  .article-single__content table th:not(:last-child),
  .article-single__content table td:not(:last-child),
  .case-single__content table th:not(:last-child),
  .case-single__content table td:not(:last-child),
  .tutorial-single__content table th:not(:last-child),
  .tutorial-single__content table td:not(:last-child),
  .review-single__content table th:not(:last-child),
  .review-single__content table td:not(:last-child) {
    border-right: none !important;
  }
  
  /* Убираем зебру */
  .article-single__content table tbody tr:nth-child(even),
  .case-single__content table tbody tr:nth-child(even),
  .tutorial-single__content table tbody tr:nth-child(even),
  .review-single__content table tbody tr:nth-child(even) {
    background-color: rgba(36, 45, 58, 0.6) !important;
  }
  
  /* Ховер эффект */
  .article-single__content table tbody tr:hover,
  .case-single__content table tbody tr:hover,
  .tutorial-single__content table tbody tr:hover,
  .review-single__content table tbody tr:hover {
    background-color: rgba(74, 159, 216, 0.15) !important;
  }
}

/* ========== ТАБЛИЦА СРАВНЕНИЯ НА ГЛАВНОЙ ========== */
.comparison-table__content {
  width: 100%;
  border-collapse: collapse;
  margin: var(--spacing-xl) 0;
  background-color: rgba(36, 45, 58, 0.6);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.comparison-table__content th,
.comparison-table__content td {
  padding: var(--spacing-md) var(--spacing-lg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  text-align: left;
}

.comparison-table__content th {
  background: linear-gradient(135deg, rgba(74, 159, 216, 0.25), rgba(76, 175, 80, 0.2));
  font-weight: 600;
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 2px solid rgba(74, 159, 216, 0.4);
}

.comparison-table__content tbody tr:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.02);
}

.comparison-table__content tbody tr:hover {
  background-color: rgba(74, 159, 216, 0.08);
}

/* Адаптивность для мобильных — карточки */
@media (max-width: 767px) {
  .comparison-table__content {
    display: flex !important;
    flex-direction: column !important;
    overflow-x: visible !important;
    width: 100% !important;
    margin: var(--spacing-lg) 0 !important;
  }
  
  .comparison-table__content thead {
    display: none !important;
  }
  
  .comparison-table__content tbody tr {
    display: flex !important;
    flex-direction: column !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: var(--spacing-md) !important;
    margin-bottom: var(--spacing-sm) !important;
    background: rgba(36, 45, 58, 0.6) !important;
    border-radius: var(--radius-sm) !important;
  }
  
  .comparison-table__content td {
    display: block !important;
    padding: var(--spacing-xs) var(--spacing-sm) !important;
    border: none !important;
    font-size: var(--font-size-sm) !important;
    white-space: normal !important;
  }
  
  .comparison-table__content td:first-child {
    font-weight: 600 !important;
    color: var(--color-accent) !important;
    font-size: var(--font-size-base) !important;
    padding-bottom: var(--spacing-xs) !important;
  }
  
  .comparison-table__content tbody tr:hover {
    background-color: rgba(74, 159, 216, 0.15) !important;
  }
}