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

   Разметка — templates/dashboard/tasks.html и _tasks_*.html: подпись под заголовком (`.task-lead`),
   чипы очередей (`nav.queues`), разделы (`section.panel.queue`: заголовок, число `.count`, таблица
   `table.data.list.tasks`). От 1280 px раздел — панель с таблицей, как в оболочке; ниже — заголовок
   и карточки по макетам склада и снабженца (`Интерфейс/screens/*-todo.html`): строка таблицы — карточка,
   срок сверху, затем заголовок, подпись и кнопки во всю ширину. */

:root {
  /* Облачко вопроса — значок карточки «Вопросы о получении», как в макете склада: контур 24×24,
     линия 1,8; рисует его маска цветом текста. */
  --task-icon-chat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H8l-4 4z'/%3E%3C/svg%3E");
}

/* Чипы очередей — ссылки на разделы экрана («Все N» — на сами чипы): пилюли, как `chipbtn` макета,
   «Все» — тёмная. Кнопками их делать нельзя: на стартовом экране кнопок не больше пяти. */
.queues,
.queue { scroll-margin-top: 16px; }
.queues {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}
.queues a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  background: var(--card);
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.queues a:hover { background: var(--soft); }
.queues a.all { background: var(--eg-shell-active); border-color: var(--eg-shell-active); color: var(--eg-on-shell); }
.queues a.all:hover { background: var(--eg-shell); }
.queues .cnt { font-variant-numeric: tabular-nums; }

