/* ============================================================
   tables.css — Sibpipe.ru
   Стили таблиц: спецификации, данные, сравнения, мобильный scroll
   ============================================================ */

/* ---- Table Wrapper ---- */
.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
  border-radius: 5px;
  border: 1px solid #A9ADB9;
  margin-bottom: 1.5rem;
}

/* ---- Base Table ---- */
/* ============================================================
   .specs-table / .data-table — ТОЧНАЯ КОПИЯ визуального языка .spec-matrix
   (components.css). Значения ниже совпадают 1:1 с эталонной таблицей,
   чтобы сортамент/справочные таблицы выглядели идентично таблицам подбора.
   Отличие только функциональное: фильтры, сортировка, кнопка, col-optional.
   ============================================================ */
.specs-table,
.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--font-mono);
  letter-spacing: -0.03em;
  font-size: 0.75rem;
  line-height: 1.4;
  background: var(--color-bg);
}

/* Ячейки: та же модель границ, что в .spec-matrix — border-top + border-left */
.specs-table th,
.specs-table td,
.data-table th,
.data-table td {
  padding: 12px 15px;
  text-align: left;
  vertical-align: middle;
  border-top: 1px solid #A9ADB9;
  border-left: 1px solid rgba(169, 173, 185, 0.45);
}

.specs-table th:first-child,
.specs-table td:first-child,
.data-table th:first-child,
.data-table td:first-child {
  border-left: none;
}

/* ---- Шапка ---- */
.specs-table thead th,
.data-table thead th {
  border-top: none;
  font-weight: 600;
  font-size: 0.6875rem;
  line-height: 1.35;
  white-space: nowrap;
  text-transform: uppercase;
  color: var(--color-text);
  background: var(--color-bg-alt);
}

/* ---- Тело: значения синие, как в .spec-matrix ---- */
.specs-table tbody td,
.data-table tbody td {
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}

/* Первая колонка — «лейбл строки» серым uppercase, как th[scope=row] в .spec-matrix */
.specs-table tbody td:first-child,
.data-table tbody td:first-child {
  color: var(--color-text-light);
  text-transform: uppercase;
  font-weight: 500;
  white-space: nowrap;
}

.specs-table tbody td strong,
.data-table tbody td strong {
  color: var(--color-primary);
  font-weight: 700;
}

/* Hover: blue wash + left accent line on first cell */
@media (hover: hover) {
  .specs-table tbody tr:hover,
  .data-table tbody tr:hover {
    background: rgba(56, 85, 171, 0.06);
  }

  .data-table tbody tr:hover td:first-child,
  .specs-table tbody tr:hover td:first-child {
    box-shadow: inset 3px 0 0 var(--color-primary);
  }
}

/* ---- Clickable rows ---- */
.data-table tbody tr[data-href] {
  cursor: pointer;
}

/* ---- Numeric columns ---- */
.specs-table th.num,
.specs-table td.num,
.data-table th.num,
.data-table td.num {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: -0.01em;
}

/* ---- Totals / Summary row ---- */
.specs-table tfoot td,
.data-table tfoot td,
.specs-table tr.totals td,
.data-table tr.totals td,
.specs-table tr.summary td,
.data-table tr.summary td {
  font-weight: 700;
  background: rgba(56, 85, 171, 0.05);
  border-top: 1px solid rgba(56, 85, 171, 0.2);
  color: var(--color-primary);
}

/* ---- ПЭ80 строки (устаревший материал) ---- */
tr.row-pe80 td {
  color: var(--color-text-light);
  background: rgba(220, 38, 38, 0.025) !important;
}

@media (hover: hover) {
  tr.row-pe80:hover td {
    background: rgba(220, 38, 38, 0.055) !important;
  }
}

/* ---- Comparison Table ----
   Используется с двойным классом: <table class="data-table comparison-table">.
   Базовые стили шапки/ячеек берёт от .data-table — здесь только специфика:
   подсветка текущей/выбранной строки.
*/
.comparison-table tr.current,
.comparison-table tr.selected {
  background: rgba(56, 85, 171, 0.08) !important;
}

.comparison-table tr.current td,
.comparison-table tr.selected td {
  font-weight: 600;
  color: var(--color-primary);
}

/* ---- Table Captions ---- */
caption {
  caption-side: top;
  text-align: left;
  padding: 8px 0 6px;
  font-size: 0.875rem;
  color: var(--color-text-light);
  font-weight: 500;
}

