/* Fix for duplicate validation messages */

/* Ensure validation messages have proper visibility and spacing */
.validation-message {
    margin-top: 0.25rem;
    font-size: 0.875em;
    color: #dc3545;
}

/* Essential Bootstrap validation popover styles */
.popover.validation-popover {
    --bs-popover-bg: #f8d7da;
    --bs-popover-border-color: #f5c6cb;
    --bs-popover-header-bg: #f8d7da;
    --bs-popover-header-color: #721c24;
    --bs-popover-body-padding-x: 0.75rem;
    --bs-popover-body-padding-y: 0.5rem;
    max-width: 500px;
    z-index: 1070 !important;
    border-radius: 0.4rem;
}

    .popover.validation-popover .popover-body {
        color: #721c24;
        padding: 10px;
        background: #f8d7da;
    }

/* ✅ OPTIMIZED: Clean arrow positioning - SINGLE APPROACH */
.validation-popover .popover-arrow {
    visibility: visible !important;
    display: block !important;
    width: 1rem !important;
    height: 0.5rem !important;
}

/* ✅ PERFECTED: Final arrow positioning for top placement */
.validation-popover.bs-popover-top > .popover-arrow,
.validation-popover.bs-popover-auto[data-popper-placement^="top"] > .popover-arrow {
    bottom: 37px !important; /* ✅ Clean positioning */
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
}

/* ✅ PERFECTED: Arrow shape and colors */
    .validation-popover.bs-popover-top > .popover-arrow::before,
    .validation-popover.bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::before {
        bottom: -55px !important;
        left: -8px !important;
        border: 8px solid transparent !important;
        border-top-color: #dc3545 !important;
        content: "" !important;
        position: absolute !important;
    }

.validation-popover.bs-popover-top > .popover-arrow::after,
.validation-popover.bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::after {
    bottom: -54px !important; /* ✅ Normal arrow fill */
    left: -8px !important;
    border: 8px solid transparent !important;
    border-top-color: #f8d7da !important;
    content: "" !important;
    position: absolute !important;
}

/* ✅ Arrow positioning for other placements (fallbacks) */
.validation-popover.bs-popover-bottom > .popover-arrow {
    top: -9px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

.validation-popover.bs-popover-bottom > .popover-arrow::before,
.validation-popover.bs-popover-bottom > .popover-arrow::after {
    border-bottom-color: #f5c6cb !important;
    border-top-color: transparent !important;
}

.validation-popover.bs-popover-start > .popover-arrow,
.validation-popover.bs-popover-left > .popover-arrow {
    right: -9px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

.validation-popover.bs-popover-start > .popover-arrow::before,
.validation-popover.bs-popover-start > .popover-arrow::after,
.validation-popover.bs-popover-left > .popover-arrow::before,
.validation-popover.bs-popover-left > .popover-arrow::after {
    border-left-color: #f5c6cb !important;
    border-right-color: transparent !important;
}

.validation-popover.bs-popover-end > .popover-arrow,
.validation-popover.bs-popover-right > .popover-arrow {
    left: -9px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

.validation-popover.bs-popover-end > .popover-arrow::before,
.validation-popover.bs-popover-end > .popover-arrow::after,
.validation-popover.bs-popover-right > .popover-arrow::before,
.validation-popover.bs-popover-right > .popover-arrow::after {
    border-right-color: #f5c6cb !important;
    border-left-color: transparent !important;
}

/* Make validation messages visible in popovers */
.popover .validation-message-item {
    display: block !important;
    font-size: 0.875rem;
}

.popover .validation-message-item:last-child {
    margin-bottom: 0;
}

/* Only force-show our validation popovers that are not hidden by Popper */
.validation-popover.show:not([data-popper-reference-hidden]):not([data-popper-escaped]) {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Explicitly hide poppers Popper wants hidden */
.validation-popover[data-popper-reference-hidden],
.validation-popover[data-popper-escaped] {
    display: none !important;
}

/* Ensure the sticky dropdown validation popovers follow the same rules */
.auto-form-validation-popover.show:not([data-popper-reference-hidden]):not([data-popper-escaped]) {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.auto-form-validation-popover[data-popper-reference-hidden],
.auto-form-validation-popover[data-popper-escaped] {
    display: none !important;
}

/* Style for focused invalid fields */
.is-invalid:focus {
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25) !important;
    border-color: #dc3545 !important;
}

/* ✅ CONSISTENCY FIX: Hide ALL inline validation messages when using popovers */
.native-translated-textbox .validation-message,
.native-translated-textbox .validation-message-item,
.translated-textbox-container .validation-message,
.translated-textbox-container .validation-message-item,
.validation-message-item {
    display: none !important;
}

/* But always show them in popovers */
.popover .validation-message-item,
.popover.validation-popover .validation-message-item {
    display: block !important;
}

/* Ensure popover container doesn't interfere */
.validation-popover-content {
    display: block !important;
}

/* Success popover styling */
.popover.success-popover {
    --bs-popover-bg: #d1edff;
    --bs-popover-border-color: #bee5eb;
    background: #d1edff !important;
    border-color: #bee5eb !important;
}

.popover.success-popover .popover-body {
    color: #0c5460;
    background: #d1edff;
}

.popover.success-popover .validation-success-item {
    display: flex !important;
    align-items: center;
    color: #0c5460;
}

/* ✅ Success popover arrow colors */
.popover.success-popover .popover-arrow::before {
    border-top-color: #bee5eb !important;
}

.popover.success-popover .popover-arrow::after {
    border-top-color: #d1edff !important;
}

/* Length progress styling in popover */
.popover .crm-length-container {
    display: block !important;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(0,0,0,0.1);
}

.popover .crm-length-progress {
    display: block !important;
}

.popover .crm-length-text {
    display: inline !important;
    font-size: 0.75rem;
    opacity: 0.8;
}

/* ✅ ADDITIONAL FIX: Ensure arrow doesn't get clipped */
.validation-popover {
    overflow: visible !important;
}

/* Make datepicker border visually match dropdowns */
.native-datepicker-input.is-invalid {
    border-color: #dc3545 !important;
    border-width: 2px;                 /* add thickness to match dropdown */
}
.native-datepicker-input.is-invalid:focus {
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25) !important;
}