/* **********************************
  *
  filter simple
  *
  ********************************** */
form.views-exposed-form.views-exposed-form:not(:has(.group-group_1)) {
  padding: var(--gin-spacing-l);

  .views-exposed-form__item {
    margin-block: 0;
  }

  .form-element--type-select {
    min-width: 14rem;
    max-width: none;
  }
}


/* **********************************
 *
 filter with more filters
 *
 ********************************** */
.uv-members-api-party-committee-function-form, /*party/committees/x/edit-functions*/
.uv-members-api-party-division-process-form, /*party/division/x/processes*/
.uv-members-api-party-division-processed-form, /*party/division/x/processed*/
.uv-members-api-party-division-persons-form, /*party/division/x/persons*/
.uv-member-process-list, /*crm/process   +   crm/processed*/
.uv-members-api-party-member-list, /*crm/members/*/
.uv-members-api-party-member-former-list, /*crm/former-members*/
.uv-members-api-party-member-former-division-changed-list, /*crm/former-members/division-change*/
.uv-members-api-party-division-list, /*party/divisions*/
.uv-members-api-party-mandate-list, /*party/mandates*/
.uv-members-api-party-function-list, /*party/positions*/
.uv-members-api-party-committee-list, /*party/committees*/
.uv-members-api-segment-results-form, /*crm/members/segments/x/results*/
.view-filters {
  container-type: inline-size;
}

form.views-exposed-form.views-exposed-form:has(.group-group_1) { 
  justify-content: space-between;
  padding: var(--gin-spacing-l);

  @container (width >= 1024px) {
    gap: 0 42px;
    display: grid;
    grid-template-columns: 1fr max-content;
    grid-row-gap: 12px;
  }

  .group-group_1 {
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 12px;
    display: flex;

    @container (width >= 824px) {
      order: -1;
      width: 72%;
    }

    @container (width >= 1024px) {
      margin: 0;
      width: 100%;
    }

    @container (width >= 1280px) {
      display: grid;
      grid-template-columns: repeat(auto-fill, 252px);
    }

    @container (width >= 1440px) {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(270px, max-content));
    }

    > div {
      @container (width >= 1024px) {
        flex: 1 1 clamp(202px, 22%, 270px);
        min-width: 202px;
        max-width: 100%;
      }  

      input {
        width: 100%;
        max-width: unset;
      }
    }

    &:has(> :nth-child(5):last-child) {
      @container (width >= 1024px) {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, max-content));
      }

      @container (width >= 1440px) {
        grid-template-columns: repeat(auto-fill, minmax(220px, max-content));
      }

      @container (width >= 1600px) {
        grid-template-columns: repeat(auto-fill, minmax(270px, max-content));
      }
    }
  }
  
  .form-actions {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    gap: 12px;
    align-items: center;
    margin: 0;

    @container (width >= 824px) {
      order: -1;
    }

		> .button {
			margin: 0;
		}
  }

  fieldset,
  div.fieldset__wrapper {
    margin: 0;
    padding: 0;
    border: 0;
  }

  div.form-item {
    margin-block: 0;
    margin: 0;
  }
}

.views-exposed-form.views-exposed-form {
  .form-actions {
    input[id^="edit-reset--"] {
      font-size: 0;
      background-image: url('/modules/custom/uv_admin/icons/close_dark.svg');
      background-size: 12px 12px;
      background-repeat: no-repeat;
      background-position: center;
      cursor: pointer;
      width: 40px;
      height: 40px;
      border-color: #C3C3C3!important;

      &:hover, &:focus {
        background-color: transparent;
        border-color: #000!important;
      }
    }
  }
}

.views-exposed-form.views-exposed-form .group-group_2,
.views-exposed-form.views-exposed-form .group-group_3,
.views-exposed-form.views-exposed-form .group-group_4 {
  display: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(270px, max-content);
  gap: 12px;
  grid-column: 1 / span 2;
  align-items: center;
  padding: var(--gin-spacing-m);
  background: rgba(246, 247, 254, .9);
  border-radius: 6px;
  max-height: 0;
  opacity: 0;
  visibility: hidden;
}

.views-exposed-form.views-exposed-form .group-group_4 {
  padding-bottom: var(--gin-spacing-m);
}

.views-exposed-form.views-exposed-form .group-group_2 {
  margin: var(--gin-spacing-m) 0 0;
}

