/* Text Field — theo component Text Field trong Figma. 4 thuộc tính → class:
     Size       Medium (mặc định, ô cao 44, chữ 17/22) · Small → .text-field--small (36, 15/20)
     Style      Outlined (mặc định, viền 4 cạnh bo 12) · Underline → .text-field--underline
     Label      Yes → có .text-field__label · No → bỏ nhãn, dấu * nằm sau placeholder
                (.text-field__placeholder, vì ::placeholder không tô được hai màu)
     State      lấy từ chính ô nhập, không cần class:
                  Default · Filled   ô trống / có chữ
                  Hover              :hover (chỉ máy có chuột)
                  Focused            :focus — viền accent (Underline: gạch dày 2)
                  Disabled           [disabled] — nền xám, chữ + nhãn mờ
                  Read only          [readonly] — Outlined nền xám, chữ giữ màu
                  Error · Success    .err · .ok trên ô nhập (fieldError / fieldSuccess
                                     trong components.js), dòng dưới: .text-field__help
   Khung:
     <div class="text-field [--small] [--underline]">
       <label class="text-field__label" for="x">Tên dự án <span class="req" aria-hidden="true">*</span></label>
       <div class="text-field__box">
         <input class="text-field__input" id="x" aria-describedby="xHelp">
         <button class="text-field__clear" type="button" aria-label="Xoá" hidden>…</button>
       </div>
       <p class="text-field__help" id="xHelp" hidden></p>
     </div>
   __box chỉ cần khi có nút xoá hoặc placeholder có *. Ô nhập trần
   (.text-field__input đứng một mình) vẫn ra đúng Medium / Outlined. */

.text-field{padding:var(--spacing-8) var(--spacing-16); display:flex; flex-direction:column; gap:var(--spacing-6)}

/* Label row — Body/Compact 13/18, * màu lỗi; Disabled thì nhãn mờ */
.text-field__label{font:var(--text-footnote); letter-spacing:var(--tracking-footnote); color:var(--color-text-primary)}
.text-field__label .req{color:var(--color-status-error)}
.text-field:has(.text-field__input:disabled) .text-field__label{color:var(--color-text-tertiary)}

/* ---- Input: Size=Medium, Style=Outlined ---- */
.text-field__input{
  font:var(--text-input); letter-spacing:var(--tracking-input);
  width:100%; min-width:0; height:44px; padding:0 var(--spacing-12);
  background:var(--color-background-primary);
  border:1px solid var(--color-border-subtle); border-radius:var(--radius-12);
  color:var(--color-text-primary); caret-color:var(--color-accent-primary);
  outline:none; transition:border-color .12s ease, box-shadow .12s ease;
}
.text-field__input::placeholder{color:var(--color-text-tertiary)}
@media (hover:hover){
  /* Figma color/border/default (#d1d1d6) */
  .text-field__input:hover:not(:focus, :disabled, :read-only, .err, .ok){border-color:var(--neutral-300)}
}
.text-field__input:focus{border-color:var(--color-border-focus)}
.text-field__input:read-only{background:var(--color-fill-quaternary)}
.text-field__input:disabled{background:var(--color-fill-quaternary); color:var(--neutral-400)}   /* Figma color/text/disabled */
.text-field__input:disabled::placeholder{color:var(--neutral-400)}
.text-field__input.err{border-color:var(--color-status-error)}
.text-field__input.ok{border-color:var(--color-status-success)}
.text-field__input.warn{animation:nudge .3s ease}

/* ---- Size=Small ---- */
.text-field--small .text-field__input,
.text-field__input.text-field__input--small{
  font:var(--text-body-small); letter-spacing:var(--tracking-body-small); height:36px;
}

/* ---- Style=Underline: không nền, không bo, chỉ gạch chân 1px; Focused
   gạch dày 2 — phần dày thêm vẽ bằng box-shadow cho ô không nhảy ---- */
.text-field--underline .text-field__input{
  padding:0; border:0; border-bottom:1px solid var(--color-border-subtle); border-radius:0;
  background:transparent;
}
.text-field--underline .text-field__input:focus{border-bottom-color:var(--color-border-focus); box-shadow:0 1px 0 var(--color-border-focus)}
.text-field--underline .text-field__input:read-only,
.text-field--underline .text-field__input:disabled{background:transparent}
.text-field--underline .text-field__input.err{border-bottom-color:var(--color-status-error)}
.text-field--underline .text-field__input.ok{border-bottom-color:var(--color-status-success)}

/* ---- ô có nút xoá: nút 24px nằm trong mép phải (pr 12, gap 8) ---- */
.text-field__box{position:relative}
.text-field__box .text-field__input:has(+ .text-field__clear){padding-right:calc(var(--spacing-12) + 24px + var(--spacing-8))}
.text-field--underline .text-field__box .text-field__input:has(+ .text-field__clear){padding-right:calc(24px + var(--spacing-8))}
.text-field__clear{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  width:24px; height:24px; display:grid; place-items:center; border-radius:6px;
}
.text-field--underline .text-field__clear{right:0}
.text-field__clear::after{content:""; position:absolute; inset:-10px}
.text-field__clear[hidden]{display:none}
.text-field__clear .icon{display:block; color:var(--color-text-tertiary)}

/* ---- Label=No, Mandatory: placeholder kèm * đỏ. Ô nhập để placeholder=" "
   (cho :placeholder-shown), chữ thật nằm trong span này ---- */
.text-field__placeholder{
  position:absolute; left:calc(var(--spacing-12) + 1px); right:var(--spacing-12); top:50%; transform:translateY(-50%);
  display:flex; gap:2px; pointer-events:none; white-space:nowrap; overflow:hidden;
  font:var(--text-input); letter-spacing:var(--tracking-input); color:var(--color-text-tertiary);
}
.text-field__placeholder .req{color:var(--color-status-error)}
.text-field--small .text-field__placeholder{font:var(--text-body-small); letter-spacing:var(--tracking-body-small)}
.text-field--underline .text-field__placeholder{left:0; right:0}
.text-field__input:not(:placeholder-shown) + .text-field__placeholder{display:none}

/* ---- help text: 13/20, đỏ khi Error, xanh khi Success ----
   .text-field__error là tên cũ, giữ cho các chỗ đang dùng */
.text-field__help, .text-field__error{
  font:var(--text-footnote); letter-spacing:var(--tracking-footnote); line-height:20px;
  margin:0; color:var(--color-text-secondary);
}
.text-field__help--error, .text-field__error{color:var(--color-status-error)}
.text-field__help--success{color:var(--color-status-success)}
.text-field__help[hidden], .text-field__error[hidden]{display:none}