/**
 * SMART-PGS — Outlined floating labels
 */

.float-field {
    position: relative;
    margin-bottom: 0.35rem;
}

/* Input + label shell — label centers on control only (not hint/error below) */
.float-field-control {
    position: relative;
    display: block;
}

.float-field > .form-control,
.float-field > .form-select,
.float-field > select,
.float-field > textarea.form-control,
.float-field-control > .form-control,
.float-field-control > .form-select,
.float-field-control > select,
.float-field-control > textarea.form-control {
    width: 100%;
    min-height: 48px;
    padding: 0 0.75rem;
    border: 1px solid #ced4da;
    border-radius: 8px;
    background-color: #fff;
    font-size: 0.9375rem;
    line-height: calc(48px - 2px);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

.float-field > .form-control:not(textarea)::placeholder,
.float-field > textarea.form-control::placeholder,
.float-field-control > .form-control:not(textarea)::placeholder,
.float-field-control > textarea.form-control::placeholder {
    color: #94a3b8;
    opacity: 1;
    line-height: inherit;
}

.float-field > .form-select,
.float-field > select,
.float-field-control > .form-select,
.float-field-control > select {
    padding-right: 2rem;
    cursor: pointer;
    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='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 14px 10px;
    appearance: none;
}

.float-field > textarea.form-control,
.float-field-control > textarea.form-control {
    min-height: 88px;
    line-height: 1.4;
    padding-top: 1.35rem;
}

.float-field > .form-control:focus,
.float-field > .form-select:focus,
.float-field > select:focus,
.float-field-control > .form-control:focus,
.float-field-control > .form-select:focus,
.float-field-control > select:focus {
    border-color: var(--smart-primary, #5b8def);
    box-shadow: 0 0 0 3px var(--smart-primary-soft, rgba(91, 141, 239, 0.12));
    outline: none;
}

.float-field > .float-field-label,
.float-field > label.form-label,
.float-field > label.overlapping-label,
.float-field > .banking-field-label,
.float-field-control > .float-field-label,
.float-field-control > label.form-label,
.float-field-control > label.overlapping-label,
.float-field-control > .banking-field-label {
    position: absolute;
    left: 0.7rem;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    padding: 0 4px;
    font-size: 0.9375rem;
    font-weight: 400;
    color: #94a3b8;
    background: transparent;
    pointer-events: none;
    transition: top 0.15s ease, transform 0.15s ease, font-size 0.15s ease, color 0.15s ease, background 0.15s ease;
    z-index: 2;
    line-height: 1.2;
    max-width: calc(100% - 2rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Label as placeholder — vertically centered when field is empty (not date fields) */
.float-field:not(.is-active):not(.is-focused):not(.float-field-date) > .float-field-label,
.float-field:not(.is-active):not(.is-focused):not(.float-field-date) > label.form-label,
.float-field:not(.is-active):not(.is-focused):not(.float-field-date) > label.overlapping-label,
.float-field:not(.is-active):not(.is-focused):not(.float-field-date) > .banking-field-label,
.float-field:not(.is-active):not(.is-focused):not(.float-field-date) .float-field-control > .float-field-label,
.float-field:not(.is-active):not(.is-focused):not(.float-field-date) .float-field-control > label.form-label,
.float-field:not(.is-active):not(.is-focused):not(.float-field-date) .float-field-control > label.overlapping-label,
.float-field:not(.is-active):not(.is-focused):not(.float-field-date) .float-field-control > .banking-field-label {
    top: 50%;
    transform: translateY(-50%);
}

/* Date fields — label always on top border (value-style, not placeholder) */
.float-field.float-field-date .float-field-control > .float-field-label,
.float-field.float-field-date .float-field-control > label,
.float-field.float-field-date > .float-field-label,
.float-field.float-field-date > label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.72rem;
    font-weight: 600;
    background: #fff;
}

.float-field.float-field-date:not(.is-focused) .float-field-control > label,
.float-field.float-field-date:not(.is-focused) > label {
    color: #64748b;
}

.float-field.float-field-date.is-focused .float-field-control > label,
.float-field.float-field-date.is-focused > label {
    color: var(--smart-primary, #5b8def);
}

.float-field.is-active > .float-field-label,
.float-field.is-active > label.form-label,
.float-field.is-active > label.overlapping-label,
.float-field.is-active > .banking-field-label,
.float-field.is-focused > .float-field-label,
.float-field.is-focused > label.form-label,
.float-field.is-focused > label.overlapping-label,
.float-field.is-focused > .banking-field-label,
.float-field.is-active .float-field-control > .float-field-label,
.float-field.is-active .float-field-control > label.form-label,
.float-field.is-active .float-field-control > .banking-field-label,
.float-field.is-focused .float-field-control > .float-field-label,
.float-field.is-focused .float-field-control > label.form-label,
.float-field.is-focused .float-field-control > .banking-field-label,
.float-field > .form-control:focus + label,
.float-field > .form-control:not(:placeholder-shown) + label,
.float-field > .form-select:focus + label,
.float-field > select:focus + label,
.float-field > textarea.form-control:focus + label,
.float-field > textarea.form-control:not(:placeholder-shown) + label,
.float-field-control > .form-control:focus + label,
.float-field-control > .form-control:not(:placeholder-shown) + label,
.float-field-control > .form-select:focus + label,
.float-field-control > select:focus + label,
.float-field-control > textarea.form-control:focus + label,
.float-field-control > textarea.form-control:not(:placeholder-shown) + label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--smart-primary, #5b8def);
    background: #fff;
}

.float-field.is-focused > label,
.float-field > .form-control:focus + label,
.float-field > .form-select:focus + label,
.float-field > select:focus + label,
.float-field > textarea.form-control:focus + label,
.float-field-control > .form-control:focus + label,
.float-field-control > .form-select:focus + label,
.float-field-control > select:focus + label,
.float-field-control > textarea.form-control:focus + label {
    color: var(--smart-primary, #5b8def);
}

.float-field.is-select-empty:not(.is-focused) > .form-select,
.float-field.is-select-empty:not(.is-focused) > select,
.float-field.is-select-empty:not(.is-focused) .float-field-control > .form-select,
.float-field.is-select-empty:not(.is-focused) .float-field-control > select {
    color: transparent;
}

.float-field.is-select-empty.is-focused > .form-select,
.float-field.is-select-empty.is-focused > select,
.float-field.is-select-empty.is-focused .float-field-control > .form-select,
.float-field.is-select-empty.is-focused .float-field-control > select,
.float-field:not(.is-select-empty) > .form-select,
.float-field:not(.is-select-empty) > select,
.float-field:not(.is-select-empty) .float-field-control > .form-select,
.float-field:not(.is-select-empty) .float-field-control > select {
    color: #475569;
}

.float-field.is-invalid-field > label,
.float-field.is-invalid-field .float-field-control > label,
.float-field > .is-invalid + label,
.float-field-control > .is-invalid + label {
    color: #dc3545;
}

.float-field-hint,
.float-field .banking-field-hint {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.75rem;
    color: #94a3b8;
    line-height: 1.35;
}

.float-field .invalid-feedback {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
}

.float-field-label .text-danger,
.float-field > label .text-danger {
    margin-left: 1px;
}

.float-field.float-field-sm > .form-control,
.float-field.float-field-sm > .form-select,
.float-field.float-field-sm > select,
.float-field.float-field-sm .float-field-control > .form-control,
.float-field.float-field-sm .float-field-control > .form-select,
.float-field.float-field-sm .float-field-control > select {
    min-height: 38px;
    padding: 0 0.5rem;
    line-height: calc(38px - 2px);
    font-size: 0.8125rem;
}

.float-field.float-field-sm > label,
.float-field.float-field-sm .float-field-control > label {
    left: 0.45rem;
    font-size: 0.8125rem;
}

.float-field.float-field-sm.is-active > label,
.float-field.float-field-sm.is-focused > label {
    font-size: 0.65rem;
}

.float-field > .input-group .form-control {
    min-height: 48px;
    padding: 0 0.75rem;
    line-height: calc(48px - 2px);
}

.float-field > .input-group {
    flex-wrap: nowrap;
}

.position-relative.float-field,
.floating-label-group.float-field,
.banking-form-field.float-field {
    margin-top: 0;
}

.float-field-label.form-label-required::after,
.form-label-required.float-field-label::after {
    content: " *";
    color: #dc3545;
}

.payment-filter-card .float-field > .form-control,
.payment-filter-card .float-field > .form-select,
.payment-filter-card .float-field > select,
.payment-filter-card .float-field-control > .form-control,
.payment-filter-card .float-field-control > .form-select,
.payment-filter-card .float-field-control > select {
    min-height: 44px;
    line-height: calc(44px - 2px);
    padding: 0 0.75rem;
}

.banking-form-field.float-field > .banking-field-hint,
.banking-form-field.float-field > .float-field-hint {
    position: relative;
    z-index: 1;
}

.float-field > .recon-diff-panel {
    min-height: 48px;
    padding: 0.75rem;
    border: 1px solid #ced4da;
    border-radius: 8px;
    background: #fff;
}

.float-field.is-active > .recon-diff-panel + .float-field-label,
.float-field.is-active > .recon-diff-panel + span.float-field-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--smart-primary, #5b8def);
    background: #fff;
}