/* © 2026 VEYRO (ИП Макаров И. В.). appagent — проприетарная программа. Использование — по лицензионному договору https://appagent.ru/legal/offer/. Копирование и распространение без разрешения запрещены. */
/* Дашборд пульта: доска из четырёх столбцов и карточки (макет D3, docs/project-panel/dashboard/dashboard.css).
   Только токены tokens.css, обе темы, без цветов и пикселей вне токенов. Локальные значения без токена (мин. ширина столбца 15rem,
   пульсация полосы, кольцо внимания) — переменные в «Локальные переменные».
   Прокручивается только страница: у столбцов нет своей высоты и прокрутки, шапки столбцов закреплены (sticky) под шапкой приложения.
   Поэтому ни у доски, ни у столбцов нет overflow (иначе sticky привяжется к ним, а не к странице). Четыре столбца не помещаются —
   два на два (контейнерный запрос), горизонтальной прокрутки нет; overflow-x: auto включается только классом can-scroll (scroll.js)
   на случай, когда что-то всё же шире окна.
   Классы карточки (.db-card*, .db-progress*, .db-btn, .db-link) — контракт card.js; их же используют списки «все» (dashboard-list.css). */

/* ---------- Локальные переменные ---------- */
.db, .db-card {
  --db-col-min: 15rem;
  --db-pulse-dur: 1.8s;
  --db-pulse-w: var(--space-8);
  --db-pulse-run: var(--space-12);
  --db-ring: color-mix(in srgb, var(--color-acc) 40%, var(--color-line2));
  /* Где останавливаются шапки столбцов: шапка приложения закреплена только от 80rem (shell.css), раньше она уезжает вместе со страницей. */
  --db-stick: 0;
}
/* Шапка приложения ниже --layout-topbar на 1 px (отступы + 2,75rem + линия): запас в --space-1 прячет щель под ней, карточки в щель не заглядывают. */
@media (min-width: 80rem) { .db { --db-stick: calc(var(--layout-topbar) - var(--space-1)); } }

/* Экран на всю ширину окна: четыре столбца помещаются от 63rem ширины рабочей области (1440 с левым меню — помещаются), уже — два на два. */
.screen[data-screen="dashboard"] { max-width: none; }
.db { container: db / inline-size; }
.screen[data-screen="dashboard"] a { text-decoration: none; }
.db-top { margin-top: var(--space-4); }
.db-main { margin-top: var(--space-6); }
.db [hidden] { display: none; }

.db-note { margin: 0; color: var(--color-ink2); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }
.db-note[data-tone="danger"] { color: var(--color-danger-text); }
.db-hint { margin: 0 0 var(--space-2); color: var(--color-ink3); font: var(--text-label-weight) var(--text-label-size)/var(--space-4) var(--font-sans); }

/* ---------- Переключатель этапов (телефон) ---------- */
.db-segs { display: none; }
.db-segs .ui-seg { display: flex; flex-wrap: nowrap; width: 100%; gap: 0; }
.db-segs .ui-seg__b { flex: 1 1 0; min-width: 0; min-height: var(--size-touch-min); padding-inline: var(--space-1); justify-content: center; gap: var(--space-1); }

/* ---------- Доска ---------- */
.db-board {
  display: grid; grid-template-columns: repeat(4, minmax(var(--db-col-min), 1fr)); gap: var(--space-4); align-items: start;
  margin-inline: calc(var(--space-2) * -1); padding: 0 var(--space-2);
}
/* Четыре столбца по 15rem с зазорами (63rem) не помещаются — два на два. */
@container db (max-width: 63rem) {
  .db-board { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-8); }
}
/* Запасной путь: что-то всё же шире окна — доска листается вбок (sticky тогда держится внутри доски). */
.db-board.can-scroll { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--color-line2) transparent; }
.db-board.can-scroll { cursor: grab; }
.db-board.is-drag { cursor: grabbing; user-select: none; }
.db-board:focus-visible { outline-offset: calc(var(--size-focus-width) * -1); }
.db-board.is-drag .db-card__link { pointer-events: none; }

