/* © 2026 VEYRO (ИП Макаров И. В.). appagent — проприетарная программа. Использование — по лицензионному договору https://appagent.ru/legal/offer/. Копирование и распространение без разрешения запрещены. */
/* Набор компонентов пульта (pult/js/ui): чип состояния, показатель, сегменты, поповер, диалог, уведомление.
   Плитка и вложенный элемент (.tile, .tile__inner) — в base.css. Значения — только из tokens.css. */

/* ---------- Чип состояния: значок + слово на мягкой подложке тона ---------- */
.ui-chip {
  --chip-bg: var(--color-panel2); --chip-fg: var(--color-ink2);
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--space-6); padding-inline: var(--space-3);
  border-radius: var(--radius-pill); background: var(--chip-bg); color: var(--chip-fg);
  font: var(--weight-medium) var(--text-caption-size)/1.2 var(--font-sans);
  white-space: nowrap; cursor: default; user-select: none;
}
.ui-chip .ic { width: 1rem; height: 1rem; }
.ui-chip[data-tone="acc"] { --chip-bg: var(--color-acc-soft); --chip-fg: var(--color-acc-soft-text); }
.ui-chip[data-tone="ok"] { --chip-bg: var(--color-ok-soft); --chip-fg: var(--color-ok-soft-text); }
.ui-chip[data-tone="warn"] { --chip-bg: var(--color-warn-soft); --chip-fg: var(--color-warn-soft-text); }
.ui-chip[data-tone="danger"] { --chip-bg: var(--color-danger-soft); --chip-fg: var(--color-danger-soft-text); }

/* ---------- Показатель: подпись, крупное значение, пояснение ---------- */
.ui-kpi { display: grid; gap: var(--space-1); align-content: start; min-width: 0; color: inherit; text-decoration: none; }
a.ui-kpi { min-height: var(--size-touch-min); }
.ui-kpi__l { color: var(--color-ink2); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }
.ui-kpi__v {
  color: var(--color-ink); font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: var(--text-h2-size); line-height: var(--text-h2-line); letter-spacing: var(--text-h2-track); overflow-wrap: anywhere;
}
.ui-kpi__h { color: var(--color-ink3); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }
a.ui-kpi:hover .ui-kpi__v { color: var(--color-acc-text); }

/* ---------- Сегменты (role=tablist): вкладки с подчёркиванием активной ---------- */
.ui-seg { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); border-bottom: 1px solid var(--color-line2); }
.ui-seg__b {
  position: relative; display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--size-touch-min); padding: 0; background: none; border: 0; cursor: pointer;
  color: var(--color-ink2); font: var(--text-ui-strong-weight) var(--text-ui-size)/1 var(--font-sans);
  transition: color var(--duration-fast) var(--ease-out);
}
.ui-seg__b::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--color-acc);
  transform: scaleX(0); transform-origin: left; transition: transform var(--duration-base) var(--ease-out);
}
.ui-seg__b[aria-selected="true"] { color: var(--color-ink); }
.ui-seg__b[aria-selected="true"]::after { transform: scaleX(1); }
.ui-seg__b:hover:not(:disabled) { color: var(--color-ink); }
.ui-seg__b:disabled { color: var(--color-ink3); cursor: not-allowed; }
.ui-seg__n { color: var(--color-ink3); font-variant-numeric: tabular-nums; font-weight: var(--weight-regular); }

