/* © 2026 VEYRO (ИП Макаров И. В.). appagent — проприетарная программа. Использование — по лицензионному договору https://appagent.ru/legal/offer/. Копирование и распространение без разрешения запрещены. */
/* Дашборд пульта: верхняя полоса — плашки «Нагрузка» и «Подписка Claude» (pult/js/dashboard/top.js).
   Только токены tokens.css, обе темы. На телефоне (до 768) плашки одна под другой, полосы свёрнуты в строку-итог до «Подробнее»;
   от 768 плашки рядом, полосы видны сразу. Касание не меньше 44 px (--size-touch-min). */

.dt { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); align-items: start; min-width: 0; }

.dt-blk {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); align-content: start; min-width: 0;
  padding: var(--space-4); border-radius: var(--radius-card); background: var(--surface-card); box-shadow: var(--shadow-ring);
  color: var(--color-ink); font: var(--text-ui-weight) var(--text-ui-size)/var(--text-ui-line) var(--font-sans);
}

/* ---------- Шапка плашки ---------- */
.dt-blk__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 var(--space-3); min-width: 0; } /* название и «Подробнее» — первая строка, состояние — вторая: одинаково в обеих плашках */
.dt-blk__head .dt-badge { grid-column: 1 / -1; grid-row: 2; }
.dt-blk__title { margin: 0; white-space: nowrap; font: var(--text-ui-strong-weight) var(--text-ui-strong-size)/var(--text-ui-strong-line) var(--font-head); letter-spacing: var(--text-h3-track); }
.dt-badge { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; color: var(--color-ink2); font: var(--text-label-weight) var(--text-label-size)/var(--text-caption-line) var(--font-sans); }
.dt-dot { flex: none; width: var(--size-status-dot); height: var(--size-status-dot); border-radius: var(--radius-round); background: var(--color-ink3); }
.dt-dot[data-tone="ok"] { background: var(--color-ok); }
.dt-dot[data-tone="warn"] { background: var(--color-warn); }
.dt-dot[data-tone="danger"] { background: var(--color-danger); }
.dt-dot[data-tone="wait"] { background: var(--color-acc); }

.dt-more { grid-column: 2; grid-row: 1; justify-self: end; gap: var(--space-1); white-space: nowrap; } /* «Подробнее» всегда в одной строке с названием */
.dt-chev {
  display: inline-block; width: var(--space-2); height: var(--space-2); margin-left: var(--space-1);
  border-right: var(--size-focus-width) solid currentColor; border-bottom: var(--size-focus-width) solid currentColor;
  transform: translateY(calc(var(--space-1) / -2)) rotate(45deg); transition: transform var(--duration-fast) var(--ease-out);
}
.dt-more[aria-expanded="true"] .dt-chev { transform: translateY(calc(var(--space-1) / 2)) rotate(-135deg); }

/* ---------- Итог одной строкой (телефон) и полосы ---------- */
.dt-blk__sum { margin: 0; color: var(--color-ink2); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); overflow-wrap: anywhere; }
.dt-blk[data-open="true"] .dt-blk__sum { display: none; }
.dt-body { display: none; gap: var(--space-4); min-width: 0; }
.dt-blk[data-open="true"] .dt-body { display: grid; }

.dt-ms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); align-content: start; min-width: 0; }
.dt-m { display: grid; gap: var(--space-1); min-width: 0; }
.dt-m__r { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); font: var(--text-label-weight) var(--text-label-size)/var(--text-caption-line) var(--font-sans); }
.dt-m__k { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-ink2); }
.dt-m__num { flex: none; color: var(--color-ink); white-space: nowrap; font: var(--text-mono-weight) var(--text-label-size)/var(--text-caption-line) var(--font-mono); font-variant-numeric: var(--num-features); }
.dt-m__num--none { color: var(--color-ink2); font-family: var(--font-sans); }
.dt-m[data-tone="warn"] .dt-m__num { color: var(--color-warn-text); }
.dt-m[data-tone="danger"] .dt-m__num { color: var(--color-danger-text); }

.dt-bar__p { --bar-fill: var(--color-ink3); --bar-track: var(--color-track); }
.dt-bar[data-tone="warn"] .dt-bar__p { --bar-fill: var(--color-warn); --bar-track: var(--color-track); }
.dt-bar[data-tone="danger"] .dt-bar__p { --bar-fill: var(--color-danger); --bar-track: var(--color-track); }

