.dt-button-group { display: inline-flex; }
.dt-button-group > * { border-radius: 0; margin-left: -1px; }
.dt-button-group > *:first-child { border-radius: var(--dt-radius-sm) 0 0 var(--dt-radius-sm); margin-left: 0; }
.dt-button-group > *:last-child { border-radius: 0 var(--dt-radius-sm) var(--dt-radius-sm) 0; }
.dt-button-group > *:focus-visible { position: relative; z-index: 1; }

.dt-menu-button,
.dt-popover { display: inline-block; position: relative; }
.dt-menu-button .dt-button { gap: .5rem; }
.dt-menu-button__chevron {
  flex: 0 0 auto;
  height: 1rem;
  transition: transform 150ms ease;
  width: 1rem;
}
.dt-menu-button__chevron.is-open { transform: rotate(180deg); }
.dt-menu-button__menu,
.dt-popover__panel {
  background: var(--dt-color-surface);
  border: 1px solid var(--dt-color-border);
  border-radius: var(--dt-radius-md);
  box-shadow: var(--dt-shadow-md);
  color: var(--dt-color-text);
  margin-top: .375rem;
  min-width: 13rem;
  padding: .375rem;
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 30;
}
.dt-menu-button__item { background: transparent; border: 0; border-radius: .375rem; color: var(--dt-color-text); cursor: pointer; display: block; padding: .625rem .75rem; text-align: left; width: 100%; }
.dt-menu-button__item:hover { background: color-mix(in srgb, var(--dt-color-brand) 9%, var(--dt-color-surface)); }
.dt-menu-button__item--danger { color: var(--dt-color-danger); }
.dt-menu-button__item:disabled { cursor: not-allowed; opacity: .45; }

