/**
 * .floating-on-border — Material-Design "outlined" variant for Bootstrap 5
 * floating labels. Use TOGETHER with .form-floating:
 *
 *     <div class="form-floating floating-on-border">
 *         <input class="form-control" id="x" placeholder="Name">
 *         <label for="x">Name</label>
 *     </div>
 *
 * When the label floats (focus, value present, or a select), it moves ONTO
 * the field's top border, masking the border line behind its own background,
 * and the field's value stays vertically centered (instead of BS5's default
 * label-inside-the-box look). Works for .form-control, textarea and
 * .form-select.
 */

/* Floated state: pin the label so its text straddles the top border. */
.form-floating.floating-on-border > .form-control:focus ~ label,
.form-floating.floating-on-border > .form-control:not(:placeholder-shown) ~ label,
.form-floating.floating-on-border > .form-control-plaintext ~ label,
.form-floating.floating-on-border > .form-select ~ label {
    height: auto;
    top: 0;
    left: .625rem;
    padding: 0 .35em;
    margin: 0;
    transform: translateY(-50%) scale(.85);
    transform-origin: left center;
    background-color: var(--bs-body-bg, #fff);
    border-radius: .25rem;
    width: auto;
    max-width: calc(100% - 1.25rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 1;
    color: var(--bs-secondary-color, #6c757d);
}

/* BS5 paints its own label backdrop via ::after — it would sit misaligned
   under the relocated label, so switch it off for this variant. */
.form-floating.floating-on-border > .form-control:focus ~ label::after,
.form-floating.floating-on-border > .form-control:not(:placeholder-shown) ~ label::after,
.form-floating.floating-on-border > .form-control-plaintext ~ label::after,
.form-floating.floating-on-border > .form-select ~ label::after {
    background-color: transparent;
}

/* With the label out of the box, keep the value vertically centered instead
   of BS5's pushed-down layout (default: padding-top 1.625rem / bottom .625). */
.form-floating.floating-on-border > .form-control:focus,
.form-floating.floating-on-border > .form-control:not(:placeholder-shown),
.form-floating.floating-on-border > .form-select {
    padding-top: 1.125rem;
    padding-bottom: 1.125rem;
}

/* Textareas keep their own top padding so multi-line text starts high. */
.form-floating.floating-on-border > textarea.form-control:focus,
.form-floating.floating-on-border > textarea.form-control:not(:placeholder-shown) {
    padding-top: 1rem;
    padding-bottom: .625rem;
}

/* ------------------------------------------------------------------ -sm --
 * Small-control support. Stock BS5 form-floating hard-codes a 3.5rem field
 * and ignores .form-control-sm / .form-select-sm; with the label sitting on
 * the border the interior no longer needs label room, so a compact field is
 * possible:
 *
 *     <div class="form-floating floating-on-border">
 *         <input class="form-control form-control-sm" ...>
 *         <label ...>...</label>
 *     </div>
 */
.form-floating.floating-on-border > .form-control-sm,
.form-floating.floating-on-border > .form-select-sm {
    height: calc(2.5rem + 2px);
    min-height: calc(2.5rem + 2px);
    font-size: .875rem;
    padding: .5rem .5rem;
}

/* Resting label (empty, unfocused): center it in the compact field. */
.form-floating.floating-on-border > .form-control-sm ~ label,
.form-floating.floating-on-border > .form-select-sm ~ label {
    padding: .625rem .5rem;
    font-size: .875rem;
}

/* Floated state: keep the value centered in the compact field... */
.form-floating.floating-on-border > .form-control-sm:focus,
.form-floating.floating-on-border > .form-control-sm:not(:placeholder-shown),
.form-floating.floating-on-border > .form-select-sm {
    padding-top: .5rem;
    padding-bottom: .5rem;
}

/* ...and shrink the on-border label to match. */
.form-floating.floating-on-border > .form-control-sm:focus ~ label,
.form-floating.floating-on-border > .form-control-sm:not(:placeholder-shown) ~ label,
.form-floating.floating-on-border > .form-select-sm ~ label {
    height: auto;
    top: 0;
    left: .5rem;
    padding: 0 .3em;
    margin: 0;
    font-size: .875rem;
    transform: translateY(-50%) scale(.85);
    /* In very narrow fields (e.g. a per-page selector) the base allowance
       truncates even a short label; grant a minimum so words like "Show"
       survive, overflowing the field edge slightly instead of ellipsizing. */
    max-width: max(calc(100% - .6rem), 3.5rem);
}

/* Compact multi-line: small textareas keep top-aligned text. */
.form-floating.floating-on-border > textarea.form-control-sm {
    height: auto;
}
.form-floating.floating-on-border > textarea.form-control-sm:focus,
.form-floating.floating-on-border > textarea.form-control-sm:not(:placeholder-shown) {
    padding-top: .625rem;
    padding-bottom: .5rem;
}