/* ---------- Поповер: панель встаёт сразу после опоры, родитель опоры — точка отсчёта ---------- */
[data-pop-host] { position: relative; }
.ui-pop {
  position: absolute; z-index: var(--z-overlay); top: calc(100% + var(--space-2));
  width: max-content; max-width: min(22rem, calc(100vw - var(--space-8)));
  padding: var(--space-4); display: grid; gap: var(--space-3);
  background: var(--color-panel); border: 1px solid var(--color-line2); border-radius: var(--tile-radius); box-shadow: var(--shadow-md);
  color: var(--color-ink); font: var(--text-ui-weight) var(--text-ui-size)/var(--text-ui-line) var(--font-sans);
  opacity: 0; visibility: hidden; transform: translateY(calc(var(--space-1) * -1));
  transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), visibility var(--duration-fast);
}
.ui-pop[data-placement="start"] { inset-inline-start: 0; }
.ui-pop[data-placement="end"] { inset-inline-end: 0; }
/* Мост над щелью: указатель переходит с опоры на панель, не закрывая её */
.ui-pop::before { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--space-2) * -1 - 1px); height: var(--space-2); }
.ui-pop[data-open="true"] { opacity: 1; visibility: visible; transform: none; }

/* ---------- Диалог ---------- */
.ui-dialog {
  width: min(calc(100% - var(--space-8)), 28rem); max-height: calc(100dvh - var(--space-8)); margin: auto; padding: 0; overflow: auto;
  background: var(--color-panel); color: var(--color-ink); border: 1px solid var(--color-line2); border-radius: var(--tile-radius); box-shadow: var(--shadow-lg);
}
.ui-dialog::backdrop { background: var(--color-scrim); }
.ui-dialog__in { display: grid; gap: var(--space-4); padding: var(--space-6); }
.ui-dialog__h { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.ui-dialog__t { margin: 0; font: var(--text-h3-weight) var(--text-h3-size)/var(--text-h3-line) var(--text-h3-family); letter-spacing: var(--text-h3-track); }
.ui-dialog__x {
  display: inline-flex; align-items: center; justify-content: center; flex: none; margin: calc(var(--space-2) * -1);
  width: var(--size-touch-min); height: var(--size-touch-min); background: none; border: 0; border-radius: var(--radius-pill);
  color: var(--color-ink2); cursor: pointer;
}
.ui-dialog__x:hover { color: var(--color-ink); background: var(--color-panel2); }
.ui-dialog__b { color: var(--color-ink2); font: var(--text-ui-weight) var(--text-ui-size)/var(--text-ui-line) var(--font-sans); }
.ui-dialog__p { margin: 0; }
.ui-dialog__a { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2) var(--space-3); }
.btn.ui-btn--danger { border-color: var(--color-danger-soft-text); color: var(--color-danger-soft-text); }
.btn.ui-btn--danger:hover { background: var(--color-danger-soft); border-color: var(--color-danger-soft-text); }
@media (max-width: 47.9375rem) {
  .ui-dialog__a { flex-direction: column-reverse; }
  .ui-dialog__a .btn { width: 100%; }
}

/* ---------- Уведомление (одна область внизу по центру) ---------- */
.ui-toast {
  position: fixed; z-index: var(--z-toast); left: 50%; bottom: var(--space-6);
  transform: translate(-50%, var(--space-4)); opacity: 0; visibility: hidden;
  max-width: calc(100% - var(--space-8)); padding: var(--space-3) var(--space-6);
  background: var(--color-panel); color: var(--color-ink); border: 1px solid var(--color-line2); border-radius: var(--radius-pill); box-shadow: var(--shadow-md);
  font: var(--text-ui-weight) var(--text-ui-size)/1.3 var(--font-sans); overflow-wrap: anywhere;
  transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out), visibility var(--duration-base);
}
.ui-toast[data-open="true"] { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.ui-toast[data-tone="ok"] { border-color: var(--color-ok-soft-text); }
.ui-toast[data-tone="warn"] { border-color: var(--color-warn-soft-text); }
.ui-toast[data-tone="danger"] { border-color: var(--color-danger-soft-text); }
@media (min-width: 64rem) { .ui-toast { bottom: var(--space-8); } }
@media print { .ui-toast, .ui-pop { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .ui-seg__b, .ui-seg__b::after, .ui-pop, .ui-toast { transition: none; }
}