.page {
  width: 100%;
  height: calc(100vh - 60px);
  padding: 16px;
  gap: 12px;
  background: #f7f8fa;
}

.panel {
  border-color: #e5e6eb;
  border-radius: 4px;
  background: #ffffff;
  box-shadow: none;
}

.pageIntro {
  gap: 4px;
}

.breadcrumb {
  color: #86909c;
  font-size: 13px;
  line-height: 20px;
}

.breadcrumbLink {
  border: 0;
  padding: 0;
  background: transparent;
  color: #86909c;
  font: inherit;
  line-height: inherit;
  cursor: pointer;
  transition: color 0.2s ease;
}

.breadcrumbLink:hover {
  color: #1874ff;
}

.breadcrumbCurrent {
  color: #4e5969;
}

.modalContent {
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
}

.modalHeader {
  padding: 16px 20px 0;
  background: #ffffff;
}

.modalTitle {
  color: #1d2129;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}

.modalBody {
  padding: 16px 20px 20px;
  background: #ffffff;
}

.modalContent :global(.mantine-Button-root) {
  min-height: 32px;
  border-radius: 4px;
  padding-inline: 12px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: none;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.modalContent :global(.mantine-Button-root[data-variant="filled"]) {
  --button-bg: #1874ff;
  --button-hover: #0f6ae8;
  --button-color: #ffffff;
  --button-bd: transparent;
  background: #1874ff !important;
  color: #ffffff !important;
}

.modalContent :global(.mantine-Button-root[data-variant="filled"]:hover) {
  background: #0f6ae8 !important;
}

.modalContent :global(.mantine-Button-root[data-variant="default"]) {
  border-color: #e5e6eb;
  background: #ffffff;
  color: #4e5969;
}

.modalContent :global(.mantine-Button-root[data-disabled]),
.modalContent :global(.mantine-Button-root:disabled) {
  border-color: #e5e6eb !important;
  background: #f2f3f5 !important;
  color: #c9cdd4 !important;
  cursor: not-allowed;
  opacity: 1;
}

.modalContent :global(.mantine-Button-root[data-disabled]:hover),
.modalContent :global(.mantine-Button-root:disabled:hover) {
  border-color: #e5e6eb !important;
  background: #f2f3f5 !important;
  color: #c9cdd4 !important;
}

.modalForm {
  gap: 12px;
}

.modalMetaText {
  color: #4e5969;
  font-size: 14px;
  line-height: 20px;
}

.modalActions {
  gap: 12px;
}

.modalForm :global(.mantine-InputWrapper-label) {
  color: #4e5969;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  margin-bottom: 4px;
}

.modalForm :global(.mantine-Switch-label),
.modalForm :global(.mantine-Checkbox-label) {
  color: #4e5969;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.modalForm :global(.mantine-Input-input),
.modalForm :global(.mantine-Select-input),
.modalForm :global(.mantine-DateInput-input),
.modalForm :global(.mantine-NumberInput-input),
.modalForm :global(.mantine-PillsInput-root),
.modalForm :global(.mantine-Textarea-input) {
  min-height: 32px;
  border-color: #e5e6eb;
  border-radius: 4px;
  background: #f7f8fa;
  color: #1d2129;
  font-size: 14px;
  box-shadow: none;
  transition:
    border-color 0.2s ease,
    color 0.2s ease,
    background-color 0.2s ease;
}

.modalForm :global(.mantine-PillsInput-root) {
  padding-inline: 12px;
}

.modalForm :global(.mantine-PillsInput-input) {
  min-height: 30px;
  background: transparent;
  color: #1d2129;
}

.modalForm :global(.mantine-Textarea-input) {
  min-height: 96px;
}

.modalForm :global(.mantine-Input-input::placeholder),
.modalForm :global(.mantine-Select-input::placeholder),
.modalForm :global(.mantine-DateInput-input::placeholder),
.modalForm :global(.mantine-NumberInput-input::placeholder),
.modalForm :global(.mantine-PillsInput-input::placeholder),
.modalForm :global(.mantine-Textarea-input::placeholder) {
  color: #86909c;
}

.modalForm :global(.mantine-Input-input:focus),
.modalForm :global(.mantine-Select-input:focus),
.modalForm :global(.mantine-DateInput-input:focus),
.modalForm :global(.mantine-NumberInput-input:focus),
.modalForm :global(.mantine-PillsInput-root:focus-within),
.modalForm :global(.mantine-Textarea-input:focus) {
  border-color: #1874ff;
  background: #ffffff;
  box-shadow: 0 0 0 2px rgba(24, 116, 255, 0.12);
}

.modalForm :global(.mantine-Input-input[readonly]),
.modalForm :global(.mantine-DateInput-input[readonly]),
.modalForm :global(.mantine-NumberInput-input[readonly]),
.modalForm :global(.mantine-Textarea-input[readonly]) {
  background: #f7f8fa;
  color: #86909c;
}

.modalForm :global(.mantine-Input-section),
.modalForm :global(.mantine-Select-section),
.modalForm :global(.mantine-DateInput-section),
.modalForm :global(.mantine-NumberInput-section) {
  color: #86909c;
}

.modalForm :global(.mantine-Switch-root) {
  --switch-height: 20px;
  --switch-width: 34px;
  --switch-thumb-size: 14px;
  --switch-radius: 999px;
  --switch-color: #1874ff;
}

.modalForm :global(.mantine-Checkbox-root) {
  --checkbox-color: #1874ff;
  --checkbox-radius: 4px;
}

.modalForm :global(.mantine-Checkbox-input) {
  border-color: #c9cdd4;
  background: #ffffff;
}

.modalForm :global(.mantine-Button-root) {
  min-height: 32px;
  border-radius: 4px;
  padding-inline: 12px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: none;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.modalForm :global(.mantine-Button-root[data-variant="filled"]) {
  --button-bg: #1874ff;
  --button-hover: #0f6ae8;
  --button-color: #ffffff;
  --button-bd: transparent;
  background: #1874ff !important;
  color: #ffffff !important;
}

.modalForm :global(.mantine-Button-root[data-variant="filled"]:hover) {
  background: #0f6ae8 !important;
}

.modalForm :global(.mantine-Button-root[data-variant="default"]) {
  border-color: #e5e6eb;
  background: #ffffff;
  color: #4e5969;
}

.modalForm :global(.mantine-Button-root[data-disabled]),
.modalForm :global(.mantine-Button-root:disabled) {
  border-color: #e5e6eb !important;
  background: #f2f3f5 !important;
  color: #c9cdd4 !important;
  cursor: not-allowed;
  opacity: 1;
}

.modalForm :global(.mantine-Button-root[data-disabled]:hover),
.modalForm :global(.mantine-Button-root:disabled:hover) {
  border-color: #e5e6eb !important;
  background: #f2f3f5 !important;
  color: #c9cdd4 !important;
}

.filterPanel {
  position: relative;
}

.detailContent {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
}

.detailForm {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  gap: 12px;
}

.detailIntroGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 20px;
}

.detailSection {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  gap: 12px;
}

.detailActionBar {
  padding-top: 12px;
  border-top: 1px solid #e5e6eb;
}

.detailScrollArea {
  flex: 1;
  min-height: 0;
}

.readValue {
  min-height: 32px;
  border-color: #e5e6eb;
  border-radius: 4px;
  background: #f7f8fa;
  display: flex;
  align-items: center;
}

.readValueText {
  width: 100%;
  color: #1d2129;
  font-size: 14px;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detailForm :global(.mantine-InputWrapper-label) {
  color: #4e5969;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  margin-bottom: 4px;
}

.detailForm :global(.mantine-Input-input),
.detailForm :global(.mantine-Select-input),
.detailForm :global(.mantine-ColorInput-input),
.detailForm :global(.mantine-NumberInput-input),
.detailForm :global(.mantine-PillsInput-root),
.detailForm :global(.mantine-Textarea-input) {
  min-height: 32px;
  border-color: #e5e6eb;
  border-radius: 4px;
  background: #f7f8fa;
  color: #1d2129;
  font-size: 14px;
  box-shadow: none;
  transition:
    border-color 0.2s ease,
    color 0.2s ease,
    background-color 0.2s ease;
}

.detailForm :global(.mantine-PillsInput-root) {
  padding-inline: 12px;
}

.detailForm :global(.mantine-PillsInput-input) {
  min-height: 30px;
  background: transparent;
  color: #1d2129;
}

.detailForm :global(.mantine-Textarea-input) {
  min-height: 96px;
}

.detailForm :global(.mantine-Input-input::placeholder),
.detailForm :global(.mantine-Select-input::placeholder),
.detailForm :global(.mantine-ColorInput-input::placeholder),
.detailForm :global(.mantine-NumberInput-input::placeholder),
.detailForm :global(.mantine-PillsInput-input::placeholder),
.detailForm :global(.mantine-Textarea-input::placeholder) {
  color: #86909c;
}

.detailForm :global(.mantine-Input-input:focus),
.detailForm :global(.mantine-Select-input:focus),
.detailForm :global(.mantine-ColorInput-input:focus),
.detailForm :global(.mantine-NumberInput-input:focus),
.detailForm :global(.mantine-PillsInput-root:focus-within),
.detailForm :global(.mantine-Textarea-input:focus) {
  border-color: #1874ff;
  background: #ffffff;
  box-shadow: 0 0 0 2px rgba(24, 116, 255, 0.12);
}

.detailForm :global(.mantine-Input-input[readonly]),
.detailForm :global(.mantine-ColorInput-input[readonly]),
.detailForm :global(.mantine-NumberInput-input[readonly]),
.detailForm :global(.mantine-Textarea-input[readonly]) {
  background: #f7f8fa;
  color: #86909c;
}

.detailForm :global(.mantine-Input-section),
.detailForm :global(.mantine-Select-section),
.detailForm :global(.mantine-ColorInput-section),
.detailForm :global(.mantine-NumberInput-section) {
  color: #86909c;
}

.detailForm :global(.mantine-Pill-root) {
  background: #e7efff;
  color: #1874ff;
}

.detailForm :global(.mantine-Button-root) {
  min-height: 32px;
  border-radius: 4px;
  padding-inline: 12px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: none;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.detailForm :global(.mantine-Button-root[data-variant="filled"]) {
  --button-bg: #1874ff;
  --button-hover: #0f6ae8;
  --button-color: #ffffff;
  --button-bd: transparent;
  background: #1874ff !important;
  color: #ffffff !important;
}

.detailForm :global(.mantine-Button-root[data-variant="filled"]:hover) {
  background: #0f6ae8 !important;
}

.detailForm :global(.mantine-Button-root[data-variant="default"]),
.detailForm :global(.mantine-Button-root[data-variant="light"]) {
  border-color: #e5e6eb;
  background: #ffffff;
  color: #4e5969;
}

.detailForm :global(.mantine-ActionIcon-root) {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  box-shadow: none;
}

.detailForm :global(.mantine-Table-table) {
  border-color: #e5e6eb;
  background: #ffffff;
  font-size: 14px;
}

.detailForm :global(.mantine-Table-th) {
  background: #f7f8fa;
  color: #4e5969;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  white-space: nowrap;
}

.detailForm :global(.mantine-Table-th),
.detailForm :global(.mantine-Table-td) {
  border-color: #e5e6eb;
  padding: 10px 12px;
}

.detailForm :global(.mantine-Table-td) {
  color: #1d2129;
  line-height: 20px;
}

.tableViewport {
  min-width: 0;
  max-width: 100%;
  overflow: auto;
  overscroll-behavior: contain;
}

.filterStack {
  gap: 12px;
}

.filterTopRow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px 20px;
  align-items: center;
}

.filterExpandedGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px 20px;
  padding-top: 12px;
  border-top: 1px solid #e5e6eb;
}

.filterField {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

.filterLabel {
  flex: 0 0 var(--setting-inline-filter-label-width, 80px);
  color: #4e5969;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.filterControl {
  flex: 1;
  min-width: 0;
}

.filterControl :global(.mantine-InputWrapper-root),
.filterControl :global(.mantine-PillsInput-root) {
  width: 100%;
}

.filterControl :global(.mantine-InputWrapper-label) {
  display: none;
}

.filterActionsAlignEnd {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  grid-column: -2 / -1;
}

.collapseToggle {
  min-width: auto;
  padding-inline: 0;
  align-self: center;
  justify-self: start;
}

.operationGroup {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.operationLink {
  border: 0;
  padding: 0;
  background: transparent;
  color: #1874ff;
  font-size: 13px;
  line-height: 20px;
  cursor: pointer;
  transition:
    color 0.2s ease,
    opacity 0.2s ease;
}

.operationLinkDanger {
  color: #f53f3f;
}

.operationLinkDisabled {
  color: #c9cdd4;
  cursor: not-allowed;
}

.operationDivider {
  width: 1px;
  height: 12px;
  background: #e5e6eb;
}

.statusBadge {
  min-height: 24px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
}

.statusPositive {
  background: #e8ffea;
  color: #00b42a;
}

.statusNegative {
  background: #ffece8;
  color: #f53f3f;
}

.statusWarning {
  background: #fff7e8;
  color: #ff7d00;
}

.statusInfo {
  background: #e8f3ff;
  color: #1874ff;
}

.statusNeutral {
  background: #f2f3f5;
  color: #4e5969;
}

.filterPanel :global(.mantine-InputWrapper-label) {
  color: #4e5969;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  margin-bottom: 4px;
}

.filterPanel :global(.mantine-Input-input),
.filterPanel :global(.mantine-Select-input),
.filterPanel :global(.mantine-DateInput-input),
.filterPanel :global(.mantine-NumberInput-input),
.filterPanel :global(.mantine-PillsInput-root),
.filterPanel :global(.mantine-Textarea-input) {
  min-height: 32px;
  border-color: #e5e6eb;
  border-radius: 4px;
  background: #f7f8fa;
  color: #1d2129;
  font-size: 14px;
  box-shadow: none;
  transition:
    border-color 0.2s ease,
    color 0.2s ease,
    background-color 0.2s ease;
}

.filterPanel :global(.mantine-PillsInput-root) {
  padding-inline: 12px;
}

.filterPanel :global(.mantine-PillsInput-input) {
  min-height: 30px;
  background: transparent;
  color: #1d2129;
}

.filterPanel :global(.mantine-Textarea-input) {
  min-height: 96px;
}

.filterPanel :global(.mantine-Input-input::placeholder),
.filterPanel :global(.mantine-Select-input::placeholder),
.filterPanel :global(.mantine-DateInput-input::placeholder),
.filterPanel :global(.mantine-NumberInput-input::placeholder),
.filterPanel :global(.mantine-PillsInput-input::placeholder),
.filterPanel :global(.mantine-Textarea-input::placeholder) {
  color: #86909c;
}

.filterPanel :global(.mantine-Input-input:focus),
.filterPanel :global(.mantine-Select-input:focus),
.filterPanel :global(.mantine-DateInput-input:focus),
.filterPanel :global(.mantine-NumberInput-input:focus),
.filterPanel :global(.mantine-PillsInput-root:focus-within),
.filterPanel :global(.mantine-Textarea-input:focus) {
  border-color: #1874ff;
  background: #ffffff;
  box-shadow: 0 0 0 2px rgba(24, 116, 255, 0.12);
}

.filterPanel :global(.mantine-Button-root[data-variant="transparent"]) {
  min-height: auto;
  height: auto;
  padding-inline: 0;
  color: #1874ff;
}

.filterPanel :global(.mantine-Button-root),
.headerActions :global(.mantine-Button-root) {
  min-height: 32px;
  border-radius: 4px;
  padding-inline: 12px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: none;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.filterPanel :global(.mantine-Button-root[data-variant="filled"]),
.headerActions :global(.mantine-Button-root[data-variant="filled"]) {
  --button-bg: #1874ff;
  --button-hover: #0f6ae8;
  --button-color: #ffffff;
  --button-bd: transparent;
  background: #1874ff !important;
  color: #ffffff !important;
}

.filterPanel :global(.mantine-Button-root[data-variant="filled"]:hover),
.headerActions :global(.mantine-Button-root[data-variant="filled"]:hover) {
  background: #0f6ae8 !important;
}

.filterPanel :global(.mantine-Button-root[data-variant="default"]),
.headerActions :global(.mantine-Button-root[data-variant="default"]) {
  border-color: #e5e6eb;
  background: #ffffff;
  color: #4e5969;
}

.filterPanel :global(.mantine-Button-root[data-disabled]),
.filterPanel :global(.mantine-Button-root:disabled),
.headerActions :global(.mantine-Button-root[data-disabled]),
.headerActions :global(.mantine-Button-root:disabled) {
  border-color: #e5e6eb !important;
  background: #f2f3f5 !important;
  color: #c9cdd4 !important;
  cursor: not-allowed;
  opacity: 1;
}

.filterPanel :global(.mantine-Button-root[data-disabled]:hover),
.filterPanel :global(.mantine-Button-root:disabled:hover),
.headerActions :global(.mantine-Button-root[data-disabled]:hover),
.headerActions :global(.mantine-Button-root:disabled:hover) {
  border-color: #e5e6eb !important;
  background: #f2f3f5 !important;
  color: #c9cdd4 !important;
}

.filterPanel :global(.mantine-ActionIcon-root),
.headerActions :global(.mantine-ActionIcon-root) {
  width: 32px;
  height: 32px;
  border-radius: 4px;
}

.filterPanel :global(.mantine-Pill-root) {
  background: #e7efff;
  color: #1874ff;
}

.filterPanel :global(.mantine-PillsInput-field),
.filterPanel :global(.mantine-Select-section),
.filterPanel :global(.mantine-DateInput-section) {
  color: #86909c;
}

.contentPanel {
  border-color: #e5e6eb;
}

.contentPanel :global(.mantine-datatable-pagination) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px !important;
  color: #4e5969;
}

.contentPanel :global(.mantine-datatable-pagination-text),
.contentPanel :global(.mantine-datatable-pagination .mantine-Text-root) {
  color: #4e5969;
  font-size: 12px;
  line-height: 20px;
}

.contentPanel
  :global(.mantine-datatable-pagination button[data-variant="default"]),
.contentPanel
  :global(.mantine-datatable-pagination button[data-variant="light"]) {
  min-height: 28px !important;
  height: 28px !important;
  padding-inline: 10px !important;
  border-radius: 4px !important;
  border-color: #e5e6eb;
  background: #ffffff;
  color: #4e5969;
  font-size: 12px;
  box-shadow: none;
}

.contentPanel
  :global(.mantine-datatable-pagination button[data-variant="default"]:hover),
.contentPanel
  :global(.mantine-datatable-pagination button[data-variant="light"]:hover) {
  background: #f7f8fa;
  color: #1d2129;
}

.contentPanel :global(.mantine-datatable-pagination-pages) {
  --pagination-control-size: 28px;
  --pagination-control-fz: 12px;
}

.contentPanel :global(.mantine-datatable-pagination .mantine-Select-input) {
  min-height: 28px;
  height: 28px;
  border-color: #e5e6eb;
  border-radius: 4px;
  background: #ffffff;
  color: #4e5969;
  font-size: 12px;
  box-shadow: none;
}

.contentPanel :global(.mantine-datatable-pagination .mantine-Select-section) {
  color: #86909c;
}

.contentPanel :global(.mantine-Pagination-dots) {
  color: #86909c;
}

.contentPanel :global(.mantine-Pagination-control),
.contentPanel :global(.mantine-datatable-pagination-pages-control) {
  min-width: 28px !important;
  height: 28px !important;
  border: 0;
  border-radius: 4px !important;
  background: transparent;
  color: #4e5969;
  box-shadow: none;
}

.contentPanel :global(.mantine-Pagination-control:hover),
.contentPanel :global(.mantine-datatable-pagination-pages-control:hover) {
  background: #f2f3f5;
  color: #1d2129;
}

.contentPanel :global(.mantine-Pagination-control[data-active]),
.contentPanel
  :global(.mantine-datatable-pagination-pages-control[data-active]) {
  background: #e7efff;
  border-color: transparent;
  color: #1874ff;
}

.contentPanel :global(.mantine-Pagination-control[data-active]:hover),
.contentPanel
  :global(.mantine-datatable-pagination-pages-control[data-active]:hover) {
  background: #dbe8ff;
  border-color: transparent;
  color: #1874ff;
}

.contentPanel :global(.mantine-Pagination-control[data-disabled]),
.contentPanel
  :global(.mantine-datatable-pagination-pages-control[data-disabled]) {
  background: transparent;
  color: #c9cdd4;
}

.filterActions,
.headerActions {
  gap: 8px;
}

.listHeader {
  margin-bottom: 12px;
}

.listHeaderTitle {
  color: #1d2129;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}

.listHeaderCount {
  color: #86909c;
  font-size: 12px;
  line-height: 20px;
}

.sectionHeader {
  padding-bottom: 12px;
  border-bottom: 1px solid #e5e6eb;
}

.sectionEyebrow {
  color: #1874ff;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sectionTitle {
  color: #1d2129;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}

.sectionDescription {
  color: #86909c;
  font-size: 13px;
  line-height: 20px;
}

.settingTabsList {
  padding: 4px;
  border: 1px solid #e5e6eb;
  border-radius: 4px;
  background: #f7f8fa;
  gap: 8px;
}

.settingTabsTab {
  min-height: 32px;
  border-radius: 4px;
  padding: 0 12px;
  color: #4e5969;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.settingTabsTab[data-active],
.settingTabsTab[data-active]:hover {
  background: #1874ff;
  color: #ffffff;
}

.settingTabsTabLabel {
  color: inherit;
  font-size: 14px;
  line-height: 20px;
}

.settingTabsTab[data-active] .settingTabsTabLabel,
.settingTabsTab[data-active]:hover .settingTabsTabLabel {
  color: #ffffff;
}

.settingTabsPanel {
  flex: 1;
  min-width: 0;
  min-height: 0;
  padding-top: 16px;
}

@media (max-width: 1200px) {
  .filterTopRow,
  .filterExpandedGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .filterActionsAlignEnd {
    justify-self: stretch;
  }
}

@media (max-width: 720px) {
  .detailIntroGrid {
    grid-template-columns: 1fr;
  }

  .filterTopRow,
  .filterExpandedGrid {
    grid-template-columns: 1fr;
  }

  .filterField {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .filterLabel {
    flex-basis: auto;
  }

  .filterActionsAlignEnd {
    grid-column: auto;
  }
}