/* ============================================================================
   HINT IT — v2 design system : FORMS (the master input system)
   ----------------------------------------------------------------------------
   The single source of truth for every form control on v2: field wrapper,
   text-like inputs (text/email/password/tel/number/search), textarea, select,
   checkbox, radio, switch, OTP, and file upload. SHARED — loaded on every v2
   page via V2Shell. All scoped under `.hint-v2`, tokens only (no raw hex/px),
   no `!important`, no bare-element selectors.

   Canonical look mirrors the mobile apps (business-app components/ui/Form.tsx,
   Checkbox.tsx, ToggleSwitch.tsx; consumer-app PhoneStep/OtpStep): comfortable
   ~44px controls, `--primary` focus ring, danger on invalid, muted placeholder.
   Pair these classes with the V2Field / V2*Input Razor components.
   ============================================================================ */

/* ---------- Field wrapper (label + control + hint/error) ---------- */
.hint-v2 .field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.hint-v2 .field-label {
  font-size: var(--text-label);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}
.hint-v2 .field-label-req {
  color: var(--danger);
  margin-left: var(--space-1);
}
.hint-v2 .field-hint {
  font-size: var(--text-micro);
  color: var(--text-muted);
}
.hint-v2 .field-error,
.hint-v2 .validation-message {
  font-size: var(--text-label);
  color: var(--danger-text);
}
/* Two-up (or N-up) horizontal field grouping (e.g. state + zip) */
.hint-v2 .field-row {
  display: flex;
  gap: var(--space-3);
}
.hint-v2 .field-row > .field {
  flex: 1 1 0;
  min-width: 0;
}
.hint-v2 .fieldset {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  border: 0;
  margin: 0;
  padding: 0;
}

/* ---------- Text-like controls (text/email/password/tel/number/search), textarea, select ---------- */
.hint-v2 .input,
.hint-v2 .textarea,
.hint-v2 .select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--text-primary);
  background: var(--bg-input);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-input);
  transition: border-color var(--dur-hover) var(--ease-out),
              box-shadow var(--dur-hover) var(--ease-out);
}
.hint-v2 .input::placeholder,
.hint-v2 .textarea::placeholder {
  color: var(--text-muted);
}
.hint-v2 .textarea {
  min-height: 7rem;
  resize: vertical;
}
.hint-v2 .input:focus,
.hint-v2 .textarea:focus,
.hint-v2 .select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
}
/* Invalid (Blazor adds .invalid/.modified.invalid; .field-error is the generic) */
.hint-v2 .input.invalid,
.hint-v2 .input.modified.invalid,
.hint-v2 .textarea.invalid,
.hint-v2 .select.invalid {
  border-color: var(--danger);
}
.hint-v2 .input:disabled,
.hint-v2 .textarea:disabled,
.hint-v2 .select:disabled,
.hint-v2 .input[readonly],
.hint-v2 .textarea[readonly] {
  background: var(--bg-elevated);
  color: var(--text-secondary);
  cursor: not-allowed;
}
/* Monospace variant (codes / IDs) */
.hint-v2 .input-mono {
  font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: 0.04em;
}

/* ---------- Input group (icon-affixed input: search, etc.) ---------- */
.hint-v2 .input-group {
  position: relative;
}
.hint-v2 .input-group > .v2-icon {
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  pointer-events: none;
}
.hint-v2 .input-group .input {
  padding-left: calc(var(--space-3) + 16px + var(--space-2));
}
.hint-v2 .input-group-clear {
  position: absolute;
  right: var(--space-2);
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  border-radius: var(--radius-full);
  cursor: pointer;
}
.hint-v2 .input-group-clear:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
}
.hint-v2 .input-group:has(.input-group-clear) .input {
  padding-right: calc(var(--space-3) + 18px + var(--space-2));
}

/* ---------- Checkbox (small, business-app parity: 18px filled/bordered) ---------- */
.hint-v2 .checkbox {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  position: relative;
  width: 18px;
  height: 18px;
  border: 2px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--bg-surface);
  cursor: pointer;
  transition: background var(--dur-quick) var(--ease-out), border-color var(--dur-quick) var(--ease-out);
}
.hint-v2 .checkbox:checked {
  background: var(--primary);
  border-color: var(--primary);
}
.hint-v2 .checkbox:checked::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid var(--text-on-primary);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.hint-v2 .checkbox:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
}
/* Checkbox/radio paired with a label on one line */
.hint-v2 .check-row {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
}
.hint-v2 .check-row-text {
  font-size: var(--text-body);
  color: var(--text-primary);
}

/* ---------- Radio (circular) ---------- */
.hint-v2 .radio {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  position: relative;
  width: 18px;
  height: 18px;
  border: 2px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  cursor: pointer;
  transition: border-color var(--dur-quick) var(--ease-out);
}
.hint-v2 .radio:checked {
  border-color: var(--primary);
}
.hint-v2 .radio:checked::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--primary);
  transform: translate(-50%, -50%);
}
.hint-v2 .radio:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
}

/* ---------- Switch (toggle — promoted from settings .set-switch) ---------- */
.hint-v2 .switch {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  position: relative;
  width: 46px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--dur-quick) var(--ease-out), border-color var(--dur-quick) var(--ease-out);
}
.hint-v2 .switch::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  box-shadow: var(--shadow-float);
  transition: transform var(--dur-quick) var(--ease-out);
}
.hint-v2 .switch:checked {
  background: var(--primary);
  border-color: var(--primary);
}
.hint-v2 .switch:checked::before {
  transform: translateX(18px);
}
.hint-v2 .switch:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
}
/* Label row: text on the left, switch pushed to the right (settings parity) */
.hint-v2 .switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.hint-v2 .switch-row-text {
  flex: 1 1 auto;
  min-width: 0;
}
.hint-v2 .switch-row-label {
  font-size: var(--text-body);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}
.hint-v2 .switch-row-desc {
  font-size: var(--text-label);
  color: var(--text-secondary);
}

/* ---------- OTP / verification (visual cells over a hidden input — consumer-app pattern) ---------- */
.hint-v2 .otp {
  position: relative;
  display: inline-flex;
  gap: var(--space-3);
}
.hint-v2 .otp-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 56px;
  border: 2px solid var(--border-input);
  border-radius: var(--radius-input);
  background: var(--bg-input);
  font-family: var(--font-display);
  font-weight: var(--fw-display-bold);
  font-size: var(--text-heading);
  color: var(--text-primary);
}
.hint-v2 .otp-cell-filled {
  border-color: var(--primary);
}
/* The real input is visually hidden but covers the cells for focus/typing */
.hint-v2 .otp-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border: 0;
  background: transparent;
  cursor: text;
  /* keep caret/selection invisible while still focusable + typeable */
  color: transparent;
  letter-spacing: 1em;
}

/* ---------- File upload (button + filename) ---------- */
.hint-v2 .file {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}
.hint-v2 .file-name {
  font-size: var(--text-label);
  color: var(--text-secondary);
}