/* Элементы управления: кнопки, поля, сегментный переключатель (тема, период), навигация-пилюли. */

/* ---------- Кнопки ---------- */
.mh-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: 36px; padding: 0 14px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-md);
  background: var(--surface); color: var(--ink);
  font: 700 13px/1 var(--font-sans); white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
}
.mh-btn:hover { border-color: var(--accent); background: var(--surface-raised); }
.mh-btn svg { width: 16px; height: 16px; flex: none; }
.mh-btn--primary {
  border-color: transparent; color: var(--on-accent);
  background: linear-gradient(135deg, var(--brand-violet), var(--brand-indigo));
}
.mh-btn--primary:hover {
  border-color: transparent; box-shadow: var(--shadow-glow);
  background: linear-gradient(135deg, var(--brand-violet), var(--brand-indigo));
}
.mh-btn--ghost { border-color: transparent; background: transparent; color: var(--ink-muted); }
.mh-btn--ghost:hover { border-color: transparent; background: var(--row-hover); color: var(--ink); }
.mh-btn--danger { color: var(--loss); }
.mh-btn--danger:hover { border-color: var(--loss); background: var(--loss-soft); }
.mh-btn--sm { height: 30px; padding: 0 10px; font-size: 12px; }
.mh-btn--icon { width: 36px; padding: 0; }
.mh-btn--sm.mh-btn--icon { width: 30px; }
.mh-btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

/* ---------- Поля ---------- */
.mh-input, .mh-select {
  height: 36px; padding: 0 12px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-md);
  background: var(--surface-sunken); color: var(--ink);
  font: 500 13px/1 var(--font-sans);
}
.mh-input::placeholder { color: var(--ink-faint); }
.mh-input:focus, .mh-select:focus { border-color: var(--accent); }
.mh-input[type="date"] { font-family: var(--font-mono); font-size: 12px; }
.mh-input--sm, .mh-select--sm { height: 30px; }
/* Автозаполнение браузера красит поле в жёлтый: возвращаем цвета темы. */
.mh-input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px var(--surface-sunken) inset; -webkit-text-fill-color: var(--ink); caret-color: var(--ink); }
.mh-form { display: grid; gap: var(--space-4); }
.mh-field { display: grid; gap: 6px; }
.mh-field__label { font: 700 11px/14px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.mh-field .mh-input { width: 100%; }
.mh-field__error { margin: 0; font-size: 12px; line-height: 16px; color: var(--loss); }
.mh-field__help { font-size: 12px; line-height: 16px; color: var(--ink-faint); }
.mh-field__help ul { margin: 4px 0 0; padding-left: 18px; }

/* ---------- Выбор галочкой или кружком: строка с подписью обычным шрифтом ---------- */
/* Галочка или кружок с подписью обычным шрифтом: списки вариантов (Mini App «Налаштування пушів»). */
.mh-choice { display: flex; align-items: center; gap: var(--space-2); min-height: 40px; font: 500 14px/20px var(--font-sans); color: var(--ink); cursor: pointer; }
.mh-choice input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--accent-strong); }
.mh-choice__hint { color: var(--ink-muted); }
.mh-choice + .mh-row { margin-top: var(--space-2); }
.mh-choice:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.mh-fieldset { display: grid; margin: 0; padding: 0; border: 0; min-width: 0; }
.mh-fieldset > legend { padding: 0; margin-bottom: var(--space-1); }

/* ---------- Сегментный переключатель ---------- */
.mh-seg {
  display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--surface-sunken);
}
.mh-seg__item {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 12px; border: 0; border-radius: var(--radius-pill);
  background: transparent; color: var(--ink-muted); text-decoration: none;
  font: 700 12px/1 var(--font-sans); cursor: pointer; white-space: nowrap;
}
.mh-seg__item svg { width: 14px; height: 14px; }
/* Периоды на телефоне — сетка 2×3: пары «сегодня / вчера», «текущая / прошлая неделя», «текущий / прошлый месяц». */
@media (max-width: 640px) {
  .mh-seg--periods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; border-radius: var(--radius-lg); }
  .mh-seg--periods .mh-seg__item { justify-content: center; border-radius: var(--radius-md); }
}
.mh-seg__item:hover { color: var(--ink); }
.mh-seg__item[aria-pressed="true"], .mh-seg__item[aria-checked="true"], .mh-seg__item[aria-current="true"] {
  background: var(--surface-raised); color: var(--ink); box-shadow: var(--shadow-glow);
}

/* ---------- Навигация: пилюли из MontaCRM ---------- */
.mh-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.mh-tab {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  color: var(--ink-muted); text-decoration: none; font: 700 13px/1 var(--font-sans);
}
.mh-tab:hover { color: var(--ink); border-color: var(--accent); }
.mh-tab[aria-current="page"] {
  border-color: transparent; color: var(--on-accent);
  background: linear-gradient(135deg, var(--brand-violet), var(--brand-indigo));
  box-shadow: var(--shadow-glow);
}

/* ---------- Сенсорные экраны (телефон, Mini App): цель под палец ≥ 40px ---------- */
@media (pointer: coarse) {
  .mh-btn, .mh-input, .mh-select { height: 40px; }
  .mh-btn--sm { height: 36px; }
  .mh-btn--icon { width: 40px; }
  .mh-btn--sm.mh-btn--icon { width: 36px; }
  .mh-seg__item { height: 36px; padding: 0 14px; }
  .mh-tab { height: 38px; }
  /* iOS увеличивает страницу при фокусе на поле со шрифтом меньше 16px. */
  .mh-input, .mh-input[type="date"], .mh-select { font-size: 16px; }
}