/*
 * The report and heatmap query bar. Served as a plain file after bento-ui.css.
 *
 * The markup is in phone order: prompt, Filters and Search, chips, date range, conditions, tools.
 * Phones (below 640px) keep that stack and open the date range, conditions, and tools behind Filters.
 * From 640px it becomes one toolbar: the prompt, then the date range button (a popover), Add filter,
 * and Match all or any on the left with Saved queries and Search on the right, then the condition rows.
 * The controller sets [data-compact] when the bar is narrower than 720px (beside the chat rail) and [data-narrow] below 480px.
 */

.ui-root .report-query {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 12px;
}

.ui-root .report-query > *,
.ui-root .report-query-panel > * {
  min-width: 0;
}

.ui-root .report-query-prompt .ui-input-group {
  height: 36px;
}

.ui-root .report-query-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ui-root .report-query-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}

.ui-root .report-query-toggle[aria-expanded="true"],
.ui-root .report-query-range-trigger[aria-expanded="true"] {
  background-color: var(--bento-fill-active);
}

/* Date range */
.ui-root .report-query-range {
  position: relative;
}

.ui-root .report-query-range-trigger {
  max-width: 100%;
}

.ui-root .report-query-range-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-root .report-query-range-chevron {
  display: inline-flex;
  color: var(--bento-fg-subtle);
  transition: transform var(--bento-duration-fast) var(--bento-easing);
}

.ui-root .report-query-range-trigger[aria-expanded="true"] .report-query-range-chevron,
.ui-root .report-range-presets[open] .report-query-range-chevron {
  transform: rotate(180deg);
}

.ui-root .report-query-range-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ui-root .report-query .ui-segmented-item {
  height: 26px;
}

.ui-root .report-query-range-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* Calendar presets: a small menu beside the title. */
.ui-root .report-range-presets {
  position: relative;
}

.ui-root .report-range-presets > summary {
  list-style: none;
}

.ui-root .report-range-presets > summary::-webkit-details-marker {
  display: none;
}

.ui-root .report-range-presets-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 50;
}

/*
 * Relative range slider: a segmented track with a raised thumb one column wide.
 * The thumb moves by transform only; [data-dragging] follows the pointer without easing,
 * and [data-custom] (calendar preset, chart selection, or typed dates) hides it.
 */
.ui-root .report-range-slider {
  --report-range-track: 28px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-radius: var(--bento-radius-md);
  outline: none;
  cursor: pointer;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.ui-root .report-range-slider[data-dragging] {
  cursor: grabbing;
}

.ui-root .report-range-slider-track,
.ui-root .report-range-slider-ticks {
  display: grid;
  grid-template-columns: repeat(var(--report-range-count, 6), minmax(0, 1fr));
}

.ui-root .report-range-slider-track {
  position: relative;
  box-sizing: border-box;
  height: var(--report-range-track);
  align-items: center;
  border: 1px solid var(--bento-border);
  border-radius: var(--bento-radius-md);
  background-color: var(--bento-bg-muted);
}

.ui-root .report-range-slider-notch {
  justify-self: center;
  width: 4px;
  height: 4px;
  border-radius: var(--bento-radius-full);
  background-color: var(--bento-border-strong);
}

.ui-root .report-range-slider-thumb {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 0;
  z-index: 1;
  width: calc(100% / var(--report-range-count, 6));
  transition: transform var(--bento-duration-slow) var(--bento-easing);
  will-change: transform;
}

.ui-root .report-range-slider-thumb::before {
  content: "";
  position: absolute;
  inset: 0 2px;
  border-radius: var(--bento-radius-sm);
  background-color: var(--bento-surface);
  box-shadow: 0 var(--bento-edge-depth) 0 0 var(--bento-edge), var(--bento-shadow-sm);
}

.ui-root .report-range-slider-thumb::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: var(--bento-radius-full);
  background-color: var(--bento-accent);
}

.ui-root .report-range-slider[data-dragging] .report-range-slider-thumb {
  transition: none;
}

.ui-root .report-range-slider[data-custom] .report-range-slider-thumb {
  visibility: hidden;
}

.ui-root .report-range-slider:focus-visible .report-range-slider-thumb::before {
  box-shadow: var(--bento-focus-ring);
}

.ui-root .report-range-slider[data-custom]:focus-visible .report-range-slider-track {
  box-shadow: var(--bento-focus-ring);
}

.ui-root .report-range-slider-tick {
  overflow: hidden;
  color: var(--bento-fg-muted);
  font-size: var(--bento-text-caption);
  line-height: var(--bento-leading-caption);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--bento-duration-fast) var(--bento-easing);
}

.ui-root .report-range-slider-tick:hover,
.ui-root .report-range-slider-tick.is-active,
.ui-root .report-range-slider[data-dragging] .report-range-slider-tick[data-preview] {
  color: var(--bento-fg);
}

