/* Form overrides for MaterialPro dynamic inputs */

/* Default label position for unfilled inputs - label inside the input area (like placeholder) */
.input-group.input-group-dynamic .form-label,
.input-group.input-group-dynamic label {
    position: absolute !important;
    top: 0.25rem !important;
    left: 0 !important;
    margin-bottom: 0 !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: #7b809a !important;
    pointer-events: none !important;
    transition: 0.2s ease all !important;
}

/* When focused, move label up and make smaller with green color */
.input-group.input-group-dynamic.is-focused .form-label,
.input-group.input-group-dynamic.is-focused label {
    top: -0.9rem !important;
    font-size: 0.6875rem !important;
    color: #4caf50 !important;
}

/* When filled (has value), keep label up and small */
.input-group.input-group-dynamic.is-filled .form-label,
.input-group.input-group-dynamic.is-filled label {
    top: -0.9rem !important;
    font-size: 0.6875rem !important;
    color: #7b809a !important;
}

/* When filled AND focused */
.input-group.input-group-dynamic.is-filled.is-focused .form-label,
.input-group.input-group-dynamic.is-filled.is-focused label {
    top: -0.9rem !important;
    font-size: 0.6875rem !important;
    color: #4caf50 !important;
}

/* Ensure input-group has relative positioning for absolute label */
.input-group.input-group-dynamic {
    position: relative !important;
}

/* Hide date placeholder by default (when label is in center as placeholder) */
.input-group.input-group-dynamic input[type="date"]::-webkit-datetime-edit,
.input-group.input-group-dynamic input[type="date"]::-webkit-datetime-edit-fields-wrapper {
    color: transparent !important;
}

/* Show date placeholder when focused (label moves to top) */
.input-group.input-group-dynamic.is-focused input[type="date"]::-webkit-datetime-edit,
.input-group.input-group-dynamic.is-focused input[type="date"]::-webkit-datetime-edit-fields-wrapper {
    color: inherit !important;
}

/* Show date placeholder when has value (label stays at top) */
.input-group.input-group-dynamic.is-filled input[type="date"]::-webkit-datetime-edit,
.input-group.input-group-dynamic.is-filled input[type="date"]::-webkit-datetime-edit-fields-wrapper {
    color: inherit !important;
}

/* Hide text input placeholder by default (when label is in center as placeholder) */
.input-group.input-group-dynamic input[type="text"]::placeholder {
    color: transparent !important;
    opacity: 0 !important;
}

/* Show text input placeholder when focused (label moves to top) */
.input-group.input-group-dynamic.is-focused input[type="text"]::placeholder {
    color: #aab7c4 !important;
    opacity: 1 !important;
}

/* Auto-fit card body to form content instantly */
.card-body {
    min-height: auto;
    height: auto;
}

/* Ensure smooth loading of multistep form */
.multisteps-form__form {
    opacity: 1 !important;
    height: auto;
}

/* Make form panels auto-fit content */
.multisteps-form__panel {
    min-height: auto !important;
    height: auto !important;
}

/* Remove initial opacity delay for first panel on page load */
.multisteps-form__panel.js-active {
    opacity: 1 !important;
    visibility: visible !important;
    transition-property: none !important;
    position: relative !important;
}

