/**
 * Syncfusion Component Overrides
 *
 * MUST load AFTER Syncfusion's tailwind-lite.css to ensure cascade priority.
 * These styles customize Syncfusion components to match TMS design system.
 */

/* ============================================
   DROPDOWN (tms-dropdown)
   ============================================ */
.tms-dropdown.e-ddl.e-input-group {
  background: white;
  border: 1px solid rgb(var(--border-default));
  border-radius: 0.5rem;
  padding: 0;
  min-height: 38px;
  box-shadow: none !important;
}

.tms-dropdown.e-ddl.e-input-group .e-input {
  font-size: 0.875rem;
  color: rgb(var(--text-primary));
  padding: 0.5rem 0.75rem;
  height: auto;
}

.tms-dropdown.e-ddl.e-input-group .e-input::placeholder {
  color: rgb(var(--text-secondary));
}

.tms-dropdown.e-ddl.e-input-group:not(.e-disabled):hover,
.tms-dropdown.e-ddl.e-input-group.e-input-focus {
  border-color: rgb(var(--border-default));
  box-shadow: none !important;
  outline: none;
}

.tms-dropdown.e-ddl.e-input-group .e-input-group-icon {
  color: rgb(var(--text-tertiary));
  min-height: auto;
  padding-right: 0.75rem;
}

.tms-dropdown.e-ddl.e-input-group::before,
.tms-dropdown.e-ddl.e-input-group::after {
  display: none;
}

/* ============================================
   DATETIME PICKER (tms-datetime)
   ============================================ */
.tms-datetime.e-datetime-wrapper.e-input-group {
  background: white;
  border: 1px solid rgb(var(--border-default));
  border-radius: 0.5rem;
  padding: 0;
  min-height: 38px;
  box-shadow: none !important;
}

.tms-datetime.e-datetime-wrapper.e-input-group .e-input {
  font-size: 0.875rem;
  color: rgb(var(--text-primary));
  padding: 0.5rem 0.75rem;
  height: auto;
}

.tms-datetime.e-datetime-wrapper.e-input-group .e-input::placeholder {
  color: rgb(var(--text-secondary));
}

.tms-datetime.e-datetime-wrapper.e-input-group:not(.e-disabled):hover,
.tms-datetime.e-datetime-wrapper.e-input-group.e-input-focus {
  border-color: rgb(var(--border-default));
  box-shadow: none !important;
  outline: none;
}

.tms-datetime.e-datetime-wrapper.e-input-group .e-input-group-icon {
  color: rgb(var(--text-tertiary));
  min-height: auto;
  padding-right: 0.75rem;
}

.tms-datetime.e-datetime-wrapper.e-input-group::before,
.tms-datetime.e-datetime-wrapper.e-input-group::after {
  display: none;
}

/* ============================================
   GRID
   ============================================ */
.e-grid .e-headertext {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.025em;
}

/* ============================================
   MULTISELECT (tms-multiselect)
   ============================================ */

.e-multiselect {
  border-radius: 0.5rem !important;
}

.tms-multiselect .e-multi-select-wrapper {
  min-height: 40px;
  padding: 4px 8px;
}

.tms-multiselect .e-multi-select-wrapper .e-searcher {
  min-height: 30px;
}

.tms-multiselect .e-multi-select-wrapper .e-searcher input {
  font-size: var(--font-size-sm);
  padding: 0 4px;
  outline: none;
}

.tms-multiselect .e-multi-select-wrapper:focus-within {
  border-color: rgb(var(--surface-info));
  box-shadow: 0 0 0 2px rgb(var(--surface-info) / 0.2);
  border-radius: 0.5rem;
}

.tms-multiselect .e-multi-select-wrapper:focus-within,
.tms-multiselect .e-multi-select-wrapper.e-input-focus {
  outline: none;
}

.tms-multiselect .e-multi-select-wrapper .e-searcher input::placeholder {
  color: rgb(var(--text-tertiary));
  font-size: var(--font-size-sm);
}

.tms-multiselect .e-chips {
  background-color: rgb(var(--surface-info) / 0.1);
  border-color: rgb(var(--surface-info) / 0.2);
  color: rgb(var(--text-info));
  font-size: var(--font-size-xs);
  padding: 0.85rem 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  line-height: 1;
  border-radius: 0.5rem;
}

.tms-multiselect .e-chips .e-chips-close {
  color: rgb(var(--text-info));
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 2px;
}

.tms-multiselect .e-chips .e-chips-close::before {
  line-height: 1;
}

/* Clear all icon (X button) */
.tms-multiselect .e-clear-icon {
  top: 6px !important;
  margin-top: 0 !important;
}

/* Group header styling */
.tms-multiselect .e-list-group-item {
  font-weight: 700;
  color: rgb(var(--text-primary));
  background-color: rgb(var(--surface-secondary));
  font-size: 13px;
  padding: 6px 12px;
  border-bottom: 1px solid rgb(var(--border-default));
}

.tms-multiselect .e-list-group-item .e-checkbox-wrapper {
  margin-right: 8px;
}

/* + New item option styling (data-value="-1" convention) */
.tms-multiselect .e-list-item[data-value="-1"] {
  background-color: rgb(var(--surface-info) / 0.05);
  border: 1px dashed rgb(var(--surface-info));
  color: rgb(var(--text-info));
  font-weight: 500;
  margin: 8px 0 4px 0;
  border-radius: 4px;
  order: 9999;
}

.tms-multiselect .e-list-item[data-value="-1"]:hover {
  background-color: rgb(var(--surface-info) / 0.1);
  border-color: rgb(var(--surface-info-hover));
}

.tms-multiselect .e-list-group-item:empty {
  display: none;
}