/*
  Стили раздела «Отчёты» (reports.js). Токены и базовые классы (.card, .btn,
  .field, .empty, .sec, .num, .alert, .spinner) — из app.css; здесь только
  то, чего там нет: тулбар периода/вида отчёта, таблица предпросмотра со
  строкой итогов, блок еженедельной сводки. Своих цветов вне палитры
  DESIGN.md не вводим — красный (var(--ember)) только для ошибок, как и
  везде в системе.
*/

/* ── Тулбар: вид отчёта, период, скачивание ─────────────────────────── */
.rep-toolbar-card {
  margin-bottom: var(--s16);
}

.rep-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s16);
}

.rep-toolbar .field {
  min-width: 176px;
}

.rep-toolbar__actions {
  display: flex;
  align-items: center;
}

.rep-toolbar__spacer {
  flex: 1;
}

.rep-toolbar__downloads {
  display: flex;
  gap: var(--s8);
  flex-wrap: wrap;
}

/* .note (app.css) — white-space: nowrap, рассчитан на короткие подписи.
   Здесь те же серые заметки, но целыми описательными предложениями (описание
   вида отчёта, подписи под таблицами, пояснение к сводке за неделю) — на
   узких экранах .note растягивал страницу вбок. Свой класс с тем же цветом,
   но нормальным переносом слов. */
.rep-note {
  color: var(--mid);
  white-space: normal;
  overflow-wrap: break-word;
}

.rep-kind-desc {
  margin: 0 0 var(--s16);
}

.rep-period-note {
  margin-bottom: var(--s12);
}

.rep-table-note {
  margin-bottom: var(--s8);
}

/* ── Таблица предпросмотра — один блок на таблицу отчёта ─────────────── */
.rep-table-section {
  margin-bottom: var(--s24);
}

.rep-table-scroll {
  overflow-x: auto;
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  background: var(--paper);
}

.rep-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-body);
  min-width: 640px;
}

.rep-table th,
.rep-table td {
  padding: var(--s12) var(--s16);
  text-align: left;
  white-space: nowrap;
}

.rep-table thead th {
  font-size: var(--text-caption);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mid);
  font-weight: 500;
  border-bottom: 1px solid var(--hairline);
}

.rep-table tbody tr {
  border-bottom: 1px solid var(--hairline);
}

.rep-table tbody tr:last-child {
  border-bottom: none;
}

.rep-table td.num,
.rep-table th.num {
  text-align: right;
}

.rep-table__totals td {
  font-weight: 600;
  border-top: 1px solid var(--hairline-strong);
  border-bottom: none;
}

/* ── Еженедельная сводка ───────────────────────────────────────────── */
.rep-weekly-card {
  margin-top: var(--s48);
}

.rep-weekly-body {
  margin-top: var(--s4);
}

.rep-weekly-text {
  white-space: pre-wrap;
  font-size: var(--text-body);
  line-height: 1.5;
  background: var(--surface-alt);
  border: 1px solid var(--hairline);
  border-radius: var(--r-nested);
  padding: var(--s16);
}

/* ── Загрузка/ошибки в строку ─────────────────────────────────────── */
.rep-inline-spinner {
  display: flex;
  align-items: center;
  gap: var(--s8);
  padding: var(--s16) 0;
  color: var(--mid);
  font-size: var(--text-body);
}

.rep-inline-status:empty {
  display: none;
}

.rep-section-error {
  align-items: center;
}

/* ── Узкие экраны ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .rep-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .rep-toolbar .field {
    min-width: 0;
  }

  .rep-toolbar__actions {
    justify-content: flex-start;
  }

  .rep-toolbar__downloads {
    flex-direction: column;
  }

  .rep-toolbar__downloads .btn {
    width: 100%;
  }
}