/* Grid Edit Lock Styles
 * Provides visual feedback for edited rows in DevExtreme DataGrids
 * with highlight animation and fade-out effect
 */

/* Edited row highlight - fade out animation */
.edited-row-highlight {
    background-color: rgba(255, 235, 128, 0.7) !important;
    transition: background-color 0.5s ease-out;
}

/* Subtle pulse animation for edited row */
@keyframes highlightPulse {
    0% { 
        background-color: rgba(255, 235, 128, 0.9); 
    }
    50% { 
        background-color: rgba(255, 235, 128, 0.6); 
    }
    100% { 
        background-color: rgba(255, 235, 128, 0.7); 
    }
}

.edited-row-highlight {
    animation: highlightPulse 1s ease-in-out 1;
}

/* Ensure highlight is visible across all cells in the row */
.edited-row-highlight td {
    background-color: inherit !important;
}

/* Override any alternating row colors during highlight */
.dx-row-alt.edited-row-highlight,
.dx-row-alt.edited-row-highlight td {
    background-color: rgba(255, 235, 128, 0.7) !important;
}

/* Make text more readable on highlighted rows - dark text instead of white */
.edited-row-highlight td,
.edited-row-highlight td *,
.edited-row-highlight .dx-link,
.edited-row-highlight .dx-icon {
    color: #333333 !important;
}

/* Disable the blue focused row background that conflicts with highlight */
.dx-datagrid-focus-overlay {
    display: none !important;
}

/* Remove blue background from focused rows when highlighted */
.edited-row-highlight.dx-row-focused,
.edited-row-highlight.dx-row-focused td,
.edited-row-highlight.dx-row-focused > td,
.edited-row-highlight.dx-selection > td,
.edited-row-highlight.dx-row.dx-selection,
.edited-row-highlight.dx-row.dx-row-focused {
    background-color: rgba(255, 235, 128, 0.7) !important;
}

/* Force all child elements to inherit the yellow background */
.edited-row-highlight td > *,
.edited-row-highlight.dx-row-focused td > * {
    background-color: transparent !important;
}

/* Remove any blue backgrounds from action buttons and icons */
.edited-row-highlight .dx-command-edit,
.edited-row-highlight .dx-link,
.edited-row-highlight .dx-icon,
.edited-row-highlight button {
    background-color: transparent !important;
}