/* Chrome's customizable <select> (appearance: base-select, enabled by daisyUI v5)
   renders the dropdown as ::picker(select). daisyUI leaves that picker with a
   transparent background, so on Chrome the options render see-through and the
   popup looks like it sits behind the page content. Give the picker a solid,
   themed surface + elevation so it reads as a proper dropdown. Applies to every
   select (pagination per-page, filter selects, Form::Select, etc.). */
.select::picker(select) {
  background-color: var(--color-base-100);
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-box);
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.12), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  padding: 0.25rem;
}

/* In Chrome's customizable <select> (appearance: base-select) the chosen value
   is rendered inside an auto-generated <button> → <selectedcontent>. daisyUI's
   `text-overflow: ellipsis; white-space: nowrap; overflow: hidden` live on
   `.select` itself, so they never reach that nested content, and the button (a
   flex item) defaults to `min-width: auto`, refusing to shrink — so a long
   selected label (e.g. "Todas as abrangências") overflows the control instead
   of ellipsing. Let the button shrink and truncate its collapsed value. Options
   in the ::picker keep daisyUI's `white-space: normal` and still wrap fully. */
@supports (appearance: base-select) {
  .select button {
    min-width: 0;
    overflow: hidden;
  }

  .select selectedcontent {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}