/* packages/ui/nontarget_journal.css
   Вкладка «Журнал проверок» экрана функции «Отдел продаж» (nontarget-deal-
   check-console, Шаг 10). `.tbl` уже описан table.css и переиспользуется как
   есть — здесь только фильтры, сводные плитки и раскрывающаяся карточка
   проверки.

   Цвета — только var(--…) из packages/theme/tokens.css, ни одного
   литерального hex (кроме допущенного #fff/#ffffff, который здесь и не
   нужен).

   Сетка фильтров — `minmax(0, 1fr)` на каждой колонке (Lesson о
   grid-min-width:auto blowout): без него самая широкая колонка тянет ширину
   грида по своему max-content, и на узком экране строка фильтров вылезает за
   контейнер незаметно для scrollWidth.
*/

.ntj-tab {
  color: var(--ink);
  font-family: var(--sans);
}

.ntj-filters {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
  margin-bottom: 16px;
}
.ntj-filter {
  display: grid;
  gap: 6px;
  color: var(--ink-2);
  font-size: 13px;
  min-width: 0;
}
.ntj-filter select {
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 8px;
  min-height: 40px;
  padding: 8px 12px;
  max-width: 100%;
}

.ntj-results {
  min-height: 0;
}

.ntj-message {
  margin: 8px 0;
  color: var(--ink-2);
  font-size: 13px;
}

.ntj-retry {
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
}
.ntj-retry:hover {
  background: var(--blue-wash);
}

/* --- сводка ------------------------------------------------------------- */

.ntj-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.ntj-tile {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  min-width: 0;
}
.ntj-tile-title {
  color: var(--ink-2);
  font-size: 12px;
  margin-bottom: 6px;
}
.ntj-tile-value {
  font-size: 24px;
  font-weight: 600;
}
.ntj-tile-empty {
  color: var(--ink-3);
  font-size: 13px;
}
.ntj-tile-list {
  display: grid;
  gap: 4px;
}
.ntj-tile-line {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
}
.ntj-tile-line-label {
  color: var(--ink-2);
  overflow-wrap: anywhere;
}
.ntj-tile-count {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* --- таблица ------------------------------------------------------------ */

.ntj-table-wrap {
  width: 100%;
  overflow-x: auto;
}
.ntj-row {
  cursor: pointer;
}
.ntj-row:hover {
  background: var(--blue-wash);
}
.ntj-link {
  color: var(--blue);
}
.ntj-status-error {
  margin-top: 2px;
  color: var(--warn);
  font-size: 12px;
}

/* --- карточка проверки (раскрытая строка) -------------------------------- */

.ntj-detail {
  background: var(--surface-3);
}
.ntj-kv {
  display: grid;
  gap: 8px;
  padding: 8px 4px;
}
.ntj-kv-row {
  display: grid;
  grid-template-columns: minmax(140px, 220px) minmax(0, 1fr);
  gap: 6px 12px;
  font-size: 13px;
}
.ntj-kv-label {
  color: var(--ink-2);
}
.ntj-kv-value {
  overflow-wrap: anywhere;
  white-space: pre-line;
}
.ntj-quote {
  margin-bottom: 6px;
}
.ntj-quote-source {
  color: var(--ink-3);
  font-size: 12px;
}
.ntj-quote-text {
  overflow-wrap: anywhere;
  white-space: pre-line;
}

/* --- «Показать ещё» ------------------------------------------------------ */

.ntj-more {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.ntj-more-btn {
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 8px;
  min-height: 40px;
  padding: 8px 16px;
  cursor: pointer;
}
.ntj-more-btn:hover {
  background: var(--blue-wash);
}
.ntj-more-btn:disabled {
  cursor: default;
  opacity: .6;
}
.ntj-more-error {
  color: var(--err);
  font-size: 13px;
}

@media (max-width: 600px) {
  .ntj-filters {
    grid-template-columns: minmax(0, 1fr);
  }
  .ntj-summary {
    grid-template-columns: minmax(0, 1fr);
  }
  .ntj-kv-row {
    grid-template-columns: minmax(0, 1fr);
  }
}