/* ---- Table cell states ---- */
td.cell-highlight {
  background: rgba(56, 85, 171, 0.07);
  font-weight: 600;
}

td.cell-good {
  color: var(--color-success);
  font-weight: 600;
}

td.cell-bad {
  color: var(--color-danger);
}

td.cell-neutral {
  color: var(--color-text-light);
}

/* ---- Table action button (last column) ---- */
.btn-table {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  font-family: var(--font-main);
  line-height: 1;
  border-radius: 7px;
  border: 1px solid rgba(56, 85, 171, 0.3);
  color: var(--color-primary);
  background: transparent;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  z-index: 0;
  transition:
    color .22s cubic-bezier(.37,0,.63,1),
    border-color .22s cubic-bezier(.37,0,.63,1),
    background .22s cubic-bezier(.37,0,.63,1);
}

.btn-table::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #1e3480 0%, #3855AB 100%);
  opacity: 0;
  transition: opacity .25s cubic-bezier(.37,0,.63,1);
  z-index: 0;
}

.btn-table:hover,
.btn-table:focus,
.btn-table:focus-visible {
  text-decoration: none;
  outline: none;
}

.btn-table.is-hovered,
.btn-table:hover {
  color: white;
  border-color: #3855AB;
  text-decoration: none;
}

.btn-table.is-hovered::before,
.btn-table:hover::before {
  opacity: 1;
}

.btn-table__text {
  padding: 6px 10px;
  position: relative;
  z-index: 2;
}

.btn-table__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  align-self: stretch;
  position: relative;
  z-index: 2;
  border-left: 1px solid rgba(56, 85, 171, 0.25);
  color: inherit;
  transition: border-color .22s cubic-bezier(.37,0,.63,1);
}

.btn-table__icon svg {
  display: block;
  flex-shrink: 0;
  stroke: currentColor;
}

.btn-table.is-hovered .btn-table__icon,
.btn-table:hover .btn-table__icon {
  border-color: rgba(255, 255, 255, 0.25);
}

/* ---- Sortable column headers ---- */
.specs-table th[data-sort],
.data-table th[data-sort] {
  cursor: pointer;
  user-select: none;
  padding-right: 15px; /* как у обычной ячейки .spec-matrix; иконка сортировки помещается в паддинг */
  position: relative;
  transition: background 150ms ease;
}

.specs-table th[data-sort]:hover,
.data-table th[data-sort]:hover {
  background: rgba(17, 17, 17, 0.05);
}

.specs-table th[data-sort]::after,
.data-table th[data-sort]::after {
  content: "⇅";
  position: absolute;
  right: 5px;
  font-size: 0.6rem;
  opacity: 0.35;
}

.specs-table th[data-sort="asc"]::after,
.data-table th[data-sort="asc"]::after {
  content: "↑";
  opacity: 0.9;
}

.specs-table th[data-sort="desc"]::after,
.data-table th[data-sort="desc"]::after {
  content: "↓";
  opacity: 0.9;
}

/* ---- Table Controls (filter bar) — тот же плоский язык, что таблицы ---- */
.table-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 15px;
  background: var(--color-bg-alt);
  border-bottom: 1px solid #A9ADB9;
  font-family: var(--font-mono);
  letter-spacing: -0.03em;
  font-size: 0.75rem;
}

.table-controls label {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  color: var(--color-text-light);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
}

.table-controls input[type="number"],
.table-controls input[type="text"],
.table-controls select {
  padding: 6px 10px;
  border: 1px solid #A9ADB9;
  border-radius: 5px;
  font-size: 16px; /* mobile: ≥16px против iOS-зума; на десктопе ужимается ниже (min-width:641) */
  min-height: 44px; /* touch-таргет; на десктопе снимается ниже */
  background: var(--color-bg);
  color: var(--color-text);
  min-width: 90px;
  font-family: var(--font-mono);
  letter-spacing: -0.03em;
  transition: border-color 150ms ease, box-shadow 150ms ease;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}

.table-controls input:focus,
.table-controls select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(56, 85, 171, 0.15);
}

.table-controls button[data-filter-reset] {
  padding: 6px 14px;
  min-height: 44px; /* touch-таргет на мобиле; снимается на десктопе */
  background: var(--color-bg);
  border: 1px solid #A9ADB9;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  color: var(--color-text-light);
  font-family: var(--font-mono);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
}

