/* 1. Relative positioning context for the wrapper */
.app-search {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

    /* 2. Pin the icon to the left side inside the Select2 input box */
    .app-search .app-search-icon {
        position: absolute;
        left: 1px;
        top: 50% !important; /* Forces vertical centering */
        transform: translateY(-50%);
        z-index: 5;
        pointer-events: none; /* Allows clicking "through" the icon to open dropdown */
    }

    /* 3. Indent Select2 text so it doesn't sit on top of the icon */
    .app-search .select2-container .select2-selection--single {
        padding-left: 1.85rem !important;
        height: 38px; /* Matches standard Inspinia/Bootstrap 5 input heights */
        display: flex;
        align-items: center;
    }

/* =========================================================
           VALIDATION MAPPING (Addresses your "required" issue)
           ========================================================= */

/* Fix standard Bootstrap 5 validation positioning */
.was-validated .select2-hidden-accessible:invalid ~ .app-search-icon,
.select2-hidden-accessible.is-invalid ~ .app-search-icon {
    top: 50% !important; /* Keeps icon centered vertically even when errors appear below */
}

/* Fix jQuery Validate error message positioning if used */
.app-search label.error {
    position: absolute;
    top: 100%;
    left: 0;
    color: #ed5565; /* Inspinia danger red */
    font-size: 0.85rem;
    margin-top: 4px;
}

/* =========================================================
   MULTI SELECT SUPPORT
   ========================================================= */

.app-search .select2-container .select2-selection--multiple {
    padding-left: 1.85rem !important;
    min-height: 38px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

/* Selected items wrapper */
.app-search .select2-container--default
.select2-selection--multiple
.select2-selection__rendered {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 3px;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* Inline search field */
.app-search .select2-container--default
.select2-selection--multiple
.select2-search--inline
.select2-search__field {
    margin-top: 0 !important;
    height: 28px;
}

/* Align multi-select search input vertically in the middle */
.app-search .select2-container--default
.select2-selection--multiple
.select2-search--inline
.select2-search__field {
    margin-top: 0 !important; /* remove default spacing */
    height: 28px; /* match input height */
    line-height: 28px; /* vertically center cursor */
    padding: 4px 6px; /* optional: match padding with tags */
    box-sizing: border-box; /* ensure padding doesn't break height */
}
/* =========================================================
    SYNCFUSION GRID SEARCH WIDTH ADJUSTMENT
========================================================= */

.e-grid .e-toolbar .e-tbar-btn-text,
.e-grid .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn-text {
    display: none !important;
}

.e-grid .e-toolbar .e-toolbar-item {
    min-width: auto !important;
}

.e-grid .e-toolbar .e-search-wrapper {
    display: flex !important;
    align-items: center;
    width: 350px !important; /* Forces all search bars to 350px */
}

    /* 2. Adjust the input group to stretch fully inside the 350px wrapper */
    .e-grid .e-toolbar .e-search-wrapper .e-input-group {
        width: 100% !important;
    }

    /* 3. Keep your custom search icon positioning consistent across all grids */
    .e-grid .e-toolbar .e-search-wrapper .e-search-icon {
        position: absolute;
        right: 10px;
    }

    /* 1. Position the clear/cancel button wrapper inside the flex layout */
    .e-grid .e-toolbar .e-search-wrapper .e-clear-icon {
        position: absolute;
        right: 35px; /* Places it just to the left of your search icon */
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        cursor: pointer;
    }

    /* 2. Ensure the input text doesn't hide behind the clear and search icons */
    .e-grid .e-toolbar .e-search-wrapper input.e-search-input {
        padding-right: 60px !important; /* Creates a safe zone so text won't overlap icons */
    }

/* ==========================================================================
   Icon-Safe Dynamic Theme Inheritance for Syncfusion Grid
   ========================================================================== */

.e-grid,
.e-grid .e-headercell,
.e-grid .e-headercelldiv,
.e-grid .e-headertext,
.e-grid .e-rowcell,
.e-grid .e-summarycell,
.e-grid .e-gridheader,
.e-grid .e-pager {
    font-family: inherit !important;
    color: inherit !important;
}

    /* EXCLUDE elements using Syncfusion's icon library from inheriting text fonts */
    .e-grid *:not(.e-icons) {
        font-family: inherit;
    }

    /* Explicit protection guarantee for Grid Toolbar icons (Excel, PDF, Export etc.) */
    .e-grid .e-icons,
    .e-grid .e-toolbar-item .e-icons,
    .e-grid .e-icon-gdescending,
    .e-grid .e-icon-gascending {
        font-family: 'e-icons' !important;
    }

    .e-grid .e-headertext {
        font-weight: 600 !important;
    }

    .e-grid .e-rowcell {
        font-weight: 400 !important;
    }

    /* Smooth background transition when changing themes */
    .e-grid .e-headercell,
    .e-grid .e-headertext,
    .e-grid .e-rowcell {
        transition: background-color 0.25s ease, color 0.25s ease !important;
    }

    /* ==========================================================================
   Syncfustion Grid Right Alignment Fixes (for textAlign="Right" columns)
   ========================================================================== */
    /* 1. Force data cells with textAlign="Right" to right-align */
    .e-grid .e-gridcontent td.e-rowcell.e-rightalign {
        text-align: right !important;
    }

    /* 2. Force header text with textAlign="Right" to right-align */
    .e-grid .e-gridheader th.e-headercell.e-rightalign .e-headertext {
        display: block !important;
        text-align: right !important;
        width: 100% !important;
    }

    /* ==========================================================================
   Syncfustion Grid Center Alignment Fixes (for textAlign="Center" columns)
   ========================================================================== */
    /* 1. Force data cells with textAlign="Center" to center-align */
    .e-grid .e-gridcontent td.e-rowcell.e-centeralign {
        text-align: center !important;
    }

    /* 2. Force header text with textAlign="Center" to center-align */
    .e-grid .e-gridheader th.e-headercell.e-centeralign .e-headertext {
        display: block !important;
        text-align: center !important;
        width: 100% !important;
    }

/* ==========================================================================
   Loading screen overlay styles (for AJAX operations or long-running tasks)
   ========================================================================== */
.overlay {
    position: fixed;
    z-index: 10000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    display: none;
}

.overlay-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
/* ==========================================================================
   Dropzone image block background clolor set to transparant
   ========================================================================== */
.dropzone .dz-preview.dz-image-preview {
    background: transparent;
}