/* Match the Reservation Sales card-view filter panel without changing field behavior. */
.admin-filter-modal {
  --dhh-select2-control-height: 2.55rem;
  --dhh-select2-control-border: #d0d5dd;
  --dhh-select2-control-bg: #fff;
  --dhh-select2-control-radius: 6px;
  --dhh-select2-control-color: #101828;
  --dhh-select2-control-muted: #5d6b82;
  --dhh-select2-control-focus: #203c61;
  --dhh-select2-control-ring: rgba(16, 24, 40, 0.14);
  --dhh-select2-font-size: 0.82rem;
  position: fixed;
  inset: 50% auto auto 50%;
  width: min(52rem, calc(100vw - 3rem));
  max-height: calc(100dvh - 3rem);
  margin: 0;
  padding: 0;
  overflow-y: auto;
  border: 1px solid #d0d5dd;
  border-radius: 10px;
  background: #fff;
  color: #101828;
  box-shadow: 0 14px 30px #1018282b;
  font: 13px/1.45 var(--admin-ui-font);
  transform: translate(-50%, -50%);
}

.admin-filter-modal * { font-weight: 400 !important; }
.admin-filter-modal::backdrop { background: rgba(16, 24, 40, 0.22); backdrop-filter: blur(6px); }
.admin-filter-modal > form { background: inherit; }

.admin-filter-modal .admin-filter-modal__header,
.admin-filter-modal .admin-filter-modal__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 0.9rem;
  background: inherit;
  color: inherit;
}

.admin-filter-modal .admin-filter-modal__header { border-bottom: 1px solid #eef0f3; }
.admin-filter-modal .admin-filter-modal__header strong { color: #344054; font-size: 0.8rem; }
.admin-filter-modal .admin-filter-modal__header button {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--admin-button-primary);
  font: 0.68rem/1.45 var(--admin-ui-font);
  cursor: pointer;
}

.admin-filter-modal .admin-filter-modal__fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  padding: 0.9rem;
  background: inherit;
}

.admin-filter-modal .admin-filter-modal__fields > label {
  display: grid;
  align-content: start;
  min-width: 0;
  gap: 0.32rem;
  color: #5d6b82;
  font-size: 0.68rem;
}

.admin-filter-modal .admin-filter-modal__fields > label > span { color: inherit; font-size: inherit; }
.admin-filter-modal .admin-filter-modal__fields :is(select, .admin-form-control) {
  width: 100%;
  height: 2.55rem;
  min-width: 0;
  border: 1px solid #d0d5dd;
  border-radius: 7px;
  padding: 0 0.65rem;
  background: #fff;
  color: #101828;
  font: 0.77rem/1.45 var(--admin-ui-font);
}

.admin-filter-modal .dhh-select2 + .select2-container {
  --dhh-select2-control-height: 2.55rem;
  --dhh-select2-control-border: #d0d5dd;
  --dhh-select2-control-radius: 6px;
  --dhh-select2-control-bg: #fff;
  --dhh-select2-control-color: #101828;
  --dhh-select2-control-muted: #5d6b82;
  --dhh-select2-control-focus: #203c61;
  --dhh-select2-control-ring: rgba(16, 24, 40, 0.14);
  --dhh-select2-font-size: 0.82rem;
}

.admin-filter-modal .dhh-select2 + .select2-container .select2-selection--multiple {
  border-radius: 6px;
  background: #fff;
  color: #101828;
  font-size: 0.82rem;
}
.admin-filter-modal .admin-filter-modal__fields :is(select, .admin-form-control):focus {
  border-color: #203c61;
  outline: none;
  box-shadow: 0 0 0 3px #203c611a;
}

.admin-filter-modal .admin-filter-modal__footer {
  justify-content: flex-end;
  gap: 0.5rem;
  border-top: 1px solid #eef0f3;
}

.admin-filter-modal .admin-filter-modal__footer :is(.admin-button, .leads-button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.15rem;
  border: 1px solid #d0d5dd;
  border-radius: 7px;
  padding: 0 0.6rem;
  background: #fff;
  color: #5d6b82;
  box-shadow: none;
  font: 0.68rem/1.2 var(--admin-ui-font);
}

