/**
 * RaportAI Design System — Forms (FE-15 wave 1)
 *
 * Merkezi form component katmanı. Bootstrap 5 .form-control / .form-label
 * ile co-exist eder. modern-theme.css zaten .form-control / .form-select /
 * .form-label için base'leri tanımlamış (!important). Bu dosya:
 *   - .form-group wrapper (modern-theme'de yok)
 *   - Validation states (.is-invalid, .is-valid, .invalid-feedback)
 *   - .form-check (checkbox/radio) — net-new
 *   - Floating label pattern (opsiyonel modern UX)
 *   - Focus-visible ring (a11y) — border-focus token
 *
 * Specificity: !important kullanmaz; sadece modern-theme'de eksik
 * davranışları ekler.
 */

/* ────────────────────────────────────────────────────────────────────
 * Form group — label + input + help/error wrapper
 * ──────────────────────────────────────────────────────────────────── */
.form-group {
  margin-bottom: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.form-group + .form-group {
  margin-top: 0;
}

/* form-label modern-theme'de mevcut; sadece muted help text ekliyoruz */
.form-text {
  color: var(--text-muted);
  font-size: 0.8125rem;
  margin-top: var(--spacing-xs);
}

.form-required::after {
  content: " *";
  color: var(--danger);
  font-weight: 700;
}

/* ────────────────────────────────────────────────────────────────────
 * Focus-visible ring — keyboard a11y
 * ──────────────────────────────────────────────────────────────────── */
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--border-focus) 35%, transparent);
  outline-offset: 1px;
}

/* ────────────────────────────────────────────────────────────────────
 * Validation states — Bootstrap-compatible class adlandırması
 * ──────────────────────────────────────────────────────────────────── */
.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--danger) !important;
  background-image: none;
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 25%, transparent);
}

.form-control.is-valid,
.form-select.is-valid {
  border-color: var(--success) !important;
}

.form-control.is-valid:focus,
.form-select.is-valid:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 25%, transparent);
}

.invalid-feedback {
  display: none;
  color: var(--danger);
  font-size: 0.8125rem;
  margin-top: var(--spacing-xs);
}

.valid-feedback {
  display: none;
  color: var(--success);
  font-size: 0.8125rem;
  margin-top: var(--spacing-xs);
}

.form-control.is-invalid ~ .invalid-feedback,
.form-select.is-invalid ~ .invalid-feedback,
.was-validated .form-control:invalid ~ .invalid-feedback {
  display: block;
}

.form-control.is-valid ~ .valid-feedback,
.form-select.is-valid ~ .valid-feedback,
.was-validated .form-control:valid ~ .valid-feedback {
  display: block;
}

/* ────────────────────────────────────────────────────────────────────
 * Form check (checkbox/radio) — net-new
 * ──────────────────────────────────────────────────────────────────── */
.form-check {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) 0;
}

.form-check-input {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.125rem;
  accent-color: var(--primary);
  cursor: pointer;
}

.form-check-label {
  color: var(--text-primary);
  cursor: pointer;
  line-height: 1.4;
}

.form-check-input:disabled,
.form-check-input:disabled + .form-check-label {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ────────────────────────────────────────────────────────────────────
 * Floating label (opsiyonel modern UX) — Bootstrap form-floating uyumlu
 * Kullanım: <div class="form-floating"><input class="form-control" placeholder=" ">
 *           <label>Email</label></div>
 * ──────────────────────────────────────────────────────────────────── */
.form-floating {
  position: relative;
}

.form-floating > .form-control {
  height: 3.5rem;
  padding: 1.25rem 1rem 0.5rem !important;
}

.form-floating > label {
  position: absolute;
  top: 0;
  left: 0;
  padding: 1rem;
  color: var(--text-muted);
  pointer-events: none;
  transform-origin: 0 0;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
  transform: scale(0.78) translateY(-0.5rem);
  opacity: 0.85;
}

/* ────────────────────────────────────────────────────────────────────
 * Disabled inputs
 * ──────────────────────────────────────────────────────────────────── */
.form-control:disabled,
.form-select:disabled {
  background-color: var(--bg-subtle) !important;
  color: var(--text-muted) !important;
  cursor: not-allowed;
  opacity: 0.7;
}