form.views-exposed-form.views-exposed-form .group-group_1,
form.views-exposed-form.views-exposed-form > .form-wrapper.active {
  width: 100%;
  gap: 12px;
  opacity: 1;
  max-height: unset;
  opacity: 1;
  visibility: visible;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 12px;
  display: flex;

  @container (width >= 1024px) {
    margin: 0;
    width: auto;
  }

  @container (width >= 1280px) {
    display: grid;
    grid-template-columns: repeat(auto-fill, 252px);
  }

  @container (width >= 1440px) {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, max-content));
  }

  div.form-item {
    align-self: start;

    @container (width >= 1440px) {
      width: auto;
    }
    
    > * {
      width: 100%;
      max-width: 270px;
      min-width: 0;
      
      &.chosen-container {
        width: 100% !important;
      }
    }   
  }
}
    
form.views-exposed-form.views-exposed-form > .form-wrapper.active {
  > div {
    @container (width >= 1024px) {
      flex: 1 1 clamp(202px, 22%, 270px);
      min-width: 202px;
      max-width: 272px;
    }
  }
}


.group-group_1 {
  grid-row: 1;  
}

.group-group_2.active {
  grid-row: 2;
}

.group-group_3.active {
  grid-row: 3;
}

.group-group_4.active {
  grid-row: 4;
}

#wrapper-dropdown {
	display: flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: 40px;
	width: 50px;
}

.filters-button {
	position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  transition: var(--vierzwo-transition-short);

  svg {
    fill: var(--gin-color-primary);
  }

  &:hover,
  &.focus {
    background: var(--gin-color-primary-light);
  }
}

.form-type--select select.form-select {
	appearance: none;
	width: auto;
	/* min-width: 250px; */
	min-height: calc(var(--input-padding-vertical) * 2 + var(--input-line-height));
	padding-block: calc(var(--input-padding-vertical) - 1px);
	padding-inline: var(--input-padding-horizontal);
	color: var(--gin-color-text);
	font-size: var(--font-size-m);
	line-height: var(--input-line-height);
	border: 1px solid var(--gin-border-color-form-element);
	border-radius: var(--gin-border-m);

	@supports (appearance: base-select) {
    &,
    &::picker(select) {
      appearance: base-select;
      background-image: none;
    }
  }

  option {
	  padding: 10px;
	  border-top: 1px solid var(--gin-border-color-form-element);
	  cursor: pointer;
	  transition-property: color, background;
	  transition-duration: .2s;
	  transition-timing-function: ease-out;
    text-wrap: auto;
    box-sizing: border-box;

	  &:where(:hover, :focus, :active) {
	    background: #fcecf5;
	  }
	  &:checked {
	    background: #fcecf5;
	  }
	  &::checkmark {
	    display: none;
	  }
	  &:first-child {
	    border: 0;
	  }
	}
}

.chosen-drop:not(:has(.chosen-search)) {
  margin-left: -12px;
}

/* **********************************
 *
 overwrite chosen
 *
 ********************************** */
div.chosen-container-active .chosen-single,
div.chosen-container-active .chosen-choices,
div.chosen-container-active .chosen-drop {
  border-color: var(--gin-border-color-form-element);
}

div.chosen-container .chosen-results li.highlighted {
  background-color: var(--gin-color-primary);
  color: #fff;
}

.chosen-container-multi .chosen-choices {
  padding: 0;
}

.chosen-container-multi .chosen-choices li.search-field input[type="text"] {
  margin: 0;
  padding: 0;
}

.chosen-container-multi .chosen-choices li.search-choice {
  border: 0;
  background: #f3f4f7;
  border-radius: 5px;
  font-size: 14px;
  padding: 4px 20px 5px 5px
}

.chosen-container .search-choice-close {
  top: 1px;
  opacity: .5;
}

#edit_field_mailers_chosen{
  width: 100% !important;
}


/* **********************************
 *
 filter field
 *
 ********************************** */

