/* © 2026 VEYRO (ИП Макаров И. В.). appagent — проприетарная программа. Использование — по лицензионному договору https://appagent.ru/legal/offer/. Копирование и распространение без разрешения запрещены. */
/* Экран «Обзор»: плашка (компьютер, работа, расход), решения, «Идёт сейчас», «Требует внимания», последние события.
   Подключён в index.html после project.css; значения — только из tokens.css, размеры в rem. Каждая часть — плитка kit (.tile).
   Раскладка: 390 — одна колонка; с 64rem — «Требует внимания» и «Последние события» рядом, остальное на всю ширину.
   Заголовок экрана и ошибка связи — общие, лежат в screens.css. */

/* ---------- Обзор ---------- */
.dash { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--tile-gap); align-items: start; }
.dsec { min-width: 0; }
.dsec__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); min-height: var(--size-touch-min); margin-bottom: var(--space-2); }
.dsec__none { color: var(--color-ink2); font: var(--text-ui-weight) var(--text-ui-size)/var(--text-ui-line) var(--font-sans); }
.overview__state:empty { display: none; }
.ov-res:empty { display: none; }
.ov-res[data-tone="ok"] { color: var(--color-ok-text); }
.ov-res[data-tone="warn"] { color: var(--color-warn-text); }
@media (min-width: 64rem) {
  .dash { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dsec--band, .dsec--dec, .dsec--now { grid-column: 1 / -1; }
}

/* Плашка: три группы; на телефоне друг под другом, с 48rem — три колонки */
.ov-band__g { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
.ov-grp { display: grid; gap: var(--space-2); align-content: start; min-width: 0; }
.ov-grp > .dsec__top { margin-bottom: 0; }
.ov-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr)); gap: var(--space-4); }
@media (min-width: 48rem) {
  .ov-band__g { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); }
}

/* Шкала задач у работающего проекта: нативный progress, ширину задаёт value (inline-стили запрещены политикой безопасности) */
.pcard__bar { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-1); }
.ov-bar {
  -webkit-appearance: none; appearance: none; display: block; flex: 1 1 auto; min-width: 0; height: var(--space-2);
  border: 0; border-radius: var(--radius-pill); overflow: hidden; background: var(--color-line); color: var(--color-acc);
}
.ov-bar::-webkit-progress-bar { background: var(--color-line); border-radius: var(--radius-pill); }
.ov-bar::-webkit-progress-value { background: var(--color-acc); border-radius: var(--radius-pill); }
.ov-bar::-moz-progress-bar { background: var(--color-acc); border-radius: var(--radius-pill); }
.pcard__barv { color: var(--color-ink2); font-size: var(--text-label-size); white-space: nowrap; }

/* Переключатель периода в заголовке событий */
.ov-seg { border-bottom: 0; }
.ov-more { margin-top: var(--space-3); }

/* Предупреждения: значок, «что случилось» и под ним «что сделать»; одна строка списка — одно предупреждение */
.alerts { display: grid; gap: var(--space-2); }
.alert {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-4); row-gap: var(--space-2);
  padding: var(--space-4); background: var(--surface-inner); border-radius: var(--inner-radius);
}
.alert__ic { display: inline-flex; color: var(--color-ink3); }
.alert__ic .ic { width: 1rem; height: 1rem; }
.alert[data-attention="stopped"] .alert__ic { color: var(--color-danger-text); }
.alert[data-attention="warning"] .alert__ic { color: var(--color-warn-text); }
.alert__dl { display: grid; gap: var(--space-1); min-width: 0; }
.alert__v { margin: 0; overflow-wrap: anywhere; }
.alert__todo { color: var(--color-ink2); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }
@media (max-width: 40rem) {
  .alert { grid-template-columns: auto minmax(0, 1fr); }
  .alert > .btn { grid-column: 2; justify-self: start; }
}

/* Ячейка суммы расхода. Экран теперь рисует суммы через kpi, но tests/pult-kit.test.mjs и tests/pult-shell.test.mjs
   (вне зоны задачи) ещё проверяют эти два правила; уберите их вместе с тестами, когда лид перенесёт проверку на .ui-kpi__v. */
.usage-tile { min-width: 0; padding: var(--space-4); background: var(--color-panel); }
.usage-tile__v {
  white-space: nowrap;
  font: var(--text-number-lg-weight) var(--text-h2-size)/var(--text-number-lg-line) var(--text-number-lg-family);
  letter-spacing: var(--text-number-lg-track); font-variant-numeric: tabular-nums;
}

/* Последние события */
.feed { display: grid; }
.feed__i {
  display: grid; gap: var(--space-1) var(--space-4); align-items: center;
  padding: var(--space-3) 0; border-top: 1px solid var(--color-line);
}
.feed__i:last-child { border-bottom: 1px solid var(--color-line); }
.feed__t { white-space: nowrap; color: var(--color-ink3); font-size: var(--text-label-size); }
.feed__a {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-1);
  min-height: var(--size-touch-min); color: inherit; text-decoration: none; overflow-wrap: anywhere;
  font: var(--text-ui-weight) var(--text-ui-size)/var(--text-ui-line) var(--font-sans);
}
a.feed__a:hover { text-decoration: underline; }
@media (min-width: 40rem) {
  .feed__i { grid-template-columns: calc(var(--space-16) * 2) minmax(0, 1fr); }
}