/* Syncfusion Blazor Component Fixes */
/* Fixes for floating label positioning issues during scroll */

/* Fix floating label positioning in scrollable containers */
.e-float-input.e-control-wrapper {
    position: relative !important;
    overflow: visible !important;
}

/* Ensure floating labels stay properly positioned */
.e-float-text {
    position: absolute !important;
    z-index: 10 !important;
    background: white !important;
    padding: 0 4px !important;
    pointer-events: none !important;
    transition: transform 0.2s ease, font-size 0.2s ease !important;
}

/* Fix label positioning when floated */
.e-float-text.e-label-top {
    transform: translateY(-100%) !important;
    font-size: 12px !important;
    background: white !important;
    z-index: 11 !important;
}

/* Prevent transform issues during scroll */
.e-float-input.e-input-group:not(.e-float-icon-left)::before,
.e-float-input.e-input-group:not(.e-float-icon-left)::after {
    transform: none !important;
}

/* Ensure proper stacking context for form groups */
.form-group {
    position: relative !important;
    z-index: 1;
    isolation: isolate; /* Create new stacking context */
}

/* Incremental z-index for sequential form groups to prevent overlap */
.form-group:nth-child(n) {
    z-index: 1;
}

/* Fix for dropdown lists specifically */
.e-ddl.e-input-group.e-control-wrapper,
.e-ddl.e-control-wrapper {
    overflow: visible !important;
    position: relative !important;
}

/* Ensure dropdown floating labels work correctly */
.e-ddl .e-float-text {
    background: white !important;
    padding: 0 4px !important;
}

/* Fix for date pickers */
.e-date-wrapper.e-input-group {
    overflow: visible !important;
    position: relative !important;
}

/* Fix for text boxes */
.e-textbox.e-control-wrapper {
    overflow: visible !important;
    position: relative !important;
}

/* Ensure the scrollable container doesn't clip labels */
.overflow-y-scroll .e-float-input {
    margin-top: 0.75rem !important; /* Add space for floated label */
}

/* Fix label background for better visibility */
.e-float-text.e-label-top {
    background: linear-gradient(to bottom, 
        transparent 0%, 
        transparent 40%, 
        white 40%, 
        white 60%, 
        transparent 60%, 
        transparent 100%) !important;
}

/* Ensure labels don't get cut off at container edges */
.overflow-y-scroll {
    padding-top: 1rem !important; /* Extra padding for first field's label */
}

/* Fix z-index stacking for nested elements */
.e-input-group-icon,
.e-input-group .e-input-group-icon {
    z-index: 2 !important;
}

/* Ensure validation messages don't interfere with floating labels */
.text-red-500.text-xs {
    position: relative !important;
    z-index: 0 !important;
}

/* Additional fix for virtualized dropdowns */
.e-ddl.e-popup {
    z-index: 1000 !important;
}

/* Fix for when labels overlap during fast scrolling */
@supports (transform-style: preserve-3d) {
    .form-group {
        transform-style: preserve-3d;
        transform: translateZ(0); /* Force hardware acceleration */
    }
}

/* Ensure consistent behavior across different browsers */
.e-float-input {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}