/* Anmeldestatus */
.form-item--field-registration-status-value {

  .chosen-container {
    min-width: 225px;
  }

  .chosen-results li {
    display: inline-flex;
    margin-block-end: 6px;
    padding: 6px 10px;
    justify-content: center;
    align-items: center;
    line-height: 1;
    border-radius: 5px;
  }

  li[data-value="registered"] {
    background: var(--status-registered);
  }

  li[data-value="invited"] {
    background: var(--status-invited);
  }

  li[data-value="attended"] {
    background: var(--status-attended);
  }

  li[data-value="captured"] {
    background: var(--status-captured);
  }

  li[data-value="pending_opt_in"] {
    background: var(--status-opt-in);
  }

  li[data-value="deregistered"] {
    background: var(--status-deregistered);
  }

  li[data-value="registered_unconfirmed"] {
    background: var(--status-unconfirmed);
  }
}

/* ***************************************************** */

.select2-search__field {
  width: auto !important;
  height: 22px!important;
}

.select2-selection__choice__remove {
  margin-left: 5px;
}

.select2-container--gin .select2-selection--multiple {
  min-height: unset !important;
}

.select2-container--gin.select2-container--focus {
  box-shadow: none !important;
}

.select2-container--gin .select2-selection--multiple .select2-selection__rendered {
  display: flex;
  flex-wrap: wrap;
  max-width: min-content;
  flex-direction: column-reverse;

  li:not(:last-child) {
    margin-top: 5px;
  }
}

/* Options 40px high (8px + 24px line + 8px); longer labels may wrap and grow. */
.select2-container--gin li.select2-results__option:not(.select2-results__option--group) {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding-block: 8px;
  padding-inline: 12px;
  line-height: 24px;
  box-sizing: border-box;
}

.select2-container--gin .select2-results__option--highlighted[aria-selected] {
  background-color: var(--gin-color-primary-light)!important;
  color: var(--gin-color-primary-active)!important;
}


.view-filters,
.views-exposed-form,
.persons-extra-filters {
  .select2-container--gin {
    /* Select2 4.1: the search box is a sibling after ul.select2-selection__rendered.
       Reverse always (not only on focus), so the choices stay below the input
       instead of jumping above it when the field loses focus. */
    .select2-selection--multiple {
      display: flex;
      flex-direction: column-reverse;
      gap: 4px;
      border: 0;
      outline: 0;
      padding: 0;
      background-color: transparent;

      ul {
        max-width: unset;
      }

      .select2-selection__rendered:empty {
        display: none;
      }

      .select2-selection__choice {
        margin-right: 0;
        border-radius: 2px;
        width: max-content;
        padding: calc(.25rem - 1px);
        background-color: var(--gin-color-primary-light);
        color: var(--gin-color-primary-active);

        .select2-selection__choice__remove {
          display: flex;
          height: 16px;
          width: 20px;
          padding: 0;
          flex-shrink: 0;
          background-color: transparent;
          border: 0;

          &:hover,
          &:focus {
            background-color: transparent;
          }

          &:before {
            mask-size: 22px;
            background: var(--gin-color-primary-active) !important;
          }
        }
      }

      .select2-selection__rendered {
        padding: 0;
      }

      .select2-search {
        color:var(--gin-color-text);
        line-height:1.5rem;
        padding-block:calc(0.5rem - 1px);
        padding-inline:0.5rem;
        min-height: 40px;
        background-color:var(--gin-bg-input);
        border:1px solid var(--gin-border-color-form-element);
        border-radius:var(--gin-border-m);
        transition:var(--gin-transition);
        width: 100%;
        box-sizing: border-box;

        input {
          width: 100% !important;
          height: 40px;
          padding: var(--input-padding-vertical) var(--input-padding-horizontal);
        }

        /* Select2 4.1 renders a textarea: use the full width so the
           placeholder is not wrapped (global rule above sets width: auto). */
        textarea.select2-search__field {
          width: 100% !important;
          white-space: nowrap;
          overflow: hidden;
        }
      } 
    }

    .select2-selection:hover {
      border: 0;
      box-shadow: none;
    }
  }

  .select2-container--gin.select2-container--focus .select2-selection--multiple {
    border: 0;
    outline: 0;
    padding: 0;
    box-shadow: none;

    .select2-search {
      border:solid black 1px;
      outline:0;
    }
  }
}

/* crm/members, party/divisions/x/persons: "Function / committee" wide enough
   for its placeholder (the field itself sets max-width: 260px inline). */
.view-filters .js-form-item-positiontype .select2-container {
  min-width: 300px;
}

/* crm/process: more filters like the persons list ("Eintrittsdatum"):
   separator line on top, date labels above the fields. */