/* Столбец без своей высоты и прокрутки: карточки не срезаются; поля по бокам оставляют место свечению карточек. */
.db-col {
  display: grid; align-content: start; gap: var(--space-3); min-width: 0;
  margin-inline: calc(var(--space-2) * -1); padding: 0 var(--space-2) var(--space-3);
}
.db-col__head {
  position: sticky; top: var(--db-stick); z-index: var(--z-sticky); background: var(--surface-page);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-3); row-gap: var(--space-1);
  padding: var(--space-1) 0 var(--space-3); border-bottom: 1px solid var(--color-line);
}
.db-col__title { margin: 0; font: var(--text-h3-weight) var(--text-h3-size)/var(--space-6) var(--font-head); letter-spacing: var(--text-h3-track); }
.db-ttl-s { display: none; }
.db-col__count {
  padding: var(--space-1) var(--space-2); border-radius: var(--radius-pill); background: var(--color-panel); box-shadow: var(--shadow-ring);
  color: var(--color-ink2); font: var(--weight-regular) var(--text-mono-size)/var(--space-4) var(--font-mono); font-variant-numeric: var(--num-features); white-space: nowrap;
}
.db-col__count[data-hot="true"] { color: var(--color-acc-text); box-shadow: 0 0 0 1px var(--db-ring), var(--shadow-attn-glow); }
.db-col__hint { grid-column: 1 / -1; margin: 0; color: var(--color-ink3); font: var(--text-label-weight) var(--text-label-size)/var(--space-4) var(--font-sans); }
.db-col__list { display: grid; gap: var(--space-3); align-content: start; min-width: 0; }

/* ---------- Карточка ---------- */
.db-card {
  position: relative; display: grid; gap: var(--space-2); align-content: start; min-width: 0;
  padding: var(--space-3) var(--space-4); background: var(--surface-card); border-radius: var(--radius-card); box-shadow: var(--shadow-ring);
  color: var(--color-ink); transition: box-shadow var(--duration-base) var(--ease-out), opacity var(--duration-fast) var(--ease-out);
}
.db-card:hover { box-shadow: 0 0 0 1px var(--color-line2); }
.db-card[data-waiting="true"], .db-card[data-waiting="true"]:hover { box-shadow: 0 0 0 1px var(--db-ring), var(--shadow-attn-glow); }
.db-card[aria-busy="true"] { opacity: .7; }
.db-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: var(--space-4); font: var(--text-label-weight) var(--text-label-size)/var(--space-4) var(--font-sans); }
.db-card__project { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-ink2); }
.db-card__group-count { flex: none; margin-left: auto; color: var(--color-ink2); font: var(--weight-regular) var(--text-mono-size)/var(--space-4) var(--font-mono); font-variant-numeric: var(--num-features); }
.db-card__time, .db-card__since { flex: none; color: var(--color-ink3); font: var(--weight-regular) var(--text-mono-size)/var(--space-4) var(--font-mono); font-variant-numeric: var(--num-features); white-space: nowrap; }
.db-card__title {
  margin: 0; font: var(--text-ui-strong-weight) var(--text-ui-strong-size)/var(--space-5) var(--font-head); letter-spacing: var(--text-h3-track);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Вся карточка кликабельна через ссылку названия; кнопки и ссылки действий лежат выше неё. */
.db-card__link { color: inherit; }
.db-card__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-card); }
.db-card__link:focus-visible { outline: none; }
.db-card__link:focus-visible::after { outline: var(--size-focus-width) solid var(--color-focus); outline-offset: var(--size-focus-width); }
.db-card__status { display: flex; align-items: flex-start; gap: var(--space-2); min-width: 0; margin: 0; font: var(--text-caption-weight) var(--text-caption-size)/var(--space-5) var(--font-sans); }
.db-card__dot {
  flex: none; width: var(--size-status-dot); height: var(--size-status-dot); margin-top: calc((var(--space-5) - var(--size-status-dot)) / 2);
  border-radius: var(--radius-round); background: var(--color-ink3);
}
.db-card__dot[data-kind="run"] { background: var(--color-acc); }
.db-card__dot[data-kind="question"] { background: var(--color-dot-wait); }
.db-card__dot[data-kind="error"] { background: var(--color-danger); }
.db-card__dot[data-kind="review"], .db-card__dot[data-kind="done"] { background: var(--color-dot-ok); }
.db-card--paused .db-card__dot { background: var(--color-ink3); }
.db-card__phrase { flex: 1 1 auto; min-width: 0; }
.db-card--done .db-card__phrase { color: var(--color-ink2); }
.db-card__since { margin-left: auto; line-height: var(--space-5); }
.db-card__text {
  margin: 0; color: var(--color-ink2); font: var(--text-caption-weight) var(--text-caption-size)/var(--space-5) var(--font-sans);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.db-card--question .db-card__text { color: var(--color-ink); font-weight: var(--weight-medium); }
.db-card__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-width: 0; }
.db-card__step { color: var(--color-ink2); font: var(--text-label-weight) var(--text-label-size)/var(--space-4) var(--font-sans); }
.db-card__account { color: var(--color-ink3); font: var(--text-label-weight) var(--text-label-size)/var(--space-4) var(--font-sans); white-space: nowrap; }

