/**
 * GEMS form field submodule — elevated Bootstrap form controls (platform-wide).
 * Scope: .gems-form-field — safe alongside legacy forms.
 */

.gems-form-field {
  --gems-ff-radius: 0.5rem;
  --gems-ff-border: rgba(15, 23, 42, 0.12);
  --gems-ff-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  --gems-ff-focus: rgba(13, 110, 253, 0.22);
}

.gems-form-field__label {
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.01em;
  color: #334155;
}

.gems-form-field--md .gems-form-field__control,
.gems-form-field--md .gems-form-field__ig .form-control {
  min-height: 2.375rem;
  border-radius: var(--gems-ff-radius);
  border-color: var(--gems-ff-border);
  box-shadow: var(--gems-ff-shadow);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.gems-form-field--sm .gems-form-field__control,
.gems-form-field--sm .gems-form-field__ig .form-control {
  min-height: 2.125rem;
  border-radius: calc(var(--gems-ff-radius) - 0.05rem);
  border-color: var(--gems-ff-border);
  box-shadow: var(--gems-ff-shadow);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.gems-form-field__control:focus,
.gems-form-field__ig .form-control:focus {
  border-color: rgba(13, 110, 253, 0.55);
  box-shadow: 0 0 0 0.2rem var(--gems-ff-focus);
}

.gems-form-field__ig .input-group-text.gems-form-field__affix {
  font-size: 0.75rem;
  font-weight: 600;
  color: #475569;
  background: #f1f5f9;
  border-color: var(--gems-ff-border);
}

.gems-form-field__check-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #334155;
}

.gems-form-field__tip-btn {
  text-decoration: none !important;
  min-width: 1.1rem;
}

.gems-form-field__tip-btn:hover,
.gems-form-field__tip-btn:focus {
  color: #0d6efd !important;
}

.gems-form-field__tip-btn:focus {
  box-shadow: none !important;
  outline: 2px solid rgba(13, 110, 253, 0.35);
  outline-offset: 2px;
  border-radius: 50%;
}

/* Tooltip popover: wrap long copy (align with we-proto tooltips) */
.tooltip.gems-form-field-tooltip {
  --bs-tooltip-max-width: min(22rem, 92vw);
  max-width: min(22rem, 92vw);
}

.tooltip.gems-form-field-tooltip .tooltip-inner {
  box-sizing: border-box;
  display: block;
  max-width: min(22rem, 92vw) !important;
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  word-break: break-word;
  text-align: left;
  font-size: 0.8125rem;
  line-height: 1.45;
}