/* components-next.css — UI-компоненты из прототипа workout-tracker.
   Каждый класс — один визуальный паттерн, все цвета — токенами --ui-*.
   Подключать ПОСЛЕ theme-next.css. */

/* ═══════ LAYOUT ═══════ */

/* Client ui-page screens live inside base.html .container — reset wrapper
   padding so the page is full-bleed. */
.container:has(.ui-page) {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
}

body:has(.ui-page) {
  background: var(--ui-bg);
}

/* Nested .container inside ui-page content areas */
.ui-page > .container,
.ui-page .container {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
}
/* ═══════ HEADER BAR ═══════ */
/* Используется: все экраны. Sticky top bar с back/home кнопками */
/* Подзаголовок над title (как в прототипе: «ДЕНЬ 4 · СРЕДА») */
/* ═══════ CARDS ═══════ */
/* Базовая карточка — используется везде */
/* ═══════ SECTION CARD (report-form sections) ═══════ */
/* ═══════ NAV ROW (dashboard navigation cards) ═══════ */
/* Используется: client_welcome.html — кнопки "Мои тренировки", "Отчёты" и т.д. */
/* ═══════ PILL / BADGE ═══════ */


/* Белый в базе — ради варианта --alert: он залит --ui-fire, пары --ui-on-fire
   нет. У акцентного варианта пара есть, поэтому там --ui-on-accent. */
.nx-badge {
  min-width: 22px;
  height: 22px;
  padding: 0 var(--ui-s-2);
  border-radius: var(--ui-r-pill);
  color: #fff;
  font-size: var(--ui-t-xs);
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ═══════ BUTTONS ═══════ */

/* Вид AI-кнопки задаёт слой, здесь остаётся только состояние ожидания.
   Фиолетовый числами: токена под него нет — как и в самом `.ui-btn--ai`. */
.ui-btn--ai.is-loading {
  background: linear-gradient(90deg, #9B5DE5 0%, #6B5CFF 50%, #9B5DE5 100%);
  background-size: 200% 100%;
  animation: nx-aiPulse 1.4s linear infinite;
  cursor: wait;
}

/* Вкладки удалены: разметки с nx-tabs* в продукте нет, переключатели собираются
   из .ui-tabs / .ui-tab / .ui-tab-count слоя. */

/* ═══════ SET ROW (exercise sets — 3 states) ═══════ */
/* Используется: exercise_details.html, superset_details.html */

/* Done state — зелёная компактная строка */
/* shared spacing */
.nx-set--done, .nx-set--active, .nx-set--future {
  margin-bottom: var(--ui-s-2);
}

.nx-set--done {
  display: flex;
  align-items: center;
  gap: var(--ui-s-3);
  padding: var(--ui-s-3) var(--ui-s-4);
  border-radius: var(--ui-r-md);
  background: color-mix(in srgb, var(--ui-success) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--ui-success) 18%, transparent);
}

.nx-set__summary {
  flex: 1;
  font-size: var(--ui-t-md);
  font-weight: 600;
  color: var(--ui-text);
}

/* Галочка на зелёной заливке — парный --ui-on-success: в тёмной теме
   --ui-success светлеет до #2EB584, и белая галочка даёт по нему 2.6:1. */
.nx-set__check {
  width: 32px;
  height: 32px;
  border-radius: var(--ui-r-sm);
  flex-shrink: 0;
  background: var(--ui-success);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ui-on-success);
}

/* Active state — подсвеченный редактор */
.nx-set--active {
  padding: var(--ui-s-4);
  border-radius: var(--ui-r-lg);
  background: color-mix(in srgb, var(--ui-accent) 5%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--ui-accent) 35%, transparent);
  /* Тень подхвачена из слоя: rgba(0,0,0,0.2) одним слоем не зависит от темы.
     Кольцо-подсветка остаётся своим. */
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-accent) 6%, transparent), var(--ui-shadow-md);
}

/* Active substructure */
.nx-set__header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ui-s-2);
  margin-bottom: var(--ui-s-3);
}

.nx-set__quickfill {
  display: flex;
  gap: var(--ui-s-2);
  margin-bottom: var(--ui-s-3);
}

.nx-set__inputs {
  display: flex;
  gap: var(--ui-s-2);
}

/* Future/locked state — dashed, dimmed */
.nx-set--future {
  display: flex;
  align-items: center;
  gap: var(--ui-s-3);
  padding: var(--ui-s-3) var(--ui-s-4);
  border-radius: var(--ui-r-md);
  background: var(--ui-a-02);
  border: 1px dashed var(--ui-a-08);
  opacity: 0.65;
}

/* ═══════ NUMBER TILE (tap-to-edit big input) ═══════ */
/* Используется: exercise_details — ввод веса и повторений */

.nx-numtile {
  position: relative;
  background: var(--ui-a-03);
  border: 1.5px solid var(--ui-a-08);
  border-radius: var(--ui-r-md);
  padding: var(--ui-s-4) var(--ui-s-3) var(--ui-s-3);
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: all var(--ui-dur-1) var(--ui-ease);
  font-family: var(--ui-font);
}

