/* ============================================================
   FIELD-ERROR-TIP — подсказка о незаполненном/неверном поле, единая по
   всему сайту (users/js/form-validation.js). Заменяет нативный пузырь
   браузера: тот выглядит по-разному в каждом браузере и никак не связан
   с оформлением сайта.

   Собран из двух уже существующих компонентов, ничего нового:
   - геометрия и стрелка — как у #site-tooltip (components/tooltip.css):
     фиксированное позиционирование, белая карточка, серая рамка --g3,
     радиус .65em, та же тень, стрелка отдельным повёрнутым квадратом
     (её X считает та же функция window.positionFloatingTip из tooltip.js);
   - красная полоса слева и иконка — как у .toast-error
     (components/notifications.css): та же ширина 3px и тот же красный
     var(--c-error), тот же размер иконки.

   Подключается глобально в base.html и на внешних страницах, которые
   base.html не расширяют (login, registration, public_company_form,
   crm, dispatch).
   ============================================================ */
#field-error-tip{
  position: fixed;
  /* Тот же запас, что у #site-tooltip: выше блюр-оверлея попапа
     «Варианты текста заявки» (z-index 2000, components/ai-rewrite-choice.css). */
  z-index: 3000;
  display: flex;
  align-items: flex-start;
  gap: .6em;
  max-width: 22em;
  padding: .65em .9em;
  background: var(--c-surface);
  color: var(--c-text);
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-error);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-popup);
  font-size: .85em;
  line-height: 1.45;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  /* Стартовое состояние — чуть меньше и сдвинуто; направление сдвига задаёт
     .is-above/.is-below ниже, чтобы подсказка «выезжала» из поля, а не в
     произвольную сторону. */
  transform: translateY(4px) scale(.97);
  /* visibility в переходе с задержкой на всю длительность: без этого при
     скрытии она снималась мгновенно, и карточка пропадала рывком, не успев
     доиграть fade. При появлении задержка нулевая — иначе анимация начнётся
     на невидимом элементе. */
  transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
  transform-origin: center top;
  pointer-events: none;
}
#field-error-tip.is-open{
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition: opacity .16s ease, transform .16s cubic-bezier(.2, .8, .3, 1), visibility 0s;
}

/* Карточка над полем — растёт «от поля» вверх, под полем — вниз. */
#field-error-tip.is-above{ transform-origin: center bottom; }
#field-error-tip.is-below{ transform: translateY(-4px) scale(.97); transform-origin: center top; }
#field-error-tip.is-below.is-open{ transform: translateY(0) scale(1); }

#field-error-tip__icon{
  width: 1.15em;
  height: 1.15em;
  flex: none;
  margin-top: .1em;
  color: var(--c-error);
}

#field-error-tip__text{ min-width: 0; }

/* Стрелка — отдельный элемент, а не ::before: её X двигается независимо от
   карточки, когда та прижалась к краю экрана (см. positionFloatingTip).
   Рамка только на двух внешних гранях повёрнутого квадрата, иначе вторая
   половина рисовалась бы поверх карточки двойной линией. */
#field-error-tip__arrow{
  position: absolute;
  width: 11px; height: 11px;
  background: var(--c-surface);
  transform: rotate(45deg);
}
#field-error-tip.is-below #field-error-tip__arrow{
  top: -6px;
  border-left: 1px solid var(--c-border);
  border-top: 1px solid var(--c-border);
}
#field-error-tip.is-above #field-error-tip__arrow{
  bottom: -6px;
  border-right: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}

/* Поле, на которое сейчас показывает подсказка — та же красная рамка, что
   и полоса на карточке: видно, о каком именно поле речь, даже если
   подсказка успела закрыться. */
.has-field-error{
  border-color: var(--c-error) !important;
  box-shadow: 0 0 0 3px rgba(225, 29, 72, .12) !important;
}

@media (prefers-reduced-motion: reduce){
  /* Движение убираем, но visibility по-прежнему должна переключаться
     мгновенно в обе стороны — иначе подсказка «залипнет» невидимой. */
  #field-error-tip,
  #field-error-tip.is-open{
    transition: none;
    transform: none;
  }
}