/* Keep summary configuration options inside the available width and allow wrapping. */
html body #root .dashboard-overview-config-panel:not(.portal-overview-config-panel) {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(160px, 180px)) !important;
  justify-content: start !important;
  gap: 6px 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 4px 0 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body #root .dashboard-overview-config-panel:not(.portal-overview-config-panel) > .dashboard-overview-config-option {
  min-width: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 560px) {
  html body #root .dashboard-overview-config-panel:not(.portal-overview-config-panel) {
    grid-template-columns: minmax(0, 180px) !important;
  }
}
@media (min-width: 561px) and (max-width: 900px) {
  html body #root .dashboard-overview-config-panel:not(.portal-overview-config-panel) { grid-template-columns: repeat(2, minmax(0, 180px)) !important; }
}
html body #root .dashboard-overview-config-panel:not(.portal-overview-config-panel) > .dashboard-overview-config-option { min-height:38px!important;grid-template-columns:15px minmax(0,1fr) auto!important;gap:6px!important;padding:6px 7px!important;font-size:12px!important;line-height:1.2!important; }

/* Compact the actual dashboard visibility choices in the mother account. */
html body #root .dashboard-quick-choice-button {
  width: 190px !important;
  min-width: 0 !important;
  max-width: 190px !important;
  justify-self: start !important;
  box-sizing: border-box !important;
  border-bottom: 0 !important;
}

html body #root div:has(> .tiny + div > .dashboard-quick-choice-button) {
  border: 0 !important;
}

/* The dashboard's personal visibility toggles are these actual buttons. */
html body #root div:has(> .dashboard-quick-choice-button) {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 165px), 180px)) !important;
  justify-content: start !important;
  gap: 0 6px !important;
  width: 100% !important;
  min-width: 0 !important;
}

html body #root .dashboard-quick-choice-button {
  width: 180px !important;
  min-width: 0 !important;
  max-width: 180px !important;
  min-height: 46px !important;
  height: 46px !important;
  padding: 3px 5px !important;
  grid-template-columns: 17px minmax(0, 1fr) 48px !important;
  column-gap: 6px !important;
  border-bottom: 1px solid #d8e2eb !important;
  background: transparent !important;
}

html body #root .dashboard-quick-choice-button > span:first-child {
  width: 17px !important;
  height: 17px !important;
  flex-basis: 17px !important;
  font-size: 13px !important;
}

html body #root .dashboard-quick-choice-button > span:nth-child(2) {
  font-size: 12px !important;
  line-height: 1.1 !important;
  font-weight: 750 !important;
}

html body #root .dashboard-quick-choice-button > span:nth-child(3) {
  font-size: 10px !important;
  line-height: 1 !important;
}

/* Keep the shared app-zoom-target hover/focus/active animation enabled. */
html body #root .dashboard-quick-choice-button.is-activating {
  transform: translateY(-4px) scale(1.035) !important;
}

/* Match the compact, flat summary controls shown in the reference image. */
html body #root .dashboard-overview-config-panel:not(.portal-overview-config-panel) {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 145px), min(100%, 165px))) !important;
  justify-content: start !important;
  gap: 3px 6px !important;
  padding: 1px 0 !important;
}

html body #root .dashboard-overview-config-panel:not(.portal-overview-config-panel) > .dashboard-overview-config-option {
  position: static !important;
  width: 100% !important;
  min-height: 29px !important;
  grid-template-columns: 14px minmax(0, 1fr) auto !important;
  gap: 4px !important;
  padding: 2px 3px 3px !important;
  border: 0 !important;
  border-bottom: 1px solid #d8e2eb !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #24364c !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  transform: none !important;
}

html body #root .dashboard-overview-config-panel:not(.portal-overview-config-panel) > .dashboard-overview-config-option::before {
  display: none !important;
}

html body #root .dashboard-overview-config-panel:not(.portal-overview-config-panel) > .dashboard-overview-config-option:hover,
html body #root .dashboard-overview-config-panel:not(.portal-overview-config-panel) > .dashboard-overview-config-option:focus-within {
  background: #f7fbfa !important;
  box-shadow: none !important;
  transform: none !important;
}

html body #root .dashboard-overview-config-panel:not(.portal-overview-config-panel) .dashboard-overview-config-option input[type="checkbox"] {
  width: 14px !important;
  height: 14px !important;
}

html body #root .dashboard-overview-config-panel:not(.portal-overview-config-panel) .dashboard-overview-config-option > .tiny {
  font-size: 9px !important;
}

@media (max-width: 560px) {
  html body #root .dashboard-overview-config-panel:not(.portal-overview-config-panel) {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 145px), min(100%, 165px))) !important;
  }
}