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

/* POPUP list items — long option labels stay on ONE line with an ellipsis; the
   full text is available via the item's native title tooltip on hover (set in the
   ExtraCostsTab ItemTemplate). Scoped to the dedicated surcharge-type-dropdown
   class only — NOT the shared tms-dropdown class, which ~20 other dropdowns across
   the app reuse. Paired with PopupWidth="320px" so fewer names truncate at all
   (AB#22409). !important is required: Syncfusion's cross-origin CDN base wrapper
   rule (tailwind-lite.css) is CORS-opaque and loads async (preload+onload), so its
   own e-list-item white-space can't be reliably out-specified by document order
   alone — same reasoning as tms-dropdown-error below. */
.surcharge-type-dropdown.e-popup .e-list-item {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.surcharge-type-dropdown.e-popup .e-list-item .surcharge-type-option {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

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

/* Side-by-side DateTime popup (custom calendar + time list).
   Portaled to document.body via JS for correct fixed positioning. */
.tms-datetime-popup {
  display: flex;
  flex-direction: column;
  min-width: 22rem;
  max-width: min(28rem, calc(100vw - 1rem));
  background: #fff;
  border: 1px solid rgb(var(--border-default, 229 229 229));
  border-radius: 0.5rem;
  box-shadow: 0 10px 25px rgb(0 0 0 / 0.12);
  overflow: hidden;
  /* Above Blazor/Radzen/Syncfusion modals and TMSSelect (z-9999); portaled to body. */
  z-index: 100060;
}

.tms-datetime-popup-body {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  min-width: 0;
}

.tms-datetime-calendar {
  flex: 0 0 auto;
  width: 17.5rem;
  border-right: 1px solid rgb(var(--border-subtle, 229 229 229));
  padding: 0.5rem 0.5rem 0.25rem;
}

.tms-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  padding: 0 0.25rem;
}

.tms-cal-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: rgb(var(--text-primary, 23 23 23));
}

.tms-cal-nav {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.375rem;
  font-size: 1.125rem;
  line-height: 1;
  color: rgb(var(--text-secondary, 82 82 82));
  background: transparent;
  border: none;
  cursor: pointer;
}

.tms-cal-nav:hover {
  background: rgb(var(--surface-secondary, 245 245 245));
}

.tms-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.125rem;
  margin-bottom: 0.25rem;
  text-align: center;
  font-size: 0.6875rem;
  font-weight: 500;
  color: rgb(var(--text-tertiary, 163 163 163));
}

.tms-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.125rem;
}

.tms-cal-day {
  height: 2rem;
  border-radius: 0.375rem;
  border: none;
  background: transparent;
  font-size: 0.8125rem;
  color: rgb(var(--text-primary, 23 23 23));
  cursor: pointer;
}

.tms-cal-day:hover:not(:disabled):not(.is-selected) {
  background: rgb(var(--surface-secondary, 245 245 245));
}

.tms-cal-day.is-outside {
  color: rgb(var(--text-tertiary, 163 163 163));
}

.tms-cal-day.is-today:not(.is-selected) {
  box-shadow: inset 0 0 0 1px var(--color-primary);
}

.tms-cal-day.is-selected {
  background: var(--color-primary);
  color: #fff;
  font-weight: 600;
}

/* Keep selected contrast on hover — generic hover must not wash out white-on-primary text. */
.tms-cal-day.is-selected:hover:not(:disabled) {
  background: var(--color-primary);
  color: #fff;
}

.tms-cal-day.is-disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Range mode: the two ends read as selected days, the band between them is a
   tint. Radius is squared on the inner edges so the band reads as one bar. */
.tms-cal-day.is-range-start,
.tms-cal-day.is-range-end {
  background: var(--color-primary);
  color: #fff;
  font-weight: 600;
}

.tms-cal-day.is-range-start:not(.is-range-end) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.tms-cal-day.is-range-end:not(.is-range-start) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.tms-cal-day.is-in-range {
  background: rgb(var(--surface-secondary, 245 245 245));
  border-radius: 0;
}

/* Column gap would slice the band into separate blocks. */
.tms-cal-grid--range {
  column-gap: 0;
}

/* Hover preview while the end date is still being chosen. */
.tms-cal-day.is-range-preview {
  background: rgb(var(--surface-secondary, 245 245 245));
  border-radius: 0;
}

