/* Outlined floating labels — shared by portal, automation, cargo */
:root {
  --float-accent: #0f766e;
  --float-accent-ring: rgba(15, 118, 110, 0.15);
  --float-border: #c5cdd6;
  --float-label: #6b7280;
  --float-label-idle: #4b5563;
  --float-bg: #fff;
}

.form-group.float-field {
  position: relative;
  margin-bottom: 1.1rem;
}

.form-group.float-field > input,
.form-group.float-field > select,
.form-group.float-field > textarea,
.form-group.float-field > .jdp-field > input {
  width: 100%;
  padding: 0.85rem 0.9rem;
  border: 1.5px solid var(--float-border);
  border-radius: 12px;
  background: var(--float-bg);
  font-family: inherit;
  font-size: 0.92rem;
  color: inherit;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
  box-sizing: border-box;
}

.form-group.float-field > .jdp-field > input {
  padding-left: 2.4rem;
}

.form-group.float-field > select {
  padding-left: 2rem;
  cursor: pointer;
}

.form-group.float-field > textarea {
  min-height: 5.5rem;
  resize: vertical;
}

.form-group.float-field > input::placeholder,
.form-group.float-field > textarea::placeholder,
.form-group.float-field > .jdp-field > input::placeholder {
  color: transparent;
  opacity: 0;
}

.form-group.float-field.is-floated > input:placeholder-shown::placeholder,
.form-group.float-field:focus-within > input:placeholder-shown::placeholder,
.form-group.float-field.is-floated > textarea:placeholder-shown::placeholder,
.form-group.float-field:focus-within > textarea:placeholder-shown::placeholder,
.form-group.float-field.is-floated > .jdp-field > input:placeholder-shown::placeholder,
.form-group.float-field:focus-within > .jdp-field > input:placeholder-shown::placeholder {
  color: #9ca3af;
  opacity: 1;
}

.form-group.float-field > label {
  position: absolute;
  top: 50%;
  right: 0.9rem;
  left: auto;
  transform: translateY(-50%);
  margin: 0;
  padding: 0 0.35rem;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--float-label);
  background: transparent;
  pointer-events: none;
  line-height: 1;
  max-width: calc(100% - 2.2rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: top 0.16s ease, transform 0.16s ease, font-size 0.16s ease, color 0.16s ease, background 0.16s ease;
  z-index: 1;
}

.form-group.float-field > textarea + label {
  top: 0.9rem;
  transform: none;
}

.form-group.float-field > input:focus,
.form-group.float-field > select:focus,
.form-group.float-field > textarea:focus,
.form-group.float-field > .jdp-field > input:focus {
  outline: none;
  border-color: var(--float-accent);
  box-shadow: 0 0 0 3px var(--float-accent-ring);
}

.form-group.float-field.is-floated > label,
.form-group.float-field.has-value > label,
.form-group.float-field:focus-within > label,
.form-group.float-field:has(> input:not(:placeholder-shown)) > label,
.form-group.float-field:has(> textarea:not(:placeholder-shown)) > label,
.form-group.float-field:has(> .jdp-field > input:not(:placeholder-shown)) > label,
.form-group.float-field:has(> select option:checked:not([value=""])) > label {
  top: 0;
  transform: translateY(-50%);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--float-accent);
  background: var(--float-bg);
}

.form-group.float-field.is-floated:not(:focus-within) > label,
.form-group.float-field.has-value:not(:focus-within) > label,
.form-group.float-field:has(> input:not(:placeholder-shown)):not(:focus-within) > label,
.form-group.float-field:has(> textarea:not(:placeholder-shown)):not(:focus-within) > label,
.form-group.float-field:has(> .jdp-field > input:not(:placeholder-shown)):not(:focus-within) > label,
.form-group.float-field:has(> select option:checked:not([value=""])):not(:focus-within) > label {
  color: var(--float-label-idle);
}

.login-form .form-group.float-field.is-floated > label,
.login-form .form-group.float-field.has-value > label,
.login-form .form-group.float-field:focus-within > label,
.login-form .form-group.float-field:has(> input:not(:placeholder-shown)) > label {
  font-size: 12px;
}

.form-group.float-field > small,
.form-group.float-field > .field-hint,
.form-group.float-field > .form-hint {
  display: block;
  margin-top: 0.35rem;
  position: relative;
  z-index: 0;
}

/* Login page: slightly larger fields */
.login-form .form-group.float-field {
  margin-bottom: 22px;
}

.login-form .form-group.float-field > input {
  padding: 14px;
  font-size: 15px;
}

.login-form .form-group.float-field > label {
  font-size: 15px;
  right: 14px;
}

.form-group.float-field.has-password-toggle > input {
  padding-left: 2.75rem;
}

.password-toggle-btn {
  position: absolute;
  left: 0.55rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 2.1rem;
  height: 2.1rem;
  border: none;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  padding: 0;
  font-size: 1rem;
}

.password-toggle-btn:hover,
.password-toggle-btn:focus-visible {
  color: var(--float-accent, #0f766e);
  outline: none;
  background: rgba(15, 118, 110, 0.08);
}

.password-toggle-btn[aria-pressed="true"] {
  color: var(--float-accent, #0f766e);
}