/* ---------- Линия прогресса и пульсация у края заполнения (только transform и opacity) ---------- */
.db-progress {
  position: relative; height: var(--size-progress); border-radius: var(--radius-pill); background: var(--bar-track); overflow: hidden;
  --db-fill: var(--color-ink3);
}
.db-progress--run { --db-fill: var(--color-acc); }
.db-progress--danger { --db-fill: var(--color-danger); }
.db-progress__fill { position: absolute; top: 0; bottom: 0; left: 0; width: var(--p, 0%); border-radius: inherit; background: var(--db-fill); }
.db-progress__pulse {
  position: absolute; top: 0; bottom: 0; left: var(--p, 0%); width: var(--db-pulse-w); border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--color-acc), transparent); opacity: 0; transform: translateX(calc(var(--db-pulse-w) * -1)); pointer-events: none;
  animation: db-pulse var(--db-pulse-dur) var(--ease-out) infinite; will-change: transform, opacity;
}
@keyframes db-pulse {
  0% { opacity: 0; transform: translateX(calc(var(--db-pulse-w) * -1)); }
  25% { opacity: .85; }
  100% { opacity: 0; transform: translateX(var(--db-pulse-run)); }
}
/* На паузе полоса стоит (элемента пульса у такой карточки нет, правило — страховка). */
.db-card--paused .db-progress__pulse { animation: none; opacity: 0; }

/* ---------- Действия ---------- */
.db-card__actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--space-2); min-width: 0; }
.db-card__actions > a, .db-card__actions > button { position: relative; z-index: 1; }
.db-btn {
  flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; padding: var(--space-2) var(--space-3);
  min-height: var(--size-ctl); border: 1px solid var(--color-line2); border-radius: var(--radius-ctl); background: var(--color-panel2); color: var(--color-ink);
  cursor: pointer; text-align: center; text-wrap: balance; white-space: normal; line-height: 1.2;
  font: var(--text-ui-strong-weight) var(--text-caption-size)/1.2 var(--font-sans);
  transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out);
}
.db-btn:hover { background: var(--surface-inner-hover); border-color: var(--color-ink3); }
.db-btn--primary { background: var(--color-acc); border-color: var(--color-acc); color: var(--color-on-acc); }
.db-btn--primary:hover { background: color-mix(in srgb, var(--color-acc) 86%, var(--color-ink)); border-color: transparent; }
.db-btn:disabled { opacity: .5; cursor: not-allowed; }
.db-link {
  flex: 1 0 100%; display: inline-flex; align-items: center; justify-content: center; min-height: var(--size-ctl-sm); color: var(--color-acc-text);
  font: var(--text-ui-strong-weight) var(--text-caption-size)/1.2 var(--font-sans);
}
.db-link:hover { text-decoration: underline; }
/* «Открыть вопрос» как главное действие: выглядит как главная кнопка и делит строку с «Отложить». */
.db-link--primary {
  flex: 1 1 0; min-width: 0; min-height: var(--size-ctl); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-acc); border-radius: var(--radius-ctl);
  background: var(--color-acc); color: var(--color-on-acc); text-align: center;
}
.db-link--primary:hover { background: color-mix(in srgb, var(--color-acc) 86%, var(--color-ink)); text-decoration: none; }
/* «Отложить» в «Ждёт решения» — второстепенное: без заливки. */
.db-card--question .db-btn[data-act="later"] { background: transparent; color: var(--color-ink2); }
.db-card--question .db-btn[data-act="later"]:hover { background: var(--surface-inner-hover); color: var(--color-ink); }
/* Очередь, «В работе» и «Готово»: одно спокойное действие справа, без заливки. */
.db-card--queue .db-card__actions, .db-card--run .db-card__actions, .db-card--done .db-card__actions { flex-wrap: nowrap; justify-content: flex-end; }
.db-card--queue .db-btn, .db-card--run .db-btn { flex: 0 0 auto; min-height: var(--size-ctl-sm); border-color: transparent; background: transparent; color: var(--color-ink2); }
.db-card--queue .db-btn:hover, .db-card--run .db-btn:hover { background: var(--surface-inner-hover); color: var(--color-ink); }
.db-card--done .db-link { flex: 0 0 auto; padding-inline: var(--space-2); }
.db-btn:focus-visible, .db-link:focus-visible { outline: var(--size-focus-width) solid var(--color-focus); outline-offset: var(--size-focus-offset); }

