/* =========================================================================
   jquery.uifloat.css v1.4
   - Floating label Android safe
   - Background = background input
   - Background uniquement sur la longueur du texte
   ========================================================================= */

.uifloat {
  position: relative;
}

/* Neutralise focus Bootstrap */
.uifloat>.form-control:focus {
  box-shadow: none !important;
  border-color: inherit !important;
  outline: none !important;
}

/* Champ */
.uifloat>.form-control {
  padding-top: .55rem;
  padding-bottom: .55rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}

/* Certains navigateurs affichent un placeholder "jj/mm/aaaa".
   On le masque (sans casser la saisie). */
.uifloat input[type="date"]::placeholder,
.uifloat input[type="time"]::placeholder,
.uifloat input[type="datetime-local"]::placeholder,
.uifloat input[type="month"]::placeholder,
.uifloat input[type="week"]::placeholder {
  opacity: 0;
}

/* -------------------------------------------------------------------------
   LABEL
   ------------------------------------------------------------------------- */

.uifloat>label {
  position: absolute;
  left: .75rem;
  top: .60rem;

  display: inline-block;
  width: auto;
  max-width: calc(100% - 1.5rem);

  margin: 0;
  padding: 0 .25rem;

  color: #6c757d;
  line-height: 1;
  pointer-events: none;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  /* ✅ masque TOTAL du cadre derrière */
  background: var(--uifloat-bg, #fff);
  box-shadow: 0 0 0 2px var(--uifloat-bg, #fff);
  border-radius: 15px;

  transition: all .15s ease;
}


/* état flottant */
.uifloat.is-uifloat>label {
  top: -0.33rem;
  font-size: 60%;
  color: #495057;
}

/* textarea */
.uifloat>textarea.form-control~label {
  top: 1.1rem;
}

.uifloat.is-uifloat>textarea.form-control~label {
  top: -0.33rem;
}

/* disabled / readonly */
.uifloat>.form-control:disabled~label,
.uifloat>.form-control[readonly]~label {
  color: #adb5bd;
}

/* focus/filled */
.uifloat.is-uifocus>.form-control {
  border-color: #495057;
  box-shadow: 0 0 0 .15rem rgba(0, 0, 0, .06);
}

.uifloat.is-uifilled>.form-control {
  border-color: #adb5bd;
}

/* -------------------------------------------------------------------------
   SM
   ------------------------------------------------------------------------- */
.uifloat>.form-control.form-control-sm {
  padding-top: .35rem;
  padding-bottom: .35rem;
  font-size: .875rem;
}

.uifloat>.form-control.form-control-sm~label {
  left: .65rem;
  top: .50rem;
  font-size: .875rem;
}

.uifloat.is-uifloat>.form-control.form-control-sm~label {
  top: -0.33rem;
  font-size: 60%;
}

.uifloat>textarea.form-control-sm~label {
  top: .95rem;
}

/* -------------------------------------------------------------------------
   RIGHT BUTTONS
   ------------------------------------------------------------------------- */
.uifloat.has-rightbtn>label {
  max-width: calc(100% - 3.2rem);
}

/* ---------------- Password toggle ---------------- */
.uifloat>input[type="password"].form-control,
.uifloat>input[type="text"].is-uipwd-visible.form-control {
  padding-right: 2.5rem;
}

.uifloat .ui-pwd-toggle {
  position: absolute;
  right: .5rem;
  top: 0;
  z-index: 3;

  border: 0;
  background: transparent;
  color: #6c757d;
  padding: .25rem .35rem;
  cursor: pointer;
  outline: none;

  -webkit-tap-highlight-color: transparent;
}

/* icône œil */
.uifloat .ui-pwd-toggle .ui-eye {
  display: inline-block;
  width: 18px;
  height: 12px;
  border: 2px solid currentColor;
  border-radius: 12px;
  position: relative;
  opacity: .85;
}

.uifloat .ui-pwd-toggle .ui-eye::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
}

.uifloat .ui-pwd-toggle.is-off .ui-eye::after {
  content: "";
  position: absolute;
  left: -3px;
  top: 50%;
  width: 24px;
  height: 2px;
  background: currentColor;
  transform: rotate(-25deg);
  opacity: .9;
}

/* ---------------- File input ---------------- */
.uifloat>input[type="file"].form-control {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  pointer-events: auto;
  z-index: 2;
}

.uifloat .ui-file-path.form-control {
  padding-right: 2.5rem;
  cursor: pointer;
  position: relative;
  z-index: 1;
}

.uifloat .ui-file-action {
  position: absolute;
  right: .5rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;

  border: 0;
  background: transparent;
  color: #6c757d;
  padding: .25rem .35rem;
  cursor: pointer;
  outline: none;

  -webkit-tap-highlight-color: transparent;
}

/* icône dossier */
.uifloat .ui-file-action .ui-folder {
  display: inline-block;
  width: 18px;
  height: 12px;
  border: 2px solid currentColor;
  border-radius: 2px;
  position: relative;
  opacity: .85;
}

.uifloat .ui-file-action .ui-folder::before {
  content: "";
  position: absolute;
  left: 1px;
  top: -5px;
  width: 10px;
  height: 6px;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 2px 2px 0 0;
  background: var(--uifloat-bg, #fff);
}

/* =========================================================
   DATE/TIME : masquer l'affichage natif "jj/mm/aaaa" quand vide
   (Chrome / Edge / Android WebView)
   ========================================================= */

/* quand vide (pas filled) -> masquer */
.uifloat:not(.is-uifilled) input[type="date"]::-webkit-datetime-edit,
.uifloat:not(.is-uifilled) input[type="datetime-local"]::-webkit-datetime-edit,
.uifloat:not(.is-uifilled) input[type="time"]::-webkit-datetime-edit,
.uifloat:not(.is-uifilled) input[type="month"]::-webkit-datetime-edit,
.uifloat:not(.is-uifilled) input[type="week"]::-webkit-datetime-edit {
  color: transparent;
}

/* séparateurs aussi */
.uifloat:not(.is-uifilled) input[type="date"]::-webkit-datetime-edit-text,
.uifloat:not(.is-uifilled) input[type="datetime-local"]::-webkit-datetime-edit-text,
.uifloat:not(.is-uifilled) input[type="time"]::-webkit-datetime-edit-text,
.uifloat:not(.is-uifilled) input[type="month"]::-webkit-datetime-edit-text,
.uifloat:not(.is-uifilled) input[type="week"]::-webkit-datetime-edit-text {
  color: transparent;
}

/* dès focus OU rempli -> afficher normalement */
.uifloat.is-uifocus input[type="date"]::-webkit-datetime-edit,
.uifloat.is-uifilled input[type="date"]::-webkit-datetime-edit,
.uifloat.is-uifocus input[type="datetime-local"]::-webkit-datetime-edit,
.uifloat.is-uifilled input[type="datetime-local"]::-webkit-datetime-edit,
.uifloat.is-uifocus input[type="time"]::-webkit-datetime-edit,
.uifloat.is-uifilled input[type="time"]::-webkit-datetime-edit,
.uifloat.is-uifocus input[type="month"]::-webkit-datetime-edit,
.uifloat.is-uifilled input[type="month"]::-webkit-datetime-edit,
.uifloat.is-uifocus input[type="week"]::-webkit-datetime-edit,
.uifloat.is-uifilled input[type="week"]::-webkit-datetime-edit {
  color: inherit;
}