/* syncfusion-utilities.css */

/* ===========================================
   SYNCFUSION UTILITY CLASSES
   ===========================================
   This file contains utility classes for styling and modifying 
   Syncfusion components with consistent, reusable patterns.
*/

/* --------------------------------------
   GRID UTILITIES
-------------------------------------- */

/* Selection styling overrides */
.sf-grid-no-selection .e-row.e-selected,
.sf-grid-no-selection .e-row.e-selected.e-hover,
.sf-grid-no-selection .e-row.e-selected > td,
.sf-grid-no-selection td.e-selectionbackground {
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: inherit !important;
}

/* Hover styling overrides */
.sf-grid-no-hover.e-grid.e-gridhover .e-row:hover .e-rowcell,
.sf-grid-no-hover.e-grid.e-gridhover:not(.e-rowdrag) .e-row:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell),
.sf-grid-no-hover.e-grid.e-gridhover .e-frozenhover:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: inherit !important;
}

/* Disable both hover and selection effects */
.sf-grid-no-highlight {
    /* Include both the no-selection and no-hover styles */
}

    .sf-grid-no-highlight.e-grid .e-row.e-selected,
    .sf-grid-no-highlight.e-grid .e-row.e-selected.e-hover,
    .sf-grid-no-highlight.e-grid .e-row.e-selected > td,
    .sf-grid-no-highlight.e-grid td.e-selectionbackground,
    .sf-grid-no-highlight.e-grid.e-gridhover .e-row:hover .e-rowcell,
    .sf-grid-no-highlight.e-grid.e-gridhover:not(.e-rowdrag) .e-row:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell),
    .sf-grid-no-highlight.e-grid.e-gridhover .e-frozenhover:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
        background-color: transparent !important;
        border-color: transparent !important;
        box-shadow: none !important;
        color: inherit !important;
    }

/* Grid row color variants */
.sf-grid-row-red .e-rowcell {
    background-color: rgba(251, 90, 108, 0.1) !important; /* Using your er-btn-danger-bg with opacity */
}

.sf-grid-row-blue .e-rowcell {
    background-color: rgba(0, 83, 255, 0.1) !important; /* Using your er-btn-primary-bg with opacity */
}

.sf-grid-row-warning .e-rowcell {
    background-color: rgba(255, 193, 7, 0.1) !important;
}

/* Grid cell border styling */
.sf-grid-cell-border-red {
    border-left: 3px solid var(--er-btn-danger-bg, #FB5A6C) !important;
}

.sf-grid-cell-border-blue {
    border-left: 3px solid var(--er-btn-primary-bg, #0053FF) !important;
}

/* --------------------------------------
   DROPDOWN UTILITIES
-------------------------------------- */
.sf-dropdown-no-border .e-input-group {
    border: none !important;
}

.sf-dropdown-rounded .e-input-group {
    border-radius: 33px !important;
}

/* --------------------------------------
   DIALOG UTILITIES
-------------------------------------- */

.sf-dialog-no-header .e-dlg-header-content {
    display: none !important;
}

.sf-dialog-rounded .e-dlg-content {
    border-radius: 8px !important;
}

.sf-dialog-responsive .e-dialog {
    font-family: 'filson-pro', sans-serif;
    max-width: 500px;
    width: 90vw; /* Responsive: up to 500px, but shrinks on small screens */
    box-sizing: border-box;
}

/* --------------------------------------
   TOOLTIP UTILITIES
-------------------------------------- */
.sf-tooltip-custom {
    max-width: 300px !important;
    line-height: 1.5 !important;
}

/* --------------------------------------
   RESPONSIVE UTILITIES
-------------------------------------- */
@media (max-width: 767px) {
    .sf-mobile-compact .e-rowcell {
        padding: 8px 6px !important;
    }

    .sf-mobile-compact .e-headercelldiv {
        font-size: 12px !important;
    }
}