/* ==========================================================================
   Form Field — Tickchak App Design System
   7 states: default/hover/focus/typing/error/success/disabled
   Structure (RTL — first in DOM = rightmost):
     [icon]  [ input / label ]  [dropdown]
             ────────────────
             [caption]         [helper+ico]
   Required: tokens.css, toggle.css (when using inline toggle)
   Usage: <div class="form-field"> ... </div>
   ========================================================================== */

.form-field{
  display:flex;
  gap:var(--space-sm);
  align-items:flex-start;
  width:100%;
  min-height:48px;        /* רצפה, לא תקרה — ראו ההערה למטה */
  direction:rtl;
}

/* 🔴 הגובה — min ולא קבוע (תוקן 27/07/2026)
   היה כאן `height:48px`. כשמיישרים את שורת-הקלט לפיגמה הסכום חורג מ-48,
   ושורת-החיווי (caption) נחתכת או מתנגשת בתווית. זה נרשם כממצא ב-26/07
   (find.producer_contact.formfield_fixed_height) ונשאר פתוח.
   מה שהכריע: **שני הדפים** שמשתמשים ברכיב כבר עקפו אותו מקומית ב-height:auto —
   כלומר הערך הקבוע לא שירת אף אחד, רק חייב כל צרכן לעקוף אותו.
   `min-height` שומר על הרצפה של 48 בשדות רגילים, ומאפשר גדילה כשיש חיווי. */
.form-field.has-dropdown{cursor:pointer;}
.form-field.has-dropdown.disabled{cursor:default;}
.form-field.has-dropdown.open .form-field__dropdown svg{transform:rotate(180deg);}
.form-field.has-dropdown.open .form-field__line{height:2px;}

/* --- Icon slot (right in RTL = first in DOM) --- */
.form-field__icon{
  display:flex;align-items:center;justify-content:center;
  width:20px;height:20px;flex-shrink:0;
  padding:2px;
  color:var(--ta-color-text-default);
}
.form-field__icon svg{width:16px;height:16px;}
.form-field.disabled .form-field__icon{color:var(--ta-color-text-disabled);}

/* --- Content area --- */
.form-field__content{
  flex:1;min-width:0;
  display:flex;flex-direction:column;
  gap:var(--space-sm);
}

/* --- Top row --- */
.form-field__top{
  display:flex;align-items:center;
  gap:var(--space-sm);
  width:100%;
  min-height:16px;
  position:relative;
}

/* Input area */
.form-field__input-area{
  flex:1;min-width:0;
  position:relative;
  height:16px;
  display:flex;align-items:center;
}

/* Native input */
.form-field__input{
  width:100%;height:100%;
  border:none;outline:none;background:transparent;
  font-family:'Google Sans','Assistant',sans-serif;
  font-size:var(--f-body-sm);
  font-weight:400;
  line-height:16px;
  color:var(--ta-color-text-default);
  text-align:right;
  direction:rtl;
  padding:0;
  caret-color:var(--ta-color-text-default);
}
.form-field__input::placeholder{color:transparent;}
.form-field.disabled .form-field__input{
  color:var(--ta-color-text-disabled);
  pointer-events:none;
}

/* Label — overlays input when empty+blur */
.form-field__label{
  position:absolute;
  inset:0;
  display:flex;align-items:center;
  font-family:'Google Sans','Assistant',sans-serif;
  font-size:var(--f-body-sm);
  font-weight:400;
  line-height:16px;
  color:var(--ta-color-text-default);
  pointer-events:none;
  white-space:nowrap;
  transition:opacity .15s;
}
.form-field.focused .form-field__label,
.form-field.has-value .form-field__label{opacity:0;}
.form-field.disabled .form-field__label{color:var(--ta-color-text-disabled);}

/* --- Dropdown arrow (left in RTL = LAST in DOM) --- */
.form-field__dropdown{
  display:flex;align-items:center;justify-content:center;
  width:16px;height:16px;flex-shrink:0;
  cursor:pointer;
}
.form-field__dropdown svg{
  width:10px;height:6px;
  transition:transform .2s;
}
.form-field.disabled .form-field__dropdown{cursor:default;opacity:0.3;}

/* --- Underline --- */
.form-field__line{
  width:100%;
  height:1px;
  background:var(--ta-color-border-default);
  transition:height .15s, background .15s;
  flex-shrink:0;
}
.form-field:hover:not(.disabled):not(.error):not(.success) .form-field__line{height:2px;}
.form-field.error .form-field__line{height:2px;background:var(--color-reds-400);}
.form-field.success .form-field__line{background:var(--color-green-400);}
.form-field.disabled .form-field__line{background:var(--ta-color-border-disabled);}

/* --- Bottom row (RTL: caption right, helper left) --- */
.form-field__bottom{
  display:flex;
  align-items:center;
  gap:var(--space-sm);
  width:100%;
}

/* Caption */
.form-field__caption{
  font-family:'Google Sans','Assistant',sans-serif;
  font-size:var(--f-caption);
  font-weight:400;
  line-height:1.1;
  color:var(--ta-color-text-default);
  text-align:right;
  flex:1;min-width:0;
  opacity:0;
  transition:opacity .15s;
}
.form-field.focused .form-field__caption,
.form-field.has-value .form-field__caption{opacity:1;}

/* Helper / error text */
.form-field__helper{
  display:flex;
  align-items:center;
  gap:6px;
  flex-shrink:0;
  margin-inline-start:auto;
}
.form-field__helper-text{
  font-family:'Google Sans','Assistant',sans-serif;
  font-size:var(--f-caption);
  font-weight:400;
  line-height:1.1;
  color:var(--ta-color-text-default);
  text-align:right;
  white-space:nowrap;
}

/* 🔴 שורת-העזר הייתה אדומה בכל המצבים (--color-reds-400 קשיח), ולכן גם הודעת
   הצלחה («מספר תקין») יצאה אדומה ונקראה כתקלה. תוקן 27/07/2026:
   ברירת-המחדל שחורה, ואדום רק כשיש שגיאה בפועל. */
.form-field.error .form-field__helper-text{ color:var(--color-reds-400); }
.form-field__helper-icon{
  width:16px;height:16px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
/* 🔴 `display:flex` דורס את [hidden] של הדפדפן — ולכן אייקון-השגיאה הופיע
   גם בשדה ריק שאיש לא נגע בו. אותה תקלה מתועדת בדמו ליד .portal-hub-empty.
   תוקן 27/07/2026. */
.form-field__helper-icon[hidden]{ display:none; }

/* --- Success check — auto via CSS --- */
.form-field__top::after{
  content:'';display:none;
  width:16px;height:16px;flex-shrink:0;
  background:url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='16' height='16' rx='8' fill='%23b9ca20'/%3E%3Cpath d='M11.2 4.8L6.609 11.2L4.8 9.391' stroke='%23465b17' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
}
.form-field.success .form-field__top::after{display:block;}

/* --- Left slot (check + dropdown grouped) --- */
.form-field__left-slot{
  display:flex;align-items:center;
  gap:var(--space-sm);
  flex-shrink:0;
}