/**
 * 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;
}

/* ERROR state (tms-dropdown-error) — red border for an unselected/invalid dropdown (e.g. Items row
   with no Package). !important is required: the border is otherwise painted by Syncfusion's
   cross-origin CDN base wrapper rule (tailwind-lite.css), which is CORS-opaque and loads async
   (preload+onload), so it can't be reliably out-specified by document order alone. Covers base +
   hover + focus so the red persists while interacting. */
.tms-dropdown-error.e-ddl.e-input-group,
.tms-dropdown-error.e-ddl.e-input-group:not(.e-disabled):hover,
.tms-dropdown-error.e-ddl.e-input-group.e-input-focus {
  border-color: rgb(var(--status-error)) !important;
}

/* ============================================
   BARE DROPDOWN (tms-dropdown-bare) — for use INSIDE a TMSFieldGroup.
   The group provides the border/bg/padding; the control sits flush (no double border).
   ============================================ */
.tms-dropdown-bare.e-ddl.e-input-group {
  background: transparent;
  border: none;
  border-radius: 0;
  min-height: 0;
  box-shadow: none !important;
}
.tms-dropdown-bare.e-ddl.e-input-group .e-input {
  font-size: 0.875rem;
  color: rgb(var(--text-primary));
  padding: 0;
  height: auto;
}
.tms-dropdown-bare.e-ddl.e-input-group .e-input::placeholder {
  color: rgb(var(--text-tertiary));
}
.tms-dropdown-bare.e-ddl.e-input-group:not(.e-disabled):hover,
.tms-dropdown-bare.e-ddl.e-input-group.e-input-focus {
  border: none;
  box-shadow: none !important;
  outline: none;
}
.tms-dropdown-bare.e-ddl.e-input-group .e-input-group-icon {
  color: rgb(var(--text-tertiary));
  min-height: auto;
  padding-right: 0;
}
.tms-dropdown-bare.e-ddl.e-input-group::before,
.tms-dropdown-bare.e-ddl.e-input-group::after {
  display: none;
}

/* Syncfusion stamps the CssClass onto the OUTER .e-control-wrapper too, which carries its own
   border + white background + shadow — that produced a double box inside the TMSFieldGroup. Strip
   it so only the group's border shows (and tame the focus border on open). */
.tms-dropdown-bare.e-control-wrapper,
.e-control-wrapper.tms-dropdown-bare,
.tms-dropdown-bare .e-control-wrapper {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Focus must NOT shift content. On open/focus Syncfusion's runtime state added an in-flow left
   accent (a primary-blue bar) that pushed the value rightward, breaking label↔value alignment.
   The base rules above used `border: none` without !important, so the themed focus geometry won.
   Pin the left geometry of the group AND the inner .e-input across every state and kill any accent
   pseudo-element — with !important so nothing in the theme can re-introduce a shift. Scoped to
   .tms-dropdown-bare, so no other Syncfusion control is affected. */
.tms-dropdown-bare.e-ddl.e-input-group,
.tms-dropdown-bare.e-ddl.e-input-group:hover,
.tms-dropdown-bare.e-ddl.e-input-group:focus-within,
.tms-dropdown-bare.e-ddl.e-input-group.e-input-focus,
.tms-dropdown-bare.e-ddl.e-input-group .e-input,
.tms-dropdown-bare.e-ddl.e-input-group:focus-within .e-input,
.tms-dropdown-bare.e-ddl.e-input-group.e-input-focus .e-input {
  border-width: 0 !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
  text-indent: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}
.tms-dropdown-bare.e-ddl.e-input-group .e-input::before,
.tms-dropdown-bare.e-ddl.e-input-group .e-input::after,
.tms-dropdown-bare.e-control-wrapper::before,
.tms-dropdown-bare.e-control-wrapper::after {
  display: none !important;
  content: none !important;
}

/* ============================================
   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;
}