/* --- Shared UI: input-group (SSOT) --- */
/* Цель:
   - input и правая кнопка выглядят как единый контрол,
   - одинаковая высота,
   - без двойной рамки между ними,
   - корректные скругления,
   - поведение вынесено без изменения каскада.
 */

.input-group {
  display: flex;
  align-items: stretch;
}

.input-group .input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-color: var(--primary);
  height: calc(var(--spacing) * 9);
}

/* Убираем промежуточное выделение у контейнера */
.input-group:focus-within {
  box-shadow: none !important;
}

/* Базовый фокус у input внутри группы */
.input-group .input:focus-visible {
  box-shadow: none !important;
  outline: none;
  border-color: var(--primary);
}

/* Кнопка внутри attached group */
.input-group .btn-attached-right {
  border: 1px solid var(--primary);
  border-left: 0;
  height: calc(var(--spacing) * 9);
  padding-block: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.input-group .btn-attached-right:focus-visible {
  box-shadow: none !important;
  outline: none;
}

.btn-attached-right {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}

/* ВНЕ input-group оставляем стандартную focus-visible подсветку для остальных инпутов */
/* ВАЖНО: сохраняем порядок и итоговое поведение из app.css. */
.input-group .input:focus-visible {
  box-shadow: 0 0 0 2px var(--ring);
  border-color: var(--primary);
}

/* Подсветка всей группы при фокусе */
.input-group:focus-within .input {
  border-color: var(--primary);
}

.input-group:focus-within .btn-attached-right {
  border-color: var(--primary);
}

/* Единая рамка без двойной линии */
.input-group:focus-within {
  box-shadow: 0 0 0 2px var(--primary);
  border-radius: var(--radius-md);
}