form.uv-member-process-list #edit-secondary-filters:not(.hidden-filters) {
  padding-top: 20px;
  border-top: 1px solid #E6E8EC;
}

form.uv-member-process-list #edit-search-container #edit-secondary-filters .fieldset__wrapper .form-type--date {
  flex-direction: column;
  align-items: stretch;
  margin-bottom: 0;
}

form.uv-member-process-list #edit-search-container #edit-secondary-filters .fieldset__wrapper .form-type--date label {
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
}

form.uv-member-process-list #edit-search-container #edit-secondary-filters .fieldset__wrapper .form-type--date .form-date {
  margin-left: 0;
}

/* The labels contain their colon; core adds another one in .container-inline. */
form.uv-member-process-list #edit-search-container #edit-secondary-filters .fieldset__wrapper .form-type--date label::after {
  content: none;
}

/* crm/persons: "More filters" (details#edit-extra).
   Select2 like .view-filters above: input box on top, chosen options below
   (max-content), the grey row (e.g. #edit-row-dates, #edit-row-terms) grows
   with them. Overrides the fixed 40px height from uv_members_api/css/persons-list.css. */
.persons-list .persons-extra-filters .select2-container--gin .select2-selection--multiple {
  height: auto;
  min-height: 0 !important;
  padding-block: 0 !important;
}

.persons-list .persons-extra-filters .select2-container--gin .select2-search__field {
  width: 100% !important;
  height: 24px !important;
  line-height: 24px;
  margin: 0;
  padding: 0 !important;
  white-space: nowrap;
}

.persons-list .persons-extra-filters .select2-container--gin .select2-search {
  padding-block: 7px !important;
  min-height: 40px;
}

/* Rows grow downwards: align to the top, select2 fields in a row with
   visible labels (dates) start at the height of those labels.
   Doubled class to win over persons-list.css (align-items: flex-end), which loads later. */
.persons-list .persons-extra-filters .persons-filter-row.persons-filter-row {
  align-items: flex-start;
}

/* Mobile: keep the stacked full-width fields from persons-list.css. */
@media (max-width: 700px) {
  .persons-list .persons-extra-filters .persons-filter-row.persons-filter-row {
    align-items: stretch;
  }

  .persons-list .persons-extra-filters .persons-filter-row:has(.form-item__label:not(.visually-hidden)) .form-item:has(.select2-container) {
    margin-top: 0;
  }
}

.persons-list .persons-extra-filters .persons-filter-row .form-item__label {
  line-height: 20px;
  margin-bottom: 4px;
}

.persons-list .persons-extra-filters .persons-filter-row:has(.form-item__label:not(.visually-hidden)) .form-item:has(.select2-container) {
  margin-top: 24px;
}

/* Function / committee: wide enough for the placeholder. */
.persons-list .persons-extra-filters .js-form-item-positiontype {
  flex: 0 1 360px;
  min-width: min(360px, 100%);
}

/* 
  Memdex Filters
 */

/* Base layout taken over from uv_members_api/css/filter/filter.css; the rules below override it. */
.hidden-filters {
  display: none !important;
}

#edit-search-container {
  display: grid;
  gap: 1rem;

  #edit-primary-filters,
  #edit-secondary-filters {
    justify-content: left;
    position: relative;
    gap: 1rem;

    .form-item,
    .js-form-item,
    fieldset:not(.fieldgroup) {
      margin: unset;
    }
  }

  #edit-toggles {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  #edit-filters-actions {
    display: flex;
    align-items: center;
    /* Stay in line with the inputs when chosen select2 options make the row grow. */
    align-self: start;
    order: 1;
    gap: 12px;

    .button {
      margin: 0;
    }
  }
}



