/* ============================================================
   product-edit-fields.css  —  SHARED .pe-field component (t-008 / worker-8)
   The single source of truth for form-field look & behaviour on
   seller/product-edit.html. Sections t-004/005/006/007 REUSE these
   classes and must NOT redefine them.

   Loads after layout, before the section partials (see frozen_contract
   css_partials order). Tokens come from product-edit-base.css (t-001);
   every var() carries a fallback so this file stands alone if needed.
   ============================================================ */

/* ── Field wrapper ───────────────────────────────────────── */
.pe-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0; /* lets fields shrink inside grid cells */
}

/* ── Label ───────────────────────────────────────────────── */
.pe-field__label {
  font-family: inherit; /* DM Sans body */
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink-soft, #3A2F2A);
  line-height: 1.3;
}
/* Required marker — set data-required on .pe-field (or add .pe-field--required) */
.pe-field[data-required] .pe-field__label::after,
.pe-field--required .pe-field__label::after {
  content: " *";
  color: var(--danger-500, #DC2626);
  font-weight: 700;
}

/* ── Input / textarea / select ───────────────────────────── */
.pe-field__input {
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--ink, #1A1412);
  background: var(--surface, #FFFFFF);
  border: 1.5px solid var(--border-strong, rgba(26,20,18,0.18));
  border-radius: var(--radius-input, 12px);
  padding: 11px 13px;
  width: 100%;
  box-sizing: border-box;   /* width:100% must include padding+border, else bare inputs (Stock) overflow their grid column */
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.pe-field__input::placeholder { color: var(--ink-faint, #C9BEB4); }

textarea.pe-field__input {
  min-height: 96px;
  resize: vertical;
}

/* Native select chevron (appearance:none strips it) */
select.pe-field__input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237A6F68' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 38px;
}

/* ── Focus (native :focus-visible + explicit --focus modifier) ── */
.pe-field__input:focus-visible,
.pe-field--focus .pe-field__input {
  outline: none;
  border-color: var(--terra-500, #B8451F);
  box-shadow: 0 0 0 3px var(--terra-100, #F6E2D1);
}

/* ── Filled state (JS toggles .pe-field--filled when value present) ── */
.pe-field--filled .pe-field__input {
  background: var(--surface, #FFFFFF);
  border-color: var(--border-strong, rgba(26,20,18,0.22));
}

/* ── Error state (modifier class OR aria-invalid hook) ───── */
.pe-field--error .pe-field__input,
.pe-field__input[aria-invalid="true"] {
  border-color: var(--danger-500, #DC2626);
  background: var(--danger-50, #FEF2F2);
}
.pe-field--error .pe-field__input:focus-visible,
.pe-field__input[aria-invalid="true"]:focus-visible {
  box-shadow: 0 0 0 3px var(--danger-200, #FECACA);
}

/* ── Disabled state ──────────────────────────────────────── */
.pe-field--disabled .pe-field__input,
.pe-field__input:disabled {
  background: var(--canvas-soft, #F3EADC);
  color: var(--ink-muted, #7A6F68);
  border-color: var(--border, rgba(26,20,18,0.10));
  cursor: not-allowed;
  opacity: 0.85;
}

/* ── Hint & error messages ───────────────────────────────── */
.pe-field__hint {
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--ink-muted, #7A6F68);
}
.pe-field__error {
  display: none; /* hidden until the field is in error */
  font-size: 0.78rem;
  line-height: 1.35;
  font-weight: 500;
  color: var(--danger-700, #B91C1C);
}
.pe-field__error::before {
  content: "⚠ ";
  font-weight: 700;
}
.pe-field--error .pe-field__error { display: block; }
/* When in error, suppress the neutral hint to avoid mixed signals */
.pe-field--error .pe-field__hint { display: none; }

/* ── Affix (e.g. RM currency prefix) ─────────────────────── */
.pe-field__affix {
  display: flex;
  align-items: stretch;
  border: 1.5px solid var(--border-strong, rgba(26,20,18,0.18));
  border-radius: var(--radius-input, 12px);
  background: var(--surface, #FFFFFF);
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.pe-field__affix-tag {
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-muted, #7A6F68);
  background: var(--canvas-soft, #F3EADC);
  border-right: 1.5px solid var(--border, rgba(26,20,18,0.12));
  white-space: nowrap;
}
/* Input inside an affix loses its own border; the wrapper owns it */
.pe-field__affix .pe-field__input {
  border: 0;
  border-radius: 0;
  background: transparent;
  flex: 1 1 auto;
}
.pe-field__affix .pe-field__input:focus-visible { box-shadow: none; }
/* Move focus/error treatment to the wrapper when an affix is present */
.pe-field__affix:focus-within {
  border-color: var(--terra-500, #B8451F);
  box-shadow: 0 0 0 3px var(--terra-100, #F6E2D1);
}
.pe-field--error .pe-field__affix {
  border-color: var(--danger-500, #DC2626);
  background: var(--danger-50, #FEF2F2);
}
.pe-field--error .pe-field__affix:focus-within {
  box-shadow: 0 0 0 3px var(--danger-200, #FECACA);
}
.pe-field--disabled .pe-field__affix {
  background: var(--canvas-soft, #F3EADC);
  cursor: not-allowed;
}

/* ── Save-bar button state machine (#pe-save in .pe-actionbar) ──
   Layout of .pe-actionbar is owned by t-001/t-003; this owns the
   idle/saving/success/error VISUAL states driven by data-state. */
#pe-save {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  color: #fff;
  background: var(--terra-500, #B8451F);
  border: 0;
  border-radius: var(--radius-input, 12px);
  padding: 12px 22px;
  min-height: 44px; /* touch target */
  cursor: pointer;
  transition: background-color 0.15s ease, opacity 0.15s ease, transform 0.05s ease;
}
#pe-save:hover:not([disabled]) { background: var(--terra-600, #9E3818); }
#pe-save:active:not([disabled]) { transform: translateY(1px); }
#pe-save:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--terra-100, #F6E2D1), 0 0 0 5px var(--terra-500, #B8451F);
}

#pe-save[data-state="saving"] {
  background: var(--terra-400, #D17A40);
  cursor: progress;
  pointer-events: none;
}
#pe-save[data-state="saving"]::before {
  content: "";
  width: 15px; height: 15px;
  border: 2px solid rgba(255,255,255,0.45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: pe-spin 0.7s linear infinite;
}
#pe-save[data-state="success"] { background: var(--success-500, #10B981); }
#pe-save[data-state="error"]   { background: var(--danger-500, #DC2626); }
#pe-save[disabled] { opacity: 0.6; cursor: not-allowed; }

@keyframes pe-spin { to { transform: rotate(360deg); } }

/* ── Reduced-motion safety ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .pe-field__input,
  .pe-field__affix,
  #pe-save {
    transition: none;
  }
  #pe-save[data-state="saving"]::before {
    animation: none;
    /* static indicator instead of a spinner */
    border-top-color: rgba(255,255,255,0.45);
  }
}