/* Syncfusion Icon Overrides - Custom SVG Icons */
/* This file contains all custom SVG icon overrides for Syncfusion components */

/* Override the Add button icon */
.e-btn-icon.e-add.e-icons::before,
.e-icons.e-add::before {
  content: none !important;
}

.e-btn-icon.e-add.e-icons,
.e-icons.e-add {
  background-color: currentColor !important;
  -webkit-mask-image: url("/img/icons/plus.svg");
  mask-image: url("/img/icons/plus.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: center;
  width: 16px;
  height: 16px;
  font-size: 0;
  display: inline-block;
}

/* Override search icon */
.e-btn-icon.e-search.e-icons::before,
.e-icons.e-search::before,
.e-input-group-icon.e-search-icon.e-icons::before {
  content: none !important;
}

.e-btn-icon.e-search.e-icons,
.e-icons.e-search,
.e-input-group-icon.e-search-icon.e-icons {
  background-image: url("/img/icons/search.svg") !important;
  background-size: 16px 16px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  width: 32px !important;
  height: 100% !important;
  min-height: 32px !important;
  font-size: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: none !important;
  transform: none !important;
  animation: none !important;
  box-sizing: border-box !important;
  position: relative !important;
}

/* Prevent visual glitches on all states */
.e-input-group-icon.e-search-icon.e-icons:hover,
.e-input-group-icon.e-search-icon.e-icons:active,
.e-input-group-icon.e-search-icon.e-icons:focus,
.e-input-group-icon.e-search-icon.e-icons:visited,
.e-input-group-icon.e-search-icon.e-icons::before,
.e-input-group-icon.e-search-icon.e-icons::after {
  transform: none !important;
  animation: none !important;
  transition: none !important;
  scale: none !important;
  zoom: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Completely disable any Syncfusion effects on search icon */
.e-input-group-icon.e-search-icon.e-icons * {
  transform: none !important;
  animation: none !important;
  transition: none !important;
}

/* Override edit icon (pen) */
.e-btn-icon.e-edit.e-icons::before,
.e-icons.e-edit::before {
  content: none !important;
}

.e-btn-icon.e-edit.e-icons,
.e-icons.e-edit {
  background-image: url("/img/icons/pen.svg") !important;
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: center;
  width: 16px;
  height: 16px;
  font-size: 0;
  display: inline-block;
}

/* Override delete icon (trash) */
.e-btn-icon.e-delete.e-icons::before,
.e-icons.e-delete::before {
  content: none !important;
}

.e-btn-icon.e-delete.e-icons,
.e-icons.e-delete {
  background-image: url("/img/icons/trash.svg") !important;
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: center;
  width: 16px;
  height: 16px;
  font-size: 0;
  display: inline-block;
}

/* Override columns icon (more-vertical) */
.e-btn-icon.e-columns.e-icons::before,
.e-icons.e-columns::before,
.e-icons.e-columnmenu::before {
  content: none !important;
}

.e-btn-icon.e-columns.e-icons,
.e-icons.e-columns,
.e-icons.e-columnmenu {
  background-image: url("/img/icons/more-vertical.svg") !important;
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: center;
  width: 16px;
  height: 16px;
  font-size: 0;
  display: inline-block;
}

/* Override arrow up icon */
.e-btn-icon.e-arrow-up.e-icons::before,
.e-icons.e-arrow-up::before {
  content: none !important;
}

.e-btn-icon.e-arrow-up.e-icons,
.e-icons.e-arrow-up {
  background-image: url("/img/icons/arrow-up.svg") !important;
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: center;
  width: 16px;
  height: 16px;
  font-size: 0;
  display: inline-block;
}

/* General override for any custom icon class */
.custom-svg-icon {
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: center;
  width: 16px;
  height: 16px;
  display: inline-block;
  font-size: 0;
}

.custom-svg-icon::before {
  content: none !important;
}

/* Override ascending sort icon (arrow up) */
.e-menu-icon.e-icons.e-icon-ascending::before {
  content: none !important;
}

.e-menu-icon.e-icons.e-icon-ascending {
  background-image: url("/img/icons/arrow-up.svg") !important;
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: center;
  width: 16px;
  height: 16px;
  font-size: 0;
  display: inline-block;
}

/* Override descending sort icon (arrow up rotated 180deg) */
.e-menu-icon.e-icons.e-icon-descending::before {
  content: none !important;
}

.e-menu-icon.e-icons.e-icon-descending {
  background-image: url("/img/icons/arrow-up.svg") !important;
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: center;
  width: 16px;
  height: 16px;
  font-size: 0;
  display: inline-block;
  transform: rotate(180deg);
}

/* Override filter icon */
.e-menu-icon.e-icons.e-icon-filter::before {
  content: none !important;
}

.e-menu-icon.e-icons.e-icon-filter {
  background-image: url("/img/icons/filter.svg") !important;
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: center;
  width: 16px;
  height: 16px;
  font-size: 0;
  display: inline-block;
}

/* Override caret icon */
.e-icons.e-caret::before {
  content: none !important;
}

.e-icons.e-caret {
  background-image: url("/img/icons/chevron-right.svg") !important;
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: center;
  width: 16px;
  height: 16px;
  font-size: 0;
  display: inline-block;
}

/* Calendar navigation icons */
.e-date-icon-prev.e-icons::before {
  content: none !important;
}

.e-date-icon-prev.e-icons {
  background-image: url("/img/icons/chevron-right.svg") !important;
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: center;
  width: 16px;
  height: 16px;
  font-size: 0;
  display: inline-block;
  transform: rotate(180deg); /* Rotate right chevron to point left */
}

.e-date-icon-next.e-icons::before {
  content: none !important;
}

.e-date-icon-next.e-icons {
  background-image: url("/img/icons/chevron-right.svg") !important;
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: center;
  width: 16px;
  height: 16px;
  font-size: 0;
  display: inline-block;
}

/* Calendar date range change icon */
.e-change-icon.e-icons::before {
  content: none !important;
}

.e-change-icon.e-icons {
  background-image: url("/img/icons/arrow-up.svg") !important;
  background-size: 12px 12px;
  background-repeat: no-repeat;
  background-position: center;
  width: 12px;
  height: 12px;
  font-size: 0;
  display: inline-block;
  margin: 0 8px;
  transform: rotate(90deg); /* Rotate up arrow to point right */
}

/* Override date range picker calendar icon */
.e-input-group-icon.e-range-icon.e-icons::before {
  content: none !important;
}

.e-input-group-icon.e-range-icon.e-icons {
  background-image: url("/img/icons/calendar.svg") !important;
  background-size: 16px 16px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  width: 32px !important;
  height: 100% !important;
  min-height: 32px !important;
  font-size: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: none !important;
  transform: none !important;
  animation: none !important;
  box-sizing: border-box !important;
  position: relative !important;
}

/* Prevent visual glitches on all states for calendar icon */
.e-input-group-icon.e-range-icon.e-icons:hover,
.e-input-group-icon.e-range-icon.e-icons:active,
.e-input-group-icon.e-range-icon.e-icons:focus,
.e-input-group-icon.e-range-icon.e-icons:visited,
.e-input-group-icon.e-range-icon.e-icons::before,
.e-input-group-icon.e-range-icon.e-icons::after {
  transform: none !important;
  animation: none !important;
  transition: none !important;
  scale: none !important;
  zoom: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Completely disable any Syncfusion effects on calendar icon */
.e-input-group-icon.e-range-icon.e-icons * {
  transform: none !important;
  animation: none !important;
  transition: none !important;
}

/* Calendar footer buttons - Apply button as primary */
.e-daterangepicker .e-footer .e-apply.e-btn {
  background-color: var(--color-primary-50) !important;
  color: var(--color-white-100) !important;
  border-color: var(--color-primary-50) !important;
  border-radius: 26px !important;
  padding: 12.5px 1rem !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  vertical-align: middle !important;
  line-height: 1 !important;
}

.e-daterangepicker .e-footer .e-apply.e-btn:hover:not(:disabled) {
  background-color: var(--color-primary-60) !important;
  border-color: var(--color-primary-60) !important;
}

.e-daterangepicker .e-footer .e-apply.e-btn:focus:not(:disabled) {
  background-color: var(--color-primary-60) !important;
  border-color: var(--color-primary-60) !important;
  outline: 2px solid var(--color-primary-30) !important;
  outline-offset: 2px !important;
}

.e-daterangepicker .e-footer .e-apply.e-btn:active:not(:disabled) {
  background-color: var(--color-primary-70) !important;
  border-color: var(--color-primary-70) !important;
}

.e-daterangepicker .e-footer .e-apply.e-btn:disabled {
  background-color: var(--color-primary-30) !important;
  border-color: var(--color-primary-30) !important;
  cursor: not-allowed !important;
  opacity: 0.6 !important;
}

/* Calendar footer buttons - Cancel button as secondary */
.e-daterangepicker .e-footer .e-cancel.e-btn {
  background-color: var(--color-secondary-50) !important;
  color: var(--color-white-100) !important;
  border-color: var(--color-secondary-50) !important;
  border-radius: 26px !important;
  padding: 12.5px 1rem !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  vertical-align: middle !important;
  line-height: 1 !important;
}

.e-daterangepicker .e-footer .e-cancel.e-btn:hover:not(:disabled) {
  background-color: var(--color-secondary-60) !important;
  border-color: var(--color-secondary-60) !important;
}

.e-daterangepicker .e-footer .e-cancel.e-btn:focus:not(:disabled) {
  background-color: var(--color-secondary-60) !important;
  border-color: var(--color-secondary-60) !important;
  outline: 2px solid var(--color-secondary-30) !important;
  outline-offset: 2px !important;
}

.e-daterangepicker .e-footer .e-cancel.e-btn:active:not(:disabled) {
  background-color: var(--color-secondary-70) !important;
  border-color: var(--color-secondary-70) !important;
}

/* Checkbox styles have been moved to main.css for centralization */

/* ===== CHIP BUTTONS ===== */
/* General styling for chip-like buttons */
.chip-button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 16px !important;
  border-radius: 20px !important;
  font-family: var(--font-family-sans) !important;
  font-size: var(--font-size-milli) !important;
  font-weight: 400 !important;
  line-height: var(--line-height-relaxed) !important;
  letter-spacing: var(--letter-spacing-wide) !important;
  cursor: pointer !important;
  transition: all 0.2s ease-in-out !important;
  text-decoration: none !important;
  background: var(--color-grey-20) !important;
  color: var(--color-text) !important;
  border: 1px solid var(--color-grey-30) !important;
}

.chip-button:hover {
  background: var(--color-warning-20) !important;
  color: var(--color-text) !important;
  border-color: var(--color-warning-40) !important;
}

.chip-button:focus {
  background: var(--color-warning-20) !important;
  color: var(--color-text) !important;
  outline: 2px solid var(--color-focus) !important;
  outline-offset: 2px !important;
}

.chip-button:active,
.chip-button.e-active {
  background: var(--color-warning-40) !important;
  color: var(--color-text) !important;
}

.chip-button:disabled {
  background: var(--color-grey-30) !important;
  color: var(--color-disabled) !important;
  cursor: not-allowed !important;
  opacity: 0.6 !important;
}

/* Syncfusion-specific overrides to make .e-tbar-btn look like our chip */
.e-tbar-btn.chip-button {
  /* Reset any conflicting Syncfusion styles */
  all: unset;
  /* Apply all chip styles again with !important to ensure override */
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 16px !important;
  border-radius: 20px !important;
  font-family: var(--font-family-sans) !important;
  font-size: var(--font-size-milli) !important;
  font-weight: 400 !important;
  line-height: var(--line-height-relaxed) !important;
  letter-spacing: var(--letter-spacing-wide) !important;
  cursor: pointer !important;
  transition: all 0.2s ease-in-out !important;
  text-decoration: none !important;
  background: var(--color-grey-20) !important;
  color: var(--color-text) !important;
  border: 1px solid var(--color-grey-30) !important;
}

/* Hover, focus and active states for Syncfusion toolbar chip buttons */
.e-tbar-btn.chip-button:hover {
  background: var(--color-warning-20) !important;
  color: var(--color-text) !important;
  border-color: var(--color-warning-40) !important;
}

.e-tbar-btn.chip-button:focus {
  background: var(--color-warning-20) !important;
  color: var(--color-text) !important;
  outline: 2px solid var(--color-focus) !important;
  outline-offset: 2px !important;
}

.e-tbar-btn.chip-button:active,
.e-tbar-btn.chip-button.e-active {
  background: var(--color-warning-40) !important;
  color: var(--color-text) !important;
}

.e-tbar-btn.chip-button:disabled {
  background: var(--color-grey-30) !important;
  color: var(--color-disabled) !important;
  cursor: not-allowed !important;
  opacity: 0.6 !important;
}

/* Remove any Syncfusion ripple effects from chip buttons */
.e-tbar-btn.chip-button .e-ripple-container {
  display: none !important;
}

/* Pager Icons */
.e-pager .e-icons::before {
  content: none !important;
}

.e-pager .e-prev .e-icon-prev::before,
.e-pager .e-next .e-icon-next::before,
.e-pager .e-first .e-icon-first::before,
.e-pager .e-last .e-icon-last::before {
    content: '' !important;
}

.e-pager .e-prev,
.e-pager .e-mprev {
  background-image: url("/img/icons/chevron-right.svg") !important;
  background-size: 16px 16px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  font-size: 0 !important;
  transform: rotate(180deg);
}

.e-pager .e-next,
.e-pager .e-mnext {
  background-image: url("/img/icons/chevron-right.svg") !important;
  background-size: 16px 16px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  font-size: 0 !important;
}

.e-pager .e-first,
.e-pager .e-mfirst {
  background-image: url("/img/icons/chevron-first.svg") !important;
  background-size: 16px 16px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  font-size: 0 !important;
  transform: none;
}

.e-pager .e-last,
.e-pager .e-mlast {
  background-image: url("/img/icons/chevron-last.svg") !important;
  background-size: 16px 16px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  font-size: 0 !important;
}

/* Additional icon overrides can be added here as needed */
/* Template for new icon overrides:

.e-btn-icon.e-ICON-NAME.e-icons::before,
.e-icons.e-ICON-NAME::before {
    content: none !important;
}

.e-btn-icon.e-ICON-NAME.e-icons,
.e-icons.e-ICON-NAME {
    background-image: url('/img/icons/YOUR-ICON.svg') !important;
    background-size: 16px 16px;
    background-repeat: no-repeat;
    background-position: center;
    width: 16px;
    height: 16px;
    font-size: 0;
    display: inline-block;
}

*/