/* ============================================================
   tgtable.css — общий адаптивный слой для таблиц TGuard
   Используется в analytics.html, engagement.html, marketplace.html, channels.html
   ============================================================ */

/* min-width:0 обязателен: у флекс-элемента min-width по умолчанию = auto (min-content),
   из-за чего body растягивается шире вьюпорта и таблица уезжает за экран.
   100dvh вместо 100% — иначе на iOS Safari адресная строка съедает низ таблицы. */
html, body {
  height: 100dvh;
  margin: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

::selection      { background: #3399ff; color: #fff }
::-moz-selection { background: #3399ff; color: #fff }

.tgt-app {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  background: #fff;
}

.tgt-app .ui.message {
  margin: 0;
  padding: .7em 1em;
  border-radius: 0;
  flex: 0 0 auto;
  font-size: .9em;
}

/* ---------------- тулбар ---------------- */
.tgt-toolbar {
  flex: 0 0 auto;
  position: sticky;
  top: 0;
  z-index: 20;
  background: #fff;
  border-bottom: 1px solid #ddd;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.tgt-toolbar:empty { display: none }

.tgt-toolbar-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap }

.tgt-search { flex: 1 1 220px; min-width: 0; position: relative }
/* ВНИМАНИЕ: Semantic UI ставит html{font-size:14px}, поэтому 1rem здесь = 14px.
   Полям ввода нужны именно 16px: на iOS Safari фокус в поле с меньшим шрифтом
   принудительно зумит страницу, и вёрстка прыгает. Поэтому тут px, а не rem. */
.tgt-search input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 30px 8px 32px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 6px;
  -webkit-appearance: none;
}
/* У Semantic UI i.icon свои margin и width — из-за них иконки в поиске уезжали
   относительно точки привязки. Обнуляем и центрируем флексом, а не translateY. */
.tgt-search .tgt-ic,
.tgt-search .tgt-clear {
  position: absolute; top: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center;
  margin: 0; width: auto; height: auto; line-height: 1;
  color: #999; opacity: 1;
}
.tgt-search .tgt-ic { left: 10px; pointer-events: none }
.tgt-search .tgt-clear { right: 8px; cursor: pointer; display: none }
.tgt-search.has .tgt-clear { display: flex }
.tgt-search .tgt-clear:hover { color: #555 }
/* WebKit рисует свой крестик у input[type=search] — он дублировал бы наш */
.tgt-search input::-webkit-search-cancel-button,
.tgt-search input::-webkit-search-decoration { -webkit-appearance: none; display: none }

.tgt-counts { flex: 0 0 auto; font-size: 12px; color: #666; white-space: nowrap }
.tgt-counts b { color: #222 }
.tgt-counts:empty { display: none }
/* пока идёт долгая операция выделения — курсор ожидания и блокировка повторного клика */
.tgt-app.tgt-busy { cursor: progress }
.tgt-app.tgt-busy .tabulator-header input[type=checkbox] { pointer-events: none; opacity: .5 }

.tgt-actions { display: flex; gap: 6px; flex-wrap: wrap; flex: 0 0 auto }
.tgt-actions .ui.button { margin: 0; flex: 0 0 auto; white-space: nowrap }
.ui.button.tgt-act-hidden, .tgt-actions.tgt-act-hidden { display: none }
.tgt-icon-action { flex: 0 0 auto; margin: 0 }

.tgt-filter-toggle { display: none; flex: 0 0 auto; margin: 0 }
.tgt-app.narrow .tgt-filter-toggle,
.tgt-app.tgt-flags .tgt-filter-toggle { display: inline-block }
/* пока панель открыта — кнопка подсвечена, иначе непонятно, чем её свернуть */
.ui.button.tgt-filter-toggle.tgt-filter-on,
.ui.button.tgt-filter-toggle.tgt-filter-on:hover {
  background: #2185d0; color: #fff; box-shadow: 0 0 0 1px #1b6fb0 inset;
}

/* узкий режим: кнопки сеткой 2×2, счётчик — отдельной строкой */
.tgt-app.narrow .tgt-actions { flex: 1 1 100% }
.tgt-app.narrow .tgt-actions .ui.button { flex: 1 1 calc(50% - 3px); justify-content: center }
.tgt-app.narrow .tgt-counts { order: 5; text-align: right; font-size: 11px }
.tgt-app.narrow .tgt-toolbar { padding: 6px }

/* ---------------- панель фильтров ---------------- */
.tgt-panel { display: none; gap: 8px; flex-wrap: wrap; border-top: 1px solid #eee; padding-top: 8px }
.tgt-panel.open { display: flex }
.tgt-panel label {
  flex: 1 1 46%; min-width: 0; font-size: 12px; color: #666;
  display: flex; flex-direction: column; gap: 3px;
}
.tgt-panel label.wide { flex: 1 1 100% }
.tgt-panel input, .tgt-panel select {
  width: 100%; box-sizing: border-box; padding: 7px;
  font-size: 16px;              /* 16px обязательны — иначе iOS зумит при фокусе */
  border: 1px solid #ccc; border-radius: 5px; background: #fff; -webkit-appearance: none;
}
/* ВАЖНО: date и time исключаем из appearance:none. На WebKit он срезает нативное
   оформление, и поле показывает пустоту вместо «дд.мм.гггг» и «--:--» — непонятно,
   что вообще нужно вводить. Заодно возвращается иконка календаря/часов. */
.tgt-panel input[type=date], .tgt-panel input[type=time],
.tgt-daterange input[type=date], .tgt-daterange input[type=time],
.tabulator .tabulator-header input[type=date],
.tabulator .tabulator-header input[type=time] {
  -webkit-appearance: auto;
  appearance: auto;
}
/* align-items:center обязателен: без него span-дефис растягивается по высоте
   (default stretch) и его текст прижимается к верху строки */
.tgt-panel .tgt-row2 { display: flex; flex-wrap: wrap; gap: 6px; align-items: center }
.tgt-panel .tgt-row2 input { flex: 1 1 0; min-width: 0 }
.tgt-panel .tgt-dt-pair { flex: 1 1 0; min-width: 0 }
/* на узком панель не должна выдавливать таблицу, а два datetime-local не влезают в ряд */
.tgt-app.narrow .tgt-panel { max-height: 46vh; overflow-y: auto }

.tgt-flagset { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 2px 0 }
/* специфичнее, чем «.tgt-panel label» выше: иначе чекбоксы наследуют от него
   flex-direction:column и ширину 46%, и галка встаёт над подписью */
.tgt-panel .tgt-flagset label.tgt-flag {
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #333;
  cursor: pointer;
  user-select: none;
}
.tgt-panel .tgt-flagset label.tgt-flag input[type=checkbox] {
  width: 16px !important; height: 16px; min-width: 16px;
  margin: 0; padding: 0; flex: 0 0 auto;
  -webkit-appearance: auto; appearance: auto;
}

/* ---------------- таблица ---------------- */
.tgt-app { position: relative }
.tgt-table { flex: 1 1 auto; min-height: 0; min-width: 0; overflow: hidden }

/* Оверлей загрузки. Лежит поверх всего до полной отрисовки строк: на больших
   выборках между «данные пришли» и «таблица видна» проходят секунды, и голая
   пустая таблица читается как зависание. Снимается в tableBuilt. */
.tgt-loading {
  position: absolute; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  background: #fff; text-align: center; padding: 1em;
}

.tgt-wrap { white-space: pre-wrap; overflow-wrap: anywhere }
.tgt-chip {
  display: inline-block; padding: 1px 7px; border-radius: 10px;
  font-size: 11px; line-height: 17px; color: #333; margin-top: 2px; white-space: nowrap;
}

/* Фильтр периода: «От [дата][время]  До [дата][время]» одной строкой.
   Единый datetime-local не годится — его нативный попап в Firefox показывает
   только календарь, время выбрать нельзя. Пары date+time дают выбор везде.
   flex-wrap оставлен как страховка: если ширины физически не хватает,
   вторая пара переносится вниз, а не обрезается. */
.tgt-daterange {
  display: flex; flex-direction: row; flex-wrap: wrap;
  gap: 4px; align-items: center; width: 100%; box-sizing: border-box;
}
.tgt-dt-pair { display: flex; gap: 3px; align-items: center; flex: 1 1 0; min-width: 0 }
.tgt-dt-dash { flex: 0 0 auto; color: #777; padding: 0 2px; line-height: 1; user-select: none }
.tgt-dt-field { position: relative; display: block; min-width: 0 }
.tgt-dt-field.tgt-dt-date { flex: 3 1 0 }
.tgt-dt-field.tgt-dt-time { flex: 2 1 0 }
.tgt-dt-field input { width: 100%; box-sizing: border-box }

/* Подсказка внутри поля. Показывается только на iOS: остальные браузеры рисуют
   собственную маску формата, и две надписи наложились бы друг на друга. */
.tgt-dt-hint {
  display: none;
  position: absolute; left: 7px; top: 50%; transform: translateY(-50%);
  font: inherit; font-size: 12px; font-style: normal; color: #9aa0a6;
  pointer-events: none; white-space: nowrap;
}
.tgt-app.tgt-ios .tgt-dt-field:not(.filled) .tgt-dt-hint { display: block }
.tabulator .tabulator-header input,
.tabulator .tabulator-header select {
  box-sizing: border-box; width: 100%; padding: 3px;
  border: 1px solid #ccc; border-radius: 4px; font-size: 12px;
}
/* на узком экране текстовые фильтры в шапке тоже должны быть 16px против зума iOS;
   select зум не вызывает — он открывает нативный пикер, ему хватает 12px */
.tgt-app.narrow .tabulator .tabulator-header input { font-size: 16px; padding: 5px }

/* тач-цели побольше на узком экране */
.tgt-app.narrow .tabulator-row .tabulator-cell { padding: 7px 6px }
/* Кружок маленький, чтобы колонка ела минимум ширины, но зона нажатия растянута
   невидимым псевдоэлементом — палец попадает в ~38px вместо 22px.
   Работает благодаря overflow:visible у ячейки. */
.tgt-app .tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle::after {
  content: ""; position: absolute; inset: -8px;
}

/* ---- кнопка разворачивания строки ----
   ВНИМАНИЕ про специфичность: родное правило Tabulator —
   «.tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle» (три класса)
   и жёстко задаёт background:#666, width/height:15px, svg{stroke:#fff}.
   Поэтому все правила ниже идут с префиксом .tgt-app — иначе круг остаётся
   серым овалом 26×15, что и происходило.

   Tabulator рисует два SVG (плюс и минус) и подменяет их классом .open.
   Мы всегда показываем плюс и доворачиваем его вертикальную палочку на 90°,
   так переход «плюс → минус» получается анимированным, а не скачком. */
/* !important здесь осознанно: родные правила Tabulator задают этому элементу
   background:#666, width/height:15px и svg{stroke:#fff}. Любая разница в порядке
   подключения стилей или чуть иная сборка Tabulator — и кнопка снова становится
   серым овалом либо белой иконкой на белом фоне, то есть «пропадает». */
.tgt-app .tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  position: relative;
  padding: 0 !important;
  display: inline-flex !important;
  visibility: visible !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  /* без подложки: кружок с треугольником внутри читался как кнопка «плей».
     Заметность даёт цвет и размер самой фигуры. */
  background: none !important;
  color: #2185d0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease,
              color .16s ease, box-shadow .16s ease, transform .12s ease;
}
@media (hover: hover) and (pointer: fine) {
  .tgt-app .tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle:hover {
    background: none !important;
    color: #14568a !important;
    box-shadow: 0 1px 4px rgba(33, 133, 208, .16);
    opacity: 1;
  }
}
.tgt-app .tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle:active {
  transform: scale(.85);
}
.tgt-app .tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle:focus-visible {
  outline: 2px solid #2185d0;
  outline-offset: 2px;
}
.tgt-app .tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle.open {
  background: none !important;
  color: #14568a !important;
  box-shadow: none !important;
}

/* цвет обводки задаём явно, а не через currentColor: если color где-то унаследуется
   белым, иконка станет белой на белом — визуально «плюсика нет» */
.tgt-app .tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle svg {
  width: 13px !important; height: 13px !important; display: block !important;
  stroke: #1b6fb0 !important;
}
.tgt-app .tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle svg line {
  stroke: #1b6fb0 !important;
  stroke-width: 3.6;
}
.tgt-app .tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle.open svg,
.tgt-app .tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle.open svg line {
  stroke: #fff !important;
}
/* Вместо родных «плюс/минус» рисуем треугольник-раскрывашку: он привычнее читается
   как «развернуть строку». Обе SVG-иконки Tabulator прячем, фигуру делаем бордером —
   не зависит ни от загрузки шрифтов, ни от рендеринга SVG на конкретном движке.
   ::after занят увеличенной зоной нажатия, поэтому треугольник на ::before. */
.tgt-app .tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle svg { display: none !important }
.tgt-app .tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle::before {
  content: "";
  width: 0; height: 0;
  border-left: 7px solid currentColor;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  margin-left: 2px;                 /* оптическая компенсация: остриё вправо */
  transition: transform .2s cubic-bezier(.4, 0, .2, 1);
}
.tgt-app .tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle.open::before {
  transform: rotate(90deg);
  margin-left: 0;
}

/* колонка под кнопку: 1.75rem круг + отступы ячейки */
.tgt-app .tabulator-row .tabulator-cell.tgt-collapse-cell { padding: 2px; overflow: visible }
.tabulator-responsive-collapse { border-top: 1px dashed #ddd; background: #fbfbfc }
.tabulator-responsive-collapse table td { padding: 3px 5px; vertical-align: top }
.tgt-card-title { color: #888; white-space: nowrap; width: 1%; padding-right: 8px !important }
.tgt-card-empty { color: #bbb }

.tabulator .tabulator-header .tabulator-col { background: #fafafa }

a { text-decoration: underline }
.tabulator a { text-decoration: none }