/* ---------- Аккаунты подписки ---------- */
.dt-acc { display: grid; gap: var(--space-2); min-width: 0; }
.dt-acc + .dt-acc { padding-top: var(--space-3); border-top: 1px solid var(--color-line); }
.dt-acc__n { margin: 0; color: var(--color-ink); font: var(--text-ui-strong-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); overflow-wrap: anywhere; }
.dt-none { margin: 0; color: var(--color-ink2); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); overflow-wrap: anywhere; }

/* ---------- Пауза из-за нагрузки, общая пауза, кнопки ---------- */
.dt-note, .dt-hv__t {
  display: flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--color-ink2);
  font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans);
}
.dt-hv { display: grid; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-ctl); background: var(--color-panel2); }
.dt-hv__t { color: var(--color-ink); font-weight: var(--text-ui-strong-weight); }
.dt-hv__l { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style-type: none; }
.dt-hv__i { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); min-width: 0; }
.dt-hv__w { flex: 1 1 12rem; min-width: 0; color: var(--color-ink2); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); overflow-wrap: anywhere; }
.dt-acts { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.dt-btn { min-height: var(--size-touch-min); }

/* ---------- Под «Подробнее» ---------- */
.dt-blk__x { display: grid; gap: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-line); min-width: 0; }
.dt-blk__x[hidden] { display: none; }
.dt-det { display: grid; gap: var(--space-2); min-width: 0; }
.dt-rows { display: grid; gap: var(--space-2); margin: 0; }
.dt-row { display: flex; justify-content: space-between; gap: var(--space-3); color: var(--color-ink2); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }
.dt-row__k, .dt-row__num { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.dt-row__num { color: var(--color-ink); text-align: right; font-family: var(--font-mono); font-variant-numeric: var(--num-features); }

/* Доля моделей: полоса и таблица «по расходу / по вызовам» */
.dt-models { display: grid; gap: var(--space-2); min-width: 0; }
.dt-models__t { margin: 0; font: var(--text-ui-strong-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }
.dt-split { display: block; width: 100%; height: var(--space-2); border-radius: var(--radius-pill); overflow: hidden; background: var(--color-track); }
.dt-split rect[data-m="opus"], .dt-mdot[data-m="opus"] { fill: var(--color-model-opus); background: var(--color-model-opus); }
.dt-split rect[data-m="sonnet"], .dt-mdot[data-m="sonnet"] { fill: var(--color-model-sonnet); background: var(--color-model-sonnet); }
.dt-split rect[data-m="haiku"], .dt-mdot[data-m="haiku"] { fill: var(--color-model-haiku); background: var(--color-model-haiku); }
.dt-tbl { width: 100%; border-collapse: collapse; font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }
.dt-tbl th, .dt-tbl td { padding: var(--space-1) 0; text-align: right; font-weight: var(--text-caption-weight); }
.dt-tbl__h { color: var(--color-ink3); font-size: var(--text-label-size); }
.dt-tbl__n { text-align: left; color: var(--color-ink2); }
.dt-tbl th.dt-tbl__n { text-align: left; }
.dt-tbl__num { color: var(--color-ink); font-family: var(--font-mono); font-variant-numeric: var(--num-features); white-space: nowrap; }
.dt-mdot { display: inline-block; width: var(--space-2); height: var(--space-2); margin-right: var(--space-2); border-radius: var(--radius-round); }

/* ---------- Планшет и компьютер: плашки рядом, полосы видны сразу ---------- */
@media (min-width: 48rem) {
  .dt { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; } /* плашки рядом одной высоты */
  .dt-body { display: grid; }
  .dt-blk__sum { display: none; }
}

/* ---------- Телефон (390): кнопки на всю ширину, касание не меньше 44 px ---------- */
@media (max-width: 47.9375rem) {
  .dt-more { min-width: var(--size-touch-min); }
  .dt-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dt-hv__i .dt-btn { width: 100%; }
}
@media (max-width: 26.25rem) {
  .dt-blk { padding: var(--space-3); }
  .dt-ms { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Широкий экран: название, состояние и «Подробнее» в одну строку ---------- */
@media (min-width: 80rem) {
  .dt-blk__head { display: flex; flex-wrap: nowrap; gap: var(--space-1) var(--space-3); }
  .dt-blk__head .dt-badge { grid-column: auto; grid-row: auto; }
  .dt-more { flex: none; margin-left: auto; }
}

/* ---------- Без движения ---------- */
@media (prefers-reduced-motion: reduce) {
  .dt-chev, .dt .btn { transition: none; }
  .dt .btn:active { transform: none; }
}