.nx-numtile.is-editing {
  background: color-mix(in srgb, var(--ui-accent) 10%, transparent);
  border-color: var(--ui-accent);
}

.nx-numtile__input {
  width: 100%;
  flex: 1;
  min-width: 0;
  padding: 0;
  margin: var(--ui-s-1) 0 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--ui-text);
  font-size: var(--ui-t-3xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-family: var(--ui-font);
  display: block;
}
.nx-numtile__input::-webkit-inner-spin-button,
.nx-numtile__input::-webkit-outer-spin-button { -webkit-appearance: none; }
.nx-numtile__unit {
  font-size: var(--ui-t-2xs);
  font-weight: 700;
  color: var(--ui-a-50);
  margin-top: 2px;
}
/* ═══════ QUICK-FILL CHIPS ═══════ */
/* Используется: exercise_details — "Цель тренера", "Прошлый раз" */
/* ═══════ PR BADGE ═══════ */


/* Полоса КБЖУ на nx-macro* удалена: разметки с этими классами нет, живой вариант —
   .macro-* ниже; для новых мест в слое есть .ui-progress. */

/* ═══════ INPUT ROW (report form — sleep, water, steps) ═══════ */

.nx-input-row {
  display: flex;
  align-items: center;
  gap: var(--ui-s-3);
  padding: var(--ui-s-3);
  border-radius: var(--ui-r-md);
  background: var(--ui-a-03);
  border: 1px solid var(--ui-a-06);
  margin-bottom: var(--ui-s-2);
}
.nx-input-row:last-child { margin-bottom: 0; }

.nx-input-row__stepper {
  display: flex;
  align-items: center;
  gap: var(--ui-s-2);
  flex-shrink: 0;
}

.nx-stepper-btn {
  width: 34px;
  min-height: var(--ui-h-sm);
  border-radius: var(--ui-r-sm);
  flex-shrink: 0;
  background: color-mix(in srgb, var(--ui-accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--ui-accent) 22%, transparent);
  color: var(--ui-accent);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ui-t-lg);
  font-family: var(--ui-font);
  line-height: 1;
  padding: 0;
}

.nx-stepper-val {
  min-width: 54px;
  text-align: center;
  font-size: var(--ui-t-md);
  font-weight: 700;
  color: var(--ui-text);
  font-family: var(--ui-font);
}

/* ═══════ MACRO BARS (general_report nutrition dashboard) ═══════ */

.macro-bars { flex: 1; display: flex; flex-direction: column; gap: var(--ui-s-2); }
.macro-row { display: grid; grid-template-columns: 52px 1fr auto; gap: var(--ui-s-2); align-items: center; }
.macro-label { font-size: var(--ui-t-xs); font-weight: 600; color: var(--ui-text-2); }
.macro-track { width: 100%; height: 6px; background: var(--ui-a-08); border-radius: var(--ui-r-xs); overflow: hidden; }
.macro-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--ui-accent), var(--ui-accent)); border-radius: var(--ui-r-xs); transition: width var(--ui-dur-3) var(--ui-ease); }
.macro-val { font-size: var(--ui-t-2xs); font-weight: 700; color: var(--ui-text-2); white-space: nowrap; }
/* ═══════ MEAL ITEM ═══════ */
/* ═══════ REPORT COMPACT ROW ═══════ */

/* Norm hint under steppers */
.norm-hint {
  font-size: var(--ui-t-2xs);
  color: var(--ui-text-2);
  margin-top: 2px;
}

/* Badge input (steps field inside stepper) */
.badge-input {
  width: 56px;
  text-align: center;
  background: transparent;
  border: none;
  outline: none;
  color: var(--ui-text);
  font-size: var(--ui-t-md);
  font-weight: 600;
  font-family: var(--ui-font);
}
.badge-input::-webkit-inner-spin-button,
.badge-input::-webkit-outer-spin-button { -webkit-appearance: none; }

/* Empty meals placeholder */
.meals-empty {
  text-align: center;
  padding: var(--ui-s-4);
  font-size: var(--ui-t-sm);
  color: var(--ui-text-2);
}
/* ═══════ WORKOUT CARD ═══════ */
/* ═══════ RATING ROW ═══════ */
/* ═══════ BOTTOM SHEET ═══════ */
/* ═══════ HELPERS ═══════ */
/* ═══════ BANNER CAROUSEL (dashboard) ═══════ */
/* Белый и его прозрачности ниже — цвет ПОВЕРХ цветной заливки баннера, а не
   цвет темы: --ui-a-* строится от --ui-text и в светлой стал бы чёрным. */


/* ═══════ iOS: НЕ ДАЁМ SAFARI ПРИБЛИЖАТЬ СТРАНИЦУ ═══════
   Safari на iOS зумит страницу при фокусе в поле меньше 16px и масштаб не
   возвращает; @supports отсекает всё, кроме WebKit на iOS. !important — часть
   полей задаёт размер инлайном; селектор низкий, чтобы класс мог его перекрыть. */
@supports (-webkit-touch-callout: none) {
  input,
  textarea,
  select {
    font-size: var(--ui-t-lg) !important;
  }
}