/* ---------- Пустые места, «Ещё N», свободное место ---------- */
.db-empty { display: grid; gap: var(--space-2); justify-items: start; padding: var(--space-4); border: 1px dashed var(--color-line2); border-radius: var(--radius-card); }
.db-empty__t { margin: 0; color: var(--color-ink2); font: var(--text-ui-strong-weight) var(--text-ui-strong-size)/var(--space-5) var(--font-sans); }
.db-slot {
  display: flex; align-items: center; gap: var(--space-3); min-height: var(--space-12); padding: var(--space-3) var(--space-4);
  border: 1px dashed var(--color-line2); border-radius: var(--radius-card); color: var(--color-ink3); font: var(--text-caption-weight) var(--text-caption-size)/var(--space-5) var(--font-sans);
}
.db-slot::before { content: ""; flex: none; width: var(--size-status-dot); height: var(--size-status-dot); border-radius: var(--radius-round); box-shadow: 0 0 0 1px var(--color-line2); }
.db-more {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--size-ctl); padding: 0 var(--space-4);
  border: 1px dashed var(--color-line2); border-radius: var(--radius-ctl); color: var(--color-ink2); text-align: center;
  font: var(--weight-medium) var(--text-caption-size)/1 var(--font-sans);
  transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.db-more:hover { background: var(--surface-inner-hover); color: var(--color-ink); }
.db-more:focus-visible { outline: var(--size-focus-width) solid var(--color-focus); outline-offset: var(--size-focus-offset); }
.db-more__num { font-family: var(--font-mono); font-variant-numeric: var(--num-features); }

/* ---------- Телефон: один столбец, переключатель этапов, касания не меньше 44, без вложенной прокрутки ---------- */
@media (max-width: 47.9375rem) {
  .db-main { margin-top: var(--space-4); }
  .db-segs { display: block; }
  .db-hint { display: none; }
  .db-ttl-w { display: none; }
  .db-ttl-s { display: inline; }
  .db-board, .db-board.can-scroll { grid-template-columns: minmax(0, 1fr); overflow: visible; margin-inline: 0; padding: 0; margin-top: var(--space-4); cursor: auto; }
  .db-col { margin-inline: 0; padding: 0; }
  .db-board[data-seg="queue"] .db-col:not([data-col="queue"]),
  .db-board[data-seg="run"] .db-col:not([data-col="run"]),
  .db-board[data-seg="decide"] .db-col:not([data-col="decide"]),
  .db-board[data-seg="done"] .db-col:not([data-col="done"]) { display: none; }
  .db-btn, .db-card--queue .db-btn, .db-card--run .db-btn { min-height: var(--size-touch-min); }
  .db-link, .db-more { min-height: var(--size-touch-min); }
  .db-card__link { display: block; padding-block: var(--space-2); }
}

@media (prefers-reduced-motion: reduce) {
  .db-progress__pulse { animation: none; opacity: 0; will-change: auto; }
  .db-card, .db-btn, .db-more { transition: none; }
}