.ui-root .report-range-slider-tick.is-active,
.ui-root .report-range-slider[data-dragging] .report-range-slider-tick[data-preview] {
  font-weight: var(--bento-weight-medium);
}

.ui-root .report-range-slider[data-dragging] .report-range-slider-tick.is-active:not([data-preview]) {
  color: var(--bento-fg-muted);
  font-weight: var(--bento-weight-normal);
}

@media (prefers-reduced-motion: reduce) {
  .ui-root .report-range-slider-thumb,
  .ui-root .report-range-slider-tick {
    transition: none;
  }
}

.ui-root .report-query-dates {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.ui-root .report-query-date-field {
  min-width: 0;
  gap: 4px;
}

.ui-root .report-query-date-field .ui-input {
  width: 100%;
  min-width: 0;
}

.ui-root .report-query-range-footer {
  display: none;
}

/* Conditions */
.ui-root .report-query-conditions-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ui-root .report-query-conditions-group:not(:has(.query-condition)) {
  display: none;
}

.ui-root .report-query-conditions {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 8px;
}

.ui-root .report-query .query-condition {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  background-color: transparent;
}

.ui-root .report-query .query-condition .ui-select {
  width: 100%;
}

.ui-root .report-query .query-condition .value-inputs {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  grid-column: 1 / -1;
  order: 1;
}

.ui-root .report-query .query-condition .value-inputs:empty {
  display: none;
}

.ui-root .report-query .query-condition .value-inputs > .ui-input,
.ui-root .report-query .query-condition .value-inputs > .ui-select {
  width: auto;
  min-width: 0;
  flex: 1 1 0;
}

.ui-root .report-query .query-condition-remove {
  color: var(--bento-fg-subtle);
}

.ui-root .report-query .query-condition-remove:hover {
  color: var(--bento-fg);
}

.ui-root .report-query-logic-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.ui-root .report-query:not(:has(.query-condition + .query-condition)) .report-query-logic {
  display: none;
}

.ui-root .report-query-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

/* Active filter chips (phones, while the panel is closed) */
.ui-root .report-query-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.ui-root .report-query-chips.hidden {
  display: none;
}

.ui-root .report-query-chip {
  max-width: 100%;
  height: 32px;
  gap: 4px;
  padding: 0 4px 0 10px;
}

.ui-root .report-query-chip > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-root .report-query-chip-remove {
  position: relative;
  display: inline-flex;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--bento-radius-sm);
  background: transparent;
  color: var(--bento-fg-muted);
  cursor: pointer;
}

.ui-root .report-query-chip-remove::after {
  content: "";
  position: absolute;
  inset: -10px;
}

.ui-root .report-query-chip-remove:hover {
  background-color: var(--bento-fill-hover);
  color: var(--bento-fg);
}

.ui-root .report-query-chip-remove:focus-visible {
  outline: none;
  box-shadow: var(--bento-focus-ring);
}

.ui-root .report-query-clear-link {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: var(--bento-text-body);
}

/* Phones */
@media (max-width: 639px) {
  .ui-root .report-query :is(.ui-input, .ui-select, .ui-input-group, .ui-btn) {
    min-height: 44px;
  }

  .ui-root .report-query .ui-icon-btn {
    min-width: 44px;
    min-height: 44px;
  }

  .ui-root .report-query .ui-segmented-item {
    height: 40px;
  }

  /* Each slider column is at least 44px square: a 32px track plus the tick label below it. */
  .ui-root .report-range-slider {
    --report-range-track: 32px;
    min-height: 44px;
  }

  .ui-root .report-range-slider-ticks {
    min-height: 16px;
  }

  .ui-root .report-query-hint,
  .ui-root .report-query-range-trigger {
    display: none;
  }

  .ui-root .report-query-clear-link {
    min-height: 44px;
  }

  .ui-root .report-query:not([data-filters-open]) :is(.report-query-range, .report-query-panel, .report-query-tools) {
    display: none;
  }

  .ui-root .report-query[data-filters-open] .report-query-chips {
    display: none;
  }

  /* The date range popover renders inline as the first section of the open filters panel. */
  .ui-root .report-query-range-panel {
    position: static;
    padding: 4px 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    animation: none;
  }

  .ui-root .report-query-logic-row {
    justify-content: space-between;
  }

  .ui-root .report-query-tools {
    padding-top: 4px;
    border-top: 1px solid var(--bento-border-subtle);
  }
}

