@layer components {
  /* ===== BUTTONS ===== */

  /* Base button styles for both regular and Syncfusion buttons */
  .btn,
  .e-btn.e-control {
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: inline-block;
    padding: 12.5px 1rem;
    border: 1px solid transparent;
    border-radius: 26px !important;
    font-weight: 500;
    font-size: var(--font-size-micro);
    line-height: var(--line-height-normal);
    letter-spacing: var(--letter-spacing-wide);
    text-decoration: none;
    text-align: center;
  }

  /* Syncfusion-specific overrides */
  .e-btn.e-control {
    box-shadow: none !important;
    text-transform: none !important;

    &:hover,
    &:focus,
    &:active,
    &.e-active,
    &:disabled,
    &.e-disabled {
      box-shadow: none !important;
    }
  }

  /* Button variant styles - Primary */
  .btn--primary,
  .e-btn.e-control.btn--primary {
    background-color: var(--color-primary-50) !important;
    color: var(--color-white-100) !important;
    border-color: var(--color-primary-50) !important;

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

    &:focus:not(:disabled):not(.e-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;
    }

    &:active:not(:disabled):not(.e-disabled),
    &.e-active:not(:disabled):not(.e-disabled) {
      background-color: var(--color-primary-70) !important;
      border-color: var(--color-primary-70) !important;
    }

    &:disabled,
    &.e-disabled {
      background-color: var(--color-primary-30) !important;
      border-color: var(--color-primary-30) !important;
      cursor: not-allowed !important;
      opacity: 0.6 !important;
    }
  }

  /* Button variant styles - Secondary */
  .btn--secondary,
  .e-btn.e-control.btn--secondary {
    background-color: transparent !important;
    color: var(--color-black-100) !important;
    border-color: var(--color-black-100) !important;
    border-width: 2px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;

    /* Icon color inversion - default state (black) */
    img, svg {
      filter: brightness(0) saturate(100%) invert(0%) !important;
      transition: filter 0.2s ease !important;
    }

    &:hover:not(:disabled):not(.e-disabled) {
      background-color: var(--color-black-100) !important;
      color: var(--color-white-100) !important;
      border-color: var(--color-black-100) !important;

      /* Icon color inversion on hover (white) */
      img, svg {
        filter: brightness(0) saturate(100%) invert(100%) !important;
      }
    }

    &:focus:not(:disabled):not(.e-disabled) {
      background-color: var(--color-black-100) !important;
      color: var(--color-white-100) !important;
      border-color: var(--color-black-100) !important;
      outline: 2px solid var(--color-primary-20) !important;
      outline-offset: 2px !important;

      /* Icon color inversion on focus (white) */
      img, svg {
        filter: brightness(0) saturate(100%) invert(100%) !important;
      }
    }

    &:active:not(:disabled):not(.e-disabled),
    &.e-active:not(:disabled):not(.e-disabled) {
      background-color: var(--color-black-100) !important;
      color: var(--color-white-100) !important;
      border-color: var(--color-black-100) !important;

      /* Icon color inversion on active (white) */
      img, svg {
        filter: brightness(0) saturate(100%) invert(100%) !important;
      }
    }

    &:disabled,
    &.e-disabled {
      background-color: transparent !important;
      color: var(--color-grey-60) !important;
      border-color: var(--color-grey-60) !important;
      cursor: not-allowed !important;
      opacity: 0.6 !important;

      /* Icon color for disabled state (gray) */
      img, svg {
        filter: brightness(0) saturate(100%) invert(55%) sepia(8%) saturate(1250%) hue-rotate(178deg) brightness(94%) contrast(86%) !important;
      }
    }
  }

  /* ===== CHECKBOXES ===== */

  /* Universal Checkbox Styling - Applied to all checkboxes */
  /* Hide the default checkbox input for all checkboxes (except dark mode switches) */
  input[type="checkbox"]:not(#checkbox):not([id*="dark"]):not([id*="theme"]),
  .e-checkbox-wrapper .e-checkbox {
    opacity: 0 !important;
    position: absolute !important;
    z-index: -1 !important;
    width: 24px !important;
    height: 24px !important;
  }

  /* Create custom checkbox appearance for all checkboxes */
  input[type="checkbox"]:not(#checkbox):not([id*="dark"]):not([id*="theme"])
    + label::before,
  .e-checkbox-wrapper .e-frame {
    content: "" !important;
    display: inline-block !important;
    width: 24px !important;
    height: 24px !important;
    background-color: var(--color-white-100) !important;
    border: 2px solid var(--color-grey-40) !important;
    border-radius: 4px !important;
    position: relative !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
    margin-right: 8px !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
  }

  /* Hover state for all checkboxes */
  input[type="checkbox"]:not(#checkbox):not([id*="dark"]):not(
      [id*="theme"]
    ):hover
    + label::before,
  .e-checkbox-wrapper:hover .e-frame {
    border-color: var(--color-grey-60) !important;
  }

  /* Focus state for all checkboxes */
  input[type="checkbox"]:not(#checkbox):not([id*="dark"]):not(
      [id*="theme"]
    ):focus
    + label::before,
  .e-checkbox-wrapper .e-checkbox:focus + .e-frame {
    border-color: var(--color-grey-60) !important;
    box-shadow: 0 0 0 2px var(--color-primary-30) !important;
    outline: none !important;
  }

  /* Hide default Syncfusion check icon */
  .e-frame.e-icons::before,
  .e-frame.e-check.e-icons::before,
  .e-checkbox-wrapper .e-frame.e-icons::before,
  .e-checkbox-wrapper .e-frame.e-check.e-icons::before,
  .e-css.e-checkbox-wrapper .e-frame.e-icons::before,
  .e-css.e-checkbox-wrapper .e-frame.e-check.e-icons::before,
  body .e-checkbox-wrapper .e-frame.e-icons::before,
  body .e-checkbox-wrapper .e-frame.e-check.e-icons::before {
    display: none !important;
    content: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  /* Show custom check icon when checked - Regular HTML checkboxes */
  input[type="checkbox"]:not(#checkbox):not([id*="dark"]):not(
      [id*="theme"]
    ):checked
    + label::before {
    background-color: var(--color-white-100) !important;
    border-color: var(--color-grey-40) !important;
  }

  /* Apply red check icon using a separate pseudo-element positioned correctly */
  input[type="checkbox"]:not(#checkbox):not([id*="dark"]):not(
      [id*="theme"]
    ):checked
    + label::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 4px !important;
    transform: translateY(-50%) !important;
    width: 16px !important;
    height: 16px !important;
    background-image: url("/img/icons/check.svg") !important;
    background-size: 16px 16px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    /* Make check icon red using CSS filter to match Figma design (#E30613) */
    filter: brightness(0) saturate(100%) invert(11%) sepia(99%) saturate(7426%)
      hue-rotate(356deg) brightness(88%) contrast(117%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }

  /* Show custom check icon when checked - Syncfusion checkboxes */
  .e-checkbox-wrapper .e-checkbox:checked + .e-frame::after,
  .e-checkbox-wrapper .e-frame.e-check::after,
  .e-checkbox-wrapper.e-checkbox-wrapper .e-frame.e-check::after,
  .e-css.e-checkbox-wrapper .e-frame.e-check::after,
  body .e-checkbox-wrapper .e-frame.e-check::after,
  html body .e-checkbox-wrapper .e-frame.e-check::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 16px !important;
    height: 16px !important;
    background-image: url("/img/icons/check.svg") !important;
    background-size: 16px 16px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    /* Make check icon red using CSS filter to match Figma design (#E30613) */
    filter: brightness(0) saturate(100%) invert(11%) sepia(99%) saturate(7426%)
      hue-rotate(356deg) brightness(88%) contrast(117%) !important;
    z-index: 10 !important;
  }

  /* Ensure checked state has proper background and border */
  .e-checkbox-wrapper .e-checkbox:checked + .e-frame,
  .e-checkbox-wrapper .e-frame.e-check {
    background-color: var(--color-white-100) !important;
    border-color: var(--color-grey-40) !important;
  }

  /* Additional specificity for checked state - override any Syncfusion defaults */
  .e-checkbox-wrapper .e-frame.e-check,
  .e-checkbox-wrapper.e-checkbox-wrapper .e-frame.e-check,
  .e-css.e-checkbox-wrapper .e-frame.e-check {
    background-color: var(--color-white-100) !important;
    border-color: var(--color-grey-40) !important;
  }

  /* Force override of any Syncfusion theme colors for checked state */
  body .e-checkbox-wrapper .e-frame.e-check,
  html body .e-checkbox-wrapper .e-frame.e-check {
    background-color: var(--color-white-100) !important;
    border-color: var(--color-grey-40) !important;
  }

  /* Override specific Syncfusion theme colors that might interfere */
  .e-checkbox-wrapper .e-frame.e-check,
  .e-css.e-checkbox-wrapper .e-frame.e-check {
    background-color: var(--color-white-100) !important;
    border-color: var(--color-grey-40) !important;
    /* Override any theme-specific colors */
    background: var(--color-white-100) !important;
    border: 2px solid var(--color-grey-40) !important;
  }

  /* Ensure labels are clickable and properly styled */
  input[type="checkbox"]:not(#checkbox):not([id*="dark"]):not([id*="theme"])
    + label,
  .e-checkbox-wrapper label {
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    font-size: var(--font-size-micro) !important;
    font-weight: 500 !important;
    color: var(--color-grey-80) !important;
    line-height: var(--line-height-normal) !important;
    letter-spacing: var(--letter-spacing-wide) !important;
    position: relative !important;
  }

  /* Special handling for checkboxes that use Tailwind classes */
  input[type="checkbox"].h-4.w-4 {
    opacity: 0 !important;
    position: absolute !important;
    z-index: -1 !important;
    width: 24px !important;
    height: 24px !important;

    + label::before {
      content: "" !important;
      display: inline-block !important;
      width: 24px !important;
      height: 24px !important;
      background-color: var(--color-white-100) !important;
      border: 2px solid var(--color-grey-40) !important;
      border-radius: 4px !important;
      position: relative !important;
      cursor: pointer !important;
      transition: all 0.2s ease !important;
      box-sizing: border-box !important;
      margin-right: 8px !important;
      vertical-align: middle !important;
      flex-shrink: 0 !important;
    }

    &:hover + label::before {
      border-color: var(--color-grey-60) !important;
    }

    &:focus + label::before {
      border-color: var(--color-grey-60) !important;
      box-shadow: 0 0 0 2px var(--color-primary-30) !important;
      outline: none !important;
    }

    &:checked + label::before {
      background-color: var(--color-white-100) !important;
      border-color: var(--color-grey-40) !important;
    }

    &:checked + label::after {
      content: "" !important;
      position: absolute !important;
      top: 50% !important;
      left: 4px !important;
      transform: translateY(-50%) !important;
      width: 16px !important;
      height: 16px !important;
      background-image: url("/img/icons/check.svg") !important;
      background-size: 16px 16px !important;
      background-repeat: no-repeat !important;
      background-position: center !important;
      /* Make check icon red using CSS filter to match Figma design (#E30613) */
      filter: brightness(0) saturate(100%) invert(11%) sepia(99%)
        saturate(7426%) hue-rotate(356deg) brightness(88%) contrast(117%) !important;
      pointer-events: none !important;
      z-index: 1 !important;
    }
  }

  /* ===== GLOBAL FOCUS OVERRIDES ===== */
  /* Override any browser or framework focus styles that might interfere */
  *:focus,
  *:focus-visible {
    outline: none !important;
    outline-offset: 0 !important;
  }
  
  /* Specifically target all possible input/form element focus states */
  input:focus,
  input:focus-visible,
  textarea:focus,
  textarea:focus-visible,
  select:focus,
  select:focus-visible,
  button:focus,
  button:focus-visible,
  [contenteditable]:focus,
  [contenteditable]:focus-visible {
    outline: none !important;
    outline-offset: 0 !important;
  }
  
  /* Override Syncfusion component focus states */
  .e-input:focus,
  .e-input:focus-visible,
  .e-input-group:focus-within,
  .e-input-group.e-input-focus,
  .e-control:focus,
  .e-control:focus-visible,
  .e-control.e-input-focus,
  .e-textbox:focus,
  .e-textbox:focus-visible,
  .e-dropdownlist:focus,
  .e-dropdownlist:focus-visible,
  .e-daterangepicker:focus,
  .e-daterangepicker:focus-visible,
  .e-multiselect:focus,
  .e-multiselect:focus-visible {
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
  }

  /* ===== INPUTS & SELECTS ===== */
  /* Universal styling for native HTML inputs/selects and Syncfusion inputs */
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  .e-input-group input:not(.e-input-group textarea),
  .e-dropdownlist.e-input,
  .e-dropdown.e-input {
    border: 2px solid var(--color-grey-40) !important;
    border-radius: var(--border-radius-s) !important;
    padding: 12px 16px !important;
    background-color: var(--color-white-100) !important;
    color: var(--color-text) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    font-family: var(--font-family-sans) !important;
    font-size: var(--font-size-milli) !important;
    line-height: var(--line-height-normal) !important;
    letter-spacing: var(--letter-spacing-normal) !important;
    height: 48px !important; /* Figma spec */
    box-sizing: border-box !important;
    width: 100% !important; /* Ensure full width */
  }

  /* ===== TEXTAREA SPECIFIC STYLING ===== */
  /* Separate styling for textareas to make them resizable and have better height */
  textarea,
  .e-input-group textarea,
  .e-textbox.e-multi-line textarea,
  .e-textbox.e-multi-line .e-input {
    border: 2px solid var(--color-grey-40) !important;
    border-radius: var(--border-radius-s) !important;
    padding: 12px 16px !important;
    background-color: var(--color-white-100) !important;
    color: var(--color-text) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    font-family: var(--font-family-sans) !important;
    font-size: var(--font-size-milli) !important;
    line-height: var(--line-height-relaxed) !important; /* Better line height for reading */
    letter-spacing: var(--letter-spacing-normal) !important;
    min-height: 120px !important; /* Better starting height - about 4-5 lines */
    /* height: auto !important; Allow height to grow */
    box-sizing: border-box !important;
    width: 100% !important;
    resize: vertical !important; /* Allow vertical resizing */
    overflow-y: auto !important; /* Enable scrolling when needed */
  }

  /* Ensure Syncfusion multiline textbox wrapper doesn't interfere */
  .e-textbox.e-multi-line {
    border: none !important; /* Remove wrapper border */
    background: transparent !important;
    padding: 0 !important;
    width: 100% !important;
    min-height: 120px !important;
  }

  /* Make sure the multiline textbox takes full width and height */
  .e-textbox.e-multi-line .e-input {
    width: 100% !important;
    min-height: 120px !important;
  }

  /* Ensure Syncfusion dropdown wrappers also take full width */
  .e-input-group.e-ddl,
  .e-input-group.e-control-wrapper.e-ddl,
  .e-input-group {
    width: 100% !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Ensure calendar/date picker inputs take full width */
  .e-daterangepicker.e-input-group,
  .e-datepicker.e-input-group,
  .e-input-group.e-daterangepicker,
  .e-input-group.e-datepicker,
  .e-control-wrapper.e-daterangepicker,
  .e-control-wrapper.e-datepicker,
  .e-date-range-wrapper,
  .e-input-group.e-date-range-wrapper {
    width: 100% !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Ensure the calendar input field itself takes full width */
  .e-daterangepicker .e-input,
  .e-datepicker .e-input,
  .e-input-group.e-daterangepicker .e-input,
  .e-input-group.e-datepicker .e-input,
  .e-date-range-wrapper .e-daterangepicker,
  .e-date-range-wrapper .e-input {
    width: 100% !important;
    flex: 1 !important;
  }

  /* Ensure the dropdown input takes all available space */
  .e-input-group.e-ddl .e-dropdownlist.e-input {
    flex: 1 !important;
    width: 100% !important;
    padding-right: 40px !important; /* Make room for dropdown icon */
  }

  /* Position dropdown icon inside the input field */
  .e-input-group.e-ddl .e-input-group-icon.e-ddl-icon {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
    pointer-events: none !important;
    width: 16px !important;
    height: 16px !important;
  }

  /* Position calendar icon inside the input field */
  .e-input-group .e-input-group-icon.e-range-icon {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
    pointer-events: auto !important; /* Allow clicks on calendar icon */
    width: 16px !important;
    height: 16px !important;
    cursor: pointer !important; /* Show pointer cursor on hover */
  }

  /* Add padding for calendar inputs to make room for the icon */
  .e-input-group input[id*="daterange"],
  .e-input-group input.e-input[type="text"]:not(.e-dropdownlist) {
    padding-right: 40px !important;
  }

  /* ===== DATE RANGE PICKER FIXES ===== */
  
  /* Hide the clear icon completely - it shouldn't be visible */
  .e-input-group .e-clear-icon,
  .e-date-range-wrapper .e-clear-icon {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
  
  /* Make the entire date range input wrapper clickable */
  .e-date-range-wrapper,
  .e-input-group.e-date-range-wrapper {
    cursor: pointer !important;
    position: relative !important;
  }
  
  /* Ensure the date range input itself is clickable and styled properly - DEFAULT STATE */
  .e-daterangepicker.e-input,
  .e-input-group .e-daterangepicker.e-input {
    cursor: pointer !important;
    background-color: var(--color-white-100) !important;
    border: 2px solid var(--color-grey-40) !important;
    border-radius: var(--border-radius-s) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    box-shadow: none !important; /* Remove any default box shadow */
  }
  
  /* Override any Syncfusion default styling that might cause red borders */
  .e-daterangepicker.e-input.e-control,
  .e-input-group .e-daterangepicker.e-input.e-control,
  .e-control-wrapper .e-daterangepicker.e-input {
    border: 2px solid var(--color-grey-40) !important;
    border-color: var(--color-grey-40) !important;
    box-shadow: none !important;
    outline: none !important;
  }
  
  /* Remove any error state styling that might be applied by default */
  .e-daterangepicker.e-input:not(.e-error):not(.is-error),
  .e-input-group .e-daterangepicker.e-input:not(.e-error):not(.is-error) {
    border-color: var(--color-grey-40) !important;
    box-shadow: none !important;
  }
  
  /* Hover state for date range picker */
  .e-date-range-wrapper:hover .e-daterangepicker.e-input,
  .e-daterangepicker.e-input:hover {
    border-color: var(--color-grey-60) !important;
  }
  
  /* Focus state for date range picker - Clean black border only */
  .e-date-range-wrapper:focus-within .e-daterangepicker.e-input,
  .e-daterangepicker.e-input:focus {
    border-color: var(--color-black-100) !important;
    box-shadow: none !important; /* Remove any additional shadows/outlines */
    outline: none !important;
  }
  
  /* Remove any default Syncfusion focus styling that might conflict */
  .e-date-range-wrapper.e-input-focus,
  .e-date-range-wrapper:focus-within,
  .e-daterangepicker.e-input.e-input-focus {
    box-shadow: none !important; /* Remove any additional shadows/outlines */
    outline: none !important;
  }
  
  /* Position the calendar icon properly within the clickable area */
  .e-date-range-wrapper .e-range-icon {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 5 !important; /* Lower than before to allow input clicks */
    pointer-events: auto !important;
    cursor: pointer !important;
    width: 16px !important;
    height: 16px !important;
  }

  /* ===== MULTISELECT STYLING ===== */

  /* Multiselect wrapper styling */
  .e-multiselect.e-input-group,
  .e-multiselect.e-control-wrapper {
    width: 100% !important;
    position: relative !important;
    border: 2px solid var(--color-grey-40) !important;
    border-radius: var(--border-radius-s) !important;
    background-color: var(--color-white-100) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    min-height: 48px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    padding: 8px 12px !important;
    cursor: pointer !important;
  }

  /* Ensure border is always visible with higher specificity */
  .e-multiselect.e-input-group.e-control-wrapper,
  .e-control-wrapper.e-multiselect.e-input-group,
  body .e-multiselect.e-input-group,
  html body .e-multiselect.e-input-group {
    border: 2px solid var(--color-grey-40) !important;
    border-radius: var(--border-radius-s) !important;
    background-color: var(--color-white-100) !important;
  }

  /* Remove default Syncfusion wrapper styles but keep our border */
  .e-multiselect.e-input-group::before,
  .e-multiselect.e-input-group::after {
    content: none !important;
    display: none !important;
  }

  /* Override any Syncfusion styles that might remove borders */
  .e-multiselect.e-input-group,
  .e-multiselect.e-control-wrapper,
  .e-multiselect.e-input-group.e-control-wrapper {
    border: 2px solid var(--color-grey-40) !important;
    border-radius: var(--border-radius-s) !important;
    background: var(--color-white-100) !important;
    background-color: var(--color-white-100) !important;
  }

  /* Force border on all possible Syncfusion multiselect variations */
  .e-control-wrapper.e-multiselect,
  .e-input-group.e-multiselect,
  .e-multiselect {
    border: 2px solid var(--color-grey-40) !important;
    border-radius: var(--border-radius-s) !important;
  }

  /* Inner wrapper styling */
  .e-multi-select-wrapper {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    min-height: 32px !important;
    cursor: pointer !important;
  }

  /* Chips collection styling - ALWAYS show chips, never hide them */
  .e-chips-collection {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    align-items: center !important;
    flex: 1 !important;
  }

  /* Force chips to always be visible */
  .e-multiselect .e-chips-collection {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Individual chip styling */
  .e-chips {
    background-color: var(--color-primary-10) !important;
    border: 1px solid var(--color-primary-20) !important;
    border-radius: 16px !important;
    padding: 6px 8px 6px 12px !important;
    font-size: var(--font-size-micro) !important;
    color: var(--color-primary-70) !important;
    font-weight: 500 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    max-width: 250px !important;
    transition: all 0.2s ease !important;
  }

  .e-chips:hover {
    background-color: var(--color-primary-20) !important;
    border-color: var(--color-primary-30) !important;
  }

  /* Chip content styling */
  .e-chipcontent {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.2 !important;
  }

  /* Chip close button styling - use close.svg */
  .e-chips-close {
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    width: 16px !important;
    height: 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background-color: transparent !important;
    opacity: 0.7 !important;
    /* Remove any default content */
    font-size: 0 !important;
  }

  .e-chips-close::before {
    content: "" !important;
    width: 12px !important;
    height: 12px !important;
    background-image: url("/img/icons/close.svg") !important;
    background-size: 12px 12px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    /* Make the close icon red to match the chip theme */
    filter: brightness(0) saturate(100%) invert(11%) sepia(99%) saturate(7426%)
      hue-rotate(356deg) brightness(88%) contrast(117%) !important;
  }

  .e-chips-close:hover {
    opacity: 1 !important;
    background-color: var(--color-primary-20) !important;
  }

  /* HIDE the "X selected" delimiter view completely */
  .e-delim-view.e-delim-total,
  .e-delim-view.e-delim-values {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  /* Hide the search input when not actively searching */
  .e-searcher {
    display: none !important;
  }

  /* When actively searching, show the search input */
  .e-multiselect.e-input-focus .e-searcher,
  .e-multiselect:focus-within .e-searcher {
    display: inline-block !important;
    flex: 0 0 auto !important;
    min-width: 60px !important;
  }

  /* Search input styling */
  .e-searcher .e-dropdownbase {
    border: none !important;
    outline: none !important;
    background: transparent !important;
    font-size: var(--font-size-micro) !important;
    color: var(--color-text) !important;
    font-family: var(--font-family-sans) !important;
    min-width: 60px !important;
    width: auto !important;
  }

  /* Hidden multiselect input */
  .e-searcher .e-multiselect {
    display: none !important;
  }

  /* Make the entire multiselect area clickable */
  .e-multi-select-wrapper,
  .e-chips-collection {
    cursor: pointer !important;
  }

  /* Hover state for multiselect */
  .e-multiselect.e-input-group:hover,
  .e-multiselect.e-control-wrapper:hover {
    border-color: var(--color-grey-60) !important;
  }

  /* Focus state for multiselect - Clean black border only */
  .e-multiselect.e-input-group:focus-within,
  .e-multiselect.e-control-wrapper:focus-within,
  .e-multiselect.e-input-group.e-input-focus,
  .e-multiselect.e-control-wrapper.e-input-focus {
    border-color: var(--color-black-100) !important;
    box-shadow: none !important; /* Remove any additional shadows/outlines */
    outline: none !important;
  }

  /* Error state for multiselect */
  .e-multiselect.e-input-group.e-error,
  .e-multiselect.e-control-wrapper.e-error {
    border-color: var(--color-error) !important;
  }

  /* Disabled state for multiselect */
  .e-multiselect.e-input-group:disabled,
  .e-multiselect.e-control-wrapper:disabled {
    background-color: var(--color-grey-20) !important;
    border-color: var(--color-grey-40) !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
  }

  /* ===== DIALOG IMPROVEMENTS ===== */
  
  /* Ensure dialogs are properly centered and don't cause unnecessary scrolling */
  .e-dialog.e-control {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    z-index: 10002 !important; /* Higher than overlay */
  }
  
  /* Remove any margin/padding that might affect centering */
  .e-dialog .e-dlg-content {
    padding: 0 !important;
  }
  
  /* Ensure dialog buttons use our custom button styles and proper alignment */
  .e-dialog .e-footer-content {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    padding: 16px 24px !important;
  }
  
  .e-dialog .e-footer-content .e-btn.e-control {
    margin: 0 !important;
    height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* Override Syncfusion dialog button styles to use our design system */
  .e-dialog .e-footer-content .e-btn.e-control.btn--primary {
    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;
    font-size: var(--font-size-micro) !important;
    line-height: var(--line-height-normal) !important;
    letter-spacing: var(--letter-spacing-wide) !important;
  }
  
  .e-dialog .e-footer-content .e-btn.e-control.btn--primary:hover:not(:disabled) {
    background-color: var(--color-primary-60) !important;
    border-color: var(--color-primary-60) !important;
  }
  
  .e-dialog .e-footer-content .e-btn.e-control.btn--primary:focus:not(:disabled) {
    background-color: var(--color-primary-60) !important;
    border-color: var(--color-primary-60) !important;
    box-shadow: none !important;
    outline: none !important;
  }
  
  .e-dialog .e-footer-content .e-btn.e-control.btn--secondary {
    background-color: transparent !important;
    color: var(--color-black-100) !important;
    border: 2px solid var(--color-black-100) !important;
    border-radius: 26px !important;
    padding: 12.5px 1rem !important;
    font-weight: 500 !important;
    font-size: var(--font-size-micro) !important;
    line-height: var(--line-height-normal) !important;
    letter-spacing: var(--letter-spacing-wide) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }
  
  .e-dialog .e-footer-content .e-btn.e-control.btn--secondary:hover:not(:disabled) {
    background-color: var(--color-black-100) !important;
    color: var(--color-white-100) !important;
    border-color: var(--color-black-100) !important;
  }
  
  .e-dialog .e-footer-content .e-btn.e-control.btn--secondary:focus:not(:disabled) {
    background-color: var(--color-black-100) !important;
    color: var(--color-white-100) !important;
    border-color: var(--color-black-100) !important;
    box-shadow: none !important;
    outline: none !important;
  }
  
  /* Ensure smooth dialog animations */
  .e-dialog.e-control.e-popup {
    transition: all 0.3s ease !important;
  }
  
  /* Improve dialog overlay */
  .e-dlg-overlay {
    background-color: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(2px) !important;
    z-index: 10001 !important; /* Below dialog but above content */
  }
  
  /* Ensure dialog container has proper z-index hierarchy */
  .e-dialog-container,
  .e-popup-container {
    z-index: 10002 !important;
  }
  
  /* Fix for Syncfusion dialog wrapper z-index */
  .e-dlg-wrapper {
    z-index: 10002 !important;
  }
  
  /* Ensure dialog content is not affected by backdrop blur */
  .e-dialog.e-control .e-dlg-content,
  .e-dialog.e-control .e-dlg-header,
  .e-dialog.e-control .e-footer-content {
    backdrop-filter: none !important;
    filter: none !important;
  }
  
  /* ===== DELETE DIALOG STYLING ===== */
  
  /* Special styling for delete/destructive action dialogs */
  .e-dialog[id*="deleteDialog"] .e-footer-content .e-btn.e-control.btn--primary {
    background-color: var(--color-error-50) !important;
    color: var(--color-white-100) !important;
    border-color: var(--color-error-50) !important;
  }
  
  .e-dialog[id*="deleteDialog"] .e-footer-content .e-btn.e-control.btn--primary:hover:not(:disabled) {
    background-color: var(--color-error-60) !important;
    border-color: var(--color-error-60) !important;
  }
  
  .e-dialog[id*="deleteDialog"] .e-footer-content .e-btn.e-control.btn--primary:focus:not(:disabled) {
    background-color: var(--color-error-60) !important;
    border-color: var(--color-error-60) !important;
    box-shadow: none !important;
    outline: none !important;
  }
  
  /* Make delete dialog header slightly red-tinted for visual hierarchy */
  .e-dialog[id*="deleteDialog"] .e-dlg-header {
    background-color: var(--color-error-10) !important;
    border-bottom-color: var(--color-error-20) !important;
  }
  
  /* Add subtle warning styling to delete dialog content */
  .e-dialog[id*="deleteDialog"] .e-dlg-content {
    background-color: var(--color-white-100) !important;
  }

  /* Placeholder */
  input::placeholder,
  textarea::placeholder {
    color: var(--color-grey-50) !important;
    opacity: 1 !important;
  }

  /* Hover state */
  input:not([type="checkbox"]):not([type="radio"]):hover,
  select:hover,
  .e-input-group input:hover,
  .e-dropdownlist.e-input:hover,
  .e-dropdown.e-input:hover {
    border-color: var(--color-grey-60) !important;
  }

  /* Textarea hover state */
  textarea:hover,
  .e-input-group textarea:hover,
  .e-textbox.e-multi-line textarea:hover,
  .e-textbox.e-multi-line .e-input:hover {
    border-color: var(--color-grey-60) !important;
  }

  /* Focus / active state - Clean black border only */
  input:not([type="checkbox"]):not([type="radio"]):focus,
  input:not([type="checkbox"]):not([type="radio"]):focus-visible,
  select:focus,
  select:focus-visible,
  .e-input-group input:focus,
  .e-input-group input:focus-visible,
  .e-dropdownlist.e-input:focus,
  .e-dropdownlist.e-input:focus-visible,
  .e-dropdown.e-input:focus,
  .e-dropdown.e-input:focus-visible {
    border-color: var(--color-black-100) !important; /* Active stroke - true black */
    box-shadow: none !important; /* Remove any additional shadows/outlines */
    outline: none !important; /* Remove browser default outline */
    outline-offset: 0 !important; /* Remove any outline offset */
  }

  /* Textarea focus state - Clean black border only */
  textarea:focus,
  textarea:focus-visible,
  .e-input-group textarea:focus,
  .e-input-group textarea:focus-visible,
  .e-textbox.e-multi-line textarea:focus,
  .e-textbox.e-multi-line textarea:focus-visible,
  .e-textbox.e-multi-line .e-input:focus,
  .e-textbox.e-multi-line .e-input:focus-visible {
    border-color: var(--color-black-100) !important; /* Active stroke - true black */
    box-shadow: none !important; /* Remove any additional shadows/outlines */
    outline: none !important; /* Remove browser default outline */
    outline-offset: 0 !important; /* Remove any outline offset */
  }

  /* Error state – element gets .is-error or Syncfusion .e-error class */
  input.is-error,
  select.is-error,
  .e-input-group.e-error input {
    border-color: var(--color-error) !important;
  }

  /* Textarea error state */
  textarea.is-error,
  .e-input-group.e-error textarea,
  .e-textbox.e-multi-line.e-error textarea,
  .e-textbox.e-multi-line.e-error .e-input {
    border-color: var(--color-error) !important;
  }

  /* Disabled state */
  input:not([type="checkbox"]):not([type="radio"]):disabled,
  select:disabled,
  .e-input-group input:disabled,
  .e-dropdownlist.e-input:disabled,
  .e-dropdown.e-input:disabled {
    background-color: var(--color-grey-20) !important;
    border-color: var(--color-grey-40) !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
  }

  /* Textarea disabled state */
  textarea:disabled,
  .e-input-group textarea:disabled,
  .e-textbox.e-multi-line textarea:disabled,
  .e-textbox.e-multi-line .e-input:disabled {
    background-color: var(--color-grey-20) !important;
    border-color: var(--color-grey-40) !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
    resize: none !important; /* Disable resizing when disabled */
  }

  /* Remove wrapper borders & pseudo borders that create double borders */
  .e-input-group,
  .e-input-group.e-control-wrapper,
  .e-dropdownlist .e-input-group,
  .e-control-wrapper.e-input-group {
    border: none !important;
    background-color: transparent !important;
    border-radius: var(--border-radius-s) !important;
    overflow: hidden !important;
  }

  .e-input-group::before,
  .e-input-group::after,
  .e-input-group.e-control-wrapper::before,
  .e-input-group.e-control-wrapper::after {
    content: none !important;
    display: none !important;
  }

  /* Full width dropdown styling */
  .e-control-wrapper .e-input-group.e-ddl,
  .e-control-wrapper .e-input-group.e-ddl .e-dropdownlist.e-input {
    width: 100% !important;
  }

  /* Hide the hidden select element completely so it doesn't interfere with layout */
  .e-ddl-hidden,
  select.e-ddl-hidden,
  .e-daterange-hidden,
  .e-multi-hidden {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    position: absolute !important;
    visibility: hidden !important;
  }

  /* Pagination dropdown inside Syncfusion pager */
  .e-pager .e-pagerdropdown .e-input-group,
  .e-pager .e-pagerdropdown .e-dropdownlist {
    width: auto !important;
    min-width: 72px !important;
  }

  .e-pager .e-pagerdropdown .e-input,
  .e-pager .e-pagerdropdown .e-dropdownlist.e-input {
    padding-right: 32px !important; /* leave room for caret icon */
  }

  /* === Price table grid input overrides === */
  .dynamic-grid-container .e-input-group input.e-input[type="text"] {
    padding-right: 4px !important;
    padding-left: 4px !important;
  }
}