/* public/css/global-inputs.css */
/* Standardizing input fields to use Bootstrap pattern across the app */

input.form-control,
select.form-select,
textarea.form-control {
    border: 1px solid #ced4da !important;
    border-radius: 0.375rem !important;
    padding: 0.375rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529 !important;
    background-color: #fff !important;
    background-clip: padding-box;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

input.form-control:focus,
select.form-select:focus,
textarea.form-control:focus {
    color: #212529;
    background-color: #fff;
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Fix for intl-tel-input full width */
.iti {
    width: 100%;
    display: block;
}

/* Ensure the input inside .iti matches form-control styling */
.iti__tel-input {
    width: 100%;
}

/* Fix Bootstrap floating labels with intl-tel-input */
.form-floating .iti {
    width: 100%;
}

.form-floating .iti .form-control {
    height: calc(3.5rem + 2px) !important;
    padding: 1rem 0.75rem;
}

.form-floating:has(.iti input:focus) .iti .form-control,
.form-floating:has(.iti input:not(:placeholder-shown)) .iti .form-control {
    padding-top: 1.625rem !important;
    padding-bottom: 0.625rem !important;
}

.form-floating>label {
    z-index: 5;
}

.form-floating.iti-floating-wrapper>label {
    padding-left: 3.5rem;
    /* Leave room for flag */
}

.form-floating:has(.iti input:focus)>label,
.form-floating:has(.iti input:not(:placeholder-shown))>label {
    opacity: .65;
    transform: scale(.85) translateY(-.5rem) translateX(.15rem);
}

/* Custom Form Floating Small (Material Style) */
.form-floating-sm {
    position: relative;
    margin-top: 0.5rem;
    /* room for the label to float above */
}

.form-floating-sm>.form-control {
    min-height: auto !important;
}

.form-floating-sm>.form-control:focus {
    border-color: #999 !important;
    box-shadow: none !important;
    outline: 0;
}

/* Hide placeholder by default so it doesn't clash with the label */
.form-floating-sm>.form-control::placeholder {
    color: transparent;
    transition: color .15s ease-in-out;
}

/* Show placeholder only when focused (label has floated up) */
.form-floating-sm>.form-control:focus::placeholder {
    color: #adb5bd;
}

.form-floating-sm>label {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    padding: 0.25rem 0.5rem;
    pointer-events: none;
    transform-origin: 0 0;
    transition: opacity .15s ease-in-out, transform .15s ease-in-out;
    color: #6c757d;
    font-size: 0.875rem;
    z-index: 5;
}

/* Float label up on focus or when field has a value */
.form-floating-sm>.form-control:focus~label,
.form-floating-sm>.form-control:not(:placeholder-shown)~label {
    transform: translateY(-50%) translateX(0.25rem);
    top: 0;
    background-color: #fff;
    padding: 0 0.3rem;
    height: auto;
    line-height: 1;
    font-size: 0.8rem;
    color: #495057;
}

/* Remove spinner from number inputs */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

input[type=number] {
  -moz-appearance: textfield;
}