/* Tablets and desktop: one toolbar */
@media (min-width: 640px) {
  .ui-root .report-query {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 8px;
  }

  .ui-root .report-query-panel,
  .ui-root .report-query-bar {
    display: contents;
  }

  .ui-root .report-query-phone-label,
  .ui-root .report-query-toggle,
  .ui-root .report-query-chips,
  .ui-root .report-query-chips.hidden {
    display: none;
  }

  .ui-root .report-query-prompt {
    order: 1;
    flex: 0 0 100%;
  }

  .ui-root .report-query-range {
    order: 2;
    max-width: 100%;
  }

  .ui-root .report-query-logic-row {
    order: 3;
    flex-wrap: nowrap;
  }

  .ui-root .report-query-tools {
    order: 4;
    flex-wrap: nowrap;
    margin-left: auto;
  }

  .ui-root .report-query-search {
    order: 5;
  }

  .ui-root .report-query-conditions-group {
    order: 6;
    flex: 0 0 100%;
  }

  /* Once there are conditions, Add filter and Match all or any follow the rows instead of crowding row two. */
  .ui-root .report-query:has(.query-condition) .report-query-logic-row {
    order: 7;
    flex: 0 0 100%;
  }

  .ui-root .report-query > .query-section--debug {
    order: 8;
    flex: 0 0 100%;
  }

  .ui-root .report-query-range-trigger {
    max-width: 22rem;
  }

  .ui-root .report-query-range-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 40;
    display: none;
    box-sizing: border-box;
    width: min(30rem, var(--report-range-max, 30rem));
    padding: 12px;
  }

  .ui-root .report-query-range[data-range-open] .report-query-range-panel {
    display: flex;
  }

  .ui-root .report-query-dates {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-top: 12px;
    border-top: 1px solid var(--bento-border-subtle);
  }

  .ui-root .report-query-range-footer {
    display: flex;
    justify-content: flex-end;
  }

  /* Condition rows: a muted connector, then field, operator, and value at fixed widths. */
  .ui-root .report-query .query-condition {
    grid-template-columns: 3.5rem 11rem 9.5rem minmax(0, 18rem) auto;
    justify-content: start;
  }

  .ui-root .report-query .query-condition::before {
    content: "Where";
    color: var(--bento-fg-subtle);
    font-size: var(--bento-text-body);
  }

  .ui-root .report-query .query-condition + .query-condition::before {
    content: "and";
  }

  .ui-root .report-query-conditions[data-logic="or"] .query-condition + .query-condition::before {
    content: "or";
  }

  .ui-root .report-query .query-condition .value-inputs {
    grid-column: auto;
    order: 0;
  }

  .ui-root .report-query .query-condition .value-inputs:empty {
    display: block;
  }

  /* Narrow bars: icon-only Saved queries and two-line condition rows. */
  .ui-root .report-query[data-narrow] .report-query-tool-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .ui-root .report-query[data-narrow] .report-query-saved {
    width: 32px;
    padding: 0;
  }

  .ui-root .report-query[data-compact] .report-query-range-trigger {
    max-width: 16rem;
  }

  /* Narrow bars: the date range grows beside Search, then Add filter and the saved query tools share a row. */
  .ui-root .report-query[data-narrow] .report-query-range {
    flex: 1 0 60%;
  }

  .ui-root .report-query[data-narrow] .report-query-dates {
    grid-template-columns: minmax(0, 1fr);
  }

  .ui-root .report-query[data-narrow] .report-query-search {
    order: 3;
  }

  .ui-root .report-query[data-narrow]:not(:has(.query-condition)) .report-query-logic-row {
    order: 4;
  }

  .ui-root .report-query[data-narrow] .report-query-tools {
    order: 5;
  }

  .ui-root .report-query[data-compact] .query-condition {
    grid-template-columns: minmax(0, 11rem) minmax(0, 9.5rem) minmax(0, 1fr) auto;
    justify-content: stretch;
  }

  .ui-root .report-query[data-compact] .query-condition::before {
    display: none;
  }

  .ui-root .report-query[data-narrow] .query-condition {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  }

  .ui-root .report-query[data-narrow] .query-condition .value-inputs {
    grid-column: 1 / -1;
    order: 1;
  }

  .ui-root .report-query[data-narrow] .query-condition .value-inputs:empty {
    display: none;
  }
}

/* The unused generic query builder shares the condition row. */
.ui-root .query-builder .query-condition {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.ui-root .query-builder .query-condition .value-inputs {
  grid-column: 1 / -1;
  order: 1;
}

.ui-root .query-builder .query-condition .value-inputs:empty {
  display: none;
}

@media (min-width: 640px) {
  .ui-root .query-builder .query-condition {
    grid-template-columns: 11rem 10rem minmax(0, 1fr) auto;
  }

  .ui-root .query-builder .query-condition .value-inputs {
    grid-column: auto;
    order: 0;
  }

  .ui-root .query-builder .query-condition .value-inputs:empty {
    display: block;
  }
}