/* ── Local custom properties ─────────────────────────────────────────────────
   --field-label-w : ширина колонки мітки у варіанті --label-left.
                     Перевизначте на рівні форми для нестандартних колонок.
*/

/* ═══════════════════════════════════════════════════════════════════════════
   FIELD — обгортка контролу форми
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Wrapper ─────────────────────────────────────────────────────────────── */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--uris-spacing-1);   /* 4px між міткою і тілом контролу */
}

/* ── Label ───────────────────────────────────────────────────────────────── */
.field__label {
  font-family: var(--uris-font-family-body);
  font-size: var(--uris-text-xs-size);
  font-weight: var(--uris-font-weight-medium);
  letter-spacing: var(--uris-font-letter-spacing-caps);
  text-transform: uppercase;
  color: var(--uris-color-semantic-text-muted);
  line-height: 1;
  user-select: none;
}

/* Required asterisk — decorative; aria-required на контролі несе семантику */
.field__required {
  color: var(--uris-color-semantic-danger);
  margin-inline-start: 2px;
}

/* ── Body (control + hint + error — завжди присутній) ────────────────────── */
.field__body {
  display: flex;
  flex-direction: column;
}

/* ── Hint ────────────────────────────────────────────────────────────────── */
.field__hint {
  margin: 0;
  padding-block-start: var(--uris-spacing-2);
  font-family: var(--uris-font-family-body);
  font-size: var(--uris-text-xs-size);
  line-height: var(--uris-text-xs-line);
  color: var(--uris-color-semantic-text-muted);
}

/* ── Error ───────────────────────────────────────────────────────────────── */
.field__error {
  display: none;
  margin: 0;
  padding-block-start: var(--uris-spacing-2);
  font-family: var(--uris-font-family-body);
  font-size: var(--uris-text-xs-size);
  line-height: var(--uris-text-xs-line);
  color: var(--uris-color-semantic-danger);
}

/* ── Success text ────────────────────────────────────────────────────────── */
.field__success-text {
  display: none;
  margin: 0;
  padding-block-start: var(--uris-spacing-2);
  font-family: var(--uris-font-family-body);
  font-size: var(--uris-text-xs-size);
  line-height: var(--uris-text-xs-line);
  color: var(--uris-color-semantic-success-text);
}

/* ═══════════════════════════════════════════════════════════════════════════
   STATE MODIFIERS (on wrapper)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Error state ─────────────────────────────────────────────────────────── */
.field--error .field__hint    { display: none; }
.field--error .field__error   { display: block; }

/* ── Success state ───────────────────────────────────────────────────────── */
.field--success .field__hint         { display: none; }
.field--success .field__success-text { display: block; }

/* ── Disabled state — dim label when child input is disabled ─────────────── */
.field:has(.fa-input:disabled) .field__label,
.field--disabled .field__label {
  opacity: 0.5;
}

/* ═══════════════════════════════════════════════════════════════════════════
   VARIANT: Label left (A1)
   ═══════════════════════════════════════════════════════════════════════════ */
.field--label-left {
  display: grid;
  grid-template-columns: var(--field-label-w, var(--uris-component-field-label-width)) 1fr;
  column-gap: var(--uris-spacing-6);
  align-items: start;
}

/* Align label text baseline with the input's first content line */
.field--label-left > .field__label {
  padding-block-start: var(--uris-spacing-2);
}

/* ═══════════════════════════════════════════════════════════════════════════
   FA-INPUT — базовий стиль контролу (input, textarea, select)
   Призначається безпосередньо на елемент контролу всередині .field__body.
   ═══════════════════════════════════════════════════════════════════════════ */

.fa-input {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  /* Спокій: surface-active замість semantic-border (1.13:1) — поле читається як поле (аудит #6, 2026-07-02) */
  border-bottom: 1px solid var(--uris-color-semantic-surface-active);
  border-radius: 0;
  min-height: 44px; /* тач-таргет ≥44px (аудит #11, 2026-07-02) */
  padding-block: var(--uris-spacing-2);
  padding-inline: 0;
  font-family: var(--uris-font-family-body);
  font-size: var(--uris-text-base-size);
  line-height: var(--uris-text-base-line);
  font-weight: var(--uris-font-weight-regular);
  color: var(--uris-color-semantic-text);
  outline: none;
  -webkit-font-smoothing: antialiased;
  transition:
    border-color var(--uris-duration-fast) var(--uris-ease-default),
    box-shadow   var(--uris-duration-fast) var(--uris-ease-default);
}

/* ── Hover — єдине правило для всіх контролів (input/textarea/select) ───────
   Консолідовано з input.css/textarea.css/select.css (аудит #25, 2026-07-02):
   field.css — обов'язкова база .fa-input, тому правило покриває всі контроли.
   Драбина станів підкреслювача: спокій surface-active → hover text-muted → focus accent. */
.fa-input:hover:not(:focus):not(:disabled):not([readonly]) {
  border-bottom-color: var(--uris-color-semantic-text-muted);
}