.dt-textarea-field,
.dt-search-field,
.dt-date-range { color: var(--dt-color-text); display: grid; gap: .75rem; position: relative; }
.dt-date-range__label { display: block; }
.dt-field-label { color: var(--dt-color-text-muted); font-family: var(--dt-font-compact); font-size: .6875rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.dt-textarea-field textarea,
.dt-search-field__control,
.dt-date-range__control {
  background: var(--dt-color-surface);
  border: 1px solid var(--dt-color-border);
  border-radius: var(--dt-radius-sm);
  color: var(--dt-color-text);
  outline: 0;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.dt-textarea-field textarea { line-height: 1.5; min-height: 7rem; padding: .75rem; resize: vertical; }
.dt-textarea-field textarea:focus,
.dt-search-field__control:focus-within,
.dt-date-range__control:focus-within { border-color: var(--dt-color-brand); box-shadow: 0 0 0 3px var(--dt-color-focus); }
.dt-field-message { color: var(--dt-color-text-muted); font-size: .75rem; line-height: 1.4; }
.dt-field-error .dt-field-message { color: var(--dt-color-danger); }
.dt-field-error textarea,
.dt-field-error .dt-search-field__control,
.dt-field-error .dt-date-range__control { border-color: var(--dt-color-danger); }
.dt-search-field__control { align-items: center; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; min-width: 18rem; }
.dt-search-field__icon { color: var(--dt-color-text-muted); padding-left: .75rem; }
.dt-search-field input { background: transparent; border: 0; color: var(--dt-color-text); min-height: calc(var(--dt-control-height) - 2px); outline: 0; padding: .625rem; width: 100%; }
.dt-search-field input::-webkit-search-cancel-button { display: none; }
.dt-search-field__clear { background: transparent; border: 0; color: var(--dt-color-text-muted); cursor: pointer; padding: .5rem .75rem; }
.dt-sr-only { border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; }
.dt-search-field--prominent { max-width: 47.5rem; width: min(47.5rem, calc(100vw - 2rem)); }
.dt-search-field--prominent .dt-search-field__control { border-color: color-mix(in srgb, var(--dt-color-border) 82%, var(--dt-color-border-strong)); border-radius: .75rem; box-shadow: 0 .875rem 2.125rem rgb(26 43 35 / 8%); gap: 1.125rem; min-height: 4.875rem; min-width: 0; padding: 0 1.125rem 0 1.375rem; transition: border-color .18s, box-shadow .18s, transform .18s; }
.dt-search-field--prominent .dt-search-field__control:hover { border-color: color-mix(in srgb, var(--dt-color-brand) 30%, var(--dt-color-border)); }
.dt-search-field--prominent .dt-search-field__control:focus-within { border-color: var(--dt-color-brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--dt-color-brand) 12%, transparent), 0 1.125rem 2.5rem rgb(26 43 35 / 10%); }
.dt-search-field--prominent .dt-search-field__icon { color: var(--dt-color-brand); height: 1.5625rem; padding: 0; width: 1.5625rem; }
.dt-search-field--prominent input { font-size: 1.0625rem; font-weight: 500; min-height: 4.75rem; padding: 0; }
.dt-search-field--prominent .dt-search-field__clear { align-items: center; border-radius: .5rem; display: inline-flex; font-size: 1.25rem; height: 2.5rem; justify-content: center; padding: 0; width: 2.5rem; }
.dt-date-range__fields { display: grid; gap: .75rem; grid-template-columns: 1fr 1fr; }
.dt-date-range__control { align-items: center; cursor: pointer; display: grid; gap: .125rem .75rem; grid-template-columns: minmax(0, 1fr) auto; padding: .625rem .75rem; text-align: left; }
.dt-date-range__control span { color: var(--dt-color-text-muted); font-size: .625rem; font-weight: 750; grid-column: 1; text-transform: uppercase; }
.dt-date-range__control strong { font-size: .9375rem; font-weight: 650; grid-column: 1; }
.dt-date-range__control svg { grid-column: 2; grid-row: 1 / span 2; height: 1.125rem; width: 1.125rem; }
.dt-date-range__control.is-active { border-color: var(--dt-color-brand); box-shadow: 0 0 0 3px var(--dt-color-focus); }

.dt-calendar { background: var(--dt-color-surface); border: 1px solid var(--dt-color-border); border-radius: var(--dt-radius-lg); box-shadow: var(--dt-shadow-md); left: 0; padding: 1rem; position: absolute; top: calc(100% + .5rem); width: 20rem; z-index: 35; }
.dt-calendar__head { align-items: center; display: grid; grid-template-columns: 2rem 1fr 2rem; margin-bottom: .75rem; text-align: center; }
.dt-calendar__head strong { font-family: var(--dt-font-editorial); font-size: 1rem; font-weight: 400; }
.dt-calendar__head button,
.dt-calendar__footer button { background: transparent; border: 0; color: var(--dt-color-brand); cursor: pointer; }
.dt-calendar__head button { align-items: center; border-radius: .375rem; display: inline-flex; height: 2rem; justify-content: center; padding: .375rem; width: 2rem; }
.dt-calendar__head button:hover { background: color-mix(in srgb, var(--dt-color-brand) 9%, var(--dt-color-surface)); }
.dt-calendar__head svg { height: 1rem; width: 1rem; }
.dt-calendar__weekdays,
.dt-calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.dt-calendar__weekdays { color: var(--dt-color-text-muted); font-size: .625rem; font-weight: 800; margin-bottom: .25rem; text-align: center; text-transform: uppercase; }
.dt-calendar__weekdays span { padding: .375rem 0; }
.dt-calendar__grid button { aspect-ratio: 1; background: transparent; border: 0; border-radius: .4375rem; color: var(--dt-color-text); cursor: pointer; font-size: .75rem; position: relative; }
.dt-calendar__grid button:hover:not(:disabled) { background: color-mix(in srgb, var(--dt-color-brand) 10%, var(--dt-color-surface)); color: var(--dt-color-brand); }
.dt-calendar__grid button.is-outside { color: var(--dt-color-text-muted); opacity: .45; }
.dt-calendar__grid button.is-in-range { background: color-mix(in srgb, var(--dt-color-brand) 10%, var(--dt-color-surface)); border-radius: 0; color: var(--dt-color-brand); }
.dt-calendar__grid button[aria-pressed='true'] { background: var(--dt-color-brand); color: var(--dt-color-on-brand); font-weight: 800; }
.dt-calendar__grid button:disabled { cursor: not-allowed; opacity: .25; }
.dt-calendar__grid button:focus-visible { box-shadow: inset 0 0 0 2px var(--dt-color-brand); outline: 0; }
.dt-calendar__footer { border-top: 1px solid var(--dt-color-border); display: flex; justify-content: space-between; margin-top: .75rem; padding-top: .75rem; }
.dt-calendar__footer button { font-size: .75rem; font-weight: 750; padding: .25rem; }

.dt-file-upload { background: var(--dt-color-surface); border: 1px dashed var(--dt-color-border-strong); border-radius: var(--dt-radius-md); color: var(--dt-color-text-muted); cursor: pointer; display: grid; gap: .375rem; justify-items: center; max-width: 30rem; padding: 1.5rem; text-align: center; }
.dt-file-upload:hover,
.dt-file-upload:focus-within { border-color: var(--dt-color-brand); background: color-mix(in srgb, var(--dt-color-brand) 4%, var(--dt-color-surface)); }
.dt-file-upload input { height: 1px; opacity: 0; position: absolute; width: 1px; }
.dt-file-upload strong { color: var(--dt-color-brand); font-size: .875rem; }
.dt-file-upload small { font-size: .75rem; }
.dt-file-upload__icon { font-size: 1.5rem; }

.dt-filter-chip { align-items: center; background: var(--dt-color-surface); border: 1px solid var(--dt-color-border); border-radius: 999px; color: var(--dt-color-text-muted); cursor: pointer; display: inline-flex; font-size: .75rem; font-weight: 750; gap: .375rem; min-height: 2rem; padding: .375rem .75rem; }
.dt-filter-chip[aria-pressed='true'] { background: color-mix(in srgb, var(--dt-color-brand) 10%, var(--dt-color-surface)); border-color: color-mix(in srgb, var(--dt-color-brand) 45%, var(--dt-color-border)); color: var(--dt-color-brand); }
.dt-filter-chip__remove { align-items: center; display: inline-flex; font-size: 1rem; height: 1rem; justify-content: center; width: 1rem; }
.dt-filter-chip:focus-visible { box-shadow: 0 0 0 3px var(--dt-color-focus); outline: 0; }

.dt-confirmation-dialog__lead { color: var(--dt-color-text); font-weight: 700; margin: 0 0 .375rem; }
.dt-confirmation-dialog__copy { margin: 0; }
.dt-popover__panel { left: 0; padding: 1rem; right: auto; width: 18rem; }
.dt-popover__panel h3 { font-size: .875rem; margin: 0 0 .375rem; }
.dt-popover__panel p { color: var(--dt-color-text-muted); font-size: .8125rem; line-height: 1.5; margin: 0; }

.dt-tooltip { display: inline-flex; position: relative; }
.dt-tooltip__content { background: var(--dt-color-text); border-radius: .375rem; bottom: calc(100% + .5rem); color: var(--dt-color-surface); font-size: .6875rem; left: 50%; max-width: 14rem; opacity: 0; padding: .375rem .5rem; pointer-events: none; position: absolute; transform: translate(-50%, .25rem); transition: opacity 120ms ease, transform 120ms ease; visibility: hidden; white-space: nowrap; z-index: 40; }
.dt-tooltip:hover .dt-tooltip__content,
.dt-tooltip:focus-within .dt-tooltip__content,
.dt-tooltip:focus .dt-tooltip__content { opacity: 1; transform: translate(-50%, 0); visibility: visible; }

@media (max-width: 36rem) {
  .dt-search-field--prominent .dt-search-field__control { border-radius: .625rem; gap: .8125rem; min-height: 4rem; padding: 0 1rem; }
  .dt-search-field--prominent .dt-search-field__icon { height: 1.375rem; width: 1.375rem; }
  .dt-search-field--prominent input { font-size: .9375rem; min-height: 3.875rem; }
  .dt-date-range__fields { grid-template-columns: 1fr; }
  .dt-calendar { max-width: calc(100vw - 2rem); width: 20rem; }
  .dt-search-field__control { min-width: 0; }
}