#edit-search-container {
  background: var(--gin-bg-layer);
  border: 1px solid var(--gin-border-color-layer);
  box-sizing: border-box;
  box-shadow: var(--gin-shadow-l1);
  border-radius: var(--gin-border-l);
  margin-block-end: var(--space-l);
  justify-content: space-between;
  padding: var(--gin-spacing-l);

  @container (width >= 1024px) {
    gap: 0 42px;
    display: grid;
    grid-template-columns: 1fr max-content;
    grid-row-gap: 12px;
  }

  #edit-primary-filters {
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 12px;
    display: flex;
    align-items: start;

    @container (width >= 824px) {
      order: -1;
      width: 72%;
    }

    @container (width >= 1024px) {
      margin: 0;
      width: 100%;
    }

    @container (width >= 1280px) {
      display: grid;
      grid-template-columns: repeat(auto-fill, 270px);
    }

    @container (width >= 1440px) {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(270px, max-content));
    }

    > div:not(.filters-actions) {
      @container (width >= 1024px) {
        flex: 1 1 clamp(202px, 22%, 270px);
        min-width: 202px;
        max-width: 100%;
      }  

      input {
        width: 100%;
        max-width: unset;
      }    
    }

    &:has(> :nth-child(5):last-child) {
      @container (width >= 1024px) {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, max-content));
      }

      @container (width >= 1440px) {
        grid-template-columns: repeat(auto-fill, minmax(220px, max-content));
      }

      @container (width >= 1600px) {
        grid-template-columns: repeat(auto-fill, minmax(270px, max-content));
      }
    }

    > .form-item  {
      width: 100%;

      @container (width >= 600px) {
        width: 270px;
      }  

      * {
        /* width: 100% !important; */
        /* max-width: 270px; */
        min-width: 0;
      }

      .chosen-container {
        margin-block-start: 0;
      }
    }   
  }

  .filters-actions {
    .button:nth-of-type(2) {
      font-size: 0;
      background-image: url('/modules/custom/uv_admin/icons/close_dark.svg');
      background-size: 12px 12px;
      background-repeat: no-repeat;
      background-position: center;
      cursor: pointer;
      width: 40px;
      height: 40px;
      border-color: #C3C3C3!important;

      &:hover, &:focus {
        background-color: transparent;
        border-color: #000!important;
      }
    }
  }

  .claro-autocomplete {
    width: 100%;
  }

  #edit-secondary-filters {
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 12px;
    display: flex;
    align-items: start;

    @container (width >= 824px) {
      order: -1;
      width: 72%;
    }

    @container (width >= 1024px) {
      margin: 0;
      width: 100%;
    }

    @container (width >= 1280px) {
      display: grid;
      grid-row: 2;
      grid-template-columns: repeat(auto-fill, 270px);
      align-items: end;
    }

    @container (width >= 1440px) {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(270px, max-content));
    }

    > div:not(.toggle-checkbox-wrapper) {
      @container (width >= 1024px) {
        flex: 1 1 clamp(202px, 22%, 270px);
        min-width: 202px;
        max-width: 100%;
      }  

      input:not(.form-checkbox) {
        width: 100%;
        max-width: unset;
      }

      .form-element.chosen-container-multi {
        width: 100% !important;
      }
    }

    > .form-item  {
      width: 100%;

      @container (width >= 600px) {
        width: 270px;
      } 
    }

    .toggle-checkbox {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;

      .form-checkbox {
        flex-shrink: 0;
      }

      .option {
        margin-bottom: 0;
        margin-left: 15px;
      }
    }

    fieldset {
      border: 0;
      padding-block-start: 0;

      &:has(.form-type--date + .form-type--date) {
        grid-column: span 2;
        width: 100%;
      }
    }

    .fieldset__label {
      padding: 0;
    }

    .fieldset__wrapper:has(.form-date) {
      margin: 0;
      width: 100%;
      padding: 0;
      box-sizing: border-box;

      @container (width >= 800px) {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(262px, max-content));
        gap: 1rem;
      }

      .form-type--date {
        display: flex;
        align-items: center;

        &:has(~ div) { 
          margin-bottom: 5px;

          @container (width >= 800px) {
            margin-bottom: 0;
          }
        }

        .form-date {
          margin-left: 5px;
          width: 100%;
        }
        
        label {
          margin-bottom: 0;
          /* width: 35px; */
        }
      }
    }

    .fieldset__wrapper:has(.form-item--birthday-day) {
      padding: 0;
      margin: 0;
      display: flex;
      justify-content: space-between;

      .form-item--birthday-month {
        select {
          min-width: 130px;
        }
      }
    }
  }
}


/* neos fix/crm/persons filter */
.view-display-id-page_persons {
  .group-group_3 {
    .form-item--field-themes-target-id-uv-crm-entity-reference-select-autocomplete,
    .form-item--changed-from,
    .form-item--changed-to {
      display: none;
    }
  }
}

/* UI */
.ui-autocomplete a.ui-menu-item-wrapper {
  padding: .5rem .75rem;
}