/* Станові кольори не перебиваються hover'ом */
.field--error   .fa-input:hover:not(:focus) { border-bottom-color: var(--uris-color-semantic-danger);  }
.field--success .fa-input:hover:not(:focus) { border-bottom-color: var(--uris-color-semantic-success); }

.fa-input::placeholder {
  color: var(--uris-color-semantic-text-muted);
  font-weight: var(--uris-font-weight-light);
  font-style: italic;
}

/* Filled — заповнене значення виділяється жирним (README #⑤: :not(:placeholder-shown)) */
.fa-input:not(:placeholder-shown) {
  font-weight: var(--uris-font-weight-bold);
}

/* Focus — 2px акцентний підкреслювач через border + box-shadow (без layout-shift) */
.fa-input:focus {
  border-bottom-color: var(--uris-color-semantic-accent);
  box-shadow: 0 1px 0 0 var(--uris-color-semantic-accent);
}

/* Error — керується модифікатором батьківського .field */
.field--error .fa-input {
  border-bottom-color: var(--uris-color-semantic-danger);
  box-shadow: 0 1px 0 0 var(--uris-color-semantic-danger);
}

/* Error focus — зберігаємо accentний кольір при фокусі в стані помилки */
.field--error .fa-input:focus {
  border-bottom-color: var(--uris-color-semantic-danger);
  box-shadow: 0 1px 0 0 var(--uris-color-semantic-danger);
}

/* Success */
.field--success .fa-input {
  border-bottom-color: var(--uris-color-semantic-success);
  box-shadow: 0 1px 0 0 var(--uris-color-semantic-success);
}

/* Disabled */
.fa-input:disabled {
  border-bottom-style: dashed;
  color: var(--uris-color-semantic-text-muted);
  /* Safari: disabled input ігнорує color, використовуємо -webkit-text-fill-color */
  -webkit-text-fill-color: var(--uris-color-semantic-text-muted);
  cursor: not-allowed;
  font-weight: var(--uris-font-weight-regular);
}

/* Read-only — той самий вигляд: заповнене але нередаговане */
.fa-input[readonly] {
  border-bottom-style: dashed;
  color: var(--uris-color-semantic-text-muted);
  -webkit-text-fill-color: var(--uris-color-semantic-text-muted);
  /* Override :not(:placeholder-shown) bold rule — readonly values stay regular */
  font-weight: var(--uris-font-weight-regular);
}

/* ── Textarea ────────────────────────────────────────────────────────────── */
textarea.fa-input {
  resize: vertical;
  min-height: calc(
    var(--uris-text-base-size) * var(--uris-text-base-line) * 3
    + var(--uris-spacing-2) * 2
  ); /* 3 рядки + block-padding */
}

/* ── Select ──────────────────────────────────────────────────────────────── */
select.fa-input {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-inline-end: var(--uris-spacing-6);
  /* DEPRECATED FALLBACK — використовується лише для голого select.fa-input без .select-wrap.
     CSS-змінні недоступні всередині data-URI, тому кольори захардкоджені.
     Перевагу надавайте .select-wrap (шеврон через mask-image + semantic-токени). */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5l5 5 5-5' stroke='%236D727C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0 center;
  background-size: 20px 20px;
}

select.fa-input:disabled {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5l5 5 5-5' stroke='%23C8CDD8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ═══════════════════════════════════════════════════════════════════════════
   SELECT-WRAP — канонічний декоратор для шеврона через semantic-токени
   (перенесено з select.css; маски не рендеряться безпосередньо на <select>)

   Usage:
     <div class="select-wrap">
       <select class="fa-input" …>…</select>
     </div>
   ═══════════════════════════════════════════════════════════════════════════ */

.select-wrap {
  position: relative;
  display: block;
}

/* Скасовує data-URI з deprecated-блоку вище; chevron бере на себе ::after */
.select-wrap > select.fa-input {
  background-image: none;
  /* 20px шеврон + 8px зазор — як input-wrap--has-actions */
  padding-inline-end: calc(20px + var(--uris-spacing-2));
}

/* Шеврон: SVG у mask-image задає лише форму (альфа-канал),
   фактичний колір — background-color з semantic-токенів */
.select-wrap::after {
  content: "";
  position: absolute;
  inset-inline-end: 0;
  top: 50%;
  transform: translateY(-50%);
  width: var(--uris-component-icon-size-md);
  height: var(--uris-component-icon-size-md);
  background-color: var(--uris-color-semantic-text-muted);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5l5 5 5-5' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5l5 5 5-5' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 20px 20px;
  mask-size: 20px 20px;
  pointer-events: none;
  transition: background-color var(--uris-duration-fast) var(--uris-ease-default);
}

.field--error .select-wrap::after {
  background-color: var(--uris-color-semantic-danger);
}

.field--success .select-wrap::after {
  background-color: var(--uris-color-semantic-success);
}

.select-wrap:has(select.fa-input:disabled)::after {
  background-color: var(--uris-color-semantic-border);
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fa-input,
  .select-wrap::after {
    transition: none;
  }
}