.admin-filter-modal .admin-filter-modal__footer .admin-button.admin-button--secondary { background: #fff; }

.admin-filter-modal .admin-filter-modal__footer :is(.admin-button--primary, .leads-button--primary) {
  border-color: var(--admin-button-primary);
  background: var(--admin-button-primary);
  color: #fff;
}

.admin-filter-modal .admin-filter-modal__footer :is(.admin-button--primary, .leads-button--primary):hover {
  border-color: var(--admin-button-primary-hover);
  background: var(--admin-button-primary-hover);
}

.admin-filter-modal :focus-visible { outline: 2px solid var(--admin-button-primary); outline-offset: 2px; }

@media (max-width: 800px) {
  .admin-filter-modal {
    inset: calc(var(--admin-topbar-height) + 0.75rem) 1rem auto;
    width: auto;
    max-height: calc(100dvh - var(--admin-topbar-height) - 1.5rem);
    transform: none;
  }
  .admin-filter-modal .admin-filter-modal__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .admin-filter-modal .admin-filter-modal__fields { grid-template-columns: 1fr; }
}

/*
 * Filter modals size to their fields instead of a fixed half-screen width.
 * Mark the modal [data-filter-modal] and its field grid [data-filter-fields];
 * each visible label, fieldset or .rs-field child counts as one field, except
 * [data-filter-check] checkbox rows, which span the full width. One
 * field gets a single narrow column, two or four get two columns, three or
 * five-plus get three. Doubled attributes outrank each page's own width and
 * column rules; phones keep their page-level layouts.
 */
/* Checkbox-only rows span the grid with the box before its label. */
[data-filter-fields][data-filter-fields] > [data-filter-check] { display: flex; grid-column: 1 / -1; align-items: center; gap: 0.5rem; }
[data-filter-fields][data-filter-fields] > [data-filter-check] > input[type="checkbox"] { flex: none; order: -1; width: auto; margin: 0; }

@media (min-width: 801px) {
  [data-filter-modal][data-filter-modal] { max-width: calc(100vw - 3rem); }

  [data-filter-modal][data-filter-modal]:has([data-filter-fields] > :nth-child(1 of :is(label, fieldset, .rs-field):not([hidden], [data-filter-check])):nth-last-child(1 of :is(label, fieldset, .rs-field):not([hidden], [data-filter-check]))) { width: 24rem; }
  [data-filter-fields][data-filter-fields]:has(> :nth-child(1 of :is(label, fieldset, .rs-field):not([hidden], [data-filter-check])):nth-last-child(1 of :is(label, fieldset, .rs-field):not([hidden], [data-filter-check]))) { grid-template-columns: minmax(0, 1fr); }

  [data-filter-modal][data-filter-modal]:has([data-filter-fields] > :nth-child(2 of :is(label, fieldset, .rs-field):not([hidden], [data-filter-check])):nth-last-child(1 of :is(label, fieldset, .rs-field):not([hidden], [data-filter-check])), [data-filter-fields] > :nth-child(4 of :is(label, fieldset, .rs-field):not([hidden], [data-filter-check])):nth-last-child(1 of :is(label, fieldset, .rs-field):not([hidden], [data-filter-check]))) { width: 36rem; }
  [data-filter-fields][data-filter-fields]:has(> :nth-child(2 of :is(label, fieldset, .rs-field):not([hidden], [data-filter-check])):nth-last-child(1 of :is(label, fieldset, .rs-field):not([hidden], [data-filter-check])), > :nth-child(4 of :is(label, fieldset, .rs-field):not([hidden], [data-filter-check])):nth-last-child(1 of :is(label, fieldset, .rs-field):not([hidden], [data-filter-check]))) { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  [data-filter-modal][data-filter-modal]:has([data-filter-fields] > :nth-child(3 of :is(label, fieldset, .rs-field):not([hidden], [data-filter-check])):nth-last-child(1 of :is(label, fieldset, .rs-field):not([hidden], [data-filter-check])), [data-filter-fields] > :nth-child(5 of :is(label, fieldset, .rs-field):not([hidden], [data-filter-check]))) { width: 46rem; }
  [data-filter-fields][data-filter-fields]:has(> :nth-child(3 of :is(label, fieldset, .rs-field):not([hidden], [data-filter-check])):nth-last-child(1 of :is(label, fieldset, .rs-field):not([hidden], [data-filter-check])), > :nth-child(5 of :is(label, fieldset, .rs-field):not([hidden], [data-filter-check]))) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}