/* Personen anzeigen */
.persons-list .persons-types,
.persons-type-filter .persons-types {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 40px;
}

.persons-list .persons-types .form-item,
.persons-type-filter .persons-types .form-item {
  margin: 0;
}

.persons-list .persons-count {
  min-height: 30px;
  margin-bottom: 20px;
}

.persons-list #edit-search-container {
  padding: 0;
  border: 0;
  box-shadow: none;
  margin: 0;
}

/* Person types of the lists with a type filter (division persons): own row
   above the filters, like on /crm/persons. #edit-search-container is a grid
   (42-filter.css) whose first row holds the primary filters, so the types take
   the first row for themselves, spanning all columns, and the filters move
   down. Labels lose the colon of .container-inline. */
.persons-type-filter #edit-search-container > .persons-types {
  grid-column: 1 / -1;
  grid-row: 1;
  order: -2;
  width: 100%;
  margin-bottom: 16px;
}

.persons-type-filter #edit-search-container #edit-secondary-filters {
  grid-row: 3;
}

.persons-type-filter .persons-types label::after,
.persons-type-filter .persons-types .label::after {
  content: none;
}

/* Filter */
.persons-list .persons-extra-filters>.details-wrapper {
  margin: 0;
  padding: 0;
  background: transparent;
  margin-block: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 0 12px;
}

.persons-list .persons-extra-filters>summary {
  position: absolute;
  top: 0;
  right: 10px;
  width: 40px;
  height: 40px;
  padding: 0;
  font-size: 0;
  list-style: none;
  background: transparent;
  border: 0;
  --size-summary-border-radius: 10px;
  border-radius: 10px !important;
  transition: background-color 0.12s ease;
}

.persons-list .persons-extra-filters>summary::after {
  border-radius: 10px !important;
}

.persons-list .persons-extra-filters>summary:hover {
  background: var(--gin-bg-item-hover, rgba(229, 0, 125, .06));
}

.persons-list .persons-extra-filters>summary:focus-visible {
  outline: 2px solid var(--persons-accent);
  outline-offset: 2px;
}

.persons-list .persons-extra-filters.claro-details>summary.claro-details__summary::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  background: var(--persons-accent);
  mask: url('../../uv_admin/icons/filter.svg') center / contain no-repeat;
  -webkit-mask: url('../../uv_admin/icons/filter.svg') center / contain no-repeat;
  transform: none;
}

.persons-list .persons-extra-filters .persons-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  padding: 20px 0;
  margin: 0;
  border-top: 1px solid #E6E8EC;;
}

.persons-list .views-icon-link {
    display: flex;
    justify-content: center;
    align-items: center;

    a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        margin: 2px 0 0;
        border-radius: 50%;
        font-size: 0;
        transition: var(--vierzwo-transition-short);

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

        &::before {
            content: url("/modules/custom/uv_admin/icons/edit.svg");
            filter: brightness(0) saturate(100%) invert(14%) sepia(98%) saturate(7498%) hue-rotate(318deg) brightness(86%) contrast(117%);
        }
    }
}
/* Reset filters: icon button like the Gin views reset (e.g. /admin/newsletter),
   see .views-exposed-form input[id^="edit-reset--"] in 42-filter.css. */
.persons-list .persons-primary-filters input[id^="edit-reset"] {
  width: 40px;
  height: 40px;
  padding: 0;
  font-size: 0;
  background-color: transparent;
  background-image: url('/modules/custom/uv_admin/icons/close_dark.svg');
  background-size: 12px 12px;
  background-repeat: no-repeat;
  background-position: center;
  border-color: #C3C3C3 !important;
  cursor: pointer;
}

.persons-list .persons-primary-filters input[id^="edit-reset"]:hover,
.persons-list .persons-primary-filters input[id^="edit-reset"]:focus {
  background-color: transparent;
  border-color: #000 !important;
}

/* More filters: empty date fields and birthday selects in the placeholder
   color like the other inputs (Claro/Gin --input-fg-color--placeholder). */
.persons-list .persons-extra-filters input.form-date.is-empty:not(:focus),
.persons-list .persons-extra-filters select.form-select:has(option[value=""]:checked),
.persons-list .persons-extra-filters .chosen-container-single .chosen-single.chosen-default,
.persons-list .persons-extra-filters .chosen-container-single .chosen-single.chosen-default span {
  color: var(--input-fg-color--placeholder);
}

.persons-list .persons-extra-filters select.form-select option {
  color: var(--input-fg-color);
}

/* More filters: same border as the text/select2 fields (Gin hover/focus kept). */
.persons-list .persons-extra-filters input.form-date:not(:hover):not(:focus),
.persons-list .persons-extra-filters select.form-select:not(:hover):not(:focus),
.persons-list .persons-extra-filters .chosen-container-single:not(.chosen-container-active) .chosen-single:not(:hover) {
  border-color: var(--gin-border-color-form-element);
}

/* The search container shares its id with the Memdex lists, whose grid in
   42-filter.css (#edit-search-container: 1fr max-content) gave the "more
   filters" details its own column, so the button could not reach the right.
   Single column, but the fields keep their size (max. 270px like /crm/process)
   and only the filter button moves to the right. */
.persons-list #edit-search-container {
  display: block;
}

/* Doubled class: persons-list.css (flex: 1 1 190px) loads later. */
.persons-list .persons-primary-filters.persons-primary-filters > :not(.button) {
  flex: 0 1 270px;
  min-width: 0;
}

/* Filter button right-aligned like /crm/process (also when it wraps into its own line).
   Doubled class: persons-list.css (.button { margin: 0 }) loads later. */
.persons-list .persons-primary-filters.persons-primary-filters .persons-filter-submit {
  margin-inline-start: auto;
}