/* ════════════════════════════════════════════════════════════════════════
   DS Input/Textarea primitive (DS sub-step 2 — primitive 5)
   Refines the .form-control system IN PLACE (class names unchanged → app-wide
   upgrade). Consumes tokens.css. No JS.

   Sizes:     .form-control--sm (32) · md default (38) · .form-control--lg (46)
   States:    default · :focus-visible (ring) · .form-control--error (red)
              · .form-control--success (green, sparingly) · :disabled · readonly
   Textarea:  same .form-control; vertical resize + min-height 90px baseline.
   Select:    baseline .form-control works on <select>; chevron upgrade belongs
              to the Select primitive (follow-up).
   Required:  .form-label--required adds asterisk via ::after pseudo.
   Hint:      .form-hint (12px muted below input); .form-hint--error swaps to red
              for inline error messaging.
   Group:     .input-group wrapper with .input-group-prefix / .input-group-suffix
              slots for icon-left / button-right patterns.

   A11y win: replaces the audit's bare `outline:none` (one of 20 such
   suppressions) with a :focus-visible 2px ring, matching Button precedent.
   ════════════════════════════════════════════════════════════════════════ */

.form-group { margin-bottom: var(--sp-4); }

.form-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--muted);
  margin-bottom: var(--sp-1);
  text-transform: uppercase;
  letter-spacing: .4px;
}
.form-label--required::after {
  content: " *";
  color: var(--error);
  font-weight: 700;
}

.form-control {
  width: 100%;
  min-height: 38px;                       /* md (default) — matches Button md */
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--text-md);
  color: var(--text);
  background: var(--card);
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
  box-sizing: border-box;
}

/* Hover (subtle — secondary affordance, not a tactile moment like Button) */
.form-control:hover:not(:disabled):not([readonly]) { border-color: var(--gray-400); }

/* Focus-visible: DS cognac border + soft ring (3px @ .18). Transparent outline kept for HCM. */
.form-control:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--cf-ring-soft);
}
/* Fallback for browsers without :focus-visible — keep border-color shift */
.form-control:focus { outline: none; border-color: var(--accent); }

/* ── Sizes ──────────────────────────────────────────────── */
.form-control--sm { min-height: 32px; padding: 6px 10px; font-size: var(--text-sm); }
.form-control--lg { min-height: 46px; padding: 12px 14px; font-size: var(--text-lg); }

/* ── States ─────────────────────────────────────────────── */
.form-control--error,
.form-control[aria-invalid="true"] {
  border-color: var(--error);
}
.form-control--error:focus-visible,
.form-control[aria-invalid="true"]:focus-visible {
  outline-color: transparent;
  border-color: var(--error);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--error) 16%, transparent);
}

.form-control--success {
  border-color: var(--success);
}

.form-control:disabled,
.form-control[disabled] {
  /* background-color (not the shorthand): the shorthand resets background-image/
     repeat/position and made ds-select's disabled chevron tile across the control. */
  background-color: var(--gray-100);
  color: var(--gray-400);
  cursor: not-allowed;
  border-color: var(--gray-200);
}

.form-control[readonly] {
  background: var(--gray-50);
  cursor: default;
}

/* ── Textarea ───────────────────────────────────────────── */
textarea.form-control {
  min-height: 90px;
  resize: vertical;
  line-height: 1.5;
}

/* ── Select (baseline only — Select primitive adds chevron upgrade) ── */
select.form-control { cursor: pointer; }

/* ── Hint / inline error ─────────────────────────────────── */
.form-hint {
  display: block;
  font-size: var(--text-sm);
  color: var(--muted);
  margin-top: var(--sp-1);
  line-height: 1.4;
}
.form-hint--error { color: var(--error); }

/* ── Input group (icon prefix / button suffix) ──────────── */
.input-group {
  position: relative;
  display: flex;
  align-items: stretch;
}
.input-group .form-control { flex: 1; min-width: 0; }

/* Prefix: icon/text on the left, inside the input visual */
.input-group--prefix .form-control { padding-left: 36px; }
.input-group-prefix {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray-400);
  pointer-events: none;
  display: flex;
  align-items: center;
  z-index: 1;
}

/* Suffix: button/icon on the right; lives outside the input border */
.input-group--suffix .form-control {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;
}
.input-group-suffix {
  display: flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-left: none;
  border-top-right-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
  background: var(--gray-50);
  color: var(--muted);
  font-size: var(--text-sm);
  white-space: nowrap;
}
.input-group--suffix .form-control:focus-visible + .input-group-suffix {
  border-color: var(--accent);
}

/* ── Native file inputs (ds_file_input / CSV import) ─────────────────
   Style the picker button like a small outline button instead of the
   browser-default chrome (2026-07-02, K: "choose file butonu antika"). */
.form-control[type="file"] { padding: 6px 10px; cursor: pointer; }
.form-control[type="file"]::file-selector-button {
  font: 600 12.5px Inter, system-ui, sans-serif;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  padding: 5px 12px;
  margin-right: 12px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.form-control[type="file"]::file-selector-button:hover { border-color: var(--accent); color: var(--accent); }