/* =============================
   LIEN AVEC BOOTSTRAP / WAPPLER
============================= */
:root {
  --tenant-primary: var(--bs-primary);

  /* Light */
  --field-bg: #ffffff;
  --field-text: #212529;
  --field-border: #ced4da;
  --field-placeholder: rgba(33, 37, 41, 0.55);

  --underline-height: 2px;
}

/* =============================
   DARK MODE (auto)
============================= */
@media (prefers-color-scheme: dark) {
  :root {
    --field-bg: #0f1115;
    --field-text: #e9ecef;
    --field-border: rgba(233, 236, 239, 0.35);
    --field-placeholder: rgba(233, 236, 239, 0.55);
  }
}

/* =============================
   RESET FOCUS BLEU (Chrome/Edge/Safari)
============================= */
input:focus,
textarea:focus,
select:focus,
button:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* =============================
   INPUTS + BOOTSTRAP (.form-control / .form-select)
   Underline animé (gauche -> droite) + elastic
============================= */
input,
textarea,
select,
.form-control,
.form-select {
  background-color: var(--field-bg) !important;
  color: var(--field-text) !important;

  border: none !important;
  border-bottom: 2px solid var(--field-border) !important;
  border-radius: 0 !important;

  padding: 10px 6px;
  box-shadow: none !important;

  /* underline animé (overlay) */
  background-image: linear-gradient(
    to right,
    var(--tenant-primary),
    var(--tenant-primary)
  );
  background-repeat: no-repeat;
  background-position: 0% 100%;
  background-size: 0% var(--underline-height);

  transition:
    background-size 520ms cubic-bezier(0.34, 1.56, 0.64, 1),
    border-color 220ms ease,
    color 150ms ease,
    background-color 150ms ease;
}

/* =============================
   PLACEHOLDER
============================= */
input::placeholder,
textarea::placeholder {
  color: var(--field-placeholder) !important;
}

/* =============================
   FOCUS : underline animé visible
============================= */
input:focus,
textarea:focus,
select:focus,
.form-control:focus,
.form-select:focus {
  background-size: 100% var(--underline-height);
}

/* =============================
   HOVER léger
============================= */
input:hover,
textarea:hover,
select:hover,
.form-control:hover,
.form-select:hover {
  border-bottom-color: color-mix(in srgb, var(--tenant-primary), transparent 55%) !important;
}

/* =============================
   AUTOFILL CHROME
============================= */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--field-text) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--field-bg) inset !important;
  transition: background-color 9999s ease-in-out 0s;
}

/* =============================
   ACCESSIBILITÉ
============================= */
@media (prefers-reduced-motion: reduce) {
  input,
  textarea,
  select,
  .form-control,
  .form-select {
    transition: none !important;
  }
}