@keyframes highlight-fade {
    0% {
        background-color: #fff3cd;
    }

    70% {
        background-color: #fff3cd;
    }

    100% {
        background-color: transparent;
    }
}

.row-highlight {
    background-color: #fff3cd !important;
}


.row-highlight-fade {
    background-color: transparent !important;
    transition: background-color 1s ease;
}
.e-refresh::before {
    content: 'refresh' !important;
    font-family: 'Material Symbols Outlined' !important;
}
.e-add-user::before {
    content: 'person_add';
    font-family: 'Material Symbols Outlined';
}
.e-add-affiliate::before,
.e-add-workspace::before,
.e-add-program-month::before,
.assignment_ind::before, .e-add-icon::before {
    content: 'add_2';
    font-family: 'Material Symbols Outlined';
}
.e-audit-log::before {
    content: 'history_2';
    font-family: 'Material Symbols Outlined';
}
.e-cancel-1::before {
    content: 'cancel';
    font-family: 'Material Symbols Outlined';
}
.e-save-1::before {
    content: 'save';
    font-family: 'Material Symbols Outlined';
}
.e-reorder::before {
    content: 'shuffle';
    font-family: 'Material Symbols Outlined';
}
.e-play-all::before {
    content: 'play_circle';
    font-family: 'Material Symbols Outlined';
}
.e-guid::before {
    content: 'g_mobiledata_badge';
    font-family: 'Material Symbols Outlined';
}
.e-upload::before {
    content: 'upload';
    font-family: 'Material Symbols Outlined';
    color: white;

}
/* Upload icon variant for toolbar use - visible on light backgrounds */
.e-upload-toolbar::before {
    content: 'upload';
    font-family: 'Material Symbols Outlined';
    color: #5c636a !important; /* Medium gray to match other toolbar icons */
}

/* Upload toolbar icon hover - white on gray background */
.e-tbar-btn:hover .e-upload-toolbar::before {
    color: white !important;
}

.e-upload2::before {
    content: 'upload_file';
    font-family: 'Material Symbols Outlined';

}
.e-copy::before {
    content: 'content_copy' !important;
    font-family: 'Material Symbols Outlined' !important;
}
.e-export-excel::before {
    content: 'download' !important;
    font-family: 'Material Symbols Outlined' !important;
}
.e-import::before {
    content: 'upload_file' !important;
    font-family: 'Material Symbols Outlined' !important;
}

