/* Shared (non-scoped) styles for the FloatingField component family:
   FloatingField, FloatingNumberField, FloatingDateField, FloatingSelect,
   FloatingCheck, and the floating variant of EntityTypeahead.
   Served as a static asset from the RCL and linked once per app so every
   component shares one identical floating-label look regardless of host theme. */

.floating-field {
    --float-notch-bg: #fff;
    --float-focus: var(--primary, #2f6fed);
    --float-focus-ring: color-mix(in srgb, var(--float-focus) 20%, transparent);
    position: relative;
    display: block;
    margin-bottom: 1.15rem;
}

.floating-input {
    width: 100%;
    height: calc(3.5rem + 2px);
    padding: 1rem .9rem;
    border: 1px solid #d8dee9;
    border-radius: 10px;
    font-size: 1rem;
    background-color: var(--float-notch-bg);
    transition: border-color .15s, box-shadow .15s;
}

textarea.floating-input {
    height: auto;
    min-height: calc(3.5rem + 2px);
    resize: vertical;
}

/* Native select arrow + padding so the chevron doesn't collide with text. */
select.floating-input,
.floating-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%236b7686' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .9rem center;
    background-size: .9rem;
}

/* Hide the native placeholder; the floating label is the watermark. */
.floating-input::placeholder {
    color: transparent;
}

.floating-input:focus {
    outline: none;
    border-color: var(--float-focus);
    box-shadow: 0 0 0 3px var(--float-focus-ring);
}

/* Browsers paint a hard-coded (light blue) background on autofilled inputs and
   block background-color overrides. The large inset box-shadow trick is the only
   reliable way to force the field back to the surface color while keeping text. */
.floating-input:-webkit-autofill,
.floating-input:-webkit-autofill:hover,
.floating-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--float-notch-bg) inset;
    box-shadow: 0 0 0 1000px var(--float-notch-bg) inset;
    -webkit-text-fill-color: #212529;
    caret-color: #212529;
}

.floating-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--float-notch-bg) inset, 0 0 0 3px var(--float-focus-ring);
    box-shadow: 0 0 0 1000px var(--float-notch-bg) inset, 0 0 0 3px var(--float-focus-ring);
}

.floating-label {
    position: absolute;
    top: 1.75rem;
    left: .55rem;
    margin: 0;
    padding: 0 .35rem;
    font-size: 1rem;
    font-weight: 400;
    color: #6b7686;
    pointer-events: none;
    white-space: nowrap;
    transform: translateY(-50%);
    transform-origin: 0 50%;
    transition: top .12s ease, font-size .12s ease, color .12s ease, background-color .12s ease;
}

/* Floated state: lift onto the top border as a notch. :-webkit-autofill is included
   because browser autofill does not reliably clear :placeholder-shown. */
.floating-input:focus ~ .floating-label,
.floating-input:not(:placeholder-shown) ~ .floating-label,
.floating-input:-webkit-autofill ~ .floating-label {
    top: 0;
    font-size: .8rem;
    font-weight: 600;
    background-color: var(--float-notch-bg);
}

.floating-input:focus ~ .floating-label {
    color: var(--float-focus);
}

/* Invalid state wins over focus for the floated label. */
.floating-input.invalid ~ .floating-label,
.floating-input.modified.invalid ~ .floating-label,
.floating-input:user-invalid ~ .floating-label {
    color: #d64545;
}

/* Textarea label aligns to the top rather than vertically centered. */
textarea.floating-input ~ .floating-label {
    top: 1.35rem;
}

/* Select has no :placeholder-shown; float the label unless the control is empty
   (data-empty="True") and not focused. */
.floating-field--select .floating-select:focus ~ .floating-label,
.floating-field--select .floating-select:not([data-empty="True"]) ~ .floating-label {
    top: 0;
    font-size: .8rem;
    font-weight: 600;
    background-color: var(--float-notch-bg);
}

.floating-field--select .floating-select[data-empty="True"]:not(:focus) {
    color: #6b7686;
}

/* Date and other always-floated controls keep the label lifted permanently. */
.floating-field--always .floating-label {
    top: 0;
    font-size: .8rem;
    font-weight: 600;
    background-color: var(--float-notch-bg);
}

/* Field-level validation message sits snug beneath the control. */
.floating-field .validation-message {
    display: block;
    color: #d64545;
    font-size: .85rem;
    font-weight: 600;
    margin-top: .16px;
    line-height: 20px;
}

/* Error border when the control is invalid (Blazor adds .invalid). */
.floating-field .floating-input.invalid,
.floating-field .floating-input.modified.invalid,
.floating-field .floating-input:user-invalid {
    border-color: #d64545;
    box-shadow: 0 0 0 .2rem rgba(214, 69, 69, .18);
}

.floating-field .floating-input.invalid:focus,
.floating-field .floating-input.modified.invalid:focus,
.floating-field .floating-input:user-invalid:focus {
    border-color: #d64545;
    box-shadow: 0 0 0 .2rem rgba(214, 69, 69, .3);
}

/* Checkbox variant red border when invalid. */
.floating-check .floating-check__input.invalid {
    border-color: #d64545;
}

/* ---------- Checkbox variant ---------- */
.floating-check {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-height: calc(3.5rem + 2px);
    padding: 1rem .9rem;
    margin-bottom: 1.15rem;
    border: 1px solid #d8dee9;
    border-radius: 10px;
    background-color: #fff;
}

.floating-check__input {
    width: 1.15rem;
    height: 1.15rem;
    margin: 0;
    flex: 0 0 auto;
}

.floating-check__label {
    margin: 0;
    font-size: 1rem;
    color: #3a4557;
    cursor: pointer;
}

.floating-check .validation-message {
    flex-basis: 100%;
    color: #d64545;
    font-size: .85rem;
    font-weight: 600;
}