.table-controls button[data-filter-reset]:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.table-controls .row-count {
  margin-left: auto;
  font-size: 0.6875rem;
  color: var(--color-text-light);
  background: transparent;
  padding: 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

/* Десктоп: возвращаем компактные фильтры (mobile-first — база выше 16px/44px против iOS-зума) */
@media (min-width: 641px) {
  .table-controls input[type="number"],
  .table-controls input[type="text"],
  .table-controls select,
  .table-controls button[data-filter-reset] {
    font-size: 0.75rem;
    min-height: 0;
  }
}

/* Controls + table share outer border/radius from .table-wrapper */
.data-table-wrapper.table-wrapper {
  overflow-x: auto;
}

/* ---- Table note ---- */
.table-note {
  font-size: 0.8rem;
  color: var(--color-text-light);
  margin-top: -1rem;
  margin-bottom: 1.5rem;
}

/* ============================================================
   Мобильные таблицы труб (≤640px): без горизонтального скролла.
   Прячем второстепенные колонки (.col-optional) — Ø вн., PN, материал.
   Остаётся ключевое: Ø нар. / SDR / стенка / вес / кнопка «Открыть».
   overflow-x:auto сохраняем как страховку (широкие справочные таблицы —
   температурные, классовые — скроллятся внутри своей обёртки, не распирая
   страницу). Сортаментные таблицы после скрытия колонок просто влезают.
   Сортамент опознаём по столбцу-кнопке :has(.btn-table).
   ============================================================ */
@media (max-width: 640px) {
  .col-optional {
    display: none !important;
  }

  /* Все таблицы: заголовки и значения переносятся (а не nowrap), чтобы влезть без скролла */
  .specs-table th,
  .specs-table td,
  .data-table th,
  .data-table td {
    white-space: normal;
    overflow-wrap: break-word;
  }

  /* Первая колонка тоже переносится: в текстовых таблицах там длинные фразы
     (иначе nowrap растягивает таблицу). Для сортамента там короткий Ø — не мешает. */
  .specs-table tbody td:first-child,
  .data-table tbody td:first-child {
    white-space: normal;
  }

  /* Компактные ячейки, заголовки переносятся по словам вместо nowrap */
  .data-table-wrapper .data-table th,
  .data-table-wrapper .data-table td {
    padding: 9px 6px;
    white-space: normal;
  }

  .data-table-wrapper .data-table th {
    font-size: 0.6875rem;
    letter-spacing: 0.03em;
  }

  /* Кнопка «Открыть»: компактный текст, но touch-таргет ≥44px */
  .data-table-wrapper .btn-table {
    min-height: 44px;
  }

  .data-table-wrapper .btn-table__text {
    padding: 6px 8px;
    font-size: 0.75rem;
  }

  .data-table-wrapper .btn-table__icon {
    padding: 0 6px;
  }

  /* Сортаментная таблица (со столбцом-кнопкой) влезает целиком —
     ширина 100%, убираем «замороженную» первую колонку. */
  .data-table:has(.btn-table) {
    width: 100%;
  }

  .data-table:has(.btn-table) tbody td:first-child,
  .data-table:has(.btn-table) thead th:first-child {
    position: static;
    border-right: none;
  }

  .data-table:has(.btn-table) thead th:first-child {
    background: var(--color-bg-alt);
  }

  .data-table:has(.btn-table) tbody td:first-child {
    background: transparent;
    border-right: none;
  }
}

/* ---- Responsive: small screens ---- */
@media (max-width: 600px) {
  .specs-table th,
  .data-table th,
  .comparison-table th,
  .specs-table td,
  .data-table td,
  .comparison-table td {
    padding: 10px 12px;
  }

  /* Freeze first column on mobile */
  .specs-table tbody td:first-child,
  .data-table tbody td:first-child,
  .comparison-table tbody td:first-child,
  .specs-table thead th:first-child,
  .data-table thead th:first-child,
  .comparison-table thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 5;
    background: var(--color-bg);
    border-right: 1px solid rgba(169, 173, 185, 0.45);
  }

  .specs-table thead th:first-child,
  .data-table thead th:first-child,
  .comparison-table thead th:first-child {
    background: var(--color-bg-alt);
    z-index: 15;
  }

  .comparison-table tr.current td:first-child,
  .comparison-table tr.selected td:first-child {
    background: rgba(56, 85, 171, 0.08) !important;
  }

  .table-controls {
    gap: 8px;
    padding: 10px 12px;
  }

  .table-controls input[type="number"],
  .table-controls input[type="text"],
  .table-controls select {
    width: 100%;
  }

  .table-controls .row-count {
    margin-left: 0;
  }
}