/* Icon-only toolbar button styling */
.e-toolbar .e-toolbar-item.e-icon-btn .e-tbar-btn,
.e-toolbar .e-toolbar-item.e-icon-btn .e-tbar-btn-wrap,
.e-toolbar .e-toolbar-item.e-icon-btn button {
    min-width: 32px;
    padding: 4px 8px;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.e-toolbar .e-toolbar-item.e-icon-btn .e-tbar-btn .e-icons {
    font-size: 20px;
    color: #5c636a; /* Medium gray for toolbar icons */
}

/* Toolbar icon button hover - gray background with white icons */
.e-toolbar .e-toolbar-item.e-icon-btn .e-tbar-btn:hover,
.e-toolbar .e-toolbar-item.e-icon-btn .e-tbar-btn-wrap:hover,
.e-toolbar .e-toolbar-item.e-icon-btn button:hover {
    background-color: #5c636a !important; /* Medium gray hover background */
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    outline-offset: 0 !important;
}

/* Remove focus ring styles - don't persist after click */
.e-toolbar .e-toolbar-item.e-icon-btn .e-tbar-btn:focus,
.e-toolbar .e-toolbar-item.e-icon-btn .e-tbar-btn:active,
.e-toolbar .e-toolbar-item.e-icon-btn .e-tbar-btn-wrap:focus,
.e-toolbar .e-toolbar-item.e-icon-btn button:focus {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Override Syncfusion focus ring styles for icon buttons */
.e-toolbar .e-toolbar-item.e-icon-btn .e-tbar-btn.e-btn:focus,
.e-toolbar .e-toolbar-item.e-icon-btn .e-btn:focus {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Remove dotted/checkered border from toolbar icon buttons */
.e-toolbar .e-toolbar-item.e-icon-btn .e-tbar-btn::before,
.e-toolbar .e-toolbar-item.e-icon-btn .e-tbar-btn::after,
.e-toolbar .e-toolbar-item.e-icon-btn::before,
.e-toolbar .e-toolbar-item.e-icon-btn::after,
.e-toolbar .e-toolbar-item.e-icon-btn .e-tbar-btn-wrap::before,
.e-toolbar .e-toolbar-item.e-icon-btn .e-tbar-btn-wrap::after {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Override any wrapper hover border styles */
.e-toolbar .e-toolbar-item.e-icon-btn:hover,
.e-toolbar .e-toolbar-item.e-icon-btn:focus,
.e-toolbar .e-toolbar-item.e-icon-btn:active {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.e-toolbar .e-toolbar-item.e-icon-btn .e-tbar-btn:hover .e-icons {
    color: white;
}

.e-toolbar .e-toolbar-item.e-foo-button .e-tbar-btn,
.e-toolbar .e-toolbar-item.e-foo-button .e-tbar-btn .e-tbar-btn-text {
    background: var(--foo-success);
    box-shadow: none;
    color: white;
    border: none;
}
 
.icon-hover {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: none;
    outline: none;
    box-shadow: none;
    cursor: pointer;
}

    .icon-hover span {
        font-size: 24px;
    }

    .icon-hover:hover span {
        transform: scale(1.2);
    }
.e-grid .e-altrow {
    background-color: #fafafa; /* Custom light gray color */

}
/* Syncfusion grid row children - scoped to avoid breaking Bootstrap grid system */
.e-grid .row > * {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: 0;
    padding-left: 0;
    margin-top: var(--bs-gutter-y);
}
/*.badge-narrow {
    font-size: 0.75rem;  
padding-left: 1rem;  
padding-right: 1rem;  
padding-top: 0.5rem;  
padding-bottom: 0.5rem;  
font-size:.875rem;
}*/

.badge-narrow {
    font-size: 0.75rem;  
padding-left: 1rem;  
padding-right: 1rem;  
padding-top: 0.25rem;  
padding-bottom: 0.25rem;  
}
.badge {
 border:0px!important;
}
/* Base adp-tag styling */
.adp-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 4px;
    color: #333; /* Default dark text for readability */
    font-size: 0.875rem; /* Matches typical Syncfusion grid text size */
}

    /* Base icon styling for Material Symbols Outlined */
    .adp-tag::after  {
        content: 'shoppingmode';
        font-family: 'Material Symbols Outlined';
        font-size: 1rem; /* Adjust icon size */
        margin-left: 4px; /* Space between text and icon */
        color: #333; /* Default icon color matches text */
        /* Default to unfilled icon; override with adp-tag-filled */
       /* font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;*/
    }

/* Class to explicitly set filled icon */
.adp-tag-filled::after,
.header-icon {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Modifier classes for icon color variations */
.adp-tag-blue2::after {
    color: var(--foo-blue2); /* #0B3B60 */
}

.adp-tag-blue::after {
    color: var(--foo-blue); /* #00A0DD */
}
.adp-tag-context::after {
    color: #C907E4
}
.adp-tag-context-group::after {
    color: #69359c;
}
.adp-tag-qc::after {
    color: #31932F
}
.adp-tag-profile::after {
    color: #999999
}
.adp-tag-data-fix::after {
    color: #1F8BF8
}

.adp-tag-success::after {
    color: var(--foo-success); /* #4BA870 */
}

.adp-tag-danger::after {
    color: var(--foo-danger); /* #B04A4A */
}
 
.adp-tag-chooser .custom-radio-btn {
    background-color: #f8f9fa !important;
    border-color: #dee2e6 !important;
    color: #6c757d !important;
    transition: all 0.15s ease-in-out;
    width: 100px !important; /* Add this line */
    flex: none !important; /* Add this to prevent flex stretching */
}

.adp-tag-chooser .btn-check:checked + .custom-radio-btn {
    background-color: var(--foo-blue2) !important;
    border-color: var(--foo-blue2) !important;
    color: white !important;
}

.adp-tag-chooser .custom-radio-btn:hover {
    background-color: #e9ecef !important;
    border-color: #dee2e6 !important;
    color: #495057 !important;
}

.adp-tag-chooser .btn-check:checked + .custom-radio-btn:hover {
    background-color: var(--foo-blue2) !important;
    border-color: var(--foo-blue2) !important;
    color: white !important;
}

.mx-2px {
    margin-left: 2px;
    margin-right: 2px;
}

/* Disable swipe gestures on all Syncfusion grids to prevent navigation conflicts */
.e-grid {
    touch-action: none;
}

/* Alternative selector for broader coverage */
.sf-grid, [class*="sf-grid"] {
    touch-action: none;
}

/* Specific targeting for grid content and rows */
.e-grid .e-gridcontent,
.e-grid .e-content,
.e-grid .e-row {
    touch-action: none;
}

/* Disable swipe gestures on grid search functionality */
.e-grid .e-search,
.e-grid .e-searchbar,
.e-grid .e-search input,
.e-toolbar .e-search input {
    touch-action: manipulation;
}

/* ===== CONSOLIDATED GRID STYLES ===== */
/* Shared styles for AffiliateFile, FixHistory, and QcHistory components */

/* Syncfusion Grid Checkbox Styling - foo-blue theme */
.e-grid .e-checkbox-wrapper .e-frame.e-check,
.e-grid .e-checkbox-wrapper .e-frame.e-check.e-selectall {
    background-color: var(--foo-blue2) !important;
    border-color: var(--foo-blue2) !important;
}

/* Indeterminate checkbox state (partial selection) */
.e-grid .e-checkbox-wrapper .e-frame.e-stop {
    background-color: var(--foo-blue2) !important;
    border-color: var(--foo-blue2) !important;
    opacity: 0.6;
}

/* Selected row highlighting - 7% opacity foo-blue for subtle effect */
.e-grid .e-rowcell.e-selectionbackground,
.e-grid .e-row[aria-selected="true"] .e-rowcell.e-selectionbackground,
.e-grid tr.e-row.e-selectionbackground,
.e-grid .e-row[aria-selected="true"] {
    background-color: rgba(0, 123, 255, 0.07) !important;
}

/* Maintain text readability on selected rows */
.e-grid .e-row[aria-selected="true"] .e-rowcell {
    color: inherit !important;
}
    /* Remove blue row selection background for cells in highlighted columns */
    .e-grid .e-row[aria-selected="true"] .e-rowcell:has(.row-highlight),
    .e-grid .e-rowcell.e-selectionbackground:has(.row-highlight),
    .e-grid tr.e-row.e-selectionbackground:has(.row-highlight) {
        background-color: #fff3cd !important;
    }

/* Grid toolbar title styling - removes button appearance and hover effects */
.grid-toolbar-title,
.grid-toolbar-title .e-tbar-btn,
.grid-toolbar-title .e-tbar-btn-wrap,
.grid-toolbar-title .e-tbar-btn-text {
    cursor: default !important;
    pointer-events: none !important;
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.grid-toolbar-title .e-tbar-btn-text {
    font-size: 18px !important;
    font-weight: bold !important;
    color: #333 !important;
}

/* Force remove all hover effects for toolbar titles */
.e-toolbar .grid-toolbar-title:hover,
.e-toolbar .grid-toolbar-title:hover .e-tbar-btn,
.e-toolbar .grid-toolbar-title:hover .e-tbar-btn-wrap,
.e-toolbar .grid-toolbar-title .e-tbar-btn:hover,
.e-toolbar .grid-toolbar-title .e-tbar-btn:focus,
.e-toolbar .grid-toolbar-title .e-tbar-btn:active,
.e-toolbar-item.grid-toolbar-title:hover {
    background-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Word wrap for specific columns using CustomAttributes */
.wrap-comment {
    white-space: normal !important;
    word-wrap: break-word !important;
}

/* Grid border styling for consistent appearance */
.e-gridheader,
.e-toolbar {
    border-left: 1px solid #dee2e6;
    border-right: 1px solid #dee2e6;
}

.e-gridcontent {
    border-left: 1px solid #dee2e6;
    border-right: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
}

/* Remove duplicate bottom borders - gridcontent provides the bottom border */
.e-grid {
    border-bottom: none !important;
}

.e-lastrowcell {
    border-bottom: none !important;
}

/* Remove borders from toolbar when inside grid */
.e-grid .e-toolbar {
    border-right: 1px solid #dee2e6;
    border-left: 1px solid #dee2e6;
    border-top: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
}
/* Removed duplicate border-top - toolbar border-bottom provides the line */
.distribution-grid-border .e-gridheader {
    border-top: 1px solid #dee2e6;
}
.e-grid.e-default .e-headercell, .e-grid.e-default .e-detailheadercell {
  
    border-right: 1px solid #dee2e6;
}
/*.e-gridheader {
    padding-right: 0px !important;
}*/