/* Пульт — стили экрана (сборка 08.11.2026, таск 04). Общие компоненты — static/css/app.css;
   цвет и рисунки — только переменными :root, свой токен — новым именем (tests/core/test_brand.py).
   Слово «url» со скобкой в комментариях не писать: сборка статики с манифестом разбирает его и тут. */

/* Под заголовком: «Данные на ДД.ММ.ГГГГ, ЧЧ:ММ» и ссылка «Обновить» со значком — как в макете. Ссылка,
   а не кнопка: на стартовом экране не больше пяти кнопок. */
.freshness { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.freshness a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
}
.freshness a:hover { text-decoration: underline; }
.freshness a::before { width: 16px; height: 16px; }

/* Фильтры-пилюли строкой под заголовком, пояснение «действуют на весь пульт» серым и справа «Срезы». */
.pult-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 16px; }
.pult-tools .filters { margin: 0; }
.pult-note { font-size: var(--eg-fs-13); line-height: var(--eg-lh-13); color: var(--muted); }
.pult-tools > a { margin-left: auto; font-weight: 600; }

/* Ссылки администратора («Вам на проверку», «Новые заявки»…) — маленькими пилюлями: на виду, но тише
   панелей. Разметка прежняя: абзац со ссылками подряд. */
.pult-links { gap: 8px; margin: 0 0 16px; }
.pult-links a {
  padding: 4px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  font-size: var(--eg-fs-13);
  line-height: var(--eg-lh-13);
  text-decoration: none;
}
.pult-links a:hover { border-color: var(--line-strong); }

/* Счётчики стоят в ряд между панелями с тем же отступом 16 px. */
.counters { margin-bottom: 16px; }
/* Колонки сетки пульта — «Требует внимания» с вопросами и «По объектам» — не раздвигают страницу. */
.pult > * { min-width: 0; }
/* «По объектам» — на всю ширину, как соседние панели: пять колонок с полоской ей нужны. */
.pult-sites { max-width: none; }

/* Неотработанные заявки: этап — плашка и полоска из восьми делений в одной ячейке; «Не назначен» и
   «+1» — серым; «Нужно к» — точка, дата и слово срока (компонент `.due`). */
.pult-unprocessed .muted { color: var(--muted); }
.stage-cell { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
@media (min-width: 1280px) {
  table.data.unprocessed td:first-child { width: 26%; }
  table.data.unprocessed td.cut { width: 18%; }
  table.data.unprocessed td:nth-child(4) { width: 1%; }
  table.data.unprocessed td.num { width: 1%; }
  table.data.unprocessed td:last-child { width: 1%; }
  /* Плашка этапа — в колонке одной ширины, полоска за ней: деления всех строк стоят друг под другом. */
  table.data.unprocessed .stage-cell { display: grid; grid-template-columns: 9.25rem auto; justify-items: start; }
}
/* Карточка на телефоне: номер заявки — заголовок слева, без подписи «Заявка» перед «Заявка №54». */
@media (max-width: 1279px) {
  table.data.unprocessed td:first-child { justify-content: flex-start; text-align: left; }
  table.data.unprocessed td:first-child::before { display: none; }
}

/* Строка «Требует внимания» и вопроса о получении, как в макете: значок вида документа, жирный
   заголовок и серая подпись в две строки, справа этап, срок и шеврон. Весь ряд — ссылка на карточку. */
table.alist { width: 100%; border-collapse: collapse; }
table.alist td { padding: 0; border-top: 1px solid var(--eg-border-soft); }
table.alist tr:first-child td { border-top: 0; }
/* Этап и срок — столбцами одной ширины: плашки и даты всех строк стоят друг под другом. */
.aitem {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 11rem 13.5rem 18px;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  color: var(--text);
  text-decoration: none;
}
a.aitem:hover { background: var(--panel); }
a.aitem:focus-visible { outline-offset: -2px; }
.aitem-icon {
  --eg-icon: var(--eg-icon-files);
  width: 20px;
  height: 20px;
  background: var(--muted);
  -webkit-mask: var(--eg-icon) center / contain no-repeat;
  mask: var(--eg-icon) center / contain no-repeat;
}
.aitem-icon[data-kind="requisition"] { --eg-icon: var(--eg-icon-list); }
.aitem-icon[data-kind="invoice"] { --eg-icon: var(--eg-icon-receipt); }
.aitem-icon[data-kind="query"] { --eg-icon: var(--eg-icon-truck); }
a.aitem::after {
  content: "";
  width: 18px;
  height: 18px;
  background: var(--muted);
  -webkit-mask: var(--eg-icon-next) center / contain no-repeat;
  mask: var(--eg-icon-next) center / contain no-repeat;
}
.aitem-text { display: flex; flex-direction: column; min-width: 0; }
.aitem-text strong,
.aitem-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aitem-text strong { font-weight: 600; }
.aitem-text small { font-size: var(--eg-fs-13); line-height: var(--eg-lh-13); color: var(--muted); }
.aitem-state { font-size: var(--eg-fs-13); color: var(--muted); white-space: nowrap; }

/* «Срок — сводка»: что показано, и «Показать все» — строкой над списком внутри панели. */
.pult-attention > .list-status { margin: 0; padding: 8px 16px; border-bottom: 1px solid var(--eg-border-soft); }

/* Вопросы о получении: подпись целиком (позиции документа — строками), справа — кнопки ответа. */
.questions .aitem { grid-template-columns: 20px minmax(0, 1fr) minmax(0, 24rem); align-items: start; }
.questions .aitem-icon { margin-top: 2px; }
.questions .aitem-text strong,
.questions .aitem-text small { white-space: normal; overflow: visible; }
.aitem-actions { align-self: center; }
.aitem-actions form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
/* Причина неактивной «Да, принято» — под кнопками, а не в ряд с ними: длинная, она сжимала бы текст вопроса. */
.aitem-actions .why { order: 1; flex: 1 1 100%; margin: 0; font-size: var(--eg-fs-13); line-height: var(--eg-lh-13); }

/* Уже 1100 px (планшет, телефон): значок, текст и шеврон — первой строкой, этап и срок — под текстом,
   кнопки вопроса — под ним: в строку они уже не помещаются рядом с текстом. */
@media (max-width: 1099px) {
  a.aitem {
    grid-template-columns: 20px minmax(0, 1fr) 18px;
    grid-template-areas: "icon text go" ". state state" ". due due";
    row-gap: 6px;
  }
  a.aitem .aitem-icon { grid-area: icon; }
  a.aitem .aitem-text { grid-area: text; }
  a.aitem .aitem-state { grid-area: state; }
  a.aitem .due { grid-area: due; justify-self: start; }
  a.aitem::after { grid-area: go; }

  .questions .aitem { grid-template-columns: 20px minmax(0, 1fr); }
  .questions .aitem-actions { grid-column: 2; }
}

/* Телефон: фильтры-пилюли — друг под другом на всю ширину, «Срезы» — слева под ними. */
@media (max-width: 720px) {
  .pult-tools { flex-direction: column; align-items: stretch; }
  .pult-tools .filters { width: 100%; }
  .pult-tools form.filters label:has(> select) { flex: 1 1 100%; }
  .pult-tools form.filters label > select { flex: 1; max-width: none; }
  .pult-tools > a { margin-left: 0; }
}