/* Syncfusion Icon Fix for Tailwind CSS Integration */
/* Comprehensive solution using CSS layers and maximum specificity */

/* Define CSS layers for proper cascade control */
@layer tailwind-overrides {

    /* GRID ACTION BUTTONS: Force white icons on colored backgrounds */
    button.tw-bg-teal-600 .e-icons,
    button.tw-bg-teal-600 .e-icons::before,
    button.tw-bg-amber-600 .e-icons,
    button.tw-bg-amber-600 .e-icons::before,
    button.tw-bg-indigo-600 .e-icons,
    button.tw-bg-indigo-600 .e-icons::before,
    button.tw-bg-rose-600 .e-icons,
    button.tw-bg-rose-600 .e-icons::before,
    button.tw-bg-blue-600 .e-icons,
    button.tw-bg-blue-600 .e-icons::before,
    button.tw-bg-slate-600 .e-icons,
    button.tw-bg-slate-600 .e-icons::before,
    button.tw-bg-emerald-600 .e-icons,
    button.tw-bg-emerald-600 .e-icons::before,
    button.tw-bg-orange-600 .e-icons,
    button.tw-bg-orange-600 .e-icons::before,
    button.tw-bg-sky-600 .e-icons,
    button.tw-bg-sky-600 .e-icons::before,
    button.tw-bg-violet-600 .e-icons,
    button.tw-bg-violet-600 .e-icons::before,
    button.tw-bg-cyan-600 .e-icons,
    button.tw-bg-cyan-600 .e-icons::before {
        color: white !important;
    }

    /* HIGH SPECIFICITY: Target Syncfusion icons in all possible contexts */
    .e-btn .e-icons,
    .e-grid .e-icons,
    .e-toolbar .e-icons,
    .e-menu-container .e-icons,
    .e-dropdown .e-icons,
    .e-textbox .e-icons,
    .e-sidebar .e-icons,
    .e-treeview .e-icons,
    .e-card .e-icons,
    span.e-icons,
    i.e-icons,
    [class*="e-icons"] {
        /* Core icon properties - Override Tailwind resets */
        display: inline-block;
        font-family: 'e-icons', 'e-icons-font' !important;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        vertical-align: middle;
        speak: never;
        box-sizing: content-box;
        width: auto;
        height: auto;
        
        /* Font rendering optimizations */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
        
        /* Ensure visibility */
        opacity: 1;
        visibility: visible;
    }

    /* MAXIMUM SPECIFICITY: Target pseudo-elements for icon content */
    .e-btn .e-icons::before,
    .e-btn .e-icons::after,
    .e-grid .e-icons::before,
    .e-grid .e-icons::after,
    .e-toolbar .e-icons::before,
    .e-sidebar .e-icons::before,
    span.e-icons::before,
    i.e-icons::before,
    [class*="e-icons"]::before {
        /* Critical pseudo-element properties */
        display: inline-block;
        font-family: 'e-icons', 'e-icons-font' !important;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        speak: never;
        line-height: 1;
        box-sizing: content-box;
        
        /* Font rendering */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
        
        /* Visibility and sizing */
        opacity: 1;
        visibility: visible;
        font-size: inherit;
        color: inherit;
    }

    /* Component-specific sizing with high specificity */
    .e-btn .e-icons {
        font-size: 14px;
        line-height: 1;
    }

    .e-grid .e-icons,
    .e-toolbar .e-icons,
    .e-textbox .e-icons {
        font-size: 12px;
        line-height: 1;
    }

    .e-treeview .e-icons {
        font-size: 12px;
        line-height: 1;
    }

    /* CRITICAL: Specific icon content definitions with maximum specificity */
    
    /* Navigation icons */
    .e-btn .e-icons.e-menu::before,
    .e-toolbar .e-icons.e-menu::before,
    span.e-menu::before,
    i.e-menu::before {
        content: '\e700';
    }

    .e-btn .e-icons.e-arrow-left::before,
    span.e-arrow-left::before,
    i.e-arrow-left::before {
        content: '\e72b';
    }

    /* Action icons for buttons */
    .e-btn .e-icons.e-edit::before,
    .e-grid .e-icons.e-edit::before,
    span.e-edit::before,
    i.e-edit::before {
        content: '\e73e';
    }

    .e-btn .e-icons.e-trash::before,
    .e-grid .e-icons.e-trash::before,
    span.e-trash::before,
    i.e-trash::before {
        content: '\e729';
    }

    .e-btn .e-icons.e-view::before,
    .e-grid .e-icons.e-view::before,
    span.e-view::before,
    i.e-view::before {
        content: '\e774';
    }

    .e-btn .e-icons.e-details::before,
    span.e-details::before,
    i.e-details::before {
        content: '\e75d';
    }

    /* Filter and search icons */
    .e-btn .e-icons.e-filter::before,
    .e-grid .e-icons.e-filter::before,
    .e-toolbar .e-icons.e-filter::before,
    span.e-filter::before,
    i.e-filter::before {
        content: '\e764';
    }

    .e-btn .e-icons.e-search::before,
    .e-grid .e-icons.e-search::before,
    .e-textbox .e-icons.e-search::before,
    span.e-search::before,
    i.e-search::before {
        content: '\e724';
    }

    .e-btn .e-icons.e-clear-all::before,
    .e-grid .e-icons.e-clear-all::before,
    span.e-clear-all::before,
    i.e-clear-all::before {
        content: '\e70d';
    }

    /* Common UI icons */
    .e-btn .e-icons.e-close::before,
    .e-toolbar .e-icons.e-close::before,
    span.e-close::before,
    i.e-close::before {
        content: '\e705';
    }

    .e-btn .e-icons.e-chevron-down::before,
    .e-dropdown .e-icons.e-chevron-down::before,
    span.e-chevron-down::before,
    i.e-chevron-down::before {
        content: '\e70e';
    }

    .e-btn .e-icons.e-chevron-up::before,
    .e-dropdown .e-icons.e-chevron-up::before,
    span.e-chevron-up::before,
    i.e-chevron-up::before {
        content: '\e70f';
    }

    /* TreeView expand/collapse icons with high specificity */
    .e-treeview .e-icons.e-icon-collapsible::before,
    .e-sidebar .e-treeview .e-icons.e-icon-collapsible::before {
        content: '\e7a2';
        transform: rotate(0deg);
        transition: transform 0.2s ease;
    }

    .e-treeview .e-node-expanded .e-icons.e-icon-collapsible::before,
    .e-sidebar .e-treeview .e-node-expanded .e-icons.e-icon-collapsible::before {
        transform: rotate(90deg);
    }

    /* Override Tailwind's potential visibility issues */
    .e-btn .e-icons:not(.hidden),
    .e-grid .e-icons:not(.hidden),
    .e-toolbar .e-icons:not(.hidden),
    span.e-icons:not(.hidden),
    i.e-icons:not(.hidden) {
        display: inline-block;
        visibility: visible;
        opacity: 1;
    }

    /* Force display for empty icon elements */
    .e-btn .e-icons:empty::before,
    .e-grid .e-icons:empty::before,
    .e-toolbar .e-icons:empty::before,
    span.e-icons:empty::before,
    i.e-icons:empty::before {
        display: inline-block;
        visibility: visible;
        opacity: 1;
    }

} /* End @layer tailwind-overrides */

/* Fallback for browsers that don't support @layer */
@supports not (selector(@layer)) {
    /* Apply the same rules without @layer for older browsers */
    .e-btn .e-icons,
    .e-grid .e-icons,
    .e-toolbar .e-icons,
    span.e-icons,
    i.e-icons {
        display: inline-block !important;
        font-family: 'e-icons' !important;
        font-style: normal !important;
        font-weight: normal !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* Debug utility - can be removed in production */
.debug-icons .e-icons {
    outline: 1px solid red !important;
    background-color: rgba(255, 0, 0, 0.1) !important;
}

.debug-icons .e-icons::before {
    outline: 1px solid blue !important;
    background-color: rgba(0, 0, 255, 0.1) !important;
}

/* Tab close button override — must come after icon visibility rules */
.e-tab .e-icons.e-close-icon {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}