.tms-datetime-times {
  display: flex;
  flex-direction: row;
  flex: 1 1 auto;
  align-items: stretch;
  min-width: 9.5rem;
  max-height: 16rem;
}

.tms-datetime-popup--time .tms-datetime-times {
  border-left: none;
  max-height: 18rem;
  min-width: 11rem;
}

.tms-time-col-wrap {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 2.75rem;
  align-items: center;
  border-right: 1px solid rgb(var(--border-subtle, 229 229 229));
}

.tms-time-col-wrap:last-child {
  border-right: none;
}

.tms-time-col-wrap--ampm {
  flex: 0 0 3.25rem;
  justify-content: center;
}

.tms-time-nav {
  flex: 0 0 auto;
  font-size: 0.75rem;
  line-height: 1;
  margin: 0.125rem 0;
}

.tms-time-col {
  flex: 1 1 auto;
  align-self: stretch;
  overflow-y: auto;
  min-height: 0;
  max-height: 100%;
  padding: 0.125rem 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.tms-time-col::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.tms-time-col--ampm {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  overflow: visible;
  max-height: none;
  width: 100%;
}

.tms-time-part {
  display: block;
  width: auto;
  margin: 0.0625rem 0.25rem;
  padding: 0.375rem 0.25rem;
  border: none;
  border-radius: 0.375rem;
  background: transparent;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: rgb(var(--text-primary, 23 23 23));
  cursor: pointer;
}

.tms-time-part:hover:not(.is-selected) {
  background: rgb(var(--surface-secondary, 245 245 245));
}

.tms-time-part.is-selected {
  background: var(--color-primary);
  color: #fff;
  font-weight: 600;
}

.tms-time-part.is-selected:hover {
  background: var(--color-primary);
  color: #fff;
}

.tms-datetime-footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.5rem;
  border-top: 1px solid rgb(var(--border-subtle, 229 229 229));
  padding: 0.5rem 0.75rem;
}

.tms-datetime-footer-start {
  justify-self: start;
  min-width: 0;
}

.tms-datetime-footer-preview {
  justify-self: center;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgb(var(--text-primary, 23 23 23));
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tms-datetime-footer-end {
  justify-self: end;
}

.tms-datetime-popup--time {
  min-width: 11rem;
  max-width: 14rem;
}

.tms-datetime-calendar--solo {
  border-right: none;
}

/* Inline: lives in the page, not above it. The host container owns the frame,
   so the popup shell drops its own shadow and stacking. */
.tms-datetime-popup--inline {
  position: static;
  z-index: auto;
  box-shadow: none;
  max-width: none;
}

/* Date-only popup: no time column, so the shell must not keep the
   side-by-side min-width or it leaves dead space right of the calendar. */
.tms-datetime-popup--date {
  min-width: 17.5rem;
  max-width: min(17.5rem, calc(100vw - 1rem));
}

/* Range popup holds two month panes, so it overrides the date-only width. */
.tms-datetime-popup--range {
  min-width: 35rem;
  max-width: min(35rem, calc(100vw - 1rem));
}

.tms-datetime-range-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  /* Strong, not subtle: subtle is #F5F5F5 and vanishes against this same-tone bar. */
  border-bottom: 1px solid rgb(var(--border-strong, 212 212 212));
  background: rgb(var(--surface-secondary, 245 245 245));
}

.tms-range-end-label {
  font-size: 0.9375rem;
  font-weight: 600;
  color: rgb(var(--text-primary, 23 23 23));
}

/* The unset end is a prompt, not a value — it must not read as a picked date. */
.tms-range-end-label--empty {
  font-weight: 500;
  color: rgb(var(--text-tertiary, 163 163 163));
}

.tms-range-arrow {
  color: rgb(var(--text-tertiary, 163 163 163));
}

/* Day count sits under the two dates, so it needs the full row to itself. */
.tms-range-days {
  flex-basis: 100%;
  text-align: center;
  font-size: 0.75rem;
  color: rgb(var(--text-secondary, 82 82 82));
}

/* Keeps the month title centred when a pane has a nav button on one side only. */
.tms-cal-nav-spacer {
  width: 1.75rem;
  height: 1.75rem;
}

.tms-datetime-footer--range {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

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