/* Число раздела — серая капсула рядом с названием, как у вкладок карточек. */
.queue .count {
  padding: 1px 8px;
  border-radius: 10px;
  background: var(--eg-neutral-bg);
  color: var(--muted);
  font-size: var(--eg-fs-12);
  line-height: var(--eg-lh-12);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Таблица (от 1280 px): подпись перед датой срока лишняя — над колонкой стоит «Срок»; «Принято всё»
   и «Частично» стоят в одной линии. «Нет» рядом с «Да, принято» — форма `in-row`, она сама в линию. */
@media (min-width: 1280px) {
  .queue .due-label { display: none; }
  .queue td[data-label=""] > form:not(.in-row) { display: inline; }
  .queue td[data-label=""] > form:not(.in-row) ~ a.button { margin-left: 8px; }
}

/* Ниже 1280 px — телефон, планшет, узкое окно: раздел — заголовок и карточки по макетам склада и
   снабженца. Правила стоят после общих правил карточки списка (app.css): у них такая же весомость
   или меньше, и побеждает последнее. */
@media (max-width: 1279px) {
  /* Раздел — без рамки панели: заголовок капителью и число справа, под ним карточки. */
  .queue {
    max-width: 640px;
    margin: 0 0 20px;
    background: none;
    border: 0;
    box-shadow: none;
  }
  .queue .panel-head { margin: 0 0 10px; padding: 0 2px; border: 0; }
  .queue .panel-head > h2 {
    font-size: var(--eg-fs-13);
    line-height: var(--eg-lh-13);
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .queue .count {
    padding: 0;
    background: none;
    font-size: var(--eg-fs-13);
    line-height: var(--eg-lh-13);
    font-weight: 700;
  }
  .queue > .empty {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--eg-r-lg);
    box-shadow: var(--eg-shadow-1);
  }

  /* Карточка: срок, заголовок, подпись, кнопки — колонкой с промежутком 10 px, как `m-card`. */
  .queue table.data.list { max-width: none; padding: 0; }
  .queue table.data.list tr:not(.more-row) {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 0 10px;
    padding: 14px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--eg-r-lg);
    box-shadow: var(--eg-shadow-1);
  }
  .queue table.data.list td,
  .queue table.data.list td.cut {
    display: block;
    padding: 0;
    text-align: left;
  }
  /* Подписи колонок на карточке не нужны: у каждой ячейки своё место и вид. */
  .queue table.data.list td::before { content: none; }

  /* Срок — первой строкой: точка, «нужно к ДД.ММ» и слово; без срока строки нет вовсе. */
  .queue table.data.list td[data-label="Срок"] {
    order: -1;
    font-size: var(--eg-fs-13);
    line-height: var(--eg-lh-13);
    color: var(--muted);
  }
  .queue table.data.list td[data-label="Срок"]:not(:has(.due)) { display: none; }

  /* Заголовок — документ, главное в карточке; подпись под ним серым, в два пикселя от него. Заголовок
     переносится, а не обрезается: он целиком — ссылка, и нажатие по нему открывает карточку, а не
     раскрывает значение (раскрытие касанием — у подписи, где бывает комментарий согласующего). */
  .queue table.data.list td:first-child { font-size: 17px; line-height: 22px; font-weight: 700; }
  .queue table.data.list td.cut:first-child > .cut-value,
  .queue table.data.list td.cut:first-child > .cut-value:not(.expanded) * {
    white-space: normal;
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: clip;
    cursor: auto;
  }
  .queue table.data.list td:first-child a { color: var(--text); text-decoration: none; }
  .queue table.data.list td:first-child a:hover { text-decoration: underline; }
  .queue table.data.list td:nth-child(2) {
    margin-top: -8px;
    font-size: 14px;
    line-height: 20px;
    color: var(--muted);
  }

  /* Кнопки — во всю ширину карточки, высотой для пальца (48 px); главная — оранжевая, рядом
     («Частично», «Нет») — с рамкой, вровень по ширине. */
  .queue table.data.list td[data-label=""] { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
  .queue table.data.list td[data-label=""] > * { flex: 1 1 0; min-width: 0; margin: 0; }
  .queue table.data.list td[data-label=""] > form { display: flex; flex-wrap: wrap; gap: 8px; }
  .queue table.data.list td[data-label=""] button,
  .queue table.data.list td[data-label=""] a.button {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 48px;
    padding: 0 16px;
    font-size: 16px;
    text-align: center;
  }
  .queue table.data.list td[data-label=""] select { flex: 1 0 100%; min-height: 48px; max-width: none; }
  .queue table.data.list tr:not(.question) td[data-label=""] > a.button:first-child,
  .queue table.data.list tr:not(.question) td[data-label=""] > form:first-child > button:not(:disabled) {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--eg-on-action);
  }
  .queue table.data.list tr:not(.question) td[data-label=""] > a.button:first-child:hover,
  .queue table.data.list tr:not(.question) td[data-label=""] > form:first-child > button:not(:disabled):hover {
    background: var(--accent-dark);
    border-color: var(--accent-dark);
  }
  /* Причина неактивной кнопки — целиком, под кнопками. */
  .queue table.data.list td .why {
    display: block;
    flex: 1 0 100%;
    order: 9;
    max-width: none;
    margin: 0;
    overflow: visible;
    white-space: normal;
    font-size: 14px;
    line-height: 20px;
  }

  /* Вопрос бухгалтерии — карточка со значком слева от заголовка, как в макете склада: «Пришёл ли
     товар по …?», под ним позиции серым, кнопки ответа с рамкой — равные: ни «да», ни «нет» не главное. */
  .queue table.data.list tr.question td[data-label="Документ"] { position: relative; padding-left: 32px; }
  .queue table.data.list tr.question td[data-label="Документ"]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 22px;
    height: 22px;
    background: currentColor;
    -webkit-mask: var(--task-icon-chat) center / contain no-repeat;
    mask: var(--task-icon-chat) center / contain no-repeat;
  }
  .queue table.data.list tr.question td[data-label="Документ"] a { text-decoration: underline; }
  .queue table.data.list tr.question td:nth-child(2) { margin-top: -6px; padding-left: 32px; }
  .queue table.data.list tr.question td[data-label=""] > form.in-row { justify-content: stretch; }
}

/* Чипы на телефоне — одна прокручиваемая строка от края до края экрана, как в макете: пятое-шестое
   название не переносится, а уходит вправо; полосу прокрутки не рисуем. */
@media (max-width: 720px) {
  .queues {
    flex-wrap: nowrap;
    margin: 0 -16px 12px;
    padding: 0 16px 2px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .queues::-webkit-scrollbar { display: none; }
  .queues a { min-height: 40px; }
}