/* CRITICAL: Override JavaScript inline height calculation */
.multisteps-form__form {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Ensure inactive panels are completely hidden and don't affect layout */
.multisteps-form__panel {
    display: none !important;
}

.multisteps-form__panel.js-active {
    display: block !important;
}

/* Style select dropdowns */
select.form-control {
    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='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 16px 12px !important;
    padding-right: 2.5rem !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

/* Fix for select elements inside input-group-dynamic - always show label at top */
.input-group.input-group-dynamic select.form-control ~ .form-label,
.input-group.input-group-dynamic select.form-control ~ label,
.input-group.input-group-dynamic select.form-control + .form-label,
.input-group.input-group-dynamic select.form-control + label {
    top: -0.9rem !important;
    font-size: 0.6875rem !important;
}

/* When select has label before it (not after) */
.input-group.input-group-dynamic:has(select.form-control) .form-label,
.input-group.input-group-dynamic:has(select.form-control) label {
    top: -0.9rem !important;
    font-size: 0.6875rem !important;
}

/* Ensure select dropdown text is visible */
.input-group.input-group-dynamic select.form-control {
    color: inherit !important;
    padding-top: 0.5rem !important;
}

/* Fix for textarea inside input-group-dynamic - always show label at top */
.input-group.input-group-dynamic:has(textarea.form-control) .form-label,
.input-group.input-group-dynamic:has(textarea.form-control) label {
    top: -0.9rem !important;
    font-size: 0.6875rem !important;
}

/* Fix for file input inside input-group-dynamic - always show label at top */
.input-group.input-group-dynamic:has(input[type="file"]) .form-label,
.input-group.input-group-dynamic:has(input[type="file"]) label {
    top: -0.9rem !important;
    font-size: 0.6875rem !important;
}

/* ========================================
   Input Validation Styles for Dynamic Inputs
   ======================================== */

/* Remove all borders from dynamic inputs - only bottom line */
.input-group.input-group-dynamic .form-control,
.input-group.input-group-dynamic .form-control:focus,
.input-group.input-group-dynamic .form-control:valid,
.input-group.input-group-dynamic .form-control:invalid,
.input-group.input-group-dynamic .form-control:required,
.input-group.input-group-dynamic .form-control:required:valid,
.input-group.input-group-dynamic .form-control:required:invalid {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Invalid state - red underline for dynamic inputs (all states) */
.input-group.input-group-dynamic.is-invalid .form-control,
.input-group.input-group-dynamic.is-invalid .form-control:focus,
.input-group.input-group-dynamic.is-invalid .form-control:valid,
.input-group.input-group-dynamic.is-invalid .form-control:invalid,
.input-group.input-group-dynamic.is-invalid .multisteps-form__input.form-control {
    background-image: linear-gradient(0deg, #F44335 2px, rgba(244, 67, 53, 0) 0), linear-gradient(0deg, #d2d2d2 1px, hsla(0, 0%, 82%, 0) 0) !important;
    padding-right: 2rem !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Red label color for ALL invalid states */
.input-group.input-group-dynamic.is-invalid .form-label,
.input-group.input-group-dynamic.is-invalid label,
.input-group.input-group-dynamic.is-invalid.is-focused .form-label,
.input-group.input-group-dynamic.is-invalid.is-focused label,
.input-group.input-group-dynamic.is-invalid.is-filled .form-label,
.input-group.input-group-dynamic.is-invalid.is-filled label,
.input-group.input-group-dynamic.is-invalid:not(.is-focused):not(.is-filled) .form-label,
.input-group.input-group-dynamic.is-invalid:not(.is-focused):not(.is-filled) label {
    color: #F44335 !important;
}

/* Error icon positioning */
.input-group.input-group-dynamic .input-error-icon {
    position: absolute !important;
    right: 0 !important;
    top: 0.5rem !important;
    color: #F44335 !important;
    font-size: 1.25rem !important;
    pointer-events: none !important;
    z-index: 10 !important;
}

/* Error message styling */
.input-group.input-group-dynamic .invalid-feedback {
    display: block !important;
    width: 100% !important;
    margin-top: 0.25rem !important;
    font-size: 0.75rem !important;
    color: #F44335 !important;
    position: absolute !important;
    bottom: -1.25rem !important;
    left: 0 !important;
}

/* Add margin bottom to input-group when it has validation message */
.input-group.input-group-dynamic.is-invalid {
    margin-bottom: 1.5rem !important;
    position: relative !important;
}

/* When invalid but not focused and not filled - label stays big in center */
.input-group.input-group-dynamic.is-invalid:not(.is-focused):not(.is-filled) .form-label,
.input-group.input-group-dynamic.is-invalid:not(.is-focused):not(.is-filled) label {
    top: 0.25rem !important;
    font-size: 0.875rem !important;
}

/* JS-generated error message styling */
.input-group.input-group-dynamic .invalid-feedback.js-error {
    display: none;
}

.input-group.input-group-dynamic.is-invalid .invalid-feedback.js-error {
    display: block !important;
}

/* Hide error icon by default until JS shows it */
.input-group.input-group-dynamic .input-error-icon {
    display: none;
}

.input-group.input-group-dynamic.is-invalid .input-error-icon {
    display: inline !important;
}

/* Required field indicator */
.form-label .text-danger {
    font-weight: normal !important;
}